JamstackConf talk: DXC, the modern tech stack

what is up my name is Tim Bennetts and in this video or talk the biggest I spoke about this at a conference um we're going to talk about the modern technical stack and how you can build it in a way that both developers and content editors are very happy with that Tech stack and to make sure you don't have ever have to like re-platform again you just add things and remove things and everything feels like kind of in Harmony and developers can actually do what they want to do which is build great apps rather than deal with this architecture that doesn't scale and then helping content editors because they cannot do what they want and let's just talk about it right so let's first have a look at what that modern tech stack that we're dealing with right now actually looks like but then also why I think our current approach doesn't really scale so basically you are the composer of your stack right you generally as the architect or the developer you tend to choose and what you do nowadays is you just look around you and say hey that's a great CMS that's a great e-commerce that's a great digital Asset Management that's a great analytics let's put them together right so you choose multiple vendors put them together and then actually doing that combining them doesn't automatically mean that you're going to get a great result you have just mashed them together somehow and so at scale when you get a bit more of a successful project that's bigger you're going to see a lot of issues and so let's just have a look at how generally people choose to make one of these Stacks architectures so we tend to start with our CMS and so I decided to just use storyblock one of my favorites right and then you choose a front end next one of my favorites again of course this can be anything it's just to illustrate the example so basically you have to connect this up then maybe when you scale you want to have your images served from one place that serves them really really well or have digital Asset Management where your media has its source well if you add that it needs to kind of connect to the front end and to your CMS because some items might be in your CMS that need to be then linked to your digital Asset Management right and then when you scale you probably need some search you're going to need something like algolia to index all your information to do really high professed search results or filtering things like that that of course needs to be connected to all the things and like I said this is e-commerce right so let's use Shopify or whatever bitcomers anything works of course that needs to be connected to all the things as well because maybe in your CMS you want to get some products and then show them on a page um maybe you want to have all your images from the product go into your digital edges management maybe you want to index all the products in your search engine so searching is much faster and easier the same everywhere right and you need Analytics and then we haven't even spoken about hosting which is for example netlify in this case and that needs to be connected with a whole bunch of things it can be a connection to your git repository so when you change something a build occurs but maybe you want to do something with web hooks as well right and then so all the changes you might do go to netmify and then you can see here I added HubSpot because when you grow you need to know more information about your users and maybe you want to send them email campaigns or have sign up forms or newsletters and things like that so let's connect everything there as well and you can see how many connections are happening right now right you need your analytics to go into HubSpot to figure out hey what's the segment of people that use my website so I can do something with that right and now you are so successful let's Branch into another continent but there we tend to use different CMS systems well let's just add a CMS why not right maybe we have a global instance and a local instance but that and also needs to be connected to all the things to be able to work multi-tenant is pretty complicated so you can see the web we have just created and all of this these connections are kind of connected with something I like to call glue code you kind of glue them all together like having Lego pieces you put them on but you put like really hot glue in between them so it kind of just sticks um I dare you to switch one of these things out and still be operational and do it fast that's gonna be very challenging right and so essentially developers are going to be like this you're gonna just be vacuuming a fire and this is an actual Dyson commercial from the 90s which is kind of fun anyways you kind of wanted to create this because every Green Field project that you do will kind of look like this because that's what you want but then over time it becomes this and of course you didn't want that but there are multiple forces at play from product owners to ctOS to CEOs to agencies everybody wants something from you and it becomes this over time because you haven't actually set up a way to orchestrate or organize how these things connect together if actually hard coupled these things into one another and so I like to call this exponential integration so the more components you add to the system the less effective you are at integrating them and these are basically just fancy words for a complete dumpster fire that you throw in the bin and then in two years you'll rebuild but wasn't the composable idea that that never would happen so we have this whole modern thing and there's actually something wrong here there's it's really hard to do this and not everybody is like Netflix or Facebook or like have these huge teams that are organized to Madness we need to normalize this for everybody so basically we talked about all the tech stuff all the stuff that's hard to integrate how to deal with that but we actually forgot very important part which is your content editors because when this lovely Greenfield project is now live right and you have content editors like let's do this let's make some new campaigns that do some personalization let's just make this thing worth it we're going to do storytelling so we can sell more right but then after a month or two they're like what the heck is this all these systems I have to understand and it's so abstract because how I now when I have to integrate something when I make a page let's say I'm gonna grab stuff from all these different sources but I don't understand what these sources do then I have to learn how they work and have to go into them and add it there and then you have different teams not understanding all this it's super abstract and how does it work with the preview if I wanted to do personalization across these sources how do I do that how do I actually make a deploy work how do I make rules and regulations of access rules of who can publish what in all these systems it's Madness and then after six months they're just going to be burned and like this and they'll be just let me just do what I can throw the towel in the ring and we'll just wait for a rebuild into three years right this is not a place you want to be at and you know what a lot of projects I worked on have this I'm inclined to say that all of them have this that's not what we want right so now what this is one of my favorite slides because this is actually in Finding Nemo where they finally Escape from their aquarium but they're all in individual baggies um okay so now what well there is a solution to this and it's very new and it's called digital experience composition so you're composing your digital experience in a way that helps you to organize your stuff right for both developers but also marketeers and data analysts and content editors the whole group because the whole group together makes it a success and so we have yet another fancy acronym DXE remember that one so basically we are when you use the XC you're on the left side and if you haven't used it yet or haven't started implementing you're kind of on the right side and you know what the guy is cool he'll deal with it but what happens when he's on holiday or when he quits his job that's problematic right you kind of want the left one so um let's talk about how the composition of a page actually works so let's go to the drawing board this is your page let's add a hero component so this hero component um probably comes from some CMS entry somewhere and the image comes from your digital Asset Management well then let's say we make another little component that is actually based on a search result from a goalie I recommend based on whatever the user has been doing on your website and then let's add another one that is actually with the image again from your cloudinary damp but that is actually product copy so you can see how many different items are actually on this page that are connected somehow and their data lives in certain places and it should live there because that data is clean you can use that next year that data is solid right but how is that page Built Well normally you would do that in your CMS somehow to compose that page and on your front end you just query all the things and hope it all works out but it's not super flexible there are some solutions out there like you know prismac storyblock they kind of all have this approach but it's quite Fender locked in you have to do it that way and so with DXE you get this there's going to be a layer in between these things the Integrations go into the DXE and then the front-end queries the DXE to be able to get the data and this looks like simple data aggregation right but it's more because a DXE is a bigger approach to this problem so what you get is universal preview if you just use the dxc's SDK the preview will be across all these sources and web hooks will be flying around so if you change something in a source your preview will happen directly and you can preview in your preview environment that you built or just your life site whatever you get complete freedom to choose the technical stack that you want like I chose Knox because I like it but I don't have to or you can do anything um then because you have all the sources in one place it's much easier to do personalization you can actually do a specific hero component with a specific image and a specific search result based on something a user does without actually having to do anything with the sources or in your code specifically the DXE takes care of that and then because DXE is bigger than just data aggregation and API layers it offers you a no code editor that helps you to in-depth preview actually edit your page so more about how all that works later um one thing that's very important here to discuss is the fact that this is a paradigm change of how we create pages right there's a different separation of concerns of your data and what I like to call um how to do that is you have your domain data versus Your Design data and so domain data lives in a place that is the basically the heart of where that has to live let's say you have an events website so in your CMS what you do is you model your events that's it right so you have things like the venue for the event the artist the date the location the amount of visitors the tickets whatever all that is data modeled in your CMS and that's where that sits because that's historical data that will always work next year when you make an iPhone app or when you make whatever maybe there's like a sign that's digital in your Venue you need that data to show it right and so what we see all the time right now because there's literally no solution out there is that we mix that domain data with your design data and design data is the stuff that is in context to your device on this device I'm showing something a certain way in that context and that's my design data for example there's an event next week we love it it's a huge event so that's going to be featured on the homepage right so you're going to get a big component with a hero with that event with like behind the scenes and a whole bunch of very interesting information about that event and the rest of the event is just a little list below now how would you do that in a traditional system well you would likely go to your CMS build a pitch and then add some data to your events system where it says with a checkbox It's featured now and it has big letters or something like that right the fact that you do that is polluting your domain data because what happens if that event shows up in a search result next week it had the featured checkbox it makes no sense for your search result right and next year when you build another app when you have piled up all this extra content in your data models it's just a mess you have to clean it up you don't know why this connections are there you don't know why these checkbox or drop downs are there and so it makes very little sense so think of it like this imagine you have four credit card providers that you use and one of them you kind of prefer you're not going to get and call the credit card companies that serve you that data to say can you add a checkbox there because this one is more important than the other these credit card companies couldn't care less it wouldn't do it there so why would you do it on your page composition so what we are doing here with a DXE is that your page design your composition of how something looks it doesn't have to be a page it can be a chunk of something on a sign somewhere or in a bus stop or on a refrigerator that composition is done in the DXE and the dxc has components defined somehow and normally it's like a Json setup and then you add resources to that from headless systems that the content editor can just just pick and choose this is a search result like that this is that hero that comes from that CMS that's that image and so you're designing your pages in context of where they live without touching anything around it because all that stuff around it it's domain data which you will use for all your Omni Channel options right and we love to use this word Omni Channel but have you ever really seen it it really hard to do and companies like Netflix have done it really really well I have it on my laptop or my phone on anywhere like a Roku TV whatever you need to do the same thing and keep your data clean to be able to do that and so that's where DXE comes in right so it's not just a data aggregation API that's easy a query one thing I get all my data it's actually a much bigger system right so let's have a look at some of the benefits for the developers out there like let's explore a little so let's talk about the front then so because the data sits in the dxc OR at least it's connected there your front-end component Your Design system whatever you have in storybook anything you build is completely agnostic from that data right so you are just building one channel with amazing components with the props that they need the dxc or another team of developers will actually map the data to your components so you you just build the best thing and that's what your content editors will work with in the DXE and the data is mapped correctly through the dxes SDK so when you're more full stack you're actually in charge of getting that data in right for the front end um if you have a DXE whatever framework you choose the way you query the things that you need the them the CMS whatever is always the same way because the DXE has Loosely coupled to that system and it allows you just enough freedom to say now I want to query it that way or that way but it can help you you can even cache it for you you can kind of choose it's quite agnostic but it's always done the same way which is very nice but then also you um get the tools to map the data that you get from these different systems and map it to the props that your front-end components need so these front-end components again know nothing so you can make a little middleware where that all works you can do it exactly like you need and for every front-end application that you build from your phone app to whatever you can do that again and then it gives you all this Freedom right and so because there it's quite agnostic on what deck you use and how to use it you can host it anywhere you can go from a jamstack SSG site to an SSR site where all the data comes from the CDN Edge um you can host it yourself on any box in Heroku probably not Heroku anymore but you know what I mean you can kind of choose and so um as developers with this in place you get to work on the stuff that you want to work on rather than having to constantly ask content editors how to deal with stuff like I've had it many times new website released I'm working on version 1.1 next Sprint content editor calls me I need a campaign tomorrow can you add these things on a page I'm like no I'm too busy and then everybody's upset and then I will have to change the scope of my Sprint to help out otherwise why build a whole website that people cannot use or not understand and they always can use it but it's about the happiness of everyone to get a better project right so in the end if you have a less back and forth with these content editors and they are just empowered to do the stuff they need you get to focus on the fun stuff right so let's talk about the gem stack because I think the gem stack in whatever form that exists right now really works extremely well with all this so basically why would you use the jam stack with this whole approach so everything we deal with is API first now there is no kind of central organ anywhere right the magic happens distributed it's all on the CDN it's decentralized it's close to the user where stuff happens there's again there's no more origin of anything and the lovely thing is that the jam stack even if it's like you know statically rendered or if it goes through some sort of edge Handler or a surface function is by definition also decentralized things work on the CDN you can scale it up on the CD and you just put the files on more places you just fire up more surface functions and these two go hand in hand so well that I think the jam stack even though it's changing a little bit it's getting more SSR as we speak it still works extremely well so we talked a lot about the why but we didn't really talk about how this should actually all connect and so how it connects is using uniform and yes I know I work at uniform and this is the guy talking about the conference saying I work here use this um this is literally because there is no other platform to do this yet so basically what you get is you have that page that we just constructed right then you have this DXE called uniform and so in that DXE you make a few components and these components are not code for anything they're just a Json representations of the props your components might have and they are attached to resources and these resources go into the component and you get to choose kind of which fields that you want to grab from these API calls and then populate your props right you can do that with a whole bunch of components you can make a lot you can Nest them you can do things whatever you want you can see there are different sources here there's a CMS to grab one thing you might grab an image but you can also see this is algolia here connected you can actually configure a search query with multiple results that come back attached to this component you can kind of loot them and so all of this goes to the CDN Edge and I just chose netlify here but you can choose any and then from that it just renders your front end and what is very interesting if you for example use nux 3 with its new nitro engine or next 13 with its new approach to you know server components you can actually run the whole app in a serverless function and it deals with however it wants to render stuff it can actually cache pre-render whatever SSR all your stuff and then if you wanted to do the personalization you can use the edge functions that uniform helps you with so what you could do is you can actually render an SSG page completely static hyper fast right there's no queries there it's just a pitch but every page request goes through an edge function on the CDN and in uniform you can actually say this component has four variations based on some personalization and then this Edge function knows that and based on the information a user gives based on their location or cookies or session stuff whatever that X function knows about the variations that can it can show and just streams it in which means you're using Edge functions to kind of change the output result of your static HTML page which means highly Dynamic pages in 50 milliseconds which is ridiculous that's a whole new way of using Edge functions and it's very interesting and the DXE helps you because in the no code editor off in this case uniform you can select all your personalization you just hit publish and then the SDK that you use to run uniform knows about all these things right so it renders anywhere you want you could also say that whole next or next thing can just go into an edge function and render completely dynamically it doesn't care it just works and so this would be a little interface demo where how it works as a Content editor so let's have a little look so basically here I'm selecting a rich text that actually comes from prismic one of my other favorite cms's and the content editor only knows it's prismic because it has a little logo and so now let's add another thing which is basically just let's make a list of things that come from contentful but I'm typing the title here that's the design data because that latest turbo tutorials line it doesn't have to be in the CMS and you can see here I'm actually querying the latest items from my CMS and directly have it in there and so you can do this with multiple things and you can then also now say let's personalize based on something and it's very easy as a Content Editor to use this stuff and so we now went from the stuff on the left the big bundle of glue coating complicated it's almost like a monster right and we went to something like this where all your sources and all your Tech go into this kind of orchestration middleware that the DXE offers which then goes into the no code interface which has all these components set up it all connects and then it goes to anything that's the output and um you can see how much more organized this is and how easy it is to remove a CMS and add another one or change the search or whatever it's basically just all taken care of in these layers and so you can actually start small if you have the thing on the left you can go and slowly integrate that into the right and that's kind of a safe path to move forward we've had many customers do that works perfectly so um that's it I want to thank you for watching and um see you soon cheers