What is SolidJS?

Tram Ho

Hello friends, in this series we will start to learn the basics of SolidJS and its features.
Then we will learn about the application of SolidJS through a few basic examples.

On the occasion of the New Year of the Rabbit – 2023 , I wish all of you who are reading this article to have a lot of health and always keep a spirit of passion for learning and enthusiasm for technology

Introduce

If you are a Web developer looking for a powerful tool to build Web applications, or you simply want to learn about the latest technologies available today, let’s explore SolidJS today. now!

This is a very flexible and powerful new Javascript UI Library, designed to help Front-End developers create high-speed and easy-to-manage Web applications. We’ll learn about the features, advantages, and benefits of this technology, and learn how you can use it to build amazing Web applications!

SOLID + JS = SOLIDJS

I don’t know if you guys are like me when you first look at the name SolidJS and immediately think of the SOLID principle?

According to the author (Ryan Carniato – US) on the morning of the author’s birthday, when he woke up, he suddenly felt a halo and the sun of truth shining through his heart. say that:

Hey Ryan, go ahead and create a Javascript UI Library that’s fast, powerful but still very flexible to satisfy your passion like Elon Musk once created that Tesla Model 3 that caused a global fever… ……….. and so SolidJS was born. Perhaps because the name SOLID has also partly shown the author’s focus when he wants to create a technology with certain properties, strong and also very flexible (such as pebbles).
P/S: I have a little bit of salt in the above story

His project has been open source since April 2018 (the idea was cherished and developed since 2016) and released the stable version for the first time on April 29, 2021.

So far SolidJS has released stable v1.6 and is being supported by many big names in the technology industry such as: Vercel, CloudFlare, JetBrains, Netlify…

General Features

Let’s take a look at the basic features of SolidJS , Let’s go:

  • As a Javascript library that creates user interfaces, SolidJS directly updates UI changes on the native DOM (not using Virtual DOM like some other Javascript UI Library/Framework)
  • Provides Reactive mechanism responsible for tracking and automatically updating UI changes when State or Props changes and Reactivity Primitives includes 3 core components: Signal , Memo and Effect (I will go into the concepts This is in the next episode of the series ^^)
  • Applying the Component Based model creates highly flexible reusable UIs with low latency.
  • SolidJS uses JSX : JavaScript XML is an extended syntax that allows programmers to write HTML in SolidJS easily (just like ReactJS).
  • Support and provide Lifecycle Methods to help developers easily handle data handling, logic, and UI cases in the coding process.
  • Custom Hook : you can create a new hook with its own unique function. This helps separate the logical code from the UI, making the code more transparent, easier to manage, avoid code repetition and reuse.
  • Typescript support , this allows programmers to easily choose between pure Javascript or Typescript depending on the project and requirements.
  • SSR (Server Side Rendering) support enables faster page load and speed up page loading…
  • Small size : SolidJS has a small size, which helps to load pages quickly and reduce the cost of resources.
  • Easy to learn: SolidJS is extremely accessible and if you have experience with ReactJS , I believe that accessing SolidJS will be extremely simple

Why do I choose SolidJS over…..

  • What makes me excited about using SolidJS instead of using ReactJS , VueJS , Svelte or Angular is simply because this is a new technology
  • In addition to being a new technology, SolidJS gives me a very good experience when using it for the first time because learning and accessing this technology is extremely fast and easy.
  • Even if you are a newbie when you are new to Front-End Libraries/Frameworks, I guarantee that you only need a basic knowledge of HTML/CSS and Javascript to be able to easily learn SolidJS (I will have more tutorials in the future). Please write more detailed information for those who are new to the Front-End industry and do not know which technology to choose or how to learn ^^)

  • Besides, SolidJS is also provided with a full range of libraries to support Routing , Store Management or Component UI Library and the support functions from SolidJS itself are quite complete, not inferior to big guys like ReactJS or VueJS
  • The next thing that makes me excited in the process of learning and learning SolidJS is about the extremely powerful Performance that SolidJS brings.

Which is the fastest UI Library/Framework in your opinion? Vue , React , Inferno , Svelte , lit-html … There are many suggested libraries and each has its own good Benchmarks score

I will compare specifically the case of scripting performance and bundle size between SolidJS vs ReactJS (the technology is being used by many companies and programmers)
As shown below, you can see this difference more clearly (comparison takes place under the same condition of the same code script)…

https://www.webtips.dev/solidjs-vs-react

If there are advantages, there must be… disadvantages 👀

  • Small community and not much connection with each other is definitely a weakness of SolidJS at the moment
  • The included support libraries are all available and usable, but there is no diversity to help users choose and compare during use.
  • Of course, with each new technology, most users are more or less concerned about risks , problems such as bugs or information leakage bla bla bla … this is inevitable.
  • Overseas, there have been and are gradually more articles about SolidJS as well as specific examples to help newcomers have a broader view of this technology, but in Vietnam, SolidJS is still really new. with the vast majority of programmers ^^

Let me summarize episode 1

For myself, SolidJS is creating a certain interest for me and I am also starting to write personal projects in SolidJS , but to work and put into real projects for the community or work, I I think we should need more time for SolidJS community to develop more

https://github.com/solidjs/solid Open Source on Github of SolidJS has already reached >22k stars, in the future I hope that SolidJS will continue to become the new “Unicorn” in the FE world like VueJS did. ever achieved.

Starting from the next episode of the SolidJS Series, we will start to start the Project with SolidJS and analyze more deeply into the mentioned features of SolidJS to see if there are any good and unique points


The above is all information around new technology for Front-End Developers that I personally find out and share.
If you have any questions or comments about the article, please comment to help me, thank you

Share the news now

Source : Viblo