Angular in the Jamstack with Tara Z. Manicsic

Intro

To start off our mission let's talk about the Jamstack architecture and where Angular fits!

Transcript:

Welcome explorer to your mission, Angular in the Jamstack, should you choose to accept it. I wanted to start out this mission by talking about Angular in the Jamstack and the Jamstack architecture so that we make sure we get our bearings before jumping right in. Looking at what the Jamstack architecture is, very high level, generating cacheable, static assets; deploying 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.

Again, this is pretty high-level, but I just wanted to skim the surface because basically, we're going to be [unintelligible 00:00:44] 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. Digging in a little more on the angular side, what is Angular in the Jamstack? Whereas I fondly call it Jamgular, but we'll see if that catches on. Angular comes in on that pre-rendering side when we're basically making those static assets. We can do this either using Scully, 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, 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. Pre-rendering, pre-rendering is a process to preload all elements on the page.

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 in Angular, but we're also able to deliver all of our assets or the assets that we pre-render statically. This is making content ready before a user even requests it, and it gives us those really fast load times. 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-prerender. And this basically gives you the functionality of the pre-render in Angular Universal but in more easy-to-use command line tool. 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 Scully at scullyio.com. This is the static site generator made for Angular. It's the only one and the best one, what 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 Scully, but we'll see a lot more of this as we code 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 setup whatsoever, especially compared to traditional servers. It also has these great aspects compared to standard CDNs, like having that git-integrated CI/CD, automatic deploys, rollbacks, instant cache 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 Netlify Edge. Speaking of the git-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 functionalities like cloning, forking, pull requests, merge checks and more. This basically creates an easily distributed, checked, and quick interaction development process. We're using git to organize and check code from many devs. How even do we do this? Well, there's a video right after this. So, check it out now and let's get coding.

Explorers

your progress

17