Intro to SolidJS: How to Create Fast, Reactive Web Apps

Intro

SolidJS is a lightweight JavaScript library for building web applications with a focus on performance and ease of use. It was 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. Whether you're a seasoned developer or just getting started with web development, SolidJS is an excellent choice for building fast, scalable, and reliable web applications. In this post, we'll be exploring the various features and capabilities of SolidJS in this powerful framework.

So let's start

SolidJS is a declarative JavaScript framework for building fast UI with maximum control over reactivity. It was created by Ryan Carniato in 2018 and is loved by developers because it's both pragmatic and extremely performant. On the surface it shares many similarities with react, components are JavaScript functions that return JSX for the UI, however unlike react there's no virtual dom, it uses a compiler more like Svelte that converts your code into vanilla JavaScript to brings you as close to the DOM as possible.

But what it's more important here it's that it's truly reactive, a function component is only called once which means you can do unheard things, for example you can set intervals predictably at the top level, and data that changes or state is managed with the create signal primitive which returns a getter and setter, the framework will observe this data and surgically update its exact location in the DOM when it changes, instead of re-rendering the entire component, again it's truly reactive.

To get started just run the command:
npx degit solidjs/templates/js my-app

Uses Vite as the build tool and should look very familiar if you've ever used react.

You can define a component as a plain JavaScript function, when defining the UI with JSX you get a real DOM element instead of some weird framework abstraction.

To add a reactive state to a component you can use the createSignal function that provides a getter and setter, also notice how the getter is a function, this allows the framework to observe the current value reactively.

We can easily create a derived state by simply defining another function based on the original signal.

It also provides a function to memonize the return value or expensive computations, in some cases you may want to run code when your data changes, for that createEffect allows you to run side effects on any signals referenced in the body of the function, it will automatically be subscribed to re-run the side effect whenever the value changes.

Also provides onMount and onCleanup functions that tap into the beginning and end of the component lifecycle.

The framework also goes out of it's way to make JSX more developer friendly here, we have some example with this special components:

• Show component to handle conditional logic

• For component to simplify loops over a collection of items

• Directives it supports custom directives with a use keyword which is a highly efficient way to attach custom behaviors to different elements.

Thank you for joining me, and I hope you enjoy reading about SolidJS as much as I enjoyed working with it!

Resources

• SolidJS App used in post