Introducing: Mesh + Component Starter Kit with Richard and Tim

all right we are live and so welcome Richard this is our super fun live stream where we go into all the new stuff that uniform just released and so um maybe let's get started by who you are what you do and what we'll do in the Stream hey Tim yeah thanks for having me in the show like really looking forward to learning out for an hour so what we recently released like on Tuesday was like a lot of new capabilities for mesh framework which is our integration framework for uniform that I think is really a game changer so this really empowers like the business user to compose content coming out of multiple sources but also the developer to kind of kind of remove all of that glue code and just kind of connect your design system components with external data and so I'm really looking forward to jump into the session where we build some fun stuff you know I actually kind of say this is oh our good friend buba is here um what I wanted to say is actually and this is a little bit bold but I think this is what headless promised but didn't deliver on for many years yeah because it was still growing and we now started this company and looking at the space and like okay what do we actually need to make everybody happy rather than just Developers yeah yeah we're getting there now and right because of what headless was supposed to be it's I know it's a bold thing to say but what just try and then judge again right yeah and I think like when when Atlas came out um like the big promise was like that you can structure your content and break up everything into reusable pieces but I think like what was really missing on this story was like nobody told you how to put them together again and like this whole assembly piece that's really hard so uh I think like yeah like you said like we're getting somewhere yeah and the interesting bit here is that a Colette our lovely in the Stream um we tend to just put things on different places in these headless spaces and then somehow think okay but we have this whole design thing all these design components that we built how do we put those into these systems and essentially ahead the CMS should be relatively simple you model your yeah or data and that's it but now people started to model all their design stuff in it right and that just becomes a little messy sometimes and I guess Richard you have a bunch of opinions there right because where you worked before that happened a lot I guess yeah maybe a little bit about my background like I used to work at agency so it was very very early adopted I've had this Technologies um and um then I've worked at a very known headless CMS provider and kind of responsible for counter modeling so I've been seeing quite a lot what people how they are using content models or are they using headless CMS and so for me it was always very clear that what goes into a headless CML should be content that is very Channel display agnostic it should be what I call like often like stable content was the GG content like that's your blog post yeah your case studies if you're an agency your events um basically something that can take many different forms uh that can be shown on many different channels and then you have this this other kind of content that is like this assembly kind of content over the compositional content that is more related to how do I structure a page how do I lay out the page how do I maybe also select which content I want to feature so it's not this kind of pure content but it's more content that's very specific to the concrete Channel and so what I've been seeing is like a lot of people and you need both like I think that that's the key piece here like you need to have like a solution that can support both and um and if you don't have these two kinds of content like the result is a developer is hard coding all of that layout and assembly information in in their code and so this this empowers the business user or the marketer because basically they have to go knocking at the developers they're asking saying hey I want to update it here I want to have that maybe use a difference there and also and also at the same time also see this whole trend of Design Systems and companies componentizing everything like probably also very driven by the more modern JavaScript Frameworks like react and View and so on so it's all coming out all right yeah exactly and so everyone was kind of starting to break down their designs into reusable components and now you have to find a way how to actually take that content put that into my components and make it very easy for the developer to create this kind of mapping between your content and your components but also how can I expose this to the business user to take connection work in a creative way assemble Pages uh but within the constraint of the design system so basically what a designer and the developer has this defined what a business user marketer should be using so that brand consistencies are in place of accessibility is the works but performance is there because content in my opinion is not it takes a lot of kind of Polish and time to get it right and so to be able to have a non-technical user build Pages it needs a lot of preparation it needs a lot of thought that you can do that exactly and so this is a lovely way to set our context for today and we will take it even a little bit further because just having this front end in place to know how these components map that's point one right we need to have good quality but later on we need to also connect stuff to it without having too much change in your code base we actually want to have freedom around that and so with that in mind we have released a few things and so I don't have a slide for this because the idea is that we just chat and show you stuff so we're going to show you stuff soon and so what we have released first and foremost is a component starter kit and I know if you use Tailwind or any of these other lovely systems like Kickstart DS or something like that you will know what your components are you can grab them and put them in uniform and just use them right but that's not everybody and actually to show this stuff off you kind of just want to have a lovely place to start and so we have come up with a component starter kit that we think works really really well so that's number one and then number two we are also thinking about how do we actually connect stuff to these components from external sources and so you need to find a way to add data sources and data types and things like that to your system and then connect that specifically to your component so we've built that and correct me if I'm wrong Richard but that was what we like to call the uniform mesh right exactly yeah yeah and there's a few things around what mesh does and how we can shape how components feel within that that we're going to show you today there's a whole bunch of different amazing things you can do and then on the third axis that's a little bit more for the developers amongst us is that actually when you have selected all these data sources you want and you put them all to your components if you hold this sign and you hit save all of that is specifically sent to the CDN Edge where we cache it so you could have a runtime app that's SSR essentially calling our CDN with 15 cms's connected and it's still within 50 milliseconds which is ridiculous and then the hardest part there is of course hey how do I change the cache if something else changes right if an external Source has an update how does that work and we have very fine-grained systems for that in place so you can always just connect to exactly what you want and then per field it's cached and so that's a lot that I just talked about before we start showing stuff um Richard do you want to maybe shine some light on some of these things or do we just you know share the screen on rock and roll okay I think like you covered a lot I think what you but like the one thing that you said like that you might have like these 15 apis that you know might need to kind of um call it let's say when you render your home page I think like that's also one of this really key missing pieces that has been kind of missing in the in the composable world and because it's not just like that you are able to pull in the data but you have to do it in a very performant way and exactly uh people have been building uh backends for front end so-called PFS for a long time but but this is like a lot of complexity that you kind of put on your own shoulder something that you have to maintain um and uh so I think what I really love about a new new solution is like how simple this becomes like you don't need this kind of back and forth front end and that is like as you will see later in within a couple of steps you can connect to those multiple API sources but with performance out of the box exactly decided and I love to say it it's like we're not data Federation we're not a CMS we're not a BFF or backend for front end we're mixed between all of them but then agnostic to whatever you want to throw at it so Defender login is essentially zero well there's a little bit but that's kind of normal I guess you need to be able to connect our SDK for example but that's about it so yeah and I think like I'll also sorry Tim I think like one big change from our previous version of a mesh framework was like we had a little bit of a coupling of your external Integrations into your components and so one thing I'm really excited about is like your front-end components can like if you want to can completely stay agnostic of uniformed it might not even know uniform they might not even know what systems you're connecting to because um as any kind of typical front-end component you just have props that are defined that you need for rendering and then you just kind of pass in those values into those props so exactly and so we just got a lovely very complicated question and I'm going to leave that one for you Richard I know there there's a bunch of stuff around that um do you know the exact answer or do we ask one of our colleagues to jump in here I can give it a try so what we'll show later we're creating so called data types now data type is more or less like an API call or definition of an API call and on the and for each of those data types you can basically Define cache perch keys and so if you let's say have some data type it's connecting to accountable blog post content type for example then you we allow you to manually clear out the code that cache if let's say like something changes encounter for you which may be send a web hook and you can then only have apple candle dealer cache for that data type and so definitely gives you like so I also have settings to say okay this thing every 10 seconds or every minute or whatever so we will have a like a time to live kind of basic cash setting but if you really need to go nerdy and really want to be in full control and make sure the YouTube never have steal content and you can add this can advanced settings I wonder do we just jump into that or do we first you know what I think we should first just go over what you see here on the screen what we have here in uniform and then we will um get to that part with this data types and this caching and guess searching things like that so um I think these are all the compositions we've made um what I think we should start with is the core of what uniform likes to show which is how we kind of visually edit everything and so all of this is kind of agnostic so if I wanted to add let's say to this hero here I can click on this right um right now these are all kind of local we just typed it in here but you can also add like let's say a contentful hero to this or something else or whatever list that we want to use and um that is actually something that is used to be very complicated because let's say you want to do inline editing like this and you have three or four different cms's do you then Implement all of their sdks that's kind of silly right you just want one thing which is this and what's really fun about the latest releases like if this stuff because uniform has micro CMS capabilities for stuff like layouting or certain titles like browse the components for example this thing you might want to say this stuff you can actually literally type that in here and the idea is that this stuff doesn't live in a CMS on its own because it might not actually make sense to have just a string somewhere so that stuff you can all put in uniform or the fact that this header one might have to be a header two or a header three it has no sense to do that in a CMS because it changes based on where this component lives so it's context based to your design which is what we see here so this is actually our starter kit with all these different content blocks titles there's a whole bunch of stuff there's like a lot going on here and this should be enough to get you going quite fast and we've had some customers using this and they had like their first landing page to show to their boss in like two hours which is pretty ridiculous yeah and I think like for agencies that might be a really big game changer because like often you have like this very long and tedious CMS selection process and so kind of getting to a workable prototype this will website that hopefully uh first of all the components that we provide kind of also kind of solve a lot of those three typical use cases but also it allows you to work in code so you can really show super early how to a customer or potential customer what they will be getting um and you don't have to sell pictures of some Sigma files for example yeah exactly I think for me as I've been an agency person for a long long time and if you are able to change the game by literally saying you know what I'm just going to build in the stuff that's already production ready later on do some stuff about cmss or data sources your frontenders can build real things and literally just type them in here like that and then your QA can actually QA the real stuff because if you look at let's say this hero component here right this is the hair Road type you can actually hit um you can actually edit that definition here and let's if we do that you see there's a whole bunch of properties here right eyebrow text title title style description image all this stuff these things are actually the same properties that you have in your react file or your view file if we actually look at it let's find the hero see these are the component props for this component specifically and uniform for our application to give you some lovely typing which always helps right but then you have all these props here and they're just used throughout there's a whole bunch of things there's not that much um uniform in here the connection to that hero isn't there there's literally just this is the hero that's rendered by the uniform SDK and so there's one real hard connection Point um to the uniform SDK which is here in the page we actually have the uniform composition component which actually gets this composition data but that's about it and um that helps a lot by keeping this very Loosely connected right because if we now go back here and say we want to connect to something external you can kind of just connect whatever you want to these different properties and then the code stays identical because whatever comes out of uniform then only changes its data but the rest is the same so we can actually see at a few Source here um let's see if we find this hero here so you see all these properties they are already set up and when we add an external Source like contentful which we can do in a second this just changes with the different copy but the props they stay the same and the code stays the same and does it make sense when I explain it like that Richard yeah definitely and I think that one extra point to call out here is like you showed here we are delivering exactly the payload like in like you need so I've been joking internally that's where I can have said like this is like a marketing user than class Square query because basically by placing by placing the all of the components on the page and assembling that page they are really kind of saying like what data do I need exactly need and so one of the big issues like when you kind of connect to these multi-source kind of um websites where you need to make 10 15 API calls is you usually do a lot of overfishing you get probably a megabytes or could be that you get a megabyte of Json data where you might only need second case kilobyte of data and again that's where you might need to build your kind of backend for front end to again make it that performance and to hear you just basically get exactly the data that you need so what you see on your surface like that exactly that data that's what you're getting when you're calling the data from uniform exactly and so um I love that graphql thing that you just mentioned because this is very much rest right now you can add graphql sources to this by the way but definitely um interestingly let's say I want to put this one on the top here and literally just move it like that and it happens directly when I hit save now and look at whatever is now sent to the browser when you say a few source actually now it's the call to action component that's first and then the hero comes second so what our SDK does is literally just look at okay what type of component is this let me just get the parameters and then render that component with whatever that parameters are right and then there's different things we can have different variations there's all this kind of lovely stuff that helps you with your I quality science system it's not fully designed system it's just more Your Design components essentially your component Library yes so I haven't looked at my screen here because I'm just seeing this thing do we have any comments oh yeah we do whoa that's a long one foreign um oh oh oh oh oh I don't think this is what we need no not really okay so I just removed that one welcome the fact that you get spammers in your stream means people watch it I love it anyways okay we're gonna go back and how about we add a data type to this thing yeah from an existing integration that we have let's say contentful let's do that all right um so what you want to do is actually add a data type and that data type you can then later add on to either this composition and you just use it anywhere or you can make a different pattern of this component and assign the data there so let's before we do all that let's not save it and actually add a data type and currently we are completely empty and we purposely should didn't prepare anything we're just going to do it together now while on the stream to show you how fast this can be so um oh wait what I want of course is let's start with a data type that's actually based on an integration that we have in uniforms let's go to integration so you can see we have a ton of stuff here and there's a few that I made myself so you can also do that if you want that's not for this stream but if you wanted to make your own integration that becomes a very easy to use data type you can so let's go to content and go for contentful and so um that's it so now uniform knows about contentful and the fact that it has data types and actually setting up how to connect to contentful we do actually while creating a data source to add a type on top later because you can literally add any space any user account whatever you want so you can do multiple different ones so you can see before we make a type so a data type would be heroes or blog posts or whatever and then they're all coming from a source and that's what we're adding here so first you edit source and now in contentful that actually needs your space ID and all the things to connect here so let's do that yeah and why are you looking uh feel free to talk a little bit a little bit more about the contents off so like the con the purpose of the content source is like to be your API based URL your access credentials and so as you've seen like what Tim in the previous screen uh we for counter four we have like a predecet um set of fields like you need to know like the space ID the API key and potentially the environment and all of those kind of access credentials are for a data source are also stored by us because we're going to use them on the edge but they are stored in an encrypted way so they will never be exposed to anyone uh outside of this kind of screen and so we are using those credentials to do those API calls on your behalf but again uh very important like in the data source the uh stored in the encrypted way so you don't have to worry about giving us some of your credentials um so what I just did is I just logged in into contentful with my own personal account with my GitHub connection so I call it contentful thing because we can also add another one later and then here we have an archetype of the type of the data that we want to get so we could actually get images from Continental if we wanted to or we can query and search a result inside of certain things or get a single entry or you know personally select four of them so let's go for single entry here and um oh that's interesting I've seen this before I think I might need to refresh my page what do you think yeah just hit safe no for now see if that works oh yeah refresh it maybe that's an issue I've seen some very interesting things here can you explain oh this allows you to just pass in some custom query parameters in your data type okay your audio was gone for me for a second I'm not sure oh sorry about that yeah no I hear you loud and clear okay cool apologies so um if you wanted to do some custom queries inside whatever um query you do into contentful you can actually type this in here like this thank you yeah exactly and you can actually go to the contentful docs that there where they completely explain all of that um however I'm not going to do that now um the thing that a lot of people do is they include property in contentful so you can actually find your edges and the deeper things let's do that and I'm going to add the title field to be able to search through so let's call this hero and let's save and pass and see what comes out so we've now connected to these Heroes and let's just grab you know this one for example and fetch the data and so you can actually see what comes back and here in the fields you have the chapel which is basically in French it's called hat so it's on top of the the title title subtitle description and another Boolean interestingly I've decided not to have images in content from in my instance so let's see how that fits our hero for later and if that doesn't actually fit well we can also just if we wanted to maybe we can do that already let's just add another one from contentful but now let's add another space because why not yeah and I'm doing this on purpose because I know so many people that actually need to have multiple contentful spaces and it's so challenging to actually make all that work in configuration and you'll see we're not writing any code anytime soon here so let's now just grab this one oh no I need this one go for another entry and then we go to the CTA here Tim I think you're my custom issues again at least again yeah I'm sorry about that um are we back yeah you're back okay so I'm doing the same the same things and this is a hero from uniform or not this is equal to action so let's test this one so we're adding a whole bunch of data stuff here and you can see okay so this one actually has images you see okay so we can actually Fetch and see all the data that comes back all right so we've added two different Continental instances with ctas and heroes so now let's just bind that to um anything on the homepage let's go to the home and so we're going to start the easiest way which is literally just I kind of want to connect this title to the title from my own instance so what I could do is actually just hit this little icon here and say well let's do the contentful hero from Tim now select the Tim Mannix one and then find my title connect and this is now as you can see you can no longer edit it because this is dynamically coming from contentful um let's do the description I have a description here and I also have an eyebrow text because in my case it's called sheppo and so now suddenly this thing when we hit save and I'll just hit publish as well just because why not um this is now connected to um contentful but my code hasn't changed one bit so when we actually see what comes out here and through the source uh well let's move this one below again so it's a little bit cleaner uh feudosaurus and then here you can see the failure is now here I am dim or at least here um let's see where's my title Jim Mannix my subtitle and my I have my so all these things literally it just changed here so when I actually just go to my localhost that is currently running this is now coming from contentful cached on the edge that's why this is a ridiculously fast loading page because it's just cached like the only thing you see change when I hit refresh is just the font loading and so this now came from contentful but we can actually change this one for example um to another here or another thing in contentful right this one could be we wanted to do actually come from the CTA from another contentful space so let's grab this one oh and you know what we can go totally crazy actually this field we can take from the from my first space if we wanted to like it doesn't really matter anymore these just become data items and now this one is also Dynamic so when I hit save and I go to my local host here this is all I know exactly and so what you just showed like by hitting this kind of downward Arrow um like you're creating what we call data connection and so under the hood what this really means is like we just store a pointer to like this external entity to that field or the parameter of that external entity which then is resolved uh on the end on the edge uh when you kind of fetch the composition and this is what we call Edge handsing because before we had a good this is this is what we what that looks like when you feed a source initially what is stored this is what's really pretty interesting right so the hero here that is connected to a contentful ID is actually this is the ID in contentful and for our next CTA component this is the ID in contentful and so this is what's stored in uniform and then when it's rendered on the page what the edge does we enhance this and that means I'm enhancing from this ID to actually just fill it out with all the things that we need specifically for this component so when you go to the etched hatched version then you suddenly see okay I have some parameters for image title description title style and so we're enhancing from just the ID to whatever this needs to be and that happens on the edge and so we can if I hit okay it's saved so I can just um have a little look here and then you can actually go to Advanced options and here you can kind of say okay this is allowed to only specific components I've set up in uniform but also you can have a look at the catch the cache time or do we need it on the Edge at all maybe not and there are some regenerate key um to purge the cache for if you have a web hook for example so you can actually change exactly when you want this to do or when you want to purchase exactly this little data type so you could say I'm going to change something in contentful I had a web hook I fired with this key and then it's purged or you just wait for 30 seconds and it's perched or you set this longer you can kind of Choose Yourself yeah so like the time based one is like the simple variant where you don't have to code anything at all I tend to like that one I've never used a cash purchasing myself same here never has been needed and also what's interesting if you if you would combine this later on when you're ready for next server component for example or react server components they also do stuff like that so if you combine both you probably don't need to catch perching at all um so we've now added two integration type data types but I also want to add a custom one because you can literally just add any URL to this right you can actually do an HTTP request if you want to and I'm going to add an API that I built for my own website that queries the platform that I write my blog posts on so you get four or five blog posts or 10 based on my username and I made that myself because I wanted very specific fields and some in a certain few fun things and so once I've added that in we can actually look at how would I render five items that come back rather than just the one thing so that's another fancy thing here sorry Tim before you jump in we have a comment a question uh that we might want to answer before that's still cash related before we dive in oh yeah yeah that's important so does it refresh behind the scenes preventing clients I'm getting called Cash hit so we have multiple options by default like if the cache is expired the first hit would get a cold cash it but uh for Enterprise customers we have an advanced potential feature that we're experimenting with that you could kind of also buy for nutrition costs yeah and there's a few options you can do this with right like if you wanted to if you have like a lot of static data for example you can just do maybe um more like an SSG approach so then when you build your website it will just invalidate all the things because it hits it cold and then it just renders your pages and caches it in for sell or netlify that's another approach you could do but of course that also means much more build time and other things so there's there's always a lot of moving Parts in this stuff and there's also stuff like incremental static reach Innovation and so on this will also maybe help you to kind of avoid this kind of uh code cache all right so what I'm adding here is the base URL for my API and if you had any sort of query parameters needed for authentication or headers that you had to add like Bearer token all that stuff you can do that here right now this API is open so I won't have to do that because what I can do now is I have now I have my base this is my source 10 minutes.dev API now I can add a few different types on it if I wanted to for example my articles or my you know my conference talks or my live streams whatever so for now let's go to articles and it's a get that's all I need because we're getting my articles and there's a few different um variables that I need to be able to query this so the first one is actually my username [Applause] would have hard-coded this but maybe I want to show blog posts from my friends on my site so that's why I didn't hard code it so but I do add a default value because in this case I don't have to add the minutes every time and then there's another one how many I want to see per page and let's say we're gonna do three and also add this by default but you don't have to so we've now added two variables but they need to be added to the query parameters right and these names can differ they can be whatever you want and actually I want my username and what you can do here is actually select username and you see it becomes this variable but you can do pretty cool things you could actually if you wanted to concatenate this stuff don't need to do that now but this gives you a lot of flexibility now we're in the nerdy Weeds now I really enjoy this stuff all right so what we have built now is this it already says Tim Mannix and three because those were my default variables so we can actually hit save and test and let's go and see what it fetches for us and so it returns a result and these are my three latest blog posts and I could also go to my blog um publication platform and do the same thing but I wanted to have these nice fields so I've done it this way myself and so if you have any sort of Legacy API or any sort of microservice that you have created you can just add it here and just connect it as anything else right so now that we have that let's go back to the home page and actually now that we have three of those we need to kind of render a list of items right so let's do that now if you scroll down there's this lovely component why don't we just call this latest articles oh um interestingly I I don't need these actually is stuff like latest articles this you store in uniform because this might be completely volatile you might change this next week to call it best articles or whatever right so this is something you store in uniform but your articles themselves are something you can is portable right you can use it in all your projects that's what's stored outside and so you can see we have these three lovely grid items here so what we want to do right now these are actually kind of hard coded in a uniform micro CMS here but actually let's keep them in but what I want to do is Loop over the data that we just set up and show that off so I'll leave them in and actually what I'm going to add is the following we have a lovely component called Loop and this is a component created by uniform and so what you can do is you can actually select the output of your API to that Loop right and so let's add a new data thing to this composition and these are my articles and you can say per page well we wanted three right and we have my username Okay so we've now added this as a data resource to the page and what means sorry quickly also to interrupt so maybe when you go back to the turtle screen where you kind of configured it you also see like all of the variables that you defined in your data type they are immediately available for editing so this is something that HTTP request data type brings you out of the box so if you have any kind of dynamic variables you'll be provide you the out of the box UI and then maybe you can go back and show you yeah I can probably disconnect and connect it again so you want me to make a new one yeah add a new one so what did you want to see so this per page this end username this word is two variables that Tim created and change it here right yeah and so by defining the variables those are immediately editable if you don't maybe would like to have if you would like to have a nicer UI for your editors in the future um then you can use a mesh custom mesh framework to build out your own UI where we also have design system components that make it easier so if you remember when we looked at contourful where you had this nice entity selector all of that is provided for you and you basically just have to connect your API URLs to get that editing experience so we don't have time in this stream to show you that but what you can do potentially is just make your own integration into uniform and use our little SDK and design system to make this whole experience a lot smoother but for if you just do HTTP you can just do it like this and it also works so what we need for this list is Select this result so it's not going to Loop over three things and now where the magic starts is that Loop understands now that there are three items right so now I can actually add a cart and you can see it knows there are three things we just haven't selected anything so what we can do is actually now we can connect this title to the title of whatever comes out of that Loop item and you can see this dynamically starting to fill up so let's grab my description there is an image and you know what we can do I can actually add a badge and let's add the date this doesn't look great now but we have something later that to make that look better um let's see let's do the batch style in red why not and let's keep it like this for a sec and so um maybe do we want a different style nah I prefer this one of course we are using our this the component starter kit we build right now if you don't want to use it you can build your own components in view or react or whatever and all these properties are just mapped into uniform and then you can do whatever you want with your components um so there you go and so now we have dynamically set this up and so I'm saved let's just publish this thing and then I'll just go to my local host and actually refresh and you'll see this is now directly connected but I haven't actually touched any code yet so we don't have to connect all this stuff um so Richard what do you want to do do you should we show component patterns or should we add the extra hooks we've added to clean up this date in the code let's thrust your patterns because they are super powerful and I can also maybe give a quick into what patterns are and uh why we introduce them so yeah so why don't you talk a little bit about what these patterns are while I'll surely show on the screen what that actually means so happens already existed in uniform in a different kind of context before we introduce this new kind of capabilities and the like the original purpose was to have reusable components that you can use on on multiple Pages for example so let's say you have a hero that I want to use on three or four pages um and now we added a lot of more capabilities using the data connections and also allowing you to override certain settings and so one of the main reasons why you would want to use patterns is like as Tim shorty before you kind of go from component or to to component and parameter to parameter you have to do this mapping between the external data source and the component parameter and not every business user would feel familiar with kind of going through an API response going through a Json field and so once you like so taking what you did until now works really great for developers who feel familiar by taking through Chase responses but for your marketer they just want I want to show a blog post in a card and that's all the context that they they want to have and so by um and you can do this basically with patterns so patterns allows you to kind of take the external content decide what component should be showing that external content and combine that mapping there and additionally you can decide should any of those parameters that you have on the component be overrideable by the author so as a developer who's kind of setting this up for a non-technical user you really have a lot of flexibility to decide what the editorial experience should be does it make sense yeah it does so I just went to well I just I can just go back to where we were before and so we were here and so what I decided to do is like okay let's grab this hero right now this is the one that I connected right I connected all this already so how about we actually disconnect and just keep it back to what it was so it's no longer Dynamic so let's just make this a version of a little bit of blah blah whatever it doesn't really matter right so we just created this let's save this so this is our default out of the box version of a hero you can literally if you wanted another hero you just click hero there you go you can type some stuff in and it all works right so just quickly remove this because what actually we want to do is remember we just connected to two different condenser sources so how about we make a variation of this hero for both of those sources and we can do that with a pattern right so let's save this first though okay we can actually go to the component definition and interestingly as you of course you have all these props for your component and so a pattern doesn't mean that you connect it to something externally and that's it you make a pattern of a combination of what all these properties do right so let's create a pattern that is actually hero from pencil from the theme instance so we are now in the pattern Creator and so um here again we have these lovely I this lovely little icons right so here we can say you know what in this case I want no background image so let's let's set this one to default and let's select the eyebrow text from the contentful team hero and let's connect it to just the default timbenex one so now we've connected that and you can say you know what let me just grab this title and so the idea is that developers do this so that content editors don't have to and you can kind of say you know what in this context it's going to be the header too and also the title is actually not correct let me just put that to the title and that to the chapel and then this to the description and let's not add the image and let's keep it like this so now what we've done is we've said this instance of this hero component this pattern is now connected to that one specific thing and then you can have a look at overwrites where you say you know what I don't have an image for this data source I'm not going to override the variant selection of image left image right because we don't have that but I might want to change which hero I'm selecting from condental and I also might want to change the fact that the eyebrow text I might want to overwrite that and also um the header the hero or the title style sorry because I just selected a header two right but maybe in another place it tends to be a header three or a header one so you need to give them that for SEO visibility so I've now you know what let's not do this but just the hero style the title Style so let's publish this one now and what we have created is a new entity of that component so when we actually go back to our home page now and we want to add another extra hero we can do that here 's our original hero and this is the contentful Tim hero pattern that we just created and that is by default connected right you see these are a little locked now here and that makes it really interesting because this one is actually overridable so let's make this ahead of one again because maybe here I don't want it to be a header one this is two don't do this but you know as an example and it's magic it's a little crazy isn't it and what's so lovely about this is we set the overwrite to whatever we want to select from contentful so you might actually want to say replace and I don't want to have this I want to you know I want one from my um let's see video creator that's the one that I want and now you can see there's no eyebrow text for for for the video creator one but there's a title and a subtitle and so you can allow your content editors to say overwrite so this is a header three now and I select which one I want but you might actually want to do that differently and say if you can get something back from algoli a very specific search result for example you might want to not have them override this but dynamically let it be the best match and so they can only say you know what I wanted to have it four or five or I want to have it look a certain way and you see now we created one version of this hero but now let's create another one and maybe one other quick thing to have I think that this is super powerful because like often when you're pulling data from an external Source like that paid data might have or that content might have been created for a specific context so maybe it has a certain image that has let's say it has a dark background but in the context where you using it eat that by that image might not work and with overrides you can basically just take replace that one image in that exact same particular scenario while keeping the original content in place because well if you change that original content you might not know the 10 other places where that image might be used so you might kind of be introducing an error but for that one particular change you can locally and adjust the content yeah yeah I'll show that in a sec actually I'm I'll show that right now so um I am looking at the title connect oh no I was looking at description text and so for the image there is an image field here in contemfo file image you see so the image is graphed here and then we have the description and so there's a few things for the CTA now that we have that looks good but in this case maybe this image is kind of strange for a background um so we have a few options to solve that we either can say in the override you know what let's allow the variation of the component override so image left right or background let's in this case not allow what the content is that you can change but maybe we want to be able to change the image URL so let's save this one and so we've now created yet another type of hero that your content editor can use so let's add another hero and now you can see there's the CTA one we just created and so the image is connected but I've not set the variant because I've made it overrideable so let's just do this and you can also set this in the pattern that it's always left or we can say it's right because if this one is background it's kind of awkward as you can see so um what you might want to do is actually find let's see let's do a large image of coffee beans this would be like nope normally it will open oh in four pixels it just downloads it with let's grab another one okay come on Google you can do it because it if it hasn't loaded the big one yet it gives you the base64. here we go so I just grabbed this image and I can say you know what let's do this background but let's overrule this image here so I can just say disconnect paste my own and there we go and I'm not saying this is the best one I just literally grabbed something but it's pretty cool that you can do that right and so it also depends on your own component Library if all these options exist of course um but what I can do is that we have now these three different ones that we've created and you can do all that also with the loops and basically anything goes and you can also say let's make a pattern of five of these components together and some are connected to something and others are not right you can go very deep with all that stuff and you can have like full sections or maybe you would have like something like a feature product or a product list section and then you kind of decide what kind of data kind of uh you want to move into that that could be uh based on a query like my latest type uh um products or you it could be your manual selection um and especially various powerful in combination with personalization because it is really easy to set those up um and you need no developer it's very straightforward for example this website I built this one recently with of course uniform because why not because that's my job and so I I didn't do conference talk with guitar right and so I needed a landing page this page was built with my own design system literally in one minute because I just knew I have a few things that I need to connect images cloudinary cloud and Airy this is just text from uniform these are actually a playlist that I select from YouTube that is just something you need to share your screen I'm not sharing the screen all right I'll go back and say it all again so um I do a conference talk where I play guitar and I use all these compostable stuff and so I needed a landing page and so this is my design system so I have a hero as well and I have a two-way two like two column component and this image comes from cloud and area as a source and this is a playlist of videos about my conference talk that I just grab from YouTube with a data type these talks actually come from contentful and you can see how easy it becomes to build this stuff and I can literally make another page now that looks the same and like this is just another data source that looks at all my live streams or all my devto 2 stuff so anyways I wanted to show you another thing that makes this so so fancy and so easy to use um so what do we what should we do do we go down and dirty and code something I think after that right because this is the thing sometimes the data that you get back from your API even if you select it in uniform you might not exactly like it a great example would be rich text from a CMS is generally Json bound it's Json based and then they have an SDK to make it from Json to HTML or for example when I share my screen again and we go back to here where we have this lovely list of my blog posts but this date comes just out as a normal like node.js date object to string this is not exactly what you want to put on here right no not really so what we've added on top of this Edge hanger thing that we built um here this one that automatically Works we've also added the ability to hook into that and then before it goes to your component we can actually add enhancers of your own if you wanted to and you can do a whole bunch of fun stuff with that because you can literally just for any component added that joke to all the props or map this date into something that's actually readable or whatever you want right so you can even do checks is this image even allowed to be on the internet let me do a quick check and then render it or not render whatever you want and so let's have a quick look at this code um this is literally the starter kit that comes out of the box with uniform and I have to be honest I don't even know if this has the enhancers in it set up by default do you know Richard I'm I'm not sure myself I don't think it does okay then we have to do a little bit more coding yep that's part of the game I kind of like that because we have a lovely new documentation and also we have um a bunch of cool people in the Stream that can definitely help us here oh and look this is nice component template is a killer feature yes it is we think so too thank you I love that um so that's actually just um yeah I know this code base is relatively light because it's the out of the box starter kit should we just go to the docks find enhancers put it in and if that takes too long we'll do it in another stream where we go down and dirty because there's there's a bunch of other things we actually also want to show you by adding super cool live data without writing one line of code but that comes after let's first do the enhancer business okay I'll share my screen again I'll just go to the uniform documentation and answers so let's see if here this is of course explaining everything you can do so you can literally say for this component type add a bunch of parameters and do whatever you need to do with that um what I kind of want to do is figure out how I can do that best in a react application that we have running right now um so is there a starter with all of it in I don't think so what do you think and which is the best thing we probably would need either a data or parameter and so yeah exactly so what I can do actually is go to GitHub to my own website and just quickly graphical that I'm using Just For Speed purposes and actually it kind of makes sense that there are no enhancers in this starter kit because normally you shouldn't have to use them per se so um I think I'm doing it here um let's see I love this in the Stream because we're literally just finding it up from here I'm not even sure if I'm enhancing in my website because it works so well there you go line seven you have import no the file previous file that you had opened yeah here we go foreign so we have an answer function that I created here so um let's see lip uniform enhancers so we kind of need to oh you can see I added it in but I'm actually not enhancing because it wasn't actually really necessary anymore because the more we've added with this lovely new mesh feature functionalities is that you can kind of curate your own output so you don't have to do much but we can still grab this right let's see should we just do this okay so let's see if we actually have this package at all oh it looks like we actually went so far back to Simplicity that we don't even need these packages that's pretty cool yeah big coolers to the whole engineering team at uniform like they make huge changes and and all that that's crazy it's like it got so simple yeah it's it's almost ridiculous now okay so we don't need the cloudinary one okay so let's say um how I get to this run enhancers while this is installing oh it's already installed okay noise Elias is also saying in a chapter for this specific case we could also just do that in a component it's true like we could do it I did formatting in the component itself yeah this is true like because a date is a date essentially so it's relatively simple so you know what I might make the executive decision to not do it in the Stream because it's already we are an hour in and we kind of want to show some other fun stuff that might not need this enhancer so what we can say about enhancers is that every component that you have for each component type you have a hook that's called an enhancer that you can run in your local code or on some microservice that you put on a serverless function somewhere that can then say for this component the data is this or for this property change the data into that and then you literally just modify whatever data comes in from uniform SDK or from the uniform API you change it on your end and then you push it to your components so it's still a separated bit and in my case when I did this before when we relied more on enhancers I put that on a separate surface function so I could still actually change it and go from view to react and it still worked and so hereby executive decision made let's not go into it because okay I didn't realize how little we have in this starter kit and then it could work right it's fine it's just a bit of coding you just see me stumble on like oh yeah it's like a one-time setup that you have to do if you're adding enhancers and like usually you wouldn't need them it's really like for that kind of the final data massaging bit that is yeah exactly all right anyways um Richard tell us your idea for the extra fancy bit that we wanted to do so my idea was that we're adding live weather for like a city and kind of show a better card using tailwind and so basically the idea is we create a new component from scratch the only coding that we're basically doing is creating that component so that it's available and then we're gonna use mesh to kind of pull into the weather data and connect it to that component all right let's do it what do we do first add the data source let's do first let's grab the data first so let's maybe go to what they called open weather map API I think yeah okay so and if you need an API key I can also search for you know what you have one right yeah I have one so just put it in the chat up put it in so I don't have to make a whole account yeah let me do that okay so let's go back to uniform and actually add a new data type for this open weather map give me a second yeah sure sure oh and I might want ask you to to give me the the URL and the career parameters as well okay I'll I'll go off the screen for a sec so you don't see his API key which is important so this is yeah so the idea is like while Richard is getting this for me is that um we're going to add this data type that has the weather base for a certain city for example okay so I'm just getting this from Richard here um and so it gets that data back and then we're going to add it to components through uniform based on its props and that should be relatively easy to do so wait a second okay so I have my base URL here then okay and yep you need to and it's a get parameter called app ID you can also put that in our side check here thank you so that's the data source okay so um this API key I have now how do I add it in where do I add it yeah so here you put app ID like this and uh yep and on the value you put that API key this one yeah it's fine like I can delete it after the stream yeah yeah we did all the due diligence do you give it to my private ID and then now I'm preparing it anywhere um that's it do you don't need anything else no so that's the data source now next we need to create so save that and let's recreate the data type so the concrete query by the way this is cool right now it shows us a secret because we added it in the source rather than any type oh and that's a get so that's okay then okay cool yeah that's that's a cat and then you create a data type um from in the next step I have the data type yeah and then what so that's I sent you the end API endpoint yeah and let me quickly open that on the side then add one uh variable called City okay so it's a weather type sure okay so it's slash weather and we add a city parameter uh variable yeah oh sorry variable yeah it's important and then under query params you have unit s into law units and what it should be and uh metric as a static value so we want to have Celsius and not Fahrenheit oh yeah we're just gonna go metric because we're Europeans and next time we'll do Freedom failures yeah and instead of city as the query Prime call it Q the query just Q okay yeah that should be it and so put in something like so test it and see if we put in something like Paris or Berlin or and see if we get any data there we go you see how fast that was that's crazy I love it so we have wind clouds all the cool things I like it all right so now we have all this data in uniform so um let's actually make a component let's call it a weather card um okay so what well before we know what parameters we need we kind of need to know a weather card yeah let's maybe build a component first and then we kind of Define it later from there I'm just gonna go crazy and click this is this something you like or did you want something else well it looks good simply enough you can tweak it later yeah we can always tweak a little bit because we probably need some icon or something but the time is literally flying we're hour and six minutes in so let's see how far we can get all right so we need a new component I think we put it in canvas yes of course I just pasted this in I don't think that's correct but we can do is just look at one of the simpler components and just grab it so we need to grab some props first for that we need to import whatever that type is yeah we need this one we need this one we don't need this for this one okay we don't have a variant there's lots of stuff going on here yes this is what we need welcome to a few person writing react I actually enjoy it to be fair I actually really like it um I like both I don't know Joe types good but it's just because I'm not the engineer anymore for me it's just I'm old school okay so these are those props right so let's have a look in a second what these props need to be and we need to not do it like this yet okay so just clean that up a little bit all right so this is not a function that needs to I guess return like that and then HTML goes in there right yeah exactly all the react developers in the Stream are face bombing how this qgs dude does this but it will work I promise why is this complaining maybe because yeah probably because of all the class name you have to have to maybe when you copy the markup or maybe there's also a GSX version so oh it's there no it doesn't look like it okay there's just HTML that's just fine it's fine okay wait we can solve this oh class name is everywhere already except they call it the same react this basically copy and paste from other projects there's a red color okay so it is really complaining though okay do you have to last last packet do you have sort of export default something yeah I need to well of course it needs types maybe that's where it's complaining is it types and it needs a export for here but I guess like that's not it ah yes let's see if this one has that also uh oh let's just grab this yeah yeah we don't need all this stuff though we just need to do it oh yes just keep it simple but we don't need variants and the component needs to be we'll cut this up on I think it's even still called hero here okay so it's getting closer now so why does it not like this FC's missing import yeah maybe functional component something oh yeah but we don't need to use memo okay so we have a few things let's make set up some types I just want to see if there's any comments about me doing crazy stuff let's say well this looks good okay it's basically like exactly like colored it's just copy paste all righty then okay back at it all right so let's have a look at that design though okay what do we have here this is the situation location wind humidity is the temperature and temperature and time so let's see in our in our data type what do if we get back all that stuff so let's I do want to save this otherwise we lose it let's first have a look at that data type weather test oh Okay so a few clouds so we can use the description for a few few classes does it have something like that in here it doesn't really look like it no but we could use that instead of the icon or like there is a hack on on the API to get an icon from The Source but I'm not sure if we have the time to do that no we don't for sure anyways we can get the temperature here yeah we got it on and off but that's just something we can do in the fountain component exactly but look this is looking yeah we can do the rounding locally okay so with temperature we have humidity we have wind speed and we need I think so we're very close so let's just add some props that we see so we have City oh do we get that City actually this location yeah that's somewhere all the way down there we go further down here okay perfect um let's go back to that component the weather card and let's add some fields so let's call it location okay what else do we have temperature so as you can see we are just literally just thinking about whatever props we want and then we add these into code as well of course if you have a design system yourself you do that the other way around could you even turn it into a number but I don't know if it comes out of it of the API like that let's keep it like this is fully time for now uh what else do we have uh humidity humidity okay we have temperature wind humidity and location um wind humidity temperature looking I think we're good with this for now right yeah we can just to show please yeah exactly um do we need to allow it in a slot or is it already allowed yeah but we have to just put it in page content to be safe um all right so we now have created the four properties that we need and so let's also put these um in our code so our props are I think we have to do it like this I think so yeah like I said I'm not a typescript expert yeah you should just do that part yeah so it's just never used now so location is this a bad boy I guess it's supposed to be like this I'm not sure if the react people will like me doing this but for now I'm good okay so this was delivered sorry keep it a little long dirty for now just get something on raw and dirty exactly wings and maybe give it a mask around yeah we do that after okay yeah we can't nope and then here we have temperature of course this is not the greatest god let's be honest but it's fine definitely not it's just to show that um we do the only thing that's now relatively connected to uniform is the fact that we registered in uniform the thing is you don't have to do this in this component you can also just import it elsewhere and then register all of them in one file plus that the props come from component props that's a type in uniform canvas but the rest has no idea about uniform doesn't need to know right so this weather card is now a thing and have we called this correctly I think so okay so yeah double checked yeah these namings need to combine properly so now we should be able to add our weather card there it is oh somehow something is not happy with me because it's not running I really enjoy living on the edge in a live stream and just trying it there it goes okay so somehow it doesn't actually know weather card yeah we need to import it somewhere where I think well we have registered it right yeah but you it could be that um probably here yeah this is it this is it classic mistake oh yeah this is normal stuff man this is always part of the game all right oh yeah oh yeah yeah so we now see that all the the things are actually there but they're just empty right and of course we didn't do it exactly defensive coding let's be fair but the idea is there so we can literally just go and say let's add a new source to this composition that source is the weather and the city is Berlin so now we can actually say okay what we're looking at location that was set to name right yep Berlin there it comes there's it there it is temperature I think that was here hey that's interesting I cannot select it ah because it's a number so we have some type safety there oh okay good to know let's see if if the others will work wind also number okay humidity probably as well okay so we can solve that so we should have done it a little bit a little bit better you have to delete it and regret it Ah that's fine we cannot change luckily it's not that many no as always as you should have just listened to you I think it's not an end but a decimal uh I think it's two yeah okay so this should be okay nope okay let me solve it I think we did let's try again I didn't hit oh I did hit save okay okay so let's see if temperature can now be connected yes here we go wind we're gonna do speed right yeah so um for now let's keep it like this for a sec because I think I actually um oh I need to push this to get so actually my first cell Updates this so let's do that now just a perfect commit message for a live stream okay it's building now would be nice if it worked right I have not tested this yeah but again we're living on the edge in the live stream because we're Developers and the beauty is if this works that data from the weather is is kind of sourced for 30 seconds on our CD and Edge okay so it doesn't like something with typescript here let's have a look oh wait did I add something for the enhancers that destroyed this no like it's complaining their client that line before it's not assignable to oh I do not know what this is I'm so sorry it did run before but we have updated a few times since I set this up on for sale um it could be this might be due to version mismatches and do we have anyone in our chat that can help us with that no okay let's see let's do a run build locally and see if we can solve it all right we might have two canvas versions in npm modules this is what I was thinking because this it's kind of like we just did a quick update oh this is it we just released 13 today and when I installed this literally a while back as in an hour or two ago it was still 12. so if I now go here and solve it like this we should be fine this is so awesome about daily releases an hour later a version number can change it's insane but also it's not like it's broken I just need to come on with the version okay I'll just do it by hand all the 19.12 ones need to go to 1913 I think do we have any other looks good oh yeah here this one actually I just added that canvas package to do the enhancer so if we didn't do that it would have been fine I feel like I'm being judged on my commit messages but this is live streams we're good uh for sale again so time is flying and we're running out so let's see if this works and if it does we're happy campers and if it doesn't we'll do it another time because we have actually decided to do a lot more live streams about our product itself to talk about these things and then people can actually come in and use it that have specific questions and then we figure it out together and the lovely thing is that we have um all our colleagues in the Stream to help us out which is super super cool it looks like it's working by the way I thought the rest was really really fast what's happening could be it's not my internet right no uh oh it's generating static Pages oh interesting I don't think this is breaking because what I did is like one of my components just doesn't have the eyebrow text so it actually now made it an SSG essentially this is why it's taking a bit longer and this is just how the setup is because this could also just be server and there we go and so what you see now this stuff comes from the uniform CDM this stuff as well this is just Dynamic this is just statically added in uniform this one is the contentful from uniform this one is contentful from me and there you go and now we have this page oh and these are my blog posts yeah cool right I think it's pretty amazing and like the speech that you also see like when uploading the page that's really mad well of course this is an SSG page now so it's so fast that if I hit refresh it's like literally the same but you can also set it up differently so it's not an SSG page and then the speed is basically the same which is pretty crazy isn't it anyways um time flew by we made a bunch of mistakes they made me happy because we fixed them or we made executive decisions it is what it is um thank you for your time if anybody has any questions feel free to ask them now or if you got excited and you actually want to try it out and you don't have direct connections to either Richard or me or uniform you can actually go here to uniform.dev try and you will get a form field that you fill out with your work email that's important to put your work email in and then it literally just comes to me or to our CTO Alex and then either either Alex Ori or both of us will reach out to you and then we'll just give you a little bit more of a good demo rather than this clumsy stuff where we just literally tried stuff because why not but we'll give you the story of why and then the house and then afterwards we set up a Sandbox for you and you just get run and do fun stuff so do you have any last words for us Richard not really like I really enjoyed the session I think we've got done what we wanted to do exactly anyone wants to reach out to me has any further questions uh feel free like my Twitter endless at Richard Balzac oh yeah let me just remove this so we can everybody can see let me just remove the banner and then you can see in our names here on the side so you can reach out on Twitter um you can also go to our Discord if you want to and let me put that in oh typing typing is always a thing right here we go so you can also go to Discord and then ask us any question that you want and we're all on there like there's the whole uniform team there so whatever question you have we have people that help anyways thank you so much for watching and I know this was a long one but imagine if we hadn't explained anything and just started building we would have been done in like 10 minutes maybe 15 if you didn't look at my terrible typing right so you can do all these things without much code and without much connections because it all lives in uniform and on the CDN so I'm really excited about this stuff all right that's it cheers everyone um to reach out to us and then we'll talk bye