August 1, 2024 • 37 mins
In this episode of Adventures in Angular the panel interviews Tara Manicsic. Tara is an Angular Developer Experience Engineer at Netlify. Tara explains what she does at Netlify. She explains what Netlify is and introduces the topic for today’s episode, JAMstack. She explains what services Netlify offers and the packages they offer.
She explains that the JAM in JAMstack stands for JavaScript API Markup, which outlines the best practices of a JAMstack architecture. During her explanation of JAMstack and the benefits of a microservice architecture, she references Smashing Magazine and their switch to JAMstack.
Tara overviews each letter of JAM and how they affect JAMstack. J or Javascript refers to the use of a JavaScript language, like Angular and others. Tara lists the API’s one might use for the A in JAM. The panel discusses the M or Markup. Markup serves up fast and safe prerendered content. Tara explains what prerender means and it makes the content safer and the sites faster. Tara then overviews the entire JAMstack process and explains atomic deployment.
The panel considers how JAMstack is picking up in the Angular ecosystem. Tara outlines a few of the benefits seen when using JAMstack and the panel considers the possible use cases. She shares a few real-life examples of the success seen when JAMstack is used in an enterprise application.
Links
Picks
Become a supporter of this podcast: https://www.spreaker.com/podcast/adventures-in-angular--6102018/support.
She explains that the JAM in JAMstack stands for JavaScript API Markup, which outlines the best practices of a JAMstack architecture. During her explanation of JAMstack and the benefits of a microservice architecture, she references Smashing Magazine and their switch to JAMstack.
Tara overviews each letter of JAM and how they affect JAMstack. J or Javascript refers to the use of a JavaScript language, like Angular and others. Tara lists the API’s one might use for the A in JAM. The panel discusses the M or Markup. Markup serves up fast and safe prerendered content. Tara explains what prerender means and it makes the content safer and the sites faster. Tara then overviews the entire JAMstack process and explains atomic deployment.
The panel considers how JAMstack is picking up in the Angular ecosystem. Tara outlines a few of the benefits seen when using JAMstack and the panel considers the possible use cases. She shares a few real-life examples of the success seen when JAMstack is used in an enterprise application.
Links
- https://www.netlify.com/
- https://www.facebook.com/adventuresinangular
- https://twitter.com/angularpodcast
Picks
- Brian - Living with Yourself
- Shai - Angular Testing Tip — The Easiest Way To Start Your Test
- Shai - Joker
- Tara - Fleabag
- Tara - Netlify Tutorial - How to build and deploy websites using Netlify
- Tara - https://www.ng-conf.org/2019/sessions/workshop-jamstack-from-i-dont-know-to-pro/
Become a supporter of this podcast: https://www.spreaker.com/podcast/adventures-in-angular--6102018/support.
Mark as Played
Transcript
Episode Transcript
Available transcripts are automatically generated. Complete accuracy is not guaranteed.
Speaker 1 (00:07):
Hello, everybody.
Speaker 2 (00:08):
This is shy Resnick from testangular dot com hosting today's
episode of Adventures in Angelar, covering up for prost deals
on a flight.
Speaker 1 (00:16):
This very moment.
Speaker 2 (00:17):
By the way, they didn't hear it, but this was
a dog coffee. Today on our panel we have Brian Love.
Speaker 3 (00:23):
Hello, how's it going?
Speaker 1 (00:24):
Good? God? Good? Where are you?
Speaker 3 (00:26):
We are in Cordoba, Spain, so that's about two hours
south of Madrid.
Speaker 1 (00:30):
Do you have a mustage yet?
Speaker 3 (00:32):
No, not yet, but I should.
Speaker 1 (00:35):
Yeah, you should. You're in Cordova, Spain.
Speaker 3 (00:37):
Nice mustache and throws up at the end, exactly.
Speaker 1 (00:40):
Like thinking about doing stuff but not doing it. Okay, cool.
Speaker 2 (00:45):
And today we have as a guest we have Tara
Menixick nice on the first time.
Speaker 4 (00:52):
Yeah, first time.
Speaker 1 (00:54):
First time.
Speaker 2 (00:55):
So probably everybody already know you, but for those of
you might not know you, give us an intro about
you and what we're going to talk about today.
Speaker 4 (01:04):
So my name, Alesha, I said, is Taram nik sic.
I am Angular Developer Experience engineer at Netlifhi. We're working
on the DX team, which is basically we do this
thing where we really care about how the experiences for
users using our product. So We basically spend the majority
of our time just trying to build up content, get
(01:24):
answers for you in the community, and help you with
using Netlify, and then three months out of the year
we actually integrate into the product team and help build
the product. So just a really total dream job. Happy
to be there. Just started there a few months ago.
And one of the biggest things that we talk about
at Netlify is the jam stack. So this is basically
(01:46):
we can go into the whole definition in detail, but
we're going to be talking about that today and also
just where Angler plays a role inside of the.
Speaker 1 (01:54):
Jam stack awesome. So just to tet things straight, so
Netlifi for those so don't know what is Netlify, and
then what is the gem stick and how they connect together,
and then let's talk about that Angler connects to all
of that.
Speaker 4 (02:10):
So one of my favorite taglines and I use it
all the time, no matter how cheesy it sounds, but
it's a platform and it basically lets you go from
local development to global deployment. I think that's such a
good I think it's good.
Speaker 5 (02:23):
It's good they should put that on the front the frontage.
Speaker 1 (02:28):
I'm sorry, I didn't know.
Speaker 4 (02:31):
You're brilliant, Brian. I mean you just you know, great minds.
Speaker 1 (02:34):
Margin of the DX of Netliphi.
Speaker 4 (02:38):
There you go.
Speaker 1 (02:40):
Okay, So, so going from local development to global deployment.
Global deployment sounds like something from an evil plan to
take over the world.
Speaker 4 (02:50):
Exactly, That's exactly what it is. We just do it
CD and nod my CD. And so also like basically
we have netlified build and that's what people are pretty
used to because it's different ways to basically take your
site and get it deployed and hosted by netlifi. And
like it started with this thing called bit Balloon where
(03:12):
you would drag and drop a file and it would
you wouldn't have to worry about anything else. And now
we have it where you can sign into GitHub and
you say, for an Angular project, you're like, this is
my repo, here's the ng build prod is my build command,
and you're gonna find my project in like disted project name,
and that's all the information you give. And then every
(03:33):
time you want to deploy, it runs your build command
and hosts everything that you have.
Speaker 1 (03:37):
It's like gid up pages with some kind of I
don't know, Jenkins like builder or something like that combined together.
Speaker 4 (03:45):
Yeah, and like so because I know, like we get
hub pages, Like there's even just like a process that
you could like they know, there's a plug in for
Angulia that you can make that into a static site
or not a sex you can just make it a
get hub pages is just by engineer folded from what
is it from disk to posts.
Speaker 1 (04:04):
Or I think people are using Travis most of the
time just to it like automated.
Speaker 3 (04:11):
Yes, exactly. You can use Jackle two right, which is
a static site generator with GitHub pages and it'll actually
run the builds for you and then kind of deploy
it as well.
Speaker 4 (04:19):
I think.
Speaker 3 (04:20):
So this is similar, is what you're saying.
Speaker 4 (04:21):
And you can use Jackal with Netlify so things like that.
But then like on top of that they do the
cic D, so they continues integration and deployment with every
push you make to get, which is part of like
this get workflow, and then you get things like you know,
h GPS and you get what's encrypt and but then
(04:41):
that's like one part of it. And then there's like
you can do a local build environment and that's netlified dev.
And then there's Netlify Edge, which I think is the
coolest part. But it's basically like our superpower CDM.
Speaker 1 (04:56):
Basically, do you have a free plan.
Speaker 4 (04:59):
Yeah, there's pretty big free tier. Pricing is always my
downfall for some reason. I've never been good at money.
Speaker 1 (05:09):
Like someone person here, but you know, like I.
Speaker 4 (05:14):
Never can, like for some reason, money is one of
those things that just doesn't have a sticking power with me.
And so like somebody's like, oh so that'll be you know,
thirty five or like three hundred and fifty thousand dollars
in this amount of time, and I'm like, uh huh
it just I.
Speaker 1 (05:31):
Mean, yeah, yeah, yeah, yeah, it's type of people. I'm
the same. I'm like not motivated by money. Let me
tell you a story next time about how I went
to Vegas with a bunch of friends steakhouse. But that's
for another time.
Speaker 2 (05:49):
Okay, So getting back to the point, So you have
a pretty big free tier, so people basically just use
it as.
Speaker 1 (05:55):
Gita pages and like with like more options or you know.
Speaker 4 (05:59):
The so the CD that Metlifi Edge basically gives you
like so like it's like global distribution and it's on
multiple cloud providers, so it's like very persistent, very reliable
how you're hosting it, which again something that we can
dig in a little deeper is doing static content on there.
So it's like less opportunity to exploit that information and
(06:24):
you don't have to worry about the CDM caching or
we do atomic deploys, and it's basically kind of taking
all of that infrastructure stress away from you. So that's
the part that I really like because I don't like
that stress. I love infrastructure, but I don't like the
stress of it.
Speaker 1 (06:43):
Yeah.
Speaker 3 (06:45):
Yeah, So how does this compare to something like serverless?
Is it the same we're talking about the same thing
or is this something different?
Speaker 4 (06:52):
So it's actually not servers the CDN it's like so
because servers are basically like CDM nodes are basically servers
without the logic, without that complicated back end and everything.
So when you say serverless, you're not talking about no servers.
You're saying, well, I like to say serverless, worry less.
So this is some dumb dumb came up with this
(07:16):
word serverless that put in the you know, made it
kind of seem like, oh, so we're not using servers,
when it's actually like, oh no, this is my marketing
scheme to make you talk about serverless because it doesn't
make any sense. We're still using servers, just you don't
have to worry about like the complications and the pricing
and the scaling and everything.
Speaker 1 (07:37):
Gotcha, it's snake oil, snake oil.
Speaker 4 (07:41):
I've never seen snake oil in person. I've only seen
like liquor with with snakes in it.
Speaker 6 (07:47):
That's for another time, a story about its one time
in Vegas.
Speaker 1 (07:56):
Okay, serverless. By the way, I have a theory about.
Speaker 2 (07:59):
Observable that they are not really observables because they hide
the producer and you actually observe the producer and not
the observable self.
Speaker 1 (08:07):
But anyway, that's.
Speaker 4 (08:09):
Man, you need a whole show on this. Just call
it snake oil JavaScript snake oil.
Speaker 1 (08:15):
Exactly. So it's kind of serverless, but it's weed servers. Okay.
It's like you don't have to worry about the maintenance
and all that stuff.
Speaker 4 (08:24):
And the biggest, the biggest thing to remember or like
to think about with CDN nodes is it's going faster
because you're serving upstetic information and there's like no logic
getting in a way to complicate it a little bit,
there is there are small pieces of logic like redirect
so that if it, you know, goes out to a
node and that for some reason, like that infrastructure provider
(08:45):
is down in that area, for some reason, it knows
to redirect it to another node. But again he tries
to figure out it's globally distributed, so who's ever requesting it?
We're going as close as we can. This is like
beginning of web development. Like thoughts, right, it's like a
file that goes somewhere, that goes to a person. Right,
So it's just like how we used to do it
(09:07):
forever ago, and then we got super convoluted and complicated
and like yeah, muscle.
Speaker 1 (09:13):
Masks, men got higher and stuff like that. But okay,
so what is gemstick, Like how does it relates to that?
Speaker 4 (09:21):
So the jam stack, the acronym for that is JavaScript
API's markup. So all these things, you know, you've never
heard of these things. You're like, what is JavaScript?
Speaker 1 (09:34):
Is it kind of an Angular module or something like that?
Speaker 4 (09:37):
Is this something that they speak? Yes, so this is
something that we're all, you know, really familiar with. These
are things that we've all been using forever, but this
is a new way to kind of orchestrate those pieces together.
The biggest thing is like you're you're trying to deliver
things faster, safer, and make a better workflow for you
(10:00):
your developers, which you know also sounds like snake oil
because it sounds like a commercier.
Speaker 1 (10:05):
Let's talk about the real problem, Like I'm as a developer, Okay,
what is the user story here? Like what is my
problem that I would need jemstech for.
Speaker 4 (10:16):
There's a really great case study with Smashing magazine. They
had started with WordPress to just do their general site,
which so many people have. Right, It's a huge part
of the Internet, especially if you look in nonprofits.
Speaker 1 (10:31):
This is just like.
Speaker 4 (10:31):
Anecdotal side note, I did basically this nonprofit like Volunteer
your Time thing in Ohio, and every single nonprofit was
on a WordPress site that everybody broke. No one was secure,
like all the plug.
Speaker 3 (10:49):
Ins were amounts of plug ins just yeah, nobody was
maintaining nobody knew.
Speaker 1 (10:55):
Sell posted or like the WordPress dot.
Speaker 4 (10:58):
Com thing WordPress dot com. But mostly most of them
were like really because.
Speaker 1 (11:02):
So I thought workers dot com like update the plugins
for you and keep it safe and all that stuff.
Speaker 4 (11:08):
Now, security is one of the biggest things for plugins,
because it's you're injecting that code into your main site.
Like plugins just can have access to your site once,
like sometimes can have access to your site once you
have them. I'm not a word press po I would not.
I did like a PHP class once in college. It
was the best days of my life. I'm just scared.
(11:29):
But so Smashing mag like started with the WordPress site,
and then still they realized they needed, you know, a
piece to do e commerce, so then they added a
whole different site. And then they needed to do a
job board, and so they added a whole different thing.
So this became this monolithic application with all these different
(11:49):
moving parts, and they're like, okay, obviously we need to
change this up and just make it more fluid, Like
they had different templates that would so everything. It's hard
to make it mash up and not have too many
things breaking when they try to fix one thing. That's
one of the biggest things about the jam stack is
(12:10):
you're trying to uncouple your front end from your back end.
This is, you know, kind of where things like microservice
architecture comes into place, and that's a big component of
the jam stack. It's like some of the main things,
is like not relying on web servers, so like not
having to deal with that when you push and serve
your site, but going into a microservice architecture so that
(12:34):
you can fix things without breaking everything, you can maintain it,
you can update it much easier without the cuffs on,
and then establishing a get workflow so that with Smashing
mag there were so the team's trying to work together,
and there was like a barrier of entry because if
you didn't know this certain technology, or if you didn't
know WordPress, like the whole point of word press is
(12:56):
to help people who aren't as technologically advanced person say,
to be able to add content to the site, and
that just wasn't existing in their current workflow. I'll pause
here to breathe and see if you have any questions.
Speaker 3 (13:10):
Did they then choose to go with jam stack.
Speaker 4 (13:13):
Oh no, I'm just kidding.
Speaker 5 (13:15):
Okay, Yeah, it was that core. It was solved everything
asp just visual basic sex.
Speaker 4 (13:33):
Yeah. So they moved to jamsack and so basically they
were able to one of the biggest things was taking
their huge amount of blog posts and pre rendering them
to be able to serve up that static content so
that it was a faster delivery, and I'm pretty sure
I have the Yeah, Smashing mag went six times faster,
(13:55):
so that their first load went from eight hundred milliseconds
to eighty milliseconds.
Speaker 2 (13:59):
Oh wow.
Speaker 4 (14:00):
And this was the process of basically doing the pre rendering,
hooking up different things, like they had specific like APIs
that they would call to you for their dynamic parts of
their application, which kind of brings me back to I
should probably explain a little more about what jam stack is. Yes,
(14:23):
we jumped right in, but but that kind of gave
you a little overview of like the benefits of jam stack.
We can we can say that, so.
Speaker 1 (14:34):
I have like a picture in my mind of like, okay,
they're going from work press to this serviles or micro
services kind of architecture where they you said they're pre
render their pages. So it's kind of still kind of
vague to me, Like if you can go and shed
(14:58):
more light on that, and.
Speaker 4 (14:59):
Yeah, this isn't the lampstack, I can't give you too
much like anyway.
Speaker 7 (15:08):
Is my.
Speaker 4 (15:10):
Okay, so let me give you an overview of what
the acronym piece is going for and then I'll tell
you kind of the what it looks like from top
to bottom of like doing a procedure of the jam
stack or like doing development jamsack development. So JavaScript, this
is basically covering your dynamic parts of your app during
(15:30):
the request response cycles, so it's running entirely on the
client side, and so like this is where you would
be using any JavaScript framework like Anguler, and then to
add the dynamic parts, this is where the a APIs
come in. But it's basically like using any API services,
third party libraries, and any custom like serveralist functions, Lambda functions,
(15:55):
netliky functions, and this is like you would add if
you wanted to do you payment, you would do stripes
API or e comments. You could use shopifys API. Algolia
is a static search for your site.
Speaker 7 (16:10):
Very good.
Speaker 4 (16:10):
Yeah, they just got huge funding.
Speaker 2 (16:12):
I saw that.
Speaker 4 (16:13):
Yeah, it's like what again an amount of money that
I don't understand. And then there's M for markup and
this is again like your pre rendered markup. So this
is what really makes delivering everything super fast and again
safe because you can't really inject in things that are
pre rendered and you're just serving them up.
Speaker 3 (16:31):
Can you explain a little bit maybe for the listeners,
like what are you like pre rendering the content. So
am I taking like markdown files and building some sort
of like through like a build pipeline like web pack
or something or what does that kind of look like?
Speaker 4 (16:44):
Yes, all other things. So there are like multiple ways
to like, there are a bunch of static site generators
and actually, like when when you do just like engine
new and create a new application, it's compiling on a
client site to make your HTML files that are so
up a bunch of JavaScript files and those are like
your polyfills and just like different parts to make it
(17:07):
all compiled down to try and deliver it faster. But
even going further from that, you can make your site
really SEO friendly and faster by pre rendering into HTML
pages that are easier to crawl. And Angular Universal can
do this with just a pre render command on like
your sit like NG build colon pre render I'm pretty sure,
(17:30):
And so this will give you a bunch of HTML
files and then that's like the pre rendered static content
that you see. So again that's like to the basics
of HTML files that can be like and search engines
can look at them and like they're more human readable
in repos as well, which is pretty nice. But I
have wanted real quick disclaimer. Jam stick The name was
(17:54):
created basically so we had like a header to talk
about a way to like not rely and not have
to deal with web servers and distribute from CDNs and
static content and things, you know, to try and make
better performance from your web applications because there are so
many different things talking about, like static websites are not
(18:15):
really static anymore, you know, how do we talk about that?
So because of that, like all these other tech words,
you don't have to use all of these technologies. You
don't have to use JavaScript, APIs and markup. So again,
it's one of those names where it's like this is
like best practices of what the jam stack is, but
you don't have to use all of those things. But
boy does it sound cool.
Speaker 5 (18:38):
That's cool?
Speaker 1 (18:38):
So okay, So JavaScript is the logic, of course. I
probably it sits in some kind of I don't know,
like lambda function or something like that on the server's side,
not on the I think on the maybe you develop
them in a local like in the git in your
git repository files and it gets uploaded to the service. Right, Yeah,
(19:03):
API is all the third parties you said.
Speaker 4 (19:09):
It can be if it helps. So this is like
kind of this like one sentence thing that I do
for like how the process works. It's like deliver your
content using globally distributed using CDNs globally distributed CDNs nodes
and CMSs for holding your content and delivering it easier.
And then you use API, serveralist functions and web hooks
(19:31):
to make your site dynamic. Then establish it get workflow
for a continuous, immutable and atomic deployment process. Then it's
a lot of like super silly buzzwords.
Speaker 1 (19:41):
But buzzword friendly.
Speaker 4 (19:46):
But it's like I mean it's hard to attack, Like yeah,
like those words are could in place like atomic, Like
how would I explain atomic to place in like two
words or less?
Speaker 1 (19:56):
Atomic is when something can go wrong in the process,
but you have some files copied to the server and
some files aren't because something went wrong, and then you
need to figure out what should be replaced and all
that stuff, where like with ab deployments or doctor and
stuff like that, you can just point to the new
server and then you don't have to deal with like
(20:17):
you know this kind of stuff. That's what I know about.
Speaker 4 (20:20):
Like yeah, so atomic deployments are are the remedy for that.
So timic deployments are all or nothing, so they wipe
everything out and put everything in new and won't serve
until every file is up, so there is no incongruency
between what you have up or not, which has been
a problem for deployment processes for a while before years. Yeah, yeah,
(20:41):
so that helps that it's just like blow it all up. Okay,
here's a.
Speaker 3 (20:45):
New one and everything's fresh.
Speaker 4 (20:48):
And that's the same with like invalidating cash, which is
another process that is the best practice of jam stack
is basically like once you have the information your cash
gets completely wiped out, then you should rely on yoursel
and to do that so you don't have to worry
about it.
Speaker 1 (21:02):
So what is the markup part of junderstand?
Speaker 4 (21:06):
So this is the template pre rendered stuff. So this
is like your content that is like made by that
JavaScript part, by whatever job script framework you Yeah, so
this is like what we'd be doing with like when
you end build, whatever you have is compiled the ready
on client side, that would technically be like your markup
(21:27):
m I think.
Speaker 1 (21:28):
So to take it to Angular terms what you said before,
you can use Angular Universal, which basically gets you the
pre rendered content for SEO and stuff and also like
pre viewing images or stuff like that to Twitter and
stuff like that. And sorry, I was.
Speaker 4 (21:47):
Gonna say, I just wanted to interrupt you to see
how you would react.
Speaker 1 (21:52):
I'm exkiddy. How did they How did they do?
Speaker 4 (21:56):
You were great? You were so calm and it's like
very cordial. Was great, It's like a perfect host. Thank you.
Speaker 1 (22:05):
Okay.
Speaker 4 (22:07):
There's actually Christoph Gutenan guten Din I always hope I
get his name right. But he made a library Angular
pre render to try and make this a little easier
for taking out like basically you're carrying out your service
side rendering and then merging that output into static content.
So because a lot of people were asking for a better,
(22:30):
easier way to do pre rendering with the Angular But
on top of that, there's actually an open pool request
for Angular Universal for pre rendering scripts and schematics. So
this is like, I mean, Uri did a talk about
this in like twenty sixteen. Well obviously he's ahead of
times as always Jesus or shick head okay, sorry, ahead
(22:55):
of times Uri future.
Speaker 6 (22:56):
Uri Okay, but yeah, so he was talking about this,
I think it was n GB and he did a
talk about like the benefits of doing static Angular sites,
and so people have been wanting this for a while
and it's starting to catching even more with talk of
the jam stacks.
Speaker 4 (23:14):
So the Angle universal is trying to like keep up
with that, and hopefully the Angular Cli will start to
do more things as well.
Speaker 3 (23:21):
That'll be cool because I mean, so in the React
space that you know, Gatsby I think is the one
that is the probably the most popular kind of pre
rendering jam stack client suite if you will, is that right.
Speaker 4 (23:34):
Yeah, And they also got a bunch of funding recently.
Speaker 1 (23:39):
Yeah.
Speaker 4 (23:41):
Yeah, So Gatsby is huge in the React space, and
so we do a lot with like Netlify and React
and gas By. And it's funny. I think that this
is like the time that the jam stack is catching
on more in the Angular scene because everything is, everything's
getting quite inflated and huge and hard to serve up.
(24:03):
And like you see, like with Ivy, we're trying to
make steps towards making Angular more light weight because we
want to deliver things faster. Like you know, you're you're
losing users every time your site takes more than like
what what is it now, like.
Speaker 3 (24:18):
Three points like three seconds yeah, something like that.
Speaker 4 (24:22):
But you don't have the point point what three, I don't.
Speaker 3 (24:24):
Know what it is.
Speaker 4 (24:25):
I don't know what it is.
Speaker 1 (24:26):
I'm sorry, you got me and it's gone.
Speaker 3 (24:30):
Right after the point. As soon as you get to
zero anything, anything, one, then that's it. I'm out.
Speaker 4 (24:37):
But I'm really excited. I know that. Of course it
sounds so pitchy, but like, I really liked this stuff
before they started giving me a paycheck. So because it's
basically like my favorite thing, and I know we didn't
talk about it too much, but is the get workflow
process because obviously we want better perform ormans and like
(25:00):
doing you know, serving upstatic content using things like CMS
is to deliver content without having, you know, to have
it on your stuff. They're all really great things to
make your site perform better, and we want that. Most
of my time is being is developing the thing, so
I want there to be a really awesome process and
(25:21):
I work with it all the time, mostly because I
like mess things up constantly and have to like revert.
The whole process in general makes it so that you
have more freedom to push changes. Because you have immutable deployees,
you have a place where you can roll back. So
if you push something out and you're like that broke everything,
(25:42):
you just roll back. So it's not as scary because
I've definitely like pushed things that broke everything.
Speaker 1 (25:49):
So even with like databases and stuff like sometimes you
run migrations and you have like data and stuff like that,
even for those cases, it's like you can roll back
and everything's good.
Speaker 4 (26:03):
So databases in particular are like aren't handled by that
jam stack, which sounds like, oh, it's not our it's
not on us, which it kind of is like not
on us, which makes it nice. So you're like database
procedurals can be handled by a third party, so that
you're delegating that of like are you backing everything up?
Are you making it very performant? Like performance? I got
(26:26):
to stop using that word, since it's not a word.
Speaker 1 (26:28):
This is a safe place keep going.
Speaker 4 (26:33):
I immediately get like five at tz Mannex, like how
dare you? But basically it's another area where there's you know,
so much that can be done to make that work
really well for you that you don't have to worry about.
It's another thing that you're offloading from your developers onto
a team who can specialize in it.
Speaker 1 (26:54):
I say, so, it's another like a third party service
that you can use for.
Speaker 3 (26:58):
That API is to get at that data. Right, So
that's basically what if I hear you correctly, It's like,
as a front end development team, you know, we're focused
on this, and we have APIs that are driven either
by micro services or cloud functions or lamb to functions
or whatever it is. That's all happening. All I need
to know is how to use that API, consume the
data and or modify the data as necessary, and then
(27:20):
that's just taken care of for me by whatever it is.
Speaker 4 (27:24):
Yeah, and it's really cool. Like again, like with Smashing Magazine,
when they wanted to do comments, they basically made a
web hook that was like a comment would come in
and it would pack to a function that they had
that said, okay, take this comment and add it to
our GitHub repo markdown things, and then that would trigger
(27:49):
a rebuild of this site and that would come up
as their new content. So again it's like you still
kind of static rendering this information, but you have these
webooks in place that take care of that. And again
that's part of the get workflow so that you basically
don't have to you know, do a whole build process.
The build is triggered, that stuff's going on there, and
(28:09):
it's automated. You don't have to worry about it.
Speaker 1 (28:11):
So it sounds like a cool side project could be
like taking a personal blog and trying to run it
with that and see how it goes. To check it
out and to see the deployment and the atomic atomic
deployments and the key to workflow and all that stuff,
to check it out further more cool. So we're reaching
the end of our episode. Do you have any more question? Right?
Speaker 3 (28:35):
Yeah, I'm just curious for our listeners who maybe they
work in a large enterprise and they're hearing this, going
this is cool. But is this for me? Or is
this just for a blog like I mentioned, there's some
sort of side project, or what about a you know,
Fortune one hundred company?
Speaker 1 (28:49):
How do they?
Speaker 3 (28:50):
I know you mentioned like Smashing magazine, but like, how
do if I've got an enterprise application it's a line
of business application, how does the gem start kind of
come into play for me in that scenario?
Speaker 1 (29:01):
Yeah, and if you're not comfortable with money, so don't
think about it, that's Fortune one hundred.
Speaker 5 (29:06):
Yeah, I'm just a big a quote big I'm doing.
Speaker 7 (29:09):
Air Quot's a big company, big.
Speaker 5 (29:12):
Big company, you've never heard of whatever.
Speaker 4 (29:15):
Yeah, you all can't see this, but Brian just picked
up satchels of money that he's throwing over his shoulders.
Speaker 5 (29:20):
Yeah, solid bricks.
Speaker 1 (29:25):
So this is.
Speaker 4 (29:26):
Actually like really great for enterprise applications because a lot
of enterprise have gone monolithic and it has made the
development process and delivering new content and especially upgrading to
new technology is extremely difficult because it's all tied in together.
Nobody knows where all the variables have been spread across
all the different parts of there. So everybody you know
wants to go to a microservice architecture. Well I'm so biased,
(29:49):
and not everybody may want to go to the microservice architecture,
but it really helps your you know, the the health
and maintenance of your applications, and this is a great
way to tackle that because it is everything you know,
has a place for every part of your monolithic application,
and it really helps like enterprise wise, as like training
your team. So we have a get CMS and netlifi
(30:12):
which is basically if you're not as comfortable using GET,
you use the CMS UI and when you make changes,
it triggers. It's all part of like webhooks to get hub.
So like you make a post and it creates an
issue with all the information in there, and then you
hit like in review and it makes a PR and
then you hit published and it publishes it to the site.
(30:34):
It merges that information and it builds your site. So
if you're a developer, you could be working and get
if you're not a developer, which like a lot of
companies have to have both parts of that team right
so they can all still work together on the same
code base. As example, PayPal had a monolithic site and
they moved over to the JAM stack four times their
site speed increased. Citrix had massive documentation that they moved
(30:58):
over to jams and they had sixty five percent less expenses.
Their average server connection time increased by sixty five percent,
Like sixty five percent. It's like that's a huge street number.
Speaker 3 (31:11):
And I have to imagine also like for enterprise users,
like the scalability of this has got to be something
that's just push button I won't say push button, but
much easier than what they're used to right.
Speaker 4 (31:21):
Yeah, there are no buttons to push since the servers
are being handled by like the CDNs, you're globally distributed,
so there are no butstions to push. You're just automatically scaled,
you know, around the globe, and you're delivering on edge
nodes in the CDN to be closest to the person
that's asking for that information. So yeah, scaling is just
I mean a complete breeze.
Speaker 1 (31:40):
That's awesome. Now what does it mean to.
Speaker 4 (31:42):
Be a breeze? That's weird? Is it just because breezes come.
Speaker 1 (31:45):
It's gout of nowhere? It's like performance, Yeah, why, what's
what's it?
Speaker 4 (31:51):
I don't know.
Speaker 7 (31:52):
Google, Google will help us.
Speaker 8 (31:55):
Okay, Google, what is exactly?
Speaker 3 (31:58):
Sometimes I say that the steer and it's like I've
got three web results for you that.
Speaker 2 (32:06):
For you exactly?
Speaker 1 (32:08):
That is so good. Thanks so much. We're gonna go
and do some picks now. But just to summarize what
we talked about.
Speaker 2 (32:16):
Basically, for Angular developers, you have if you want to
render your site for se O, you can use Angular
Universal and you might want to check this architecture out.
Speaker 1 (32:30):
Gemstack to see if you can go serverless with functions
like the serverless functions and all the bug words. It
sounds super cool and as I said, like for a
side project. I will probably test my new blog that
I want to create with that and see how it goes.
Speaker 4 (32:49):
And then your enterprise when you create the Shy.
Speaker 1 (32:53):
Enterprise enterprises in then I will right for that. But
but if you have an enterprise, it out as well.
So let's start with the picks, Brian, do you have
any picks?
Speaker 6 (33:04):
I do?
Speaker 1 (33:05):
I just one this week.
Speaker 3 (33:06):
So I just finished Living with Yourself by Paul Rod
on Netflix and it's pretty good.
Speaker 4 (33:13):
Pretty sucked.
Speaker 3 (33:15):
I thought it was good, okay, so I mean, don't
judge me.
Speaker 4 (33:18):
Okay, I'm very excited that you say that because I
was full of doubt and I love Paul Red, so
I am extremely I do too.
Speaker 5 (33:24):
It was good.
Speaker 3 (33:25):
I think we finished it in like less than a week,
so I mean it was good. So I would definitely
go check it out. It's basically well, I don't want
to give it away.
Speaker 4 (33:32):
Just check it.
Speaker 1 (33:33):
Don't give it away.
Speaker 7 (33:34):
No spoilers, no spoilers. Okay, I'll go next, So I
have two picks. First is a blog post that I
wrote last week, I think, and it's angular testing tape,
the easiest way to start your test. I would put
a link to it. In the show note, so cool
trick for those of you who kind of get stuck
when they try to test their angular code.
Speaker 1 (33:56):
Check it out. It's very short and helpful. And then
next pick is the movie Joker, which I want to see,
and it's freaking amazing, So going.
Speaker 4 (34:08):
Does it mess up their head though? Like, are you
still thinking about it? Now? That's what I'm nervous about.
Speaker 1 (34:12):
So I'm not still thinking. I can feel the movie.
I can feel the vibe still. It's very like in
a good.
Speaker 5 (34:19):
Way, in a good way, Okay, I was wondering, in
a good way.
Speaker 1 (34:23):
I can feel it.
Speaker 8 (34:24):
Like it's such a beautiful cinema photography and music, and
like the story and the acting and everything about it
is and the plot and very good movie in my
my taste.
Speaker 1 (34:38):
So yeah, definitely check it out. Don't expect like the
normal comics.
Speaker 4 (34:44):
My coworker is like, this is a character development movie.
Don't expect an action movie.
Speaker 1 (34:49):
Yeah, it's not like Batman Beginns and stuff like that.
It's more dramatic and stuff like that. But I really
loved it. This is the second big Terra What are
your Pigs?
Speaker 4 (35:00):
Because Brian talked about that, I wanted to make sure
that everybody and their mothers have watched Fleabag, because it
is one of the best shows I've seen on TV
in a really long time, and it's like the second
season just got way better than the first season. So
I highly recommend Fleabag if only I remembered what streaming
service it was on, but we don't need to. You're
(35:21):
not sponsored by any streaming services, so I don't want
to do this.
Speaker 3 (35:26):
Yes, it's so good.
Speaker 4 (35:31):
I highly recommend it. I love that show. And then
my second is it is like two things. So actually
it's like two A and B because one is my
coworker just did a free code camp video switch. It's
like a like three and a half hour long netfi tutorial,
which sounds intimidating, but it covers everything and it's so good.
(35:53):
Like that's like my Netlifi pick. And then my jam
Stack pick is I'm doing a workshop angular in the
jam Stack at Ergie comp just the best. Yeah, yeah,
and I'm very excited because you two will be there obviously, right, Oh.
Speaker 3 (36:09):
Yeah, definitely, Yeah, I'm doing a workshop too.
Speaker 1 (36:12):
Are you doing one?
Speaker 3 (36:12):
Is it a one day workshop or a two day workshop?
Speaker 1 (36:17):
She's hold on ERGI dash dot Org.
Speaker 4 (36:23):
It's a one day you know how punny I tend
to be. It's like Anglander Jamstack from I don't know
to pro nice. So yeah, it's very fun. And I mean,
like just in general, if you go like the usually
three day conferences are pretty intimidating, but Ergie Comp, I
feel like, are one of those ones that you don't
(36:44):
want to end. And that's why, you know, like Shy
extens his Energie comp experience with trips to Vegas.
Speaker 1 (36:52):
Yeah, which we'll talk about separate.
Speaker 4 (36:56):
Next week.
Speaker 1 (36:58):
Next week, my Angular story, it's very.
Speaker 4 (37:03):
Unfitting for adventures in Angular to have a story about
your Vegas.
Speaker 1 (37:07):
Venture, my Vegas adventures in a yeah, but that's for offline.
Speaker 4 (37:14):
Doing workshops helps you like have your whole week at
energy Comp. And it's like everybody hangs out after workshops too.
It's really fun. So highly recommend it. Anybody's not just mine.
Speaker 5 (37:26):
That's right there.
Speaker 1 (37:27):
You do, Okay, awesome, Thank you very much. Was also
an episode than thank you Brian as well, and we'll
see you all next episode. Bye bye bye
Hello, everybody.
Speaker 2 (00:08):
This is shy Resnick from testangular dot com hosting today's
episode of Adventures in Angelar, covering up for prost deals
on a flight.
Speaker 1 (00:16):
This very moment.
Speaker 2 (00:17):
By the way, they didn't hear it, but this was
a dog coffee. Today on our panel we have Brian Love.
Speaker 3 (00:23):
Hello, how's it going?
Speaker 1 (00:24):
Good? God? Good? Where are you?
Speaker 3 (00:26):
We are in Cordoba, Spain, so that's about two hours
south of Madrid.
Speaker 1 (00:30):
Do you have a mustage yet?
Speaker 3 (00:32):
No, not yet, but I should.
Speaker 1 (00:35):
Yeah, you should. You're in Cordova, Spain.
Speaker 3 (00:37):
Nice mustache and throws up at the end, exactly.
Speaker 1 (00:40):
Like thinking about doing stuff but not doing it. Okay, cool.
Speaker 2 (00:45):
And today we have as a guest we have Tara
Menixick nice on the first time.
Speaker 4 (00:52):
Yeah, first time.
Speaker 1 (00:54):
First time.
Speaker 2 (00:55):
So probably everybody already know you, but for those of
you might not know you, give us an intro about
you and what we're going to talk about today.
Speaker 4 (01:04):
So my name, Alesha, I said, is Taram nik sic.
I am Angular Developer Experience engineer at Netlifhi. We're working
on the DX team, which is basically we do this
thing where we really care about how the experiences for
users using our product. So We basically spend the majority
of our time just trying to build up content, get
(01:24):
answers for you in the community, and help you with
using Netlify, and then three months out of the year
we actually integrate into the product team and help build
the product. So just a really total dream job. Happy
to be there. Just started there a few months ago.
And one of the biggest things that we talk about
at Netlify is the jam stack. So this is basically
(01:46):
we can go into the whole definition in detail, but
we're going to be talking about that today and also
just where Angler plays a role inside of the.
Speaker 1 (01:54):
Jam stack awesome. So just to tet things straight, so
Netlifi for those so don't know what is Netlify, and
then what is the gem stick and how they connect together,
and then let's talk about that Angler connects to all
of that.
Speaker 4 (02:10):
So one of my favorite taglines and I use it
all the time, no matter how cheesy it sounds, but
it's a platform and it basically lets you go from
local development to global deployment. I think that's such a
good I think it's good.
Speaker 5 (02:23):
It's good they should put that on the front the frontage.
Speaker 1 (02:28):
I'm sorry, I didn't know.
Speaker 4 (02:31):
You're brilliant, Brian. I mean you just you know, great minds.
Speaker 1 (02:34):
Margin of the DX of Netliphi.
Speaker 4 (02:38):
There you go.
Speaker 1 (02:40):
Okay, So, so going from local development to global deployment.
Global deployment sounds like something from an evil plan to
take over the world.
Speaker 4 (02:50):
Exactly, That's exactly what it is. We just do it
CD and nod my CD. And so also like basically
we have netlified build and that's what people are pretty
used to because it's different ways to basically take your
site and get it deployed and hosted by netlifi. And
like it started with this thing called bit Balloon where
(03:12):
you would drag and drop a file and it would
you wouldn't have to worry about anything else. And now
we have it where you can sign into GitHub and
you say, for an Angular project, you're like, this is
my repo, here's the ng build prod is my build command,
and you're gonna find my project in like disted project name,
and that's all the information you give. And then every
(03:33):
time you want to deploy, it runs your build command
and hosts everything that you have.
Speaker 1 (03:37):
It's like gid up pages with some kind of I
don't know, Jenkins like builder or something like that combined together.
Speaker 4 (03:45):
Yeah, and like so because I know, like we get
hub pages, Like there's even just like a process that
you could like they know, there's a plug in for
Angulia that you can make that into a static site
or not a sex you can just make it a
get hub pages is just by engineer folded from what
is it from disk to posts.
Speaker 1 (04:04):
Or I think people are using Travis most of the
time just to it like automated.
Speaker 3 (04:11):
Yes, exactly. You can use Jackle two right, which is
a static site generator with GitHub pages and it'll actually
run the builds for you and then kind of deploy
it as well.
Speaker 4 (04:19):
I think.
Speaker 3 (04:20):
So this is similar, is what you're saying.
Speaker 4 (04:21):
And you can use Jackal with Netlify so things like that.
But then like on top of that they do the
cic D, so they continues integration and deployment with every
push you make to get, which is part of like
this get workflow, and then you get things like you know,
h GPS and you get what's encrypt and but then
(04:41):
that's like one part of it. And then there's like
you can do a local build environment and that's netlified dev.
And then there's Netlify Edge, which I think is the
coolest part. But it's basically like our superpower CDM.
Speaker 1 (04:56):
Basically, do you have a free plan.
Speaker 4 (04:59):
Yeah, there's pretty big free tier. Pricing is always my
downfall for some reason. I've never been good at money.
Speaker 1 (05:09):
Like someone person here, but you know, like I.
Speaker 4 (05:14):
Never can, like for some reason, money is one of
those things that just doesn't have a sticking power with me.
And so like somebody's like, oh so that'll be you know,
thirty five or like three hundred and fifty thousand dollars
in this amount of time, and I'm like, uh huh
it just I.
Speaker 1 (05:31):
Mean, yeah, yeah, yeah, yeah, it's type of people. I'm
the same. I'm like not motivated by money. Let me
tell you a story next time about how I went
to Vegas with a bunch of friends steakhouse. But that's
for another time.
Speaker 2 (05:49):
Okay, So getting back to the point, So you have
a pretty big free tier, so people basically just use
it as.
Speaker 1 (05:55):
Gita pages and like with like more options or you know.
Speaker 4 (05:59):
The so the CD that Metlifi Edge basically gives you
like so like it's like global distribution and it's on
multiple cloud providers, so it's like very persistent, very reliable
how you're hosting it, which again something that we can
dig in a little deeper is doing static content on there.
So it's like less opportunity to exploit that information and
(06:24):
you don't have to worry about the CDM caching or
we do atomic deploys, and it's basically kind of taking
all of that infrastructure stress away from you. So that's
the part that I really like because I don't like
that stress. I love infrastructure, but I don't like the
stress of it.
Speaker 1 (06:43):
Yeah.
Speaker 3 (06:45):
Yeah, So how does this compare to something like serverless?
Is it the same we're talking about the same thing
or is this something different?
Speaker 4 (06:52):
So it's actually not servers the CDN it's like so
because servers are basically like CDM nodes are basically servers
without the logic, without that complicated back end and everything.
So when you say serverless, you're not talking about no servers.
You're saying, well, I like to say serverless, worry less.
So this is some dumb dumb came up with this
(07:16):
word serverless that put in the you know, made it
kind of seem like, oh, so we're not using servers,
when it's actually like, oh no, this is my marketing
scheme to make you talk about serverless because it doesn't
make any sense. We're still using servers, just you don't
have to worry about like the complications and the pricing
and the scaling and everything.
Speaker 1 (07:37):
Gotcha, it's snake oil, snake oil.
Speaker 4 (07:41):
I've never seen snake oil in person. I've only seen
like liquor with with snakes in it.
Speaker 6 (07:47):
That's for another time, a story about its one time
in Vegas.
Speaker 1 (07:56):
Okay, serverless. By the way, I have a theory about.
Speaker 2 (07:59):
Observable that they are not really observables because they hide
the producer and you actually observe the producer and not
the observable self.
Speaker 1 (08:07):
But anyway, that's.
Speaker 4 (08:09):
Man, you need a whole show on this. Just call
it snake oil JavaScript snake oil.
Speaker 1 (08:15):
Exactly. So it's kind of serverless, but it's weed servers. Okay.
It's like you don't have to worry about the maintenance
and all that stuff.
Speaker 4 (08:24):
And the biggest, the biggest thing to remember or like
to think about with CDN nodes is it's going faster
because you're serving upstetic information and there's like no logic
getting in a way to complicate it a little bit,
there is there are small pieces of logic like redirect
so that if it, you know, goes out to a
node and that for some reason, like that infrastructure provider
(08:45):
is down in that area, for some reason, it knows
to redirect it to another node. But again he tries
to figure out it's globally distributed, so who's ever requesting it?
We're going as close as we can. This is like
beginning of web development. Like thoughts, right, it's like a
file that goes somewhere, that goes to a person. Right,
So it's just like how we used to do it
(09:07):
forever ago, and then we got super convoluted and complicated
and like yeah, muscle.
Speaker 1 (09:13):
Masks, men got higher and stuff like that. But okay,
so what is gemstick, Like how does it relates to that?
Speaker 4 (09:21):
So the jam stack, the acronym for that is JavaScript
API's markup. So all these things, you know, you've never
heard of these things. You're like, what is JavaScript?
Speaker 1 (09:34):
Is it kind of an Angular module or something like that?
Speaker 4 (09:37):
Is this something that they speak? Yes, so this is
something that we're all, you know, really familiar with. These
are things that we've all been using forever, but this
is a new way to kind of orchestrate those pieces together.
The biggest thing is like you're you're trying to deliver
things faster, safer, and make a better workflow for you
(10:00):
your developers, which you know also sounds like snake oil
because it sounds like a commercier.
Speaker 1 (10:05):
Let's talk about the real problem, Like I'm as a developer, Okay,
what is the user story here? Like what is my
problem that I would need jemstech for.
Speaker 4 (10:16):
There's a really great case study with Smashing magazine. They
had started with WordPress to just do their general site,
which so many people have. Right, It's a huge part
of the Internet, especially if you look in nonprofits.
Speaker 1 (10:31):
This is just like.
Speaker 4 (10:31):
Anecdotal side note, I did basically this nonprofit like Volunteer
your Time thing in Ohio, and every single nonprofit was
on a WordPress site that everybody broke. No one was secure,
like all the plug.
Speaker 3 (10:49):
Ins were amounts of plug ins just yeah, nobody was
maintaining nobody knew.
Speaker 1 (10:55):
Sell posted or like the WordPress dot.
Speaker 4 (10:58):
Com thing WordPress dot com. But mostly most of them
were like really because.
Speaker 1 (11:02):
So I thought workers dot com like update the plugins
for you and keep it safe and all that stuff.
Speaker 4 (11:08):
Now, security is one of the biggest things for plugins,
because it's you're injecting that code into your main site.
Like plugins just can have access to your site once,
like sometimes can have access to your site once you
have them. I'm not a word press po I would not.
I did like a PHP class once in college. It
was the best days of my life. I'm just scared.
(11:29):
But so Smashing mag like started with the WordPress site,
and then still they realized they needed, you know, a
piece to do e commerce, so then they added a
whole different site. And then they needed to do a
job board, and so they added a whole different thing.
So this became this monolithic application with all these different
(11:49):
moving parts, and they're like, okay, obviously we need to
change this up and just make it more fluid, Like
they had different templates that would so everything. It's hard
to make it mash up and not have too many
things breaking when they try to fix one thing. That's
one of the biggest things about the jam stack is
(12:10):
you're trying to uncouple your front end from your back end.
This is, you know, kind of where things like microservice
architecture comes into place, and that's a big component of
the jam stack. It's like some of the main things,
is like not relying on web servers, so like not
having to deal with that when you push and serve
your site, but going into a microservice architecture so that
(12:34):
you can fix things without breaking everything, you can maintain it,
you can update it much easier without the cuffs on,
and then establishing a get workflow so that with Smashing
mag there were so the team's trying to work together,
and there was like a barrier of entry because if
you didn't know this certain technology, or if you didn't
know WordPress, like the whole point of word press is
(12:56):
to help people who aren't as technologically advanced person say,
to be able to add content to the site, and
that just wasn't existing in their current workflow. I'll pause
here to breathe and see if you have any questions.
Speaker 3 (13:10):
Did they then choose to go with jam stack.
Speaker 4 (13:13):
Oh no, I'm just kidding.
Speaker 5 (13:15):
Okay, Yeah, it was that core. It was solved everything
asp just visual basic sex.
Speaker 4 (13:33):
Yeah. So they moved to jamsack and so basically they
were able to one of the biggest things was taking
their huge amount of blog posts and pre rendering them
to be able to serve up that static content so
that it was a faster delivery, and I'm pretty sure
I have the Yeah, Smashing mag went six times faster,
(13:55):
so that their first load went from eight hundred milliseconds
to eighty milliseconds.
Speaker 2 (13:59):
Oh wow.
Speaker 4 (14:00):
And this was the process of basically doing the pre rendering,
hooking up different things, like they had specific like APIs
that they would call to you for their dynamic parts of
their application, which kind of brings me back to I
should probably explain a little more about what jam stack is. Yes,
(14:23):
we jumped right in, but but that kind of gave
you a little overview of like the benefits of jam stack.
We can we can say that, so.
Speaker 1 (14:34):
I have like a picture in my mind of like, okay,
they're going from work press to this serviles or micro
services kind of architecture where they you said they're pre
render their pages. So it's kind of still kind of
vague to me, Like if you can go and shed
(14:58):
more light on that, and.
Speaker 4 (14:59):
Yeah, this isn't the lampstack, I can't give you too
much like anyway.
Speaker 7 (15:08):
Is my.
Speaker 4 (15:10):
Okay, so let me give you an overview of what
the acronym piece is going for and then I'll tell
you kind of the what it looks like from top
to bottom of like doing a procedure of the jam
stack or like doing development jamsack development. So JavaScript, this
is basically covering your dynamic parts of your app during
(15:30):
the request response cycles, so it's running entirely on the
client side, and so like this is where you would
be using any JavaScript framework like Anguler, and then to
add the dynamic parts, this is where the a APIs
come in. But it's basically like using any API services,
third party libraries, and any custom like serveralist functions, Lambda functions,
(15:55):
netliky functions, and this is like you would add if
you wanted to do you payment, you would do stripes
API or e comments. You could use shopifys API. Algolia
is a static search for your site.
Speaker 7 (16:10):
Very good.
Speaker 4 (16:10):
Yeah, they just got huge funding.
Speaker 2 (16:12):
I saw that.
Speaker 4 (16:13):
Yeah, it's like what again an amount of money that
I don't understand. And then there's M for markup and
this is again like your pre rendered markup. So this
is what really makes delivering everything super fast and again
safe because you can't really inject in things that are
pre rendered and you're just serving them up.
Speaker 3 (16:31):
Can you explain a little bit maybe for the listeners,
like what are you like pre rendering the content. So
am I taking like markdown files and building some sort
of like through like a build pipeline like web pack
or something or what does that kind of look like?
Speaker 4 (16:44):
Yes, all other things. So there are like multiple ways
to like, there are a bunch of static site generators
and actually, like when when you do just like engine
new and create a new application, it's compiling on a
client site to make your HTML files that are so
up a bunch of JavaScript files and those are like
your polyfills and just like different parts to make it
(17:07):
all compiled down to try and deliver it faster. But
even going further from that, you can make your site
really SEO friendly and faster by pre rendering into HTML
pages that are easier to crawl. And Angular Universal can
do this with just a pre render command on like
your sit like NG build colon pre render I'm pretty sure,
(17:30):
And so this will give you a bunch of HTML
files and then that's like the pre rendered static content
that you see. So again that's like to the basics
of HTML files that can be like and search engines
can look at them and like they're more human readable
in repos as well, which is pretty nice. But I
have wanted real quick disclaimer. Jam stick The name was
(17:54):
created basically so we had like a header to talk
about a way to like not rely and not have
to deal with web servers and distribute from CDNs and
static content and things, you know, to try and make
better performance from your web applications because there are so
many different things talking about, like static websites are not
(18:15):
really static anymore, you know, how do we talk about that?
So because of that, like all these other tech words,
you don't have to use all of these technologies. You
don't have to use JavaScript, APIs and markup. So again,
it's one of those names where it's like this is
like best practices of what the jam stack is, but
you don't have to use all of those things. But
boy does it sound cool.
Speaker 5 (18:38):
That's cool?
Speaker 1 (18:38):
So okay, So JavaScript is the logic, of course. I
probably it sits in some kind of I don't know,
like lambda function or something like that on the server's side,
not on the I think on the maybe you develop
them in a local like in the git in your
git repository files and it gets uploaded to the service. Right, Yeah,
(19:03):
API is all the third parties you said.
Speaker 4 (19:09):
It can be if it helps. So this is like
kind of this like one sentence thing that I do
for like how the process works. It's like deliver your
content using globally distributed using CDNs globally distributed CDNs nodes
and CMSs for holding your content and delivering it easier.
And then you use API, serveralist functions and web hooks
(19:31):
to make your site dynamic. Then establish it get workflow
for a continuous, immutable and atomic deployment process. Then it's
a lot of like super silly buzzwords.
Speaker 1 (19:41):
But buzzword friendly.
Speaker 4 (19:46):
But it's like I mean it's hard to attack, Like yeah,
like those words are could in place like atomic, Like
how would I explain atomic to place in like two
words or less?
Speaker 1 (19:56):
Atomic is when something can go wrong in the process,
but you have some files copied to the server and
some files aren't because something went wrong, and then you
need to figure out what should be replaced and all
that stuff, where like with ab deployments or doctor and
stuff like that, you can just point to the new
server and then you don't have to deal with like
(20:17):
you know this kind of stuff. That's what I know about.
Speaker 4 (20:20):
Like yeah, so atomic deployments are are the remedy for that.
So timic deployments are all or nothing, so they wipe
everything out and put everything in new and won't serve
until every file is up, so there is no incongruency
between what you have up or not, which has been
a problem for deployment processes for a while before years. Yeah, yeah,
(20:41):
so that helps that it's just like blow it all up. Okay,
here's a.
Speaker 3 (20:45):
New one and everything's fresh.
Speaker 4 (20:48):
And that's the same with like invalidating cash, which is
another process that is the best practice of jam stack
is basically like once you have the information your cash
gets completely wiped out, then you should rely on yoursel
and to do that so you don't have to worry
about it.
Speaker 1 (21:02):
So what is the markup part of junderstand?
Speaker 4 (21:06):
So this is the template pre rendered stuff. So this
is like your content that is like made by that
JavaScript part, by whatever job script framework you Yeah, so
this is like what we'd be doing with like when
you end build, whatever you have is compiled the ready
on client side, that would technically be like your markup
(21:27):
m I think.
Speaker 1 (21:28):
So to take it to Angular terms what you said before,
you can use Angular Universal, which basically gets you the
pre rendered content for SEO and stuff and also like
pre viewing images or stuff like that to Twitter and
stuff like that. And sorry, I was.
Speaker 4 (21:47):
Gonna say, I just wanted to interrupt you to see
how you would react.
Speaker 1 (21:52):
I'm exkiddy. How did they How did they do?
Speaker 4 (21:56):
You were great? You were so calm and it's like
very cordial. Was great, It's like a perfect host. Thank you.
Speaker 1 (22:05):
Okay.
Speaker 4 (22:07):
There's actually Christoph Gutenan guten Din I always hope I
get his name right. But he made a library Angular
pre render to try and make this a little easier
for taking out like basically you're carrying out your service
side rendering and then merging that output into static content.
So because a lot of people were asking for a better,
(22:30):
easier way to do pre rendering with the Angular But
on top of that, there's actually an open pool request
for Angular Universal for pre rendering scripts and schematics. So
this is like, I mean, Uri did a talk about
this in like twenty sixteen. Well obviously he's ahead of
times as always Jesus or shick head okay, sorry, ahead
(22:55):
of times Uri future.
Speaker 6 (22:56):
Uri Okay, but yeah, so he was talking about this,
I think it was n GB and he did a
talk about like the benefits of doing static Angular sites,
and so people have been wanting this for a while
and it's starting to catching even more with talk of
the jam stacks.
Speaker 4 (23:14):
So the Angle universal is trying to like keep up
with that, and hopefully the Angular Cli will start to
do more things as well.
Speaker 3 (23:21):
That'll be cool because I mean, so in the React
space that you know, Gatsby I think is the one
that is the probably the most popular kind of pre
rendering jam stack client suite if you will, is that right.
Speaker 4 (23:34):
Yeah, And they also got a bunch of funding recently.
Speaker 1 (23:39):
Yeah.
Speaker 4 (23:41):
Yeah, So Gatsby is huge in the React space, and
so we do a lot with like Netlify and React
and gas By. And it's funny. I think that this
is like the time that the jam stack is catching
on more in the Angular scene because everything is, everything's
getting quite inflated and huge and hard to serve up.
(24:03):
And like you see, like with Ivy, we're trying to
make steps towards making Angular more light weight because we
want to deliver things faster. Like you know, you're you're
losing users every time your site takes more than like
what what is it now, like.
Speaker 3 (24:18):
Three points like three seconds yeah, something like that.
Speaker 4 (24:22):
But you don't have the point point what three, I don't.
Speaker 3 (24:24):
Know what it is.
Speaker 4 (24:25):
I don't know what it is.
Speaker 1 (24:26):
I'm sorry, you got me and it's gone.
Speaker 3 (24:30):
Right after the point. As soon as you get to
zero anything, anything, one, then that's it. I'm out.
Speaker 4 (24:37):
But I'm really excited. I know that. Of course it
sounds so pitchy, but like, I really liked this stuff
before they started giving me a paycheck. So because it's
basically like my favorite thing, and I know we didn't
talk about it too much, but is the get workflow
process because obviously we want better perform ormans and like
(25:00):
doing you know, serving upstatic content using things like CMS
is to deliver content without having, you know, to have
it on your stuff. They're all really great things to
make your site perform better, and we want that. Most
of my time is being is developing the thing, so
I want there to be a really awesome process and
(25:21):
I work with it all the time, mostly because I
like mess things up constantly and have to like revert.
The whole process in general makes it so that you
have more freedom to push changes. Because you have immutable deployees,
you have a place where you can roll back. So
if you push something out and you're like that broke everything,
(25:42):
you just roll back. So it's not as scary because
I've definitely like pushed things that broke everything.
Speaker 1 (25:49):
So even with like databases and stuff like sometimes you
run migrations and you have like data and stuff like that,
even for those cases, it's like you can roll back
and everything's good.
Speaker 4 (26:03):
So databases in particular are like aren't handled by that
jam stack, which sounds like, oh, it's not our it's
not on us, which it kind of is like not
on us, which makes it nice. So you're like database
procedurals can be handled by a third party, so that
you're delegating that of like are you backing everything up?
Are you making it very performant? Like performance? I got
(26:26):
to stop using that word, since it's not a word.
Speaker 1 (26:28):
This is a safe place keep going.
Speaker 4 (26:33):
I immediately get like five at tz Mannex, like how
dare you? But basically it's another area where there's you know,
so much that can be done to make that work
really well for you that you don't have to worry about.
It's another thing that you're offloading from your developers onto
a team who can specialize in it.
Speaker 1 (26:54):
I say, so, it's another like a third party service
that you can use for.
Speaker 3 (26:58):
That API is to get at that data. Right, So
that's basically what if I hear you correctly, It's like,
as a front end development team, you know, we're focused
on this, and we have APIs that are driven either
by micro services or cloud functions or lamb to functions
or whatever it is. That's all happening. All I need
to know is how to use that API, consume the
data and or modify the data as necessary, and then
(27:20):
that's just taken care of for me by whatever it is.
Speaker 4 (27:24):
Yeah, and it's really cool. Like again, like with Smashing Magazine,
when they wanted to do comments, they basically made a
web hook that was like a comment would come in
and it would pack to a function that they had
that said, okay, take this comment and add it to
our GitHub repo markdown things, and then that would trigger
(27:49):
a rebuild of this site and that would come up
as their new content. So again it's like you still
kind of static rendering this information, but you have these
webooks in place that take care of that. And again
that's part of the get workflow so that you basically
don't have to you know, do a whole build process.
The build is triggered, that stuff's going on there, and
(28:09):
it's automated. You don't have to worry about it.
Speaker 1 (28:11):
So it sounds like a cool side project could be
like taking a personal blog and trying to run it
with that and see how it goes. To check it
out and to see the deployment and the atomic atomic
deployments and the key to workflow and all that stuff,
to check it out further more cool. So we're reaching
the end of our episode. Do you have any more question? Right?
Speaker 3 (28:35):
Yeah, I'm just curious for our listeners who maybe they
work in a large enterprise and they're hearing this, going
this is cool. But is this for me? Or is
this just for a blog like I mentioned, there's some
sort of side project, or what about a you know,
Fortune one hundred company?
Speaker 1 (28:49):
How do they?
Speaker 3 (28:50):
I know you mentioned like Smashing magazine, but like, how
do if I've got an enterprise application it's a line
of business application, how does the gem start kind of
come into play for me in that scenario?
Speaker 1 (29:01):
Yeah, and if you're not comfortable with money, so don't
think about it, that's Fortune one hundred.
Speaker 5 (29:06):
Yeah, I'm just a big a quote big I'm doing.
Speaker 7 (29:09):
Air Quot's a big company, big.
Speaker 5 (29:12):
Big company, you've never heard of whatever.
Speaker 4 (29:15):
Yeah, you all can't see this, but Brian just picked
up satchels of money that he's throwing over his shoulders.
Speaker 5 (29:20):
Yeah, solid bricks.
Speaker 1 (29:25):
So this is.
Speaker 4 (29:26):
Actually like really great for enterprise applications because a lot
of enterprise have gone monolithic and it has made the
development process and delivering new content and especially upgrading to
new technology is extremely difficult because it's all tied in together.
Nobody knows where all the variables have been spread across
all the different parts of there. So everybody you know
wants to go to a microservice architecture. Well I'm so biased,
(29:49):
and not everybody may want to go to the microservice architecture,
but it really helps your you know, the the health
and maintenance of your applications, and this is a great
way to tackle that because it is everything you know,
has a place for every part of your monolithic application,
and it really helps like enterprise wise, as like training
your team. So we have a get CMS and netlifi
(30:12):
which is basically if you're not as comfortable using GET,
you use the CMS UI and when you make changes,
it triggers. It's all part of like webhooks to get hub.
So like you make a post and it creates an
issue with all the information in there, and then you
hit like in review and it makes a PR and
then you hit published and it publishes it to the site.
(30:34):
It merges that information and it builds your site. So
if you're a developer, you could be working and get
if you're not a developer, which like a lot of
companies have to have both parts of that team right
so they can all still work together on the same
code base. As example, PayPal had a monolithic site and
they moved over to the JAM stack four times their
site speed increased. Citrix had massive documentation that they moved
(30:58):
over to jams and they had sixty five percent less expenses.
Their average server connection time increased by sixty five percent,
Like sixty five percent. It's like that's a huge street number.
Speaker 3 (31:11):
And I have to imagine also like for enterprise users,
like the scalability of this has got to be something
that's just push button I won't say push button, but
much easier than what they're used to right.
Speaker 4 (31:21):
Yeah, there are no buttons to push since the servers
are being handled by like the CDNs, you're globally distributed,
so there are no butstions to push. You're just automatically scaled,
you know, around the globe, and you're delivering on edge
nodes in the CDN to be closest to the person
that's asking for that information. So yeah, scaling is just
I mean a complete breeze.
Speaker 1 (31:40):
That's awesome. Now what does it mean to.
Speaker 4 (31:42):
Be a breeze? That's weird? Is it just because breezes come.
Speaker 1 (31:45):
It's gout of nowhere? It's like performance, Yeah, why, what's
what's it?
Speaker 4 (31:51):
I don't know.
Speaker 7 (31:52):
Google, Google will help us.
Speaker 8 (31:55):
Okay, Google, what is exactly?
Speaker 3 (31:58):
Sometimes I say that the steer and it's like I've
got three web results for you that.
Speaker 2 (32:06):
For you exactly?
Speaker 1 (32:08):
That is so good. Thanks so much. We're gonna go
and do some picks now. But just to summarize what
we talked about.
Speaker 2 (32:16):
Basically, for Angular developers, you have if you want to
render your site for se O, you can use Angular
Universal and you might want to check this architecture out.
Speaker 1 (32:30):
Gemstack to see if you can go serverless with functions
like the serverless functions and all the bug words. It
sounds super cool and as I said, like for a
side project. I will probably test my new blog that
I want to create with that and see how it goes.
Speaker 4 (32:49):
And then your enterprise when you create the Shy.
Speaker 1 (32:53):
Enterprise enterprises in then I will right for that. But
but if you have an enterprise, it out as well.
So let's start with the picks, Brian, do you have
any picks?
Speaker 6 (33:04):
I do?
Speaker 1 (33:05):
I just one this week.
Speaker 3 (33:06):
So I just finished Living with Yourself by Paul Rod
on Netflix and it's pretty good.
Speaker 4 (33:13):
Pretty sucked.
Speaker 3 (33:15):
I thought it was good, okay, so I mean, don't
judge me.
Speaker 4 (33:18):
Okay, I'm very excited that you say that because I
was full of doubt and I love Paul Red, so
I am extremely I do too.
Speaker 5 (33:24):
It was good.
Speaker 3 (33:25):
I think we finished it in like less than a week,
so I mean it was good. So I would definitely
go check it out. It's basically well, I don't want
to give it away.
Speaker 4 (33:32):
Just check it.
Speaker 1 (33:33):
Don't give it away.
Speaker 7 (33:34):
No spoilers, no spoilers. Okay, I'll go next, So I
have two picks. First is a blog post that I
wrote last week, I think, and it's angular testing tape,
the easiest way to start your test. I would put
a link to it. In the show note, so cool
trick for those of you who kind of get stuck
when they try to test their angular code.
Speaker 1 (33:56):
Check it out. It's very short and helpful. And then
next pick is the movie Joker, which I want to see,
and it's freaking amazing, So going.
Speaker 4 (34:08):
Does it mess up their head though? Like, are you
still thinking about it? Now? That's what I'm nervous about.
Speaker 1 (34:12):
So I'm not still thinking. I can feel the movie.
I can feel the vibe still. It's very like in
a good.
Speaker 5 (34:19):
Way, in a good way, Okay, I was wondering, in
a good way.
Speaker 1 (34:23):
I can feel it.
Speaker 8 (34:24):
Like it's such a beautiful cinema photography and music, and
like the story and the acting and everything about it
is and the plot and very good movie in my
my taste.
Speaker 1 (34:38):
So yeah, definitely check it out. Don't expect like the
normal comics.
Speaker 4 (34:44):
My coworker is like, this is a character development movie.
Don't expect an action movie.
Speaker 1 (34:49):
Yeah, it's not like Batman Beginns and stuff like that.
It's more dramatic and stuff like that. But I really
loved it. This is the second big Terra What are
your Pigs?
Speaker 4 (35:00):
Because Brian talked about that, I wanted to make sure
that everybody and their mothers have watched Fleabag, because it
is one of the best shows I've seen on TV
in a really long time, and it's like the second
season just got way better than the first season. So
I highly recommend Fleabag if only I remembered what streaming
service it was on, but we don't need to. You're
(35:21):
not sponsored by any streaming services, so I don't want
to do this.
Speaker 3 (35:26):
Yes, it's so good.
Speaker 4 (35:31):
I highly recommend it. I love that show. And then
my second is it is like two things. So actually
it's like two A and B because one is my
coworker just did a free code camp video switch. It's
like a like three and a half hour long netfi tutorial,
which sounds intimidating, but it covers everything and it's so good.
(35:53):
Like that's like my Netlifi pick. And then my jam
Stack pick is I'm doing a workshop angular in the
jam Stack at Ergie comp just the best. Yeah, yeah,
and I'm very excited because you two will be there obviously, right, Oh.
Speaker 3 (36:09):
Yeah, definitely, Yeah, I'm doing a workshop too.
Speaker 1 (36:12):
Are you doing one?
Speaker 3 (36:12):
Is it a one day workshop or a two day workshop?
Speaker 1 (36:17):
She's hold on ERGI dash dot Org.
Speaker 4 (36:23):
It's a one day you know how punny I tend
to be. It's like Anglander Jamstack from I don't know
to pro nice. So yeah, it's very fun. And I mean,
like just in general, if you go like the usually
three day conferences are pretty intimidating, but Ergie Comp, I
feel like, are one of those ones that you don't
(36:44):
want to end. And that's why, you know, like Shy
extens his Energie comp experience with trips to Vegas.
Speaker 1 (36:52):
Yeah, which we'll talk about separate.
Speaker 4 (36:56):
Next week.
Speaker 1 (36:58):
Next week, my Angular story, it's very.
Speaker 4 (37:03):
Unfitting for adventures in Angular to have a story about
your Vegas.
Speaker 1 (37:07):
Venture, my Vegas adventures in a yeah, but that's for offline.
Speaker 4 (37:14):
Doing workshops helps you like have your whole week at
energy Comp. And it's like everybody hangs out after workshops too.
It's really fun. So highly recommend it. Anybody's not just mine.
Speaker 5 (37:26):
That's right there.
Speaker 1 (37:27):
You do, Okay, awesome, Thank you very much. Was also
an episode than thank you Brian as well, and we'll
see you all next episode. Bye bye bye
Popular Podcasts
CrimeLess: Hillbilly Heist
It’s 1996 in rural North Carolina, and an oddball crew makes history when they pull off America’s third largest cash heist. But it’s all downhill from there. Join host Johnny Knoxville as he unspools a wild and woolly tale about a group of regular ‘ol folks who risked it all for a chance at a better life. CrimeLess: Hillbilly Heist answers the question: what would you do with 17.3 million dollars? The answer includes diamond rings, mansions, velvet Elvis paintings, plus a run for the border, murder-for-hire-plots, and FBI busts.
Crime Junkie
Does hearing about a true crime case always leave you scouring the internet for the truth behind the story? Dive into your next mystery with Crime Junkie. Every Monday, join your host Ashley Flowers as she unravels all the details of infamous and underreported true crime cases with her best friend Brit Prawat. From cold cases to missing persons and heroes in our community who seek justice, Crime Junkie is your destination for theories and stories you won’t hear anywhere else. Whether you're a seasoned true crime enthusiast or new to the genre, you'll find yourself on the edge of your seat awaiting a new episode every Monday. If you can never get enough true crime... Congratulations, you’ve found your people. Follow to join a community of Crime Junkies! Crime Junkie is presented by audiochuck Media Company.
Stuff You Should Know
If you've ever wanted to know about champagne, satanism, the Stonewall Uprising, chaos theory, LSD, El Nino, true crime and Rosa Parks, then look no further. Josh and Chuck have you covered.