SolidJS is a lightweight JavaScript library for building declarative JavaScript apps, with a focus on performance and ease of use. It is designed to provide a smooth and seamless developer experience, with a simple and intuitive API that makes it easy to get started building web apps right away. SolidJS incorporates a few declarative JavaScript techniques that makes it an excellent choice for building fast, scalable, and reliable web applications. In this post, we’ll be exploring the main declarative JavaScript features of SolidJS that makes it stand out as a powerful web framework for the future.
This post was originally published in dev.to by Omer Herrera.
Declarative JavaScript Features in SolidJS
Declarative JavaScript is a programming paradigm where the focus is on describing what should be accomplished rather than explicitly detailing how it should be done. SolidJS follows this principle and also borrows some concepts from React, like the JSX and Components to offer a truly reactive web framework for building fast UI. It was created by Ryan Carniato in 2018 and is loved by developers because it’s both pragmatic and extremely performant. Unlike the React Virtual DOM rendering, SolidJS compiles into a performant native HTML/JavaScript (more like Svelte) that is rendered by the browser.
Here are some of the main declarative features of this framework.
1. Declarative components
SolidJS lets you define function components with JSX syntax. This syntax can also have expressions to embed values from variables, and even fragmented JSX syntax without a bounding HTML element.
In SolidJS, components are initialized only once unlike React where they are called again and again during re-rendering. Components in SolidJS are tracked by it’s internal reactive system to avoid costly re-rendering every time.
2. Reactive state updates
In SolidJS, a function component can define getter and setter functions to manage state variables. This is part of the framework’s reactive system which defines a signal to get and set a state variable to be accessed across more than one component.
Internally, the framework observes this data initiated through the signal and surgically updates its exact location in the DOM when a change is detected, instead of re-rendering the entire component again. This is a true reactive behavior with minimal rendering and performance overhead.
Similar to signals, other primitives such as createEffect( ) and createMemo( ) are available to offer developer friendly ways of working with state variables within the application source code.
3. Conditional rendering with special components
The SolidJS framework makes JSX more developer friendly by including a few special components that control the rendering. Here are two most commonly used examples of control flow rendering :
<Show>component to handle conditional logic.
<For>component to simplify loops over a collection of items.
4. Attaching custom behavior to elements
With a use keyword, SolidJS lets developers to attach custom behaviors to different elements.
Conclusion
The above feature list should give you some idea of what it means to write code in a declarative JavaScript way using SolidJS. Check out the SolidJS tutorial page to know more about these and other features.
You can also checkout the sample application code used on the examples snippets above.
