Skip to content

Why-Jamstack-Rocks-----.md

Latest commit

 

History

History
238 lines (140 loc) · 20.9 KB

Why-Jamstack-Rocks-----.md

File metadata and controls

238 lines (140 loc) · 20.9 KB

Why Jamstack Rocks🤘😎🤙

JAMstack websites don’t use the microservices architecture, but they go for the micro frontends architecture. Each static page with HTML…

Why Jamstack Rocks🤘😎🤙

JAMstack websites don’t use the microservices architecture, but they go for the micro frontends architecture. Each static page with HTML and JavaScript is a micro frontend. And they can use any REST API, including the one built on the microservices architecture.

ALLOFMYOTHERARTICLES
bryanguner.medium.com

### JAM stands for JavaScript, API & Markup.

“A modern web development architecture based on client-side JavaScript, reusable APIs, and prebuilt Markup”

— Mathias Biilmann (CEO & Co-founder of Netlify).

JavaScript

Dynamic functionalities are handled by JavaScript. There is no restriction on which framework or library you must use.

APIs

Server side operations are abstracted into reusable APIs and accessed over HTTPS with JavaScript. These can be third party services or your custom function.

Markup

Websites are served as static HTML files. These can be generated from source files, such as Markdown, using a Static Site Generator.

### Terminology:

API

API is the acronym for Application Programming Interface. It defines interactions that allows two applications to talk to each other.

### What is the use case?

JAMstack while not suffering from a shortage of virtues is not a one size fits all solution!

Don’t use JAMstack when:

  • You don’t generally do anything that consumes enough volume of static assets to cause your application to struggle with performance at least sometimes.
  • Your development team is used to different tech, and the cost of migration is higher than the reward.
  • You are dealing with tons of real-time/user data, (i.e. audio or video processing in real time)
  • In most cases, it does not make sense to migrate a legacy project that is functioning just fine with no signs of depreciation on the horizon.

What is Jamstack?

Jamstack is an architecture designed to make the web faster, more secure, and easier to scale.The core tenants of pre-rendering, and decoupling, enable sites and applications to be delivered with greater confidence and resilience than ever before.

Explore more of the benefits of Jamstack.

Pre-rendering

With Jamstack, the entire front end is prebuilt into highly optimized static pages and assets during a build process. This process of pre-rendering results in sites which can be served directly from a CDN, reducing the cost, complexity and risk, of dynamic servers as critical infrastructure.

With so many popular tools for generating sites, like Gatsby, Hugo, Jekyll, Eleventy, NextJS, and very many more, many web developers are already familiar with the tools needed to become productive Jamstack developers.

Enhancing with JavaScript

With the markup and other user interface assets of Jamstack sites served directly from a CDN, they can be delivered very quickly and securely. On this foundation, Jamstack sites can use JavaScript and APIs to talk to backend services, allowing experiences to be enhanced and personalized.

Supercharging with services

The thriving API economy has become a significant enabler for Jamstack sites. The ability to leverage domain experts who offer their products and service via APIs has allowed teams to build far more complex applications than if they were to take on the risk and burden of such capabilities themselves. Now we can outsource things like authentication and identity, payments, content management, data services, search, and much more.

Jamstack sites might utilise such services at build time, and also at run time directly from the browser via JavaScript. And the clean decoupling of these services allows for greater portability and flexibility, as well as significantly reduced risk.

The real power of JAMstack development is easiest to grasp when compared with CMS-driven dynamic websites. It’s easy to forget the sheer number of steps required to fulfill a single page request, and the complexity of the operations that are constantly performed on the server to generate the final HTML received by the user’s browser.

When a user requests a page, your server queries a MySQL database and uses a PHP interpreter, combined with data from the active theme and plugins, to stitch together an HTML document which can then be served to the user’s browser. What this extraordinarily complex operation amounts to, in essence, is **templating**. Given that even a modest blog is far too complex to code every page by hand, this method of dividing content into reusable components and automating the assembly makes sense.

But why does this templating operation need to happen on the server? Do we really need databases and server-side software (which opens up dozens of security holes along the way) just to create a simple blog? At a time when browsers themselves have become operating systems, capable of interacting with countless APIs and running complex applications client-side, and when front-end development is dominated by JavaScript-based automation using npm, haven’t we outgrown this model?

Static site generators like Jekyll and Hugo are part of what makes this possible. They essentially replace PHP as our templating system, but instead of running on a server and generating content on-the-fly, they **run locally** as part of your development process. Your HTML is generated up-front, and your website — now a collection of easily-cached static files — can be distributed to users by a blisteringly fast CDN (content distribution network).

-source

### Common Features Of The Jamstack Workflow:

Content delivery network

Since all the markup and assets are pre-built, they can be served via CDN. This provides better performance and easier scalability.

Atomic deploys

Each deploy is a full snapshot of the site. This helps guarantee a consistent version of the site globally.

Cache invalidation

Once your build is uploaded, the CDN invalidates its cache. This means that your new build is live in an instant.

Everything in version control

Your codebase lives in Version Control System, such as Git. The main benefits are: change history of every file, collaborators and traceability.

Automated builds

Your server is notified when a new build is required, typically via webhooks. Server builds the project, updates the CDNs and the site is live.

### Getting started

DEVELOPMENT

However you decide to generate your HTML assets is up to you. The three most common approaches are:

Hand coding

Simple and effective method of writing HTML, it’s ideal for super simple pages.

Static Site Generators

Most JAMstack sites are powered by a static site generator. There’s no enforcement on which SSG you decide to use.

Frontend Framework

Most frameworks don’t output static HTML files, however it is possible to do that but it requires more tooling experience and maintenance.

DEPLOYMENT

Your built site needs to be hosted somewhere. There are great services that provides this for free and with ease.

### DYNAMIC PARTS

JAMstack websites don’t have to be static. There are great services available to help bring some dynamic data to your product.

Custom functions

You can also abstract your own functions into reusable APIs. For this you can use AWS lambda functions or Netlify Functions

Custom data

As you add features to your site, you may want to store user profiles, shopping cart data, game levels, or other dynamic data. Get started for free with FaunaDB Serverless GraphQL

Comments

Many JAMstack products have dynamic comment sections. These are typically used on blogs

Forms

A great way to interact with your audience

E-Commerce

Setting up an online store on the JAMstack has never been easier

Search

Rely on third party services to integrate a search functionality

### CMS

JAMstack sites can also be controlled via a Content Management System, these are typically known as Headless CMS. Once a change in the CMS is made, a new build of your site will be triggered and then deployed as static assets.

### Best Practice:
  • Using CDNs for hosting. Using content delivery networks improves performance and scalability.
  • Atomic deploys. Deploying lots of static files can be time-consuming. But with atomic deploys, you can forget about downtimes. Your app is always available to users, even when a new deployment is being executed. Besides, with each deploy being a full snapshot of your website, it guarantees global consistency.
  • Instant cache invalidation. CDNs store sites in their local caches. Thus, when you change something on your website, your CDN invalidates the affected files and replaces them with the new ones. However, the process can take hours. To avoid this, it’s recommended to choose CDNs with instant cache validation.
  • Version control systems. A version control system, such as Git, is a cloud for your code. It hosts your source code, keeps track of all changes, and streamlines collaboration. If a mistake is made, developers can easily compare the current code from its previous versions and identify the cause.
  • Automated builds. In terms of web development, build is a process of converting files and other assets into a final software product ready for deployment. Automating this process eliminates the risk of variation and defects. Besides, whenever a new build is required, your CDN is notified using webhooks.

### Resources

Here’s a list of hand-picked JAMstack resources ranging from learning materials to third party services.

Services

Articles

Videos

resources and links:

Even More Resources:

By Bryan Guner on July 7, 2021.

Canonical link

Exported from Medium on August 6, 2021.