The First Post-React Framework Just Launched

solid start 1.0 the shape of Frameworks to come this is a pretty exciting release it's no secret that I've been a big fan of solid for a while especially Ryan carnado the creator of solid the team he's formed the things he's built the way he's pushed the ecosystem is is hard to put into words there probably isn't any other person in the space that knows other Frameworks as well as Ryan does he's been a phenomenal source of info not just of solid or signals or all the cool things happening there but of the ecosystem as a whole and I've learned so much from him I've had inedible conversations with him and as such I can't really have anything but excitement as I read this so no going in I'm a little biased CU I love solid I love Ryan this is a really exciting release I want to take time to go over it so without further Ado let's talk about solid start 1.0 my favorite JavaScript framework and my second most used there are some bold statements in here too by the way I I I pre-read but I pre-read old versions so I'm excited to see this one the role of server rendering in JavaScript is growing in pursuit of performance and optimization everything points to leveraging the server more it's also clear that it isn't getting any easier to get started with this technology people were having a hard enough time as it was with their web packing figs and now we need to do a lot more to play nicely on the server I just recorded a whole video about remix and react router where I talked a lot about the same stuff webpack was rough at the time webpack once you're also dealing with servers a lot rougher something needed to be done but it needed to be done right you're getting so good with the pros Ryan something easy enough that one could get started without much effort but not so opinionated that you're stuck on specific Technologies the solution needed to appeal to everyone and not fracture our growing ecosystem this is again one of those things that not many Frameworks get right and I think react as a whole has had a really good record with even when people upset with some of the new stuff the fact that react is so backwards compatible is an achievement and it seems like he's trying to go a similar Direction with solid which makes a lot of sense because the the ergonomics and even some of the mindset in solid definitely takes some meaningful inspiration from react fortunately V 2.0's release showed the way that this could be done and the rest was history or that's what I would like to say but the truth was there was still a lot more to figure out multiple rewrites two beta phases and a lot of learning but 3 years later we've reached our first major release this part's important too I don't think like like V doesn't just solve the problem as important and incredible as V is it at the time was just another bundler they slowly added features to make it easier to do server side and client side stuff but it was very very primitive and not very very clear how to use it there have been a lot of cool projects like Nitro if you're not already familiar with Nitro it is the next Generation server toolkit it's the set of tools to build server side stuff in V so if you're building your own equivalent of a next or remix or solid we finally are starting to get the tools built on top of the tools built on top of the tools necessary to do that right because V's built on top of rollup and Es build and now Nitro is built on top of V now we have a layer that makes sense to start building our own Frameworks on top of but getting there in the first place that's been rough and it's really cool to see things like Nitro as well as viny thank you for bringing that one up too viny the full stack JavaScript SDK to build full stack apps and Frameworks with your own opinions powered by V and Nitro okay so the layering is now es build and roll up with vit on top with Nitro on top and then viny as the top layer there so you can then build your framework on top chaos it's getting there a lot of progress has been made and solid has historically been one of the earliest consumers of these things it's Vinci cool it's spelled viny so it's called viny now sorry to the creators I I'm calling it how it's spelled yeah we get the idea though just having V kind of know what servers is was not what we needed we needed to to build tools on top first in order for things like solid start to be viable much less good maintainable and standards following So speaking of which what even is solid start solid start is a JavaScript framework designed to build solid JS applications and deploy them to a variety of providers this doesn't sound all that different from most other JS Frameworks but the devil is in the details there is some very interesting details we need to go over here too everything is alart solid start is designed first and foremost to be a starter this is a big difference from other Frameworks where like nextjs isn't designed to be a starter so much as a framework that includes everything you might need and makes it easy to add things on top the minimal starting point with something like next is pretty hefty the minimal starting point with solid start is very very small the basic setup without installing any libraries produces a hello world example that is only 5 kiloby of minifi JS and gep don't want to use additional libraries don't worry you don't have to to solid starts base does not lock you into any specific conventions adopting some of the ones we provide in solid start will often provide the best experience but it isn't mandatory to pay the price of features that you don't need and that you're not using I wish more Frameworks took this mindset it to be fair the ones that I recommend like next which we'll be saying a lot throughout this the bundle size is slowly crept up but we're still only in the like 200 kilobyte range so it's not the worst but it's still not the best and if you actually have a static page that doesn't need a router that doesn't need all of the like rout URL management server streaming stuff you're just writing a hello world it should be 5 kiloby of JavaScript the idea of a framework that scales up and down depending on how much or how little you use is something that we've talked about for a while with things like the magic promise of tree shaking that never really came true this is one of the few Frameworks that's built on top of that it's almost like Progressive enhancement but for not this magical imaginary idea of not writing JavaScript it's Progressive enhancement in the amount of JavaScript that is being included based on how much you are or aren't doing bring your own application router here's where things get even more interesting because almost every other one of these Frameworks is also a router nextjs is a router in fact the whole next 13 Fiasco was because of the introduction of app router next 13 isn't where things changed app router is where they changed you could have just kept using Pages router but the confusion of next being a router and a framework has resulted in people just not understanding and that blurriness has sucked even remix kind of just went through this where remix and react router were intermingled but the relationship was unclear so they sacrificed the remix brand temporarily in order to push things in the react router direction to make it clear the router is the core piece not in solid start you can bring your own router solid start does have file system routing it uses a similar convention to n where parameters are passed via an array syntax however we also use parentheses as a way to do more powerful things like route groups named index routes it is a way to break out of nesting basically whatever you put between the parentheses is removed from the matching but it still impacts the structure of your routes this is a cool pattern that's also in xjs where you can tell it like hey this is me grouping folders don't make this part of the route definition just let me put things here instead so you can have like SL dashboard and you can have three different sections like user profiles data and those three different groups don't affect the routing so they're all still on SL dashboard really nice pattern still feel like reading through the routes folder is not the most pleasant experience in any of these Frameworks I'll drop the hot take of spelt kit does this the best I obviously don't ship a whole lot of spelt so it's quite possible I'm just wrong about all of this and what the DX is like but one of the cool things they do in solid is all of the routing things have a plus in front in the name which might seem unnecessary and tedious but the very simple benefit of putting the Plus in front is that now these things will rise to the top in your uh file tree because they're sorted alphabetically so it's such a dumb hack but just putting the Plus in front means everything related to your routing will be at the top of the folder when you're looking at it in vs code or whatever editor you're using if it has a file tree and everything that isn't part of the routing is just right underneath it's a small thing but I like that a lot and I wish more things copied that that said this looks pretty familiar to me it's almost like a hybrid of Like Remix or n and nexj taking a lot of the best parts but I do miss the Plus in front the configuration that we get from the file system is then passed back to the application to be used in the router of your choice this is one of those I've never seen it before borderline groundbreaking things that's really exciting to me I know that Tanner is working on some similar stuff with tan stack router but the idea that the file router is just a way to get routes not a way to bundle your whole framework and application is really interesting because you can just import the file routes and make them part of your application this way this makes things like in incremental adoption actually viable this makes things like writing custom route behavior on top that makes certain things more Dynamic than a file router allows trivial this makes so many cool things possible that I haven't seen other Frameworks even really consider I've never even thought like what if I could import file router inside of my router what if I could just import this as a component and mount it how I want to for the way I want to build my app really cool stuff also XO has a router too and they've copied a lot of things that's a good point I should definitely talk about XO router more in the future this is really interesting though I want to dig into this here we're seeing the file routes get dumped inside of the solid router but you could use any router you wanted you could Fork solid router you could use any of the others that exist already you could build your own crazy patterns and solutions here the fact that the file router is just a component or the file the file routes are just a component is one of those like oh like mindblowing huh that's different moments for me so how do we configure the routes then our route export lets you define your custom route config we automatically lazy wrap the default exported component and we add it to your config under the component property so here we have the config which has an export coner route equals load void get story so this is getting the data or whatever else we want match filters ID this is for only allowing numbers for the ID and this satisfies route definition satisfies is like a thing framework authors can recommend is still really op I love this then we export the default function my route component now we have a configured route that has this particular match has a way to load data now we can call this wherever we want you can set your own types and use the router of your choice configured how you want in your projects so cool enough about the routing now I get to talk about everyone's favorite thing Progressive enhancement but it's again the solid way which isn't anything like the current solution it's not really traditional Progressive enhancement let's see what I mean by that the server enhances no rewrites here solid start was built as a single page app framework first every feature is designed to work with all the libraries you already use to do so required us to carefully consider how we add several only capabilities this is what led to us pioneering server functions in early 2022 a feature that has since made its way into several popular Frameworks I am curious what you have linked here yeah nextjs has server ACC mutations yep quick has server dollar sign yep solid was real early with this especially in the bling ERA Real throwback does anybody have the bling yeah TC bling for those who worked around when this happened so was a bit of a niche moment Tanner and Ryan and a few others were working on some Primitives in order to write a server function anywhere in your code and then a compiler would turn that into an endpoint and just replace it with a fetch so you could write server dollar sign do some serveron stuff here and then this function that you get as a result can be used in client code totally fine it's almost like inverse server components now that we know server components but at the time server components were still just barely a thought nobody was really using them yet and they wanted a better way to do async server side code inside of client code it's like embedded trpc where it's not from a different file being imported and using a bunch of typescript hacks just write it and the bundler handle it really cool stuff but it's since not the focus and I believe solid start as well as all these other Solutions have built their own things now instead but bling was the first attempt at trying to make a standard solution that everyone could adopt so they were very much first here it's cool to see everybody else copying but their new way of doing it is really cool as well because they did another one of those solid things that I haven't seen anybody else really take advantage of can you guys stop say it's almost directly inspired by Blitz it's not you guys just don't know how Blitz Works Blitz lets you define your like behaviors in other files and then you import them but like the blitz pipelines for data have to be somewhere else this blitz is much closer to trpc than it is to bling bling lets you inside of your client code WR server code different thing it's bling not Blitz nille said it in a stream H anyways I want to talk about aidis because there's another little thing solid does that I think is really really clever and I wish more framework Works did you might have noticed earlier if you're a react Dev that isn't familiar with solid that this code probably looks familiar this just looks like react code because nothing here would be valid in react and invalid in solid or vice versa the Syntax for managing your state in solid is different and the idea of what a component does is very different but the syntax and as such a lot of other things look almost directly the same the thing that's interesting here is that you're able to use a lot of the tooling that was built around react when you're using solid things like jsx and TSX compilers and pilers just work things like syntax highlighting and linting in your editor just work other Frameworks like Astro have had to build crazy things around like building prettier plugins to work with Astro syntax around building their own syntax highlighter so it works in your editor of choice solid gets to skip all of that because they take these things that are good enough from another ecosystem and then ride their coattails in order to build the thing they actually want to build which is a better framework this is where I think the server enhancement stuff and the server functions get really really interesting because the same way they were able to reuse jsx syntax to not have to reinvent all those things they're also reusing a syntax that's kind of new they're reusing you server by taking you server they're able to ride the cails of all the work going to make us server work in bundlers Frameworks ecosystems tooling and it's a pattern now us server isn't a thing that has to be just reacts thing and Ryan has done a great job here realizing that these Concepts can be taken and that these syntaxes can be taken and used in a different way but now you have all of the tooling the has already been built around it by adding you server to a function it is only executed on the server either being naturally called on the server or used as an RPC from the client server functions are transparent from a typescript perspective and they can fit into your existing apis like fetches and tanat query how cool is that though like how cool is that that you can just have a query function that is how you're getting in this case the data for posts and like a blog or something and then we just call you server here now the bundler knows this can only run on the server not the client so make sure this gets run on the server and if we call it the client then it gets RPC if we call it on the server it just runs we get the event if there's no user ID then we throw an error if there is a user ID then we grab all their posts and we return them and now we have this data in this query call that we can then use for things so cool it's really nice seeing people take advantage of this tooling not just as a like wow they have all of that it's easy if you're a framework author to be jealous that things like typescript support editor support all those things exist in other Frameworks and not yours and trying to catch up sucks solid doesn't want to innovate on those things they want to make a great performant framework and new way of building things so they ride those paths that already exist and build something new on top I love this because it normalizes these ideas when I was earlier in my web dev career and I first saw solid and I saw something that was so much faster than react but it looked like react oh so cool so cool it proved to me that like things like jsx aren't a react concept they're a development concept and that's what I see here too it's funny to think but the future of people understanding these Primitives like understanding you server that might not be something something the react team teaches it might be something the solid team teaches how crazy would it be if people finally understand that you server isn't for components because of Ryan not because of react anyways let's talk about why this is cool in This way everything works the way you'd expect on the server and the client during the initial SSR or even during future navigations whether you're fetching data or if you're doing mutations and even if you are purely doing client side rendering in the browser it still works our server functions support Advanced serialization for this like async iterables streams and Promises ensuring you build the apis you want this is also really cool part if you like return a promise here do you have to await the thing that you return what happens to it because effectively when this is rpcd this is returning Json Json can't have a promise Json is very primitive but if you have a smart bundler that effectively bundles the response and then a smart client that can parse it and do things with it you can send a thing that indicates to the client hey wait for this part it's going to come through this stream later which is a really powerful thing especially you don't have to think about it and it all just comes through in a type safe easy to integrate fashion the idea that you can kind of just return whatever here in the framework handles it for you that's really cool these are the types of things I like Frameworks doing for you we've used this capability to do things like single file mutations with solids router API which lets the server start fetching the data for the next page after an update and stream it back on the same response with the client handling the redirects between this the paralyzed local and cache patterns as well as solid's non-blocking async we've all about eliminated unnecessary waterfalls Ryan's been on the war against waterfalls for a while I largely agree it's a good effort I think server components make the waterfalls largely move to the server which reduces their cost significantly but if we can just get rid of them by having better data loading patterns obviously we should do that and as we see here things are significantly simpler when you have the server driving these things the client fires an action the server sends a request to invalidate the client then goes to fetch the new data and then it shows the new data and you have this whole time here where your state is wrong maybe you're showing a loading state or something like that but if you send something to the server it immediately responds saying hey new dat is coming thing that you had before is old now and then the client can just show something as the new data comes in without having to do the additional back and forths so much cooler onwards and upwards honestly there are too many features to talk about with solidar because your experience is exactly what you make of it client render mode server side rendering static site generation outof order streaming optimistic UI key based cach inv validation progressively enhanced forms API routes paralyzed nested route data fetching single file or single flight mutation Islands suspense transitions the list goes on if this list doesn't show you how big of a framework nerd Ryan is I don't know what will because yeah what other framework has an author that even knows what all of these are much less like can describe them in fact let's go through count all of these quick as a viewer as a person in chat and see how many of these you actually know the meaning of so client render one server rendering 2 static gen 3 4 5 6 7 8 9 10 11 12 13 Concepts in modern full stack web dev how many of these do you actually know the meaning of one that I know a lot of you guys don't know because it's funny enough largely a solve problem in our ecosystem now is out of order streaming it's crazy to think that we don't talk about this because it's such a goddamn Revolution like insanely so and just no one knows what it is or talks about it if you're curious about it let me know in the comments and maybe I'll do a video dedicated to out of order streaming and how well it has been solved over time this is a framework designed for Builders and people who have their own opinions maybe that's why I like it so you guys know somewhat opinionated just a little opinionated we're only beginning to tap into the potential here that's what we mean by the shape of Frameworks to come solid start won't be the last solid framework we're just getting started we've already seen people building meta Frameworks on top of it like create JD app and Media Kit create JD app is dope by the way JD is a wizard he created the original solid bindings for upload thing which was crazy cuz we just had react at the time and he just went out Rogue made it work in solid as well and our first two Frameworks were react through next in solid create JD app is similar to create 3 app but on the solid side uses trpc and a lot other cool things check it out if you're curious about the stuff as well as Media Kit which I don't know too much about honestly in set of utilities to use with your solid apps this is the right one right this is cool nice seeing people building lots of tooling around this stuff already because that's that's a huge signal of a healthy ecosystem really nice to see this stuff happening and for that we the solid core team are incredibly thankful thankful for all the contributors submitting issues in PRS thankful for open open source projects that make this technology possible like V viny and Nitro thankful for all the sponsors contributing funding like netfi Chrome and Jet brains most importantly we're thankful to all of you for embracing development in the open choosing better over convenient and sticking with us on the journey you inspire us to keep building the best Solutions we can and to continue to shape the future of webdev yes I wish more people would include this part at the end I think it does a great job not just of acknowledging the people who made this possible more importantly showing How Deeply the solid team understands and wants to be part of this ecosystem other Frameworks talk a lot more about themselves and most framework authors talk a lot more about what they're doing Ryan's the only creator that I know of that has a framework and spends more of his time talking about other Frameworks like watch Ryan streams if you don't by the way his channel is awesome it's getting more views but it's still super underrated he streams pretty much every Friday and goes a lot deeper on these things than I ever could really really cool person really cool framework super hyped on what he has here and honored to be mentioned at the bottom here as a thanks for reviewing the article and being whatever small part I could be this is a really really exciting framework and I couldn't be more hyped for the future of solid let me know what you think in the comments are you going to give solid a shot and if you do you going to do it through solid start let me know until next time peace nerds

Channel: Theo - t3․gg

Views: 106,164

Keywords: web development, full stack, typescript, javascript, react, programming, programmer, theo, t3 stack, t3, t3.gg, t3dotgg

Id: Zgrm7reyc_A

Length: 20min 46sec (1246 seconds)

Published: Sat May 25 2024