New modern Architecture design for web architecture. Actually there is not something new about this architecture proposal, it’s just encouraging to use CDN + APIs to build systems. It’s a way to implement a clear separation of concern between your front-end work and your backend API microsystem architectures.
Problem:
As you can see, as more components you have in your design systems, the more points of failure you have, and the more expensive it’s to maintain it.
Jamstack Architecture solution, goals:
- Decouple Building & Hosting
- Decouple Front-End & Back-end
- API’s rather than Databases.
- Pre-baked Markup, enhanced with JS.
- Do not worry anymore about spike traffic, because your site is served by CDN, not by app server.
- Static sites are far cheaper hosting apps than server apps.
- Build out all public-facing pages. Performance that no other approach can beat. (There are many frameworks out there to help you to deliver that kind of architecture which is SSG (Static Site Generation) or ISSG (Incremental static site generation), like NextJS, Gatsby & Remix.
- Simplify the workflow of your apps.
- You have Javascript, APIs, and Markup, that’s all!
JAM STACK for SPA, Websites, and Hybrid apps:
SPA (Single Page applications):
- Build Tools (Webpack, gulp, Broccoli, etc)
- Git -> Pull -> Watch -> Commit -> Push (CI/CD configured)
- Frameworks (React, NextJS, Gatsby & Remix, VueJS, Angular, Ember, etc)
- CDNs
- APIs (Home brewed APIs)
Websites:
- Git -> Pull -> Watch -> Commit -> Push (CI/CD configured)
- Build Tools (Middleman, Hugo, Jekyll, Roots, Gatsby, Metalsmith, Hexo, etc)
- APIs (Disqus, Intercom, Contentful, Swiftype, static JSON, etc)
Hybrids
- Git -> Pull -> Watch -> Commit -> Push (CI/CD configured)
- Pre-bake markup: Middleman, Hugo, Roots, Gatsby, NextJS, etc.
- Enhance with SPAs: React Component, Angular, VueJS, etc.
- Combine with APIs (Discourse, lunrjs, Stripe, etc)
Best practices to follow by this architecture:
- Entire site on a CDN
- Atomic Deploys (if you want to deliver small changes to production, it’s doable using small changes, you will need to rely on Instant cache invalidation, which is the next point).
- Instant Cache Invalidation
- Everything lives in Git.
- Automated Builds (of course you need to work with pre-generated markup, pre-build and Push to CDN).
