What's Up With Angular with Mark Techson

Just a rebrand. So here's one thing we we've been trying to be really clear about with folks is that it's the same Angular that you know and love. Right? Like, we haven't

Wii and the Wii U. Yeah. Right? Like,

Rewritten it. We listen. Listen. Listen. Nobody's, like, in the dark. We learned our lesson from which is there's Oh, you gotta get Wes, get into mermaid. You got to. So if you do a markdown Yeah. And you want nice charts in that are, like, that could, like, monitor your application.

Angular 1 to 2. Right? Like and Well, we won't make that choice again. Right? I mean, just like Nintendo learned their lesson between the most of them on Angular .dev to be using mermaid.

That's awesome because

We've seen it with what other websites have this type of thing where If you want,

there and you can kind of just type away. And then there usually is a button that says, like, do it for me or show me the

Fixed result of that. And I think that's such a great way to especially when you're just, like, trying to reference something all the time, like learning Svelte over the last couple of months.

you just read the docs and you come up with a little you're pretty excited about that as well? I think listener.

the learning journey.

And I led the effort to design the learning journey, and we made it in such a way That you could do, like, small bite sized lessons Mhmm. That take you, like, 5 minutes or less. Right? To just Learned a bit about Angular. You can jump out and jump in or go to a part that you like, and you could do it in a browser. You don't have to install Angular to to to learn to Try these things. I love that. Yeah.

this time as well is that When I say we we are a team who have learned a lot of lessons, I can't I can't stress that enough. We've just learned a lot. You know, we've learned a lot. And one of the things that we learned is it was really hard to learn.

stumbled upon so many of these little tutorial

to to be a little bit different? So I like that. Wait. What, like, stack are you using to be able to run does, like, does the compiler need to understand

things where it actually shows it working. And it's nice because you can Mhmm. You cannot just like read it and understand, but you can say, okay, but my situation is a little different. What if I change it to do

I have but tomorrow, it's in the framework. So 4 months from proposal to like and that that's not just like a, oh, we added a A new attribute or something like that's a major to the users real quick what that is because I hate when people talk about things like, what the hell is a headless component? So It doesn't make sense for people who are just building regular apps. Is that true? I mean, we've already seen that happen. We had AngularDart We have a show on Angular today. What is Angular? Modern Angular. You probably haven't tried it in a while. Maybe you have. We've got Tons of requests to do a show on Angular,

we've seen it with Svelte.

they use this I had a student.

at a university,

And he was perplexed the whole time.

I was explaining the bugging, and I'm like, you see these red lines? These are telling you what's wrong with your application.

Yeah. That's

And I said, okay. I'll never ever again show my screen

this whole Under hold as web components for server side rendering? So that's For web components.

one time when I was teaching, I mean, I know you're, like, a master teacher. Both of you are. Right? So it makes sense,

Just blind you.

What what do you do to stay up to date With web stuff. Oh, yeah. So this is gonna sound a little, like, buttery again, but

Everything that I will ever display, like, when I'm on stage, high contrast. And is that high contrast light mode or dark mode? That's the big question. I do dark mode for

make sure I know what you folks are talking about. So, It is available to be called what Angular is now. Right? Just modern Angular, and we felt like all the changes we've been making deserved a new brand identity,

With Angular, you know, a new era for Angular going light mobile high contrast. No. It's high contrast dark. Beautiful. Yeah.

is, like, built in because it's at a lower level now in the template. I see. Yeah. It's because it's it's no longer a, We don't like it. We do not like this. And we conducted user studies. So one thing is that for the annual thing, we are evidence based. Right? We do user studies. We read feedback from RFCs.

Conditionally show something Yeah. That, like, actually loading it until

And then it opened up the door for that deferred syntax now. Right? Because now we have this, like, built in syntax.

Same as felt. It's a curly brackets pound if

And improve, like, the learning journey, we had to do better. And so now we have these really low level, And the street said, no.

Like process and processing A lot of people will reach for some sort of UI component library. Is like, what does that look like in the Angular space? Yeah. So we have 2 things for you on that place, and one is kinda built off of the other. So if you need something that's styled already and you like the look of material design, you wanna customize it, We have what's called Angular Material, which is a set of fully fleshed out components ready to drop into your applications today.

to,

So you added

same thing for a for loop. Well, we're using at now. Oh, at. Sorry. You know what? I'm looking at the RFC, which was probably a couple years ago. I gotta scroll to the bottom. The RC wasn't even that long ago. The RC HTML or JavaScript API will allow you you to mark elements on 2 separate pages.

has to hide or show or or And

So our if statements before were directives.

But what we found out is that if we wanna improve the performance

If you're trying to visualize what it is, it's

And Light mode.

Significantly. Right? Like, we saw, in some cases, up to 90% increase in speed because it's closer to the metal now. It's not having to go through the directive, Welcome. Thanks for coming on. Yeah. Why don't you give a give us an introduction of, who you are and what you do? Yeah. So, my name is Mark. I work at Google. I'm a software engineer. But At Google, I work as a developer relations engineer,

And so we said, okay. Wow. I it's June 14. It was proposed.

a major change, I would imagine.

as a design.

It's it's clearer to us if we use at.

We had to do a bunch of stuff. We We had to do a bunch of stuff to get this out, but it was the benefits are just so strong in terms of readability.

Also, like, a syntax change. Like, you have to update all the The Versus code plugins and stuff as well? That is correct. That is correct. We had to work with Prettier.

We have developer conversations, and the the street said, no. We don't want that. We want at.

if statements and four statements. So here's how it worked before.

and AI based one. HTMX is on there to assess. Wow. That is huge.

This might seem kind of boring to the listener, but I think this is interesting move is built in control flow.

primitives that are available now. Right? For f and 4. And it's it changed our rankings,

your templating? and it would always be

in terms of speed Right. And we talk to people like Rich Harris. We talk to people like Ryan Carniato. And we all that's the thing that people don't know about, like, these major frameworks. Like, we're not In a battle royale behind the scenes. Right? Like, you know, nobody shows up with, like,

But people externally, it just didn't make sense for them.

face when you work at a place like this. So so I'm real really, really grateful to have those experiences. Nice. What about UI components in the Angular space?

But for our specific use cases, like, we have So here's the one thing about working at a place like Google or Meta or Amazon. The scale that we talk about is very different than, like, the average user.

make that to the rest of the world? And the answer usually is

They build their own version of stuff internally,

And we're talking about, like, what is the future for us combining, And AngularJS

because he worked on the design of those widgets, Like the weather widget or, like, the alerts. Later. Yeah. Those types of things. Yeah. Yeah. He did the one like you Google. There's a tornado right now. What do I do? And then he would he designed what shows up so you can read as quickly as possible. So what's interesting for me about working at Google is get to work with people who do things like that because as a developer,

Right? But they have a lot of good ideas and whiz.

Right? The average user's website, if you get 50,000

and people are like, well, like, why don't you

So if you want to go and build an app, you're probably not going to be building

you're going to get VC funding at that point.

I don't know for sure. Yeah. That's one of those things I don't know. I would tell you if I knew. I just don't know. That's fine. We're going to be starting a new type of, like, on the podcast, a new type of episode called The Secret Sauce.

That was public for a long time, which is a separate team maintaining, like, a dart version of Angular.

Right? So there's nothing to say that, like, releasing wiz publicly would, Those are a good way to kinda know where the broader industry because Twitter is a microcosm of what's the hottest.

per day, sometimes per hour.

a day. We're, like, at the millions of users And then if you are like, well, I want the functionality, but not that look,

and have so many

like, forces? How do we collaborate together to do even better So there's more users. Yeah. We've heard a little bit about Wiz here.

And we're hoping to get to the bottom of a lot of those questions. Yeah. Like

You know, it would rise to the the top. Right? And people like, yeah, we gotta use Wiz.

are they using there that they can just load the JavaScript to build an entire How's that later in the in the thing? But then, like, they obviously don't ship that JavaScript

of returning that search result. Right? Like, there's an earthquake. What do I do? Right? Like, how fast that needs to be in order for it to be, like, a differentiator for a person. Never thought about that. Right? But, like, these are the types of problems you get to, like, I want to make games since I was a small kid,

Facebook, Google, some of these companies that are so large,

One of the really interesting things is there's an internal framework called Wiz Oh, yeah. W I z, that powers some of your favorite web apps.

West Side Story?

Oh, deferrable views.

Right? Like that To handle, like, scale that we do at Google, I have a lot of good ideas, and it doesn't make sense for us not to talk. It doesn't make sense for us not to learn to see what could happen. Like, I I'm always curious about that. Like, you you do a Google search for do a barrel roll and the whole page spins or, like, you You say set a timer and a little timer comes up. I'm always just like, what

Mhmm. Well, you know who worked on some of that stuff was Travis Nielsen.

A couple of people have mentioned it, but I think that's all it's as far as we've gotten with Wiz. Yeah. It

I'm not sure that I ever thought about, like, the urgency You just change things. And we have this process called zones

Maybe you can tell me if this is right, but we seem to get the idea that

Right? And you're just, like, man, we're 50,000 Right? We're really, really great at scaling. And a lot of enterprise customers Hangouts or Meet. See, I can even keep it straight. Hangouts or Meet. I think it's I think we call it Google One of the things that I was just talking about with somebody is They're like, well, Mark, why doesn't the Angular team make, like, a React Native competitor like Angular Native? I'm like, well, because Angular, we kinda focus on what we're really good at. That's improving Angular.

like, let's say you wanna make a funny funny Google search result. Like, what's the

He Really? He might not know the technical, he might be able to connect us to somebody who would know the technical behind that,

other firms would be like, oh, yeah. This is a good idea. We should do this too. And I I really do believe that because

or prefetch it when the bright when the browser says the idle state.

Defer the loading of this thing. Mhmm. Or you can compound that and say j s.org, he already has the new logo up there. So, even though it's always a good sign. That's fantastic. I haven't even seen the new logo for him yet. We've been We've been literally just trying to keep up with all the feedback Oh, yeah. And just, you know, keep going. Keep keep the party going.

Right? And then we have a bunch of these triggers and combinations of prefetch triggers and and interaction triggers, like, oh, only load this component when Something else rose into the view port. Yes.

defer that's what we call Furrable views instead of lazy loading because we're deferring the the the in within your template, So, definitely check out good morning with Mark that hashtag on Twitter

a new dock site, new features, and we are Very, very happy to have delivered that. Nice. So I think, for some people out there might not know, there was a whole thing where

2 was released,

we we are now in a whole world of of just Angular. So that that's Awesome. So Angular .dev

When Angular

was one of those. And what happened was as a team, we just got to, like, the limits

is the new home for Angular. Is that correct? That's right. That's what we're hoping that for Angular developers to just Get in there and get started. And people even new to Angular, can get in there and get started because that the one thing we did different, kinda like some of the other frameworks. So it so we you don't get that bleed that you worry about a lot of times Where you're impacting every component in the whole app. So, well, we've been supporting that for a while, and and we do that. But it's regular CSS.

there was a lot of confusion over what then eventually became Angular JS And then what became Angular?

Angular dot j s has been sunsetted.

We have moved on, and,

And, like, can you maybe

capitalize on the popularity wrap An Angular app into an Angular element and then be able to host multiple. Because let's say you have different teams who are producing, like, fully fledged apps, but they're, like, in a widget format,

still a thing? much

Give a a little bit of a what what happened and how how we got to where we are. Excellent question, Scott. So here's what happened. Angular came out Of the Gates is one of their original frameworks

for we wanted Angular to be. Okay. So now it's it's just Angular.

Is AngularJS

Yeah. Right. So even last year so it would be just 2 years in a in a month month and a half. Right? Right? But we we expose the APIs to developers who do wanna go that far. So you get somebody like this guy in the Angular community called Brandon Roberts.

So we're like, oh, yeah. Let's the browser war, so to speak, with the API, all of this tooling in the browser? Yeah. So we're using some web container technology And so I'm an I'm learning how to use it so I could teach them how to code. Wow. And to bond with him, of course. But

that changed the way that we wrote code. Right? Because before that, we were all using Lodash and prototype,

to Angular, it wasn't a big enough of an identity shift To let people know, and we just had a lot of confusion in the community. And in terms of Angular JS, were inspired by Angular.

of what we could do with AngularJS.

And so that was a part of our story. It's like, yeah, we were still supporting it who wants who who gets Task would like improve the performance of this page through, like, deferred loading or lazy loading. That sounds like a really heavy lift right now. Right? For it sounds scary. Right? Because, like, I don't know where to start. Right? Okay. I'll tell you where to start. If you're using AngleLab, Seriously, I I I look at what you folks are talking about. Like, a lot of times I'll see Wes do all these, like, short form content clips. I watch them, like, okay. Let me just see what, You know, what's the latest? And then I read a lot, and I get a lot from Twitter as well. Twitter is my number one place because it lets me know what's like of a fad or a trend,

And you were 2022.

wave of frameworks came around where you had, like, Backbone and Knockout web components. So we have thing called Angular elements,

And what ended up happening is that with AngularJS

focused style of, like, script, if that makes sense. It's kinda just how, like, Unity Had, like, JavaScript, but it wasn't JavaScript.

like, game engine programming thing.

Couldn't be bothered, and now he's like, alright.

YouTube.

which is their own version of it. Which language are you using

You know what I mean? So it's kinda like that. What are you using to learn it? Oh, I just went on my favorite,

I can do some basic scratch, and he doesn't see it as scratch. He just sees it. Oh, I want to get this guy to collect the coins. How do I do that? Oh, this is a loop. You know? So I'll have to check this out. It looks pretty sick. So I'm looking at it right now. It says use c sharp, c plus plus, or GDScript,

Yeah. Yeah.

Just started finally getting into, like, logic based games where, like, even, like, last year, he was, like,

people are loving Godot.

university, So even if I do a conference talk, I don't care what your theme is for your conference talk, my editor will be high contrast.

My my son is the same age, and he

a programming,

scripting

React has, like, the virtual DOM. I believe Vue currently has the virtual DOM, And that makes working with the actual DOM not a ton of fun. And, therefore, working with web components, not a ton of fun. Does does Angular work well with web components? Does it have like, what's its,

just wire up the event listeners

we have a thing called the component development kit, the CDK.

because more people are wanting that. So, yeah, we're definitely talking about it. And let me explain it

Like, they're not based on material. They're just the kind of Think of, like, a low level like, you want a shed with no paint on it. Right? But you want the doors, you want the windows, you want the foundation, Now that's how we got deferred, but we needed this control flow first. So we got them both at the same time, if that makes sense. But the control flow is the 1st step to get to defer. The view transition stuff is pretty neat. So we we used a little bit of that The new syntax website. And

well? I know or or is it just something you skin?

You want the roof. We give you all of that, and then you are able to go ahead and style those things and extend them as you need to, decorate it for your own needs. And Do you know if they can be used, like, headlessly as

drop down filter yourself and all of those sort of common components, both because

all of the logic

So you can go and take those, and then you can style those the way you want to.

like the array that that data goes into.

of adding selected classes, all of the logic to Like, let's say you have a drop down. You want to select 3 things from it,

But a coding environment that you run-in the Browser, you visit it, and we have a whole couple of episodes on web containers as well as they also allow you to run loves class based JavaScript, don't they?

there's a lot to them to make them work touch and mouse, and then there's a lot to them to make them accessible.

mermaid, dbt,

design systems is a hard adopt,

lightweight approach to RFCs

that renders markdown inspired text definitions and creates modified

Yeah.

then things to assess. Let's see if we can find anything

Oh,

And that's actually a good question is, Can

Oh, this is cool. I had never heard of a radar before in my life, let alone our answer to that always is, like, we'd love to, but, like, we just We just don't use it. So there's not too much we can really talk about it. So coming to our, Like a component some new features, not not a brand new version of Angular, all of the event listeners, the podcast. So,

Alright. So last thing we'll move into here is a shameless plug and a sick pick. Actually, we'll do we'll do a sick pick 1st, did you come ready with 1? I did. I did. Alright. So my sick pick is probably Godot, g o d o t. It's

Let's see. Good for them. Good for HDMX. Good for them. And then under techniques,

like, monitor Twitter and do surveys and things like that to sorta get a pulse. I bet they have their methodology on here somewhere we could find it. Cool. Oh, good tip. I like that a lot. That was that was very helpful.

And charting tool, podcast.

for our

There is actual examples of them. They must, like Editor in

Interesting.

Oh, mermaid is it. Oh, man. I've never heard of that. Oh, yeah. Okay. I I actually have been on this page before. This is cool. Mermaid is a diagramming

To adopt, Playwright. Agree. Playwright is the headless

oh, cool. Well, it's on my radar. We use this for the new Angular .dev. We actually switched a lot of our because we had a a lot of just graphics There were, like, chart explanations, we're able to, like, do some fine grain

Lang chain. Yeah. It's kinda story look like in Angular. Like, if you want to hold a bunch of data in, let's say we have

is under adopt. And then under tools,

and we switched

I sure hope you're hungry.

so buckle up and grab that old handle because this ride is going to get wild.

Wash those hands, pull up a chair, and secure that feed bag, because it's time to listen to Scott Tolinski and Wes Bos attempt to use human language to converse with and pick the brains of other developers. I thought there was gonna be food,

Oh, I'm starving.

This

is the Syntax supper club.

Don't just call it. Expose it. Beautiful. Right. You don't have to expose it. Just call it. Use use your things that's in there. So at the Google Christmas party,

from your component into your your template that way? Is it is it A special variable that just gets made available in Angular land? Nope. It just works. No. You're not doing things. It just works. I I know that sounds very salesy, I don't mean it to sound like that, but

What is like, how do you pass data

behind how everything works. You make your components in there, and then Often you will link out. I know you can do the templates right in there, but a lot of cases you'll link out to a separate HTML file for your templates and a separate CSS file Or your CSS.

do you ever

I like it. Music to my end. It just works. So if you have a property or a function, whatever in your component logic, Only part of the story we added what we're calling close to the metal built in,

it seems like a rebrand. Right? Yeah. Mhmm.

he works at Google. He's on the Angular team. He's here to talk to us all about how awesome Angular is. Welcome, Mark. Thanks for coming on. Thank you so, so much for having me. I'm super thrilled to be here. Awesome. Before we get rocking, let's talk real quick about Century. If you are going to be building an Angular

Which is nice that you're not changing everything on everybody.

an Angular app. You better bet

brand new website, a brand new logo,

a SDK Snick, right now. You can simply

12, 13 lines of code. You can integrate Sentry into your Angular app, and then when stuff goes south, you're gonna you're gonna know What went wrong, what people did to to actually hit that. So check it out. Sentry. Io. Use coupon code toasty treat for 2 months for free.

That's awesome. So Angular

Awesome. So, Mark,

and I, yeah, I work on an Angular team. It's been a really, really fun

Has released a

probably in And Ruff I don't know. He is. Only ever heard of only heard of Snick, seems a lot like the Svelte story for this thing as well, Where, like, you can store your data and and then just inject it wherever you want. And I'm a I'm a major React fan,

Who is

and

coming to save us is Marc Texan,

And

Sentry has

One of the hard parts that was kinda holding us back was that we have this really cool idea that's problematic at scale, And that's like change detection. Right? So every framework has change detection. So let's say if you think about React, where a lot of folks are familiar with, If you want to say something has changed in the DOM or my UI, in my state, you call set state.

as well. Is that That that's correct. Those are baked into Angular as a, state management. Well, so that's new for us is, to get signals involved.

Right? And it just then it kicks off the process.

to work around some of the limitations that appeared at scale. So then we were thinking, like, yeah, what can we do? We gotta do something better for our community, and then that's how we started to investigate things like signals as a solution.

So if you just change something that's being used in the application,

Right? But At scale, it's problematic, and we just found that out. And then our developer community had to find so many ways

But, yeah, Angular seems to be first to a lot of stuff. You know? I know I don't know if they were first, but they were one of the first ones to implement signals

it just knew to rerender everything, And then I was, like, what's going on? Then one of my TA said, Mark, he can't see the red lines. He's color blind.

With Angular, you don't call anything.

And it was like, now we're wondering why you wouldn't use TypeScript on something. So

a show component. Right. And then you have the details of this podcast. You have the title, you have the description, you have the guests, What's the process there? Welcome Choose syntax.

And and now we're working on it. That's was going to be my next question, but you sort of answered that is like like, what does the state

That you can use. Yeah. And so so what some developers would do, we've seen this, sometimes at the enterprise level. They'll

the next section of the episode, which is our supper club questions.

it doesn't have a virtual DOM. Correct? Right. Right. Right. Right. So we do have server side rendering. But the meta framework story, we're we we haven't made a a firm decision on what we're gonna do there. But like I said, Brandon and Analog, they're doing some stuff. Go ahead. Go off. Have a good time. Yeah. And Brandon's actually been on the show. We didn't talk we talked a little bit about Angular, that having experimental so it's in experimental

So, they should've made a different name. We should pick a different name because that was actually a different framework. In this case,

and Angular element is is our version of a web component So if your browser supports it, then you can write it in Angular, and you just write it as a part of your component off of it. Is it just like like you said, it's just with a style tag in your component File, is that the So in your component file, you can do right with the style attribute. So we do, like, a component metadata decorator. Oh, cool. Okay. Okay. And then you just have, like, your Styles, and then you could just use, Up until last year, but we have been moving forward with the vision

you know, be able to import, like, bolt and then be able to run multiple versions of their, like, application, lazy loading. But that are are running? Oh, sure. Sure. Well,

You know, through these Angular elements. Alright. Let's move into

And you wanna host to those on, like, a dashboard, for example. Sometimes we've seen developers, Right? Like, that's a feedback we had a lot a lot of time. I'm sure you both have heard that that Angular is really hard to learn.

Components, building stuff. But eventually, we're going to have an episode, which is Teaching kids to code. Oh, I can't wait. That's gonna be rad. Teaching kids is awesome. Alright. And then shameless plugs. What do you got for us? Alright. Shameless plug. Angular .dev. Head over to Angular .dev, the new home for Angular developers where you'll find all kinds of things, a new interactive playground, Fine. RIP domains, but domains was written in Angular. There's

you, an Angular developer, what

text editor

then it lets me know what's, like, staying. Yeah. You know what I mean? Like, I knew next day s was a big deal Because it stuck around for a long time, and people still talked about it. And then I knew that, like, remix was a big deal because people still talked about it for a long time. But But then when I saw some things that I can't even remember what they are. Right? Because they just stick around. Right? So that's how I can kinda, like,

There's no harm in being a little late on some of this stuff if it means that you're not jumping into every

just smaller things where it's like, oh, like, use this new, like, library for CSS. See, that could potentially be a trend.

You know,

But that's the one thing I I really don't enjoy about react state is that you have to pass it down every single level, Or you have to stick it in contacts and and reach out and grab that type of thing. So

that might be a good way to do that for you in a a clear way because the one thing about signals Is that they know where they're being used in an application. They know when changes happen.

I say special a lot, but I To get to where we wanna be long term.

That's really great. Anyway, let's talk about some of the new stuff in In Angular 17, I know, I I caught a quick look at it. Deferred views, built in flow control, view transitions API.

it's really nice to be able to Stick your state in a signal and then just use dependency injection where you need it. And then you can do things like What about this? it's kind of interesting. So, like,

And you wanted to display that

people are just like, okay. I get that, but the card thing is, like, super clear. Right? That's fantastic. Really, really great. Like, I always think about it as well. It's like, you don't wanna be storing have taken to Angular, and it's been really fantastic. And it's classes. Enterprise To be

And then that data needs to be passed to other components that could be used. What are you doing for that? Is it simply just like I know you said it before. It was just variables, right,

2 values. You don't wanna start, like, cart total, Or you maybe you don't even wanna star store a cart total. You wanna have an array of items, and then from that array of items, you wanna compute The total of that, and then you want to add the tax, and then maybe you want to format it. Maybe that's more of a templating thing, but, yeah, It's good. I I don't know. You're probably buttering us up, but you can,

So for people listening, I don't want to get too in the weeds, but a computed value would be like, let's say you have the idea for listeners is that view transitions

Ways that I've heard someone explain compute it with the cart example.

I I like that a lot. It, honestly,

effects and computed values off of that or a directive on the you don't have to render it out. And then that renderer

is,

Right? So we kind of maintain backwards compatibility as kind of a core tenant. And so if you wanna do state right now, there are lots of ways to do it, which part of the confusion that we're trying to help simplify.

Like, why there's so much, like, hype whenever y'all, like, do anything around education? Because that is fantastic.

So if you go from, let's say, 16 to 17 and we say signals are the thing in 17, You don't have to use signals yet until you're ready.

this value here. That is one of the best Angular has this idea of directives. Directors are are like these users a day, you're like, Yeah. Right? Before we even knew that High Script was gonna win the

being passed in, and then now you can use signals if you want to, or is it is it all signal? So now you can use signal. So one of our big Core tenants is that we don't break our community.

Because I usually do, like, full name. Right? But, like, full name is such a limited example because

I I'll put the country crock away. Don't worry. Stop buttering y'all up. No. But that is really a fantastic example.

we'll send Google the bill for that one. Yeah. Yeah. Right.

Right? So you can do you could do something like a service, and we have so one thing that we have that's really special is dependency injection.

defer the comments

on in an app. Right? So right now if you think about the way you do things, Right. So think about dependency injection aspect or to, like, programming, like that type of dependency injection. Right? Where you can say, well, here's this resource and I wanna provide it To different parts of my application. So you could technically store your state in a service and then provide the different parts of your application the same way. You know, you could do that. And there are other ways, but now we're saying, well, if you have signals, glass glued to, like, bandit drops in your hands for a brawl. Like, we talked, and we're all thinking about how can we move, Right? Now this guy makes a framework called analog JS, which is kinda trend spot versus, like, oh, this is a shift. So for me, I look for shifts, like a shift in the way we write CSS. So, like, grid. Right? Use grid for all your layout stuff. That's a shift. Right? Versus, Right now, in your template. It just works. You don't have to pass anything over. There's no, like, dollar sign, dollar sign, variable name. Nope. Just

are future work. And what I mean by that is we'll see this and other frameworks. Okay.

What's your favorite stuff, and and what's the most useful coming out at Angular 17? There's so much good stuff, To be honest with you, but at to be a little biased, Almost 20 years ago, Right? Because it could be in favor this month, and then we could find the next tiny new thing, you know, next month. So I have to watch out. Wes and I always like, So one of the things that we did different with Angular dot dev, We rewrote from scratch

parts boundaries of this template

Deferrable views

if you do lazy loading, you're usually doing at the router level. Like, at your router, you're saying

define lazy loading for components

is The ability to declaratively

that okay. So but people's like, okay. That's okay. But why is that special for Angular? What where we're taking it into a different place is that we're giving you

Because it's such a good idea. Let me explain what kind of what that is. Other people at home like, you mean? That's gonna be other frameworks. We know what you're talking about, bro. Let let let me explain. So when I say deferral view, so what we're introducing signals was one of those things where others implemented it, and we're like, this is a really good idea.

Defer the loading of this route. Lazy load this route. I'm saying within a template, you could mark

And that that's not at the JavaScript level. You still haven't even touched JavaScript.

customizable triggers for you to trigger that lazy loading At a declarative way at the template level. So you say, I have this huge, comments component. Comments are usually pretty heavy. Right? And you don't wanna do it unless somebody says view comments. We give you just like a simple one liner for you to say, I don't know for sure if that's wiz.

You just add it to your component, but it is scoped to the component, was a few months ago, but but that RC thing is really interesting, West, because here's what happened. We proposed Oh, wow. That syntax.

Some library like, React has, you know, a bunch of user land solutions. Vault has scoped

What does Angular do for CSS? How do you how do you author it, and, you know, what's the deal there? Sure. You can do CSS or you can do SaaS,

Vue has scoped CSS.

and it's

start at atdefer.

Misko, who builds quick, is it tries to figure out which parts it should learn, Should load for you.

It it really removes the barrier for developers. So think about a junior developer

we're not gonna sit around like, of course, we can wrap it in a defer or, like We've had the

Like, deferred loading and optimization. You see? And then you're like, oh, I want the t. So then fine, you wrap that t in, like, what we call a template variable, which just means put a hashtag in the name of it. Yeah. And then in that deferred block I just described to you, in the parentheses right after deferred, you write

Is so high level for developers. They don't have to do anything heavy. Like, you don't you don't have to do the heavy work as a developer Unless it's high contrast. Uh-huh.

That's what he start, and then you write it with curly braces. And then you you already are, like, halfway through your thing, and then you customize to your needs after that. I got it. I got it. I like that. It's We talk a lot on the show about, like, do it for me. A lot of this performance stuff is not ever going to work So

Hashtag There's some other frameworks who had used the first line. Of course, we know Solid has been one of the pioneer frameworks that have really leveraged signals from the start. And We've we will look so here's how we got the signals.

The the meta framework story, if there even is 1 within Angular, or does Angular just do that all? So, like, in in React, There's Next. Js and Svelte. There's SvelteKit.

tea. Whatever you put your the name of it. Okay. Fine. There you go. That's the whole thing. Right? And so that's why I said it's special because text based and not like PNG graphics you have to make?

All their functions and all their variables just to know how to make it work fast, and that's, like, not not a good ask. I I what's, like, the

Unless the framework or the tooling or the compile step does it for us. Right? And, like, That's the headless part. And then the head full part is you would bring the divs, you bring the inputs, and you simply weird use cases that this makes sense within our company, but We are curious, Oh, yeah. Hashtag good morning with Mark. Alright. So I'll link up that search.

the old author of Angular JS,

on viewport and I have I made games before. And it was very hard because I made my 1st game in Java, attributes that you can add to a HTML tag or your components that enhance the abilities.

Typically,

to ask him questions about

because of this, like, game schedule.

With now Warner Brothers, but it but it was like NetherRealm Studios, people who make, like, Mortal Kombat.

And I was just like, oh, okay. Great. I'll just do this. Because I did game development. So true story. Before software engineering in this form, I was pretty set on the path of game development.

Pass. That's okay. So I will make games with my kid, and so we're gonna make some game. I forgot what he called it. It's like master sword or something, Right? And that's what makes signals really special.

I've never heard somebody be like, yeah. It's it's great balance for

If this that's what I'm gonna be like, I don't wanna do it. No way. I've never heard

good about the game industry in terms of work, life balance. There's certainly a lot of people who love it and are all in, but

And this guy this was 20 years ago, mind you, so things may have changed. But this dude, he he came to our class, and he was so

And that's not the that's not a game language. Yeah. But I made 2 d and 3 d games in Java, and then I in grad school, I even made games. And then I was like, What changed my mind from games to regular software engineering Yeah. No mermaid. Hey. I'm I'm in on mermaid. I agree with, Thoughtworks.

Anything

And then I found, like, a 90 minute tutorial, and I was watching it on the plane yesterday.

where we gotta, like, Eat chickens and destroy bad guys with a giant sword. So I'll post it whenever we finish light building it. I've been keeping notes on teaching kids to code because

I've got young kids myself, and I've got a nephew who is getting pretty serious into it. And every time I see him, I ask him all kinds of questions. Almost want to have him on the podcast

so

withered

Like, he looked tired, and he just was like, you know, I'm just so sorry. I I can't even stay. I gotta get back to work. And I was like, damn. You can't even do, like, a A 40 minute lecture to some grad students that said, I don't wanna do this.

building games. It seems crazy. Pass.

a new browser based tutorial, And

we will give you the tools to continue that work. We won't block you. And that's how we're handling it for now. Right? Because we do know that people want a meta framework, but we're also saying, here's what we're really good at and let's really make sure we do the things that we're really good at. And that's again improving Angular. So our hydration and service side running story is top notch now. Right? We're we're feature parity with most things that do,

but I can see on analog

But here's what we did. We were like, hey. We're gonna do this hydration thing, But we're gonna make it so that way if people want to build more and go further,

File based routing and some of that, like, meta framework style work. Mhmm.

via

One line of code. Throw it in your router, and let's see how it works.

Look at the show cards and click on one of the shows. You'll see the show number maybe after the page is loaded or maybe once The the the top of the t of transcript

It's being baked into a lot of these frameworks now because

And when you change those pages, you can transition them from one to another. So go to the Syntax website, a cart total and it just says 500 yes, all. If you want to learn, triggers it way its way into the viewport. And then, okay, let's start loading that page. Maybe they're gonna click on the button. Is that a use case where it could be? And, like, the data fetching can happen in the component itself. So yes. But I think that A headless component would be

I think it's really cool. I think that it's gonna really help on the mobile web. I think that's where I can't wait to see what people completely develop with that API. Not even for Angular. I just mean in general. Right? Like, imagine, like, or just mobile websites we just Sunset that as a product maybe, I think, within the last 2 years.

when there are shifts in the in the way people write code and do things. And so this is an important way for us to do that as well. So what what's the CSS story inside of Angular?

and a bunch of stuff animates itself the way through. And I think it's so cool that It's time for you to check it out. And case in point, we've probably talked about view transitions. This is probably the 4th time. So we got 3 more times to talk about view transitions. Then listeners, And the the things that the library would give to you. In that same regard, like,

with just plain old fancy CSS. I mean, like, that is just fantastic. So Really excited about that. I think that it just and for us, it's important to continue to keep it's like we don't wanna keep up with every trend, but we do want to be present confident,

Having that closer and closer to, like, native app feel Deferred loading thing. Yeah. Really, really like that's that's that's also this is one of those things where

support right now where we're just like, hey. Throw this in your router.

we'll link that up as well in the show notes. Awesome. Well, thanks again. Appreciate all your time, and have a good one. Hey. Thanks for having me. It's been a blast. Yeah. Likewise. Thanks, Mark. Peace.

and sharing a lot of transparent moments of how I get myself unstuck. And when I get stuck again, how I get unstuck again.

one more thing is we will plug your Twitter as well, which is Mark Texan. And can I just plug 1 more thing? One more shameless thing? Yeah. Oh, yeah. We we plug all day. Oh, great. Great. So one other thing that I do is, I love to encourage people. And I'm really into, like, helping people, like, get get unstuck.

Head on over to syntax.fm

for a full archive of all of our shows,

who has ever been on if statements

more.

And don't forget to subscribe in your podcast player or drop a review if you like this show.

on Instagram, you'll find some of the videos that I've make. I make, weekly videos

So check that out. And it works really well on mobile as well, which I was Very happy to see. Cool. Alright. Thanks so much for coming on. Appreciate all your time. And, we don't have to reach for some crazy flip plug in or whatever. So

so nice.

Thing, just go for the scrolling experience. There's a very

And, also, for listeners, we started a Twitter list of every guest Seems like everybody's getting in on that.

Around somewhere between 1 to 2 minutes, just encouraging people, trying to help folks get unstuck, which sounds fantastic.

I'm, like, playing DJ with my mouse here making it scroll in and out. Like,

buttery Very buttery. Animation

Or on YouTube or We're just saying on interaction with the button that says load comments,

Angular is used at Google. We have thousands of Angular apps. When we make a change,

But the main And I told him we can design and build a video game. And so Godot was like and I did a lot of research. There's Unity. There's Unreal And, Jen, and then the community, like the grassroots level,

it's really hard to say, like, what's so different about frameworks These days because everything is so good. Right? Like, you just you you get so many good options. But if someone's gonna say, well, I want to use Angular or why should I use Angular, what would I tell them? First thing is I think the Angular ecosystem is absolutely fantastic.

you know, production applications I still call the hangouts on my heart, but I think it's fine. You're absolutely right. I'm saying always go to hangouts first, and then it's always like, oh, this is not it. Right. It's me. Right? But, like, you know, so so we think about Things at that scale, sometimes you have to have custom solutions.

Like, Evan, you talked about the things that he'd learned from Angular

domains.

That's not a Angular that's not Angular's fault, is it? That's not Angular's fault.

is with Angular Firebase console, Angular, Google Cloud, big Angular app. Oh, we got quite a few messages. It's Angular. So Angular is and that's the and that's the third thing I was gonna get to, which is that enterprise love Angular. Yeah. You know why? Because Angular is really great at scale.

it is a battle tested framework, and I can't stress that enough because Angular not only goes through So here's a big difference between this and the other frameworks.

And guess what? There are already tools out there that can do Angular quote, unquote native. Right? And the fact that we enabled the community to be able to do that, I think that makes Angular special. Another thing is 24 hours. And just even working at Google has been really fun. But the last 24 hours for Angular have been really, very special. So it's been a great time.

they go through of Angular and keep the same name, but we have to rewrite the framework but we'd have to wipe it because we have to rerender with Angular so you get a flicker.

I know what happened to domains.

Thousands of apps. Right? So we get this really like, the web forward. And this is an area where I think we'll we'll do our part To move the web forward by bringing out this thing. That comments example, I'm thinking about Right? Do that. So it's, like, really fine grained transcript in curly brace.

at the scale of Google. Is there any examples that are public facing And I'm really excited to see that being implemented in so many different frameworks because it's it almost takes nothing to to improve the performance of Your app. Yeah. We really can't, like, rely on developers to have to learn when to use use memo and use callback on We are we are so huge

type of file that behind the scenes gets generated into, on the page somewhere, you or if you had a value that needed to be computed off of that, it added tax, and then it formatted it in a certain way. You could do that with a computed signal where you say, alright, well, the value is in state, but What I want to actually compute based on that and when it changes

Angular be written not put it on the page because it's an if statement.

With Angular,

They do. I'll I'll tell you that. It's like people are probably sitting here listening to this. Like, okay. Like, how is it different than Then my type of thing. And a lot of the frameworks that you use are just function based or they have their own cooked up component,

in JavaScript, or or must there be a compile step?

into JavaScript. Like like Svelte, for example, is just It turns It looks like JavaScript. Right? But,

No. It has to be, the the the compiled stuff, and I'll tell you why. In the beginning, Angular was actually the 1st framework to use TypeScript.

it has to be compiled into it.

entirely

at defer, was that I met a game developer who worked at,

a component we have on the Syntax website that was pretty large as Transcript component,

Oh, okay. That is the logic. You see what I'm saying? So our our, like, API

It's even higher level for the API because you you mentioned, like, putting the logic to do that. The logic is in your template

Curly

because it needs to fetch every single word we've ever said, as well as metadata around when those words were started and stopped. And It's fairly large, and it was it was causing the show page to be a little bit sluggish. So Scott rearchitected it, so it was on, like, a different load, and it only loads when you Explicitly click that. But I'm wondering, like, if that was an Angular component, say a transcript component, Why does why is Angular going through this whole

I could put the logic for Both fetching the data for that component as well as

brace so I use Versus code for all of my stuff, and then I actually use high Contrast theme No. All the time.

happens in the browser, which is wild to me that you can do that.

Yeah. But we're just making a new brand to represent I like to do the same where you do, like, a string literal with the back ticks. So you could do all your spacing the way you want to, And you just write all your CSS there, or if it gets too unwieldy, which it will at some point, you could put that in a separate file if you want and then reference that file from your component. Yeah. That's what I was I was looking at. Like, most components are you have your TypeScript file. That's the logic And and that's because Injection. So there are features like that that we take advantage. Like, the decorator is a big example.

and I never even thought that we'd be able to do half the things. I I didn't think we were gonna get Rounded corners without JavaScript

So one of the things that people don't know about things like Vue and Svelte And some other frameworks is that they actually To to build stuff. Oh, I'm gonna go with just with the GD script. Is what is it is it look like JavaScript, or is it like a Python? A little bit. Yeah. And a little mix of both. You know what I mean? It it's a definitely Right. And and like the scale of like, think about how many people have Gmail open at all time, have calendar open at all time, how many 1,000,000 and billions of messages are going through, I'm trying to trick my my son into learning how to code. He's 6.

what's different about Angular from,

Do you wanna give maybe a

Yeah. To make that happen. That's from the folks at Stackblitz. Right. Stackblitz is like you do you guys have beef with the the web components, the lit folks as well? Like, what what's that look like? Do you guys ever pass each other in the hallway and be like, Angular is better. Do we ever start, like, snapping like a gory movie?

You know, I've been telling developers this, like, for the last, like, month and a half about what you can do in the browser theme and font are you using? Oh, good question. And you have some great questions. I love this podcast.

Like Node. Js in the browser, and that's what web containers allows you to do. So I guess, like, the whole build step

let's say, React, Vue, Svelte, like, what makes Angular special?

and the fact that you can run, like, a development environment in the browser, the fact you can run something like Adobe Photoshop in the browser. Like, that's mind blowing to me. Yeah. Absolutely.

just like from when I started. Like, I I got out of grad school

For those out there who who may have never used Angular, maybe perhaps you've used Angular in the past, maybe you've been in React world or any of that stuff,

Okay. So

trend that exists. Right? There's Probably more harm in in being too early to a lot of this stuff because Yeah. Either will go away or it will have major changes, which will cause you a little bit of grease. There's no harm in being a little late. May I use that with some of the people who are in for? Oh, yeah. In fact, that is fantastic.

technology radars.

Right? Like, you gotta know that that's that's what it is. Because those people who talk about how bad this framework is or how great this framework is, Honestly, at work they're not even using that stuff probably. Right? Like, they're not using the latest and greatest. They're using whatever has been vetted by their engineering teams and their engineering manager and the security professionals at work. So, like, let's be for real. Right? And so until somebody clicks on low comments.

No. Seriously, that is fantastic because I get that question

when you hear us talk about it for the 7th time,

Frameworks and languages

for because I do, some mentoring with people. And a lot of times with junior developers, they're like, well, I don't know what to do. I'm like, well, first, listen to me. That's the first time you listen to me. And the second thing is, you know, like, learn how to spot trends. Right? And and learn how to spot what's, like, A shift versus a trend. When you do that, you know, you'll be fine. But you you know what? You'll never go wrong is the fundamentals.

that that gives me a big wide view of what folks are doing jquery, moo tools, like, all those things. And then that first, like,

And where enterprise is going.

I've never seen this before. So Thoughtworks has a radar.

you gotta go you gotta go do a little fiddle or something like that and and build something with it.

You'll never go wrong. And I keep telling people that just stick with fundamentals. You'll never go wrong. Yeah. We always tell people, something you scan, but we're working on this idea of headless. Like, we're we're looking into that. Right? What does the headless component future look like,

Yeah. And I would say one other thing that's That's underrated, but I think valuable. I got this from my enterprise time working at places like American Express,

when I look at the Radars from places like RedMonk or Thoughtworks,

The types that are being used, or is it the like, I know their Angular heavily uses,

sorry. Not directive. Decorators. Yes. Yeah. Decorators. For templates and CSS and imports

Angular was like, yeah. We think this is a good idea, and we're gonna support it, and we used it. And so Angular is built with TypeScript, so you actually cannot write a JavaScript version of Angular. You gotta use TypeScript. Oh, so, like, you you can't even write, like, an a JS file And which went on to, like, go into Vue, for example. Right? And so

because of TypeScript

directives on their classes to say, Alright. This is my this is my

Right? Like, it's not the,

code that popped up. That was interesting that they picked it up so heavily. And it was controversial too when it first came out. People were wondering why, but, like, here we are.

with for your components. It's it's hard. Oh, and what

At the end of the day, it's it's compiled to JavaScript. Right? Is there a specific of Angular apps that Google has Angular

Standard decorator that just got passed, like, through t c 39. Right? This is before that, and it has some features that that do with our dependency injection where you can decorate A constructor with parameters. Right? Like, there are things like that that we leverage Right? But then that also meant that you as a developer could extend them and you could do fancy stuff with them. So we were thinking, like, ex extensibility

What's the limitation there that you have to use TypeScript? Well, because the whole framework is written in TypeScript. Yeah. But, like like, to every search result, you know, And the the job's right. Right? Spin the entire page when you Google do a barrel roll. I'm most curious, like, what I don't even know if you know, but, Like, is is that wiz? browser from Microsoft.

that using JavaScript just isn't the right fit for us. Okay. Awesome. Yeah. I remember that, like, very early on searching for anything on TypeScript,

Right? So now we've done this work around,

But we don't go as far as something like Next. Js.

on the server, ship it to the client, then just add in, like, your event handlers. Right? And get lots of improvement.

Right? So this idea that you could prerender to enable that level of, position of knowing that, yeah, if we release this, Like, this is this went through, The server side meta framework story is interesting because we've just made a lot of changes. So before, Angular didn't even support, like, hydration.

full hydration. So now you have full hydration in Angular. So that gives you half of that, like, meta framework story, We do This thing where we would give you that prerender,

way to load data, do server side rendering. Is is that type of thing Baked into Angular, or is there

Good question. I love this question.

a meta framework for Angular?