{"id":882,"date":"2022-04-29T21:40:00","date_gmt":"2022-04-29T19:40:00","guid":{"rendered":"https:\/\/nubisoft.io\/blog\/?p=882"},"modified":"2022-05-07T21:44:13","modified_gmt":"2022-05-07T19:44:13","slug":"introduction-to-solidjs","status":"publish","type":"post","link":"https:\/\/nubisoft.io\/blog\/introduction-to-solidjs\/","title":{"rendered":"Introduction to SolidJS"},"content":{"rendered":"\n

During NubiSoft’s Skillup #2<\/a> I made an introduction to SolidJS and this post consists of all the major points I talked about.<\/p>\n\n\n\n

Why SolidJS?<\/h2>\n\n\n\n

SolidJS is JSX based web framework designed to provide performant reactivity for user interfaces. Before taking a deep dive into the features of this framework let’s look at its promises and assumptions.<\/p>\n\n\n\n

\"\"
https:\/\/www.solidjs.com\/<\/a><\/figcaption><\/figure><\/div>\n\n\n\n

The main benefits of using (supposedly) SolidJS are top performance, powerful composability options, easy-to-use API, and high ergonomics. <\/p>\n\n\n\n

Other notable features are built-in support for fragments, portals, suspense, and more.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Performance<\/h2>\n\n\n\n

SolidJS uses fine-grained reactivity which results in performance very close to vanilla JS and significantly better than other UI frameworks<\/a>.<\/a><\/p>\n\n\n\n

\"\"
https:\/\/www.solidjs.com\/<\/a> <\/figcaption><\/figure><\/div>\n\n\n\n

One of the differences between Solid and React is explicit reactivity. Lately, there has been a proposal to introduce the useEvent hook to React in order to keep the function’s identity the same between rerenders. Solid utilizes a different approach – the only things that should be reactive are tracked.<\/p>\n\n\n\n

Solid’s overall approach to reactivity is to wrap any reactive computation in a function, and rerun that function when its dependencies update. This enables “vanishing components” with lazy prop evaluation removing unnecessary wrappers and synchronization overhead.<\/p>\n\n\n\n

React-like API<\/h2>\n\n\n\n

Basic principles when creating reactive components are quite similar to React’s. <\/p>\n\n\n\n