Building Blazing Fast Sites with Gridsome by Jake Dohm

[Music] thank you so much for being here so we're gonna be talking about a framework called grid sim and how you can build blazing fast websites with grid sim so I just want you to know like if you're building sites and you're like yeah that's good but it's not blazing like you really need to up your game pretty much everything is blazing these days so don't take that the wrong way my name is Jake doom I'm a web developer good work you can find me on Twitter usually ranting about something or other yeah I work the company I work with as a consulting company so we build web sites mostly content heavy web sites using a CMS called craft and our default stack is tailwind view and craft which seems to be pretty well accepted in this room so that's exciting to be amongst friends so what is grid some grid 'some is a view j/s framework for building static sites and more and I was super happy that Debbie teed me up for this talk by telling everyone to build static sites so like I don't have much legitimacy but when Debbie says to build them like you build them so I was very excited about that very happy that she had that shout out yesterday amazing talk Debbie so grid some is this is from the grid some website grid some makes it easy for developers to build modern websites apps and progressive web apps that are fast by default so that's in their own words exactly what they are trying to build grid some as good some is a jam stack framework so if you haven't heard that term jam stack is a term recently coined for a tech stack that helps you create fast and secure sites and dynamic apps with JavaScript API s and pre-rendered markup served without web servers this is the term kind of coined by the natla Phi team recently and it really summarizes a lot of what grid sem is trying to do next does would be a jam stack framework to depending on how you use it there's a bunch of Jam Shack frameworks some of the earliest ones would be index.html great framework and then Jekyll Hugo so there's Jam Shack frameworks in every language and grid sim is an amazing one for view j/s developers so that leads to the question like what exactly is a static site right so there's really three main types of ways to build a view application there are client-side view applications which would be you know if you drop in a script tag on the page or you use the view CLI that'll be client-side rendered so browser makes a request and it hits the page and pretty much what you're gonna return is a page with a div on it like legit it's like you know head body div and then view mounts everything up in there once JavaScript runs on the page which is great for some applications like Facebook is notoriously client-side rendered some applications that are very interactive that's great for but other applications don't work as well in that format there are upsides and there downsides the second type of application is server-side rendered so you can build a server-side rendered application in view either on your own running some sort of Express server or using nuts and their nuts build command which will run a node server so when that client makes a request it'll handle that request on a node server it'll say alright wait just a second it'll go render out your view template and then it'll pass it back to the browser when it's ready again that has upsides and downsides there's some really great things about that it's generally performant because you are returning HTML and it's good for SEO and you know like getting those meta tags in there for social media sharing and things like that because you are returning all of that and not rendering it on the client-side and then the third type which is kind of an emerging concept in the past couple years and kind of going back to you before we went client-side is pre rendered static sites and this is where you actually take all of your view templates or your whatever templates they're after using Jekyll it could be compiling from markdown you take all of your template it's all of your content and you actually pre-rendered that out to static HTML CSS and JavaScript which JavaScript just runs later to take care of interactivity and things like that but your main content is fully rendered at Build time so whereas with a node server or a server-side rendering it's actually rendered just in time pre-rendered static sites are completely built out at Build time so the gems tact is so hot right now like everyone's talking about it I feel like almost every developer in the world is rewriting their blog and gatsby right now it's like gatsby blogs right so Jam stack there's a lot of hype but I don't think it's overhyped I think it's actually the hype is justifiable why so let's walk through the benefits of grids and a lot of these actually apply very generally to the benefits of the jam stack so whether you're using something like good some if you're using react something like Gatsby Jekyll or even like nuts generate does very similar things a lot of these benefits apply so keep that in mind this is really a gem stack general talk in some ways the first thing is developer experience grid sim comes with a lot of developer experience built into it to just make your life as a developer easy and carefree one awesome part of that's the plug-in ecosystem so grid Sun will allow you to install plugins and register those in your application to do anything from critical CSS to loading content to pulling in you know tweets so there's there's plug-ins for a lot of different things so we're normally with like a view jas app view jess does have with the CLI you can pull em plugins this is kind of a more curated and type plug-in ecosystem which allows you to really easily do some things that might be hard or otherwise source plugin so if you have content in a CMS like WordPress for a blog if you want to pull something in from a Salesforce or some sort of other content source you know sanity CMS anything like that you can use a plugin which ties back in the plug-in ecosystem to actually get that data and pull it in for you and allow you to use in your templates and will actually look at that pretty extensively later so there is a problem with developer experience a lot of developers are driving down that track and they come to a fork in the road and they can exit for developer experience or they can keep going for user experience and they're turning that wheel so fast down the developer experience exit right but I don't think it has to be that way so good some doesn't sacrifice user experience for developer experience it actually leverages developer experience to promote good user experience by making the right thing easy if you remember that initial quote about what grid 'some does it says making you know sites fast by default it does that for a lot of a lot of parts including performance so a lot of those things that that developer experience leads to good user experience the few kind of key ones there are performance accessibility you know things like that that you would want to be correct in your app grid some encourages that types it thing so let's talk about performance how does grid sum encourage and actually lead you to good performance well a pre renders out your HTML there's pretty much no faster way to get content on the page than having it delivered and when it's delivered it's ready to be rendered out by the Dom pre-rendered hTML is going to be your fastest way every time automatic code splitting so because all of parts of your application including your data your Styles your JavaScript and your HTML are all in one single source of truth in your view components and your single file components it actually knows about all of your routes all of your components and it can very intelligently split out your routes into separate you know bundles and your components anything you want to lazy load so it does that automatic code splitting for you to make sure you're never loading more code than you actually need for what your users trying to see it follows grid some follows the purple pattern which is something which has been released by the team at Google and they encourage for performance purple means push critical resources for the initial URL route so whichever URL route the users trying to visit we actually push those resources ahead of time using new browser api's to actually send those down the pipeline with the initial HTML instead of later as its requested and then we render the initial route requested we pre cached remaining routes so any pages that they might go to from the route that they're on we go ahead and in the background fetch those so that when they're ready to view them we already have them loaded and then we lazy load and create the remaining routes on demand so if they try to load another route we go ahead and go pull that from a server or from our static host somewhere we have smart link prefetching this ties back to the previous point but grid sum has something built and called the link component it's actually G link and as if you put one of those components on the page as that link comes into the view grid some knows okay this is the link that the user is now looking at they might just click it and like what happens that they click it we're gonna want this bundle we're gonna want this bundle so what it does is when that it uses an intersection observer which is JavaScript to know when those links come into the viewport and when they do it goes ahead and prefetches any routes that are related to that link and pulls in that code and caches it so if you click that link the JavaScript render the next page is already there ready to go so when you click it it just renders no requests needed it has progressive image loading so here's an example of kind of how it works this is actually for medium but grid sums image component works very similarly so it takes your images and we'll get into this later how it handles static access but it takes your images and bundles them up and actually in lines a base64 a very small version of the image and blurs it out so you get that nice Instagram blur but then as it loads the image it'll fade it in so you have that full image there which is really a great user experience and a great developer experience because you kind of you know put those URLs in just like you normally would but you get more features for free CBN based hosting this is a really interesting one because you don't host jam stack at some sites on like a you know like a digitalocean droplet or some sort of node server it can actually be hosted on any static host so you could host it on s3 you can host it with something like nullify which gives you a great developer experience pretty much any static host and what that means is because it's not doing anything when you request that page there's no server running it's just giving you static assets that are there you can host that on the edge of a CDN so that your users from Japan aren't having it pulled from a server here and you don't have to do like to get that working you don't have to have load balancers and a complex server setup because it's just static file so it just works like an image CDN pretty much okay so the the third big benefit is security grid some allows you to have awesome security because there's a no you don't have to have a public server anywhere that can be attacked so your surface area is static files you can have a server accessible somewhere obviously if you need to do like some sort of calls to that for e-commerce or something like that that still works but if you just have a static site like a blog you can actually have a CMS like WordPress post it on like a local intranet or behind a firewall that only your build process can get to so that can never be hacked and if you've ever hosted any WordPress sites that probably excites you so I started out in WordPress development I did my first WordPress job when I was 12 for my aunt and she was like no and I was like please and she was like okay so I did it and so I built probably 15 WordPress sites and I probably had emails from at least five of fifteen saying please come save me my site is hacked now it's like sorry I do view now but yeah so securities are really cool benefit that you can get depending on obviously it doesn't apply to every site but it can increase your security scaling so scaling is easier and less costly like I mentioned you don't have to run servers which is serverless suite right you don't have servers when you're serving up your static site you have you no servers or something like AWS lambda or an e-commerce back in handling a request depending on if you need that interactivity but that's separate and can be scaled in small groups and you don't need big server clusters to handle lots of traffic the static host can handle tons of traffic because it's just serving up the files that are there this doesn't apply to every site depending on your architecture it may or may not be less costly maybe you have a really optimized architecture right now but honestly I kind of doubt it Gatsby really so study recently where a client went down from $2,000 a month to $60 a month on their architecture cost which is a 97 percent decrease so that's pretty compelling for a lot of companies okay so let's talk about grid some we've talked about kind of the benefits of jam stack and static sites in general but let's talk about grid sim and its features so what does grid sum like actually do right so number one it renders your view components and pages to HTML and CSS at Build time that's really kind of one of the main parts of grid sum it's it takes your stuff it gathers it all up you're contacting your templates and it renders those out number two this is really the these are the biggest two number two as it gives you a centralized graph QL store for any data that you'll utilize in your view templates and components I was super happy that Devlin just walked us through graph QL on how to query because we're gonna look at that a little bit and I really don't have time to teach graph QL so what he has showed you is super awesome and that was a super great talk great live coding skills so it grid some needs to know about your data to be able to build everything out it needs to know about all of the data you're gonna use at build time because it doesn't make those requests to data later windows requests are coming in it actually bundles up all your data you know if you have a blog post it needs to know that blog post title and content when you go to build this website and then ship it up to your static host so what grid sum does is allows you to pull in content from any type of source and multiple types of sources so you could have some from WordPress some from some sass that you know has some data for you like air table and then maybe even some markdown files locally it allows you to source that and then it puts all of that data into one graph QL local schema so that you can access out within all of your templates and components in one way so you're not doing Axios or fetch or you know whatever calls in a hook in your component so most of the time because that data is actually already centralized and ready to be called and we'll look at how you can get to that data okay so extract it abstract view configuration grid Sim gives you a lot out-of-the-box so you're not writing your own view configuration do usually using plugins or you can tap into web pack directly and make little tweaks but good some kind of gives you a layer on top it provides features that are outside view scopes so view does not provide you some sort of image component to do progressive image loading that G link component we talked about things like that that really aren't in the scope of view grid some takes care of you it gives you a directory structure very similarly to nuts so it kind of gives you some conventions which is great when you're working on the team and some of these features like I said increase your performance and give you features for free number five that makes best practices for performance SEO and user experience the default okay cool so let's talk about how it works I'm gonna walk through a few of kinda core concepts and then we'll jump into a live demo which will crash and burn which is fun because it's lunchtime right okay so grid some starts over here on the left and your left I think and it pulls in all your data so you see you can pull in data from CMS's local JSON or markdown or pretty much any type of content source it brings that all together it bundles it up it builds static HTML and then you can deploy that to any type of static host so the core concepts of grid some are pages you have two ways to create pages you can create a file and the pages directory which is almost too easy this is Debbie talked about knucks being able to do this it's pretty much the same thing you create a page in the pages directory and it creates a route for automatically so if I create a about page which I will be doing on my demo I should not be spoiling that it'll automatically create a slash about route and then you can programmatically create pages based on your content so if you pull in a blog section you can go ahead and tell grid some hey for every blog post in this section that and this content I pulled in go ahead and create a page for that and create a route and you give it that route name and a template and it goes and creates all those pages for you number twos static assets so grid Sim has to know about your static assets you can pull these in from third parties or something like that but for the best user experience and to really use grid some fully grid some knows about your static assets so your images and your videos will be transformed at Build time like I talked about it'll inline parts of them it'll go ahead and do compression on your images and then it allows you to use this number three plugins which we've really talked about number four is data and there's two parts to data sourcing your data and then using your data using your data we've really talked about sourcing you get it from your third parties or even local markdown JSON yam or whatever it may be but then when you go to use your data use this graph QL store and it gives you we've talked about creating pages querying data is your templates is what I want to talk about right now you can use this so template you'll recognize that that's from view page query is something that grid some adds and it is a new block which allows you to query the local graph QL schema within your templates so like I mentioned all your data has already been brought together and congregated in a local store and then you can query for anything in that store here and it'll pull that in at Build time and render it out for you and then deployment you can deploy like I mentioned you can deploy a static site to pretty much any host at the end of this talk we're gonna be deploying this site that we'll build real quick together to netwo Phi but you can really deploy anywhere you can deploy it - even a regular you know server you have up and running with some sort of server host it won't utilize all of that won't be running PHP or anything like that but you can deploy pretty much anywhere that can return files okay cool so let's build a blazing fast site in ten minutes I'm actually at ten minutes on the dot so that's not what I expected to happen Wow okay cool so let's hop over here let's make that bigger cool I'm just gonna open up the terminal just getting take up so much room make that one smaller can you still see that yeah cool yours are the best great eyesight okay so so I've already installed the grid some developer CLI tools so I'm just gonna run grid some develop and if this fails I'm just gonna walk offstage so just pray this goes through I'll leave nine minutes for questions okay so this is running sweet did not fail you guys get ten more minutes of me you're welcome sweet so I'm gonna open I'm gonna open up the site here which part of this has actually been built so I did misrepresent that we would build this in ten minutes it's been took me a few more than 10 minutes to put this demo together but here we are so here's the site we're gonna work on this I do want to show you this is the grid some Explorer so when you run the dev tools it gives you two things it gives you this local site and then it gives you this Explorer and I'll not tab back and forth too fast because that is a shock I'm gonna make this bigger so this is the local grid some store I'm just querying right now for some metadata like the site name there's not a lot in the store right now because we haven't pulled any of our content and but all of our content let's see if I do all page path there should be like maybe an index page okay cool so we've got like a 404 page in the index page right now but we'll come back to using this this is a really nice tool because as you pull it in all of your data from all these sources you want to be able to see what's on there you want to be able to discover that so you've got this you know schema and crawler we can go through over here and we've got these docs so you can see exactly what we have access to you and as we add stuff to the store that'll show up in this Explorer so I'm gonna hop back to this demo we've got a basic page here I want to go ahead and create an about page right now there's nothing this link doesn't do anything so we're gonna jump in here we're gonna not do that we're going to open up the pages directory and you'll see we have an index page right now so I'm just gonna come in here and I'm gonna create an about View page also I spoiled this earlier so it's not going to be nearly as cool unfortunately got a template okay cool so I'm actually gonna use a layout and we'll look at this in just a second so I'm gonna use this layout component which I'm just gonna pass in a slot so the layouts gonna render pretty much everything outside of this is in a layout already which is just a basic view component I'm gonna use that layout I'm just gonna create a div with the class of content and then probably H I think it needs to be in h2 because accessibility I already have an h1 and we'll say about and then down here we'll say hello view Toronto okay cool so when I save this if it shows up on the page you guys all need to say hello grid some and if it doesn't then I'll walk offstage and we'll have seven minutes for questions okay ready I'm gonna flip over if it says hello view Toronto say hi back okay gotta go to the route all right get ready well there it is thank you I appreciate it I'm so good at getting you know audience interactions thank you okay cool so we created a page just like that we threw a file in the pages directory and it showed up let's look at this layout really quick because layouts are a concept of grid some we haven't talked about they're kind of a minor concept because they don't really have much that they do for you it's literally just a view component so it's I've got a template and it's got all the stuff in here that's doing some stuff and then I pass I have a slot and I'm doing some query down here and I'm you know this is all normal view stuff so layouts are nice and a grid some kind of gives you a few things you can do with them that you don't normally do that's literally just to beYOU component so I'm just I have a slot here and it's slotting through anything pass in here so layouts are awesome and you should use them but they're really not all that special so we're not gonna dig into that too much okay awesome so we created an about page now let's go we can't get to the about page unless you know the route which I do because I made it but we're gonna go ahead over to the nav and we're gonna update that to use the G link component so I'm just gonna not the Li that can stay you're welcome Li okay so we're gonna swap out the a tag for a G link tag and then we're gonna swap out the href for a two so you actually it's very similar I think the view router link works the same way I think G link is actually a very thin wrapper on top of the view router link if I remember correctly I mean we're just gonna like this to slash about and it's not gonna bundle because of things okay alright alright I'll close I'll close it with whatever I want to linter that's just not the mom of me okay cool so I'm gonna jump back over here I'm gonna refresh I'm gonna go to the about page and it worked and we get that super fast route loading because it's actually went ahead and loaded that in the background and also it's like two nodes so be fast anyway but if you add a ton stuff it would still be fast okay so I'm gonna go back to our recipes which is our home page and we're gonna go ahead and integrate these recipes so we've got a recipes component in here which I've built I'm gonna hop over to the index we've got a recipes component and I'm just passing in manually a title right now but we want to get this data from somewhere right so I've got a back-end set up with Kraft CMS which is what we use at the company I work for and it's got all these recipes in here it's got some ingredients and actually has a first-party graph QL plug-in you don't have to have a graph QL API would have pull in your data into grid sum you can pull it from a REST API or anything else it ends up in a graph QL API in grid sum but that doesn't mean you have to pull it from a graph QL API you can pull it down and then loop over and add those nodes to grid some manually with very very little work most CMS's like WordPress sanity content full actually have a source plugin for grid some first part so you just point it to your back end and it does all the work for you and it shows up in your schema there is one coming for craft CMS but it's not there yet so we've got all our recipes here so I'm just gonna you know we've got this on the rocks headless I'm going to hop back over under our application and I'm gonna open up my snippets because I could not live code this wrong one smooth boots and I'm gonna copy this plug-in config and then jump over into my grid some dot config can't type and you'll see I've got some basic configuration here it's doing some tail end stuff tailwind for life I'm gonna hop over into plugins and paste this in I'm using the grid some first party source graph QL plug-in and it's I'm just passing it a URL to pull that from and then where the data should be named spaced under so I'm going to go ahead and do that and I have to code so fast cuz my time is running out okay cool you have to restart the server anytime you make any configuration changes or server changes not any time like you change a template obviously but if you change something that's gonna change your data you just restart the server again if this fails I'm gone alright it worked okay so let's jump back to our playground I'm gonna refresh this I'm gonna open up the schema and we should see Doc's we should see a craft heading in here sweet so it's name space everything that we can all the data that we're pulling from craft in under this craft heading which I gave it right here if I named it something else it would be under that shouldn't name like Toronto or something cool but okay sweet so I'm just gonna get rid of this and I'm gonna say craft and I'm just say ping ping pong sweet I'm gonna say entries and give me the title and sweet so I've got ton entries that's gonna do some stuff let's jump back in the template and get these recipes integrated so we're gonna go to our index and here's where I'm going to use this page query so page query like I mentioned lets us query for any data that we have in that local store so if you can query for it in this Explorer you can query for it in your templates and I'm just going to cheat boom I'm gonna paste that in here I'm just calling the Kraft I'm getting some entries and calling those recipes giving some stuff on there this is a fragment graph QL school and I'm gonna save that one thing I do want to show you is how you can get to that data so I'm gonna open up looks like we got in there I'm not even going to look at it I don't want to know sweet so we've got this some some stuff basically injected into our component automatically by grid some so this index component has a context which is empty meta info which is I'm sure some cool stuff and then our page which is anything that gets returned from this page query so if I open this up you'll see page I had query craft recipes so I'll have page craft recipes right here so I'm just gonna go in to our template and that will be automatically injected here into our template because it's on the instance and I'm gonna say for recipe and index I'm not sure if that's how you spell roast recipe okay I did it twice the same way it's priced a lot right but in recipe page craft recipes maybe and then we're gonna give it out already as a key sweet because of winters and it's the right thing to do but really it's because of the lender sweet and these images really should show up and they did a couple minutes ago I'm not gonna get too worried about it looks like it doesn't want to give me an image that's okay I didn't even want to see an image oh sweet not passing the right thing three passed the recipe through I just saw a ton of stuff and assumed it was right okay here we go so we got a ton of recipes right and it's like oh yeah now like I really wanted Jim martini cuz I see one and we don't have the actual recipe so I'm not gonna actually LiveCode this out because that would be insanity but if you open up the grid some server you can see exactly what you can do you can create routes in the server file so what I'm doing is I'm calling this create pages hook which is a grid some API I'm querying for internal our internal schema so we can create for this data that we already have right here I'm looping over that data so I'm just saying for each recipe go ahead and do some stuff and then I'm saying alright for this recipe create a page and this is how a programmatic page creation we talked about and I'm giving it a path using that slug slash recipes I'm giving it a component and then I'm giving it a context which will be important note that I'm passing through this ID and slug I'm gonna say that I'm gonna restart this and while that runs I'm gonna go ahead over to our recipe component and update this from an a to a G link G links 4ev sweet looks like that did not fail so you guys give a couple more minutes of me which is they're freaking out because my time is out sweet okay sweet so I'm going to pass in the recipe dot slug here so I'm just saying link it to this recipe you guys are the best I never would have found that and taking me a year okay so I'm gonna come back here I'm gonna refresh this I'm gonna click on Jim martini and we have a gin martini recipe awesome so we are like 30 seconds from done not really but so close and I just want to show you one thing about this template so it's a normal template in this page query we're actually remember that I said that context would be important anything you pass through in the page context can be used in the page query so you know when we query for this recipe here and this is this is this template so it's you know it's rendering out the title up here and a bunch of other stuff so I have to get that right so we can print it out in the page what I'm doing is I'm getting that ID from the context I'm specifying it here we learned about how to use parameters earlier and then I'm just saying get me the inch entry with this ID and I'm getting a bunch of stuff on it so yeah that is the page query and then I'm just gonna run a build here I'm gonna say grid some build to show you exactly what's built by grid some I'm gonna go ahead and come over here open up this site Toronto rocks just a bunch of stuff will show up in here that's okay it's reasonably big okay so I'm just gonna come in here you'll see it has a recipes folder I'm gonna open that up and you'll see a folder for each one of these recipes so our martini hasn't it actually creates a folder so you get that nice slash nice slash route so this will work without JavaScript enabled it's completely pre-rendered so I have this index.html if I open that up real quick to look in here you can actually see that it actually renders out all of the content directly into the page so it's actually pre-render pre-rendering all that just like we talked about new javascript needed new client-side code needed and then the last thing I'm gonna do here super fast is I'm just gonna drag and drop this whole thing up to where you can see it and I'm just gonna let's see just I'm just gonna take this disk folder this is using net Liffe I drop you just take a bunch of files you toss the net left eye and it gives you a site and so I'm just gonna open that up and here is our completely finished completely pre-rendered site running on net liffe I in 10 ish minutes so I just want to finish with one quick note so should use grid some view press is amazing for Docs here's my here's my advice I'm not gonna tell you which one to use so I'm just gonna spoil my next slide all three view press next and grid scimitar and the main frameworks are so amazing the contributors do an amazing job the contributors talk they love working together they steal ideas from each other but like in a chill way and all three frameworks are awesome so here's my here's my kind of very very basic wisdom View press is really amazing for docs trying to use it for other stuff gets a little hairy you could like put your blog on there but in general it was built for Docs so you can use it for something else but it's really not it's main intention nutz works so amazingly for applications and that includes static applications Debbie talked about the new static module which is coming super great work the next team is doing so it works great for applications whether it's a PW a normal site or a static application and grid some really shines for static sites and apps though it is working on working awesome for static applications and for progressive web apps also with offline support and things like that so should you use grid 'some I don't know like I legit on that I would leave you with the quote from Teddy Roosevelt and any moment of decision the best thing you can do is the right thing obviously like all right let's get to the wisdom part and the next best thing is the wrong thing and the worst thing you can do is nothing go build stuff thank you [Applause]

Channel: VueConf Toronto

Views: 8,725

Rating: 4.9656653 out of 5

Keywords: vue, vue.js, vuejs, vuetoronto, vueconf, vueconf to, vueconf toronto, vue toronto, js, javascript, gridsome, fast sites

Id: JEVE6FAZI2U

Length: 36min 31sec (2191 seconds)

Published: Fri Feb 21 2020