Ultimate makeover. Make an existing Sitecore solution modern and composable

all right we are life and this is a lovely new type of live stream that we haven't had at uniform before and it's called what Legacy and my lovely colleague Alex who is actually on the stream with me came up with that so Alex why don't you introduce yourself for the people who don't know you yet and also what you want to be doing in this stream series yeah happy too thanks Tim um hi everybody so the live stream is called what Legacy um and we're going to be talking about a lot of interesting subjects here um so I'm co-founder of CTO of uniform and in my prior career I spent 13 years at psychor doing all sorts of technical things and uh so so the the ecosystem and the community is still near and dear to me so this uh live stream series it's not just gonna be about psycho which is going to be about establish cmsdxp uh systems uh and and how how they work with with modern composable front-end Technologies but this particular one will be focused on psycho specifically so I'm excited about it there's a lot of uh stuff we have in store we're actually going to be taking more of a practical approach so instead of killing you with slides we're just gonna show you with with um what's what's possible and show you magic happening from scratch creating things in front of your eyes so exactly lifeguard is the name of the game we like living on the edge figuratively and actually in real time because we're going to do some stuff on edge I imagine um so I'm just gonna we we will start with a few slides right so I'll put something on that you came up with um for this Stream So when I saw this slide I was like holy moly lots of things so what what what is this stuff and this is just some topics that areas that we'll be covering not just today but um next live streams as well I think challenging the notion of Legacy that's why it's called what Legacy plain words here uh where we we will be challenging the preconceived notion that you know you need to do full rip and replace and you need to learn a bunch of new skills um it's partially maybe true partially but we will be challenging that uh it has to be so dramatic so we're specifically talking with with the psychor community and we will be using a mix of Technologies here a mix of Concepts like established Technologies from prior decade and what's what's new in this new decade we're gonna be talking about composability what like our take on composibility uh true composibility uh what is experience later what is experience modeling but I think what what will anchor and this is something we see from our customers that adopted uniform uh together with psychor they they see um opportunity to reuse a lot of existing CMS skills and content information architecture modeling in this New Concept with headless Technologies with with composable architecture so this is really exciting and I think this we need to unpack what this means and and connects uh kind of both to to worlds and two bubbles together I think that's that'll be fun and so quite interestingly they're probably not that far apart and so what you just mentioned about this a lot of people who've been working in like an older system or something that's not super composable yet all these skills are transferable you still need to understand data you still need to understand modeling how a front-end connects and lots of that information is out there already so I'm kind of excited to see what you come up with um of what stuff is transferable um I like to people okay you can actually move the slides there we go perfect well so uh specifically we want to spend just a couple of moments to talk about context setting because just showing things out of context may not lend well um and because there's many things happened um in uniform uniform transformed um many things of over many many times over the last couple years so we want to kind of bring you up to speed into what what we can do what we do these days um and just jump into walkthrough um and we'll finish with maybe some q a next steps so that's the plan um setting the context what is so what is uniform uh if you ask different people in different times of exposure to uniform they'll probably have different answers uh so we started with uniform for psychore product this was our only product back in the day back way back in the day yeah startup years right uh similar to dog years like this startup here that's that's ancient it to me when we had that it feels like 17 years ago yeah sounds about right exactly that that in that product on the version seven now so that's that's exactly yeah the versioning um almost caught up with the psycho versioning so um some folks got to know us as as a tool for headless same as as a personalization it'd be testing capability that kind of plugs in that Gap but recently a couple years ago we there was a uniform 2.0 conceptually which which is a lot more than just those things that I've mentioned we still have a uniform for psychoproduct uh but we we've matured our SAS platform and we have um we have shaped what what is known as digital experience composition platform and this is really exciting this is very um It's A New Concept but it should be familiar to to folks that joining us um from cmsdxp Landscapes if you think about a dxp architecture that would be built in 2020 it will be composable right it will be multi-source um so you'll be able to connect content sources from maybe you know ecosystems that never talk to each other uh so imagine psycho Oracle Salesforce and Adobe sort of products working together in in unison I mean why not um there is a whole plethora of powerful headless API first Technologies so it doesn't have to be established Technologies or exclusively headless Technologies it could be a mix and this is where uh uniform mesh comes together to connect all these content sources and bring it bring it over to one page this is we we call them compositions we don't call them Pages because compositions can exist in in other channels in pin positions are built out of components and they're built in a visual experience Builder we call canvas so that's that's kind of how these two layers come together and on top of that a really nice sweetener is uniform context that is both configuration of personalization EB testing and execution of personalization and a b testing and it runs at your CDN level of choice that's why we have this nice Edge layer so that's there's a lot here to unpack and we're actually going to be focusing on mesh and cannabis and I'll walk through and see how this connects to psychore as as the content Source we're going to start with one content Source but we can add as as many as as we want um and maybe in the next live stream we kind of build on top of the story and start adding more uh more more and more Integrations um so that's that's uniform as of now and uh things change rapidly so next time we talk maybe this is updated other stuff will happen I think before we go to our one of my favorite slides in many of those decks um this doesn't like if you want to use uniform and put put sidecar in it doesn't mean that you have to stop using site or you can of course but you don't have to it's just a lovely different way of solving this puzzle of what is a composable architecture so I just wanted to give that like one extra little thing because sometimes people think oh we cannot use psycho anymore if we do something like this but that's really not true it's just a matter of you know looking things in essentially and then yeah yeah sorry that's that's a challenging thing to do but it's also you will see Alex will be doing that in the Stream and it's actually relatively easy and we'll do it without the glue code so now that's a lovely bridge to this great slides but it's one of our favorites even though we will have a technical high booba we have technical audience joining I'm actually gonna stay away from a code as much as I can and planning not opening up visual studio yeah this is our challenge more clicks less code and you'll see that it's still cool I promise so what is that we gonna do well our goal here is the old the ultimate makeover of existing psychor solution built a few years back using MVC and extend its lifetime and instantly modernize reuse existing um Investments and we're gonna chop off the front end completely connect it to a modern front end and to help you conceptualize here's before and after so we're gonna take that solution we're gonna discard anything related to The View part in MEC uh so all the rendering will be taking place uh in nextgs outside of CMS powered by canvas and and mesh and we're going to move instantly from a monolithic architecture so from this gray monolith that think three layers inside of mostly any CMS built in this era there is content layer at the bottom presentation layer an experience layer on top so presentationally this is where your pages layouts renderings uh sit and and personalization a b testing analytics this is it's built on top of that presentation layer it allows you to personalize on component level so we're going to move from that to a composable architecture just in front of your eyes really and this will this will allow us is to move from origin based uh processing and rendering personalization this means there is a server or a set of servers somewhere in one data center maybe a couple if you have enough money to completely CDN paste approach right and this means that you can move from single Source experiences meaning that CMS is is the only content source and if you need more you integrate through a CMS which can be complicated and inexpensive will move to a multi-source environment so this is after so you can see we're gonna retain the content layer usage but we're gonna move over in this case we're essentially going to reconstruct the presentation layer and experience layer in uniform and see how easy and fun it is but all the content will still come in live and it will be cached by our Edge Edge site enchancing infrastructure all around the globe so that's the plan let's do it right let's swap sources and we're literally just going to go to your um this is your screen and you have nothing and so we're going to come up with some awesomeness here on top of that I have empty project here so I have a team actually no project so I'm actually going to start completely from scratch uh what I'm gonna be doing instead of building code in front of you because we do need some presentation code to render our goodness we're gonna use component starter kit and this comes with a few components already in we can reuse there are some Heroes with a few variants there's some card blocks we're gonna use and these card blocks can be rendering any sort of content articles products so they build to be generic reusable experience components you can have a cheeky question here how is this different from sxa uh well good question I mean it is it is a component Library so the concept it shares the the idea that you need components I think that's the only thing conceptually shares with uh as I said there's a lot more to sxa as extension to CMS itself yes new paradigms Etc but this is more pure component Library it's it's open sourced uh it's it's built with react and on xjs so it's built 10 20 to 23 right so that that's using latest greatest Tech that we have modern front-ends all the stuff yeah exactly wind typescript next GS yeah exactly and this is a rapidly evolving set of uh components as well so that's what we're gonna use uh and we're gonna use a psycho instance what we're going to do is we're gonna attempt to rebuild a page like this uh but with completely different markup but we're using the content as it comes out from psycho as is so we're talking about one Carousel component um three of these kind of image blocks we have a three column kind of situation here with some call to action a quote and a list of news and footer we're gonna ignore we actually have header and footer that come together with component service we're just going to configure it we're not gonna connect it this habitat thing is literally what comes out of society core eight or nine by default I imagine or is this something you also install on top uh this is something you install on top as as a kind of example site uh from the past yeah it's it's long been deprecated as well so this is this is very old school right so we connect but that's good because we have people running oh wow yeah because I remember having this stuff and then building off of this and then later on maybe installing sxa on cycle 8.2 that was the norm and there's still lots of projects like that yeah exactly so let's get started so I'm gonna use npm to initialize my latest version of CLI and issue new command called new and what this command is going to do in my empty directory is going to ask hey do you would you like an oauth token yes we need to authenticate and so we can deploy um oh and it's not registered let me try again all that copy copy paste yeah there we go perfect success uh so if we pick the only team I have is called what exactly then I have a choice between nextgs and Lux uh Frameworks and in xgs we have that component starter kit and it's now recommended option so let's pick that uh live stream will be the name of my project and what it's going to do is gonna generate API keys I'm gonna install dependencies n is going to deploy my project content right into my team so you can see now project is automatically created and we're gonna see components compositions appear here so this is this is happening as we speak yeah I don't think it has done the the import yet or maybe it's starting now yeah exactly so components will be uh created for each each of these components will have a component component Library there we go there we go now have magically things popping up so you can see we have a few of those we have compositions and they are describing um structural layout for each page really we also have a special Global composition we've got I use and this is what controls navigation footer we'll get back to that in a second and we have project map project map is that that sitemap that we have in for the Web Channel contact so think about them as hierarchy of your pages uh and if we did everything correctly we're running on localhost 3000 and we should be able to open up this app and render it this is now running a local version of that next.js app and you can see it's rendering exactly what we saw on the hosted version so I'm going to close this one and we're gonna just use this this guy instead um you know I just wanted to say isn't it ridiculous that your copy paste took longer than setting up a whole project that's already running yeah it's a little crazy modern times exactly all right so we got we get stuff here uh this means that we have preview wired up this is our latest version of of canvas our experience Builder 2 and you can see here I can start edit stuff hello live stream and notice this is full inline editable and not just in context editing inline editing because all this content is now temporarily stored inside of canvas what we want to do we're going to connect my components with my content sources in this case icore so that will come a little bit later um I have my structural representation of of the page I can hide it as well if I just want to focus on content and yeah this I can add components uh so this this should be pretty familiar anybody who's seen with editing from the past uh what we're gonna do here first though we're gonna add an integration psycho integration and that is one option that we have there's also plenty of other options that we have but since this live stream is focused on psych work that's exactly what we're going to do first so what is going to do is going to allow our project to communicate with that psycho instance that I have uh set up and because I'm in broke tunnel tunneling to it I can just connect to it via psychostatics but since we're going to be using next next-gen mesh capabilities we're actually going to go and set it up elsewhere so we don't have to use the integration like this potentially yeah it's it's installing our new data sources and our ability to create data types so we'll get back to that in a second um I wanted to add one more integration this is theme pack and theme pack allows us to have nice um a nice extensions to our canvas um user interface giving us ability to control things like layouting colors for different components and it's based on the idea of a theme so we're going to use uniform theme for now as as default we can also change to Java drip and later on we're going to create actually a custom theme so we can customize some colors and fonts and stuff like that I think before we jump into adding data sources maybe one sentence about how uniform likes to operate because generally these compositions you can see them they're completely visual right and so we're making visual compositions as your pages and we we store some data but the idea is that you store the design related data for your page is this a two column component things like that all that stuff here like available components that's the sentence you would store in uniform not in sitecore but let's say these blocks are like articles or whatever these should come from another system and then you can so essentially what you're doing is you're adding data sources to uniform and then bind everything from these data sources directly to your components and then when you hit save there is no code to write because all the connections are already in uniform I just wanted to give this like little extra thing because this is why we add an integration and we add data sources later to be able to connect and it's all connecting officially to your front-end components yeah exactly yeah Thanksgiving this is this is really important to highlight the responsibility ownership of different sorts of content exactly for folks experience in Psycho think about rendering parameters and rendering parameters is a thing never really fit the core content model because that's closely aligned to the component presentation layer itself and that's that's the definition of volatile presentation experience content so it's things like which title style do you want to use is this really core content um we argue not which color of the button for your primary call to action to use right if I link to say learn more and link to a page let's say learn more about layouts and containers I can interact with primary secondary Etc styling and this is really presentational data very much Channel specific and instead of being uh cork part of the core content model so you would pull title description images from where you store it in CMS or Dam and we will add everything else that also allows keeping the pollution uh to minimum inside of your core content model which is also very important you see that all the time where people are adding little check boxes and whatever color drop downs in their data models that they use across different devices for you for example and on your mobile maybe you don't have a featured section with a big image but you did add that checkbox to your data model polluting it completely and then I've had projects where you had 25 of these extra check boxes and then somebody in India decided to clean up remove one checkbox and then the Chinese website is down and we've had many of those instances and you don't want to have that right your domain data needs to say clean and so uniform takes over that other bit of where the Creative Design data lives let's say yeah exactly so what are we going to do here so since we wanted to reconstruct this page let's start um I'm gonna create a new page I'm going to call it demo um and I'm gonna use page composition type so this is going to be a demo page instead of messing with the home page I'll just create a new one uh I'll call it demo page this was a page title this is my page meta data control open graph and stuff like that oh I haven't seen this new magic yet I love the grouping of the parameters oh yeah yeah so based on the intent you can kind of keep things exactly and by default you can see I have hero placed and breadcrumbs we also have breadcrumb component we don't have that on on this page so I'm gonna delete it but we're gonna start with this one so even though it's a carousel but as we know Carousel is just an array of some other components uh this is kind of we have a beginning of a carousel so we kind of need we can essentially reuse hero as a generic design system component to serve as a slide in a hero Carousel so we don't have to create a brand new component we can just reuse existing one and this is the beauty of keeping your core content model separate from your experience model it can depart and and it can be more generic reusable and that's the whole point what we don't want is we don't want content we want to reuse content right we already have that in sitecore so what we're going to do is bring that external content and we can do that through connecting external content to um right exactly but notice that we don't have any data types though uh that's not a problem because we already have a psycho integration in place so this means that we can create this new data types right here or we could have created that in canvas but I wanted to show you that here this a little bit focused experience so what is a data source is is our conduit to in an external data source we support the HTTP request Json data as to standard one and each integration will register they own so cycle integration did exactly that so here I'm gonna do initial configuration of my cycle setup here and all we need is an API key configuration name this is a read-only API key so I'm I'm okay sharing this yeah I was about to stay are we going to steal this thing or screenshot in the communication here is really through psychoservices clients so we we have a tiny connector installed on psycho instance but it facilitates essentially configuration area but majority of communication just goes through standard psycho Services client here and this is what we're using to connect to to the psycho instance with so that's that's it and now we're entering a data type configuration so each type of content that we want to bring in from our psycho instance here and here I want to bring some article content and I'm going to bring some quotes so these are data source content items that that I need they also have some teasers so we're actually going to start with teasers because they are actually a content type and psychord that registers all the data for those slides that we've seen in Carousel in in Heroes etc etc so that's that's the first content type we need to bring in because we're operating in the PSI core Turf here we uh the the integration adjust to that so you can see we have tree base selection of which templates do we want to allow in this case uh since we select our teaser so I'm gonna go to Project uh common I know the location of my template so I I only want to allow selection of teasers uh inside of this data type you know if I can find my teaser here and set up this selection you don't have to do this this case you can allow any content item from psycho to be selected for this data type but we want to constrain it so you don't you cannot pick a home page when we expect a teaser right and for data source locations we need to scope where's that coming from so in this case we know there's a global folder here with all the teasers so that's one location then we can add another location with um I know we have some content stored underneath local content that we want to use and you can add as many of them as we want keep things as default I'm going to call this teaser because that's the name of the psycho data template I'm using save and test and now this shows what the business users would see when they associate content with with components so they see a psycho item selector and because I can strain selection to only these areas only see these areas for selection you can see I cannot select anything else other than a teaser because we can strain the selection as well and all items are disabled if I do fetch data you can see this is what uniform mesh is going to get access to the whole output from PSI core with all of the Json data coming back from psychoservices clients this means that I can instantly connect any of my components to any of these attributes coming back so Alex this side core service that you're now connecting to did you have to install that or is that default in all of these sidecar versions the second Services cloud is pretty much default so you don't have to install something inside core for this there was a uniform connector that brings configuration so that's that's the only tiny thing that needs to be installed there okay and that's that's a part of our psycho connector distribution um so that that's so we have our content now we can attach our uh teaser content with our hero and in this case uh there is a couple ways to do it uh so I didn't save removal of my breadcrumb I can do this right in canvas this is not what developer would do a developer would go somewhere else which will go there next but I wanted to show you this as quickly as possible uh so instead of title description stored in canvas here I can do connect now and because I have new data type called teaser I can go and essentially pick which teaser I'd like see Simplicity this becomes a data resource addressable data resource I can now bring into any component on this composition and because we have this preview we can pick a teaser title we can pick teaser description in this case for description we can use a summary I can also search here so if I know my field name I can just quickly find it um for eyebrow text we're actually going to keep it optional and for the image we're gonna link to teaser image URL so you can see here we have a fully qualified URL coming back and that's our slide right so that that's we we're not there yet with full Carousel but that's not a problem we can add a carousel we have one of the components in component library and you can com this is in case if you don't have components you want to start with component starter kit you don't have to you can bring your own react components your own design system if you have it this is just kind of a starting point um and you can see Carousel has a slot inside of it and we can just drag our hero into that slot and now we have a single slide Carousel I can duplicate it and now we have two but it's kind of silly to have till the same slides so we're not gonna do that instead I'm gonna show you a different way to configure this hero because what we don't want to have is we don't want to have business user assembling these pages to do this um binding every time right it's a little abstract and Technical if you're not um a nerd like you and me right you don't want to be going through all the Json I guess what if we could persist this sort of configuration somewhere this whole default binding in in in somewhere so every time a hero is placed it already comes pre-connected and all I need to do is pick external piece of content um so that's that's what patterns are for um so patterns is think about them as special entities on top of components which bring that default configurability so I'm gonna find my component cohero component in my component Library and add a new pattern and this pattern we can call it slide hero because this is not just a hero hero is going to be connected to a teaser and we're gonna call it slide in this case I can do this sort of configuration now on uh on the pattern level and it becomes more reusable so in this case I can pick my teaser again let's do like getting started call it teaser in this case I can either use this as default or not in this case I will ask every time this pattern is used provide a new instance on this teaser if I do want to have this as a global default I can keep that box checked but in this case our use case is different because we're gonna need to create three of these and we're gonna pick different content every time so for title again this is going to be title description it's going to be summary and image is going to be teaser image we also have other attributes we can use if we wanted to like there's a display name let's do that yeah that's nice and now I can pick which display variant should be default in this case we have a couple options image left image right and background image I do like background image and I'm gonna use this as a default and I'm actually not going to allow overwrite of this but I'm gonna allow override of all the other values as well this means that if you want to make a change of content without touching sitecore you can and you can override any value at any point in time and you can control it so the thing about it pattern is that instance of a component with that configurability that we just created and now instead of dropping generic Heroes we can drop our slide hero instead you can see here it shows up in our options automatically so it's still a hero but it comes already pre-configured so all I need to do here notice we have a new pattern data selection all I need to do is pick a piece of content so I think we have one on flexibility you can see and everything else comes with that second one will be about flexibility extensibility let's do extensibility and simplicity so we have three slides and we can reorganize them move this one up so yeah that's it so this is how much easier it is once the pattern is set up you just pick which content needs to go into that pattern and that's it's pretty much the only thing you need to do and Alex if you want for maybe flexibility you can say let's make um some because you have everything is overridable right so you might for one of those Heroes you can actually change something oh yeah so you can uh disconnect and now you have ability to do anything you want inside of it and override this value yeah exactly that's super cool and potentially what you could actually do is if like this image is too light for this text you might want to allow the display variant to be overridable so you can put the image on the left side for example but just that's how flexible it is and when you build your own component you can choose any of this stuff based on your own design system we just came up with these defaults because we like them and they've they seem to fit but you can build anything as complex as you want or as simple as you want or just grab a design kit like Kickstarter DS or some Tailwind related stuff you can just put it in here and go oh yep exactly and and because we're running in Dev mode I didn't even have to publish so this is all coming live so this is how the page looks like we have heroinfuro that comes from a global composition and we have our Carousel built out um so let's let's build more stuff because we have a couple more components and things will get even more interesting here so notice we have these uh these three guys here so how do we how do we do that uh well we have a card uh card block component and this cardboard component is very um reusable as well and these cards if we drop a card I'll show you how this looks like uh it's I think it's exactly what you need it has an image text uh so we can stub it up real quick here just so you can see how this looks like image copy image address get the image going close enough uh we also have a CTA here so for the CTE we can do read more and keep it a link and link to it's a components page so we don't have this page created yet if we had that page created we'll just link to it and here you can configure the the themes and this I think this is this is close enough of course this sets us up for nice collaboration with uh expert front-end engineer that can fine-tune tailwind and and bring that look and feel that you desire here we're not going to touch any of that right so imagine collaborating in on two tracks where you setting up structures you configure stuff and then front-end Engineers having times of their lives working with with modern fast Dev experience with Tailwind with xgs and and running the show there and completely in completely unopinionated experience so whatever they want to use something else not Tailwind not a problem as well so that that's kind of the kind of workflow team workflow that this set up the things that I that I love about this is imagine you are working at an agency and you're the front-end developer and the CMS Choice was not made yet or sidecar is there but you need to you know shuffle some stuff around or whatever and it takes two weeks you can literally build your whole website just by stubbing it like this like Alex just did copy pasting content into uniform build your production front end QA your production front end and later on you just connect the data from sitecore and then suddenly you can work in parallel rather than waiting for the back end people so front-end people are always late and then QA spills over what if you can QA what you've built as a mock first and then two weeks later the data comes in and then maybe there's a few tweaks because the text is too long and you're good to go so that's that's another um sort of unexpected awesomeness that you get with an approach like this oh I'm like um so I'm just gonna set up uh some data types for a couple more demos uh I know these content types uh and I know we're gonna bring articles and teasers so for that card we're actually going to use article uh for the quote I'm actually gonna use a quote as a separate content type teasers quote and I know my quotes are under global and this will be useful for us to get there we go uh definitely gonna call it quote cool let's see we'll test it real quick and this is how chord selection will look like we pick one of the quotes and this is what mesh is going to have access to so that that looks good so this will give us ability to complete a couple of more components here so card block notice that this is also not connected yet so we can go to our component itself and add a new pattern so in this case because we will be linking to articles it's going to be an article card and this article card is gonna map to a new article data type I'm gonna pick one of them the huge reduction just to set things up also it's not gonna come as default it's going to ask us to actually provide value and we're going to map this once the title description I think it's come from summary and you can see it's totally fine for your experience model or view model depart from the the way your underlying source is structured it's totally okay uh for the image I think we're going to use this one and let's let's call it the day in this case in the overrides I'm gonna allow variant override as well so you can see how this looks like and now we have pattern ready to go uh so let's go back to our demo page and now instead of generic cards I'm actually going to remove this one I'm gonna create an article card an auto card will link to an article as you can see I can only select articles so my introduction article I'm gonna create one more here with and getting started and one more article card project habitat how about this one there we go so that's that's the three cards we have um you can see here the only thing that we're missing is read more and read more can be added either as canvas data so if we store Pages if we move over all the pages from psycho to project map we're going to have them in our project map tree so in this case I haven't done this yet so I'm just going to put a placeholder one you can see now I can even modify my call to actions per card if I wanted to and there's a display variant we have two I can actually switch from one a display there into another and developers can add more display variants as well so that's that's the second row done uh let's move on to this one because this is going to be interesting here we have a couple of things here we have three components in a row so we're actually going to need to have a grid to place them and we have a quite interesting one with latest news so since we'll be talking we're talking mostly about single item sort of components in this case this is not a single item components it's a list of news that comes back from from Psych or maybe from search um so that's a separate challenge for us to deal with um so let's let's go and get going on that I'm going to create one more uh component here which will be a container and we have a couple of container options we have a flex container grid container here and you can add your own containers I'm going to use a flex container and here it's going to be we can control Direction Flex wrap Etc and again this is just kind of an example of how container component can be built you can build your own so first one in the container we have our this looks like a call to action but I think we can reuse our our teaser or our slide actually slide hero here because it sort of looks like a hero and it has title text and a link there's no image this time no image the same exactly so I think uh is the download piece of content that we need to bring in and you can see here because that content doesn't have an image it's not displayed well so what we're going to do here is actually going to edit this pattern and we're going to allow overwrite for the variant and this gives me ability to change background image variant to a different variant a default one image left on image right you can see here this because there is no image it just displays better with different text color Etc so it just fits fits this use case better and the only thing that we're really missing is is our call to actions so if we're going to be linking to a page we're actually not going to connect it to sitecore but in terms of call to action itself we can go and actually find that text on the link that's stored in cycle and actually reuse that check this out pretty close pretty close oh you might want to center it maybe if you set to the default variant with its Center yeah there you go this is better all right so that's one but we have other components we need so this is a quote component for code components uh what I'm thinking we can use [Music] so we need content component or something oh it does have an image though yeah but we we do need a separate pattern for that because we're going to be linking to another another piece of content uh I think we might need to create another another pattern for hero I think uh let me see I think maybe a call to action yeah I think you can try that so interesting like while Alex is looking for one of the components that can fit um so essentially what we're literally just building a front end with our existing components now and if you wanted to let's say you're moving from sitecore to another CMS but it's gonna take you a year you can literally just add any other CMS or any custom data that you might have as data sources and they did can also feed this or you use only the site or media library and do the rest by yourself or you use cloudinary S Media or you use I'll go there for search results and you can kind of mix and match everything up and if you then at one point did want to leave sitecore even though you might not have to you could do that and then slowly move it out right and so it's only Clicks in the end because we haven't touched code yet because our front end doesn't have to connect to anything that's what makes it so cool and all the data when you hit save it actually is stored on the CDN Edge so it's super super fast and cached I think I I'll use another card card is very reusable exactly yeah so why not uh but there is also this badge label uh so I'm actually gonna use name of the title let's see let's see how this works so I'm going to use an extra a large badge and let's put this pattern to work and so time check we have about 10 minutes I think we're tracking so what I'm gonna do here add one more variant which is a where's my did you just you just made a variant right third foreign card interesting not sure enough yet there it is on the bottom card okay I think I I wanted I wanted here there we go yeah so here because we picking a quote here I'm I have another piece of content to select and look at that something happened with this guy as well so let me fix that so here's a second component and we almost there so this looks this looks possible right not all front-end developers industry might agree with you but for data purposes we're very close yeah we're decoupling work streams here front-end developer magic can apply on top exactly all right so finally the list of news and this is this is uh this is yeah so we we have ability there's a couple of approaches here uh one approach is that we can plug in what we call a model builder and it allows us to tap into any controller that you already have and register so if you already have code that delivers a list of new latest news a.net code you can actually register that with um with our uniform connector and turn this into model builder which we can reference but I thought we'll do we'll start with another approach and that approach also helps us showcase ability to add Integrations to content sources we may not have official integration for so if you have a rest API endpoint you can bring data in and in Psycho there's a couple of flavors one of them is all data API service so what I thought why not bring list of uh list of news articles through all data interface and essentially using HTTP request and building a search query instead of picking content items individually uh so you're going to just call the the psycho API yourself from here directly exactly so this is the APN point this is familiar to any psycho developer that's a very familiar page I don't know what I clicked there I saw that many times I'm sorry so it just makes me happy to see that again here we we're fetching four latest news uh based items based on the template name um news article so if we increase it to four we'll get array of four items instead so we can work with that so we can actually construct a new data type using uh this HTTP endpoint details so why don't we do that so essentially we just built Postman into uniform but then it stays and you can use it as a data source and it's cached on the edge yeah exactly so any data source you have no matter how you want to query it you can put this into uniform yeah yes sir yes sir so it needs a base URL which is this also there is a query string parameter uh cycle API key which we're gonna use and this one is actually gonna get encrypted together with the data source let's call it uh say core oh data and now this connector is ready to go um all we need now is provide details on how we want to query our item endpoint so we have a couple of query string parameters we're going to use we're going to use filter and filter provides a way for us to filter by any search criteria here in this case we can hard code it to news article or we can create a new variable called template name and this variable will be replaced for us whenever we use this data type and UI will be auto-generated for us as well for the top we can hard code it to three or we can actually get another variable name up top and use that instead so this will be more dynamic the expansion through dollar sign expand we can just hard code it to Fields this this will instruct our data to return the projection with the fields um and I think that's it so let's call it uh template generic right yeah exactly that's cool so this is how the UI look like so uniform mesh will automatically generate as the UI so here we can paste in the name of the template news article how many we want let's say we want two and fetch and this is our two articles and now we can link them to to our component that's that's how easy it is to activate ad data source so let's go ahead and do that uh and by the way by the way I've done this with graphql endpoints as well it's it's totally easy yeah absolutely uh so for that let me uh so what are we gonna do here is going to create we need a repeater of sorts right so we we need we have an array here um what we're gonna get but we need to map it to uh to our our component so I'm going to create another container here the flex container and here we're gonna add a loop and this Loop will actually going to be that repeater that will be connected to our new data source so items by template news article uh top three we're going to call it articles as a resource now we have ability to link to it and we can link to the array Itself by establishing this connection we now can place a component inside of the loop in this case we have a generic content component that could work I think um we can add something more interesting later but this is I think this is good enough content and now I can connect it once you can see here I'm automatically getting an array item from that Loop so I can now connect it to my fields which field I have here news Title Here is the value and for the text I think I have this new summary with this value I can control presentational aspect but that's uh we needed the date actually so we needed the date [Music] let's do this creative date this is probably another date so that that's it that's how easy it is to map an array of course the The Styling is different here but front-end developer can go and create a bespoke or you can you can make it a list in your Flex container and then move it up one and it's going to be pretty close I think so if we just make it column let's do a column and then move this one up exactly there we go it's not the same but you did you get the drift right exactly well let's get the news label here all H2 we're getting there we're getting there there we go uh another way to do it and I think it's even cooler is leverage what we call model model Builders so model Builders is is something that will allow us to essentially reuse all of the dotnet source I code that you already have so imagine you have some orm tool that you use to create view models that you feed into your your views so this this is a documented feature you can register that existing code you already have that is doing some logic some business logic based on transformation whatever you are doing here and you can effectively Source into it so with that uh I I have this model builder I can reference and I can just show real quick the mechanics of doing that we can add another type this will be a sitecore uh actually existing psycho connection and a new data type in in in the exact model Builders we can actually Target that model builder based on its metadata so I know it's latest news and parameter name is data source I can call it latest news and then check this out this is how what the way it would work you pick um any model builder needs a route of operation in this case this will be location where to fetch the news articles and then it's gonna when we do fetch data if we look into underscore underscore Model news check this out we have three news items in the array but instead of returning generic item model from all data this all returns three attributes because my.net code that runs on the psycho server reduces that data set to only three key attributes already formatted and everything so this will be even easier to connect without using HTTP endpoint this is just another option to reuse your existing investment that you put I hadn't seen before this is awesome this was my next question because when I worked a lot with site or we did lots of this kind of stuff to kind of just clean it up and have back-end people merge things together and make it happen so it's awesome I hadn't seen this one before yeah there's a lot here um I know we're running out of time last thing I want to show you is how fast the actual API is so after you build this composition and you publish it calling it from our Global endpoint which is running at the edge this is the type of performance 54 milliseconds to retrieve this whole data set and this is not data set with a bunch of data this is a highly compact seven kilobyte content for your page because it only contains content that you need that you mapped so you never overfetch you never you know pull megabytes of content in your page page state so but in it's also fast so if you do an edge rendering server side rendering this is really set new to a good a good good place to do it because in order to to get fast rendering especially on the CDN level you need your content to be available as quickly as possible and that's really the key so no longer can you now finger point to your back end being slow now it's all your front end no excuses no excuses anymore yeah and we kind of build it it's not pretty but it's functional and I'm sure Tim if you spend 20 minutes on it it's gonna be yeah you can you can get quite far with a few extra options and a bit of cssing to get this in a really decent place exactly well that's that's all we had for you uh today in terms of demo yeah we have we are a bit overtime but there were still uh quite a few people online so if anybody has any questions feel free to ask um I'm gonna quickly check our stats to see if anyone is still here and if so feel free to ask and otherwise we'll probably just um close our stream down and go to next um okay so uh it's interesting our LinkedIn stream is up it's done because it was the hour there you go um thank you everyone for watching and thank you Alex for the awesome demo all from scratch that's how you do it cheers thanks and as YouTube YouTubers say if you have an idea for the next topic we have a couple options but please comment put it in the comments okay so buba loved the demos well I did too so um feel free to booba feel free to reach out to us you know us by now I mean ask for anything crazy and we can probably do it all right thank you so much folks cheers everyone bye