Rich Harris: Futuristic Web Development

i haven't been this excited about svelte since probably the launch has felt three and over the next 15 minutes or so i'm going to explain why that's the case and hopefully get you a little bit hyped up as well i wasn't totally sure whether or not to do this because um this is all still slightly speculative what i'm going to show you this isn't an official announcement from the svelte team although they are aware of this work and they are supporting this work but we shouldn't take that as any guarantee of anything that's going to happen and we certainly shouldn't take it as any guarantee of when things are going to happen but i figured it's worthwhile talking about it for a couple of reasons firstly as previously mentioned i'm excited about it secondly i think it's useful to manage expectations particularly when a lot of you have the same questions about where the project is heading and thirdly some of this stuff isn't really about svelt it's about the future of web development more broadly and there are some ideas out there that i want to try and help push in to the mainstream if i can alright so that's the caveats out of the way last time i did this i was answering some frequently asked questions about svelt and a lot of that video was devoted to sapper for those of you who aren't familiar sapper is a complete application framework that sits on top of felt it includes server-side rendering routing code splitting and so on and people often ask us when is sapper 1.0 coming out and today i can give the answer sapper 1.0 is coming out never no seriously it's not coming out there isn't going to be a sapper 1.0 here's the thing i really love sapper and i think there's a lot of really great things that you can do with it and some of you have built some really amazing apps with it but i think we can do a little bit better the pacer development has been a lot better recently thanks to ben mccann and some other contributors but the code base is kind of gnarly and it's hard to work with it's tricky to add valuable features like building for serverless platforms or pre-rendering a subset of your application as static files and if you're new to spell the very first choice that you have to make is do i use the default svelte template or do i build a sapper app which is a really confusing thing to have to answer right off the bat and so it'd be much better for everyone users and also people giving support on discord and stack overflow and places like that if we could give you a single canonical answer this is the officially way officially supported way to build apps with svelte meanwhile the front end development landscape has changed quite substantially since we started building safa back in 2017. and we have an opportunity now to really think deeply about what a modern development workflow looks like and that is the stuff that i want to show you so demo time so in here i've got an empty directory and i am going to create a new swell application using npm init svelt at next because this isn't yet released uh hit enter and it's created some project files over here so i'm just going to quickly turn that into a git repo and install those dependencies i would show you how long the equivalent setup would take for other frameworks but i don't want this to be a really long video so let's take a look at the code base uh we have a source directory here which contains an app.html it's just a bog standard html file with these little insertion points for salt to add some head tags and some stuff for the body we've got roots directory if you're familiar with sapper then this will all make sense inside your roots directory you have files that determine the structure of your application in this case we have an index.felt just the one just one page uh it's importing a counter from this we've got dollar components here may change i don't know but that is an alias to this components directory uh then we've got some some markup and then a bunch of styles all very standard stuff and then inside the counter we're just doing the demo button clicky thing static down here we've got some uh some files that just get uploaded as is you've got a favicon and a robots.txt nothing very exciting package.json so this is this is what is being installed to make this run we have let's give this a name demo app and we have a couple of scripts here spelt dev and svelt build that command is coming from this thing spelt kit name might change but we like it for now uh and there's a few other things uh that we're gonna encounter as we go through this thing one thing you will notice we have a snowpack config that's because this project uses snowpack it doesn't use roll-up it doesn't well it does use roll-up eventually we'll get to that but when you're developing it doesn't use a bundle it uses something called snowpack and that's what i'm going to show you we also have this fault config file which specifies a thing called an adapter and later on i'll explain what an adapter is okay so that's the structure of the project now let's start the development server and see what that looks like so down here in the terminal i'm going to type npm run dev dash dash open and you'll see it it's basically instant so we now have the development server running on localhost 3000 and if i start making changes to this counter component like i'll change what's inside the button then you'll see it hot reloads and and we get those changes almost instantly we can change the state and the state will be preserved as we're making changes so i could change the font family to chalkboard i could make it a little bit bigger um and it's just going to preserve the state the whole time because we now have really good hot modular reloading courtesy of rixo who's been working really hard on this and has done an incredible job and we can even do things like this with the clicks count is getting a little bit high here so i'm going to change this to a decrement function and get that down a little bit so far our app only has one page let's add another one we'll begin by creating a navigation component inside the components directory here we'll create nav dot svelt uh very simple just a nav element with a href equals slash for the root and then another one for the about page that we're going to create and then on the index page we will import the nav component and then just add it to the top of the page like so and here we've got our home and about uh i think actually it would look better inside that main block here we go but now if i go to the about page we're going to get a 404 obviously because we haven't created that page yet so let's create a new root about slash index dot index.felt um and it's created that already about this page looks a bit ugly though it doesn't have the same styles as the index page um we could just duplicate everything from the index page but um we're not going to want to do that for every new page that we had so we'll solve this with a layout component which if you've used sapper you'll be familiar with layout.felt just controls it's like a wrapper around the content and all we need to do is create a slot for the content to come through like so um but i think what i'm going to do is i'm just going to copy everything over from the index page put it in the layout and then up here get rid of the content and replace it with a slot like so um count has been grayed out because we're not using it so i'm just going to get rid of that um also we're getting some unused css messages here so we can get rid of those as well uh okay now we have a layout for our about page um on the index page we we don't want the layout inside the layout so i'm gonna get rid of everything except the content um again we can get rid of that unused component and we've got some more unucss so just going to get rid of that and actually this root css is unused too okay so now we can go between the home page and the about page and if you look here you see this little reload icon um if it was doing a normal or conventional full page reload then you would see that reload icon spin but because we're doing purely client-side navigation uh it's instant and you don't get that reload icon having said that this is all server-rendered so you can go to any of these pages and i can show you by going to view source that it does actually have the content of the page in the html that gets delivered to the client when you first go there so you get the best of both worlds you get a very fast startup with the static html but then you get instant navigation client-side because the client-side router has kicked in now a cool thing about snowpack is that if i make a compile error somewhere on here like say i forget to close my tag correctly and i save that then i get this really nice overlay i get instantaneous feedback that something is wrong and it shows me where the error is so that i can know how to fix it fix that save and the overlay just spanishes so snowpack is obviously incredibly fast and you might be thinking well it's a very small site of course it's going to be fast you've only got two pages but the way that it's designed it will continue to be that fast even if you have a huge site with hundreds of pages and thousands of components and it's worth taking a moment to understand why snowpack is so fast and why this represents such what i think is an important change in web development so for the last few years we've been using bundlers things like webpack and rollup and more recently parcel and the way that they work is they take your source code and they trace the dependency graph through the modules like through the import statements that you have in your modules and they combine them into a file that can then get loaded in the browser and run as a script and that was necessary for a long time because browsers didn't support modules natively but nowadays browsers do support modules so instead of bundling your files snowpack just transforms them so if you have typescript it'll turn it to javascript if you have a svelt file it will run it through this fault compiler and turn it into a javascript module but it won't stitch them together it'll just rely on the browser's native import to fetch the rest of the modules in your dependency graph and so because of that it doesn't even need to transform everything immediately it just waits for the browser to actually request files and then it transforms them on demand and so if you have thousands of modules but you're only looking at a few of them on the page that you're currently developing then you only need to transform the ones that you're currently interested in and then when you make a change to one of those files previously a bundler having created the bundle in the first place it now has to rebundle it and even if it's got really good caching it's going to have to do a bunch of extra work to create a new bundle to represent the one file inside that bundle that has changed snowpack doesn't need to do any of that it can just say here's the new file uh please load this mr browser and the browser fetches the module replaces the module that already existed if you've got hot module replacement working and that's it and so because transforming a single module is generally pretty fast your reload speeds are much much quicker than any bundler could ever hope to be and so i think we're gonna get to a point pretty soon where projects that use bundlers during development are gonna seem a little bit antiquated looking at you other frameworks now you do still need a bundle for production um snowpack just does this one-to-one transformation and it's still not good to have hundreds of small modules zipping across the network you want to try and turn those into a bunch of coarse-grained coat-split chunks which is what we've been doing for the last few years anyway and it's what happens in svelte now in sveltkit and i'm gonna show you what what that looks like um but first i just want to take a moment to shout out to the snowpack team in particular fred shot who is the genius behind this whole project fred's been incredibly helpful to us as we try and figure out how to make snowpack work for a server-side rendering framework um and it's been a really productive partnership so thank you fred so here's what it looks like to build uh one of these projects i'm gonna type npm run build and you'll see it happens in three phases first we create what we call an unoptimized build and this is just running all of the modules in the entire application through snowpack and that as explained it just one-to-one transformations and it'll spit out this this unoptimized version of client and a server version of the app with all of your modules just sitting around here so this is the the server-side rendering version of the counter component for example and then in phase two we optimized the output of that by running it through roll-up and the end result of that is uh a group of uh of chunks representing the roots of your app plus anything that's shared between them uh plus like a manifest which is going to be useful later and various other bits of information it also has some special css handling and then finally we generate the app using what's called an adapter and the adapter as i showed you before is specified in sveltconfig.js and it's currently set up to use something called adapter node which if you're familiar with sapper is basically the same as you would get from running sapper build but for this site we don't really need a node server because we can just create static pages for everything so i'm going to change that to adapter static we're going to install that and then we're going to rerun npm run build and it'll do the same thing again on optimize build then it'll run it through rollup uh and then it passes it to oh hang on i actually need to save the config file otherwise this isn't going to work and then it will pass it to adapter static and you'll see that now we've got 200 responses for slash and slash about the two pages in our application and if we look at the build output we've got an index page which contains our hello world and we've got an about page which contains about this page one big difference between what just happened and what happens when you run safa export for those of you familiar with separate export is that rather than building a node server running the node server and then crawling the output of that mode server it's just doing everything with the spell ssr api directly the server rendering api um and what that means is it's very fast very efficient so you will be able to statically render sites with huge amounts of content very quickly with with this uh with this new setup now with sapper you have to choose you either get a node server that dynamically renders everything regardless of whether you have pages that stay the same forever or you statically render everything which doesn't work if you have any pages with changing data or personalized content or anything like that but with this new system we can have hybrid apps just like recent versions of next you can have some pages that are dynamically rendered and some that are pre-rendered so i'm going to take you to the the hacker news fell implementation and show you what that looks like in practice so this is felt hacking news running on on localhost all these pages are dynamically rendered using fresh data from api.hnpwa.com and you know we can click around here and it's it's actually fetching data direct from that api it's not even hitting our own server at this point um but then if we go over to the about page there's nothing dynamic on here it's just static data so what we want is to dynamically render all of these pages but then statically pre-render the about page so that we never need to do any computation when someone requests it we need to have some way though of identifying which pages are suitable for pre-rendering because it's difficult to tell automatically there needs to be some explicit signal that you the developer provide to say this page is one that should be pre-rendered this one is one that should be dynamically rendered and the way that this uh this works obviously this is all subject to change but um currently if you have a page that exports this pre-render equals true value then that is a signal to spell that this page can be statically pre-rendered okay so let's build this app shut the development server npm run build again uh and it does the same thing unoptimized build optimizing and this time when it generates the app we see pre-rendering static pages and it's found the about page that we marked as pre-renderable and if we actually look at the build output up here build pre-rendered there's an about page that's already been generated with the um the about this site corresponding to what we see over here and so now if you actually run this app with node build then when we serve that page it's not having to do any rendering it's literally just serving a static file this is a node app but we can also have adapters for cloud function based services so for example if you want to deploy your site to netlify it will split out the static assets from the cloud functions that dynamically render pages and it will deploy those together when we launch this thing we'll have adapters for all of the major services the whole serverless thing it's a pretty good trend and svelt is now a serverless first framework yay so this really just scratches the surface of what we can do in this new world um one interesting thing i think we could uh do now is we could use this same template for component libraries as we do for sites and apps which i think will be a really nice development experience uh you probably have some questions though so will i be able to migrate my existing sites and apps won't be completely automatic but it should be reasonably straightforward the project structure is pretty much the same and most of the ideas from sepa read across so i'm not expecting that to be a massive headache do i have to use this workflow no absolutely not so this is split in framework land between things like angular and ember which kind of really want to own the entire experience uh even if it's technically possible to use the constituent parts by themselves and then on the other side you have things like react and view which are really just component frameworks and you're expected to build an app yourself which is why things like next and gatsby and remix exist i once felt to be both of those you can be wildly productive with this app template in a matter of seconds but if you're a power user with specific needs that aren't met by this template for whatever reason then those needs will continue to be met by the svelt project it is critically important that people are able to build their own custom integrations uh plug-ins for things like 11t or even self-based frameworks like rootify and ldjs and that is not going to change will it work with typescript yes it will i haven't set that up yet but absolutely it will launch with typescript support how can i contribute so we're still figuring a lot of things out right now and this work is happening in a private repo for now so we're not set up for contributions just yet but as usual you can visit us as felt.dev chat or pay attention to svelte.s or sell society on twitter and you'll be kept up to date on what's going on with this okay one more thing um so when i did the faqs earlier this year one of them was can i give you money and at the time the answer was no but maybe soon well we do now have an open collective where you can contribute financially to svelt if it's been valuable to you we don't exactly know how the funds are going to be used there are some costs associated with running a project like this and those can now be offset and it may one day put us in a position to directly fund work on specific features so it puts us in a really healthy position massive massive thanks to those of you who've already become backers without us making an official announcement it is really truly appreciated right that's enough from me uh how do i turn this thing off

Channel: Svelte Society

Views: 87,191

Keywords: Svelte, Javascript, Web development

Id: qSfdtmcZ4d0

Length: 22min 50sec (1370 seconds)

Published: Mon Oct 19 2020

Reddit Comments

[u/pedromellogomes]

I like the way he challenges other frameworks

[u/[deleted]]

Very exciting stuff, I almost wish I didn't watch because I know I won't stop thinking of it until it comes out.

Always love hearing Rich speak as well; when he gets excited it means we're going to get something awesome soon!

[u/WillOfSound]

Would love for there to be some more AWS Amplify integration in the future. Its more on the Amplify team, but building serverless apps with Amplify is pretty nifty.

[u/rjpcomputing]

I am so excited about this. I can't wait for it to be released in some form publicly.

Any idea/rumor when we could see a beta?

[u/[deleted]]

I just hope this isn't discarded before v1. This seems quite minimalistic and cool. Plus Snowpack is damn fast.

[u/doitstuart]

Only watched this once but what Rich demonstrates here looks a lot like Sapper anyway.

Is this supposed to be Svelte going forward albeit with some Sapper-like functionality built into it, like routes?