Static generated sites === great performance. What are you waiting for?

[Music] Thank You Phil for the lovely introduction hello everyone how is everyone doing whoo okay cool I am so excited to be here I've been here for five days most tourists that come here that talk about the Golden Gate Bridge the cable car my best experience my highlight of my trip was walking into the Amazon ghost or taking a chocolate mousse putting it in my bag and walking out as if I was stealing it was amazing I just liked loved it and I think that's our future it's so performant you walk in and you walk out it's performant it's our future and that's what we're gonna talk about today static sites I believe in the future they are performant and that's what we're here for so my name is Debbie O'Brien and as Phil said I'm in for an EdTech late in Patterson agency in the beautiful island of New York I'm actually Irish so I moved to Majorca cuz it's sunny and Ireland only rains and I'm a contributor to webpack and also to next so I work a lot on the documentation I write blog posts for ultimate courses I'm a teacher at view school so if you want to learn about view just go to view school and you can listen to me for the rest of your life yeah and I'm a media developer expert at cloud inari so you can follow me on Twitter Deb's underscore O'Brien and on LinkedIn Debby O'Brien so today we are going to get rid of the lump we're going to get rid of the mean and we're gonna let the jam take over whoa okay so basically what I'm going to cover today is the new front end so how we're doing things nowadays is only one actually building John stack websites are you here just learning who's here is actually building okay that's quite a few and there's still a lot of you who that need converting that's okay I'm also going to talk about static versus dynamic because this is a big problem there a lot of people don't understand the difference between static and dynamic and I'm gonna show you I'm gonna show you a case study of what we built I'm gonna give you some performance tips so then you can go and build something cool and then there's some useful links at the end I might not get time to show you but I'll upload the slides to Twitter and then you'll be able to download it and one of it includes a boilerplate project from nooks that I built and you'll be able to download it and just play around with it and see everything that I've done so basically what has changed so everything now is pre-rendered so before we were like using your servers and we were like rendering on the server rendering in the browser and now we're just rendering it at bill time its pre rendered at bill time and then we basically just send up to a CDN and it just comes straight back down again so there's no execution at request time and that makes it much more performant the functionality is client-side so we can do all these kind of like cool things in our browsers now and basically it's all about the api's so the api's are now cool and allow us to do so much that we could never do before in front-end for example search functionalities we can use things like a goalie a search functionality and now in front-end we can just have search functionality thanks to these fantastic api's payments for example we can use stripe and sniff cart just to make payments right there in the front end it's kind of cool and we have authentication with I was over out and there's so much more so thanks to all these API is we can create amazing static sites so it's kind of like superpowers for the front-end so what do we gain so going John stack improves your app security because basically we don't have to worry so much about the attack vector it's not as wide as before and it improves performance because everything's already pre-rendered it's pre-built so performance is just like automatically we are working with better performance we have a better developer experience because now we don't have to like dive into someone else's code that we don't know we work in an experience in the codebase that we're used to and that we want to work with and that just makes us happier and being happy is important and it's easy deployment so we can deploy anything because we're deploying just a front-end part and we're deploying that separate to the back-end so deployment becomes easy so now this is a problem here a definition of static so when you're like basically going to your boss and saying I want to build static sites the problem with static sites is that this is the definition it's lacking in movement action or change especially in an undesirable or uninteresting way oops yeah so that basically means I want to build a static site and they go no I don't want static site on a dynamic cool single page applications dynamic cool we don't want static so I'm here to tell you what static really is and I'm gonna show you that true Taekwondo any Taekwondo fans here today anyone do Taekwondo yes one person on the black man you're gonna have fun later okay so I'm a fourth degree Taekwondo black belt so I spend a lot of my life basically hitting people and fighting and that's great fun and I always get my own way so maybe that's why so basically I'm gonna show you the difference between static and dynamic using Taekwondo so in static for example this movement here is a punch so at the end of a competition or at the end of a when you're doing the patterns in the class you have to hold a static position so you gotta like basically stand there in that position for as long as the other person takes to finish right and you might take ages because it might be a longer powder and it might be really really slow and your basic is just holding this static position so this is pretty much how I look at static right it's static we're not moving it's just static we also have really really cool dynamic movements in Taekwondo of course cuz Tai Kuan is cool so this is basically a really cool dynamic movement yeah to see that so that's I could do that as well but no I was actually practicing in my hotel room and then I decided probably might fall off the stage so I won't do it I'll do it later at the party though so and this is a slang no actually will this is a slang sidekick and as you can see it's really dynamic right but if you think back to when I was saying in the competition or when you're doing that in the class there's no way you could hold that position I mean you're just gonna fall so you cannot that's not a static position so basically that position is dynamic but it has to land in a nice static position at the end okay so you're getting my point we have we have static and we have dynamic put it depends on when you look at it that is a static movement and it's a dynamic movement I will show you in the video instead of me just doing Taekwondo appear on the stage and basically you can see it's dynamic but it ends and static it's dynamic it ends and started you see where I'm going here yeah we could all just do this right dynamic don't know make static dynamic and the thing with the kick yeah it's dynamic but he lands down in static it's dynamic he lands down and static it's dynamic he lands down in static and that's basically what we need to keep in mind everything is static and dynamic at the same time it depends on when we look at it so static is a new dynamic that's basically what we should be thinking about we're not building websites static websites like we used to build in the 90s we're building cool websites basically our static site we're just pushing everything up to a CDN the user is just taking it straight down on it's just super super fast and there's no server needed so that makes it even more performant and it's just like super power super fast so static site generators now there are many sites at static site generators out there and if you're using view to build applications you can use next you can use view press and you can use grids some if you're using react you can use next and Gatsby if you're using spelt you can use snapper J's there's also 11 T and then you have Jacqueline Hugo who've been around for many years and there's probably even many more of these that I don't even know about so there's quite a lot to choose from so basically you know one is better than the other maybe maybe not it doesn't matter just choose one that's right for you play around with it and start building static sites so again Taekwondo and static sites okay so this is what I want to explain to you is how the static sites are being built because I have a lot of people who save yeah but you can't build that because that's dynamic and you that can't be in a static site everything can be in a static site so how we do it is if we think about our API is up there okay and we have this Taekwondo person just always think of it like wonder person and what they have to do is jump up to the API flying dynamic sidekick take all that data from the API line back down again and there is your static site with all the dynamic content now every time we change the content and we make a new build that Taekwondo person jumps back up CPI gets the data jumps back down again we have our static site again so do you see where I'm coming from okay so if we click a button something on the page that we need more data we then send that Taekwondo person back up to the API get the data back down again and you have your dynamic static side so it's just like this yeah jump up data back down again jump up data back down again okay it's kind of cool I want to do that later it'll be fun okay so now do we all understand the difference between in dynamic yes okay great let's move on so so pushing and deploying very easy we just basically we have increased confidence because as soon as we've built something we just get push and deploy it's like fantastic and the staging is the same as production so it's basically we don't have to worry about anything when we're building it we can deploy anywhere anytime so you should be able to sit on a plane deploy get on that plane for 11 hours come here and not worry about oh my god did it deploy right you remember those Fridays when you're like I just deployed on a Friday and now it's returned oh no yeah we don't have to worry about that anymore so that's kind of really cool and then you've got web hooks on content change so if your content changes if you change something in the air in your admin for example in the backend you just use a hook to basically rebuild and rebuild a whole website so that's a kind of a lot of generation with static sites right you're thinking every time I've got to change a content I've got to regenerate the site and change something and regenerate it's a lot of generation but you know don't worry about it take it easy let that static generator do its job that's what's there to do you don't have to worry about how many times you've got to generate the page just build it do it and leave that up to the static site generator so going next so nukes is not just a static site generator it's actually a progressive UJS framework who here is actually using nooks ok quite a few okay but not too many so I've got a lot of work in convincing you all at the end of this talk you're gonna walk out of here and you're all gonna want to build next web sites that's my aim here okay so next basically has a lot of benefits so you're basically building everything in view it's just view files so you build everything in view but nukes gives you a little bit more for example it gives you file based routing so everything that you put in the pages folder will be a page and will automatically get a Rooter j/s file for you so you're gonna have that all the routes basically done for you you don't have to like I build a course on on view Rooter and I'm like oh my god so much work maintaining a routed AS VAL nukes does it all for you you just put it in the pages folder and you also get automatically code spreading of your routes so now you don't even have to worry about code splitting of those routes it's all for youths magic it's cool so I love it prefetching it also prefetches all the links for you so next knows what you what the user might click on and basically will prefetch them so that they are ready to go and the user clicks on those links they're already prefetch and that makes it really really fast and there's like more than 50 modules so you've got a module for everything for Google Analytics sitemaps progressive web apps etc so there's so much you can do it nooks you've just got to dive in and check it out and see what's what's there so no quit nukes you can do server-side rendering single page application or static websites so I'm going to talk about the mole just to show you the kind of difference and just just to show you what you can do it next so its server-side rendering so next was created basically for server-side rendering and to get server-side rendering you just put mode Universal once you put mode Universal you now are using the server to render the page okay so that's all you've got to do to get a server rendered page in next for a single page application you just put mode sba and now you've got a single page application so the difference between them is very simple just one little change and now you can move from one to the other so what about static sites all you got to do is next generate in your build command so nukes generate so if you're using yarn at the yarn generate or NPM run generate and in your build command that's all you've got to do if you've got the mode Universal and your static site nukes generate on build you now have a static site now what that's cool is that basically you can just get any of your single page applications that you've previously built in nooks and just make them a static site by changing one command I mean that's kind of cool so you should play around with that so yeah so I'm gonna show you a case study so Patterson travel and you can check this out on your mobile in your laptop Patterson travel is a travel agency website that we built and it's Bill completely whit next so just to give you an idea of what it is it's in three languages and it has a blog events case studies quite another few pages and it's it's in three languages and has a hundred and forty-four generated pages so when we generate that because of the languages were generating 144 pages and it takes 74 seconds to generate all those pages so it doesn't take a lot of time to statically generate a site and to give you an idea of like the build up of the site it's not a massive company it's not a massive site but it's not a small site either but it does have a lot of content so we have five layouts five different layouts we have 32 page components so in our pages folder there's 32 pages we have 38 components that make up those pages and we have eight plugins that we're using we have nine modules on there are 21 pages of documentation so it's quite a not as I said not a big site but it's a kind of a middle sized site and it takes only 74 seconds to generate all that so that's kind of cool now we also have a booking engine so we have a booking engine for this site that basically means you can reserve an event you can search for hotels you can add in a hotel you can add extra such as like a t-shirt that you want to buy for the event you can checkout you can receive the confirmation of the purchase so all this also happens in our static site and now you're probably thinking but hang on a minute you can't do that right because how can I statically generate the page because I don't know what the user is going to choose what hotel is he going to use how many children do they have what room were they want to choose so we cannot statically generate that and you're right it's not possible to statically generate that so that basically has to be a single page application but can we have a single page application inside a static site next you can so this is basically what you should be doing if you're building a single page application for your booking engine you can mix it in your static site so you can have both you can have your whole page your whole website is a static site and the booking engine as a single page application mm-hmm how do you do that it's actually really easy you just use a spa fallback so basically in the generate command you just put fallback equals to true so fallback true based basically means when you're not generating this fall back into single page application mode and basically with the exclude you can tell it what you want excluded what you do not want generated so we're using booking here everything is of my booking engine is in a booking folder so basically we're saying everything that's in the booking folder excluded do not statically generate it I want it to be a single page application and that's it so you can use a regex expression there you can put in whatever you want and it's very easy then to mix a single page application inside a static site you don't have to build two things separate of each other that's kind of cool so how does it work so your site is pre-rendered okay your pre rendering the static website hydration kicks in which is where the dynamic mistakes over view basically hydrates at all for you and it's now acting like a single page application even though it is a static site it acts like a single page application when the hydration process kicks in and the content is kept up-to-date because of the API calls and navigation now this is really important so you basically have your website that's static everything is pre-rendered when you go to the homes page or whichever page you land on you just have pre-rendered content but every time I change a page I now call the API again so if I go to a different page I'm gonna call the API now why would you want that but think of our booking engine think of an e-commerce site for example that basically you might want to statically generate something but you might want to change the price so if you change the price of something you're gonna go now it's I have to rebuild the whole site and deploy it before I see the price change well you don't because in next everything is kept up to date because you're calling the API on every single page so every time you you change the new page or you go into the next process of the booking engine you're basically going to see that updated content so we're calling the API on navigation every time we're next it's really important to remember so it's kinda like yeah call UPI call the API call the API call the API and you can see that in the network tab so you can um you can check that out and see how it works and basically as you can see it just calls the API every time you're changing the page so you kind of think any of it I just want full static I don't want it to call the API time I mean that's great for an e-commerce site and it's great for like a booking engine but maybe you just have like a blog side or other content that's not changing that often so why do you want to change and call the API every single time well that's basically how next works but we also have a full static module so full static basically means it's fully static I like it and basically all you got to do if you've got one API call on built so it calls the API and builds remember the Taekwon a person jumps up gets everything comes back down again and basically then every time you change the page you call the payload on navigation instead of the API so now instead of having to jump up at every navigation and go to the API and get the data I now have it all in my payload and I just jump in there and just get it it's just right there so I don't have to jump so it's super super performant so the static module in next basically you just have to add the static module it's as simple as that and then just generate your page and then you have the full static module but it's coming soon so it should have been released around this week maybe it's gonna release next week this is coming very very soon you guys are the first to hear about it so watch out for the next release of nooks that's gonna have this static module and I'm really excited about it because I got to play around with it so I'm gonna show you how it works a little bit more and basically here it creates in the dist folder when you generate stuff everything goes into the dist folder you open the nuke folder and you now have a payloads folder inside that payloads folder you've got a folder with loads of numbers and digits and then you have every single page so you can see there they're all the pages I have or they're in a folder and inside that folder is the payload JSON of every single page so we're not calling the whole list like the whole cache of everything of your data you're just calling the page that you want to go to so basically like I showed before in the network hub you now have the payload JSON and you can see it's calling the payload this is calling the events payload and every time you change the page you're navigating to the API is going to the payload instead of going to the API except for the ones exclude because then they're going to be a single page application mode and they will call the API so you can have both okay so that's coming very very soon so watch out for that one that should be released I hopefully this month so static sites is equal to great performance and this is basically the performance that we have with Paterson dot travel so we're really really really excited and proud of this we have ninety four which is not bad I didn't have ninety nine and then I added loads of content and now I've got 94 and I've got to get better at it you know so this this kills me it's like but I did this two days ago in my in the motel I was staying in and it's still pretty good but I know how we can fix this and I'm going to show you as well how you can fix this and get great performance accessibility 100 best practice 100 search engine optimization 100 and we're using a progressive web app so this is what you should be all aiming for if you don't aim for perfection you'll never get there so just try your best and make sure you get there and try and be as performant as possible so next talk that I do is gonna be a hundred you're gonna like whatever this okay you have promised you accessibility so make sure you're working with accessibility and getting this because this will also help your performance the lighthouse test will check everything so it's very simple make sure you got semantic HTML use a button for a button for example make sure you got your labels for your forms so always use labels area tags make sure you're using them correctly as well and this one's really important all types make sure you have alt tags now Google will allow you to just put an alt tag in there with ABC and that will go yeah you're very accessible and you are super cool because you've got alt tags but that's really not how it should be so make sure you're putting the right content for your alt tags and use chrome dev tools for accessibility so don't have you know this but also they look at your color contrasts so this is gonna help people who who don't have as good a vision as some of us here and basically just by like hovering over it in inspect mode you can actually see if your contrast is making it or not and you can see my a a mark there so I'm getting you know good results there and if you're not then just go to your designer and say look this color this gray just just make it a little bit tiny bit darker a tiny bit lighter nobody's no gonna notice a difference so just do it because somebody else will and it will make a difference to accessibility and it will improve your performance as well so Oh to optimize your images so we use cloud and airy for everything if you haven't heard a cloud I read they do have a booth out there you go your get your photograph taken for free and chat to them all about it and what I love about cloud and area is it helps my performance and just by writing Q underscore Auto or F underscore Auto I now get automatically optimized images I don't have to do anything no more Photoshop work anymore I get automatically optimized images and it will also choose the best image for me so if I'm using Chrome it's gonna give me a web page I'm using Internet Explorer it's gonna use just a JPEG so that's all you've got to do and it does so much more as well that I won't go into but basically for performance just check out cloud and airy and it's free for developers so just check it out and have fun with that lazy load your images so this is kind of like you know you can use Chrome's one loading equals lazy or you can you know build something if you want and basically lazy load them so that really does help your performance as well progressive web app now this is my favorite so I wanted to build a progressive web app and I was like I don't know how to do that I need to do a course on serviceworkers I need to learn about this it's gonna take me about three weeks so I put it off for ages and then I sat down I said right now is a time I'm gonna build a progressive web app and what do I do I just basically put in my modules Knox junior /pwa I put an icon dot PNG into my static folder and I had a progressive web app it took three seconds I was like oh my god I didn't tell my boss that no I told him it took three weeks so yeah if you're if you're using nooks check out and make sure you put the progressive web app and it's super simple so for CSS CSS dots you can actually run CSS dots on your CSS on your website and see how big your CSS is remember for performance JavaScript and CSS are what's gonna slow your website down so the less JavaScript and the less CSS you have the more performant your website is going to be and obviously we need a lot of JavaScript so I'm kind of like saying okay if I have more room for JavaScript if I have less room for my CSS so how do we do this so what I normally use is tailwind and purge CSS tailwind is utilities color library so it's utilities first and basically it's a bit strange if to start off with you kind of think oh my god but I'm putting in the HTML all these like utilities instead of like having all your classes but it's really easy to maintain and we started it off we build this and we have 27 K bees before gzipped 7 K bees of CSS gzipped I mean that is pretty incredible for our whole website that's all the CSS we're loading so that is really really cool and purge CSS what purge CSS does is it just removes all the CSS you're not using and it just chosen the bin I love it so it's great so modern mode as well wit nukes we have a modern mold and you basically just put nuke spills - - modern and then you basically build a bundle for the modern browsers so chrome is gonna now have a smaller bundle because it doesn't need so much stuff as Internet Explorer for example who need all these polyfills etc so it's gotta build a better and quicker and more performant site using modern so that's really easy to do make sure you code split from the start so when you're building don't just think later on I'm gonna go to my whole application and then I'll code split what I think doesn't need to be shipped upfront code split from the start cuz it's really simple so in view you just put it the component you're going to use normally you would have an import on top of that just put the import as an arrow function where your component is the footer for example people might never ever ever get to the footer so you know don't load that up front make sure it's just code split it so it gets loaded as the page gets rendered as opposed to always being there the same with modal's or with dropdowns and as I said wit next your routes are automatically this automatically happens with your route so you don't need to worry about that unless you load your translation so if you're using NOx internationalization it's actually really easy you just put lazy true and then you have automatically lazy loaded of your translations so that means you're not gonna load the English if you're on the Spanish website unless someone actually clicks on the English ok so just just do it it's really simple like I was saying before tailwind and purge CSS it's definitely my favorite and nukes has a module for this you just have to re until when CSS and it will automatically include the purge CSS for you and then if you do want to like do something like whitelist some so maybe using date pickers which is an external library and you don't want them to remove the CSS then you just flightless that and then purge the SS anything with date picker it's just never going to remove those styles so definitely try out tailwind with purge the SS because it's really cool so use the web pack analyzer wit next it's very simple you just put build dash a and you get the web pack analyzer so when you're analyzing your code and you should do this quite regularly and if you're building something when we added moment as you can see the developer added moment and we added like every single language Under the Sun and I was like the whole my god you're killing your application so you can basically analyze things and you can see so that then you can make better decisions so we basically then chose looks and instead of moment and that made it smaller and we can still make that smaller again so we can still in looks and instead a moment take a couple of other things out and make it even more performant but use the analyzer to basically analyze everything so basically Jam stack do we need it hell yeah so I'm taking the fight and it's gonna be a fight when you go back home and you're gonna say right we want to use jam stack I want to build a jump strike a website I want to build a static website it's gonna be a fight because people are afraid of change and you've just got to tell them look I'm gonna build you a super dynamic website and it's gonna be very performant just don't mention the word static and you know you'll basically be able to do what you want and my question for you today is are you next yes who here is gonna now go home and try out a next website yes I got one hand on the back that's cool okay thank you very much as I said these slides they will be on Twitter so the first one there is the nukes boilerplate so this is a boilerplate project it's taken from Chris Fritz's view enterprise boilerplate and I've just basically made it a nukes to fight it and you can just like download all of that it has everything except the static module as soon as the static module is released I'll also add into it at the moment it's um I can't show it to you yet it's private oh but I will add that in and everything is in the boilerplate old approach CSS tailwind internationalization so download that play around with it and have some fun and just test out next and build some really cool stuff so thank you very much [Applause] [Music] [Applause] you [Music]

Channel: Jamstack TV

Views: 2,956

Rating: 4.9545455 out of 5

Keywords: JamConf_2019, Vue, Nuxt, Performance, Per-rendering, Debbie O'Brien, Patterson Agency

Id: H793eyVM_04

Length: 29min 35sec (1775 seconds)

Published: Wed Oct 16 2019