The first thing that come in mind is the fact that it’s the first framework for category (would use again) and third for the category (want to learn) in stateofjs 2022’s statistics, so we have here a really competitive framework that is getting its part in the market, it’s created by Ryan Carniato, a great fan of React as he said in much of his conferences.
Ryan Carniato is a Principal Engineer at Netlify, he was also a member of MarkoJS Core Team in eBay, he is known for his knockout.js background and also for his admiration of ReactJS. After being in the field for 25 years, he ended with creating one of the most innovative frameworks SolidJS, he started it in 2016 and the first release was in 2021, so we have here 5 years of development.
Reactivity: the key concept of SolidJS
Before talking about Reactivity in SolidJS we should have a good understanding of what is reactive programming, to illustrate the concept here is a simple exemple:
a = b + c
//* where the value of a updates whenever the value of b or c changes.
Reactive programming is a paradigm of building software systems that is based on data flow. Instead of viewing the system as a sequence of assignments, consider it to be a collection of continually changing dynamic equations. The code specifies the interactions between various system components and how they evolve over time. With reactive programming, the system may automatically adjust to changes without the need for continual intervention.
Now let’s return to our reactivity in web development, it’s an important feature of user interface design because it guarantees that changes to the interface are reflected instantly. This is critical for providing users with a consistent and responsive experience.
Reactivity was all time a subject of a lot of discussion between experts, they were continually arguing about the reactivity of every frameworks, for exemple ReactJS is known as reactive framework but for Hevery Misko (The creator of AngularJS, Angular ans Qwik) Angular and ReactsJS are not reactive frameworks.
But the same person will talk about SolidJS as a reactive framework:
By the way Mr Hevery has created a new Framework called Qwik that we covered in multiple articles, here is an introduction to his framework:
Here in this tweet, Mr Misko mentioned a core principe in reactivity, fine-grained reactivity, so what is it?
Fine-grained Reactivity
Fine-grained reactivity is a type of reactivity that is applied at the most granular level possible. Ryan Carniato in his famous article has talked about it with a significant exemple:
Fine-grained reactivity is built from a network of primitives. By primitives, I am referring to simple constructs like
Promisesrather than JavaScript's primitive values like strings or numbers.
Each act as nodes in a graph. You can think of it as an idealised electric circuit. Any change applies to all nodes at the same time. The problem being solved is synchronisation at a single point in time. This is a problem space we often work in when building user interfaces.
-Ryan Carniato
This is the core concept of SolidJS, and to have a solid understanding, we should be aware of 3 important concepts: Signals, Memos and Effects.
Signals
Signals are the elements that we want to watch, they are composed of a getter, a setter and the value. Exemple of code:
const [count, setCount] = createSignal(0);
// read a value
console.log(count()); // 0
// set a value
setCount(3);
console.log(count()); //result: 3
Effects
So Signals are the ones we watch, but who is the watcher? it’s the Effect, it’s role is to observe the Signal, exemple pf code:
Like we can see in this exemple, the signal that we created is the Observable, and the effect is the one who is watching the change that happen in the Signal, so whenever the value of the count changed, the effect is here to execute an instruction.
But importantly, the updates occur in real time. The Effect has already executed before we can log the following instruction.
Memos
Memo we can consider it as an observer and a Observable in the same time, in other words it combines the Signal and the Effect, here is an exemple:
In this exemple Memos represent a Signal for the the Effect that we created in line 5, so Memo here change if one of the first 2 signal changes, so it depends to its dependencies.
As we can see this approach will save us a lot of work, and it’s not limited to giving values, we can do more of that, the Memo can have instructions (if…else) to have more control on the actions that we want to perform.
Conclusion
SolidJS as we can see is a revolutionary Framework, a lot of work done in it, the present article doesn’t cover all the principle subjects in SolidJs, but it’s a sort of an Overview of the Framework and how it works.
This article provided an overview of fine-grained reactivity, a notion that become a subject of lot of innovations in JavaScript front-end development.
Top comments (2)
I was confused for a bit if this was a Qwik or Solid article hehehe. Well written though, thank you for writing about it!
hahahahaha Thank you David for you support 🙏🏼