Video details

What is Angular in the Jamstack?


To start off this mission, let's talk about the Jamstack architecture and where Angular fits!
00:00 Introduction 00:52 What is Angular in the Jamstack? 01:51 Pre-rendering 02:50 Static Site Generators 03:42 Content Delivery Networks 04:08 Netlify Edge 04:38 Git Workflow
Connect with Netlify: Website: Forums: Twitter:
LinkedIn: Facebook: Jamstack:
Come help us build a better web!


Welcome Explorer to your mission, angular in the jamstack should you choose to accept it. I wanted to start out this mission by kind of talking about angular in the jamstack and the jamstack architecture so that we make sure we get our bearings before jumping right in. So looking at what the jamstick architecture is, very high level, generating cashable static assets deployed to a CDN or content delivery network, using client side JavaScript to utilize third party APIs and serverless functions, and all of that wrapped in this creating a better development experience through automated workflow. So again, this is pretty high level, but I just wanted to skim the surface because basically we're going to be coding through all these best practices as we work through the mission. But I wanted to let you know what you're doing ahead of time. So digging in a little more on the angular side. What is angular in the jam stack? Or as I fondly call it, jambuar, but we'll see if that catches on. So angular comes in on that pre rendering side when we're basically making those static assets. We can do this either using Scolio, the static site generator for angular or angular universal, but the rest is still the same. We're putting our assets on edge nodes in that CDN closest to the user requesting and having it load fast. We're still dynamically grabbing data from APIs or by triggering serverless functions. And we're also still decoupling and modularizing the development process and using git workflows for automation. So what is this? I want to give you a few definitions here as we start out of things that we're going to be talking about a lot during this mission. But I will also bring up more definitions throughout the mission. So prerendering pre rendering is a process to preload all elements on the page. And this is basically you're going to have it ready for web crawlers, which is always a very important thing as you're trying to get users to your site and something that's not always available when you're building sites and angular. But we're also able to deliver all of our assets or the assets that we prerender statically. So this is making content ready before a user even requests it, and it gives us those really fast load times. So how do you do this with angular? You may have heard of angular universal in regards to server side rendering, but inside angular universal, we also have the ability to use the pre render functionality. There's also a really great NPM module, which is a command line tool called Angular Dash prerender. And this basically gives you the functionality of the pre render and angular universal, but a more easy to use command line tool. So what about static site generators? Well, static site generators generate all the pages of a site once when there are changes to the site so that there are no moving parts in the deployed site, just generated content, and it makes it easier to cache, harder to hack, and get to the user faster. So every major framework and language has one. Ours is called Scully, and you can find more information about [email protected] So this is the static site generator made for Angular. It's the only one and the best one. One of my favorite things are about Scully is that you're just using Angular. You're using commands that you may already be familiar with, like Ng Add and Ng generate to use the functionality of Scolio. But we'll see a lot more of this as we go through. One of the other things that I touched on were CDNS or content delivery networks. These are geographically distributed edge nodes that hold the deliverable assets sent from the origin server and serve as close to the user as possible. They have redirect knowledge which allows them to send the deliverable to nearby nodes if there's a problem, which makes them even more reliable. This is basically a dumb server with redirect knowledge. For this project, we'll be using Netlify Edge. Netlify Edge helps us get our project up to the Edge nodes really fast, with hardly any set up whatsoever, especially compared to traditional servers. It also has these great aspects compared to standard CDNS. Like having that get integrated CICD automatic deploys rollbacks, instant cash invalidation. And we'll see this as we go into our project. It'll feel so seamless, though. Just know that our project is on Netflix by Edge. Speaking of the get integrated, we'll be using a Git workflow throughout this whole mission. What is a Git workflow? We're basically utilizing Git repos and their functionality like cloning, forking pull requests, merge checks, and more. And this basically creates an easily distributed, checked and quick interaction development process. We're using Get to organize and check code for many devs. So how even do we do this? Well, there's a video right after this, so check it all out and let's get coding.