Headless - The Future of CMS Is Here

Hello there and welcome to this lightning session about the headless world, content management systems, jamstack and all that I coupled out there in the web. So my name is Samuel Snopko and I'm the head of the developer relations at Storyblock, which is one of the headless CMSs out there, of course, and also the proud sponsor of the react Advance. And I'm very happy that you find time to watch this video and invest this five, six minutes to find out more about the future of the content management system. So what is all the headless hype about? It's about building your own custom backend without needing to really code a lot. So you can build the atomic system as you want, set up different components on last app, but on the other side, you can use the framework of your choice. So if I would jump here to getting started, you could see you can go through all of that stuff. I don't have a bit of a slide. I just show you the website where you can find it. Then of course you will set up and you create the components according to atomic design and all your approaches that you would like to as similar as you do in your favorite framework. And then you can use that with the framework of your choice. So here, for example, in this samples, we have different samples for NexGIS, Next, gatsby, react, of course, remix, and all that stuff is already supported. So all the major react frameworks out there. And you can simply use the same setup at the backend with multiple frames in the future in the frontend and choose your favorite one. And that's all the headless about. Of course, additional to that, the nice backend give you like all the workflows, workflows, translations, approval system, versioning, and more stuff that you need for your content teams and for your marketers that they can easily work with all of that. Find out at storyblock.com. But what is exactly all about? So if you go and sign up and you will log in, you will get to the storyblock app where you will choose your favorite, where you can choose your favorite spaces. You can like put them, you can like manage them, but you can also easily create here a new demo like react advanced. I created right now. And in this demo, then you can like play with all that stuff. So what is possible with this? So why and how and why should you do that? So I say you, you will get a visual editor with all the cool stuff of real time visual editing in react. So basically as soon as you will do the type, then you will see the change. So yes, this is all the parts. This is the blog library where you can define all the components. And then we have, of course, the content where you have a folder based system in which you will create different stuff.

Here we can see right now, of course, a sample project. And in the sample project, you have like different folders, you can like tag stuff, you have an asset library with image service, which you can like change this type of images. You can also like have an image editor where you can like Photoshop your images already directly in system. So you don't need to have extra tool. You have, of course, getting started here. You have a dashboard, which you see overview of all what's happening in your system, where you see all your last edits, the task pending to you and other stuff. Of course, you have a settings where you will set up different tokens, how to get content from draft for draft or for a public website. And you can have a multiple environments. You can have a multiple per your links if you are doing like a redesigning. All of that possible directly in Storyblock. But what is the visual content about?

So here, if I like enter my homepage, which is in this case, representing the index page and just like we named it the home, you will see that here I already see preview of my website and is not just random. This is my real website that is connected and is running in this case and one of the platforms like Versal, Netlify, aws or your own server. And you can add here multiple URL links that you can switch between and you can like build the URLs. Here on the right hand side, you see the components that you define, not us. You will define what exactly means URL. So here in this case, if I go and click on URL, I see here that it's like I have here multiple tabs and there is like, of course, the fields like headline, subheadline, buttons, you can define, set the rules between them and all that stuff. You can also like extend and build your own custom plugins for it using the react or the vue fully up to you. But what I was talking about that visual editing part.

So here you see that if I click and I go here and change the demo headline to react advanced, then you will see that in the real time I see the preview. I'm sorry that my computer is getting a little bit slow because of the LBS. Right now you can do and do just more previews. You can scroll down, you can then click also on different parts of the website where for example, I see here that this is the banner and here it's directly opening the banner. By clicking three dots, I can move the components around and even I have the possibility of changing the styles. Like for example, here I can go and change the text color to dark and in seconds you will see that. All the settings here, that's not we are responsible, but you are able, you as developers have the power to configure all of this, set all these crazy setups and do the changes very quickly.

For example, here I did a little bit blur and you are also dark and then go and change the style to let's say light again and you will get this as a JSON.

So here if I would like go to my publish content, I can see what kind of JSON draft or publish I will get from my api and then using the npm libraries, the bridges, how we call that javascript bridges, you will get them out of the content.

So you will get a content in the structure JSON like this and according to that you build exactly the component in your final product.

So how to do that and I don't have a time in seven minutes to do it. So that's why you should go to definitely the Storyblock technology hubs that we built and here we have a technology for the react where you already can find the tutorials for next.js, react, gatsby, also remix, just go and search the website.

We even built suddenly, lately, the next.js ultimate tutorial where we built already five steps article or first five part about how to build everything from scratch to international website, all of that using the Storyblock and your favorite framework, next.js or the react and all of that, it's fully up to you.

Just go to storyblock.com, find out more, follow us on the Twitter or follow one of our cool dev rels like Facundo Giuliani or others who are like specializing on the react and you will find even more.

Thank you very much and see you soon somewhere in person. That's all for my side. Bye.