Transcript from the "Sapper" Lesson
[00:00:00]
>> Okay, so in this final stage of the workshop we're going to take a look at Sapper. Sapper is our answer to the question, what should application development look like? So Svelte is a component framework, Sapper is an application framework if you're familiar with React and Next, React to the component framework, Next is the application framework.
[00:00:22] Svelte and Sapper have the same relationship. Now, Svelte is on version three but Sapper is not yet at version one. So some of the details of what I'm about to show you may change but the basic ideas won't change. What I'm going to do is walk you through the Sapper starter project template, show you how it works so that you get a feel for it.
[00:00:43] And we'll explore some of the features and then we'll move on to a more complex real world application and we'll take a tour of the code base so that you can see how people can use Sapper in real world situations. So, what I want you to do right now is go to your terminal and create a new folder, My Sapper project CD into it.
[00:01:21] And we're gonna clone the Sapper starter project with a little tool called degit, which takes a GitHub repo and cleans it but without all of the git history. Hang on, we're gonna do sveltejs/sapper-template and we're going to take the roll up branch. Okay, while that's installing, we'll move over to our code window.
[00:01:57] So in here we have some source files and directory called static, along with a bunch of boilerplatey project files like a roll up config and package.jon and all the usual And if we start the project with npm run dev. It's going to launch our development server on localhost 3000.
[00:02:30] It looks like it's cached some files that, okay ServiceWorker again, going haywire. So this is the starter Sapper project and it's a site with three sections, a homepage, an about page and a blog page with a few posts written in markdown inside the source directory. And what's interesting about this relative to the game that we created in the earlier section of the workshop is that everything that you see is completely server rendered.
[00:03:11] So if we look at the markup for this page, by going to view source, then you'll see that all of this stuff, the h1, the main, the figure with the success kid jpeg. All of this is being server rendered by Svelte when you request the page. After it's been requested and the JavaScript loads then it hydrates it and turns it into an interactive application with client side routing.
[00:03:37] And this is really important because it means that we get the best of all possible worlds in terms of performance, we get statically rendered markup, which browsers are really faster rendering. But once JavaScript kicks in, then we have the nice transitions that you get from client side routing.
[00:03:57] If we click on this about tab, then we don't need to reload the page and go and get the about HTML, it's already loaded. So we can get this instant navigation. Similarly with the blog page, even though these pages are dynamically rendered using some markdown, we can navigate to them instantaneously just by fetching the json that powers these blog posts.
[00:04:23] And so I'm gonna give you a tour of how this project template is put together. And then I'm going to show you how we can export it as a set of static files for use on GitHub pages, on Netlify or Surge or anything else that supports jam stack style static sites.
[00:04:43] So in our source directory, we have three files at the top client js, server js and a service worker. And the client and server are really doing the bulk of the work here. These are the entry points to the application, server obviously determines how the pages get rendered when you first visit them and client determines what happens after those pages have loaded and the JavaScript kicks in.
[00:05:12] We also have a template.html file which is gonna contain all of the markup as it gets rendered. We have placeholders here for the HTML that gets rendered by the components, plus any JavaScript that the framework generates in the course of building your application. Inside the routes folder, or routes if you're an American, then we have a bunch of small components, index, about, and here blog, we've got an index file and this curiously named [slug].svelte file.
[00:05:51] And you'll notice that these correspond to the routes that are available in the application. We've got index, about, and blog with these dynamic slug sample. So this is what we call file system based routine, and it's a really easy way to structure an application because the structure of the project on disc maps to the structure of the application that gets outputted.
[00:06:17] So you never have this problem of looking at a code base and trying to figure out where some code is coming from. Because the structure is really obvious and explicit. File system based routing also gives us a few other advantages. For example, in the same way that Svelte statically analyzes your components and can tell things about your application from that, Sappa can statically analyze the contents of your project and use that to build a per application manifest that allows us to create this really efficient router that knows exactly what the possibilities are and means the client side routing is very efficient and fast.
[00:06:59] So let's take a look. Our index page just has a bunch of styles and some static markup. Inside here we're using svelte head to create the document title. And so you'll see that on the homepage, the title is in fact reflected up there, Sappa project template. And we have some text here, try editing this file to test library loading.
[00:07:22] Let's add some exclamation marks here. Some more here, and some more here, save that. Go back to the page and it's updated the page. On the about page, there's not a whole lot going on. We've just got a new title, which is reflected up here, and some markup.
[00:07:44] But you'll notice that we also have all of this stuff around the page, we have the navigation bar. That's because we also have this layout page. This is a special component that wraps any components that are at the same level in the file system. So we're importing a component called nav from this components folder.
[00:08:06] We're declaring some styles which give the main element max width and the background colour. And then we have a slot here, which is where the index page and the about page get injected inside that main element. We also have a special error component, which if we were to go to a non existent site, nonexistent page in the application, the error page would get rendered, in this case a 404 not found.
[00:08:40] And then finally we have this blog directory which contains a few files. It contains index.svelte, which is what you see when you navigate to /blog and it contains this [slug].svelte. The square brackets indicate that this slug is a parameter which gets passed by the router at built time and is used when you're rendering the page to determine which piece of data we should fetch.
[00:09:12] We also have the json files, index.json.js, creates the blog.json file, like so. And that works by stringifying these posts which are generated in this file, here. And this get function, this is basically the same as any Express Route handler that you would find if you're building an express app.
[00:09:44] It takes a request object and a response object. And then it returns the header information and the contents. Now this posts file has an underscore prefix, which means that it's not visible to people visiting this website. All of these other files because they don't have the underscore prefix, they correspond to pages and files that the user can download.
[00:10:12] But this one this is just for internal use. So we don't want that to be visible. If you go to blog/posts, then we get a 404 again, because that is a private file inside our project. And this is a pretty crude way of building a blog page, we're just literally creating an array of objects with a title and a slug and some HTML.
[00:10:38] In a real application, you would have this data coming from a content management system or from some markdown files on disk. But for the sake of simplicity and obviousness, we've just got an array here, where everything is hard coded.