{"id":2853,"date":"2024-01-08T09:00:00","date_gmt":"2024-01-08T10:00:00","guid":{"rendered":"https:\/\/vfflogs.com\/?p=2853"},"modified":"2024-01-11T21:22:15","modified_gmt":"2024-01-11T21:22:15","slug":"solidstart-a-different-breed-of-meta-framework","status":"publish","type":"post","link":"https:\/\/vfflogs.com\/index.php\/2024\/01\/08\/solidstart-a-different-breed-of-meta-framework\/","title":{"rendered":"SolidStart: A Different Breed Of Meta-Framework"},"content":{"rendered":"<p>              <title>SolidStart: A Different Breed Of Meta-Framework<\/title><\/p>\n<article>\n<header>\n<h1>SolidStart: A Different Breed Of Meta-Framework<\/h1>\n<address>Atila Fassina<\/address>\n<p>                  2024-01-08T10:00:00+00:00<br \/>\n                  2024-01-11T21:04:46+00:00<br \/>\n                <\/header>\n<p>The current landscape of web tooling is increasingly more complex than ever before. We have libraries such as Solid, Vue, Svelte, Angular, React, and others that handle UI (User Interface) updates in an ergonomic fashion. The ever more important topic weighing on developers is the balance and trade-off of performance and usability best practices.<\/p>\n<p>Developers are also blurring the lines between front-end and back-end code. The way we colocate logic and data is becoming more interesting as we integrate and mesh the way they work together to deliver a unified app experience.<\/p>\n<p>With these shifts in ideology in mind, meta-frameworks have evolved around the core libraries in unique ways. To encapsulate the paradigms in which the UI is rendered and create seamless interoperability between our server code and our browser code, <strong>new practices are emerging<\/strong>.<\/p>\n<p>While the initial idea of having a \u201cmeta\u201d framework was to stitch together different sets of tools in order to build smooth experiences, it is tough to create integrations without making some level of opinionated decisions. So frameworks such as QwikCity, SvelteKit, Redwood, and Next.js went all the way into their own opinionated territory and provided a hard railway to ensure a defined set of conventions.<\/p>\n<p>Meanwhile, others like Nuxt, Remix, and Analog stayed with a more shallow abstraction of their integrations, allowing a mix of their toolings and more easily using resources from the community (Vite is a good example of a tool that is shallowly used by all of them).<\/p>\n<p>This not only produces a lower vendor lock-in to developers but also allows configuration to be re-used in some cases as such decisions are stripped out of opinions in favor of stronger abstractions. <strong>SolidStart takes a giant step beyond<\/strong> that into unbiased territory. Its own core is around 1500 lines of code, and the biggest pieces of functionality are provided with a meshing of well-integrated tools.<\/p>\n<div data-audience=\"non-subscriber\" data-remove=\"true\" class=\"feature-panel-container\">\n<aside class=\"feature-panel\">\n<div class=\"feature-panel-left-col\">\n<div class=\"feature-panel-description\">\n<p>Meet <a data-instant href=\"\/the-smashing-newsletter\/\"><strong>Smashing Email Newsletter<\/strong><\/a> with useful tips on front-end, design &amp; UX. Subscribe and <strong>get \u201cSmart Interface Design Checklists\u201d<\/strong> &mdash; a <strong>free PDF deck<\/strong> with 150+ questions to ask yourself when designing and building almost <em>anything<\/em>.<\/p>\n<div>\n<section class=\"nlbf\">\n<div class=\"nlbwrapper\"><label for=\"mce-EMAIL-hp\" class=\"sr-only\">Your (smashing) email<\/label><\/p>\n<div class=\"nlbgroup\">\n<\/div>\n<\/div>\n<p>.c-garfield-the-cat .nlbwrapper{margin-bottom: 0;}.nlbf{display:flex;padding-bottom:.25em;padding-top:.5em;text-align:center;letter-spacing:-.5px;color:#fff;font-size:1.15em}.nlbgroup:hover{box-shadow:0 1px 7px -5px rgba(50,50,93,.25),0 3px 16px -8px rgba(0,0,0,.3),0 -6px 16px -6px rgba(0,0,0,.025)}.nlbf .nlbf-button,.nlbf .nlbf-email{flex-grow:1;flex-shrink:0;width:auto;margin:0;padding:.75em 1em;border:0;border-radius:11px;background:#fff;font-size:1em;box-shadow:none}.promo-box .nlbf-button:focus,.promo-box input.nlbf-email:active,.promo-box input.nlbf-email:focus{box-shadow:none}.nlbf-button:-ms-input-placeholder,.nlbf-email:-ms-input-placeholder{color:#777;font-style:italic}.nlbf-button::-webkit-input-placeholder,.nlbf-email::-webkit-input-placeholder{color:#777;font-style:italic}.nlbf-button:-ms-input-placeholder,.nlbf-button::-moz-placeholder,.nlbf-button::placeholder,.nlbf-email:-ms-input-placeholder,.nlbf-email::-moz-placeholder,.nlbf-email::placeholder{color:#777;font-style:italic}.nlbf .nlbf-button{transition:all .2s ease-in-out;color:#fff;background-color:#0168b8;font-weight:700;box-shadow:0 1px 1px rgba(0,0,0,.3);width:100%;border:0;border-left:1px solid #ddd;flex:2;border-top-left-radius:0;border-bottom-left-radius:0}.nlbf .nlbf-email{border-top-right-radius:0;border-bottom-right-radius:0;width:100%;flex:4;min-width:150px}@media all and (max-width:650px){.nlbf .nlbgroup{flex-wrap:wrap;box-shadow:none}.nlbf .nlbf-button,.nlbf .nlbf-email{border-radius:11px;border-left:none}.nlbf .nlbf-email{box-shadow:0 13px 27px -5px rgba(50,50,93,.25),0 8px 16px -8px rgba(0,0,0,.3),0 -6px 16px -6px rgba(0,0,0,.025);min-width:100%}.nlbf .nlbf-button{margin-top:1em;box-shadow:0 1px 1px rgba(0,0,0,.5)}}.nlbf .nlbf-button:active,.nlbf .nlbf-button:focus,.nlbf .nlbf-button:hover{cursor:pointer;color:#fff;background-color:#0168b8;border-color:#dadada;box-shadow:0 1px 1px rgba(0,0,0,.3)}.nlbf .nlbf-button:active,.nlbf .nlbf-button:focus{outline:0!important;text-shadow:1px 1px 1px rgba(0,0,0,.3);box-shadow:inset 0 3px 3px rgba(0,0,0,.3)}.nlbgroup{display:flex;box-shadow:0 13px 27px -5px rgba(50,50,93,.25),0 8px 16px -8px rgba(0,0,0,.3),0 -6px 16px -6px rgba(0,0,0,.025);border-radius:11px;transition:box-shadow .2s ease-in-out}.nlbwrapper{display:flex;flex-direction:column;justify-content:center}.nlbf form{width:100%}.nlbf .nlbgroup{margin:0}.nlbcaption{font-size:.9em;line-height:1.5em;color:#fff;border-radius:11px;padding:.5em 1em;display:inline-block;background-color:#0067b859;text-shadow:1px 1px 1px rgba(0,0,0,.3)}.wf-loaded-stage2 .nlbf .nlbf-button{font-family:Mija}.mts{margin-top: 5px !important;}.mbn{margin-bottom: 0 !important;}<\/section>\n<p class=\"mts mbn\"><small class=\"promo-box__footer mtm block grey\"><em>Once a week. Useful tips on <a href=\"https:\/\/www.smashingmagazine.com\/the-smashing-newsletter\/\">front-end &amp; UX<\/a>. Trusted by 190.000 friendly folks.<\/em><\/small><\/p>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"feature-panel-right-col\">\n<div class=\"feature-panel-image\">\n<img loading=\"lazy\" class=\"feature-panel-image-img\" src=\"\/images\/smashing-cat\/cat-firechat.svg\" alt=\"Feature Panel\" width=\"310\" height=\"400\" \/><\/p>\n<\/div>\n<\/div>\n<\/aside>\n<\/div>\n<h2 id=\"modules-over-monoliths\">Modules Over Monoliths<\/h2>\n<p>The impetus behind decoupling the architecture completely is to give power to the consuming developer to pick the framework and build it according to their desire. A developer may want to use Solid and SSR, but let\u2019s imagine legacy code has a tight dependency on TanStack Router, while SolidStart and most Solid projects have Solid-Router instead. With a decoupled architecture, it becomes possible to either create an incremental adoption or integration layer so that everything will work tailored to the team\u2019s best benefit.<\/p>\n<p>The decoupled architecture sustaining newer frameworks also empowers the developer for a <strong>better debugging experience<\/strong> within and beyond its community. If an issue is encountered on the server, you\u2019re not restricted to the knowledge of a specific framework.<\/p>\n<p>For example, since both are based on Nitro, the Analog and SolidStart communities can now share knowledge with each other. Beyond that, because all of them are based in Nitro and Vite, Nuxt, Analog, and SolidStart can deploy to the same platforms and share implementation details to make each ecosystem grow together. The community wins with this approach, and the library\/framework developers win as well. This is a radically <strong>new pattern and approach<\/strong> to jointly sharing the weight of meta-framework maintenance (one of the most feared responsibilities of maintainers).<\/p>\n<h2 id=\"what-is-solidstart-exactly\">What Is SolidStart Exactly?<\/h2>\n<p>SolidStart is built from five fundamental pillars:<\/p>\n<ol>\n<li><a href=\"https:\/\/solidjs.com\">Solid<\/a>: the view library that provides rendering abstractions.<\/li>\n<li><a href=\"https:\/\/vite.dev\/\">Vite<\/a> (within Vinxi): the bundler to optimize code for execution in different runtimes.<\/li>\n<li><a href=\"https:\/\/nitro.unjs.io\/\">Nitro<\/a> (within Vinxi): the agnostic web server created by the Nuxt team and based on h3 with Rollup.<\/li>\n<li><a href=\"https:\/\/github.com\/nksaraf\/vinxi\">Vinxi<\/a>: the orchestrator, what determines where the runtimes and the code each one has.<\/li>\n<li><a href=\"https:\/\/github.com\/lxsmnsyc\/seroval\">Seroval<\/a>: the data serializer that will bridge data from server to browser and back.<\/li>\n<\/ol>\n<figure class=\"\n  \n    break-out article__image\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/files.smashing.media\/articles\/solidstart-different-breed-meta-framework\/anatomy-solidstart.png\"><\/p>\n<p>    <img loading=\"lazy\" width=\"800\" src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/solidstart-different-breed-meta-framework\/anatomy-solidstart.png\" alt=\"the anatomy of SolidStart\" \/><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      The anatomy of SolidStart.<br \/>\n    <\/figcaption><\/figure>\n<h2 id=\"1-solid\">1. Solid<\/h2>\n<p>Solid as a rendering library has become increasingly popular because of its incredible rendering performance and thin abstraction layer. It\u2019s built on top of Signals, a renewing and modern implementation of the classical Observer Pattern, and provides a series of helpers to empower the developer to create extremely <strong>high-performance and easy-to-read code<\/strong>.<\/p>\n<p>It uses JSX and has syntax that is very similar to React, but under the hood, it operates in a completely different manner. Bringing the developer closer to the DOM while still providing the needed ergonomics to be productive in the developer environment. At only 3Kb of bundle size, it\u2019s often a choice even for mostly static sites. e.g., many people use Solid to bring interactivity to their content-based Astro websites when needed.<\/p>\n<p>Solid also brings first-class primitives, built-in Control Flow components, high-quality state management, and full TypeScript support. Solid packs a punch in a small efficient package.<\/p>\n<h2 id=\"2-vite\">2. Vite<\/h2>\n<p>Arguably the best bundler in the JavaScript ecosystem, Vite has the right balance between declarative and customizable configuration. It\u2019s fully based on TypeScript, which makes it easy to extend by the consuming library or framework, and has a large enough user base that guarantees its versatility. Vite works with and has become the <strong>de-facto tool for many frameworks<\/strong>, such as Astro, Vue, Preact, Elm, Lit, Svelte, Nuxt, Analog, Remix, and many others.<\/p>\n<p>Aside from its popularity, it is particularly loved for its fast server start time, HMR support, optimized builds, ease of configuration, rich plug-in ecosystem, modern tooling, and high-quality overall developer experience.<\/p>\n<div class=\"partners__lead-place\"><\/div>\n<h2 id=\"3-nitro\">3. Nitro<\/h2>\n<p>A framework in itself, Nitro is written in TypeScript and is completely agnostic and open for every <strong>meta-framework<\/strong> to use as a foundation. It provides a powerful set of tools and APIs to manage caching, routes, and tree-shaking. It is a fast base for any JavaScript-based project to build their server on. Nitro is highly scalable, integrating easily into DevOps and CI\/CD pipelines, security-focused, robust, and boasts a rich set of adapters, making it deployable on most, if not all, major vendor platforms.<\/p>\n<p>Think of Nitro as a bolt-on extension that makes Vite easier to build on and more pliable. It solves a majority of run-time level concerns that would need to be solved in Vite.<\/p>\n<h2 id=\"4-vinxi\">4. Vinxi<\/h2>\n<p>Vinxi is an SDK (Software Development Kit) that brings <strong>a powerful set of configuration-based tools<\/strong> to create full-stack applications. It composes Nitro under the hood to establish a web server and leverages Vite for the bundling components. It is inspired by the Bun App API and works via a very declarative interface to instantiate an app by setting routers for each runtime.<\/p>\n<p>For example:<\/p>\n<div class=\"break-out\">\n<pre><code class=\"language-jsx\">import { createApp } from \"vinxi\";\nimport solid from \"vite-plugin-solid\";\n\nconst resources = {\n    name: \"public\",\n    mode: \"static\",\n    dir: \".\/public\",\n};\n\nconst spa = {\n    name: \"client\",\n    mode: \"build\",\n    handler: \".\/app\/client.tsx\",\n    target: \"browser\",\n    plugins: () =&gt; [solid({ ssr: true })],\n    base: \"\/&#095;build\"\n}\n\nconst server = {\n    name: \"ssr\",\n    mode: \"handler\",\n    handler: \".\/app\/server.tsx\",\n    target: \"server\",\n    plugins: () =&gt; [solid({ ssr: true })],\n}\n\nexport default createApp({\n    routers: [resources, spa, server],\n});\n<\/code><\/pre>\n<\/div>\n<p>As resource routes work as a bucket, by defining <code>mode: &quot;static&quot;<\/code> there\u2019s no need to define a handler. Your router can also be statically built (<code>mode: \u201cbuild\u201d<\/code>) and targeted towards the browser runtime, or it can be on the server and handle each request via its entry-point <code>handler: &quot;.\/app\/server.tsx&quot;<\/code>.<\/p>\n<p>Vinxi will leverage the right set of APIs from Nitro and Vite so your resources aren\u2019t exposed to the wrong runtimes and so that <strong>deployment works smoothly<\/strong> for defined platform providers.<\/p>\n<h2 id=\"5-seroval\">5. Seroval<\/h2>\n<p>Once routers are set, and the app can handle navigation (hard navigation via the \u201cssr\u201d handler and soft navigation via the \u201cclient\u201d handler), it\u2019s time to stitch them together. This is the part where SolidStart\u2019s core comes into place. It supplies APIs that deliver the ergonomics to <strong>fetch and mutate requests<\/strong>.<\/p>\n<p>All these APIs are powered by yet another agnostic library called Seroval. In order to send data between server and client in a secure manner, it all needs to be serialized. Seroval defines itself in an over-simplistic way: \u201cStringify JS Values.\u201d However, this definition doesn\u2019t address the fact it does so in an extremely powerful and fast fashion.<\/p>\n<p>Thanks to Seroval, SolidStart is able to safely and efficiently cross the <strong>serialization boundary.<\/strong> Resource serialization is arguably the most important feature of a full-stack framework &mdash; without it, the back-end and front-end bridge simply won\u2019t work in a smooth way.<\/p>\n<p>Besides resource serialization, SolidStart can also use <strong>server actions.<\/strong> Straight from the <a href=\"https:\/\/start.solidjs.com\/core-concepts\/actions\">documentation<\/a>, this is how server actions look for us (note the <code>&quot;use server&quot;<\/code> directive that allows Vinxi to put the code in the correct place.<\/p>\n<div class=\"break-out\">\n<pre><code class=\"language-tsx\">import { action, redirect } from \"@solidjs\/router\";\n \nconst isAdmin = action(async (formData: FormData) =&gt; {\n  \"use server\";\n  await new Promise((resolve, reject) =&gt; setTimeout(resolve, 1000));\n  const username = formData.get(\"username\");\n  if (username === \"admin\") throw redirect(\"\/admin\");\n  return new Error(\"Invalid username\");\n});\n \nexport function MyComponent() {\n  return (\n    &lt;form action={isAdmin} method=\"post\"&gt;\n      &lt;label for=\"username\"&gt;Username:&lt;\/label&gt;\n      &lt;input type=\"text\" name=\"username\" \/&gt;\n      &lt;input type=\"submit\" value=\"submit\" \/&gt;\n    &lt;\/form&gt;\n  );\n}\n<\/code><\/pre>\n<\/div>\n<div class=\"partners__lead-place\"><\/div>\n<h2 id=\"everything-comes-together\">Everything Comes Together<\/h2>\n<p>After this breakdown, things may still be a bit up in the air. So, let\u2019s close the loop by assembling the parts:<\/p>\n<figure class=\"\n  \n    break-out article__image\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/files.smashing.media\/articles\/solidstart-different-breed-meta-framework\/solidstart-explained.png\"><\/p>\n<p>    <img loading=\"lazy\" width=\"800\" src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/solidstart-different-breed-meta-framework\/solidstart-explained.png\" alt=\"SolidStart explained\" \/><\/p>\n<p>    <\/a><\/p>\n<\/figure>\n<p>Hopefully, this little exercise of pulling the framework apart and putting the pieces back together was interesting and insightful. Let me know in the comments below or on <a href=\"https:\/\/atila.io\/x\">X<\/a> if this has helped you better understand or even choose the tools for your next project.<\/p>\n<h2 id=\"final-considerations\">Final Considerations<\/h2>\n<p>This article would not have been possible without the technical help from my awesome folks at Solid\u2019s team: <a href=\"https:\/\/x.com\/davedbase\">Dave Di Biase<\/a>, <a href=\"https:\/\/x.com\/lxsmnsyc\">Alexis Munsayac<\/a>, <a href=\"https:\/\/dev.to\/lexlohr\">Alex Lohr<\/a>, <a href=\"https:\/\/x.com\/danieljcafonso\">Daniel Afonso<\/a>, and <a href=\"https:\/\/x.com\/nkSaraf98\">Nikhil Saraf<\/a>. Thank you for your reviews, insights, and overall making me sound cleverer!<\/p>\n<div class=\"signature\">\n  <img src=\"https:\/\/www.smashingmagazine.com\/images\/logo\/logo--red.png\" alt=\"Smashing Editorial\" width=\"35\" height=\"46\" loading=\"lazy\" \/><br \/>\n  <span>(il)<\/span>\n<\/div>\n<\/article>\n","protected":false},"excerpt":{"rendered":"<p>SolidStart: A Different Breed Of Meta-Framework SolidStart: A Different Breed Of Meta-Framework Atila Fassina 2024-01-08T10:00:00+00:00 2024-01-11T21:04:46+00:00 The current ...<\/p>","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[10],"tags":[],"_links":{"self":[{"href":"https:\/\/vfflogs.com\/index.php\/wp-json\/wp\/v2\/posts\/2853"}],"collection":[{"href":"https:\/\/vfflogs.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/vfflogs.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/vfflogs.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/vfflogs.com\/index.php\/wp-json\/wp\/v2\/comments?post=2853"}],"version-history":[{"count":1,"href":"https:\/\/vfflogs.com\/index.php\/wp-json\/wp\/v2\/posts\/2853\/revisions"}],"predecessor-version":[{"id":2854,"href":"https:\/\/vfflogs.com\/index.php\/wp-json\/wp\/v2\/posts\/2853\/revisions\/2854"}],"wp:attachment":[{"href":"https:\/\/vfflogs.com\/index.php\/wp-json\/wp\/v2\/media?parent=2853"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/vfflogs.com\/index.php\/wp-json\/wp\/v2\/categories?post=2853"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/vfflogs.com\/index.php\/wp-json\/wp\/v2\/tags?post=2853"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}