CDOBC Lesson 4: The DXP Tech Stack Overview

[Music] well welcome welcome to the composable dxp with uniform boot camp course lesson number four the dxp tech stack overview presented by tim bennick's principal developer advocate ad uniform if you want to learn more about him just watch the great interview i did with him in the introduction section of this course on headlesscreator.com with that said i'm gonna get tim here tim welcome glad to have you back for those of you watching live you've got a comments area type your questions there and tim it's all yours all righty thank you very much all right so today we are talking about the dxp tag stack and its overview and i actually want to talk about that because if you look at the dna of a composable architecture the technical choices that you have and should make are quite different than how you would make them um originally basically and so it is important because if you go to the next slide oh yeah my camera is a bit overlapping the little words there you go thank you marcelo we are living in a composable world and i've put this slide in a couple of decks already and um it's pretty important thinking about this because what we are doing currently is we are living in an origin-less era and what i mean by that is the fact that traditionally lots of system had an origin server which would be the center of the universe of your architecture right so your cms talk to it and say okay this is the data for that url and then your it would go to the database and i would come back to it and it would be the web server and come back to it and every time a page needed to be rendered go to the origin server that's where all the magic happened took a while then comes back pages rendered and nowadays we don't really have this anymore it's much closer to actually decentralizing everything and so it's composed and so with that in mind how are you going to host your front end what kind of architecture are you going to use if you don't have this central server anymore where this front end can live right and so as the slide says this is the new era of origin less and so we don't have a center of the universe anymore and so if you look this is a slide from 2020 i think so it's quite old and these are all the players in our space that are doing headless related things composable stuff and so these there must be thousands of products here that are all api first component driven without an origin with their own cdn instance basically and so we get to pick and choose from all of these and then build our composable dxp and so everything on that list that we just saw is api first right and so if you look at how we did it traditionally like i just outlined a little bit we we have the client that then talks to the web server that then talks to the application server that then talks to databases and cms and other things and as you can see it's actually built up so if one of these things doesn't work the whole tower will collapse and everything just dies and the thing is this is nice and easy to understand but it's also quite limiting and challenging because if you want to scale something up you have to clone this whole thing and then make sure that they are in sync together that's quite challenging but you want to see something that's actually more challenging this this is the modern web right where we don't have that chain of things because we don't have this origin anymore so they don't think don't depend on each other they're almost more like interlinked or interconnected and so you have multiple web services that all have their own cdns and on the cdns magical things happen and you have other places with different web servers that have all their own things and you have multiple endpoints because you don't have just a website now you might also have an app or you might be showing something on a train station whatever there's multiple endpoints multiple clients but nothing goes to the one thing that knows everything so how do you then actually host your front end and how do you manage everything and orchestrate it well like this how do we actually build a site in this origin less world we use the jam stack and uh a lots of traditionalists might not like these words because they might not have be used to what the jam stack actually is and isn't this just like this super fancy hip kids front end thing no it's actually not it's much more than that and it's almost like how you build websites now and the best thing is that the gemstack is basically a modern web architecture or development architecture based on client-side javascript reusable apis and pre-built markup and the funny thing is when you read this this kind of sounds like how we used to build websites but there's a pretty big difference because real quick question on that yes if you go back to slide because one of the things is like then people can go and like okay it's javascript but i'm not a javascript developer and i thought the promise of api first and composables i can pick whatever i want right but jamstack i think is sort of an architecture that started with javascript but i believe and correct me if i'm wrong because you know the stuff better than i do but i believe with jam stack now you can use different languages correct it's more of the architecture as opposed to just javascript and you know what's the interesting thing is that i think when these types of architecture started it wasn't with javascript we used it's a while back i'm a bit lost for what the name is again but it used to run on github pages back in the day got it which actually was oh i'm stumped for words because it's so long ago but these systems for github pages they would create you a jam stack website and the j of javascript was out it didn't exist then that only came a bit later because javascript was so much more prevalent and you jam stack in the end what it comes down to is the word pre-built markup right that's what it in the end comes down to the fact that you pre-built things and then serve them on the cdn so not on this origin and however you pre-built this thing i don't care you can use javascript you don't even have to use apis in the end of the m of jam stack is only this the only thing you need got it but there's so many variations because you can also do jam stack without pre-built stuff but it's a single page app that this ajax calls and creates the html on the fly but not runtime of a server then what is it is it jams like maybe right so it's kind of a volatile term that goes all over the place right so i think the key takeaway here is don't get stuck on javascript get stuck on the methodology and the framework of what you how you deliver pages as opposed to like wait a minute i don't do javascript why do i have to do this now right exactly and the thing is right now lots of these bigger meta frameworks that are front and driven like um nuxt or next or gatsby they all use javascript because it's so easy to use and there's so many people but you don't need it and so let's go a little bit back to the slides to like the crux of what this jam set thing actually is because we are doing certain things on build time and other things on runtime and this is where it's significantly different from what it used to be right and so all the kind of api calls data mapping queries that you do dynamic things that normally take time from a server you do this during build so you literally say okay my code is done or my content is gone i hit save and then the cicd stack your build tool chain will actually notice that difference either from content or from let's say your git repository and it will notice this different and then start like maybe even it starts up a docker it builds your whole system and whatever comes out of that gets uploaded to a place on the cdn edge and what comes out is a pre-built website like we had in the early 2000s where we all built html files and ftp them somewhere well now we've kind of like supercharged how we do that with really fancy new tools plus a bunch of things in between that make it more fancy with hydration of javascript and other things but essentially we have basically made this system where we would build simple websites like about us dot html blah blah blah that would then be uploaded somewhere we have now supercharged that with great front-end tools great developer experience and then it would be put on a cdn right and the client so the end user that works goes to this website actually browses static html files and of course not everything is completely static but we'll get there in a second but these kind of this is just a paradigm shift from an older paradigm right we we're go you can see that the tech world is going up and down in different things and it's just right place right time for gemstack right now because it can live on the cdn it doesn't have to be an origin server and so basically just coming back to it in the traditional web you have all these steps that it has to do and the page is basically white while it's doing all these steps or you're waiting for the page to come back up again and if you then go to gemsec it doesn't have to do all these pages because these steps it just goes to the cdn and comes back and the page is there because it's already built and then of course there are also web services around that you might query once the page is there right you might want to show a product and the product is pre-rendered because you know that product is there on that page but the stock and the price might actually be fluid right because these things change so you could then do an ajax call to one of these web services that gives you back the stock or it gives you back how much it costs or how much discount you could get based on your profile and then it just enriches it so this addresses that question well jam psych is always static and my page is dynamic i wanna so this one is basically you're saying we get the static page from cdn but then we can hydrate it with dynamic data through web services exactly and we'll get into that dynamicism a little bit more later and this is where sometimes it gets a bit complicated because the hybrid approach is always the best result but it's the hardest to get right right because the fastest page is just static black and white nothing on it but the best performing page for conversions and people want to buy something is super rich and enriched with some data later on but that is kind of hard to do and so you can also go full force further down and have everything dynamic as a single page application where the whole thing lives in javascript but then it's last fast on first page first page loads because then the html is not there so it first has to download all the javascript it has to do some smart things in the browser query some things and then build you the page so in between these two is generally your sweet spot but it's pretty darn hard to get luckily these meta frameworks out there for next and next and remix run for example is a great version for that nowadays or svel kit they take the sting out of how complicated that is and help you with it and that's why the gem stack is so tied to javascript frameworks now because they just do it for you and now you don't have to have all the knowledge that i have to actually build a great website because i came up when we didn't have this i came up in this ftp time and we just had index.html right and then we went through all the steps to get here and now all that knowledge sits in these new meta frameworks and that's really cool but like you said just now marcelo it seems awfully static right and so other than doing javascript related things to make it more dynamic there's also two more things we can look at and this is the great thing about composable dxp or mec alliance like technology or however you want to call it cdns are amping up what they can do like back in the day a cdn was just a caching layer and then cdn started to do maybe dns routing for you or domain name hosting or ddos protection and then they started to do other things and now they're so far in that on the cdn edge and the edge is the thing that's the closest to you as the user they can start to do things like edge compute or they can run serverless functions and so let's get into these a little bit edge compute has different names in different places but what it essentially does is when you load one of these static html pages right before it loads that page on the cdn edge there's some smartness going on which actually routes the user through something that's dynamic some sort of functionality like on the edge and you can generally choose the language and we tend to choose javascript or node.js it goes through that and then if you don't do anything it just renders the html but if you wanted to you can change the stream of html that is rendered on the page through that function so you can check hey these are the cookies that that user has let me now do something or maybe in the