Index
Each year, the State of JavaScript website releases statistics on the performance of frontend frameworks. Needless to say, React, Vue.js and Angular continue to dominate the ranking of the most used frameworks (and part of our technology stack as well).
Yet it is interesting to note how from year to year more recent, if not newer, technologies appear, rise or fall in interest. We have already discussed the rise of Svelte, Solid and Qwick in a separate article. Today, however, we want to focus on other technologies that, to a certain extent, can still be defined as minorities. We are talking about Stencil, HTMX and Lit.
HTMX
HTMX is a JavaScript library released in 2020, created in response to the increasing complexity in handling asynchronous requests and dynamic content updates. The development of HTMX from intercooler.js, a library for simplifying AJAX requests, marks an important step in the evolution of web development.
Carson Gross, the creator of HTMX, aimed to develop a more efficient method for creating dynamic web pages that builds on the strengths of HTML, while reducing dependency on heavy JavaScript. HTMX is in fact based on the principle of extending HTML with special attributes to enable dynamic content and interactions.
Carson Gross, the creator of HTMX, aimed to develop a more efficient method for creating dynamic web pages that builds on the strengths of HTML, while reducing dependency on heavy JavaScript. HTMX is in fact based on the principle of extending HTML with special attributes to enable dynamic content and interactions.
Pros
- Less JavaScript, more HTML: HTMX allows you to create advanced interactions without having to write complex JavaScript code.
- Light and fast: with a file size of only 14 KB, it is extremely lighter than React, Vue or Angular.
- Great for server-side architectures: it integrates well with backend languages such as Python, Ruby, PHP or Go.
- Easily adopted: just add HTMX to an existing HTML page to start using it.
Cons
- Incomplete framework: does not handle application state like React or Vue.
- Inadequate for complex SPAs: for very interactive applications with multiple dynamic states, it may be limited.
- Modest community: although expanding rapidly, it has a smaller user base than more established frameworks.
Lit
The Lit framework, first released in 2018 via the Polymer team, was developed specifically for the creation of native web components. The distinctive feature of Lit is the low weight of the generated web components, which is around 5 KB. This aspect, combined with the fact that web component frameworks can be used across the board, makes Lit a good candidate for the development of generic components or component libraries.
A major feature of Lit is the ‘instant update’ concept. This means that only the interactive elements of the user interface that have actually changed are updated. Unlike most other JavaScript frameworks that manage browser state in a virtual dom tree, Lit directly updates dynamic dom elements, saving the costly comparison of virtual and real dom trees. This reduces the need for extensive updates and improves application performance. For rendering HTML, Lit uses tagged templates, which require little boilerplate. These allow function names to be written directly in front of literal templates, improving readability and code structure.
A major feature of Lit is the ‘instant update’ concept. This means that only the interactive elements of the user interface that have actually changed are updated. Unlike most other JavaScript frameworks that manage browser state in a virtual dom tree, Lit directly updates dynamic dom elements, saving the costly comparison of virtual and real dom trees. This reduces the need for extensive updates and improves application performance. For rendering HTML, Lit uses tagged templates, which require little boilerplate. These allow function names to be written directly in front of literal templates, improving readability and code structure.
Pros
- Super lightweight: takes up less than 10 KB, making it much smaller than frameworks such as React or Angular.
- Efficient DOM updates: uses template literals to update the DOM in an optimised, high-performance manner.
- Standard Web Components: works natively in modern browsers and requires no additional libraries.
- Compatibility with other frameworks: components created with LIT can be used in any project, even in React, Vue or Angular.
Cons
- Smaller community: although supported by Google, it does not have the huge ecosystem of React or Vue.
- More boilerplate code: compared to frameworks like React, it requires more initial configuration.
- Fewer tools and plugins: its ecosystem is still limited compared to more established frameworks.
Stencil
Stencil is an open source web component compiler, created by the Ionic team and first released in 2017. It's a very powerful and versatile tool, created from the need to solve common functional requirements for Ionic components generically, rather than individually in each component.
The goal, in fact, is to generate highly optimised web components that are compatible with any framework or no framework at all.
Components are written in Stencil syntax and used to compile and generate standards-compliant web components. Stencil has a number of built-in functionalities, e.g. for responsiveness, lazy loading and data binding. To use them, simply add a small footprint code (approx. 6kb) containing all the Stencil functionalities to the component library.
The goal, in fact, is to generate highly optimised web components that are compatible with any framework or no framework at all.
Components are written in Stencil syntax and used to compile and generate standards-compliant web components. Stencil has a number of built-in functionalities, e.g. for responsiveness, lazy loading and data binding. To use them, simply add a small footprint code (approx. 6kb) containing all the Stencil functionalities to the component library.
Pros
- Reusable web components: components created with Stencil can be used anywhere, in React, Angular, Vue or even without a framework.
- High performance: Stencil uses lazy loading and pre-rendering to load components only when needed, reducing page loading time.
- TypeScript and JSX support: enables more typed and readable development for those with experience with React.
- Great for design systems: ideal for creating reusable component libraries at enterprise level.
Cons
- Requires a good knowledge of web components: it is not straightforward for those used to traditional frameworks.
- Fewer plugins compared to other frameworks: being focused on web components, it does not offer a large plugin ecosystem like React or Vue.
- Small community: compared to more popular frameworks, Stencil has a smaller community, which can make it more difficult to find support.
Conclusion
In the world of web development, ruled by frameworks such as React, Angular and Vue, there are lesser-known but equally interesting alternatives. Stencil, HTMX and LIT offer different approaches to improve the performance, modularity and interactivity of web applications, without the burden of more complex libraries.
These technologies demonstrate that there is no single path in web development: the important thing is to choose the right tool according to the needs of the project. If you are looking for more lightness, simplicity or modularity, exploring less popular alternatives may prove to be an interesting choice.
These technologies demonstrate that there is no single path in web development: the important thing is to choose the right tool according to the needs of the project. If you are looking for more lightness, simplicity or modularity, exploring less popular alternatives may prove to be an interesting choice.
.jpg)
