---
title: "Dev Discussions: Ryan Carniato of SolidJS on Building “The Tesla of JavaScript UI Frameworks” | CoderPad"
description: "SolidJS creator Ryan Carniato discusses the speed, ease-of-use, and efficiency benefits of this fascinating UI framework."
canonical: "https://coderpad.io/blog/development/interview-with-creator-of-solidjs-ryan-carniato/"
last_modified: "2023-06-05 14:30:03"
---
[Back to blog](https://coderpad.io/blog/)
# Dev Discussions: Ryan Carniato of SolidJS on Building “The Tesla of JavaScript UI Frameworks”
March 8, 2022 4 Minute Read
By Ken Swearengen
[Development](https://coderpad.io/blog/development/)
CoderPad’s Corbin Crutchley [recently sat down with Ryan Carniato](https://www.twitch.tv/videos/1275982315) to discuss his work on the hyper-performant UI library, SolidJS – which Ryan dubs “ [The Tesla of Javascript UI Frameworks](https://ryansolid.medium.com/solidjs-the-tesla-of-javascript-ui-frameworks-6a1d379bc05e) ” for its efficiency and performance.
It’s not often you come across a programmer who used to be a touring musician – but Ryan has experience both slinging code with SolidJS as well as some sweet tunes with his band Mr. Solid ([both named after a tasty Canadian treat](https://www.hersheys.ca/allancandy/en_ca/products/allan-solid-milk.html)).
Ryan has been coding since he was 10 years old and started his software engineering career working .NET. It was during these professional years that Ryan discovered Knockout.js and his passion for creating reactive user interfaces; he’s been working in the JavaScript space “solidly” for the past decade. He learned JavaScript by “going to other websites and viewing the source code,” a method that’s become more challenging with the advent of minifiers and obfuscated code.
## Learn how to run front-end developer interviews that don’t suck
[Read our guide](https://coderpad.io/blog/interviewing/5-tips-for-interviewing-frontend/)
## What is SolidJS and what is it used for?
Boiled down to it’s essence, Ryan calls Solid a “state library” that has slightly different primitives than React. Ryan built Solid to have “ [blazing-fast performance, declarative nature, feature set, and [a] small bundle size](https://sabe.io/tutorials/getting-started-with-solid),” all while supporting most major features in React.
Solid is heavily influenced by Knockout.js, which came out around 2010 and was made for creating declarative UIs; it has often been compared to React Components. Both React and Knockout have been strong inspirations for SolidJS – down to Knockout’s tutorials that let you run the code in the browser.
> Interested in learning more about the history of front end web components? Check out our blog post on [Web Components 101: History](https://coderpad.io/blog/development/web-components-101-history/)
Solid’s reactivity is based on the concept of a “signal” – per [Solid’s documentation](https://www.solidjs.com/docs/latest), “Signals are the most basic reactive primitive. They track a single value (which can be any JavaScript object) that changes over time.”
The signals are associated with a set of subscribed listeners; when the tracked value changes the signal notifies the listeners and they carry out their respective processing actions. This is a lightweight way to improve reactivity and performance in Solid.
Here’s an example of a “Hello World” in SolidJS:
```
function HelloWorld(props) {
const [first, setFirst] = createSignal("JSON");
const [last, setLast] = createSignal("Bourne");
createEffect(() => console.log(`${first()} ${last()}`));
return Hello {props.name}
;
}
;Code language: JavaScript (javascript)
```
Front end frameworks may be a dime-a-dozen, but Solid lives up to it’s jet-speed reputation:
[](https://dev.to/ryansolid/introducing-the-solidjs-ui-library-4mck) SolidJS process speeds compared to competitors
[](https://dev.to/ryansolid/introducing-the-solidjs-ui-library-4mck)
SolidJS is also smaller than a lot of its competition. In an implementation of the [RealWorld Demo](https://github.com/gothinkster/realworld) SolidJS [was able to bundle to just 11.1kb](https://levelup.gitconnected.com/a-solid-realworld-demo-comparison-8c3363448fd8) – about 8% the size of the same implementation using Angular.
[According to Ryan](https://dev.to/ryansolid/introducing-the-solidjs-ui-library-4mck), it’s also fully featured and “supports most React features like Fragments, Portals, Context, Suspense, Error Boundaries, Lazy Components, Async and Concurrent Rendering, Implicit Event Delegation, SSR and Hydration(although there is no Next.js equivalent yet). It supports a few things not yet in React like Suspense for Async Data Loading, and Streaming SSR with Suspense.”
## Differences between SolidJS and React
SolidJS can be thought of as a faster and lighter-weight version of React. They both are declarative and support JSX, but Solid cuts out a lot of overhead processes that allow it to render much faster than React.
### Bye Bye Virtual DOM
You read that right – instead of updating a virtual DOM like React, SolidJS updates the DOM itself. Ryan designed this to increase the speed of rendering as there is now less overhead pushing changes from the virtual DOM to the real DOM.
You can find more on how Solid does this and more differences between SolidJS and React [here](https://blog.logrocket.com/solidjs-vs-react/).
### Web Components Not Included
While Solid is a great fit to integrate into web components, it actually does not use web components “under-the-hood” to generate component instances. Ryan’s reasoning is that while there are certainly uses for web components, they come with performance trade-offs. He found that for Solid he wanted the lightest possible abstraction for a component, which is simply a function that runs once.
If you’re interested in learning more about the pros and cons of different web component frameworks, check out this article from CoderPad Developer Advocate Corbin Crutchley [here](https://coderpad.io/blog/development/web-components-101-framework-comparison/).
### More Differences With React
Because of Solid’s ability to utilize functions as the reactivity system, you don’t need to rely on dependency arrays like you do with React’s hooks. That means stale closures are dramatically reduced in the Solid ecosystem.
What’s more, because [Solid has a non-JSX method for declaring UI elements](https://www.solidjs.com/guides/getting-started#no-compilation%3F), you don’t need to have a compiler in order to use SolidJS. Even when using JSX + Babel, you only ever compile the Babel instructions to vanilla JavaScript instructions to create HTML nodes – no`React.createElement`here!
For example, our HelloWorld might look like this before being transformed with Solid’s JSX transform:
```
import { render } from "solid-js/web";
function HelloWorld(props) {
return Hello {props.name}
;
}
render(() => , document.getElementById("app"));
Code language: JavaScript (javascript)
```
And after the transform, looks like this:
```
import { template, render, createComponent, insert } from 'solid-js/web';
const _tmpl$ = template(`Hello
`, 2);
function HelloWorld(props) {
return (() => {
const _el$ = _tmpl$.cloneNode(true);
_el$.firstChild;
insert(_el$, () => props.name, null);
return _el$;
})();
}
render(() => createComponent(HelloWorld, {}), document.getElementById("app"));Code language: JavaScript (javascript)
```
Notice how it’s using all vanilla JavaScript APIs like [`cloneNode`](https://developer.mozilla.org/en-US/docs/Web/API/Node/cloneNode) and [`firstChild`](https://developer.mozilla.org/en-US/docs/Web/API/Node/firstChild).
## Hackers Wanted
Want to earn some cash and learn more about Solid? They’re hosting a Solid-based hackathon where winners can end up with a few thousand dollars in their pockets to help improve the SolidJS ecosystem. Anybody of any skill level can enter and you don’t have to give up your weekend to participate – entries aren’t due until April 7th.
To find out more about the hackathon, check out the info page [here](https://hack.solidjs.com/).
## Wrapping Up
Ryan has a very unique and substantial development background which is why it’s no surprise that Solid definitely hits its mark in being an extremely fast and lightweight frontend library. If you’re interested in watching the whole discussion between Ryan and Corbin you can find it on the CoderPad Twitch channel [here](https://www.twitch.tv/videos/1275982315).
Happy Coding!
## Subscribe for more CoderPad insights
## Trending Articles
Previous slide Next slide [Development
## What is Prompt Engineering?
Introducing AI tools such as ChatGPT and Bard helps increase the efficiency of tasks such as data generation, code generation and completion, text summarization, etc. How were these AI tools trained to answer almost every question you ask them? The answer, prompt engineering, is discussed in this blog post.
Read the post](https://coderpad.io/blog/development/what-is-prompt-engineering/) [Development
## A Guide To Using React’s useCallback() Hook
Are you looking to optimize your React applications? Have you heard of the useCallback hook? useCallback is a powerful React hook that helps you optimize your application by preventing unnecessary re-renders. In this post, we'll dive into React's useCallback() hook, define referential equality and callback functions and how to tie it all together.
Read the post](https://coderpad.io/blog/development/a-guide-to-using-reacts-usecallback-hook/) [Development
## MySQL vs. PostgreSQL: How Do They Compare?
A database is a convenient tool that allows users to access information, maintain records, and apply commonly used operations, such as insertion, modification, deletion, and data organization. Learn about MySQL vs PostgreSQL, their features, advantages, and disadvantages. Finally, check out which one is the best choice for you.
Read the post](https://coderpad.io/blog/development/mysql-vs-postgresql-how-do-they-compare/) [Development
## PostgreSQL LIKE Operator: A Detailed Guide
When using databases, searching for values that match a given pattern is a familiar necessity. Learn how you can retrieve entries with queries including a particular string using Postgres LIKE operator.
Read the post](https://coderpad.io/blog/development/postgresql-like-operator-a-detailed-guide/) [Development
## How To Use DataProvider In TestNG With Examples
When it comes to testing there are many tools and techniques available. In this post, we'll discuss how to use DataProvider with TestNG.
Read the post](https://coderpad.io/blog/development/how-to-use-dataprovider-in-testng-with-examples/) [Development
## How To Get Up And Running With Django Migrations: A Guide
Django migrations are a way of handling the application of changes to a database schema. By following the steps outlined in this guide, you can easily set up and use migrations in your Django projects.
Read the post](https://coderpad.io/blog/development/how-to-get-up-and-running-with-django-migrations-a-guide/) [Development
## Writing A Parameterized Test In JUnit With Examples
A JUnit parameterized test allows you to decouple data from structure, generating cleaner and more reliable tests. Learn more in this guide.
Read the post](https://coderpad.io/blog/development/writing-a-parameterized-test-in-junit-with-examples/) [Development
## How To Use Assert In JUnit With Examples
The JUnit Assert class is what you use to write unit testing assertions in JUnit. Learn more about it in this guide, full of examples.
Read the post](https://coderpad.io/blog/development/how-to-use-assert-in-junit-with-examples/) [Development
## A Simple Guide To TypeORM: What It Is And How To Use It
Considering current languages have object-oriented programming features, most database management systems are based on the relational model, with tables instead of objects. For these reasons, mapping relational objects is very important in development. In this article, you will learn what TypeORM, one of the main tools used today, is.
Read the post](https://coderpad.io/blog/development/a-simple-guide-to-typeorm-what-it-is-and-how-to-use-it/) [Development
## Using PreparedStatement in JDBC With Examples
In this post, we'll see why and how to work with JDBC and PreparedStatement. We will also learn along with examples using code.
Read the post](https://coderpad.io/blog/development/using-preparedstatement-in-jdbc-with-examples/) [Development
## React vs React Native: The Differences Explained
React and React Native are similar in that they both allow web developers to build applications based on the unique concept of components. But the two frameworks do this in radically different ways. In this post, we cover the key differences between react and react native frameworks, implementation, and which is an appropriate choice.
Read the post](https://coderpad.io/blog/development/react-vs-react-native-the-differences-explained/) [Development
## Logging in Django
The most challenging part of fixing a problem is identifying it. Unfortunately, this statement is exceptionally true when it comes to debugging. Learn how to use the power of logging into your Django applications to improve your debug process in this article.
Read the post](https://coderpad.io/blog/development/logging-in-django/)
## Hire with confidence.
See why engineering teams trust CoderPad to evaluate developers with realistic, AI-ready hiring workflows.
[Request a demo](https://coderpad.io/sales/)