Hyper Web Development and the Rise of JAMstack Architecture
TL;DR
- Slow, cumbersome, and server-heavy web development is coming to an end
- Frontend dependency on backend development has been decoupled by modern JavaScript, a robust microservices marketplace, and advanced preprocessors
- JAMstack is the new web development architecture built from JavaScript, APIs, and Markup
- JAMstack is easier and faster for developers, and it provides better performance, security, and scalability compared to server-run web apps
The server bottleneck of the legacy web
Web development has long been anchored by backend servers.
Even simple sites, like blogs or basic ecommerce stores, use servers as the backbone of the site's functionality. When a page is loaded, content is queried, generated server-side, and then sent to the user. For every visitor, each piece of content is rebuilt.
Any visitor interaction typically relies on a variety of database calls, which require server maintenance and performance optimization. To keep everything up and running, you'll spend money to scale your infrastructure to handle unpredictable server loads.
In addition, if you've ever wanted a server-side CMS, like Wordpress, Drupal, or Joomla, you'll need a server and a database.
The great frontend, backend decoupling
A new model of separating backend and frontend functionality has accelerated modern web development.
The great decoupling has been enabled by three key trends:
- The rise of modern JavaScript: Complex and dynamic applications can now be built to run locally in your browser. The rise of robust javascript libraries lets our browsers power much of a site's functionality.
- The invasion of microservices: The rapid growth of the API economy has enabled a new degree of modularity. Web developers can add functionality to their sites by leveraging a growing market of microservices, instead of waiting on custom, monolithic server development.
- The explosion of preprocessors: With preprocessors, sites can be pre-built into a stack of files that can be served anywhere and distributed entirely by content delivery networks (CDNs), rather than relying on dynamically served content from a backend server.
Welcome to the JAMstack.
JAMstack building blocks
At its core, the JAMstack is a "modern web development architecture based on client-side JavaScript, reusable APIs, and prebuilt Markup." The JAMstack is built with JavaScript libraries like Vue.js and React.js, APIs like Twilio and Stripe, and Markup like Gatsby and Webpack.
Forget server-side CMS, isomorphic rendering, and server-run web apps.
JAMstack.org compiles a list of more examples of various tech stacks for you to browse.
Each piece of the JAMstack puzzle makes the other pieces more powerful.
JavaScript functionality has grown significantly over the past few years. You can now build engaging user interfaces right in the browser with React or Vue and can plug in various libraries, like Chart.js or D3.
APIs have become highly extensible and easily embeddable with snippets of JavaScript. In the JAMstack, APIs can either be proprietary to communicate with your own, decoupled backend or managed entirely by third-parties. For example, using the Stripe API to handle payments is far easier than trying to build an entire payment stack.
Preprocessors and site generators wrap all of the JavaScript and APIs into a single, prebuilt package of files. By doing as much preprocessing as possible, you can ensure fast load times and eliminate the need for a server to render content.
Building a better web with the JAMstack
The JAMstack is great for building a variety of sites, but is particularly ideal for simple applications or static sites (e.g. most Wordpress and blogs sites, basic ecommerce stores, small media publications, etc.).
You won't build the next Facebook on the JAMstack (yet), but you'll be able to deploy an extensible, flexible, and highly modular web application or site.
There are significant benefits to implementing the JAMstack:
- Better performance: Generating pre-built files to be served over a CDN increases site performance and speed. Tools like Heroku and Wordpress can be bulky and slow. The ability to quickly serve content has become increasingly important with the rise of mobile.
- Greater scalability: Static content scales dynamically on a CDN, allowing your site to reach more people quickly and cheaply. Preprocessed sites can handle as much traffic as you can throw at it, without needing to scale a web server upfront.
- Higher security: With no complex servers to run or maintain, the threat of direct breaches or code injections diminishes. The threat surface is largely reduced to APIs, often managed by reliable, fully scaled third-party services.
- Streamlined developer experience: With JAMstack, everything can be accessed via Git and entire projects can be run locally on a developer's computer, streamlining contributions and testing.
The JAMstack ecosystem
Unsurprisingly, an ecosystem of developer tools has grown around the JAMstack. Netlify, one of the most popular tools, is building a git-centric workflow and application delivery network to make the JAMstack a natural part of the developer workflow.
Given the dominance of server-based CMS (Wordpress apparently powers 42% of the web), JAMstack has the opportunity to rewrite large swaths of the modern web. Check out an in-depth overview here by Mathias Biillman, CEO of Netlify.
