JAMstackConf: A Sugar Rush

With JAMstack conference and Halloween, this week has been pretty sweet. We’ve written about the shift from the LAMP stack to the JAMstack previously. The JAMstack conference reinforced that the new architecture empowers frontend engineers. During the conference we observed three main themes: 1) decoupling, 2) headless CMS, and 3) performance.

Decoupling the frontend. Like the shift to microservices in the backend, the frontend is undergoing the same rearchitecting. Previously developers built sites with server-side monolithic Content Management Systems (CMSes). Back then, developers needed monolithic systems because of the interactive elements that required a backend. With the expansive footprint of CDNs and the browser gaining operating system functionality, backend code is moving to the frontend.

The frontend can take advantage of microservices architectures that leverage managed services and third-party APIs. For example, Chris Coyier of Codepen stated that creating a website event that triggered a text messages to a mobile device previously involve backend engineers. Now with Twilio and serverless functions, frontend engineers can build this capability. Simona Cotin of Microsoft also provided examples of using Azure functions to generate dynamic content. Since frontend engineers need to rely less on backend engineers, web developers can drive more of the narrative around which services to use.

The old, heavy, coupled stack resulted in longer deployment cycles. Often teams would schedule new deploys at night once a month to prevent issues. With the unbundled stack, it is really quick to add a new feature to the frontend, increasing deployment frequency and allowing teams to iterate faster. It also allows teams to easily rollback features.

Additionally, now frontend developers don’t need to manage the configuration and upgrading of servers. They can spend more time focusing on layout and design to provide a differentiated experience.

Despite the advantages of the new architecture, microservices create complexity. One attendee stated that stronger frontend programmers are required than before.

Headless CMSes take center stage. WordPress and Drupal have been the main monolithic CMSes for almost two decades. Teams are transitioning to headless CMSes that breaks apart the tight connection between the backend and the visualization layer. A headless CMS stores content and provides a content editing dashboard. With headless CMSes content marketers create raw content (text, images, etc) but the layout and design are no longer managed by the CMS.

There are multiple reasons for moving to a headless CMS. They centralize content management in one place so assets are reusable across multiple channels (web, mobile, etc.). With the separation of the visualization layer, layouts are more flexible so businesses can differentiate on design. Teams can also develop better quality websites faster by using third party APIs and functions. Headless CMSes facilitate lightweight websites that can be more performant.

Wordpress and Drupal remain popular CMSes. According to builtwith, Wordpress adoption continues to grow within the top 1M sites worldwide with about 32% share. However, Wordpress’ top 100K and 10K site penetration flatlined around 35% a few years ago. Speaking to conference attendees, most suggested that greenfield sites are unlikely to adopt Wordpress and Drupal. Both platforms have noticed a shift to the JAMstack and have added decoupled options to remain compelling.

Two varieties of headless CMSes have emerged: API-first and Git-based. Contentful, the most well-known API-oriented CMS, had a large presence at the conference. Contentful targets enterprises moving away from WordPress, Drupal, Sitecore, and Adobe Experience Manager. Some attendees stated the API-based approach perpetuates vendor lock-in because it is hard to get data in and out of the service. Git-based CMSes include Netlify’s open source CMS and Forestry.io, an early-stage startup. Forestry allows content marketers to make edits without them realizing they are writing markdown and committing to the repo. This model offers version control, clear edit tracking, and the ability to quickly redeploy old versions of the site.

Performance is key. Google notes that “53% of users will abandon a site if it takes longer than 3 seconds to load.” A few years ago, Amazon published a fascinating statistic that they lost 1% of sales for every 100ms of latency.

Bad performance not only hurts businesses but also the user experience. This is especially true as mobile represents a higher portion of website traffic. According to Statistica, mobile traffic surpassed 50% of website traffic in 2017. While the average phone connection speed and processing power has improved, HTTPArchive.org identified that time to first paint of mobile has worsened. Sam Bhagwat, a Gatsby co-founder, notes that mobile performance hasn’t improved because of heavier page weights and the growing complexity of websites.

During the JAMstack conference, attendees repeatedly stated performance was as competitive advantage. CDNs have drastically improved time to first byte. Static Site Generators (SSGs) like Hugo and Gatsby can help with time to first paint. Bud Parr, a Hugo maintainer, highlighted that since Hugo is written in Go it has a fast build time. Gatsby emphasizes that it was built with performance as a first-class principle of the framework. Embedded in the solution are best practices like in-lining critical CSS in your head, only loading the JavaScript that’s actually necessary for that page, and lazy loading images. We expect the community to rapidly adopt solutions that improve performance.

The JAMstack conference highlights that frontend developers are starting to have a louder voice. As one attendee told me, “With the decoupling of the frontend we are empowered to do more. Frontend engineers are heroes now. We can accomplish so much without backend people anymore.” Marketers can’t be forgotten in the conversation, and headless CMSes continue to drive value for the teams. Performance is a critical aspect, and the JAMstack components of CDNs and SSGs can facilitate blazing fast experiences.