Unlock the Power of SolidJS: A Fast and Performant Frontend Framework
When it comes to building fast, data-driven applications on the web, SolidJS is a rising star among frontend frameworks. Unlike other popular frameworks, SolidJS doesn’t rely on a virtual DOM. Instead, it memorizes the entire DOM from the initial application run and updates specific sections as needed, making it incredibly fast and performant.
In this article, we’ll explore the benefits of SolidJS by building a simple CRUD application. We’ll cover the prerequisites, setting up the project, creating and rendering SolidJS components, and creating dynamic rendering on the backend.
Prerequisites
To follow along with this tutorial, you’ll need:
- Working knowledge of HTML, CSS, and JavaScript
- Node.js and a package manager (like npm) installed on your machine
- A code editor (we’ll use VS Code in this tutorial)
- Experience with additional frontend frameworks is helpful, but not required
Building the SolidJS Frontend
To build our Solid application, we’ll use the Solid JD App library. We’ll set up the project, create and render the SolidJS components, and explore the benefits of this framework.
Installing the Solid JD App Library
To get started, run the following command on your terminal:
npm init solid-app my-app
You’ll be prompted to type y (for yes) to proceed, and then you’ll be asked to provide a name for the app. Next, you’ll be asked if you’ll be using Vercel to deploy your project. This is a matter of preference. You can choose to deploy or host your project wherever you like, or opt for none as an option.
Setting up the Project
For this tutorial, we’ll build a simple blog app. Move to the root directory, where the application is hosted, and run the following command:
npm run dev
This will start the application on port 3000; you can access it at http://localhost:3000. Your codebase will look like this, with TypeScript:
Creating the SolidJS Components
Components are a key feature of frontend frameworks, making it easier to manage and reuse elements dynamically. To start creating components, create a folder in the src folder called components, where we’ll put any reusable elements and files.
Inside the components folder, create a file called Blog.jsx and paste in the following code:
Rendering the SolidJS Component
To render the SolidJS component, we’ll add the following code to the tsconfig.json file located at the root of your project:
Creating Dynamic Rendering on the Backend
What we’ve created so far is static data. But in the real world, data comes from some sort of backend or API. Let’s make things dynamic! First, we’ll need an endpoint. For this tutorial, we’ll use the following endpoint: https://crudcrud.com/api/6a1613c7646f4a908158592cfdb448aa/blog, which has a list of blogs.
Setting up the Routing
Routing refers to how we move from one path of a resource to another. SolidJS uses the Solid Router to manage how a client’s requests are handled and what handles them. To set up the routing, create a new component, BlogDetail.jsx, where the blog body will be shown.
Conclusion
In this article, we successfully demonstrated how to build a blog using SolidJS. You can extend these learnings to other types of applications. We explored some SolidJS methods and components and investigated how they’re used in a project. One killer feature of SolidJS is that it memorizes the virtual DOM on the first load, subsequently updating different parts as needed without affecting the entire DOM.