Conf42 JavaScript 2023 - Online

CMS and JAMstack: A Tale of Innovation in Web Development

Video size:

Abstract

Discover the dynamic evolution of CMS, from early technologies to WordPress dominance, and explore the groundbreaking JAMstack approach. Gain practical insights and resources to supercharge your web projects. Don’t miss this journey of web development innovation!

Summary

  • CMS stands for content management system. It allows non technical people like content creators to manage their content without advanced technical skills. Headless CMS allows content to be consumed through an API. It would be available for a smartwatch, a gaming console or even IoT devices.
  • And finally I want to share some resources with you if you are starting with this approach of building application. You can go to the repository which is incredible because you can download this code, you can run it locally and start to analyze the code.
  • NextJs is considered the react framework and it's powered by Bursell. You're going to find a lot of resources here. Building e commerce sites with next JS and Shopify. This one is with headless WordPress and net JS. All those things are following this jam architecture.

Transcript

This transcript was autogenerated. To make changes, submit a PR.
CMS stands for content management system and this is a type of software that covers all the applications for modification and creation of digital content. The evolution of the CMS is at the same time the evolution of the web. So let's explore together how new paradigm, new technologies and even new devices have changed the web ecosystem landscape. Hi, my name is Juan Felipe Gomez. I'm from Medellin, Colombia. And since I started in this world in web development, I faced with this term of CMS. So I just want to share some of my experience with you. You can find me on my social network as Gomez one FA and first of all, I want to say thank you to Mari because he encouraged me to do this presentation. And just by the record, this is my first time as a speaker. Let's talk a little bit about the beginnings of the web. The World Wide Web started with static sites that provide content without database queries. These sites consumed minimal computing resources, resulting in fast loading times. This speed was due to the absence of a complex backend. It was in the middle of 1990s as the Internet popularities rose and the website started to require more frequent updates. When we saw the first CMS products, however, all those were proprietary and closed source, which was typically for that era. But in the early 2000s, we saw the emergence of open resources CMS alternative, like WordPress, Drupal or Joomla. In the case of WordPress, for example, it counts with a set of plugins, templates and many other tools that allow users to create website without knowing CMS or HTML. The rise of the open source is consistent with the development of the lamb infrastructure. Lamb means Linux, Apache, MySQL and either PHP, Python or Perl. This new structure marked the beginning of the monolithic web development, which facilitates the creation of dynamic websites. These websites uses database queries to provide unique content for different users, and as a consequence of this, the previous models of static sites began to fade. Now, let's discuss why to choose CMS. What is this important? And basically it's because it allows non technical people like content creators, to manage their content without advanced technical skills. So CMS allow the control for both the appearance and the content from a panel that is easily accessible to everyone. For example, let's imagine that you are food blogger amateur, and you want to share your experience with the world. So in the beginning of the web you would have needed extensive HTML or CMS knowledge or hire a developer if you want to build your website. But just with the help of a CMS, you can create, design and publish your website just with a few clicks, this level of accessibility has opened up the web to a broader audience. Now anyone with a passion and something to share can create their online platform. And this democratization of the web has led to a richer and more diverse online world. The mobile web came up and there was a new paradigm. And the monolithic CMS wasn't suited for serving content to diverse access device, often requiring different version of the website, typically simplified for mobile users. Some devices and IoT and devices such as Mars phones, gaming consoles or voice assistants like Alexa just further complicated this problem. The need for an omnichannel delivery became so evident. So now Disney concept has emerged, the headless CMS. And this is basically the separation, the backend from the dont end and what it's going to be new here. We are going to consume the content through an API. So this is very important because the backend is going to provide all the data through an API and can be accessed by any device. So it would be available for a smartwatch, a gaming console or even IoT devices. Also, it's important to highlight that this headless is not tied to a specific framework. So we can use our preferred framework like React or VOO to develop our user interface. Now what a headless CMS look like. So if we see it from a non technical perspective, for example our web visitor, we can see that there's not going to be a perceived difference. The traditional cms and the headless cms are going to look like the same. But if we see it from a technical user perspective, the main difference is that we're going to consume the content from an API. And this is the main difference that we are going to consume as a service. Now a new term has emerged and this is Jamstack, and it doesn't refer to a specific set of technologies. This is more definition set, an attempt to give a name to a set of widely used architectural practices. So let's zoom it out and see what exactly it is. So this is basically what Jamstack means. The J stands for Javascript, which is going to be our preferred language because it's front end oriented and we're going to be allowed it to use our preferred framework such as react, SBLD, angular or VuE, and the a stand for APIs, which is the way that we are going to consume our services. And here we can find some services as of zero cloudinary stripe or WordPress. And you will see that WordPress is just one of our services that we can consume. And finally we have the m that stands for the static size generators that will assist us in the prebuilding of our web page on markup. And maybe the most important thing here is that for a long time all the efforts were focused on the backend. But we have what we have now. It's a modular stack on the client side. This means that we're moving away from being monolithic to create an architecture based more on microservices. So now this image can give us a picture of what Jamstack ecosystem is and all the services and products that we have available. So as you can see, we have many tools to develop our applications. And finally I want to share some resources with you if you are starting with this approach of building application, which is pretty interesting. And the first one that I want to show you is this of bursell that we have here. If you go to Versaille and you go to the template section, you're going to find a lot of templates. And let's check for example here. If we select here CMS and then we have many examples of website, I'm going to choose this one. And the first thing that you're going to see here is that you can see the online demo here which is deployed now in Bercel. And you can go to the repository which is incredible because you can download this code, you can run it locally and start to analyze the code. I'm one of the person that thinks that one of the better ways to learn is reading others people's code and this is just incredible. And the next resource is the next JS application is the next JS page in the section of learn. And as you know, NextJs is considered the react framework and it's powered by Bursell and you're going to find a lot of resources here. The first one is this course about next JS which is 16 chapters. And you can learn all about Netjs. And you're also going to find this react foundation course if you need it. But what I want to show you also is those resources down here that for example they have building e commerce sites with next JS and Shopify. This one is with headless WordPress and net JS. And all those things are following this jam architecture. Okay, so that was all and I hope you have enjoyed this talk and I see you for the next time.
...

Juan Felipe Gomez

Full-stack Developer @ Make it Real

Juan Felipe Gomez's LinkedIn account



Awesome tech events for

Priority access to all content

Video hallway track

Community chat

Exclusive promotions and giveaways