Thanks for your comment, these are excellent questions.
There are several reasons why UIScript is better than CSS, but here are five (plus one):
1. It uses a single language with a single syntax, thus learning and effectively using it takes much, much less time, energy and resources, especially if you already know how to program.
2. It replaces highly specific web concepts like specificity, pseudo-elements, flex or media queries with extremely versatile, intuitive and ubiquitous programming concepts like variables, constants, objects, functions, conditionals, loops, operators and so on.
3. Web dev would become a highly transferable skill: if you know web dev you also know how to program, and vice versa.
4. Web developers would become extinct: programmers and graphic designers would be able to develop websites without any additional and specific knowledge (this might be a con for web devs but a major pro for small to medium businesses).
5. It allows you to separate your code in virtually endless ways, while HTML and CSS forces you to use a single paradigm (data, style, interactivity) which is undesirable in many projects. Think about components for example, where we encapsulate data, style and interactivity within one unit and separate those units instead. This is what you see here in this example and this is what every major front end framework is currently doing.
And +1, it would enable end-to-end and much higher level of accessibility, so even developing websites would become accessible to many, many more people.
So, how can you get this button later?
There are several ways, all within the realm of JS and programming. One option is to store a reference to the stack and access its children:
const stack = Stack(
Button("Log in"),
Button("Subscribe")
);
console.log(stack.children[0]);
Another is to simply store a reference to the button itself:
const loginButton = Button("Log in");
const subscribeButton = Button("Subscribe");
Stack(
loginButton,
subscribeButton
);
console.log(loginButton);
console.log(subscribeButton);
There is nothing special you need here, all Views are just regular old DOM elements, which in turn are just regular old JS objects. And objects are first-class citizens in JS, meaning you can pass them to and return them from functions, store a reference to them, pass them around and manipulate them just like any other data type.
If you prefer, you can use jQuery, or any other library, or even add an HTML id attribute and use that to get back to the element (although this might destroy the whole point of UIScript):
Stack(
Button("Log in).html("id", "login-button"),
Button("Subscribe").html("id", "subscribe-button")
);
document.getElementById("login-button");
You can think of UIScript as a demo of what the DOM API should look like in the browser without the constraints of HTML and CSS.
