WebInsightsWordPress

JAMStack, Static Websites and HeadlessCMS

DrupalAPICMSWordPress#JAMstack#Hugo#GIT#HeadlessCMSGatsby

While WordPress has been conquering the world of websites and web development, another small yet powerful way to build websites, and a CMS to support it, has been on the rise.  All the fuzz today is about JAMstack, but to understand the hype behind JAMstack we have to go a little bit back in time. Way back when it used to be that building a website was a technically inclined people’s prerogative. One couldn’t build a website without directly interacting with code using code-editors like Adobe Dreamweaver. Websites themselves were static, which meant creating separate HTML pages that would be published on a web server. That terminology becomes relevant later on. 

 

Content Management Systems’ Era

Enter the content management systems or CMS for short. You can think of a CMS as a “typewriter for websites”, enabling non-technical people to join in on the fun. CMS do the name. They make managing content easier for people on all technical levels. It was done by creating a more user-friendly interface and thereby eliminating the need to interact with code directly. Furthermore, CMS has an administrative panel, which lets users write content that is then stored in a database. Suddenly, CMS giants like WordPress and Drupal provided non-developers with an opportunity to create simple, neat websites of their own. Without much hassle. Needless to say, it didn’t take long for CMS to become an industry standard, with WordPress making up one-third of all websites out there!

 

There are spots even in the sun

As usual, though, there is no good without the bad. All that dynamic interactivity came with a cost. A simplistic version of how CMS works should demonstrate the issue. When a visitor loads a website made with a CMS, a server talks to a database and uses an interpreter, combined with data from the WordPress theme and plugins to unite it all together into an HTML document that then serves the content to the visitor’s browser. It is quite a complex process, and complexity leads to many different constraints. This is where JAMstack comes in.

 

JAMStack

JAMstack is a new way of building websites that successfully borrows the good bits from the old ways, yet alleviates most of the drawbacks. Let’s go to the official definitions first though. JAM translates to three core concepts; Javascript, API, and Markup respectively. jamstack.wtf sums them up best:

 

JavaScript – Dynamic functionalities are handled by JavaScript. There is no restriction on which framework or library you must use.

 

APIs – Server-side operations are abstracted into reusable APIs and accessed over HTTPS with JavaScript. These can be third party services or your custom function.

 

Markup – Websites are served as static HTML files. These can be generated from source files, such as Markdown, using a Static Site Generator.

JAMstack

Static Websites 

Most of the benefits come from the Markup part of the equation. We came full circle. Static sites are now making a comeback. Nowadays they are generated by the aforementioned Static Site Generators (SSG). Static site generators produce a fully static HTML-based site. It is not depended on databases or other external sources, thus avoiding server-side processing when visitors access the website. The most appealing SSG option can be found on staticgen.com

 

SSG like Hugo replaces the templating system of CMS’. As opposed to having your server generate content on the spot, SSG runs it locally as a part of your development process. HTML now is generated in advance, which means your website is a group of easily cashed static files. That lifts a multitude of different constraints. Here are some of the benefits: 

 

Speed

Speed is the most immediate and obvious benefit of having a static, JAMstack website. SSGs like Jekyll or Gatsby take your content and run code once to transform it into final output formats: JavaScript, HTML, and CSS. Thus, a visitor is sent the static page files directly. That means no database queries to run, no templating or processing of any kind. With files sitting on the servers, the requests served to users are almost immediate. All of this amounts to lighting fast speed.

Security

Static sites are difficult to hack. They have no databases, dynamic software or plugins. That eliminates many points of failure and attack vectors. By contrast, there are plenty of tools available online that are designed to compromise existing CMS based sites automatically. Hackers are usually going after themes and plugin’s vulnerabilities. Attacks could range from SQL injections to remote code execution. While more experienced users can ward off those attacks, though it could become a full-time job. Less experienced users, that these platforms are designed for, fall victim to them.

SEO

Two benefits above translate into better SEO outcomes. Load time speed is crucial for on-site SEO. Faster websites tend to rank higher than their counterparts. As discussed above JAMstack websites outperform CMS based websites in this category every time. In other words, better speed gives you better site engagement. Higher security means your marketing efforts are not going to be interrupted, because your website suddenly got hacked. As a cherry on top, JAMstack sites are better when it comes to URL architecture. You can generate any URL you like. They simply reflect your website’s files location. Where CMS based websites rely on complex rewrites to make your content available for users.

 

Scales better when traffic surges

While there is no fool-proof plan out there for traffic surges, static site generators come close to being one. They are more reliable when it comes to handling a sudden increase in traffic because not a lot of resources are required to serve static HTML files. Which makes the whole process less intense. On the other hand, CMS based sites have plugins that handle higher visitor traffic. They tend to cause technical issues when you want to implement changes to your website right away or recover from mistakes.

 

Hosting 

As you don’t have a lot in the way of server requirements or specific databases. Hosting becomes quite flexible. You can virtually host anywhere. Furthermore, you can set up a Content Delivery Network (CDN) like Cloudflare for even faster delivery of assets around the world.

 

Portable

When we combine hosting flexibility and static files we get the ease of migration. With SSG you could pack up and go as it were. It is not the case with CMS platforms like WordPress or Drupal that store your content inside databases, which have set formatting. It makes it that much more difficult to migrate.  

 

Development experience

JAMstack makes for smoother development experience. There are only three components namely: HTML, CSS, and JavaScript. Therefore, It is not as difficult to learn as alternatives. SSGs quashes the need of maintaining a separate stack for content. JAMstack also reduces bloat and maintenance in a workflow to boot.

 

Cost

Static sites not only win in speed but in lower costs too. Simply put, it is not expensive to run one. Your only concern would be the hosting fees. As opposed to CMS platforms like Drupal, where you pay for ongoing support and maintenance, as well as hosting, updates and customizing the behavior for said platform.

Drawbacks

The major drawback to building a static website that remains in 2019 is the time it takes to build one. Regardless of SSG, you are going with your development team would need to know an extra framework to implement it. Whether it be React, Ruby environment or something else. Thus, an especially large website will not get benefits from switching to static websites. An increase in performance won’t supersede the time it takes to build the site. While dynamic features like comments, search, and so on are available thanks to JAMstack, they are still harder to apply, which doesn’t help.

 

Headless CMS

Now, it used to be that static websites had one big glaring problem. The reason they died out in the first place, in fact, was because non-technical folks were forced to work directly with code. JAMstack has a solution to this as well, using conventional Content Management Systems (CMS), which are great at backend administrative tasks like editing, managing user permissions and delivering content all with the user-friendly UI. JAMstack focuses on these and leaves everything else behind.

 

For JAMstack, the group of CMS used is known as Headless CMS. It’s called Headless CMS because it removes the frontend (“head”) of a website while still providing the essentials like an admin, or database, which are taking care of via APIs and Javascript. In essence, you are still able to publish and edit content with user-friendly UI without marrying to particular CMS platform like WordPress. The frontend does not exist, so JAMstack websites using a CMS becomes “headless”.

 

Different types of Headless CMS-es

There are two types of Headless CMS-es approaches. There is an API driven approach. API stands for Application Programming Interface. It lists all available operations that you can use, along with a description of what they do. In very simplistic terms an API allows applications to communicate with each other. As a result, an API lets you create a website of your own, without a single line of code. It does not require SSG to work either. This headless CMS approach serves fresh content on every visit by sending asynchronous requests to said API.

 

And then there is a Git-Based approach. It works by providing Graphic User Interface(GUI) for GIT. One can write a post with the help of an admin panel, save it and then the CMS part would deposit it into the code repository and trigger a re-deploy. This approaches’ major advantage is that you don’t have to wait for an AJAX to respond to your website’s main content.

 

There is a wealth of options available for both types of Headless CMS on headlesscms.org.

 

API driven or Git-based?

Since every time you publish content with Git-based option, you trigger changes to GIT it makes for the smoother development effort. However, if you work with a cross-platform situation it is going to be more difficult to scale. It is a good trade-off if you need a completely static site. It is git-based so you won’t have a shortage of open source CMSes to work with. 

 

Content being delivered strictly via API is a blessing and a curse. On one hand, you can keep scale through flexible APIs, but on the other, you won’t be able to track changes in the content through GIT. Additionally, API-driven CMSes are mostly not open-sourced and could cost you an arm and a leg.

 

Drawbacks 

Eliminating front-end implies looking for alternative technologies to replace it. This might be cumbersome and time consuming for someone who needs a fast solution. You might also have to spend money on third-party tools that might cost you extra. Furthermore, most of the high-volume channels need a lot of time and resources which could be costly too.

There is no previewing option to continuously polish content. Headless CMS architecture doesn’t support content adjustments, as they are usually controlled by the presentation layer. This means non-technical people will still have to work with developers to get a better grasp of how the result looks like.

 

Conclusion

JAMstack is an exciting way to build a website in 2019. With plenty of upsides to offset any of the drawbacks. So you should keep an eye on it.

 

Leave a Reply

Your email address will not be published. Required fields are marked *