Ep. #93, Elevating Headless CMS with Facundo Giuliani of Storyblok

Brian Douglas: Welcome to another installment of JAMstack Radio.

On the line we've got Facundo Giuliani. Hopefully I got that right?

Facundo Giuliani: Yes, yes. Thank you very much for having me here.

Brian: Yeah. Yeah. I'm curious, what's your role in the JAMstack and why are you here?

Facundo: Cool. Well, I've been working on software development, web development, and other kind of applications for the last probably 15 years or 12 years.

But in the latest time, I was focusing more on front end technologies and I started to read and to learn about the JAMstack.

It was a concept that I got interest in because it reminded me to the '90s static websites that I used to do when I was a teenager.

Let's say, using applications like Microsoft FrontPage or Dreamweaver was the other one, where you were able to, I don't know, drag and drop some elements in a document and they looked like a web page.

I mean, they were a web page.

And when I started to read about all these tools to create static sites, to follow this JAMstack movement, this JAMstack approach, let's say, I started to get more interest.

I mean, in the last six years, I worked mainly as a back end developer, but I was always interested in other technologies in front end technologies, reading about them, working on site projects and personal projects with front end technologies.

And JAMstack got made because I think it's pretty cool.

I mean, again, going back to the roots of using static sites, but using tools and technologies that were developed in the latest years, right?

And that they are still being updated and new things coming related to this movement and being able to improve the experience, not only for the developers, but also for the users.

Brian: Excellent. So Storyblok, it's a headless CMS.

I've actually chatted with a bunch of folks who fill in that area in the space.

What stands Storyblok apart from the rest?

Facundo: Cool. So, Storyblok is a headless CMS that offers an API that the developers can use and can connect with from their applications.

I think that one of the main differentiators from other headless CMSs or options in the markets is the real time visual editor that the product offers.

Because even though that you can use headless CMS to create content and maintain content that can be used in multiple channels ...

I mean, the content that you create in the application or the admin panel of a headless CMS can be used in, for instance, mobile applications or applications for smart devices.

If you're working on a web project, which is probably the most common used case, you can connect your web application to Storyblok and it offers a realtime experience where the content editors and content creators can create the content and modify the content using the website front end, so they are seen in realtime how the content that they are creating is going to look like when they deploy that content to the production, or when they release a new version of the website.

So you don't need to do a build of your website to display the changes that you're applying, or you don't need to do any kind of merge or change in the code.

You, as a content editor, content creator, you do the changes.

You generate the content, create the content without the need of a developer in the middle.

Brian: Yeah. Yeah. That's big.

And I know I've talked to a lot of open source maintainers who manage documentation and changes in documentation could be a little hefty because you have to merge those, you had to commit those to Git.

And I get why that makes sense for documentation, but for websites, marketing sites, things where you could update maybe the copy or the title or name of a feature changes.

I'm looking into Storyblok and I checked out the feature page and you have the idea of content type.

So is this API driven? Are you able to just go into different fields, identify different pieces that content editors can keep up to date?

Facundo: So, yeah, it's API driven, the CMS itself, but the users of Storyblok can define their own entities that you can manage in your database or your data structure, and that can be used in the applications that you create or the projects that you want to create.

The thing is that Storyblok is a component-based CMS.

So following probably something similar to the atomic design approach, you can create components that can be nested, and these components can be reused in all the pages or all the entities that you can have in your application.

And what you consume from the API are these components in adjacent tree format that you can use after that in the frontend of your application, following the same pattern that you use when creating the entities of the content in story log applications.

So, for instance, if you have a landing page with a header, or I don't know, a title, an image, a paragraph, a teaser, a grid, or features, and et cetera, you can bring those components or blocks, as we call them, to your application and use them, and create a visual representation of them that you can link and that you can use in this realtime visual editor to enable the content creator to manipulate these entities and see how they are going to look like. So you can create the markup of each one of these components in your application.

And on the other hand, generate the content for these components in the Storyblok panel, or the Storyblok application.

The components that you will use in your applications, you can define them, you can create unlimited components.

In Storyblok application, you are not limited to a certain set of components to use. So, that's super extensible.

You can define the fields of those components, the properties, and et cetera.

And after that, you use the properties of these components to drive the style of your application.

You can set the possibility you the content editor, set the background color of a text box, for instance, and you can define the properties or the options of the properties that the content editor can select in Storyblok application.

And after that code, the logic in your application setting, the CSS styling that you want to link to those properties.

Brian: Excellent.

And then I'm curious, for developers, a lot of times the CMSs are specific, like WordPress is one that, folks, we all know the-- well, WordPress has the Gutenberg, the web editor, that's open source and built on React.

And now it's headless, and you can inject that into your other types of sites. So I'm curious that the flexibility of story block, what sort of technologies can you work with to embed this into?

Facundo: So, well, technically, as it is API driven, you can connect with any technology that you want.

I mean, it's like consuming any other third party API or any service.

Storyblok created and maintains different SDKs to make the work easier to work with Storyblok API and with certain programming languages.

For instance, for JavaScript we have different frameworks, like Node.js, Gatsby, Nuxt, if you are working with Angular, if you are working with PHP, Laravel, ASP.NET, we have SDKs to make the work easier for the developer to connect to the API and to manage.

I don't know, probably an object oriented logic to work with the objects that you are bringing from the API, but also we have this Storyblok bridge that we call, which is a JavaScript file that you can inject to the pages of your web project to connect to the realtime visual editor.

I mean, you should include this file only when you are working on the development mode or the testing mode, because you don't need that in production, but including this JavaScript file will make your website to be editable through the Storyblok API, and allow the content editors to manipulate it.

But again, if you're working on a web project or a website, you can use any programming language or any framework that you want just connecting to Storyblok API and consuming the JSON object that this Storyblok API returns.

Brian: Cool. And I'm looking at the, what we call in the business, 'moose heads', but yeah, it looks like quite a few companies are leveraging Storyblok in some of their campaigns or their projects.

Do you have any context on how Adidas and Deliveroo are leveraging Storyblok?

Facundo: Not about them, but we were lately talking about Education First, which is another company that is using Storyblok.

What they do is offering programs to learn different languages and what is also a challenge to the platform and for them, of course, is how to create an application that is translated in 53 different languages.

And that you have thousands of pages for each one of these languages.

So they are using Node.js, Parcel, and Storyblok, and they are using different features from Node.js framework, like incremental static regeneration.

And while they are handling this way of generating static assets at build time, I mean, if you have millions of pages, you can't build all of them whenever you are building the website.

So for instance, Education First is one of the greatest projects that we know that they are supported using Storyblok.

But again, as you say, Adidas, Deliveroo, and other companies use Storyblok.

We have used cases section in our website where you can see, and some of them have shared the experience of working with Storyblok, how they connected their projects and their applications using Storyblok.

Brian: Yeah. Yeah. And I'm curious, what attracted you to work on CMS?

Do you have backgrounds in this space?

Facundo: As I said before, the latest years I was working mostly on backend development, but when I started to work with the JAMstack and to learn about the JAMstack, the headless CMSs are like a crucial part of the JAMstack website or the JAMstack applications.

Well, I've used some of them in the past, Storyblok was one of them.

And yeah, I mean, I think that the project is very cool.

I like to work with Storyblok because I did that in the past and advocating about Storyblok would be genuine, is the word.

Sorry, I'm not English native, so...

Brian: I think 'authentic'would be a...

Facundo: Authentic. That's the word.

So I mean, working with a product or advocating about the product that you like to use, it's something authentic.

So I was looking for a move from a backend developer, or a regular developer position, that was what I did for the last 12 years, to a developer relations engineer, which is a position totally new for me.

I've never worked as a developer relations engineer or developer advocate, so I'm taking these first steps with a product that I've used and I like and in a field that I'm really interested in, like the JAMstack, the headless CMSs, and the frontend development.

Brian: Cool. And then you had mentioned that English is not your first language.

So you're based in Argentina.

And I was curious to ask about just the developer scene down there, because I've not actually spent time for conferences.

I've been to Columbia, which I realize is not directly even in the same vicinity as Argentina.

But yeah, what's the developer scene down in Argentina?

Facundo: Well, we have a lot of local meetups and big conferences that are organized every year.

Unfortunately, this last couple of years, we weren't able to do that in person, but I see a lot of potential.

And I see a lot of people working for companies from the United States or from Europe.

And when you are starting to learn technology, the other thing that they suggest you is to learn English also because it's a tool that you can have in the future to join teams that are based in other countries.

As far as I know, a lot of people is working for companies from other countries or even for Argentinian companies that have clients in other countries.

And I see a lot of communities trying to offer the people free content or free courses, or trying to do some trainings or online courses about different technologies.

Like in the last, I don't know, five years probably, I saw how the people that went to college, to the university to study, started to be less comparing to the people that started to learn in online platforms or learn with other methods, probably schools with courses focused on the frontend development or full stack development.

Yeah. I mean, I see like the development community is getting bigger and bigger and development positions are getting more popular here in Argentina, or at least in South America in general.

Brian: Yeah. Yeah. And I mean, you mentioned the, I guess slowing down of events, of local events, but I'm curious.

In the last couple years, the events have all gone remote.

So the access to like ... actually, at the time of this recording JAMstack conf is happening.

So everybody's been able to access all the JAMstack information and content that's out there.

So, you primarily work remote.

And I imagine there's been a lot more interest in folks in the similar U.S. time zone to also work for at least U.S. companies, but also companies based in Europe and et cetera.

Facundo: Yes, yes.

Working remote, probably in the last couple of years, people working from the United States for companies in the United States but not in the same city, get more popular as far as I know.

And the advantage that South America has is that the time zones are very similar to the ones in the United States.

So if you have to work with different meetings or I don't know, you need some availability during work time, it's better comparing to other places in the world.

But depending on the company, but in general, the companies find out how to manage that. I mean, working in different time zones.

Right now, I'm working for a company that is fully remote, but it was founded in Austria and the main part of the team that I work with is based in Europe and we work in a synchronous way.

So, you have to learn to work in that way.

The remote positions are being more popular during these last times.

And for people in South America, it's a great opportunity because you can find other kinds of jobs or other kind of positions that probably, if you focused on only Argentinian companies, that wouldn't be possible.

For instance, the developer relations positions, as I can see, they are more related to big products or services that they are offer and how to advocate about them and how to link the products to other technologies, tools, frameworks, and et cetera.

And if you are not working in a product, probably you don't really need a complete area of development or developer relationship.

Sorry. So for instance, in my case, in particular, I don't know any person working from Argentina as a developer relations engineer for an Argentinian company and not even for a company from another country.

So that's something that I'm seeing in this last year and probably it's an opportunity that disappearing and something that will start happening more frequently in the next couple of years, let's say.

Brian: So I'm curious, if folks have not heard of Storyblok up to this point, how can they leverage it in the wraps today?

Facundo: Okay.

So, if they want to learn more about Storyblok, they can go to Storyblok.com.

Also, they can visit Storyblok.com/technologies.

That's our technology hub where you can see all the tutorials, guides, videos that we have to create projects using Storyblok.

We have all the SDKs for the programming languages and frameworks that we created and we maintain.

We are now working on a version two of the Storyblok interface and experience.

It's like a closed beta, but you can register for that beta going to Storyblok.com/b2, and after that, you will be able to see the new interface that we are working on.

And the development team is putting a lot of effort on that. Creating an account in Storyblok is free.

The starter plan for creating a space and working on a personal project is also free with unlimited entities that you can create and limit components and limit content stories that you can create and limit space to upload assets.

So I encourage you to take a look to Storyblok and to try it and to bring your comments and your feedback, of course.

Brian: Excellent. Tons of people who are listening to this, I hope you all check it out, definitely worth looking into it.

A lot of great companies and a lot of great interactions, not only a bunch of frontend frameworks, but also looks like you support Python and some Ruby libraries as well.

So definitely got to give it a look. And at this point we want to transition to what we call JAM picks, things that we're jamming on.

This could be movie, food, technology related. So, there's no limitation.

We do get quite of a variety of things that our people are excited about.

And with that being said, I'll go first. My pick is actually gardening.

I don't think I've actually mentioned this on the podcast yet, but I ended up moving to another side of Oakland.

Now I have a backyard. We thought during the pandemic, we had some stuff that we thought about, and it's probably more valuable to be in a spot where we can have a backyard and more space versus being close to San Francisco.

So I'm honestly the same amount of time away from San Francisco.

I just happened to be on just a different part of the freeway access.

But with that being said, I've started growing. We've got corn and bell peppers and got some chili peppers and tomatoes and tons of herbs as well.

And it's completely different because now instead of me going straight to my desk and starting the day answering emails, first thing I do is go to the garden and check on to see what has now been produced overnight.

Because sometimes I get a little surprised and lucky that a new tomato shows up.

So, yeah. So, I just go out there, I water the garden, I prune and stuff, pull back some weeds and stuff like that.

And it's a different-- it's more of like, meditation, at this point, where I can go do something that doesn't involve, you know, sitting behind some lights in a desk.

Highly recommend to anybody, if you do have some space.

I've been researching, so it's above the ground garden.

It's a planter box, sorry, it's called a raised bed. I don't know what I was trying to say before, but a raised bed garden.

And we can always turn it over for different seasons.

It's just a small amount of space to take up the backyard and yeah, we're good to go.

And I'm excited to-- future updates and sharing.

Definitely check me out on Instagram, @bdougieyo on Instagram, I'll be sharing pictures and updates there.

Facundo: That sounds super cool. I moved five months ago probably.

I live in Buenos Aires, the capital city of Argentina, but in the suburbs, and we moved to a house, so I have a backyard and a garden, but I didn't get into it.

And now I'm listening to you. I'm getting your recommendation for the following months.

The spring is starting here in Argentina.

So probably I would try to research about what kind of plants I can put in my back yard.

Brian: Awesome.

Facundo: Yeah. I have a couple of picks. One of them is related to development.

It's this new framework called Astro. I'm starting to learn about it.

Brian: Yep.

Facundo: Sounds interesting.

I don't know, creating static sites using less JavaScript, but being able to create these sites using JavaScript frameworks, like React, Vue as well, and all of them altogether in the same project sounds interesting.

So, I'm trying to learn about it and to play with Astro.

You will probably see an Astro Plus Storyblok tutorial soon in the side.

So that's one of my picks and the other pick is not related to development, but I was looking for different music to listen while I'm working, but also while I'm riding my bike.

And the other day I grabbed my bike and I was biking for probably a couple of hours, three hours or so.

And the music that was in my headphones was this band from, I think they are from New Orleans, the Meters, which is not super popular here in Argentina probably, but I knew a song from them, which probably is the most popular one.

And after that, I went to the albums of the band and I was listening to that while I was in my bike, going through the city, it was a very, very good experience with the sun there.

It was a very cool experience.

And while the band sounds super funky, it has groove, let's say.

Brian: Excellent. Oh, very cool. Yeah.

It makes me want to actually fix my bike up and actually leverage it again.

It's been a while since I went for a ride in the city, but I used to do that quite often back in the day.

But Facundo, thank you so much for chatting about Storyblok.

I hope folks found this insightful and definitely check it out, and also giving us a little insight of your part of the world.

I forget that you're below the equator. So your spring is now going to be my fall at the moment.

And yeah, so we're at polar opposites, but glad we could connect for the podcast.

So listeners, hope you enjoyed, and keep spreading the JAM.