{"id":4569,"date":"2022-03-08T09:14:52","date_gmt":"2022-03-08T17:14:52","guid":{"rendered":"https:\/\/coderpad.io\/?p=4569"},"modified":"2023-06-05T14:30:03","modified_gmt":"2023-06-05T21:30:03","slug":"interview-with-creator-of-solidjs-ryan-carniato","status":"publish","type":"post","link":"https:\/\/coderpad.io\/blog\/development\/interview-with-creator-of-solidjs-ryan-carniato\/","title":{"rendered":"Dev Discussions: Ryan Carniato of SolidJS on Building \u201cThe Tesla of JavaScript UI Frameworks\u201d"},"content":{"rendered":"\n<p>CoderPad\u2019s Corbin Crutchley <a href=\"https:\/\/www.twitch.tv\/videos\/1275982315\" target=\"_blank\" rel=\"noopener\">recently sat down with Ryan Carniato<\/a> to discuss his work on the hyper-performant UI library, SolidJS \u2013 which Ryan dubs \u201c<a href=\"https:\/\/ryansolid.medium.com\/solidjs-the-tesla-of-javascript-ui-frameworks-6a1d379bc05e\" target=\"_blank\" rel=\"noopener\">The Tesla of Javascript UI Frameworks<\/a>\u201d for its efficiency and performance.<\/p>\n\n\n\n<p>It\u2019s not often you come across a programmer who used to be a touring musician \u2013 but Ryan has experience both slinging code with SolidJS as well as some sweet tunes with his band <em>Mr. Solid <\/em>(<a href=\"https:\/\/www.hersheys.ca\/allancandy\/en_ca\/products\/allan-solid-milk.html\" target=\"_blank\" rel=\"noopener\">both named after a tasty Canadian treat<\/a>).&nbsp;<\/p>\n\n\n<p>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\u2019s been working in the JavaScript space \u201csolidly\u201d for the past decade. He learned JavaScript by \u201cgoing to other websites and viewing the source code,\u201d a method that\u2019s become more challenging with the advent of minifiers and obfuscated code.<\/p>\n\n<aside class=\"\n    cta-banner\n     cta-banner--bg-blue      cta-banner--has-media \"\ndata-block-name=\"cta-banner\">\n    <div class=\"inner\">\n        <div class=\"content\">\n                            <h2 class=\"headline\">Learn how to run front-end developer interviews that don&#8217;t suck<\/h2>\n            \n                            <div class=\"cta-buttons\">\n                                    <a href=\"https:\/\/coderpad.io\/blog\/interviewing\/5-tips-for-interviewing-frontend\/\" class=\"button  js-cta--read-our-guide\" data-ga-category=\"CTA\" data-ga-label=\"Learn how to run front-end developer interviews that don&#039;t suck|Read our guide\">Read our guide<\/a>\n                                <\/div>\n                    <\/div>\n                    <div class=\"media\">\n                <img loading=\"lazy\" decoding=\"async\" width=\"432\" height=\"342\" src=\"https:\/\/coderpad.io\/wp-content\/uploads\/2022\/08\/Illustration-of-man-with-beard-popping-out-of-computer-chat.png\" class=\"attachment-large size-large\" alt=\"\" srcset=\"https:\/\/coderpad.io\/wp-content\/uploads\/2022\/08\/Illustration-of-man-with-beard-popping-out-of-computer-chat.png 432w, https:\/\/coderpad.io\/wp-content\/uploads\/2022\/08\/Illustration-of-man-with-beard-popping-out-of-computer-chat-300x238.png 300w\" sizes=\"auto, (max-width: 432px) 100vw, 432px\" \/>\n            <\/div>\n            <\/div>\n<\/aside>\n\n\n<h2 class=\"wp-block-heading\">What is SolidJS and what is it used for?<\/h2>\n\n\n<p>Boiled down to it\u2019s essence, Ryan calls Solid a \u201cstate library\u201d that has slightly different primitives than React. Ryan built Solid to have \u201c<a href=\"https:\/\/sabe.io\/tutorials\/getting-started-with-solid\" target=\"_blank\" rel=\"noopener\">blazing-fast performance, declarative nature, feature set, and [a] small bundle size<\/a>,\u201d all while supporting most major features in React.<\/p>\n\n\n<p>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 \u2013 down to Knockout\u2019s tutorials that let you run the code in the browser.&nbsp;<\/p>\n\n\n<p>&gt; Interested in learning more about the history of front end web components? Check out our blog post on <a href=\"https:\/\/coderpad.io\/blog\/development\/web-components-101-history\/\">Web Components 101: History<\/a><\/p>\n\n\n\n<p>Solid\u2019s reactivity is based on the concept of a \u201csignal\u201d \u2013&nbsp; per <a href=\"https:\/\/www.solidjs.com\/docs\/latest\" target=\"_blank\" rel=\"noopener\">Solid\u2019s documentation<\/a>, \u201cSignals are the most basic reactive primitive. They track a single value (which can be any JavaScript object) that changes over time.\u201d<\/p>\n\n\n<p>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.<\/p>\n\n<p>Here\u2019s an example of a \u201cHello World\u201d in SolidJS:<\/p>\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">HelloWorld<\/span>(<span class=\"hljs-params\">props<\/span>) <\/span>{\n  <span class=\"hljs-keyword\">const<\/span> &#91;first, setFirst] = createSignal(<span class=\"hljs-string\">\"JSON\"<\/span>);\n  <span class=\"hljs-keyword\">const<\/span> &#91;last, setLast] = createSignal(<span class=\"hljs-string\">\"Bourne\"<\/span>);\n\n  createEffect(<span class=\"hljs-function\"><span class=\"hljs-params\">()<\/span> =&gt;<\/span> <span class=\"hljs-built_in\">console<\/span>.log(<span class=\"hljs-string\">`<span class=\"hljs-subst\">${first()}<\/span> <span class=\"hljs-subst\">${last()}<\/span>`<\/span>));\n  <span class=\"hljs-keyword\">return<\/span> <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span>&gt;<\/span>Hello {props.name}<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span><\/span>;\n}\n\n&lt;HelloWorld name=<span class=\"hljs-string\">\"Solid\"<\/span> \/&gt;;<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n<p>Front end frameworks may be a dime-a-dozen, but Solid lives up to it\u2019s jet-speed reputation:<\/p>\n\n\n<figure class=\"wp-block-image is-resized\"><a href=\"https:\/\/dev.to\/ryansolid\/introducing-the-solidjs-ui-library-4mck\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/d2h1bfu6zrdxog.cloudfront.net\/wp-content\/uploads\/2022\/03\/img_62278f0c87949.png\" alt=\"SolidJS process speeds compared to its competitors\" width=\"840\" height=\"625\"\/><\/a><figcaption>SolidJS process speeds compared to competitors<\/figcaption><\/figure>\n\n\n\n<p><a href=\"https:\/\/dev.to\/ryansolid\/introducing-the-solidjs-ui-library-4mck\" target=\"_blank\" rel=\"noopener\"><\/a><\/p>\n\n\n\n<p>SolidJS is also smaller than a lot of its competition. In an implementation of the <a href=\"https:\/\/github.com\/gothinkster\/realworld\" target=\"_blank\" rel=\"noopener\">RealWorld Demo<\/a> SolidJS <a href=\"https:\/\/levelup.gitconnected.com\/a-solid-realworld-demo-comparison-8c3363448fd8\" target=\"_blank\" rel=\"noopener\">was able to bundle to just 11.1kb<\/a> \u2013 about 8% the size of the same implementation using Angular.<\/p>\n\n\n\n<p><a href=\"https:\/\/dev.to\/ryansolid\/introducing-the-solidjs-ui-library-4mck\" target=\"_blank\" rel=\"noopener\">According to Ryan<\/a>, it\u2019s also fully featured and \u201csupports 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.\u201d<\/p>\n\n\n<h2 class=\"wp-block-heading\">Differences between SolidJS and React<\/h2>\n\n<p>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.<\/p>\n\n<h3 class=\"wp-block-heading\">Bye Bye Virtual DOM<\/h3>\n\n<p>You read that right \u2013 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.&nbsp;<\/p>\n\n\n<p>You can find more on how Solid does this and more differences between SolidJS and React <a href=\"https:\/\/blog.logrocket.com\/solidjs-vs-react\/\" target=\"_blank\" rel=\"noopener\">here<\/a>.<\/p>\n\n\n<h3 class=\"wp-block-heading\">Web Components Not Included<\/h3>\n\n<p>While Solid is a great fit to integrate into web components, it actually does not use web components \u201cunder-the-hood\u201d to generate component instances. Ryan\u2019s 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.&nbsp;<\/p>\n\n\n<p>If you\u2019re interested in learning more about the pros and cons of different web component frameworks, check out this article from CoderPad Developer Advocate Corbin Crutchley <a href=\"https:\/\/coderpad.io\/blog\/development\/web-components-101-framework-comparison\/\">here<\/a>.<\/p>\n\n\n<h3 class=\"wp-block-heading\">More Differences With React<\/h3>\n\n<p>Because of Solid\u2019s ability to utilize functions as the reactivity system, you don\u2019t need to rely on dependency arrays like you do with React\u2019s hooks. That means stale closures are dramatically reduced in the Solid ecosystem.<\/p>\n\n\n<p>What\u2019s more, because <a href=\"https:\/\/www.solidjs.com\/guides\/getting-started#no-compilation%3F\" target=\"_blank\" rel=\"noopener\">Solid has a non-JSX method for declaring UI elements<\/a>, you don\u2019t 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 \u2013 no <code>React.createElement<\/code> here!<\/p>\n\n\n<p>For example, our HelloWorld might look like this before being transformed with Solid\u2019s JSX transform:<\/p>\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-2\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-keyword\">import<\/span> { render } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\"solid-js\/web\"<\/span>;\n\n<span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">HelloWorld<\/span>(<span class=\"hljs-params\">props<\/span>) <\/span>{\n  <span class=\"hljs-keyword\">return<\/span> <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span>&gt;<\/span>Hello {props.name}<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span><\/span>;\n}\n\nrender(<span class=\"hljs-function\"><span class=\"hljs-params\">()<\/span> =&gt;<\/span> <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">HelloWorld<\/span> \/&gt;<\/span><\/span>, <span class=\"hljs-built_in\">document<\/span>.getElementById(<span class=\"hljs-string\">\"app\"<\/span>));\n\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-2\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n<p>And after the transform, looks like this:<\/p>\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-3\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-keyword\">import<\/span> { template, render, createComponent, insert } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'solid-js\/web'<\/span>;\n\n<span class=\"hljs-keyword\">const<\/span> _tmpl$ = template(<span class=\"hljs-string\">`&lt;div&gt;Hello &lt;\/div&gt;`<\/span>, <span class=\"hljs-number\">2<\/span>);\n\n<span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">HelloWorld<\/span>(<span class=\"hljs-params\">props<\/span>) <\/span>{\n  <span class=\"hljs-keyword\">return<\/span> <span class=\"hljs-function\">(<span class=\"hljs-params\">(<\/span>) =&gt;<\/span> {\n\t<span class=\"hljs-keyword\">const<\/span> _el$ = _tmpl$.cloneNode(<span class=\"hljs-literal\">true<\/span>);\n      \t_el$.firstChild;\n\n\tinsert(_el$, () =&gt; props.name, <span class=\"hljs-literal\">null<\/span>);\n\t<span class=\"hljs-keyword\">return<\/span> _el$;\n  })();\n}\nrender(<span class=\"hljs-function\"><span class=\"hljs-params\">()<\/span> =&gt;<\/span> createComponent(HelloWorld, {}), <span class=\"hljs-built_in\">document<\/span>.getElementById(<span class=\"hljs-string\">\"app\"<\/span>));<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-3\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Notice how it\u2019s using all vanilla JavaScript APIs like <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Node\/cloneNode\" target=\"_blank\" rel=\"noopener\"><code>cloneNode<\/code><\/a> and <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Node\/firstChild\" target=\"_blank\" rel=\"noopener\"><code>firstChild<\/code><\/a>.<\/p>\n\n\n<h2 class=\"wp-block-heading\">Hackers Wanted<\/h2>\n\n<p>Want to earn some cash and learn more about Solid? They\u2019re 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\u2019t have to give up your weekend to participate \u2013 entries aren\u2019t due until April 7th.&nbsp;<\/p>\n\n\n<p>To find out more about the hackathon, check out the info page <a href=\"https:\/\/hack.solidjs.com\/\" target=\"_blank\" rel=\"noopener\">here<\/a>.&nbsp;<\/p>\n\n\n<h2 class=\"wp-block-heading\">Wrapping Up<\/h2>\n\n\n<p>Ryan has a very unique and substantial development background which is why it&#8217;s no surprise that Solid definitely hits its mark in being an extremely fast and lightweight frontend library. If you\u2019re interested in watching the whole discussion between Ryan and Corbin you can find it on the CoderPad Twitch channel <a href=\"https:\/\/www.twitch.tv\/videos\/1275982315\" target=\"_blank\" rel=\"noopener\">here<\/a>.&nbsp;<\/p>\n\n\n<p>Happy Coding!<\/p>","protected":false},"excerpt":{"rendered":"<p>SolidJS creator Ryan Carniato discusses the speed, ease-of-use, and efficiency benefits of this fascinating UI framework.<\/p>\n","protected":false},"author":12,"featured_media":4629,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[9],"tags":[],"persona":[27,29],"blog-programming-language":[],"keyword-cluster":[],"class_list":["post-4569","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-development"],"acf":[],"_links":{"self":[{"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/posts\/4569","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/users\/12"}],"replies":[{"embeddable":true,"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/comments?post=4569"}],"version-history":[{"count":23,"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/posts\/4569\/revisions"}],"predecessor-version":[{"id":8073,"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/posts\/4569\/revisions\/8073"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/media\/4629"}],"wp:attachment":[{"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/media?parent=4569"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/categories?post=4569"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/tags?post=4569"},{"taxonomy":"persona","embeddable":true,"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/persona?post=4569"},{"taxonomy":"blog-programming-language","embeddable":true,"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/blog-programming-language?post=4569"},{"taxonomy":"keyword-cluster","embeddable":true,"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/keyword-cluster?post=4569"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}