The Modern Digital Pipeline - The future of Jamstack is composable

all right we are live are you ready to rock seth ready rock let's do it all right so um welcome everybody um and hopefully some more people will drop in over time we spammed the internet with this live stream so let's see anyways so for today we actually want to um redo a talk that i did in barcelona last week where we are showing uniform and how you can kind of cable manage your architecture um but with next three and really bleeding edge technology because why not right so seth what what are you thinking um will we have any mistakes will things break like this is like proper bleeding edge alpha stuff what do you think i think i think today is the day where everything's gonna go perfect oh it's one of those days where it's all aligned right yeah yeah oh boy i cannot wait um well let's see right let me just share my screen and then we'll start with a bit of story which is not too long we'll get to coding quick but i just want to go over some basics so we're all on the same page all right so let me just add this to the screen and there we go and so um i googled jamstack to make this talk right and then i found this product and seth we're both musicians right so when you see a product like this what do you think i think gimmick oh yeah i cannot imagine this is any good no like like for the people who don't um know what this is this is actually when you play electric guitar but you don't plug it into an amplifier it kind of doesn't have much sound to it it's it's all there's no echo chamber in the body it's just a wood so there's not much sound and so you can kind of plug this thing in and then put your phone there and do something with some effects and then put your headphones in i can just not imagine this is any good yeah who knows there might be a market at least it gave me a ton of images for this talk so maybe that's that's all we need all right so what i want to talk about today to get started at least is the future of compostable composable architectures as in let's have a look at when you go forward and you're gonna scale and you have all these headless tools how do you actually manage that in a nice way where not just tech people live in it but everybody right from developers to marketers to whoever and so at uniform we have a nice solution for this so it's a nice way to demo and so on top of that i want to kind of show you in whatever flavor you like your jam stack how next three will be able to actually deal with all of these flavors in a really really cool way and this is where the bleeding edge part starts because we actually have alpha packages for uniform and next we're using edge workers at cloudflare and edge at netlify which is all kind of like is it done we don't know but we'll go for it kind of stuff i like that trying to get it as close to the user as we can exactly and look this is yet another iteration of the jam stack which is the same name same company yeah so i'm just another copyright infringement happening here it looks like yeah i think this is probably the same company but anyways so um basically you will we in let's talk about the new technologies we're all using right we're all on the architecture level at least all doing this headless stuff and there's actually a little dilemma going on in this new world where we all think hey this is awesome we now get to choose as developers there's actually some stuff going on because when you're building a tax tag from a headless product it doesn't actually mean that you end up with like a proper nicely composed architecture actually using atlas products gives you the potential of them being like connected in a nice way but they really are not when you get started right and so when you work hard at trying to make your ecosystem of tools into something um you are actually a composer you are the composer of your own work here right and so basically it's really hard to integrate things in a nice way and so when you want to compose things together it requires this integration to be super easy and lightweight and loosely coupled but the hardest thing to do is make an easy integration and so it's just challenging to to get all this stuff there and a lot of projects now from now until like next year are going to be like this we're going to just put stuff together and see what works because you kind of start with what you know and like okay how do i now connect these two systems together well let's make an integration field or do it in the front end right and so as a developer when this grows you're gonna be like hovering around fire all the time and so because you you select your own selection of tools all the stuff that you love right headless cms atlas commerce whatever front end and damn system anything and then so it is from multiple fenders so it's already much better than the monolithical systems we had let's say a few years ago but you interconnect them all and you can now no longer take one out right so generally what people do nowadays it looks like this the cms is in the center and you plug a whole bunch of things to it and then you interconnect the crap out of them to make sure that something happens on the website and content editors can actually do something because how do they hop from your commerce to your personalization to your damn right but you cannot just remove one thing now because imagine you have four cms instances which a lot of bigger companies have are all these things then also connected to all four of them and if you want to change one thing it's basically impossible yeah right and um yeah it's it's kind of a shitty situation that a lot of people don't know they're gonna go towards just yet it's it's hard to see that when you first start but then a year later you're like what's going on yeah and what you have effectively done is now you have now created your own version of wordpress but then with different systems or your own version of whatever monolith we want to throw at this right now you cannot point the finger at a company now you have actually done it yourself that's just kind of silly and so what you are actually doing is you're doing all this lovely lego and you're just gluing all the pieces together you can no longer use that lego it becomes a nice stature statue but that's what it is you can actually not reuse anything of this all right so what we do want is something like this you actually want to choose your own tools from these multiple fenders also connect them but still in a way that you can remove something or add something right so here on the right side you can you see how we do it at least what i think is a better approach where you have all these systems not around the cms but all on their own and they're all connected to like an orchestration layer for content editors no code like stuff but they're also all connected to some form of unified api layer that just gets their data maps their data and then sends it to the front end because if you want to add like another cms here why not you just add another one or you you just have to change the one line right and the whole system still works this is what we want and in a second when we start coding we're actually going to do this oh we actually have prismic in the house hello press mick what is up um i should say that we have a really cool integration with prismic for both personalization and our um canvas integration and uh i wish i had the demo with prismic for today but i don't next time next time thanks for joining anyways so basically um this is what we're going to be building in code in a second and now that we have prismic on the line it's going to be very interesting for them to see well ah now now i see it it's lucy actually on the prismac account and she just made a little boo-boo but it's all good so lucy you'll see the code here for what we have done in nox3 it looks quite a bit like how you might go that yourself and then we have daniel in the house from next so now we better do it right so let's continue talking and see um when i start coding if we actually get this thing so we want this right rather than the other messy thing because now you can just follow a cable the number you plug it in anywhere else right yeah so we haven't actually talked about that whole gemstack thing and for the french people around they'll know what this is because bon mamong is like one of the nicest jams we have here well it's like on the shelf but it's good and it took me a while to to photoshop this a long time ago i think i should photoshop three years ago now you can see that jam is still with capitals anyway so let's talk about how gemsec fits and yet another amazing gemstack picture that i found so let's talk about the future a little bit and what that looks like and if it's still jam stack at all i don't know right but i think whatever comes out of this especially when using nuxt and edge it's going to be purely magical it's already so cool it feels like it yeah and so jam sex still really fits because all these things we're putting together they're all api first right they all have their own little cdn there's no center point at all and so all the magic that you would be building happens on the cdn in whatever form that might be and so there is not one server anymore that has all the knowledge and then renders a few and dispatches information and because of these things even though jamsec is changing a little of whatever it may be next month that paradigm fits really well with that right so especially and with next three now most of these spectrum items are completely covered right so you can basically choose a rendering mode that you like you can go fully static you can do some hybrid static with like some ssr and then some static will show these variations in the sec and of course you also have edge side rendering and we also have a few variations of that one so um i won't go too long about this but we can do all these kind of flavors right and so what we like to do is on the left side you have this kind of no code interface we call canvas and you can plug in all your headless sources and there's prismic for you so they are in fact losing you in here and so you can choose all these sources build the composition and then you have a platform preview thing that we've built with websockets and then you push it to your cdn so this is more on the the content editor side of things and then for developers you can query that no code composition and then use our middleware or however you want to call it we call it you enhancers you can get that stuff map the data and then push it to next and then go to the cdn and so that means um whatever source you plug in you map the data slightly differently and i'm going to show off that in back in the code right so where are we going so it's super flexible it's almost too flexible and that's sometimes very interesting like how do you sell this thing when you can do anything you want right right you can and that's why i just we just made this next three thing that runs on edge compute and it's just fine so are you ready while i try this let me just have a classic classic meme well when i did this last week at the conference it all went well up until i had to use dino and matlify and it just said no yeah there's nothing no error as these things are always right so before actually coding something not everybody has seen this some of the people watching might have um basically this is our dashboard and we have a few and this is the fuges road trip barcelona talk that i'm doing so this was like from last friday last week and so we have a few integrations running here already and so today we're only going to be using would be nice if it loads there it is bigcommerce and contentful but that could have just as easily been prismic cloud and airy like you have a whole voice we even have cycle order cloud look at that yeah and yeah yeah well that's a new one well they're becoming composable right so if they are we can just integrate and so basically um in uniform you have canvas and in that you have compositions and so compositions are basically an empty canvas in which you can paint with components that you configure and these components actually show whatever um source you are pointing to inside these components and can you show those components real quick yeah sure sure so let me just quickly go to the component library and so here i i have really simple project right so i have a hero component a page component that's the composition and the product and so the hero component actually has a parameter yes if it loads there we go my 4g is torturing me at the moment here we go so basically the hero component has an entry parameter which is in fact connected to my um contentful conference hero content type so how that works i'll show you in a sec but first let's see what actually right now i just added one title right let's see what this looks like so i can just hit preview and now this is what's running on my local host you can see i just i supported preview this is actually a next three app so let's put these two side by side got it and you set up the front end to show the json there right that's part of the yes so what i've built this is like a little app and on the left side you see the state of this composition and on the right side you actually see your front-end components and whatever it comes but normally it would just be the page but you happen to have the markup is the actual json yeah i i literally made a component in a few or next component that shows this just because i just want to see it because it's exactly we're going to go through step by step how to morph that data so components end up on the right side yeah and so we've now turned on preview mode with next three which works extremely well you can see the little lightning mark here on the right top it's a little small in the stream but like if i now just say view js and hit save here um when it's saved there it is 3ds road trip and so this directly updated and if you are now running let's say on netlify or wherever in production you can also set that up and then you can basically just with your production code c preview it's quite similar to how prismic actually solves this stuff sure um and so well let's keep this and how about we just add a component let's add a hero component and so um here let me select developers and let's hit save once this is connected yeah and let's go one step back when you hit um add a component it you can control what components can go exactly yes you can yes so next time you add a component yeah hit the plus again and let's just see so you can kind of there you go so like you're as a developer you can set up parameters where your content creators they'll get led down the path they need to be down exactly because what we use if you use if you know fuji s you know the thing we call slots right so this we have the concept of slots as well in uniform so this is the component slot and this is the products slot and you can kind of in this page component which is a composition you can actually say okay in the component slot only these components fit and in the product slot only these so you have a little bit of governance and as you can see i've also added a personalization component here we'll use that after and so what's actually pretty interesting here is that we don't want to actually store any data other than compositional data so we can actually add a variant here because that's based on your composition so the the fact that this is a variant should be reflected in your front end but has nothing to do with what is in your cms because your cms is just domain data right yeah cms is just data and this composition allows you to control the look of it exactly so we are not a cms but we do store compositional data and i just wanted to say that so when you have a look at what we actually store it's just this right now right this is my composition i have a slot for components with a hero component with an entry id with variant meow and of course the title on the global component that's exactly what you see here but then i just made it nice black and green sure and so you didn't see anything coming here right now so let's actually go to my code and let's see how will i do that yes that's number one that's number two so this is a next three project and there's actually really not much to it of course next three is completely like you don't need to add any configuration to get started so i've had to add a few things so there's a bit more here on the left in the in whatever files we have but it's still really clean so we added a bit of styling just to make sure that we have the left and the right box right on the front end and so we have a uniform dev next module and this is fully fancy modern works with um next three and so here we add a whole bunch of environment variables directly into the model module because we want to be able to talk to uniform and we're all also adding some runtime config stuff for later on in the enhancers when we change the data these are all these are all read only so these are quite safe in here however we did need to transpile some stuff due to some um esm includes especially with some older packages here um we literally just released a new version of our next module where you don't have to do this anymore so we've either resolved the issues or we've just transpiled it internally so you don't have to care sure which is just nice quality of life right you shouldn't want to like i have a few things like when i want to do a jam sex site i have to do this because the contentful package is still not updated anyways so we have a page for multiple slugs right whatever slot you have that just catches here and wow i just had an error here let's not look at that for a second let's just continue let's say it just works so basically here um you see a few things that are commented out so let's keep them commented out that is for later on when we build this up and so we here we have our used composition from the use next app so this is the uniform composable from the module in next and so what we can do and this is actually this just comes back with a suspense so you can also have pending and um error in here for now because this is such a small demo that we don't care so what i'm doing is i'm getting the composition for a slug and currently it looks at the the params of the route and just queries that slug let's have a look and when we go back to the browser the slot currently is just slash yep and so um we're just querying slash at the moment and so what i've done for now is i just from that composition grab the title and that's just the page title now here and i make the composition computed because i get a specific value from that composition and this is just the data part of things and then here that's the json viewer where we just show the composition itself and then here we have a composition component that comes from the next module and just to review the json viewer it can be seen in the that in the composition yes right but you're you're doing it now just for demo purposes in the front end yeah because normally of course you don't have this this is literally just to show you the state of whatever just came out of this thing and show it again in the um uh composition show where you find that data in the drop down oh yeah sure so that's literally this yeah yeah um however i can see now there's no slots here so there was some error just now didn't we see that so let's have a look i don't know what happened there let's just restart it yeah let's turn it off and turn it on again let's do that first yeah that's always the way to fix it you see it fixed it i don't know why i'm happy now i probably changed something in the config or something it's all fine so basically let's quickly continue so um we have this composition component and you give it the composition and what this thing does is basically like a provide inject it does some magic to that composition and then injects it into whatever comes in here and in this instance it doesn't look like much right it's literally just the title that we render here in the browser this one but we will want to use that a little bit more later um how about um i just start uncommenting something so we start to show some components let's start with this one so basically what this is doing here so this is still the same composition component but we're showing a little bit more so let's first have a look what you see on the screen now um so you can see there's a little bit more happening on the left side it's still the same it's still just the id so we haven't actually enriched that enhancer or that component but a component started to show right so we have a slot for products we have a slot for components which are basically represented on the left here right components and products and there's actually a component called hero with the free variant meow which we just selected here on the left and it still doesn't show much so let's have a look at that component and also then let's talk about how to actually manage to be on the screen here um so first of all i'm just using fuel field sets for everything because it's just easy to see what's happening on the screen with that sure and so um first of all to be able to render a component we have something we call slot content which is one of our components from uniform which is um quite close to a slot in uniform or sure a slotting view and so also the name it used to be slot there right well basically if you want to do a slot in view you just do it like this no but i mean like in uniform it used to be slot because slot content looks new to me well in react it's called slot okay you cannot use the word slot because it's taken of course of course yeah that's why okay so basically what this component does there's a bit of magic going on here because it just looks at whatever is injected by composition or provided and it just filters out okay i need to show here products and here i need to show components and basically it dynamically creates the component and injects it with view and the way it knows what component to use is here we have something called the resolve renderer and which is just literally a list of components so let's just show this quickly so we call this the component mapping and here i'm just importing my hero and my product component yeah and i map them and if it exists return it that's all it does and we know that next actually does this out of the box as well it auto resolves all these components however if you do that and daniel you might correct me if i'm wrong here later you cannot really do a tree shaking it just imports all of them even if you don't use them and it might be smarter now than it used to be but we felt like let's just give multiple options here because if you look at it resolve renderer if there's a product or component that doesn't exist it actually shows you the default not implemented component component that comes from our npm package right so if i now make a new component in uniform that's called blah blah and i don't have a blah blah component mapped here it will just show you hey this wasn't implemented these are the props that are sent which is quite nice that's nice yeah then you can go back and implement it exactly and so let's have a look at that hero component right so basically because we have typescript we set it as okay this is a component instance from uniform and these are the props that come in is the component and it has a bunch of titles a bunch of data in it you can see i've actually started to make a computed prop for the image in the title however that data is not there yet like if you look here in the screen it's still only my source is the default which is the default space you get from um and this is the entry id yeah daniel's actually helping us so if you enable global components they are bundle split awesome okay so we're going to have to look at that thanks daniel and so this entry id is because uniform is not storing any data from the cms exactly it's just getting the id and then you're going to show how to go query that and then change that data to what you need yes and i think it's about time we start doing that so because we want to actually show more in here so how about we leave products for what they are for a second and let's just make sure that this stuff here becomes something real so this image and title start showing so basically i have something here i made a use enhance composable let's just go like that and just save and see if it works oh something started to happen so that went pretty fast um i love how fast this all works it's super great so anyways um now like we haven't seen that code yet but what happened is when i turned that on suddenly that id and this type default was gone and now the value became fields with an image with a lot of metadata and some other stuff like a title and a whole bunch of stuff that contentful gives you back if we were to have prismic or another system some different type of data would come back and so that is now shown in the field but there's still no image there's still no title nothing because my component doesn't understand this kind of crazy structure yeah you don't want to build component that are specific to let's say an output from contentful right so let's have a look because let's talk about that real quick because like if you do that you're locked in to specific data that structure that contentful returns and you don't want that you want to be able to switch your cms at some point and have the components still work yeah i always say just keep your components stupid right yeah just have a title and an image tag and keep it simple of course in this demo it's extremely simple but that's just to illustrate so let's talk about how we use the use enhanced component here or the um composable here it is again a whole bunch of things are actually commented out and so what we're doing here is you're giving this composition to the enhancer we actually mutate that composition based on enhancers that you give it so enhancer builder is a really smart piece of software that looks at all the parameter types that it are given to it and then you can provide code that does something with that data and so right now the normal contentful enhancer gets this entry id and returns all this json from contentful and so let me just go there for a second so this is the contentful enhancer itself and the way we do this we allow you as a developer to query content for the way you like we just give you a little bit of helpers right so i'm literally calling the contentful package from npm and i basically get some a space id and delivery api key from you know the runtime conflict from view or from next and i just create the client that you would normally use to query contentful and this i give to a function that uniform gets gives you so we create an enhancer with the information that you give it so if you have like five contentful spaces and a preview one and a production one you can give that list to a client list here and then we can do stuff with that and you see like there's an extra feature here like i don't want you to batch query because sometimes that goes wrong if you query 16 things at the same time it's sometimes handy sometimes it's not so you can kind of configure how we query and if you wanted to even change the default query to also get like some metadata you can do that here too and this literally returns and this function that we have with your client information just queries contentful gets you the information it's kind of a wrapper around the api and there is a bunch of smartness built in that like the batching and the caching and a bunch of things you can see here i added an adapter to the client which is a whole bunch of stuff and i only did that because the contentful package doesn't work on the edge with um certain different edge providers it just doesn't work due to an axius issue however that's not a problem because we just worked around it anyways we are not on the edge yet right we are local this all works however we don't want this data we want to map it and that's when we get i'm just gonna comment out otherwise it's just too much writing for me i'm so bad at typing so basically now oh this is an interesting one by the way every time i change something in this composables folder here it returns me a 404 i refresh and magic so if daniel's still watching please help me we kept having this this is the only issue we had now the rest everything is perfect so you suddenly see a title and an image of of course little old steve and that we made that happen because of the following right so we can actually compose with enhancers and what that means is the first enhancer from contentful queries to stuff the second enhancer gets that result and you can do something with that result and in my case that's actually a really simple thing that i wanted so you can you can filter out the data you want you can only you know just yeah control it and so basically what i want to do wanted like this is very similar if you know nux3 a little bit when you use like use fetch or use async data you have a pick and a transform those are options in your query where you can change the data this is very similar to that but then on like a little on like a lower level before it even goes to react or sorry to next or to next sure oh i'm done next next react everything basically there's a few things you get back when you pipe another composition and another enhancer and so right now i literally grab fields from that value that we had before right and from fields i just grabbed title and image and i just returned it as directly title and directly image you can see i even go in here like deep this is not the best code but this is great to just show you um the demo and so what that returns now is it goes from that huge object we just saw to something returning title and image yeah which worked really well because now suddenly there is a title in an image and now our value is title image that's it all right so we've now done a whole bunch of things with data and suddenly my component is dumb it doesn't know anything but the data is matched and it just works so if i now changed my cms the only thing i'd have to change is the enhancer for that cms and everything starts working but now this kind of not only change it but like create another one so it's like you've got oh yeah you can just make another one and you can have two cms's in one component or 15. like we have a demo where we have like 15 cmss for one component you can switch them out and it just works which is really fun yeah it's not useful usable but it's fun anyways what i've built now kind of looks like a big ass wrapper around contentful right but we have more so let's just add how about we add another hero from view and we don't add a very in this time hit save and let's also add a product and this is now connected to big commerce yep and this is my own big commerce example so i have some fake products let's do next let's hit save as well and so what we've seen now here is that users or content editors don't need to know the systems at all you literally just select something from system a contentful in this case and now we just selected the product and that just worked this is an example like the front end developer or the developer sets this up right and then they provide the tools to the no code teammates i guess you could say yeah and you don't really need to understand too much but you can if you want you can literally just click edit go to contentful do your business yeah right and that also makes it really strong yeah um this takes a while to load but here we go the dependence the dependency on developer has kind of been removed because it's as a team you work out what you need yeah and then at any point the non-developers can build and select different sources and stuff without having to go to a developer exactly and that's what's get really interesting right so let's just go back to what we have so here we have the developers one and here's a few developers with a very serious cat and that just worked really well right because now that we have this really relatively easy preview stuff this works it's it's nice to make that happen directly with web sockets but we now added a product but we haven't done the enhancing yet so it literally just gives me this is your product id in bigcommerce there's nothing else here so let's go back to our code and let's have a quick look at how that would work so use enhance and so now i actually have this bad boy oh what that house not like that and remove this one so i changed something in my enhancer composable and now i have this i don't know when i reloaded it go through ssr and now it works so it's a pretty interesting thing going on here so what i've done now is actually i added the big commerce enhancer which is very similar to the one we just saw for the cms right we just loaded there's a slightly different way to load the fields in bigcommerce so that's how you do that and so um now there's a whole bunch of data with the image right but we just want title image and price in this case and so the title and the price are working but the image not yet because it's such a different structure and so for that of course you feel it coming right we compose the composab we compose with the enhancer yeah clean it up let's see again the 404 but refresh and there is the image and the title and the price because we just mapped it to a much simpler thing right so name description price image i'm not even showing description but um it's really a simple way to just map it right i do the same thing from the fail you will get these fields and i just return only what i want like in this case i don't have to return description and id actually i don't need them yeah and again i touch the composable and there you go and so now this is again price image title so it's really simple um this all is pretty cool in my opinion it works pretty well how about we do something a little bit more scary and on the edge i'm sorry i'm getting some text messages okay clear sorry um how about we actually push all of this stuff to the cloudflare edge with edge functions and so because right now this just renders in ssr now and hydrates later on on the front end locally but i kind of want to do all this stuff in ssr fully because why not maybe in this case in the end a jam stack approach is is easier and better but how about for now we do that and i think i can literally just go like this let's make this big i think i have to do yarn build oh what i'm doing with this build is i'm actually setting the preset in nitro to cloudflare and then i'm building so now it's basically just creating all that stuff and now what we can do is use wrangler to literally just publish this this works talk a little bit more about wrangler tell me about wrangler so wrangler is basically a really good cli tool from um cloudflare that allows you to publish pages and things and deploy serverless functions and a whole bunch of cool things so it's cloud player cli yeah and you can see that just happened and we just got a url right there you go so it's empty but it's working and i know why it's empty because this is literally directly querying and we are now not in preview mode in react or why do i keep saying react this is weird these packages are new right i mean this you've been working with next for so long oh yeah i've been i'm all over the place anyways we're in preview mode you're not in preview mode so it only queries our published composition but we never published this we only saved it so let's publish it and now query it again and there it is and so daniel says he's hearing every instance of react oh i'm so sorry daniel and this is probably the first time that's ever happening i am like full force in the future world like i haven't touched react i don't know like i tried when react just came out and i said ma back to jquery at that point and then i had i didn't touch react until maybe somewhere this year where i had to just have to learn it yeah right and now somehow i just looked at the react project for something so i'm just because you're you're in view all the time i am a few moments oh yeah yeah um oh look i'm gonna put this one on the screen i'm gonna keep that one in my pocket anyways what you see here is the the magic of the next three nitro engine i almost had nothing to do i literally said nitro preset cloudflare built and then publish and my wrangler file is there's not much to it right oh let's just go here it's literally just an account id whatever to output and run it's that simple yeah and so what comes out here is basically rendered with ssr and it's really freaking fast and what this is doing it's clearing uniform then it's querying contentful then it's carrying big commerce and then it's pushing it here so there's a lot of things going on without cache that actually make this work pretty well so if you wanted you know to do ssr with the new nuxed on the edge and so this is probably an edge close to me maybe probably this is in paris that's why this works so well imagine if we now actually start building in some caching here this is going to be amazing because you can just be dynamic and so this is this still jam stack i don't know maybe um how about um we dive back into here and we go to a different flavor of edge because what i want to do now is add a whole bunch of personalization to this show you how that works locally and then we're going to push that to netlify's edge and that's i'm not even sure if that's it's probably in bada now but i'm i don't even know it's really new and it's actually they chose to run it with dino because it's such a fast um javascript runtime right and so what i want to do is actually run the whole thing completely statically so it's a jam stack site but the personalization should go through the edge handler so it's really fast because without me telling too much let's just add some personalization in here and see how it all reacts um we have to turn back on our system yep we're good to go and so now what i'll do i will actually go back here and just i've actually set up a personalized version already because that's lots of clicking so let's just delete this bad boy we don't need it for now and then we go is it deleting i think it is ah there you go um and then just change this slug so it's now looking at a personalized version so let's just make this a bit bigger and have a look what's actually happening here okay so we've saved this so when we go to personalization what i've done is kept it really really simple i've set up two signals and a signal is basically an action a user does and it signals a certain action and based on that action you can actually do a whole bunch of personalization right and this one is super simple so when you actually give the signal that you are more into few or more into react it it it scores a certain amount of points against that signal and the one with the highest points is what we show as personalization and is this a query string right now like what's clearing through query string exactly so utm is usually used for those marketing campaigns right so when you set up an interest that equals view in the url so you go to a twitter you click on the twitter link and personalization happens because you are actively choosing okay my interest is actually few right or my interest is react and so it gives a signal to uniforms tracker that says hey this person is interested in few and as you can see there's a there's a lot of options like you can say hey i went to a certain page a few times there's a scroll by something there's a bunch of things and in here there's much more like you can actually set up intents to kind of figure out um what people's goals are on the website through these signals that they're giving yeah or you can use something similar called audiences you can literally put somebody in a bucket of view or react based on the signals um and there's a few more like enrichments is basically a more granular version of all these things where let's say all the colors of your t-shirts that you're selling you can put in here and so it's nice for categorization and then based on these um signals that you give let's say you click on a blue hoodie suddenly we're going to show you more hoodies and more blue because of these enrichments and then we have quirks like i'm going over this really fast because i don't think we're gonna have time to talk about everything quirks are really cool they're basically key value pairs that are set when the page loads and then personalization happens based on them so this can be your location in the world yeah or this can be this person has used view and bought something and so we just set that up or this person works at that company or they bought this previously and based on that personalization happened for now i kept it really simple so literally you have a query string about view or react and so in our system here it becomes really easy now to personalize on this right so you have a few developers here and i have now actually set it up for a few developers um the signal is few and the score is higher than 60 or the higher of the same than 60. then you go to react developers scores 50 or higher and nothing if you don't have any position at all default yes and then for products same thing right so next 101 for a few developers um some sample thing for react and another product for nothing let's see if that shows up there you go so let's actually have a look at this i think it's already running yeah so this is our extension here this is uh yeah yeah let's let's go and go so what i want to show you is basically the default stuff so i just refreshed over here and you can see on the left that there's now a personalization type slot you can see that's added here and so when you have no no um actions at all you have the core web files consulting which is this product here you see nothing connected and then here you have the developers without fuel react because there's nothing attached to that here right and so basically for react i have selected a different hero and for view another hero so how about we just add um let's actually hit publish so this keeps working and we also stay in preview mode so it's just easier so we can actually say utm interest equals reacts and now it's reloading oh it went back to preview mode because i hit enter here so basically it now found the fact that we are in react mode and so it selected the product for react and the react developers component here and so we can use our little tool to actually see that we now have a dimension set up a signal was given for 50 for react developers and the one for a few hasn't been touched yet so how about we make this few now when we make it few this just became few yeah because that'll be 60 that'll be 60. because i put it to 60 so it's a higher score so this one is now more important and if i just remove this these scores are maintained right so this now on hydration time that just worked and so now react again it would be 100 and then it would it would oh let's try let's try it depends on how i've set it up i'm not sure if i set it up that way let's refresh it again so no i don't think i've set it up in the right way now what we can do though is say let's just clear this and then it goes back and you see this is done on hydration time which is totally fine for this because now when you start clicking around and next made this into a single page app even though it's statically rendered because subsequent clicks on hydration time you can do this personalization really really easily however if you would do this stuff and push this to let's say a website somewhere and somebody with a cheap device on a slope internet connection goes to your website and you want to show some personalization if it's all on hydration time it depends on loading the next bundle which is very small now let's be honest but still it has to load some javascript has looked and few and then it actually has to load our um tracker which is also relatively big well it's not that big but it's all javascript it all has to be loaded yeah yeah and so what you see is that you actually get a flick a flicker we don't want that what we actually want is use the edge with nitro and next to pre-render your personalization based on the actions you've given before so how about we push this now to the netlify edge using next three and actually using dino about that let's let's try so this one is a little scary it has gone wrong on me before and i know what i have to do is this the moment i render a statically generated website with next three the contentful package starts to complain in a certain context so i have to transpile it but in ssr it now gives issues as well if i leave it like this so there's kind of a weird thing if and i want if i now push this to wrangler the process would fail yes if i do this it goes to wrangler fine to cloudflare so there's some stuff there that they have to work on but when we just fix this now i have a netlify file here so let's just do netlify build no they could not find the side of the net without a link yeah i never did it on this on this project on your computer um let me see okay let's see now maybe it just knows and otherwise we just have to link it to a project that's not a problem okay we can do that yeah let's let's link it okay so let's just comment on how awesome uh class are you know this is so easy okay let's choose a list of my projects uh there it is this is the one there you go i think it's just gonna work now if this works props to natalify oh yeah there you go okay so you can see the output type is now edge here and now we do next generate so we're making a fully static website you can see the fetch entry variable this stuff this comes from contentful so we just built this and now we can do netlify reply for production okay it could be that we get yet another widescreen because i'm i'm not sure if i've published the composition okay let's see okay so we just received this url here so open the link okay so something did go wrong always like i knew this this one is just complicated so it did publish maybe we might have to hit publish here and i also see that we only published three assets and before it was four so what could be is that here so i have my dino file um how about let's just run it again yep kind of strange that it only does the three files because before i did the four let's see yeah so daniel is saying that maybe we need to do um nitro priest at netlify i wonder if that's what it is and otherwise we can ask our colleague elias who actually built this thing yeah you can see i had this running like yesterday it was fine okay so now it's five files but it's uploading zero assets okay i'm not sure this is gonna happen interesting so our middleware is here and where's my build maybe this is let me just quickly on my laptop i had it working let's have a look maybe there's just a little difference daniel says just set the nitro preset variable i think okay so let's see yarn generate edge let's see what we have there because um yarn generate edge okay so let's you want to put this to natalie fighting netlify yarn build and and netlify deploy yeah but the thing is what i want to do is actually have this not ssr but static so the edge thing that we're adding there is basically our own edge because we have some proprietary stuff going on there but how about we just do this and see what what it does we actually don't want ssr we use our own kind of x thing that then will stream in some stuff in a static site so you see this actually now is building it properly in ssr and probably when i do this now we're just going to get ssr and netlify which is cool on its own i just don't know if that will work let's see now okay this is odd this literally worked a while ago but this is how bleeding edge this is sure um when i was working on this with elias it also sometimes just decided to say no so i can quickly look in my laptop to see and what if i can see and if so share my share my laptop screen sure well daniel's saying the output type doesn't do anything well output type is local to us it's a uniform thing like if you look at our next config here we have an output type for uniform nux for edge or other things so we have something our own so let me just here well i can show you let me just run those same things here yarn no netlify build if this works i'm just going to join my screen to our stream yard and then we're gonna have a look yeah because if this works we're good to go but then it would be nice if i knew why and deploy let's see and otherwise something has changed in between with versions or something it could be that not if i just did an update no i think this is actually working now yeah there you go okay this is really weird so however it's not really showing everything oh this is very interesting okay i'm gonna join my laptop screen to this and then i'm just gonna show it this is part of the fun right yeah man it's a jam session yeah oh it feels like it and this also felt a little bit like that um when at the refugees conference where we had this because it was just a little strange alright so can i share my screen oh no now it tells now it says to chrome are you allowed to share the screen it's one of those moments [Laughter] i will do it let's see is there something entertaining you might want to show people that maybe you can go into a bit of that personalization stuff i could sing sing a song no i'm just kidding oh that works to you um i will be there in a sec however oh it's no problem man this is this is part of it this is good i actually think this is pretty cool how you know we're literally just you know on the bleeding edge trying to make this work right yeah we'll quickly jump over and deploy it from your laptop and then now it's a little crazy alex when is next five oh look at the inception it's perfect all right so yeah what i might need to do is have a look at my code here because this could be that it's like oh yeah i know like i have this code locally here as well and obviously um like my use and hands is still commented out okay i'm just gonna quickly do this and it's gonna be awesome i promise this is the way we do streams we actually fix things on the fly yep so you got your contentful your big commerce enhancer okay and in here i'm gonna need this bad boy render to render the right component yep i'm gonna just comment this one out turn this one on and i think now it should do it let's do a quick test there we go all right so clear that yep okay personalization is working as well okay net life i built okay i have laptop battery by the way that's good to know oh no oh i know i know i know welcome to esm wait we can fix it no yeah there you go okay here it goes daniel i promise it's gonna work i promise because we want to see nitro working actually on um netlify don't we there it goes by the way have you guys seen your warp as uh here we go oh wait before i say anything let's just see if it works yes okay okay so what we see here now is actually completely statically rendered but personalization goes through the edge functions of netlify on nox3 and so um let's turn off javascript without so there's oh wait there is personalization happening already how about okay we clear everything you're a new visitor and let's turn off javascript and of course sorry i like that plugin i like that turn off jobs yeah because i do it all the time so it's nice and so basically on the left and now you don't see that json thing because that's actually a client-side javascript thing to show you the json so without javascript this is now loaded right so let's turn back on javascript and then it comes back so how about let's say we are an interest for react go through the same thing did you see how fast that rendered by the way yeah because this is basically jam stack and the personalization thing so this component here and this component here below were rendered through the edge so let's turn off javascript and we know we have this interest right turn it off and it still works if i then remove this now there it is so through the edge it now knows that i had this um action or signal that i gave and personalization works and like the ridiculous speed of this is insane let's see if i have a network tab here somewhere so basically this is 72 milliseconds while i'm streaming on the countryside with 4g yeah that's just insane it's pretty awesome for a personalized page and so um you can actually also now say okay let's just do a few then as and now this became few turn off my javascript and fuse there and so yeah this is just the performance of this is just ridiculous and i want to of course when i remove this it still works and so what i love about what we're showing here is the combination of doing a jam sex site and dynamically personalizing it over an edge um because then if you have a slow device it already works with personalization from the server that was rendered for you and then you hydrate and then um that hydration is kind of fine because the personalized content has been shown already and so it doesn't flicker and the beauty is now that when you now go to the next page all the bundles have been loaded and now javascript can take over and do it on hydration time again but then when you go to another page and refresh your page just works and so now this is like a new page and it's completely personalized and there it is like the slowness that you seem to think that this is is actually javascript rendering the json view yeah exactly right if i didn't have the adjacent view you wouldn't even see how fast this is that's how fast we need to start adding you know um animations to for change page changes for this and so yeah this is just an extra lovely thing that you can put on top of your uniform orchestration neck with all these headers and things because this actually comes from big commerce and this comes from contentful right and so you have this whole cool thing and then on top you put the personalization and then whatever flavor you want is now running on the edge and then you have this magic and so this is not really the stream where we dive in and fully explain how that all works because probably part of that is proprietary but another part is just that it's hard to explain and we don't have that time for now so um i think for the moment this is what i wanted to um show um if anybody has any questions feel free to ask um so seth have you seen this before doing this on netlify or not yes i actually yes i have seen it through a couple of internal demos and just some of your talks cool yeah so you think you would we should mention our discord server actually right oh yes i have a slide for that how about that there you go i'll just go back to that [Music] so this became um a lovely improvised stream but that's part of the game so here you can see on the left this is actually our discord so you can put your phone there and go to discord or just type uniform.2 slash discord and actually the one on the right the uniform.2 bcn barcelona gets you the code of this whole demo so you can actually fiddle around and of course you can also go to docs.uniform.app where we have a full next three tutorial that gives you all of this stuff and you can actually do you have uh do you have uh speaking engagements already lined up for this um for this kind of presentation again i do actually um i am speaking at composability um conference in the end of this month and then i'm speaking at javascript nation no javascript global summit the month after and then i'm secretly hoping a few more few conferences but i cannot really say much about that because nothing is set in stone just yet yeah but i i'm gonna be like going hard at all the next three stuff because i'm so excited about it how fast it is and almost no issues anymore like it used to be a little bit that you're like why doesn't it work but now it just works so good stuff here yes good stuff so we're in for about an hour 10 minutes is there anything you still wanted to discuss uh seth no man we'll save it for the next one how about that next time you demo it i'm ready for that um thank you everybody for watching and we'll see you next time cheers been a pleasure see ya