SolidJS, the solution to build performant Web application !

Did you just say performance ?

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 :

1. Discover what SolidJS is
2. Compare its performances with those of the market leaders
3. Understand where do these performances come from
4. What are the barriers for using SolidJS at scale

What is SolidJS ?

To give you some context, before 2005 most websites were static sites without animation. With the emergence of JavaScript and some libraries like jQuery, the number of dynamic Web Applications has been increasing.

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 is a JavaScript library that allows to build scalable applications in a simple way based on ReactJS by being able to :

• Create reusable components in JSX
• Use features similar to ReactJS hook with primitives

SolidJS defines itself as:

A declarative, efficient and flexible JavaScript library for creating user interfaces.Its first stable version was released on June 28, 2021 and was developed by RyanSolid.

 

SolidJS can be used with :

• Jest with Vitest as a test tool
• Vite with Rollup as build tools
• Npm, Yarn or pnpm as package manager

And comes with an ecosystem composed of :

• Solid-primitives
• UI component libraries like SUID and Hope-UI

SolidJS has attracted the interest and satisfaction of the JavaScript community over the past year with its impressive performance, according to the survey: State Of Javascript 2021

Does SolidJS really perform better than the others ?

To answer this question, I based myself on 4 criteria used by lighthouse to calculate the performance of a website:

• Time to interactive measures how long it takes a page to become fully interactive ⇒ Runtime speed
• Total blocking time measures the total amount of time that a page is blocked from responding to user input ⇒ Memory usage
• Transfer Size is the amount of data that the network will have to transfer from the server to your end user device ⇒ Network transfer cost
• Resource Size is the size of all the files once decompressed, huge resource size can increase the script parse/execution time ⇒ Bundle Size

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.

How does SolidJS enable such performance ?

To achieve such results, SolidJS is based on 3 simple principles :

• Unidirectional data flow : SolidJS will allow us to update the data of our website in a "synchronous" way using Signal. A Signal is a utility that is used in the following way : This pattern will delegate to SolidJS the way the state of our site should update, and help developers to know which variables are updateable and which are not. A 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.

  

What are the barriers for using SolidJS at scale ?

No defined file structure

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:

• Is it possible to define multiple components or services in one file?
• Can you separate files by functions, pages or features?
• It is also possible to define 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.

An expensive migration

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

• Continuity of service: Run of the old platform
• The cost of migrating the legacy : Team dedicated to rewriting the code
• The absence of new features during the migration

But wait, what if micro-frontends were THE SOLUTION to all of theses problems ?

Micro-what ?

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:

• Routing → Define which micro-frontend will be displayed according to the page URL
• Iframe → Integrate a component of application A on a page of application B
• Module sharing → Share JavaScript libraries (components, styles) across our applications

Here are some key ideas for setting up a micro-frontends architecture :

• Be Technology Agnostic : Each team should be able to choose and upgrade their stack without having to coordinate with other teams. Custom Elements are a great way to hide implementation details while providing a neutral interface to others.
• Isolate Team Code : Don’t share a runtime, even if all teams use the same framework. Build independent apps that are self-contained. Don’t rely on shared state or global variables.
• Establish Team Prefixes : Agree on naming conventions where isolation is not possible yet. Namespace CSS, Events, Local Storage and Cookies to avoid collisions and clarify ownership.
• Favor Native Browser Features over Custom APIs : Use Browser Events for communication instead of building a global PubSub system. If you really have to build a cross team API, try keeping it as simple as possible.
• Build a Resilient Site : Your feature should be useful, even if JavaScript failed or hasn’t executed yet. Use Universal Rendering and Progressive Enhancement to improve perceived performance.

Use SolidJS with micro-frontends ?

Micro-frontends allows to :

• Migrate an application : By progressively exposing new micro-frontends composed of the old components of our app
• Use SolidJS punctually : On a critical page like the home page or on a page that needs to perform several calculations
• Structure the code base : By separating by business scope and thus creating "barriers" between the different applications

Conclusion : SolidJS the key to build powerful web applications

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:

• Simplicity of state management without using Redux, MobX or Recoil → Thanks to Signal
• Lower DevOps costs thanks to Vitest and SolidJS → 30 times less testing time than Angular
• A more pleasant developer experience thanks to the numerous built-ins of 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 !