🏠 Table of Contents > Bootstraping - 📚 What is the JAMStack
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:
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:
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.
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.
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.
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.
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.
Let us show you this one today
Source https://www.netlify.com
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
-
We will have our code in GITHUB
-
Netlify is integrated with GITHUB, on 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 retrieve Data from a DB. The DB will be DataStax Astra.
Angular vs VueJS vs React
- 🎥 Angular vs React vs Vue [2020 Update]
- 🎥 React vs. Angular vs. Vue: Which Should You Choose
- 📄 Angular vs Vue vs React: choosing the best framework in 2020
- 📄 React vs Angular vs Vue.js — What to choose in 2020? (updated in 2020)
- 📄 Angular vs React vs Vue 2020
Static site Generator (SSG)
Content Delivery Network (CDN)
- 🎥 What is Content Delivery Network, by Ryan Sumner (4:32 min)
- 🎥 What is a CDN and why Developers should Care about using one (GOTO 2016) by Artur Bergman (32:10 min)
🏠 Back to Table of Contents or move to the next section => ⚒️ Setup and deploy your first app