Skip to main content

← All videos

This is Headless 2.0

July 17, 2023
Tim BenniksComposable architectureCMSContent opsPerformanceFrontend

This is Headless 2.0. Say goodbye to glue code and hello to seamless collaboration between content editors & developers without losing great technical architecture. Embrace a transparent platform that streamlines workflows while empowering content editors to visually edit across various headless sources.

Read more here: https://dev.to/timbenniks/this-is-headless-20-4n4d

00:00 What is Headless 1.0 01:05 Headless 1.0 problems 02:50 What is Headless 2.0 03:23 The how

Follow me here: Website: https://timbenniks.dev Twitter: https://twitter.com/timbenniks Github: https://github.com/timbenniks

Transcript

this is a pretty Bold video and I think I still I'm just still going to make it even though it might be a little far-fetched but let's put it out there and see what you think I am hereby introducing something I like to call Atlas 2.0 so the next iteration of how we deal with Atlas composable architectures for building websites so why am I saying Atlas 2.0 well because Atlas 1.0 had all these promises of amazing developer experience super fast performance the ability to choose whatever you like just randomly pick amazing things and put the puzzle together and have awesomeness and I know that was really great right but nowadays that everybody is starting to jump on this bandwagon scale is added and so with extra skill complexity arises and then you suddenly see the cracks in this Atlas 1.0 approach and so the two things that are most prominent that I see in big architectures that use headless and composability in the mecca lying style stuff is first websites tend to become now very code driven because you have to connect to all the different things right so you're starting to add code to your front end to actually query things from different places map that data so that it somehow then fits into your design system right because you have designed components with properties and then this data doesn't look at all like it and it maybe comes from four places so you write a bunch of code to get the data from four places to map it and then put it in and so you create a bunch of technical debt because maybe when you want to change one of those sources or you have to add something and you have maybe repeated yourself a few times with all these queries and data mappings Suddenly It's really messy and you're just dealing with some sort of in stable or unstable way of building your website and so that's number one and then you have another problem number two or number two which is essentially now that you have five or six systems that you have to collect data from because it's all composable right content editors don't actually know when they hit publish in one of those systems what actually happens they don't know what the bass looks like it's super abstract they might not even know what the data from all these different sources does and they might not have access to all the sources so we're just pushing the pain threshold of content editors and marketers with this and that's just not a thing that you want to be doing because what I have learned over my time as a dinosaur in this industry yes I'm pretty bold I've done a bunch of website builds is that a team buy-in has the biggest success generally so if you have happy people on all sides of things it gets a lot better so what do we need to do we need to have fix these two problems we need a very simple front-end code base that's so simple that it almost feels stupid there should not be any sort of connecting stuff and it should be data mapping all the things components need to be very simple size of the title where does the image live things like that like keep it simple right and then the other thing is that content editors have this visual way of working across all these headless sources without having to understand these headless sources and combining these two in my opinion will get you to Atlas 2.0 and so the way to do that is to come up with some sort of a platform that is visually oriented so content editors can officially almost drag and drop stuff from different sources with preview while making sure that your technical architecture is not bad because we've seen these systems before but they make certain choices and then front-end developers and back-end developers get unhappy so we have to make sure it's completely agnostic and fully API driven and those two things together is quite challenging and so what I think needs to happen is we need to have some sort of a platform that's cool it's not really a CMS it's not a data Federation bit but what it does is you have components that are your design system components that all have properties from title to image to text but also what varying is it image left image right stuff like that if you put a component like that on a page on a composition what you should be able to do is then connect in the interface to like six different content sources and choose this little title from this API goes into the title field here and then the next time you use that component maybe a title from a different content Source goes into that property and so you're literally filling up the properties of your composition by directly connecting to API endpoints and just grabbing the things you need and filling it up and essentially this is a visual graphql representation of your composition because when you hit save whatever data is connected to these property Fields goes on to the CDN Edge and just live there as Json is super super fast and so you can actually now keep your code very simple because the only thing you need to do is connect to that CDN Edge for that composition and I use like a super lightweight SDK to be able to just connect to that and that's it there's no other connection code in your code base there's no data mapping because the data has been mapped to the props of your components anyways that's in a nutshell a very fast talking theme because I need to get this out of my system and I think this is a very interesting approach to things and hopefully it's agnostic enough if this is built that it doesn't actually harm developers and how they like to work but it is actually super friendly for Content editors anyways if you have anything to add to this any comments whatever Reach Out cheers