CONCEPT1 _What is the JAM Stack

📚 What is the JAM Stack

Reading time: ~9 minutes

If you are already familiar with JAMStack and just want to move on to the first exercise go to the next section => ⚒️ Setup and deploy your first app. Otherwise, read on.

We will cover:

Introduction to the JAMStack
Why this is cool ?
Introduction to Netlify
Want to learn more ?

1. Introduction to the JAMStack

Sources JamStack.org and Netlify Documentation

Jamstack is the new standard architecture for the web. Using Git workflows and modern build tools, pre-rendered content is served to a CDN and made dynamic through APIs and serverless functions. Technologies in the stack include JavaScript frameworks, Static Site Generators, Headless CMSs, and CDNs.

🔵 Javascript: can represent any modern Javascript/Typescript framework like React, Vue, or Angular or even vanilla JS.

	ReactJS (we will use it today)
	Angular
	VueJS

🔵 API: is a backend serving real time data through either REST or GraphQL, endpoints to interact with fetch, ajax,axios

	REST (we will use it today)
	GraphQL

🔵 Markup: can be either plain old HTML or static content like markdown. This is the nature of markup that will determine the static page generator technology

	Vanilla HTML (we will use this today)
	Markdown

🔵 Static page generator

They apply data and content to templates, and generate a view of a page which can be served to the visitors of a site.

The greatest difference between a static site generator and a traditional web application stack, is that instead of waiting until a page is requested and then generating its view on demand each time, a static site generator does this in advance so that the view is ready to serve ahead of time. And it does so for every possible view of a site at build time.

It improves performance and high compatibility with its rendering. Automates code splitting, image optimization, inlining critical styles, lazy-loading, prefetching resources, and more to ensure your site is fully optimized. No manual tuning required.

You can find a pretty exhaustive list here.

🔵 CDN: : geographically distributed group of servers which work together to provide fast delivery of Internet content.

A CDN allows for the quick transfer of assets needed for loading Internet content including HTML pages, javascript files, stylesheets, images, and videos. The popularity of CDN services continues to grow, and today the majority of web traffic is served through CDNs, including traffic from major sites like Facebook, Netflix, and Amazon.

🔵 Logical Architecture

The core principles of pre-rendering, and decoupling, enable sites and applications to be delivered with greater confidence and resilience than ever before.

🔵 Pre-rendering:

🔵 Decoupling:

🔵 Move to CDN:

2. Why this is cool ?

🔐 2.1 - Security

Do you remember /wp-admin.php ? Me too. The elder Cedrick

The Jamstack removes multiple moving parts and systems from the hosting infrastructure resulting in fewer servers and systems to harden against attack.

Serving pages and assets as pre-generated files allows read-only hosting reducing attack vectors even further. Meanwhile dynamic tools and services can be provided by vendors with teams dedicated to securing their specific systems and providing high levels of service.

🌐 2.2 - Scalalibility

Have you ever Ddos Amazon CloudFront ? Neither have I the elder Cedrick.

When sites can be served entirely from a CDN there is no complex logic or workflow to determine what assets can be cached and when.

With Jamstack sites everything can be cached in a content delivery network. With simpler deployments, built-in redundancy and incredible load capacity.

🚀 2.3 - Performance

Page loading speeds have an impact on user experience and conversion. Jamstack sites remove the need to generate page views on a server at request time by instead generating pages ahead of time during a build.

With all the pages are already available on a CDN close to the user and ready to serve, very high performance is possible without introducing expensive or complex infrastructure.

🆘 2.4 - Maintainability

When hosting complexity is reduced, so are maintenance tasks. A pre-generated site, being served directly from a simple host or directly from a CDN does not need a team of experts to "keep the lights on".

The work was done during the build, so now the generated site is stable and can be hosted without servers which might require patching, updating and maintain.

📦 2.5 - Portability

Jamstack sites are pre-generated. That means that you can host them from a wide variety of hosting services and have greater ability to move them to your preferred host. Any simple static hosting solution should be able to serve a Jamstack site.

Bye-bye infrastructure lock-in.

💡 2.6 - Developer Experience

Let us show you this one today

3. Introduction to Netlify

Source https://www.netlify.com

3.1 Netlify in a nutshell

Decoupling the frontend from the backend: Unlike the large legacy apps, Jamstack projects neatly separate the frontend pages and UI from the backend apps and databases. Freed from backend servers, the frontend can then be deployed globally, directly to a CDN.

Dynamic content via APIs: The global frontend uses Javascript and APIs to talk to backend services, allowing pages to be enhanced and personalized.

overview of netlify

3.2 Soooooooooo What about today ?

We will have our code in GITHUB.
Netlify is integrated with GITHUB, on a new commit it will BUILD and deploy the SITE on the CDN.
To code and commit to github we will use an IDE. You can use your own or we will provide you one in the Cloud called GITPOD.
The application we will deploy is BattleStax. This is not only static content but also a REST API to retrieve Data from a DB. The DB is DataStax Astra.

Template CTRL click