Unpack the stack: Leveraging a unified UI with Mitosis in a Composable Architecture using Uniform

we are live and we are a mid conversation how about that so um welcome everybody on the stream and also um outside people watching um so today we're doing unpack the stack which is a stream that's actually quite Technical and today we have a really cool showcase so we have here Mauricio and buba from marahee agency from Belgium and so guys please tell the audience who you are what you do all the fun stuff we haven't decided I will go first so my name is Maurizio as you can tell from from the accent I'm Italian uh but I've been living in Belgium since uh 2011 and I've been working in the it for more than 20 years and and half of my professional life has been spent in digital agencies so I have a a lot of experience with a lot of projects I saw a lot of the evolution of the technology on the past years uh but now since the beginning of the year I joined Mirai which is a small boutique agency based in Brussels a digital agency too where I share the responsibility of co-cityo as we call ourselves together with Buba what a good Bridge how about that that's why it's better that he begin because then I don't have to get a lot of stuff so uh so for me um Uber so kind of like what did you said I'm working uh at Murray to kind of like digital agency I would be more like a technical guy in this presentation so I will be also good understanding of all the landscape I will say at the moment on the front-end backhand and also devops and I'm trying to help as much as possible to get the Gratitude really done and help the clients basically I really like the term go CTO because you're not alone in a CTO and what I've learned being an agency myself for a long long time you have so many different ctOS right you have sales like ctOS you have organization like ctOS you have people who sit in the basement and come up with something amazing and you just have to change it right there's all these different cities so I'm really excited to see that you guys have you're doing it together and you can cover more ground um yes tell me about that a little bit because I'm actually quite excited to hear how that works how's the process uh for the for the our responsibility how does that work uh well it it actually started uh a while ago because we we've been working together for a number of years and we have different backgrounds I started as a developer but then I practically I'm not a developer anymore not in the professional sense of the term since like at least six or seven years I took different roles solution Architects then I became uh a full-fledged I.T uh manager with different roads PPO engineering CTO so yeah I'm more on what you say on the on the people management strategic solution architecture kind of uh part of the spectrum whereas uba is much much much stronger on the hardcore technical parts and he has a massive brain so he it doesn't go in the basement it doesn't have a basement I believe but you know it kind of abstracts himself for uh for a night or two and then he comes up and then something magic happened I love that combination that's actually cool and we'll probably see your two roles today also on how we want to explain stuff so the stack we will look at of course I'll let you guys talk about it a bit more about as far as I got it and I'm pretty excited about this because again I work at ATT for a long time and we try to do what you guys have done and we never succeeded because it's always too busy and then there's a new client or my there's too many developers on the bench that can actually not build such a thing like you did and now you guys did it and you're using uniform and that makes me excited and of course um maybe mauritio you can start with your presentation and actually kind of tell us what that stack is and how that serves your customers and what problems you were seeing things like that yeah I don't think I can do it justice by just trying to explain it we just have to see it and then we'll dive into the code with buba after so let me just put that on the screen for you all right so you should see the slides by now so this is the title of a talk that we gave together with buba a while ago at one event one big event that is uh that happened here in Brussels it's called the fostem uh and it's about open source Technologies uh where we presented what we call a practical approach to build an open and evolvable uh digital experience uh platform uh why we decided to go with that title well the problem that we faced that we've been facing for let's let's face it a number of years now is that when we approach clients a specialty clients that have a pretty diverse kind of landscape and a certain complexity of their technical landscape the scenario both sound pretty much always to the same kind of of configuration you have different tools different tools that have been layered out over time so you got a CRM you've got a CMS you got different kind of of platforms that have been integrated and then there is the the the user experience that this company wants to provide to their customers the clients or their users and and they normally want to activate something that is not there yet so they call us we come in and they say look but this CRM is going to stay there we want to change our CMS we want to add an e-commerce and by the way we would like to have a bit of uh of uh um personalization platform for example so we come there we map the landscape and then one of the first challenge that we have is of course trying to make sense of all these things and and design an architecture or a digital landscape to be digital landscape that would make sense for the client that is both sustainable financially on the investment that you're going to make but that is also it's not going to require them to redo the whole work two years from now because then it would be it would be wasted so um basically what we see is that you can when you approach this kind of problem you have you you start to have different kind of challenges that comes in one of the first challenges what we call the problem is that you have this landscape you may have a CMS an e-commerce platform a search engine or a CDN and then you want to aggregate content coming from all this stuff into a modern front-end user experience so you see there is next there may be knocks there we have clients who actually have this kind of landscape where they have different Frameworks that they use for different channels in the front-end technology they may have react native for example um and one of the problem is that they need to aggregate into this experience data that are coming from different pieces so you start to connect these dots and then you have a problem on how to make this work in a sustainable way so a bit of the meme that is on the right side is that you have modularity the modules are there but they don't necessarily fit together nicely you know so you're left with the problem of orchestration that you that you need to solve and this is a bit what is in the link that we put down on on the bottom right is is this postulate of the conservation of complexity you don't just eliminate the problem you just try to abstract it and move it somewhere else but this problem still exists so this is one of the things that we um that we faced as a problem over and over again also in very complex projects for the retail sector for example this is a thing especially big retail players that have gone internationally that they need to sell with different kind of e-commerce engines and personalization depending on the country what they sell you have this problem a lot so what we found is um we discovered that uniform was working on on this kind of problem space and when we talked we we with you guys we say oh but that's kind of magic that's what we've been trying to do by building our own bits and pieces of orchestration this is finally an approach that that seems to work you know and and we kind of fell in love not just with the two but also with the Paradigm that was adopted where the idea was not you may have all sorts of system we're going to connect it magically and it's going to work it's not it's not as simple as that it's like there is a pattern where you have you take care of the orchestration but you also take care of the composition and the data and answer you separate those kind of responsibility because you want to have the right level of cohesion and then if you apply this kind of Paradigm then the platform is going to do all the heavy lip thing for you and you will be able to connect all the system and swap them in the future and accommodate new needs and this is going to work over the wrong run so we said nice this is great actually and we started to Tinker a bit with uniform and and to experiment that with existing platform uh that we were that we were managing at the time but then as soon as we got there then a second problem uh came up which is the problem of the arrow that is identified there on the bottom part you still have a very good picture dude yes but but that's a bit like it captures a bit the feeling that you have when you approach this kind of problem yeah you have a set of tools and you're only as agile or as fast as the the least agile or or the slower link of your chain you know so once you've solved the problem of orchestration and composition you're still left with a certain complexity that you have on the front end where ideally you would like to have the same kind of modularity the same kind of high cohesion and low coupling that you want to have in in your back end you know so it's a bit like having a bicycle and not having the right uh will to to put over there so um we started to approach this kind of problem we started to scout this was a lot of technical work that was done behind the scenes by buba by the way that is going to show to you in a second how it works really at the code level but the idea is that basically the problem that you're trying to solve is that you do have a set of components in your front end you normally in in an ideal scenario have a design system you want to have those components to be managed to be modular enough so you can give them to your team or your teams and that they can compose your user interface and then also why not being able to deploy them on different kind of channels regardless of whether these are done in this or that technology because this is also something that happens on on especially big companies or established companies you may have layers of stacks that were built over time and and the business the organization doesn't necessarily want to go through the hassle of rewriting things just because this way you will have a modular user interface and also because let's face it the landscape is a bit haptic at the moment it seems like 2015 all over again where you have a framework that is coming up every every other day so it's not yeah in your list a little bit yes so you basically just are creating a product on top of uniform with something in between that you can serve all your customers with essentially right I'm looking at Boba I'm not sure that we would call it a project yeah it's not kind of like a product I see it like more has a toolkit so just so you know we have alien one of the maintainers of Astro in the chat so I had to just go there yeah that's why I saw it like yeah no worry uh we will speak about Astro because astral fits really well in this kind of stuff on the module exactly anyway sorry Mauricio go for it there will be a shout out later for for the guys of Astro so the idea is it's coming back to what I was saying is that okay why can't we try to reproduce the same kind of philosophy of modularity in in the front-end layer of the stack too um and that's what we found we we uh came across mitosis which is a library that has been developed by original by the team that builds Builder IO which is uh one of the numerous CMS that is available headless CMS that is available on the market and the promise of mitosis seemed really really cool the idea is you have components that you can write that are agnostic you can write them on jsx you can write them on TSX if you prefer typescript and these components I'm going to be transpired it's actually a two-step process there's a first step process that translates all these components into a Json kind of configuration file and then there is a series of plugins that take these files and are capable of translating them into first class components on a number of framework you see all the icons that we put there there is really plenty of them yeah so the idea is that you can write once and you can deploy pretty much anywhere so we said this looks really really cool is that true can we really come to a situation where we can write a component in an agnostic language and then deploy and and save the time of actually translating into into different framework and that's what we what we started to work on so just for clarity I'm thinking before you go on to the next one yes so can I imagine you have a mirahi npm repository where you just have for a certain customer you have a bunch of Base components or maybe not even for a customer it's just yours and then when you actually want to use these components you compile them a certain direction let's say few GS then you put them in next and then you don't really care about the npm package anymore or is that in a set up a different way maybe blueberry you'll show that later yeah that's the goal basically to have like the base component that we have and then we compile them and then we take that as a source code and then we can diverge if we want basically from the client because all clients are unique have their rules their customization so if you don't lock them in all way of thinking just to kind of like speed up the development yeah to start because I can imagine if you have some very complicated qgs stuff with you know slots and like things moving with events and emits you're not going to do that with mitosis I can imagine that will be crazy not actually yeah if you do it you I will say it's doable but you will lose too much time going into music is trying to make it right where you want then going directly to vgs and write it so exactly that's what I would do but we'll see later on how that would actually show because I think you can just overwrite something yeah right yeah this is why this is so strong it's really cool yeah and this is actually a good segue to to actually I think my last slide before we dive into the code because the idea is that okay the promise is really nice but then we know that in reality you have different cases when you when you take your pre your page and you break it down into components you know that you have you can't categorize those components into a certain level of interactivity there are certain components that are pretty much static other components that need to interact with different part of the pages they need to interact with the back end so you know that you reach pretty soon a certain edge cases which are not really translatable into an agnostic component because that's where the different Frameworks start to diverge because they have different philosophy these different approaches but we said okay it's it's actually not really that bad the idea is that you have always the Pareto Principle you have the 80 20 and the the yagni principle for the for the developers you ain't gonna need it you know that if you take a sample page from an e-commerce website this is what we see on the slides on the on the right and you break it down into components seven to 80 percent of the thing that you see on the page are things that are supposed to be rendered once and then they stay as they are for the re for the duration of the session so these are for all intents and purposes static components that just need to be rendered it's going to be 95 of all components can be rendered like this maybe more maybe more maybe more it actually depends because the the more you're on on a on a catalog browsing kind of thing if we stay on the on the um on this idea of e-commerce well some pages you have very very few interactions and and as an e-commerce you may actually benefit from everything's being rendered once and pretty pretty fast so for those mitosis seems to be a really good option but then the more you go into the interactivity well you also have an Escape Route that you can take which is this override concept that Google is going to show in a second where you can say okay for the this kind of things these are exceptional you you pass back control to the framework and actually if you have a component that needs to be deployed in View and in react well then of course you're going to have to deploy this could develop this component in View and in react according to the proper Paradigm the proper store system or or or that that you use but still you retain control over the majority of the components that you write once and you deploy everywhere so this is a bit uh where we are at the moment as Uber said we are experimenting this because it's a project uh so the the the next goal is to apply it on on a real world project because it seems really really really promising uh but that was basically it from on the previous one so I will keep this one so just to add a bit on it and mostly for the so if you look at this page and with all the things that's coming with a server component in react and in next GS so basically you can really see how you should really put I will say the focus like all the things that need interactivity that need really like add business value you put the specificity on it and all the rest you just have to stay static because you get done performances you don't just run everything again like you if you are working in a react uh with the it rotation if all the quick people will be like no it rotation anymore so yeah exactly well that's the good thing that we could have and literally the reflection that we have it's how we will speed this kind of way of doing and coming back what you said at the beginning if you look at this we can really focus on creating I will say layout component if I can say like that to constrict the page in mitosis and then like this button like for the add to cart answer that have basically the business logic because these bring the valid bring the value and the money so then you write it on the specific one and then you end up with kind of fundamentability it's easier for you because you focus on what's bringing the value on the money directly and not lose time on like handling all these things uh and so on and voila and can can this also render to like native web components or just HTML they have react native support and so on for some stuff I don't try it yet uh but and what's really nice because on this reflection I like it because I don't know if you saw starfont UI V2 to come live yeah they just came out with that voila and it's kind of you are going in this direction and like you I will say for the coming years being I will say Frameworks some tricks it's bad for me because you should be really open you should be really look at all the other framework that are doing because you will learn from them and so on so if you look at the one stack uh query they went headless headless UI they are going had less uh Shaka UI yeah I did a stream with the guys from Chakra a few here and we use the Headless part first and then we attach this a chakra front-end to it holy moly that's a different thing but that is amazing because it gives you all this accessibility the rules all the things you can just kind of script it it was a bit of a brain dump for me I had to but it's very interesting yeah and and literally what he released and like zag and so on we are experimenting with it because then it was really cool and it's really nice because you end up with one thing you separate the logic and the display so now you can go on any from marks and bring this accessibility and not be like something that we put aside that we do at the end because we don't have time which we always used to do I had developed my team cry because I had forced them the accessibility was really funny voila it's not easy but then with all this Library like all the stuff that's coming now we can I will say we don't have any excuse anymore not put accessibility since the beginning because you really have all the peace that available for you and you don't need to invest on one from works and stay with it you can go really now on info box you learn zag good you can reuse it everywhere and I try to integrate like zag at me to this and you don't fix it yet because I have to do some modification on the compiler but I think it could be really interesting to do and so so now I will switch on the code to show you a bit how we yeah uh there so I'm gonna give you back control normally so we need to actually put this one on the on the screen as a marketing person I'm here for emotional support what we know thank you Charlotte marketing people have the highest threshold for pain I've ever seen in teams like they just deal with the crappy dxps that force you to think a certain way and then like ask you developers hey fix it and yeah I don't have time to Sprint and they keep going and they're still successful so big shout out to the marketers here anyway and try to make that life easier actually I will say that's nice we are hoping to be very nice for developers but also very nice for you know people who are doing marketing or content creation you know it's always kind of a mix of both anyways we're looking at something that looks a little bit like Tailwind yeah you know what they've been they're going slow off they've been yes hate and love I don't know which uh size you are but okay it took everyone you just take one because well I'm not really the good systems guys so well bear with me if you see some CSS glitch I'm sorry I'll try to really focus on components uh so basically here it's just to to show you like a simple page that we build with uniform this one also this is running from uniform actually from uniform in Dev mode so for the speed uh don't bother it's not the real speed because I'm doing in development mode so I don't want to hear like yeah it's blue no it's not slow it's just uh I'm compiling every time and here this one it's running next GS okay yeah so now I will switch to uh like here I will show you the the code basically but let me quickly I will switch on the I have to quickly exit from there because I have to show the what is the okay this one because I was looking for the correct one uh okay so this one you just listen to yourself right now but we will go with you yeah I'm a developer so here I will close everything running on the the next one so now I will switch on next so basically I take the same code the same oh you have a few terminals open where yeah yeah I'm running the same thing on the four thousand uh 200.30 so you're very new yeah I love next three they're really and everything's going there actually wonderful yeah it's working well it's a bit of a black box when it comes to error handling but they're working on it yeah yeah because sometimes you're like it's breaks I'm like okay okay let's remove the cache that's my way that's my go-to something and then you're like okay it works so I will refresh this is next now how about that and next and I hope because I will not get the demo effect and so on same thing and here we are running on next voila we are using the cell code going to the same back end with the same component and I can switch between next and next it works that's very cool so you wrote the code once but you just compiled to a different Channel which is next or next or whatever and this is like you put some Ai and we're out of a job now yeah we'll see we'll see but actually we do this I'm really curious how this uh I will say charge GPT and so on because it's the rules to write meter this is really strict so maybe you can end up with uh got something interesting I will say because our alien has actually a good good question here so what about the Integrations with something like next Dev tools or reacts Dev tools I think it just works right because you're literally running next now everything works I didn't I think install the The View on but I can actually next now has on-screen in browser um Dev tools as well it's just next right it's a next application here you can see I'm just running my next application and the goal with all the reflection that you have is to stay as close as possible I have how the framework is working because yeah we don't want to change it because tomorrow we want to leave so we don't want to put like a string on to people and keep them linked to earth now to go if tomorrow they get the code the code it's to them and they can use it okay so I will show you a bit in detail so basically I'm using NX I will Zoom a bit View I will go and uh presentation mode okay so basically on the left side I'm using a and X so basically you're really a big fan of uh NX Dev basically for all the mono repo stuff uh it's really cool you have a lot of plug-in it's real Plug and Play you just come and so on we use also turbo you can do the same with turbo it works uh we just choose one because yeah I think at uniform we use turbo now right now so and we choose this one but it's easy you can choose what you want so basically why you go with monorepo because it's easier for us to share code and so on and show all the policy modules and component library because I don't want to push everything on npm it's a mess yeah especially locally if you can just quickly link to something due to your monorepo it's much easier I guess voila yeah it's really easier and something so basically the structure that they use is apps and leaves they've used lips for the library and we have what we call the core the car basically where we put the meter this one so white girl because it's basic for everything else that you will come on UI react and review okay so how is this working basically for a configuration file I know again a configuration file but you know everyone create a configuration file we need it so basically uh to are we not good in the detail but most important it's basically just this part it's our export very giving the file where you write it the conventions.light.s6 okay I will show it after where you would like to have the override basically the path of component that you don't want to handle by meters is but let's you write it on your framework of choice the Target that you would like to use so where you would like to compile and then here you have some option that you would like to use like for example if you want to change some stuff transpiling bypassing stuff so you have access to the compiler it's basic but to do the jobs if you would like to do some fancy stuff so for example oh yeah so if you need to do something in feed here or some stuff you can for example here you can see for this world one if you would like to do they have like a special metadata called use metadata where you could provide what they call the element tags so to help you basically to handle stuff like for example putting this valid element is the same thing down the The View component Library component Dynamic basically if you would like to have a dynamic component just put the house or the East and then do the job previously yeah exactly because I can imagine sometimes in few let's say for my own website in view I have a video player that is actually a native web component that I can just use anywhere it's not actually a few component but it's a custom HTML tag so that kind of thing you will configure in here yeah you can configure it and tell him like actually when you meet that basically you do that okay yeah exactly cool like for example I did something like that like for example here you can see when you meet SRC set like that for some of them you do it like that because MJ Tech stuff yeah well it reads GSX stuff to handle for example this one it's one of the stores that I have to fix for view when I meet like a dangerous 13 years gml yeah actually in view it's inner HTML and then yeah and that's it and then you do it's small stuff like that that we should push that back on the compiler with just small stuff and then remove it and it works no problem this is basically the configuration you run these things you run the compile and then let's go on the SRC so the SRC here I have like a bigger structure and so on but the most important one is the component okay component you can see ah all these components already written and all these components handled by meters okay okay the convention is dot light dot TS6 every file that you write that you'll be taken by the compiler simple okay and I will show you two kind of components like the one or three I will say the one that are simple I will say basically just a layout component display so for example take the collection grid here simple one just a Gmail basic Tailwind nothing fancy there and here you can see I use the slot of uniform just to put it and then it will pass it throughout then we have the card list same thing simple component in a while you should explain what a slot and uniform is but let's continue with this first I will explain it then you have the last one like the collection card basically here I'm receiving props and then just mapping it okay so this is simple component nothing fancy there and basically if I have to write that it will not take you a lot of time to do it on every framework but you have to learn all these Frameworks so this is just jsx react and then this will be compiled so if I take this one on the output here it will be compiled in react so here already begin to think about client and server component that's coming in a direct role yeah but well you have to handle I think we just at uniform we adapted our SDK and it works with server components and personalization it's it's going to be awesome I love you guys yeah we already did it but we need to do a release we're releasing every day now so it should be easy it should be cool I want to try that because uh I want to play if uh I play a lot with server component with uh uh hydrogen before they move to remix oh yeah exactly so that's my literally I learned everything taught with Georgian because it was really nice really cool and then they moved which I was like I kind of want to know why they moved why they didn't want to snip with it but that's maybe for another stream yeah it's complicated it's not too easy yeah or Frankly Speaking so here we can see he compiled this component in simple j6 for basically for react it just it's almost the same it's almost the same and so on so now let's see in view here component let's on the grid so here you get a normal component that is between native component view okay we you can also this is option API but you could compile it to the setup API okay okay I'll just take the default one but you could do it it's just a configuration so simple it's a valid one nothing fancy and anyone can write that okay so now let's go for something a bit more complex I will say I will go for the header so here on the header basically it's a big one like you can see that's pretty impactful uh it's just because I don't break it and component because uh laziness a bit I will say sure but basically it's a kind of a component and then you you will see we introduced something called use store new store if it's basically uh provide you that you have to use to be able to trans file to use date or to use a computed or data if you are using the if you're using a ref if you are using the setup and so on okay so yeah they create a hook that you need to write so they can know they know how to compile to the others okay and then at the moment and to show you like the complexity and why it's complex to write a compiler you cannot change the name state it's a limitation at the moment but it's well like the it can be improved uh but well at the moment if you remove state it will break okay okay and then you just basically we get an object that you you could literally put a function there uh you could put links uh like getter answer Etc and this will be compiled to the correct way in react View and so on okay and then here and this is complex because I will begin to go deep on some stuff if you see here I'm using a transition we say oh that's something complicated to write handling transition handling dialogue and so on and how we do that is basically we introduce headless UI because we wanted to push to see how I could literally put like complex component inside and get the Decks that I want like under you I don't want to lose anything about ux and X so and how to do that is basically we use Atlas UI but next steps basically it's a sag basically for us to try yeah because zag has more stuff so basically here how you could do that you have donation of overwrite basically what you could do you can create component here for example headless the other light and basically this it's an empty component okay so when you import it if the compilation works you will get something like that like oh this is not working okay but then you have what you call the overwrite this is the folder and you have to follow the path that you have in your basically the structure and then here for react I'm just telling him basically when you meet the structure based on the output if you look at here except the client because it's me adding it here you can see we have headless dialog okay so basically here I'm just importing the headlines UI and you're exporting it okay same thing for View okay and thanks to that I'm able to bring a complex API complex component that is outside inside magnetosis and it works because I I don't need to go and re-implement this complexion imagine you have a calendar like a big greed and so on the driverology invest a lot of money in I will not tell you like hey actually Crush that and rewrite it no you have already invest in it but you can literally just import it and tell Tomatoes it's okay actually every time someone Imports this file replace it at compile time by the other file yeah that's what the override is doing essentially basically just switching files and I feel like I'm back in college man I love this okay it's really nice and I like the way that they handle it because they just said it's a simple file don't think too mad don't add complexity just give me the file and Export job done apis based on file are really nice just like with the roads and things this is just nice you'll get it and then here you can see basically I'm invoking the transition root the yellow component so if I show you a bit so what does this transition look like in View and react I will show you like here if I don't click here do you see oh that's this one this is opening the dialogue opening the dialogue and so on and you see you have my beautiful animation coming from yes the transition and basically on view it's using it will be using the transition root and basically the component from headless UI and the address UI in View using the transition redactive transition component from view yeah except if you're on react it's doing its own stuff so okay basically nothing The Headless UI just gave it to you essentially so you didn't have to write it in mitosis which is no you don't want to be doing that so that's I don't know what I've been doing that I don't have the expertise I will say to do that no no I'll let that to this kind of library that handled that or and it's really like same thing for chakra you and so on all the complexities like accessibility and so on performances localization leave that to people that know to do it and do it really well and focus on what you bring value inside okay so here again you use the same thing I will show you a small stuff basically here so I will go again and so on so it's basically just using the Headless UI component and then here one thing different four you're like what is this thing so basically I said it's kind of G6 but they could be not really and naturally you know they copy from solid basically if you have done a bit of solid so you'd have like this kind of like kind of directive if you're an angular World component that you can reuse yeah this looks a little more native to me coming from the old school PHP stuff we used to do this with like smarty oh boy I'm showing my age yeah but basically is that like you have like component that you can reuse and why they put that because it helped the compiler to be able to know how much easier because if you hunt because if you look at JavaScript we have like a lot of way to write a for Loop yeah before we have the for each we have the map voila and if they have to have the compiler have to handle all these case it's a increase of complexity and ability for them so the circuit let's simplify and put that so basically it's just have a niche here and then you get the function that you can return your component same thing for the if so if you are in in react it's just if but if you're in a view it's a v if or visual depending if you like it exactly inside so here to have a show you have the where in the earth and then you handle it okay that's it so just this kind of different stuff that you have I think this show with the when they they had stuff like this in like mustache templating remember that yeah yeah it Circle back we come back every time it's like yeah we have a cycle in our world yeah it's literally like Inception like yep any comeback and we're back to Surfer now anyways yeah kind of uh envelope so basically that's the big difference one small thing to show you I would like to show you it's then where we would like to push a bit and then where we go with Astro and so on you can see here I'm using an atom basically so when I mean mobile okay I will show you here I would switch in Mobile uh let me increase the size voila I will move this one to the right okay so here you see I'm able to open and close but these two components are not in the same doesn't share anything so how oh there's actually two components yeah and the goal there at the moment I put them together but the goal that I would like to show it's imagine this thing it's your cards like here I did not implement it but I put begin yeah it's a craft we have a sharp State okay and then basically I'm using what you call an atom it's coming from a library that we use not this one that's the store so again I use the same thing override so I go here and react component uh store here and then here I use nanoster and Island should know about it because they they put it on the Astro because this is also asteroid at Mirai so basically this is a store basically an a term that that's work for react View and same thing it's headless you can use it and that's really nice it's based on this atom you can reuse it and share it between component so this story in that says it's just keeping State essentially right keeping it outside and you can use multiple Frameworks and share the same state so imagine I'm using Astro and I have like a reactive view somewhere and then I have my card button here imagine that button is installed when I click on it it will go and update it automatically and everything will be shared okay and here I was able to to show it using mitosis it works basically it's not perfectly fine because why it's I didn't succeed here to make it work on the username store because basically you store also has a name it's Clash automatically I screw myself physically I'm like guys no why did you use that the compiler will read it and I will be screwed so yeah exactly not yet completely linked but imagine tomorrow I can just import my I will say all the hook that I have written that are kind of like agnostic so I can in any kind of client any project and you say okay you would like to do add to cart for Shopify fine let's go is that that and then imagine and Link it to me to uniform exactly I have my stuff I have my old API that are working so I kind of have everything linked okay so now I will show you quickly the so basically here you can see the store and that's the most complex one kind of I have inside and then here we have the uniform slot again use the same logic of override because uniform support react and view okay fine I come on the right side and then I say okay when I'm using View basically I'm just importing the uniform slot I just literally returned that one yeah of course because we have feature parity between View and react with the same props so for you it's really easy to to do it yeah for me it's like if you work it in Java a long time ago there's they used to say uh people it's a bad practice now but they say what they call interface development you see it in typescript also sometimes voila and it's good and bad you have to find the good spot inside and not just go for sdks you want things to be always the same so interfaces fit here yeah it's fit and it's really nice because then we can just just use it no issue and don't use it okay so this is basically the meter this side and then what we have written uh into Linux Dev is basically I put a watcher that will watch everything that changed uh on this file it will compile to the output and after that it will watch this file and then create a library for me yeah so every time you do a change it will recompile react and view or you're working mitosis always and it just recompiles so this is why it might be slow when you do a change because I have to handle all the all the fancy stuff I would say but well that's a bit the goal on handling all these things so here we can see on the car basically here it's adding and updating stuff so for example if I put a space uh here you look at the change and then it will also it isn't smart so it does change one thing so it changes yeah okay cool and the meter this one no and then move it on link and oh it actually does yeah okay well and then get it and like okay rebuild everything and so on and we get everything up on the copy here so basically for react I get client here or my component already done correctly and then I just have to do a client and then re-export what they need yeah exactly sure magically done and voila same thing for view so you are generating that file for the exports is doing it now this one I write it by hand because uh I want to know what I would like to export and not yeah okay because they do it automatically right but yeah here you need to know exactly yeah I need to know what she's doing but actually you could literally do it because the one thing that I would like to to do an automation but we could like here's something for view I'm just importing exporting everything yeah yeah so now let's move when we have now our two Library so now let's move to the the fun part and next and next so basically I create two applications so you have integration here it's basically we're working with uh the team the uniform team to play with integration and storyblock for example uh we are playing with it because we are using sorry block real nice CMS you would like to try guys uh really cool so let's focus on next and next here and actually we should start black a bit after so here basically I'm just have a standard next application that I set up with uniform okay so here we have all the configuration from uniform and so on we need I could go inside but I really need your help team yeah play it really well before we go into the code of uniform let's show uniform first and then code let's continue on the next app first though okay so I will remove that close that and then come back here so basically on the next app I'm in my page basically I create a demo stuff but the most important file is this one so basically this one is just importing uh exporting a get static props I'm not yet on the app gear I'm coming once you've done that coming there so basically here is the configuration provided by uniform that with uniform get static props nice function that just give some configuration and do all the magic for you exactly so you give him what is the param uh before you're using the ID one oh I've not seen that that's nice yeah because I use ID slug is good but I because I switched I forgot to change it it's okay and then we have the preview I have a callback to handle your answer basically an enhancer is a so I could experiment this in person imagine you have multiple Source okay and what's really nice with uniform it don't store the data it only store the reference of this data that you have selected from your CMS your Dam your payment and then when you receive the object you can run an enhancer basically a function behind that you will take all these IDs and then replace them with the correct data that you would like to from your CMS and so on so thanks to that you get really fresh data no link like that until the end of time because if something changed just refresh your page it will be fetch again and it helps you to reintegrate and have this thanks to uh thanks to uniform so you don't need to have like this coupling that you have with other system where you destroy everything and then you end up like yeah ah okay the cache of this one is not broken and so on okay and the interesting bit here is that if you have people that are die hardback and developers you can just give them this enhancer business and let them do it on their own microservice and they just take the data do whatever you just say I need these props and they just output it and so you don't lose people that are die-hard back enders in this for example yeah if you have a big organization but you can also just put the announcers in your code here as you have done it I think yeah that I did at the moment but on view I put it on a function just to show up a bit but I'll show you and then you have it with next is quite nice to just use an API route for it right now yeah and then you can do your mapping inside so here we can see I have just returning a home page so I'm getting the preview I will show you after and then here you see simple uniform composition give him the data if you are doing context editing I will show it on the editor and then you use your slot here so basically is a kind of like a placeholder where uniform can come and put a component inside for you so you don't have to handle it and and all this complexity of like a structuring a page with multiple blocks inside inside so this is 100 thanks to the slit okay I think maybe before we dive a bit deeper for people who don't know all this stuff essentially uniform is not actually CMS but what uniform does it has your design system not actually the design files but it actually has the representation of all your components and you can make a page with all these components and assign data to them from any system that you want and that's why I have slots right because a component can have a sub component which is a slot that you connect to one CMS and then you get another component in the slot that you connect to another CMS and then you use this enhancer that Uber was showing to actually query these systems and get the data in but as what you said yeah that's really nice you don't store you're only using the same is the library that I showed you before exactly you've just offshore the design system essentially yeah and then basically what you do you import it and then you have a mapping to tell uniform basically when I meet this object like type header that the marketer is using basically render this component and you will take the props put it back and then have everything done so here exactly this is the way of structuring everything you register a component drop done okay and then you run it and then you end up you have this beautiful page and you know what's funny about this the component you wrote know nothing about uniform they don't care they're completely agnostic so the only thing that you add is that little SDK with the enhancer and this the slot yeah but the components themselves don't care at all where the data comes from so if you don't want uniform you just remove this and you're done yeah right you know what I mean but that's that's what we like also if uh yeah okay it's an SDK basically the only thing that's my component my design system know about uniform is this slot and what's actually interesting I'm not sure if you're going to show this for later but in a few weeks we are releasing something that makes this even easier where you don't need the enhancers at all where we're actually or you wanted to show it or not I will show it uh I think because that's the that's the the mind-blowing thing but it's coming later please stay that's really the thing like wow love it you'll show it later okay cool cool so here again for I'll show you for the next one and that's you will see why it's really it's really powerful because here canvas same logic same thing exactly okay then I go to my page kind of the same page only uh the thing and literally um we were thinking with more videos sometimes like maybe this could be also into the library because at the end it's the same code yeah it's identical the only difference is that you have to add the resolve renderer here in few and I'm not sure you have to do that in react uh I put it on because yeah it's doing automatic lighting but exactly because it's uh this is basically a provide inject in react here it's different but it's a very small difference and and except that you run this uh this one and basically this thing is just doing one thing just to show you because voila it's basically calling this kind of the same hook it's essentially the you know the get static props that you had in next that's what this one does but it's a composable in view composable yeah yeah and then to show the the enhancer inside the function basically here on the preview get uh or post here basically I'm doing the enhancing here so I received a composition call my enhancer and doing heater so imagine here I would like to do some more mapping and so on or maybe move that to a edge function anything I could because people should know what an enhancer does is essentially if you select the component in storyblock uniform only gives you the ID of that component so the enhancer will give you a way to query storyblock for that ID you can make your own query and it gives you back the information but the cool thing is you can compose with enhancers so what you can do is if you get the raw data from the CMS but it doesn't fit the props of your component you can just add in the chain another thing that maps that data it can be so powerful that you can add a dead joke in every property if you want oh yeah it goes really deep and this is the one bit that is for most developers it's not super easy so that's why we came out with the new thing that bubu will show you later where none of this is needed cheers add it to show a bit like what to explain we did it for storyblock basically oh you actually did it with storyblock yeah I did it with storyblock and basically I do both I did the integration and then we did a hand searches you see uh exact place to people so here we can see I create a rich text enhancer basically uh it's coming a because I discuss which are you will have the option now to select an object so maybe this will not be needed anymore actually but well at the moment I use the rich text and basically what it's doing I'm just getting initializing the storyblocker SDK yeah doing a fetch based on the ID that I receive based on different preview draft or not and I'm getting the content transformed to HTML and based on the component here I'm calling the rich text and getting back to HTML for me yeah and so this is the perfect example of an enhancer because from a CMS you just get Json that represents Rich text but that doesn't work on your website so you need to have some package from them probably to move that data from Json to HTML and that's what you do with enhancers and so that might be this the second or third step sometimes because if you did this with contentful our integration is a little bit cleaner you just get ID query the fields clean up the fields add the HTML run yeah and basically here I'm just releasing the same SDK from storyblock so I'm really knowing using their tool just to connect them in this part and then here you can see basically for this component here that I have when I meet the description I run this enhancer and exactly and this is the this is like the the other part of the uniform SDK where our enhancer Builder is really quite strong because you can attach data to a component or for each little property you can change whatever you do with it like remove all the spaces or whatever you want it's a little bit crazy actually how far you can go with it oh yeah that's really like you can do a lot of stuff I do mapping inside I try a lot I wanted to see you can do really good oh man I've done some things with this that I'm not proud to show but like my blog post for example on my website the HTML comes from prismac the metadata and the title come from contentful because I just use an answer to to put them together doesn't need to know yeah it's really cool so and it's reportful way maybe don't do that like don't do what I say just as I do I don't know yeah make it simpler but voila if you have the power if you need to link all the EPA that you have to link and so on so it's okay so now let's see a bit like how you could do that in the in the UI so basically here um I'm showing you like story block so basically I create like a Content quickly where I have like some offers and basically what you are seeing here uh basically it's coming from uh story block here I'm using basically the just not the UI one I like the visualization I'm just using the the form and it's really nice and so on so yeah well uh then here this is uniform so I will show you quickly but quickly explaining you a bit hard things structure you have the content it's where you will pay for your content basically you have two things that I really like and and I really love that you added it the first thing it's a footage map that's a new feature that's coming or already so this one is already out okay yeah I'm sorry out and basically it's I see it like my site map of how you could create dynamically your page basically it is yes exactly and it's really nice because like on a lot of CMS and if you work like an old WordPress that's the marketer they want but they won't everybody wants to three few but when you're in a composable architecture with five different systems there is no Tree View because every system does something else so uniform kind of puts that together and that's what this is yeah and that's really nice because then the marketer can just come yeah I want my page and I said no okay it's there go and connect and then basically here you connect what you call composition and composition kind of like however I see it it's like a component group that you can structure in a way to be able to display something yeah the easiest for people is to just see this as your page like your about page is a composition of things yeah but it doesn't have to be a page but that would go a bit deeper yeah like you can actually have a composition which throws three components that you inject in a WordPress website don't do it but you can yeah and then you have the component and I will say the nice feature that I will show here is the data type that feature for me that's really helped it's helped you to bridge the gap between any API that you have basically so here I do some testing so I connect the Shopify mock shop basically so what you see here basically it's coming from the API from Shopify it's not mock data okay so how you could do that it's basically you can query what the caller data type based on a type so here we can create integration if you want and so on I didn't do it yet but uh working on it for stuff and then here you can create a new one create a base URL add some parameter for security and so on like header how you would like to interact with the things the the API and then from that you could create some requests and handlers that you can use and what's really nice creating query what is happening yeah you know graphql in line oh no this is somebody needs to screenshot this and send it to my city yeah [Music] once again don't do this at home okay uh so you know we actually have a Shopify API connection native in Integrations right you don't have to do this yeah yeah I know but I really don't want it to to create a shop basically I was too lazy I'm like okay they just released that okay let's use that because it works very well because after you show this go to the Integrations tab so people are not too afraid of this yeah yeah so that's literally The Edge case like for me trying to push the limit and really what you see here it's like people trying to push the limit and see how they can integrate stuff and see okay why we trust like uniform on the way to handle stuff why we think it's a good tool because we already stress it a lot and see ah it works really well so here the good thing also you can create variable that you can literally do you see here that's great you see oh that's again and the nice thing that's a love you can ambade basically variable inside the strings and yeah and I really like it because then I can map a variable to my graphql directly so essentially people that are watching this we build Postman in uniform and those become your data sources if we don't have a native integration so if you wanted to go let's say I'm going to grab some stuff on the notion database but uniform doesn't have a native notion integration you just do it like this you connect to notion and you have your data anywhere you want yeah and notion or basically imagine a legacy yeah and the old school thing that all that somebody built 10 years ago well 10 years ago you want to you have to use it because voila it was yes before that you are born so you use it and that's it and basically it's how to really well to connect all this thing and you can paste everything and based on the variable that you create here for example I can say I just want to get three data boom give me the data here that I can see and check everything and the nice thing is that is with this data like a team said it's your source of data okay now this you can connect to component composition okay and I will show you that's really the mind-blowing way of that I could say compatibility because then you can connect everything you just create your API same thing here I did it for storyblock because you don't have the alternative one so I'm like yeah okay let's work on it and see how things can go same thing I just well use it I really love that you did this because storyblocks if you look at the editor later on the content editor it looks a lot like storyblock it's not like we copied them it's just the native way this happens but it also makes them not really a competition but it looks similar so there's no real integration because it kind of feels weird people are not going to do the contextual editing in one place and the other but we just built this thing and you integrate it with storyblock without a problem which is that makes it a little crazy but it works really well because like for me I think people can if they want to it's not the same job I will say like you have the CMS and I think like if you want to connect everything you have one thing okay but if you want like growing and adding like a PM adding all this stuff then you go on the uniform side and people have they have to have to think like I will move everything no no no no you can just turn off the editor side and and keep the form that I show here exactly and this is why we for example we have the same integration with sitecore people can still use it because they used it for 10 years they don't want to just move but if you're modernizing you can just inject it like this into uniform and you can start moving forward add another CMS later change some properties and you have moved for example or never move and pay a lot of license fees but you can yeah and yeah mostly speaking lets people like if you want to keep your SMS keep your CMS we don't the goal is not to push you to change and so on and and we love your story block we have already did that there so why great exactly that's another thing yeah sorry that's another thing that we we loved about the approach is that actually you have technical challenges that you you're trying to overcome but you also have organizational Channel only challenge in in big organization you don't necessarily want to have people move to another tool because yeah you need to train them again that's crazy you don't want to that's an investment you know so the more your your decoupled also on that aspect which is the organizational one where is you have your CMS you're happier system you don't need to change anything about your workflow you continue to do the stuff as you did yesterday and then we take care of the rest that's another added value of an approach like this exactly and it's very decoupled because um if you can go to the Integrations tab for a sec yep like for example here there's like a lot of different things here that you can connect to and the funny thing is as a Content editor if you have the right the admin rights you can switch out storyblock for prismic or for you know whatever Salesforce like whatever the code doesn't change you can just change the integration here connect to different things in the editor and the developer doesn't have to do much which is crazy awesome and that's the I like the compatibility exactly and it shows um a page where you're actually content edit so people that watch this understand kind of how do you now connect that data to a component so here basically it's running well okay so this is the editor that you get when you are using so it's a live editor that's really nice because then you can change everything on live I'm using a concept here it meets me this one okay this one I think it's not a but okay it's a pattern but basically here I'm using a concept of uh it's not really nice I'd really like in a uniform called pattern basically you create reusable you have the blocks into your uh into the uniform so you don't want to repeat for example the header you write it once you save it as a pattern and everywhere into your application on your content editing you would like to put a header just grab it and then you don't have to rebuild your menu every time because it's it's a composition or like it's a it's a pattern and that pattern can also be a connection to a CMS that gives you some data and the interesting thing is you can add an override to the pattern so you can just have the same hero that you want to use 10 times but in one place it should be a different CMS item you can do that and I will show you it because it's really nice because that's the crazy and flexibility that you get here I'm basically using the error Banner and I put all this default value here like refresh and so on but here I have what you call the override and I put rules based on which field I allows my Editor to be able to override so for example here this is more technical stuff like configuration that we need absolutely to be able to connect like something special into your old system yeah don't touch it and then they kind of write the title and then here you get basically choose running and then error container I think it's this one yeah you have the pattern inside and so you can change refresh and then here it's automatically changing that's really cool because you have everything online editing you actually see the live website it's just the same SDK it's not like you have to implement some preview thing no need it's literally the application that's running live inside and then you can try it on mobile you can literally play with it and the last thing it would be interesting to show I think it's the the data connection yeah exactly this one so here I create a pattern oh I create maybe click on something oh what happened I mean the demo effect that's me okay so I have a pattern here basically where I link to storyblock okay so let's edit inside this pattern I create a here an item I put a loop and that's really I think it's the first time that I said I'm like yeah they think about the loop we need to display multiple items you don't want to reproduce it so basically here with the loop component you can looped multiple data okay so here if you click on the loop you can see the data source yeah exactly you can see the data source and here you can see I'm looking for the story so if here I go back I can connect to the data type that I set up before okay and then here I can literally come and say okay I would like to connect this one so let me disconnect for example this one yeah you can do it from scratch yeah exactly voila and then here let me select here I can look for multiple ones so I have this one but if I would like to create a new one I can select the data tab that I would like so for example here let's take the the project a list of products for example okay I have back the default value that I put from my data type I want 3810 okay then I save it okay so then based on that I create it so now I can select it here I select it then I have access to what is created and featured automatically ah yes I will disability Alias yeah yeah edius he is our amazing this is like the best support because he's basically the dude who built it and he always helps us awesome so here you go and Vala you just select the edge on the hour that you would like and then you can go on the first component to decide how you would like to map your data yeah so show that so let's connect it here and then here we say Okay I want to oh you you probably need to connect the loop item needs to be the product yeah oh you don't have to disconnect oh but you can still do it I will connect you can click on the icon and then on the drop down you select the one you want projects and then here I get the project and then here and so you just go to the first one and then the loop will take care of the rest yeah all right so I have to go back maybe on the on the first one no I think you can just for in the node you probably find the title yeah there we go and now you hit connect and then connect and then it gets there same thing for the yeah so now you like it doesn't actually go back to the preview ones you select it because what you can do is you can have five data sources connect to the props like five different ones you can do any crazy thing you can get your title from storyblock your description from sitecore yeah your image from cloudinary with this connect this one and then just to select here we go here we say I want a project I want the edge I want this one and I want this one and let's just put this ID yeah exactly and then we save and then we publish uh what did I create Elias what's happening help us I know I know I know it's because I don't respect the rule and I it's something in my code because I changed too much stuff oh okay because I was too much playing so no no big deal so it's okay so I will I think if you just don't save it and then it should be go back to what you have to go back on the stuff because yeah I put too much change so yeah if you wanted to you could do it yeah so you can disable the page interactions with a little icon on the right yeah this one yeah and now refresh it and then then the links don't work then it's always just only editing exactly there you go I can play on the stuff and for example if I would like to go back on the pattern here I would like to edit here and say okay I would like to display tree for example I save well there we go and go and take the data directly from and here I save it and then and then for example I go to story block it to show you like the nice thing because it's not saving the data it's saving the ID so here I put the updated I save it here I publish on storyblock I come here I do refresh uh and maybe I have the cache I put the cash well what makes this interesting is like generally with the bigger project you get the bigger organizations they actually have teams that deal with data that um is very important like we've had companies where they say we this is for older 60 markets this is the hero with the right copy for every Market that you get to use and there's a whole team of people dealing with it and they have another team of people dealing with search results of what comes out all the time in the right order so the content editor here just gets the right things from these teams that work in their tools which means you just have to go safe and publish in storyblock right yeah normally you'll have in a big organization a team that deals with that so the content editor is in uniform literally designing the page with the design system and connecting to the right problems and the right data and you were just changing your pattern on a component and stuff that looks quite complex but generally what you do when you have such a big website with big teams The Architects set up all the patterns of how it connects and the content editor just puts them in and then is allowed to overwrite a few things and then go for it right I want five rather than three items or put this left and right because on the left item you can actually drag and drop so the refresh hero that you have here can actually just be dragged and dropped above let's say this right it's like you can do lots of those kind of things yeah that's that's really nice because you can really play on moving you know I think I have to keep it like that and you know yeah you have some container stuff going on well uh there you go and so this is so the content editor gets a lot of freedom because in the override what you can do is say make the background red that's just a variable that you have in your design system that the content editor can change but the designer and the developer set that up so it's not like Builder i o where you can do anything and just destroy your website it's actually built for bigger systems where you have things in place that make it work and the developers don't have to worry too much about all the code to connect stuff because this is the one thing that buba hasn't shown like all this data source stuff if you wanted to if you can you click on next to publish on the the three items yeah this one and then do fuse Source that's I love this fight so this is like literally all the IDS that connect right but if you scroll up scroll up and click on edge hands now uniform has done the enhancing for you and so you don't have to do that in your code so uniform has actually queried all the things and it will be stored on fastly on a CDN in the edge next to you so if you're in Belgium all the stuff that we just added here is actually stored on the CDN on the edge close to you so actually what that means is that you have pages with like 15 sources right from different cms's that brought load in 50 milliseconds and we've basically spent six months on cash purging so when you save inside storyblock you can actually very specifically say keep this for 30 minutes or 20 seconds or all of that so our cache is always up to date and it works with ISR as well with the latest next stuff which means you can build a fully SSR website where everything is cached on the edge and you don't have to go to your own connections at all so here so yeah exactly and so this is our latest thing that's not really out yet but we're just teasing it a bit here but what I love especially for my colleagues that are watching you guys took this thing and did stuff I had no idea you would do and it's just awesome yeah we literally will like the tool and uh and read the interaction that we have with the team we can create a lot of stuff and basically our goal is to we have a use case that we saw on client and so on and with more videos like every time okay this use case could we do it in uniform or what is the limit and yeah every time you come with like ID you discuss with the team like okay you should do it like that and then we try and the goal for us we like to be I will not not brag but like we are kind of ready to know okay if you need help we try a lot of stuff to be sure like we can really help you and so on uh to deliver your fast website and yeah and so what are the parts that uniform helped you with in your process I will say like old first the UI so the composition of the page it's really important because every client that we meet they want to be able to change everything move everything and so on like you're like yeah but we don't want to give you all this power you will not use it yeah they want it and most of that they don't use it but they want it in case of so exactly you have to build build it and the second part I will say is data type because then now we can really connect everything and with the pattern we can make reusable blocks so and we can really push the same logic that we put with meters is creating all this layout on component and then think okay for all this layout what is the data that should be connected to it and if you want to switch with switch and then use the editor come kind of like Lego yeah that's how we like if you're a uniform you use like the like young people like come back hey we have building blocks let's play with it and then you play fit and people enjoy uh creating stuff but voila that's really the two most important stuff I would say yeah there's another thing that I would add which I which I really like which is not technical at all but it's more on the approach which is you need to have discipline somewhere and this somewhere is we we give you all the building blocks to be able to do all the things that you need to do but you need to be very clear on what it is that you're trying to do like the way you design your content yeah the way you know where your content is stored the way you know how you design the flow where this content is coming from where you're transforming and how you're going to present it on which channel and how this is this requires proper analysis I know that it's become a bit of a bad word because with this this whole Trend about agility the people have the wrong impression that they can do whatever you want they want whenever they want but it's not actually like that it's about you apply the discipline on the things that are important to you which is your data your business once you've done that you don't need to take care of all the rest because it's taken care of and I and I find this really really powerful as an approach yeah I really enjoy it and it's all but it is a changing mindset because essentially what we're trying to achieve here is your design and the data that is associated with the design which component goes where your two column how wide is it all that stuff is design data that lives in the DXE the uniform but all your domain data like your CMS with your heroes or your blog posts or your videos or your damn system or your Bim that stuff lives on its own and it should stay on its own it shouldn't be contaminated with design data because then in 10 years you look back it's why are all these check boxes to make something featured and big here let's remove one and then suddenly a website breaks right and so you don't have a future path if you start doing that and with uniform or DXE at least you separate it out and so to your guys mind are are do you think content editors and developers can be happy together like this uh I think yes for me like I will say we should not show them all this complexity we went really deep so don't be afraid you will not touch all this thing you would be only on the composition side and that's it and it's a project map all this thing is for us developer and so on all these things you will not see it so it's really for me the good thing like they can work together on it they should not see this complexity you don't have to they just have to focus on how to design and build the perfect page exactly um thanks for that actually we have a really good question from Teo here so how does the ISR work with the project map included in uniform website do you actually see all pages so Theo there's there's a few ways Um this can work by the way before I answer that I have to put this on but because this is important because I'm here because I've worked at agencies like these guys for many many years content editors and marketers were always so upset with the Developers and with this we're kind of solving that problem at least 80 better than you had before right and you don't have to ask buba can you make me this page and connect with these five sources for me because he will say no because he's in a meeting you know what I mean and now you can do it but let's go back here so um with ISR so ISR is basically an incremental rebuild of your page if let's say if it's in if it's in a cached state or in you know SSG site like statically rendered and so the project map um basically you have multiple options in the uniform SDK you can actually query everything based on the project map or you query Things based on just a slug or an ID and when you hit publish on a page you can add a web hook specifically to that page that composition and just tell for cell or whatever who does that to just that route needs to be revalidated and that's how you can do ISR you have to set it up a little bit in next of course based on how they want to do that but you can also just put a web hook that rebuilds everything or there's multiple different ways because ISR in the new next is going to be very smart right with all the cash with validate stuff with the app directory so we'll have to see how that pans out but currently for my own website or and for the uniform website if we hit publish on one page it will fix up the edge with cache it will revalidate certain bits that you changed and then we have a web hook that goes to for sale that says just rebuilt that little page for us and it will do it and it's you can choose even now to set ISR up in such a way that when you every hour it might revalidate automatically no matter what if a user comes and that's pretty interesting for when you're run this thing in SSR but uniform just caches the thing but then every hour when somebody comes it might just revalidate that thing if you want to so there's many many options hey Philip oh we are later in the Stream more people are coming in yeah so Philip you just missed some magic man but you'll have to watch back the stream unless you've been here for a while I don't know so we're going over by half an hour because I'm so excited about what you guys are doing um are there any last words Mauricio on your end no I think I think we really really said it wrong we're looking forward to to continue this path together I think it's it's really really promising so the next step for us is really to test drive this on on a real hardcore High load High complexity project so we're really looking forward to it awesome and buba for you I will say thank you very well to work with the team it's really enjoyable to have this smart people we come every time if a kind of like Edge case and every time you have a solution and it's really cool uh to have it and shoot out to the uniform team because you're doing really great job and also like for all other people on the open source like I'm so LDN on the Astro team and so on we are really I really like all this thing happening and the front is moving again maybe too fast for some people but it's fun to watch exactly you can increase it but yeah I love it um thank you guys for showing my own product in a way I've never seen it work and that is cool because the fun stuff is all the stuff you were just showing all the advanced things that's really new also for us and so we're learning of how other people that have big brains utilize the tools that we give because we kind of have like okay this is the master plan this is the idealistic version of how you do content go and you'll see a hundred different ways and some won't work and some will and that's when we learn and that's why we love doing these kind of streams and working with you guys all the time just to see what is the thing we need because the meaning is that this works at scale so you can just throw this against your biggest customer and it should just work and that's how it's built and so sometimes the the the the startup is a little bit higher right there's a little bit more because it is built for the big scale but you guys flew through that like it's nothing so that's very cool so that's the last thing where can people find you uh uh so for me I'm on Twitter on B underscore B for double r y so you can find it on the stuff or if not mirai.u it's the let me just put that on it's our website and so on so it's a really good Belgian agency people you're gonna have to come in if you have any question or other I mean let's say you will find directly a project directly first but if I have any question you need to help like brainstorming and so on we'll be really happy to discuss a few with you and see how we could maybe help no string attached you just like this question with us and see and if you have project or anything you would like to some strong hands just come to us we'll be really happy to help you it's really nice so we if we get an elite we'll show them your way especially around here around France Belgium all that stuff so do you guys also work like more internationally or is it mainly Europe nowadays we have Europe but we also we work uh on the us so we are really we have some clients on the U.S so awesome we are trying to expand a bit on the years I will say but it's complicated Market also we're developed so yeah it's a different market and they have different ideas about agility for example working together it's it's very different I've had that experience where you just say you see it in when agencies do marketing right they do um an Instagram post about let's work agile and in New York that's a perfect post and in Europe they're like I don't care so it's it's very interesting to see how that works with agencies so I'm excited to see you guys grow and do more together this is awesome thank you it's very nice all right this is the longest stream we've had and I think Mauricio you have the last word oh really well that's a big pressure me thanks a lot for having us [Laughter] thanks a lot for giving us time and and uh and thanks a lot for those who who attended awesome uh thank you so much and um speak soon cheers everyone thank you guys cheers bye