In this article we will see which performance provide SolidJS, how it provides it. What are the complexities of using it in a system at scale and what solutions the micro-frontends offer us to overcome these complexities.
Nowadays, performance is everywhere, we are always looking for the most efficient product. Which means maximum results for a minimum of energy consumed at the most interesting cost.
This is also what we are looking in the tech world, today when we want to build an application, we are looking to make it always faster, more optimized because this is what will differentiate our product from the competition.
To give you some examples, according to a study conducted by Aberdeen, when a page takes more than 2 seconds to load, nearly 7% of users leave the website, and about 11% of a website's content is not visited. For an e-commerce website that makes 10k € of turnover per day, 7% of abandonment rate, it represents a potential loss of 2.5 million euros lost over one year.
We must also take into account that nearly 50% of Internet users in the world browse the Internet using a mobile phone. A site that performs a lot of calculation on the client side may not work properly on a phone, which will frustrate the end user and push him to overconsume devices, which is not in line with current ecological issues.
We will try to create efficient tech products but when we talk about a web application what does it really mean? A powerful web application will be fast to load, to receive user actions or to perform a calculation, and all this while consuming as little memory or network as possible.
In this article, we will :
As it was complicated to create and maintain the code of these websites, many frameworks, or libraries were born as VueJS or ReactJS. These libraries aim to facilitate the writing of code and the organization of your files, by creating an additional level of abstraction. It is precisely these levels of abstraction that negatively impact the performance of a website. SolidJS was created to address this problem.
SolidJS defines itself as:
SolidJS can be used with :
And comes with an ecosystem composed of :
To answer this question, I based myself on 4 criteria used by lighthouse to calculate the performance of a website:
Here we compare SolidJS to the 3 leaders of the current market: Angular, ReactJS, VueJS as well as to Svelte which is considered as one of the best performing libraries of today.
We observe that SolidJS is at most in second place. It is 2 times more resource efficient for results 4 times faster than ReactJS which is currently the market leader.
Signal can be shared between different components to allow synchronization of the displayed data. A
Signal works as follows:
Fine-grained reactivity : As mentioned above SolidJS is responsible for updating the data on our website, to do this efficiently SolidJS will keep a graph of all the nodes on your website. It will directly know which nodes to update when a variable is changed.
Compiled directly to the DOM : Unlike ReactJS or VueJS, SolidJS will interact directly with the DOM.
ReactJS will have an intermediate virtual DOM to update the data of the website while SolidJS will compile your files, in an optimized way, and instantiate the DOM only once. It will then manage the state of the data thanks to the Fine-grained reactivity system described above.
Using a virtual DOM is expensive because the whole page is re-instantiated each time the data is modified.
Unlike Angular which proposes a file structure and a predefined module system.
SolidJS will leave the hand to the developers to allow them to organize the files as they wish, a principle similar to ReactJS, which can raise many questions about how to structure its code base:
Signals in simple
ts files outside the components to share data across the application, as in the "Unidirectional data flow" part, which leaves a lot of freedom to developers.
In addition to the burden of having to train new development teams, migrating one's old Web application to a new technology can have a significant cost because one must take into account
A micro-frontends architecture as presented in the diagram below, is an architecture that will allow developers to build a website by combining several web applications into one single website.
In order to serve these different web applications on the same site, the micro-frontend architecture will be based on 3 principles:
Here are some key ideas for setting up a micro-frontends architecture :
Micro-frontends allows to :
Performance is paramount for the business of all companies :
As we have seen during this article, SolidJS is a key asset to build tomorrow's applications by offering performances 2 to 3 times higher than ReactJS or Angular.
These performances are linked to 3 principles: Unidirectional data flow, Fine-grained reactivity & App compiled directly to the DOM.
Wanting to switch to SolidJS can have some trades-off because structuring your code is complicated and it is not possible to migrate an old application overnight by snapping your fingers.
To overcome these problems, the micro-frontends architecture allows you to structure your code by business scope and to use SolidJS gradually or punctually.
If all that hasn't convinced you to use SolidJS, here are some other advantages to use SolidJS:
SolidJS is therefore a real asset to enable your information system to be more efficient to boost your business.
Thank you for your time, if you have any questions feel free to ask !