Developers are very often the early adopters for new tools and practices. When it comes to content management, especially text content, they have a lot to say. They manage heavy code-bases on a daily basis. JAM Stack is a way to leverage these practices for dynamic content. It’s also a building block for the Vue Storefront Next and Shopware PWA products.
Check out our modern solutions for eCommerce that can replace your Magento platform or see how we can prolong its life with Progressive Web Apps.
Static page generators. The concept sounds at first… almost like deja-vu. Didn’t we have them before? Editing static HTML, uploading it to FTP servers, and manually managing the hyperlinks. Well, yes and no. Kind of.
Human-oriented formats have gradually replaced the old XML, RSS, and ATOM formats.
All you need to know about the development of static sites with JAM Stack
Start with a separation of concerns
Developers hate WYSIWYG editors as they generate quite messy HTML. Say “WYSIWYG editor” and developers immediately see HTML generated by MS Word from 2003. It has improved over time but a visual editor equals a lot of additional work, probably because visual content editing does not separate roles enough.
Front-end developers don’t like to take care of the content details. They like to have full control over how it renders and is optimized for the user’s device. Editors, on the other hand, use all the tools the WYSIWYG editor gives them—including styling and formatting. This can cause a lot of trouble.
Modern static page generators start with a separation of concerns in order to provide the content in the form of semantically meaningful documents. The Edit process is separated from the Render process by some kind of intermediate format which is easy for a human to edit and process.
We can name just a few of the most popular intermediate content formats:
- MarkDown language — popularized by Github. MarkDown looks okay, even in its plain form, and can look really cool when rendered. It’s used, for example, by VuePress (vuepress.org) and Jekyll (jekyllrb.com)
- WikiText — it started with Wikipedia and is now being used by popular Confluence (Atlassian.com) and GitBook projects (github.com/GitbookIO/gitbook)
- JSON — generated from a WYSWIYG editor (like ProseMirror — prosemirror.net) or Headless CMS (like Prismic — prismic.io)
These more human-oriented formats have gradually replaced the old XML, RSS, and ATOM formats.
Static pages and dynamic data sources
The static part of a “static” page generator can be a little bit misleading. The page is static in its final form: the generated HTML markup. It can be served from anywhere, which is one of its key benefits, but the data used for the page generation is subject to all kinds of changes. The data itself doesn’t have to be static. In reality, sites—even single pages that change—can be dynamically regenerated whenever the data has changed. It’s usually used as a kind of file-based output cache for dynamic data.
Apps currently do 90% of their job on the client’s side, using dynamic REST or GraphQL data sources and services. You can find plenty of such ready-to-use services; these range from low-level image-thumbnail services like Cloudinary up to quite sophisticated ones like Snipcart, which lets you include a fully functional checkout right into your site.
Just because a page has been generated, doesn’t mean it can’t be dynamic. Usually, the pages include a lot of dynamic JavaScript (React, Vue, Angular, etc.). The static page form is mostly used to improve SEO in this configuration, to provide the browser with not just an empty HTML shell (like most Single Page Applications still do) but with something the crawler can really index.
Does it still sound static? This combination of JavaScript, an API, and Markup is called the JAM Stack, and the growing community around this concept is pretty impressive. You can read more or join some local community events via jamstack.org.
The JAM Stack empowers the Vue Storefront Next and Shopware PWA products
Object-based model
For most rendering frameworks, the rendering process is based on components/widgets that are fed with the structural content. There is usually a JSON config file or feed making up the page of a particular component (developed in modern JS like React or Vue.js). The provided data is injected and the components take care of the proper rendering process.
Generators of static sites
The frameworks, or generators, are here to help, providing the basic scaffolding and infrastructure for rendering the content to the final form. They sometimes also deploy it.
Some of the static site generators are less dynamic (e.g. GitBook which is designed for software projects documentation).
Some of them are domain-oriented. Vue Storefront (vuestorefront.io) has a static site generator included; it’s based on the eCommerce domain (products, categories, etc.). The page is updated whenever the price/products change.
Some of them are framework oriented. NuxtJS (nuxtjs.org) is a pretty cool example of a very opinionated and popular static page generator dedicated to Vue.js. A fully customized page structure, extensions, and custom routing make it one of the best options if you’re using the Vue.js framework.
There are also very general solutions offering a full range of integrations. A good example of this approach is GatsbyJS (gatsbyjs.org). The number of supported data sources is amazing and includes GraphQL adaptors, as well as popular CMS and eCommerce platforms.
If you’d like to check out all the available page generators, please do check the Awesome Static Generators list (github.com/myles/awesome-static-generators#wikis). You’ll find tools for any programming language you can name (including Golang, Kotlin, Electron, Python, and JS).
Distribution of static pages with dynamic content
Besides the improved developer-editor cooperation that comes with static pages, there are other benefits, and easy deployment is clearly one of them. With a wide set of hosting providers like Amazon AWS, Netlify, Heroku, Zeit, and even Github itself, deployment is usually one-click or one `git push` away.
It’s so easy because the results are just the static HTML files + JS/media assets.
Git source control gives the editors and devs even more common ground. They can tag changes, compare and merge edits, and use branches for content staging. It doesn’t mean the editors need to use the command line tools; Gitlab or GitHub Enterprise are probably the best tools to start with.
Easy distribution usually also means easy Geo-Distribution as the files can be uploaded into different AWS/Azure availability zones and then users will just be redirected to the closest location by a dynamic DNS Service like Amazon Route 53 or by a CDN service like Cloudflare.
Speed and scalability of static pages
A static site means you don’t have to scale out the application and database layer as there is hardly any dynamic application or database to serve dynamic requests. There is no J2E container, Node.js server or PHP application. All markup was generated and is now hosted by a super-fast HTTP server like nginx, varnish or even a more specialized CDN service.
Most application scaling headaches are simply gone—including avoiding memory leaks, race conditions, and other problems that might occur at scale.
Safety of static pages
As there’s no intermediary involved (i.e. a database), the threat of code injection is minimal for a static website. There are no plugins and dynamic software to host the website.
Static websites are a safe bet compared to dynamic ones when it comes to security as they don’t rely on CMS plugins. APIs and JavaScript are used to handle the dynamic functions of static websites, eliminating the risk of getting hacked.
Summary of static pages and JAM Stack
Static site generators are here to say. They are back again and probably stronger than ever. Everybody loves them: they’re easy to scale, super fast for users, and very cheap and easy to distribute.
Of course, with static pages, the app-development paradigm has shifted and the architecture needs to be adjusted. It’s another step into an “It just works” approach where SaaS services are used around a lean core in order to provide stable and scalable features to end-users.
Published April 27, 2020
