SolidStart 1.0: Peeking Under the Hood

Rate this content
Bookmark

SolidStart is the full stack Meta-Framework from the SolidJS ecosystem. It brings multiple tools and libraries together in a composable fashion to offer highly performant, understandable, and scalable foundations for web applications. Let's explore how SolidStart solves common UX and DX for building better apps.

This talk has been presented at React Summit 2024, check out the latest edition of this React Conference.

FAQ

SolidStarts is a full-stack framework built on top of the Solid framework. It includes features such as a bundler, a serializer named Seroval, and a server, aiming to provide an efficient, unopinionated, and ergonomic development experience.

Ryan, the creator of Solid, is also responsible for SolidStarts. He designed SolidStarts to extend Solid into a full-stack framework with a focus on flexibility and great defaults.

No, SolidStart is designed to be used with the Solid framework. While you might try to use it with React, it is not officially supported and could lead to complications due to the different rendering models of Solid and React.

Seroval is a serializer in SolidStarts that deduplicates references and supports streaming data between the server and client. It helps optimize memory usage and traffic bandwidth, enabling features like streaming data updates.

A SolidStart app includes SolidStart as the core framework, the Solid rendering library for the user interface, a router for client-side logic and data loading, and metatags management. These components work together to provide a flexible and efficient development experience.

SolidStarts uses the Solid router to manage client-side logic, data loading, and state between URLs. It provides primitives for async transformations and file-based routing, supporting features like caching and server actions.

Nitro is a server runtime and bundler used in SolidStarts, similar to Vite but for servers. It allows SolidStarts to deploy to multiple platforms easily and supports features like server and client code separation.

Yes, SolidStart can be configured to build single-page applications. It provides flexibility to switch between different modes, making it suitable for various types of applications.

The Solid DX team, including DevRel lead Attila, works on improving the developer experience of the Solid ecosystem. They focus on translating the vision and challenges into practical tools and features that enhance the framework.

Yes, SolidStart is ready for production use. It has undergone extensive research and development to ensure stability and performance. Several production apps, including those at Crab Nebula, have successfully used SolidStart.

Atila Fassina
Atila Fassina
30 min
14 Jun, 2024

Comments

Sign in or register to post your comment.

Video Summary and Transcription

SolidStart is an efficient, unopinionated, and ergonomic full-stack framework that provides great defaults and flexibility. It includes features such as a bundler, a serializer, a server, and a router. The serializer, Seroval, enables streaming and real-time state synchronization between server and client. SolidStart offers powerful file routes, RPCs, and single-flight mutations. It is recommended for building UIs in full applications, Spark, single-page apps, and native apps.

1. Introduction to SolidStarts

Short description:

♪♪♪ Thanks for being here. Let's talk a little bit about SolidStarts. SolidStarts is when we put a bunch of other features in Solid to make it a full-stack framework. It is efficient, unopinionated, and ergonomic. The Solid ecosystem is built around the idea of having great defaults and offering tons of flexibility. Tooling and JavaScript in web development is like LEGO bricks. We build something bigger by composing LEGO pieces. If you start gluing the LEGO pieces, it spoils the fun. SolidStars avoids that by providing great defaults and flexibility.

♪♪♪ Thanks for being here. Thanks, Phil, for the introduction. And, yeah, I've been in Europe for some time. I stopped counting after the first decade. So, yeah, let's talk a little bit about SolidStarts. Some of you, I hope, I imagine most of you have been in the keynote today where Ryan talked a lot about the challenges of front-end development nowadays, and you probably wondered how a guy that has those ideas would come up with a framework. So, let's talk about it a little bit.

But first of all, yeah, Attila or Achla or whatever rolls off your tongue, if I understand you are talking to me, I'll reply, I promise. I work as a DevRel lead at a company called Crab Nebula. We worked with another framework called Tauri, which is a framework for building hybrid applications, and we do think it has a really good combo with Solid. So, I also work with Solid on a day-to-day basis. I'm part of the Solid DX team, and I'm a GDE. So, if you have any feedback, questions, anything, you can use this handy shortcuts on my website, because naming things in the web is hard, and I just switch handlers everywhere. So, just append a social network and you'll find me, and I promise I'll reply.

But, yeah, without further ado, what the heck is SolidStarts? So, you heard Ryan talking about and you probably know him as a Solid creator. So, SolidStarts is essentially when we put a bunch of other features in Solid to make it a full-stack framework. And the idea is to be efficient, unopinionated, and ergonomic. So, a Solid framework, I would say, because of that whole point that he had when he said that he wanted to build a SolidStarts, a meta-framework that hates meta-frameworks. So, as a DX team member, part of my work is take these nuggets of knowledge, pain, and suffering that he has, and translate that into how that imprints the vision of the tool itself. So, a lot of the slides in this talk are about going deeper into what does that actually mean.

So, first, who here likes LEGO? I love LEGO. I hope you appreciate the analogy. So, yeah, tooling and JavaScript and web development, I'd say, is like LEGO bricks. We go composing things and they don't do much on their own. Hopefully, if they do too much, it's probably a problem. But when they do, they have a bunch of nice features and then we put them together and we build something bigger. That's our apps. And then, we come to the conclusion in the Solid team that if you start gluing the LEGO pieces, it kind of spoils the fun, because then you build something that's great for you at that time, at that period, but then, if you grow up over it, or if you change your mind, or if you see something that's cool that would fit in the middle, it's kind of hard to do it. So, we decided, no, that wouldn't be the case. So, SolidStars is built and the whole Solid ecosystem is actually built around the idea of having great defaults, giving you, like, the best possible experience from the get-go, but also offering tons of flexibility.

2. Exploring SolidStarts

Short description:

So, if you don't want to use a piece of that, you can take it out and build it your own. Your opinions are welcome throughout the stack. How does an actual SolidStart app look like? SolidStart is the core of the framework, packed with a bundler, a serializer, and a server. Solid itself is the rendering library for the user interface. The router handles client-side logic and data loading, including soft navigation. The metatags package is also available. Under the hood, SolidStart is built with flexibility in mind. The serializer, Seroval, deduplicates API responses to save memory and bandwidth. It also has the capability to stream data. The first demo is the Raven website.

So, if you don't want to use a piece of that, you can take it out, and you can put whatever you want, you can build it your own. That's the idea. So, in other words, your opinions are welcome throughout the stack. Like, literally, if you don't like the router that we built, you can build your own. And it's pretty much as easy to use an external router as it is to use our own. And that works for everything, every other thing.

So, how does an actual SolidStart app look like from the distance? So, we have SolidStart, which is the core of this framework. So, SolidStart comes packed with a bundler, a serializer, and a server. Then we have Solid itself, the rendering library that is helping you render the user interface. We have the router, which is going to do the client-side logic and also the data loading. So, you can create different URLs, you can manage the state between the URLs. It's going to handle for you the soft navigation, all these kind of annoying pieces that we need to reinvent browsers. And it's also going to do the data loading part. So, giving you some nice primitives to work on. And then, like the last, the biggest unsung hero is the metatags. So, we have also a package for that. You can build your own, but, yeah, there's nothing much exciting about that.

So, yeah, but the idea is to peek under the hood of SolidStart, right? So, what builds SolidStart? And the flexibility that we actually give you. It's not really taking out the parts that integrate to it, but you can actually mess around with the internals of it. And for that, you need to understand it. So, as Ryan said in his talk, having a server between you and your client and your user is a tricky thing to have. So, for that, we have our serializer. It's called Seroval. So picture this. You have three server functions which you're doing as a best practice. You fetch data from the server and then you want to pass it to the client. What happens is that Seroval is going to take all these functions and is going to deduplicate the references, which means that if different API request comes up with the same response, we're only going to serialize that once to save you some memory on the server and to save you some traffic bandwidth as well. On top of that, because everything in the web is very naturally asynchronous, what Seroval also has a capability for is to stream data, which brings us to the first demo. So, our first demo is this little website called the Raven.

QnA