Magical combination to build a modern website

hi i'm tim and today we're going to be talking about the magical combination for making a modern website [Music] so you can either be watching this video on youtube in which case please subscribe but you can also be watching this at one of the meetups of conferences because this video is actually made for a conference it's one of those pre-recorded ones but i'm making sure it's not too long so you can also watch it on youtube so anyways let's get started because like i said this is for a conference right so let's start about telling a little bit about me i am tim as i said i am dutch i'm from amsterdam but i live in paris and you can follow me here on twitter or that site i don't know where i'm going to put the camera yet anyway so i work at vaultec where i'm a director of front-end development and i'm a media developer expert at cloudani so let's jump right in so what the hell is a modern website well i guess a lot of people have a lot of opinions on this matter but i'm i'm scoping it this way and we'll change it up a bit later as you'll see so a modern website i think is rich in content it is progressively enhanced it's very fast it's eco-friendly that's a big one and it has great seo but also great accessibility um it works offline and it's secure so that's a whole handful right and of course i haven't covered everything but i think there's also more to this story because usually especially where i work i work with big brands and global platforms generally websites are part of a wow that's a mouthful a digital experience platform so a digital experience platform is kind of a set of tools that create the end user experience but also the business users experience and the content editor experiences like the whole platform of the whole website and so inside this is content management there's marketing analytics personalization a digital asset management search there's this whole thing and even on ecommerce there's even more right so i wanted to show you here this is a very minimal version of what one of those platforms can be right so there's a cdn there's a build there's an api layer there's a front end that's right behind the cdn there's design and dev tools like from creative work but also to any sort of tool that makes you be able to work on that website and then of course we have the cms which has personalization digital image management then we have search user data analytics and like i said if there's e-commerce there's way more and so i kept it light because it's going to be a pretty big slide and you know what generally or traditionally all of that stuff that we just saw is in one system right so we have wordpress drupal sitecore adobe aem we have episerver there's a lot more and not all of them contain all of this stuff however if you look at an adobe aem ecosystem all the stuff we just talked about it has it same goes for sitecore and wordpress and drupal are slightly smaller but they all kind of encompass a whole bunch of services which is really great right it's like your one-stop shop but oh no no there's no but just yet we actually call this best of sweet all right so it's a suite of services within one big block there's the butt the future actually looks quite different in my opinion we're going to be able we're going to change that system up a little bit right we can also build a digital experience platform by using best of breed and so just now we talk about best of sweet but best of breed is actually a different approach to things like a suite is a suite of a whole bunch of tools but a breed is kind of one block right so if we now look again at this graph if we can replace all of this stuff with best of breed solutions rather than the tool from one big suite right your cdn could be netlify or for cell or you have github actions or you know in gitlab you have probably have something similar your api can be lambda functions you can use figma as a creative tool you can use cloudinary as a dam you can use hotjar or anything else for analytics then user data we have something like gigia we can use algolia or coveo for search and we have prismic or contentful or whatever or we have next gatsby next whatever you want right so you can basically create this digital experience platform but then kind of put it together like the puzzle that you want it to be rather than just going to one big system and say adobe i will pay you one million you give me everything that is a really valid option for a lot of companies but for websites that are slightly different or in my opinion what can work much better for the end user is when we can choose and pick all the best of breed systems right so this is where my website comes into play the website i built just now you know what i work in this big enterprise system right and i constantly have to talk to people clients ctos whatever about this kind of stuff so i just wanted to build my own site with those best of breed tools to actually figure out what is actually this magical golden combination for a modern website right so my website was built only with the best of breed tools and of course my website is not a full digital experience platform but you know what it has a it has kind of a part of it so let's talk about my website for a second and then we'll just dissect it and go in each chunk to see what that chunk does and how it's combined or how things connect up right so my website is built with prismic nuxt algolia cloudineri and furcell first things first let's have a look at the performance this is my website so let's have a little scroll about so you can see um what all the stuff is about that i'm talking about so i have a bunch of pages you see it's relatively rich but it's still a simple website you see so we have some cool things like some faceted search [Music] for videos and there's like video pages here everything is loading lazy it's really performant i've actually had to add those animations because otherwise people wouldn't always see that the page change because it's so fast right so um how about because you can see here on my lighthouse it's already open so let's just run a report and see where we are at as you can see this is the live website it's timbenix.dev you can go there and do this now i know i have pretty good connection i have a fast computer so we actually just hit 100 and it's including clear storage and simulated throttling that's that's not a bad score um however i'm a nerd and i spent a bunch of time on that and you know what this morning it was still 99 on performance and for some reason now it's 100. it is only makes me happy because this is you know i'm i'm recording the video now anyways um i'll leave it at this for now let's go back and actually dissect all the pieces that make up this website so let's start with the core of the website um so i always have enjoyed using next um i've had some side shows going with gritsum and other things and in the end i just came back to nox because i just enjoy working with it it has all the black box simplicity that you want but if you wanted to do anything um that's a little bit out of the ordinary it just gives you the options and you can just run with it and you know what i did a little bit and so that is actually super cool and i'm using 2.14 which has like super optimized target static which means my output can be a static website and it has like a crawler to find all the pages and i don't have to do anything super complicated to get a statically generated website nux works really really well especially when you like the view ecosystem right so i wouldn't have it any other way i am next next part so for hosting building and deploying um there's a bunch of options out there but you know what i actually have a jam stack website so whatever comes out is fairly simple it's just a bunch of files if you want to scale up because it's christmas time or black friday um if you have a gem stack it's just a bunch of files so you just put them on more places on the cdn and it's fast this is cool because of that you can also not hack it there's not really any sort of php controller or a java thing that you can hack it's not there right so to host build and deploy i used first cell so let's have a look at the first cell interface so i can show you what it does i know a lot of people use netlify and i was one of those i used netlify all the time and at one point someone told me i think it was maya shavin um you'll find her on twitter she works also with cloudaneri just like me she's awesome and she said tim why don't you try for sale for a change like okay let's do it and you know what it's just seamless the thing works it gets out of the way and it just works right so this is the over view of my page you can see it makes a first cell.app url for you even based on specific builds so you can also do previews if you want if you have a different branch that just ran you can actually see a branch preview of different code so for cell is connected to github in my case and when there's a change on a certain branch in github for cell will just grab the new code run a build with next and publish it to the cdn edge right so when you when you look at deployments four hours ago i did some updates because you know what i need to get a high audit score um it actually just ran nux generate here and that works really really well um so you can also see a bunch of other stuff here like for example my domains are actually also here so for cell takes over the dns for me which is like they they're a really modern platform and it works so well i literally add something and it just works um i've had a lot of bad other experiences with dns and hosting and stuff and these guys just make it seamless and there's also integrations so i run a lighthouse every time i do a deploy i don't really look at it but it's really interesting because you can also add slack or whatever you want and so it's really an interconnected thing and so yeah this is actually a super cool oh it just loaded my own website it's a super cool simple and out of the way system that i never have to worry about every time i publish something in the cms it updates something every time i push some code it updates something how that all works we'll get to a little bit later in this talk okay next subject next up on the list is content management and this might not be a surprise for anyone um i like prismic i've used prismic for a bunch of my projects and i intend to keep using them of course there are a lot of different options out there for headless cmss i think you can even go to headlesscms.org and find like a list of 100 maybe even more and all of them have different features like for example i love storyblock i love contentful they just have a different angle on the thing that they do i enjoy prismic because it's so simple and it also has a bunch of features that even huge enterprise systems haven't covered right so let's go into my prismic dashboard so i can show you the things that i like that might make you choose prismic as well and no i'm not sponsored by them however their ceo actually gave me this amazing microphone so big thanks for that sadek um i just wanted to plug you in there i don't do that often but i think it's important not because i'm here to say how awesome prismic is even though it is i think it's important to you know highlight people that sponsor you sometimes so the first thing that i really enjoy from prismic is of course it's headless but it has a graphql api and a rest api that are both super solid it's fast it's secure it just works there's no quirkiness around it it's just it works there's a really cool community so if you have any questions you ask and like within the day you have good answers the next thing that i really enjoy is well let's have a look and go to my homepage as you can see um it's a it's a very simple interface you can model your own data so in the home page i modeled that i want to have a main title a subtitle and a structured text an image stuff like that so the basics just work however the next bit that i really enjoy is something that they call slices and they actually created a program called the slice machine which this is using so i have a very simple implementation of slice machine but what it means you can actually add different slices of data to your page in this case i have a hero banner if i if i wanted to add that i could actually add add that in here i already have one so i'm just going to remove it for now so here's my hero banner but i can also add let's say my top videos right so i can actually say okay let's just move this here and or maybe i want to add another video and you can select one um so there's a whole bunch of stuff there that basically makes your pages are now component driven rather than just being one big page like in wordpress for example and of course you can do anything with any system but this works so well because as a developer you can just choose to model your own slices or components and then move them around like i can move this one down and now actually the high there i'm timber next thing is now below the top videos or i can move it back up let's let's keep it back up i guess i don't want to destroy my video just for a talk or my web page um this is really powerful and they have built something called the slice machine which is more like a front-end framework and a cli extension that will be that let you locally when you develop create a slice in the system and then create files for you in your code that represent that slice and there's like one big view object or a few component that basically just queries your page based on the on the uid that you set and it will actually return which slices that you put in the cms and it links that to the component you have in next so that way you don't have to know which components are on a page because the slice machine does that for you so that slices part is super super cool and now on to the part that a lot of okay this discard my changes that um a lot of big e-commerce systems or big cms systems haven't tackled like generally like some most of my pages don't need all the different slices like this is just a blog page this is the sponsor page that i just released right i always have a title and a subtitle but then my content basically houses a lot of stuff right i have my text but then i have like an embed i just put in if i wanted to add in an image here that's actually very easy i just click on image add it in and there it is and this looks like super simple right but actually this is all done in a rich text editor and rich text is a super hard thing to do for a lot of cmss and these guys just nailed it the main thing that makes it so cool is that all of that data in the rich text is represented as json on the front end right and that means you can just query the json or or loop over it and then build your own html from that so you don't have to rely on whatever crap comes out of a rich text editor in any other cms this is super super strong and of course they built a next module so i just plug in my next prismic module as i read this text and it just reads it and it creates html for me but i can also say no but when you find an image make it lazy and this is the html you have to use so now the frontend developer has all the power and you know what prismic you rock because this is all i need this is like yes um okay this is getting quite long now because i'm quite enthusiastic as you can see on to the next bit the next part we should discuss is searching and filtering because in my line of work almost every website we build has some sort of product list that needs to be filtered with facets and numbers of how many things will show after you have filtered it's a complicated thing to do and every time we build a project we seem to misunderstand how it works or people don't they want something else of what the tool does so i thought i have a whole bunch of video content right why not just put a list on my on my website that i can filter through just like i would do on the major websites i work on at work and so for this i decided to use algolia um actually funny enough not even because i knew what their capabilities were but they have an office in paris and i thought hey algolia i saw them speaking conferences they're really good and they have a french office i'm just gonna try it i'm starting to become quite french now because as a duchy i wasn't nationalist at all anyways without further ado this is the interface of algolia so basically what algolia does it has an index of my videos and what it means in searching if you have something called an index it's um it's kind of a little database of stuff that you can search through really well and each field in that database has a specific weight to if you if you match to it it signifies a certain importance right so in this list here that you can see on the screen there are all my videos right you can scroll through and these are the fields that i decided to put in so i have object id this is kind of the the uid for algolia itself title tags image slack publication date and modified so basically what i do right now if you go to my website and you look at the videos page this list here actually comes directly from algolia so i don't query prismic with nuxt to show this list i actually ask algolia give me the list without searching right just order it by date and the ordering you can actually set up in algolia and then when i click let's say conference talk right now it's two with this video it's going to be three later on so you can see that as i can actually filter really nicely and all of that this does is calling the rest api of algolia and then show it on the screen actually i don't want to go much deeper than this because this just works really well and the main thing of what i love about it is when you look at the code here i actually use the algolia view package so you can see the algolia instant search component then this is one wrapper component that looks at my videos index right and then it has a refinement list then it has a stats object then it has an infinite hits and what that means is we have the refinement list we have the stats we have the infinite hits and then it means infinite because you can keep clicking until there are no longer any videos anymore and you know what they wrapped it up really nicely and put a bow on it and gave me those components they just run with it right they use really nice sculpt slots so i can basically coat whatever i wanted put that stuff in and then tree shake it and put it in next and there's my search that's amazing so now we go on to one part that's slightly more complex in the video because how do we get the data from prismic into algolia so it can actually deliver media search stuff because my website doesn't know about that stuff everything is headless it's like it's really a composed digital experience platform as we discussed right so let's get into it this is a bit of the part of having this best of breed solutions that is actually the hardest bit of orgasm organizing an experience like this because actually all those services live on their own their whole goal is to not not really know about each other so the point is you have to orchestrate them right you have to make sure that those services sometimes talk to one another to be able to show something nice on the front end because you don't always want to have all the knowledge and the state keeping in the front end because you know what it's a jamstack site it shouldn't have all this dynamic stuff right so generally what you do is you use webhooks and lambda functions or function as a surface like small functions that live in the cloud that don't know much but can just do simple things right and this is how i have solved how when i click on publish in prismic my website gets redeployed by for sale but it's also when i publish in prismic that my algolia list is updated right so if you go to prismic you can see i've set up some webhooks so i have one web hook set to furcell and one web hook set to algolia so when you look at that is basically it triggers when a document is published when a release is created stuff like that right so when i publish a page it will actually use a web book to call for sell saying you know what there's an update in the content please rebuild the website and the same goes for algolia so when i publish a video i actually in this case i am calling timbenex.dev slash api slash prismic to algolia so i use the webhook from prismic to call my own api and that api i have actually created with the help of furcell which is this bad boy so basically what this piece of code is doing is it's called by prismic and if you do slash api and then a file in this case prismic to algolia.js for cell actually says hey there's a slash api you probably want that to be some sort of function so it grabs that stuff or that file uses it as a note script and puts it in the cloud for you on that url so slash api slash prismic to algolia so that is so cool from for sale and i know a bunch of other companies do the same stuff however this worked so well there was no setup i literally had to do slash api and just code something so i coded here an async function that basically connects to the prismic api and it connects to algolia search so kind of what it does is the moment i hit this thing gets hit it will find from the prismic api all the documents of type video and it puts them in descending order right and i just do page size a thousand so i'm just gonna get all my videos and then i map those results to the fields that i have in my index in algolia remember when we looked at those fields here in algolia we have title tags image slug stuff like that that stuff is actually here title tags image slug publication date all of that stuff is here so i map the data from prismic to an object that is basically my whole index in algolia and then what i do i tell algolia okay videos is the index i want to use and then i literally just save the objects um with the stuff that i just made so and then push it to algolia so what i do is when you hit publish i query all my videos including the new stuff right and i just replaced my whole index in algolia and you know what because i don't have many videos this is easy right if you have 40 items this is like 3 kilobytes it's all good you can also do incremental updates right if you have like 50 000 items in your index like when you're tailwind and you're using that to search with algolia you're not going to want to replace everything so you can also do just add one but this simple function that's like under 50 lines basically is the glue between all those systems that i use and the moment that thing is updated it is also updated on for sale because of course when i hit save on prismic it it does this function that we're looking at now here but it also does a new build in the code on for cell so every time i hit publish in about i think probably 30 seconds my website is updated and the videos run so this is the only bit of complexity in the orchestration of the architecture but further on it's not that hard you just have to get into it okay to the last bit now so the last bit of the architecture is actually the images and if you know me a little bit i am really into media delivery right if is it responsive images file types performance all of that stuff it's super super important so for me a best of breed solution for media is just so important right so i chose cloudani and that's probably like i'm captain obvious here because i have worked as an mde for cloudenary for a while i've used their products for years it's awesome and there are some others out there that actually do really well but i just like cloud and airy that's why i used it they they are basically the market leader so i'll show you um cloud in area itself and then i'll just try to explain what cloud and area actually is because cloudinary again is one of those um cloud native sas solutions that has a media library as you can see here and so they have some media or digital asset management system capabilities that they're kind of pushing hard on that at the moment but where they really shine is the output of assets right they have a really cool api on the url if you go to my website and you check this image here let me just open it in a new tab you can see um aspect ratio 16x9 crop fill file type auto quality auto with 900 all of that stuff i actually add from my end because i know at that point that's the image i want to show interesting is that if you use prismic you actually get your images from images.prismic.io if you look at that [Music] let's go there well not that let's try that again yes there we go so this is whoa whoa that is a pretty big image and that's the image i get from prismic and they use image ix which is really really good um however i like cloudenary so what i actually did i worked with maya chavin again her name is now twice in this video that built the next plugin for cloudinary and cloudinaria is this amazing fetch feature right so if you look again at this image you can see that i go to cloudanary my account image and then fetch and you can add any url behind that um to fetch and add it to cloudanary so this is kind of how i hacked to get around the the prismic image stuff that is actually decent if you use prismic just use those images right i'm a bit special i wanted to change that but because i can use the fetch any image you see here would normally be rendered by prismic but because of my code i actually just concatenate the url in such a way that this little image here oh that's not the image where is the image this image is actually prismic but i get it through cloudanary and cloudenary is just um amazing in optimization and all of that stuff but this is not really a culinary talk so i won't go too deep but it has a lot of cool stuff and you can see using fetch all the images on my website just end up here so that was it for images um i want to thank you for watching this talk it's a i think it turned out to be pretty long we'll see in edit thank you very much you can follow me on twitter or if you would maybe subscribe on my youtube channel and just now since today or yesterday i actually have a buy me a coffee page you can see that on the left bottom here and that means you can actually sponsor me or send some donations because i do a lot of work in the community and i want to just take it to the next level so please consider maybe donating of course if you don't want to definitely don't do it it's up to you i'm just here to see if that works and it seems to be cool people seem to like what i have to say so again thank you very much for watching and i will see you next time