The web's simplest UI framework.
With so many Javascript frameworks like React, Vue, and Angular, it can be challenging to make a simple website quickly, with little dependencies. Many of the leading frameworks require Node.js and other tools that make projects bloated.
Why are we dependant on a frameworks that require so much overhead just to get us a way to build declarative UI's. What if we stopped using React and Angular and went back to simple html, css, and javascript environment? Well, with ui.js you can.
ui.js is a small library, only ... lines long.
ui.js achieves this by relying mostly on vanilla JS principles, plus (and this is important) a declarative way of building the UI's which rely on the spread (...) operator. With ui.js you can build a declarative JS ui. Here is a simple example:
In general, you want to use HTML as much as possible.
This improves SEO, and makes your site load faster. In general you can make a html element
and then use ui.root(queryString) to use JS to create it's children.
For example, if you have an html element like
(example html code) then you can do
the following.
Eventual I may add functionality here that make the developer write even less code
While I think it is really useful to embed values created by JS into html this way, you can also use this same approach if you want to build a single paged application.
Often times, you have an api that will return a list for items. With ui.js it very easy to show each item to the user, here is an example:
Of course, with a little more effort we can make the list much more interactive.
Forms are also easy to implement, see the following example:
By now, you have seen some custom components already in use. See customForm function from the
"Forms" code example.
The main reason you would want to create a custom component would be to manage the state of each component at the component level. For example, the following code show how to create two counter buttons with their own counts using a custom component
Sometimes its convenient to just create the component inline, this comes in handy when you just need some simple state management.
Custom components are key because they allow your code to be reusable, simplified, and stateful. When you use a custom component, all of the "state" the variables you are using to keep track of data remain local.
Also, remember that just updating a components state will not automatically "rerender"
that component, You need to explicitly decided how the component gets rendered. In the above
example, you can see that we used a custom component content that was called every
time we wanted to show the user how many times they clicked on the button. Every time the user clicked
on the button we had to update the buttons children to show the new state.
You may want to have an action taken in one component that would effect the state of a completely
different component. You can do this with ui.publisher()
ui.publisher creates an object with 2 methods, publish which emits an event and
addSubscriber which allows a different component to receive the event.
Every time you call publish, all of the subscribers will be triggered, which allows you to update
their values with the data passed in by the publisher
And thats about it. As you can tell ui.js is super simple to use. It is declarative, which which means
you can simple look at the code to understand how the UI has been set up. You can build complex
UI's without needing JSX, React, Vue or other bloated frameworks.