JAMstack with Prismic and Gridsome. Score 100% on Google Page speed!

[Music] hello welcome back to the channel i made a new website and it's really fancy and it's using all the newest technologies and it's using jam stack and it's a pwa there's a lot of stuff and it actually didn't take me that much time to build it and i just released it and people have been asking tim but how did you do it you know can you give us a code walkthrough can you actually show some stuff for once rather than just talk to us so yes let's do it let's have a look at the website so currently this is hosted at netlify at the cdn edge which means there is no central origin server where the files are hosted that the cdn looks at it's literally static a bunch of static files this is like a four megabyte website or something that is deployed on the cdn closest to you and then all around the world so it's really not hackable because there's basically nothing to hack all the files are static so this is really cool about jam stack and also cool that netlify gives you this for free it's just amazing the tools nowadays man so basically this website shows my speaking schedule it shows my writing as a blog and it shows my video which i kind of blog post also but videos so speaking you can see it has upcoming talks and older talks and the talks just come from the cms then we have writing which is similar it just shows you the dates and a bunch of information about the talk sorry about writing and you can click on it and go and you see images are lazy loaded and animated in fancy and you see that performance right that's pretty crazy it's near instant i was actually thinking of maybe adding some page transitions to make it feel less fast because people are not used to websites this fast um but then i thought it we'll just show you fast this is what it can be any website can be this fast and then videos which is a grid of videos and you can actually filter people with a keen eye can probably see it's not a real filter because i don't have that much content so the moment you click twice normally you would see no result very fast i don't really like that so i use the trick that a lot of ecommerce's actually use is there's not that much content actually that filter first filters and then it expands again with all the videos that have both tags um or if something had just just stack and an attack and the other one has just quarantined licks i'll show both so that's a little trick the rest of the website it speaks for itself it's responsive it's mobile first i might not show you that now because of that's not nice for a video format it has pwa features it has a whole bunch of stuff that we'll go over later on so that's it for the website let's talk cms so i am using prismic um prismic is a software as a surface kind of cms and it's truly headless so it doesn't have an opinion on what you do with your front end it just works data structure that's it so prismic has a bunch of features that i think make them the winner in my book right of course there's a lot of cmss out there but for the ones that i've seen and that meet my needs this one is by far the best and starting off is actually the fact it's free for one user and you get the full suite of features maybe one or two things you don't get and multiple users you also don't get but actually it works super well with the stuff that you do get so that's a big win every startup should do this because if people like me get to use it and like it they can then pitch it to big clients and suddenly you can get some get the ball rolling right everybody wants to get to that corporate level but they never reach it if you just have developers give them the option to try it will grow right so well well done guys this is great next to that there's a bunch of other features right so the first thing that i really enjoy that i generally only see in enterprise level software is they do components really well they do in their data structure they have something called slices so a slice is like a component on a page so it can be a quote some media embed a carousel whatever so if you define all those slices you can basically as a content editor grab your page and just drag stuff in and compose your page so it's not so fixed it's kind of loose and that works really well and then the thing is you don't have to use that you can also just use the rich text editor that's super feature rich let's have a look at that so let's go to my latest blog post and you can see there's a bunch of fields here and in my type definition i say i need those fields and actually this is the rich text editor so we were talking about that one basically normally rich text editors are complete crap sorry for the words but they're they're ridiculously bad because content editors just work like it's worked right you add bold add an extra enter blah blah blah what comes out on the other side for the developer is pure rubbish you know it's like span with a p tag inside with inline styling with another div and like font tags i've seen the most crazy in my time rich text editors equal bad stuff for developers this one doesn't um this one is great it actually works so they have solved the rich text issue as a cms vendor this is the first time i have seen this and so what they do to solve it is that whatever you see here like i have a paragraph i have another like little paragraph here i have an image i have a title all of this is represented in json so they parse whatever is in here and represent it as json to your front end so you can loop over that and then build your own html exactly to the content and it gives all information right so it says this is heading three this is the title there's a link at this place in this paragraph and that just solves all these low quality issues that rich text editors normally give of course not everybody wants to code an interpreter for this and write its own html so they have created a bunch of components that you can use from them that just rendered this out of the box so i actually have a rich text press make rich text component in 3ds you give it the field name and it will just render html for you and then you can actually inject your own html serializer if you want to change the header three to a header four if you wanted that or whatever we'll look at that later but that's a super cool thing that they offer and lastly because there are so many features we could talk about but that video would be way too long so the last thing that i really enjoy is that their rest api of course that's the heart of their business right it has to be good and this one is truly good well documented it's fast it's secure it has the right things in place and on top of that they have a graphql api that works just as well i have actually not seen a headless cms with the proper data modeling with fast apis that also gives you a graphql api that just works congrats guys this is the first time i've seen it and there might be others out there but the stars aligned and i found prismic and yes awesome um one last sentence on something they offer they actually give you an image ix license and this is imageix is one of those services that optimize your images for you and you can resize them and they serve them from their cdn this is a great thing because now the cms doesn't have to do it because the cms is not an image manager right so they actually pay you a license for every user also awesome there are not many cms's that actually deal with media this well so we spoke very shortly about prismic let's now run and talk about gritsum and then look at some code alrighty then let's talk about gritsum so basically oh let me scroll up gritsum is a 4gs framework that basically works for static websites and so it grabs data dynamic or local does fancy stuff with it and outputs a static website so um in that sense you can also say hey tim why didn't you use next well i did before the only difference to grissom is that it's more scoped with nux you can do enterprise level full-on node.js applications universal mode the whole shebang um gritsum chose to scope it down more towards the gemstack side of things right so on build level it always does all the building and then a website pops out that's totally static so the fact that they sculpt it down and put in a whole bunch of like basic defaults that are super smart helps you accelerate the build of your website right i know how to do all those fancy pwa things data chaining caching or whatever all the fancy words i know how to do those things but what if i didn't have to do those things and actually ritsum did them for me so i can focus on actual writing of content and a proper design of my website right it it basically saved me months of work that i didn't have to do myself right and of course some stuff i didn't like so much so i changed it up a little bit like i didn't like the way they do images so i did my own but most of it is great so basically this is what they do so you bring your data as they say so it can be a cms it can be some data api or whatever you have csv json or local markdown files like using netlify cms or just typing the markdown files on your pc they then map that with source plugins for each source to a data model that they use right so that data model is now always the same you query it always the same way and the source plugins to the different sources actually deal with the complexity of what that data how that morphs and how it maps but actually you as a developer once you have that plugin in there you don't have to do that much right it creates collections of pages for you it's really cool and then once you hit build it will actually um go to use the apis of those sources for each page query what it needs renders the page saves it so the output is actually pre-rendered html so we're kind of back to the old school where everything is just static now um they render that static package and put a whole bunch of smart defaults on it so it has like yeah let's read you know like there's there's link prefetching there's code splitting there is like all of those extra things that you want in your pwa website right to make it super fast they do it for you and if you don't like it you tweak it slightly and you're good to go and then you upload it to netlify or site or whatever it's called now and all is good right so um yeah they have a bunch of fun stuff here which is all the same for a lot of systems i kind of enjoyed the way it works especially because of those queries and those queries are all in graphql and graphql querying is pretty simple once you get it it's super simple and you don't have to worry about the few apollo integration and all of that complexity they basically abstracted away from you and you basically just add this to your view page page query or static query as we'll see later and it just queries done very simple so that's gritsum in a nutshell of course it does a whole bunch of stuff but why don't we just look at the code to see how it all connects and what i had to do to make it work with prismic because it wasn't really out of the box and then i'll show you the plugins i use and how everything is set up right let's do it all right are you ready for some code i am so um in the interest of not making this video two hours long i'll just go over the core concepts and some of the minor issues i found in the connection between prismic and grads gritsum i'll go over those and then i'll show you a bit of the plugins that i use to actually make my website perform the way it does if you have any specific questions on how certain things work or how i did something please reach me on twitter at tim bennix and i will either give you a call or we just do a screen share or whatever right so i'm always happy to explain what i've done or i'm also happy for you to give me feedback because i did something really badly please in any case tell me right i'm dutch i can take it um so gritsam is kind of abstracted away generally it's all in their cli package you don't have to worry about it but it gives you a bunch of hooks into the packages right so you get something called a grid some config and a grid some server file the config file is where it all starts basically it exports the site name the site url the icon and all its plugins and i have some helper code here we'll go into later so basically before you can actually show anything on the page you need to get information from your third party source or your local markdown files for that you have a source plugin so this is how gritzm does it they have plugins to grab data model it for you and add it to the localgridsongraphql interface this is super nice because your local queries that you do in grid some components are always the same it's using graphql and you it just works really cleanly it's very nice so the complicated stuff happens in those plugins so you don't have to worry about it unless of course you do millions of queries and go slow you might have to tweak it but in most cases no so i went to gridson.com found this prismic plugin it almost works almost i hacked it a bit it works now i'll show you what i did later so basically you add a grid some source plugin you add a bit of credentials and suddenly starts working so i'll show you so when you start up prismic you get a local host where everything works you also get an explore which is basically a playground of graphql so now you can actually see this is the local documentation generation of gritsum so it creates a page it creates all pages it creates metadata and now there's my prismic stuff so there's a whole bunch of prismic and here there's actually home so in my home i have our main title subtitle description image body blah blah blah we saw all that before in the video right and they also have a whole schema of everything so they ingest this like the moment you start you do npm run develop or npm run build it creates a schema for you in those docs for you and you have all the data you need so now when you type this very simple query you just get the information of my homepage it says hi there i'm tim bennex which is this so this just came from prismic and it just works and then the beauty is when i do control space or command space on your mac it actually auto completes this for you and of course it does because it knows the whole schema it knows everything already because it did and it grabbed all that information when you started running the application so now there's my header too now i can do whatever i want right um or well if i query for body i have to do other stuff sorry that was too premature um whatever we don't have to go there now but basically you get the information and so let's move to the next basic step then i'll show you how can you use this information in your pages so basically what they do is they have a pages folder and inside your pages folder whatever file you put there that becomes automatically a root so when you go to slash writings here you have writings dot view slash writings is now the root that displays this stuff index for home right so basically how do i now get my data into this page so what you what they give you is you they give you a really nice query object or property or whatever you want to call this like this is a view file right so in few files you always have templates you have scripts you have some style stuff but now they created for you page query or static query something else you have both of them for pages you generally do this for static it's for other stuff so what is super nice about this is you don't have to worry about view apollo and apollo server and how all this graphic ul stuff works it kind of just abstracts it away from you because of this little component here you can literally say this is my query i name space it to prismic and i ask for home that's pretty simple right so suddenly this is what we just saw right before and this that body thing it actually needs a bit more this was just my mistake for typing it that way but it gives you all that information and it gives you a dollar page property and so when i want to show something i have dollar page prismic which is this home which is this and then description which is isn't that easy and suddenly here's all my data i can literally i can actually do if i want to do let's do something nasty let's do something and then we do page dot chris make dot om let's have a look beam that's all my data there you go cool right that's very easy isn't it and from there you can do whatever the hell you want of course now that we have prismic their description field is rich text in my case so it outputs a json of all the data that i have so i have to do something special to show that html so here you have the prismic rich text component that you just give the field of description it gets that whole json stuff and it actually morphs it into html for me and shows me so that's really easy but a bit more on that later because we have a bunch of other basics we haven't discussed so next so this page is on its own right but actually you need some sort of layout around it so you can actually have your layout here so layout is a component that they inject for you by default and when you start so you have a main.js and they actually add the default layout by default to vgs for you i have a whole bunch of stuff here that's just because i made my own prismic code my own prismic components to render stuff the way i wanted you don't have to do this i'm just an extreme nerd and i wanted to find out how it worked you don't have to do all of that i also use a store so i you add it here i add a bunch of components here and you can add some metadata to your head also in mjs but what we learned from this is gives you a layout so when you go to the default layout in my case i just put a diff class wrapper around it i have a skip link and then there's a slot and that slot is where your index.view or your writing.view or video.view is injected so your page is injected in the slot this stuff is always around it you can add some styling whatever you want so now we have done pages we have done layout we have done the page query thing of how you get your data now there's one thing we haven't discussed just yet which is what if i have a blog page i don't want to have one file for each blog post right that's shitty you want some sort of dynamic routing going on because when i now click let's say on right right so these are my writings and i click on this one this is now a dynamic slug i click on this one i kind of want to have the same writing.view file that just grabs the data for that slug right that's how that should work so they came up with something called templates so now when you go to writing.view this is kind of similar to what we saw before there's my rich text and it's a writing content and have a writing title and actually um what you get to do now is query writing so but you make a query now it's slightly different and that uid that's actually the slug in my case it's uid inside prismic i made it my slog that's my url so that's now dynamically added from this so this is now injected there and then i can do my query and it all works um so that's the way you do dynamic stuff but with prismic for me this didn't work and i lost like half a day on it it's like do i just not understand gritsum what's happening here why can i not just query this as it turns out grismick or grismick no gritsum i'm thought i'm using those words so often i'm moving it around so the moment it starts up it actually looks at the schema of the graphql thing you gave it and it makes collections so it makes the all pages right and so um all pages or all writings or all videos it's this stuff this is like a graphql type of namespacing thing that you use or naming convention as it turns out it didn't actually add the the stuff you need to the context of the local gridsum i won't go into that too much now because that's a long story as it turns out i couldn't actually query this way where is my template for writing i couldn't do this because i didn't know it did not know about this uid locally so i had to somehow add that because it could find all the pages it just couldn't find it in a dynamic way because the the graphql schema in my local grid some didn't know about that field so what i had to do and that's where this server file comes in because we have looked at that file but we didn't touch it yet in this server file is actually very interesting because you can actually custom load extra sources or you can basically um once it creates the pages and stuff you can actually get a hook into that function right so there's a bunch more functions here that i'm not using right now i added some quick content to the the basic metadata graphql part but what i had to do and i had a lot of help from my mates for this is actually on create pages query for me all the writings query for me all the videos and only grab that uid variable that we need and then once it has that loop over all of them and actually create a page inside the context of gritsum for me so in that page you say the path is this is the url this is the component that you have to use and in the context say this is my uid and because i've done this i can now query this in my writing.view that was just the thing i just didn't understand gridson i didn't understand why the plugin i used didn't do it maybe nobody needed it when they built it i had to figure this out now that i have everything works like a charm so we are now about 12 minutes in on the code part of things that's pretty long right so how about i show you a bit of the magic of prismic and their fronted components one and after that we look at the plugins that we have um to make this website work really well so first of all um what prismic gives you and have to look for it they give you something called an html serializer and this is like pretty cool stuff i can also use it to solve my issues because for example i want to lazy load everything but when you add a youtube video to an embed in prismic it just makes a an iframe with a source but when that loads it loads immediately and your page might be slow so what i did is like this html serializer you can plug into their components and then when you hit something called let's say elements dot embed and when the the element oh embed provider name is youtube it's like hey now i'm rendering i'm rendering hey i see youtube and then what i do is i overrule what prismic would normally do for youtube and i make my own iframe so i give it an aspect ratio with a padding hack stuff like that and i say data src rather than src because i don't want it to load if i don't want to look at it yet because i might want to scroll down and then look at it right your page has to be fast so i wrote a little bit of javascript in a mix in that loads on the writing page and on the videos page that's when it finds an iframe with a data source at the moment of intersecting within the section observer it removes the data and just put source and youtube loads so that html serializer thing from prismix saved my ass because without that i wasn't able to lazy load my embeds well there are workarounds with slices imprisonment can do a completely custom thing but i just wanted to write embed and write in my rich text nothing else keep it simple same goes for when i have a heading 3 like in my case i want a fancy title and a fancy title is um let me find one for you a fancy title is this you see it's like red and it has a little bit of a skew which there's some fun stuff and though this is a header four this is a header three um out of the box from gritsum sorry from prismic i just get header 3 but what i want the header 3 has to be a fancy title and it has to be red and 4 has to be blue and so only for writings for blog posts i do this so i basically replace whatever html they would do with mine and so this makes it super flexible so you can do any sort of html you want and it also saved me and this is the last thing i want to talk about because the video is getting a bit long actually it is about links because of course when you link to a document inside your own website you want that to be a router link rather than a page refresh because a router link might be way faster there's like no loading or some fancy animation whatever you want but this thing the the html serializer happens after vgs was already loaded so basically what you want to do if it's a document you kind of want to have grid some link or next link there right so it's a router link component from your framework doesn't work because this happens after 3gs was rendered so what i had to do to solve this which is kind of a common problem like i know there are some fixes for this but it i don't want to change gritsum right that's not something you want to do so i added this property here so if it's a document i tell it it's a data internal link and then i have a little mix in and there it is link mix in which finds all internal links adds a click handler to it and the moment i click i actually do router push so i've kind of hacked it so now links that are internal always do a router call without that html serializer i don't think i could have fixed that so that again it really they kind of work together it's really cool um so that's it for the stuff i want to show because there's just too much um oh yes i forgot one thing let's go we actually haven't talked about my plugins so plugins are everything right in gridsim so i have google analytics at my id everything works it just looks at your router whatever url is there it sends uh you can do some some event binding also of course but i didn't care for that then i wanted the size map xml i add the thing done i wanted pwa i add this stuff done i wanted to use purge.css because i might have css that's not used on a certain page put it in like that i literally don't configure it works one last thing that i also wanted is to actually have this component the style resources loader so in sus i might have variables right but in my few components i want to use those variables in my scoped css but i don't want to include the mixins and the variables every component that makes no sense it's shitty so the style resources loader actually does that for you so in this config you can actually extend webpack and add a rule to actually load the style resource functionality for those file types and be it worked so if you want an rss feed or you want whatever you add a plug in works this is just cool right so i didn't have to build all that myself it was there so sorry this was long but if you're stuck around great thanks very much so that was it um i hope you've learned something today as you can see it's not that hard we're kind of dropping back to the 90s to do static websites again but with fancy modern technology that is hyper performance super secure and pretty awesome especially because all of the tools i used are free and of course when you want to do enterprise level or other stuff it's get more expensive but actually anyone can do this if you have a bit of knowledge of front-end frameworks and the kind of like what does the cloud do this is actually a really viable option for all of us out there so thanks for watching and i'll see you next time you