What is JAMstack?JAMstack describes a way to build fast, database-independent web sites with the joint goals of improving overall performance and lowering development costs. It’s more a design principle than a detailed blueprint. Focus is kept on the front-end build, skipping server-side functions when possible and using a CDN (Content Delivery Network) to deliver content at lightning speed. In simple terms, JAMstack is a solution stack (also known as a software stack or technology stack). A stack encompases all the components that go into operating a site or application. Different stacks may have some of the same elements, but they’re arranged in a distinctive way in accordance with the underlying philosophy behind the stack’s architecture.
Breaking Down the AcronymJAMstack features three core components:
MarkupBuild tools or static site generators such as Grunt, Webpack, Metalsmith, Middleman, or Hugo are used to create templated markup. The markup is what users will see when visiting a site.
How JAMstack WorksThe upfront work of JAMstack development happens offline. HTML is generated using static site generators and other build tools, then pushed to git as a collection of pre-built pages. When a user requests content, the HTML gets distributed by a CDN with no need for further processing. In contrast, there are a surprising number of steps between a user requesting a dynamic page and content actually loading. The request first goes to the server, which queries a database (like MySQL or MongoDB). That data (in conjunction with plug-ins and active themes) is used to create an HTML document within the server environment which is then presented to the user. Essentially, templating occurs every time a page is called up instead of being done in advance.
Benefits of JAMstackJAMstack has some major advantages over the traditional app server model.
SpeedStatic websites have no need to query a database, and their code has already been compiled. Every user gets the same page with dynamic elements handled client-side through third-party tools like Disqus. There’s next to no server-side work. That means pages can be returned up to six times faster than otherwise possible.
SecurityThe absence of a database makes a static site incredibly secure. It’s immune to SQL injection, for example. There are fewer server interactions overall to be targeted by malicious actors. In addition, it’s widely known that the more complex software is, the more room there is for small errors that compromise security. The JAMstack philosophy reduces the number of “moving parts” involved in development, so developers can more easily spot and fix potential weaknesses.
ScalingCDNs distribute content across their entire network. They’re well able to handle sudden unexpected loads, such as a surge of interest after an ad campaign goes viral.
CostThe overall expense of building, maintaining, and deploying a JAMstack site are lower. Most of this reduction comes from the focus on the frontend; fewer servers are needed, and the development team can be smaller. Hosting is also dramatically cheaper without a database involved.
MaintenanceOnce a site is live, there’s almost no need for maintenance. Owners don’t have to perform updates and only need to do a back-up when content changes. This makes JAMstack a great option for small businesses who want an informative landing page
Limitations of JAMstackJAMstack has enormous potential, but it isn’t perfect. Critics of the style have offered these cautions.
JAMstack has a steep learning curve for non-technical usersThe JAMstack set-up isn’t very approachable for content editors. User-friendly CMS’s like WordPress and Drupal have become the expected standard for adding content to blogs and company homepages. The average employee given charge of the company’s blog would need training in Markdown just to make a blog post. Since the content is stored in the same repository as the code, it’s typically easier (and safer) for IT to perform any updates. There are markdown generators and JAMstack-friendly updating tools available, but they have a long way to go before they’ll be as accessible as WordPress. For now, JAMstack tends to add to the IT workload.
All changes have to go through a developerEven in cases where an employee can handle content editing, anything beyond trivial changes to style requires new code. Labor is one of the most expensive parts of development, so the cost of those changes adds up fast.
It’s nearly impossible to have member-differentiated contentTracking memberships and tiers of access requires a database, and databases aren’t part of the JAMstack worldview. That means no paywalls, no premium content, and no easy way to set up classes of users with varying levels of privileges. Some third party options like Disqus have log-ins, but that’s handled by their platform and doesn’t affect the page content.
Dynamic features can only be added through client-side third party solutionsComment sections, forums, polls, galleries, stores, and other types of dynamic features are possible through third-party options (Livefyre, lunr.js search, etc). Some view third party services as a bonus, but they become a burden when they’re required for every dynamic feature of a page. Most developers will recommend a WordPress or similar site when there’s a large amount of dynamic content involved.
How Does JAMstack Compare to Other Stacks?As mentioned earlier, JAMstack is more a philosophy than a particular set of software and components. Other stacks are more specific as to what technology is included. Every system doesn’t have a catchy title, but there are two named stacks that JAMstack is often compared to: LAMP and MEAN.
LAMP (Linux, Apache, MySQL, PHP)LAMP is used to build dynamic web sites and web apps. It’ve very different from JAMstack; pages are reconstructed from a database on request rather than being held as flat documents ready for delivery. Content addition and modification is easier with LAMP (though future third party options are wearing away at this disparity). However, JAMstack delivers content much faster.
Real World ApplicationsThough JAMstack as a named stack is a recent development, engineers have been trending this way for a while. These examples show the variety of sites that can be built using JAM.
Smashing MagazineSmashing Magazine is an online magazine for web designers and developers. Managing the tangle of technology that made up their stack, especially caching plugins for WordPress, was impacting performance and load times. They decided to build an entirely new website using JAMstack. The site is still in open beta, but it shows enormous promise. Load times have gone from 800ms time to first load to 80ms.
SpheroSphero is a robotic toy that wirelessly interacts with mobile devices. Though the toy is complex, the company’s web site needs were simple. JAMstack provides the base for this beautiful site that loads quickly on most devices despite being intensely graphics-heavy.
Marvel SearchMost of the time static sites aren’t suitable to huge projects. There are exceptions, though. Marvel Search is a searchable catalog of nearly 2,000 Marvel characters by name or team. More sophisticated databases offer more information and interactive character content, but the speed with which these pre-built pages load offers a superior user experience.
Looking ForwardMost websites have fewer than a dozen pages in total and won’t need to be updated often. For these sites, JAMstack has a lot to offer. It can lower development costs, reduce security risks, and improve the user experience by providing faster load times.
Could JAMstack be an option for your next enterprise web site? Contact Concepta for a free assessment of your digital needs!