What's Up With Angular with Mark Techson

Welcome Choose syntax.

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, and 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, coming to save us is Marc Texan, Who is 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 an Angular app. You better bet Sentry has a SDK probably in 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.

Awesome. So, Mark,

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 I, yeah, I work on an Angular team. It's been a really, really fun 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.

That's awesome. So Angular Has released a brand new website, a brand new logo, some new features, not not a brand new version of Angular, Which is nice that you're not changing everything on everybody.

And it's kind of interesting. So, like, Why does why is Angular going through this whole it seems like a rebrand. Right? Yeah. Mhmm.

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 Rewritten it. We listen. Listen. Listen. Nobody's, like, in the dark. We learned our lesson from 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 Wii and the Wii U. Yeah. Right? Like, they should've made a different name. We should pick a different name because that was actually a different framework. In this case, we're just making a new brand to represent what Angular is now. Right? Just modern Angular, and we felt like all the changes we've been making deserved a new brand identity,

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 When Angular 2 was released, there was a lot of confusion over what then eventually became Angular JS And then what became Angular? Is AngularJS still a thing? And, like, can you maybe 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

that changed the way that we wrote code. Right? Because before that, we were all using Lodash and prototype, jquery, moo tools, like, all those things. And then that first, like, wave of frameworks came around where you had, like, Backbone and Knockout And AngularJS was one of those. And what happened was as a team, we just got to, like, the limits of what we could do with AngularJS.

So we're like, oh, yeah. Let's capitalize on the popularity of Angular and keep the same name, but we have to rewrite the framework To get to where we wanna be long term.

And what ended up happening is that with AngularJS 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, we just Sunset that as a product maybe, I think, within the last 2 years.

And you were 2022.

Yeah. Right. So even last year so it would be just 2 years in a in a month month and a half. Right? And so that was a part of our story. It's like, yeah, we were still supporting it Up until last year, but we have been moving forward with the vision

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

Angular dot j s has been sunsetted.

We have moved on, and, we we are now in a whole world of of just Angular. So that that's Awesome. So Angular .dev

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, 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.

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.

So one of the things that we did different with Angular dot dev, We rewrote from scratch 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.

That's awesome because we've seen it with Svelte.

We've seen it with what other websites have this type of thing where If you want, yes, all. If you want to learn, you just read the docs and you come up with a little Editor in 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.

I have stumbled upon so many of these little tutorial 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 to to be a little bit different? So I like that. Wait. What, like, stack are you using to be able to run

all of this tooling in the browser? Yeah. So we're using some web container technology

Yeah. To make that happen. That's from the folks at Stackblitz. Right. Stackblitz is like 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 Like Node. Js in the browser, and that's what web containers allows you to do. So I guess, like, the whole build step happens in the browser, which is wild to me that you can do that.

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 just like from when I started. Like, I I got out of grad school Almost 20 years ago, 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 Yeah. But 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.

Okay. So 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, Do you wanna give maybe a what's different about Angular from, let's say, React, Vue, Svelte, like, what makes Angular special?

So one of the things that people don't know about things like Vue and Svelte And some other frameworks is that they actually were inspired by Angular.

Like, Evan, you talked about the things that he'd learned from Angular And which went on to, like, go into Vue, for example. Right? And so 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.

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.

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 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.

Angular is used at Google. We have thousands of Angular apps. When we make a change, they go through Thousands of apps. Right? So we get this really confident, position of knowing that, yeah, if we release this, Like, this is this went through, you know, production applications

at the scale of Google. Is there any examples that are public facing of Angular apps that Google has

that are are running? Oh, sure. Sure. Well, domains.

I know what happened to domains.

Fine. RIP domains, but domains was written in Angular. There's

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

But the main 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.

Right? We're really, really great at scaling. And a lot of enterprise customers have taken to Angular, and it's been really fantastic. And it's classes. Enterprise

loves class based JavaScript, don't they? 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, type of file that behind the scenes gets generated into, into JavaScript. Like like Svelte, for example, is just It turns It looks like JavaScript. Right? But, it has to be compiled into it.

With Angular, that's actually a good question is, Can Angular be written entirely in JavaScript, or or must there be a compile step?

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.

Yeah. Right? Before we even knew that High Script was gonna win the the browser war, so to speak, with the API, 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

with for your components. It's it's hard. Oh, and what What's the limitation there that you have to use TypeScript? Well, because the whole framework is written in TypeScript. Yeah. But, like like, At the end of the day, it's it's compiled to JavaScript. Right? Is there a specific does, like, does the compiler need to understand The types that are being used, or is it the like, I know their Angular heavily uses, directives on their classes to say, Alright. This is my this is my sorry. Not directive. Decorators. Yes. Yeah. Decorators. For templates and CSS and imports

Injection. So there are features like that that we take advantage. Like, the decorator is a big example.

Right? Like, it's not the, 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 because of TypeScript

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, and it would always be Angular

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.

And it was like, now we're wondering why you wouldn't use TypeScript on something. So 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 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.

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.

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.

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

With Angular, you don't call anything.

You just change things. And we have this process called zones that could, like, monitor your application.

So if you just change something that's being used in the application, it just knew to rerender everything, which sounds fantastic.

Right? But At scale, it's problematic, and we just found that out. And then our developer community had to find so many ways 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.

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 story look like in Angular. Like, if you want to hold a bunch of data in, let's say we have 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, 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, 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.

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.

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.

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.

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, 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.

Right? And that's what makes signals really special.

I say special a lot, but I

I I like that a lot. It, honestly, 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, 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 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 effects and computed values off of that 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 a cart total and it just says 500 And you wanted to display that 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 is,

this value here. That is one of the best Ways that I've heard someone explain compute it with the cart example.

I mean, I know you're, like, a master teacher. Both of you are. Right? So it makes sense, Like, why there's so much, like, hype whenever y'all, like, do anything around education? Because that is fantastic.

Because I usually do, like, full name. Right? But, like, full name is such a limited example because 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

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, we'll send Google the bill for that one. Yeah. Yeah. Right.

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

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.

Seems like everybody's getting in on that.

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, deferrable views.

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

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 is The ability to declaratively define lazy loading for components on in an app. Right? So right now if you think about the way you do things, if you do lazy loading, you're usually doing at the router level. Like, at your router, you're saying Defer the loading of this route. Lazy load this route. I'm saying within a template, you could mark parts boundaries of this template To be lazy loading. But 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 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, defer the comments until somebody clicks on low comments.

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

We're just saying on interaction with the button that says load comments, Defer the loading of this thing. Mhmm. Or you can compound that and say or prefetch it when the bright when the browser says the idle state.

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.

Right? Do that. So it's, like, really fine grained defer that's what we call Furrable views instead of lazy loading because we're deferring the the the in within your template, we're able to, like, do some fine grain Deferred loading thing. Yeah. Really, really like that's that's that's also this is one of those things where 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 signals was one of those things where others implemented it, and we're like, this is a really good idea.

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, 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, 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

a component we have on the Syntax website that was pretty large as Transcript component, 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, I could put the logic for Both fetching the data for that component as well as actually loading it until maybe after the page is loaded or maybe once The the the top of the t of transcript 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

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 at defer, Curly brace transcript in curly brace.

Oh, okay. That is the logic. You see what I'm saying? So our our, like, API 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 to enable that level of, 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 on viewport Hashtag 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 It it really removes the barrier for developers. So think about a junior developer 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, start at atdefer.

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 Unless the framework or the tooling or the compile step does it for us. Right? And, like, we're not gonna sit around like, of course, we can wrap it in a defer or, like We've had the the old author of Angular JS, Misko, who builds quick, is it tries to figure out which parts it should learn, Should load for you.

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

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 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.

Typically, way to load data, do server side rendering. Is is that type of thing Baked into Angular, or is there a meta framework for Angular?

Good question. I love this question.

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.

Right? So this idea that you could prerender on the server, ship it to the client, then just add in, like, your event handlers. Right? And get lots of improvement.

We do This thing where we would give you that prerender, but we'd have to wipe it because we have to rerender with Angular so you get a flicker.

Right? So now we've done this work around, full hydration. So now you have full hydration in Angular. So that gives you half of that, like, meta framework story, But we don't go as far as something like Next. Js.

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.

Right? Now this guy makes a framework called analog JS, which is File based routing and some of that, like, meta framework style work. Mhmm.

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, 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, 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,

but I can see on analog

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.

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

So you added if statements to, your templating? So that's

Only part of the story we added what we're calling close to the metal built in, if statements and four statements. So here's how it worked before.

Angular has this idea of directives. Directors are are like these attributes that you can add to a HTML tag or your components that enhance the abilities.

So our if statements before were directives.

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 as a design.

But what we found out is that if we wanna improve the performance And improve, like, the learning journey, we had to do better. And so now we have these really low level, primitives that are available now. Right? For f and 4. And it's it changed our rankings, in terms of speed 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, Like process and processing 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,

Like a component or a directive on the you don't have to render it out. And then that renderer has to hide or show or or Conditionally show something right now. You can simply not put it on the page because it's an if statement.

If you're trying to visualize what it is, it's Same as felt. It's a curly brackets pound if and 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

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.

And the street said, no.

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.

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

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

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

And 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 a major change, I would imagine.

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 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.

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

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

the idea for listeners is that view transitions via HTML or JavaScript API will allow you you to mark elements on 2 separate pages.

And when you change those pages, you can transition them from one to another. So go to the Syntax website, Look at the show cards and click on one of the shows. You'll see the show number and a bunch of stuff animates itself the way through. And I think it's so cool that It's being baked into a lot of these frameworks now because we don't have to reach for some crazy flip plug in or whatever. So you're pretty excited about that as well? I think

that having experimental so it's in experimental support right now where we're just like, hey. Throw this in your router.

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

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 Having that closer and closer to, like, native app feel 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 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?

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

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,

and it's You just add it to your component, but it is scoped to the component, 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.

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, 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

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.

What is like, how do you pass data 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

I like it. Music to my end. It just works. So if you have a property or a function, whatever in your component logic, It is available to be called 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 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,

do you ever 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?

West Side Story? Oh, 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.

And we're talking about, like, what is the future for us combining, 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.

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

Maybe you can tell me if this is right, but we seem to get the idea that Facebook, Google, some of these companies that are so large, They build their own version of stuff internally, and people are like, well, like, why don't you make that to the rest of the world? And the answer usually is We are we are so huge and have so many weird use cases that this makes sense within our company, but 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

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

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

Right? So there's nothing to say that, like, releasing wiz publicly would, You know, it would rise to the the top. Right? And people like, yeah, we gotta use Wiz.

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.

Right? The average user's website, if you get 50,000 users a day, you're like, you're going to get VC funding at that point.

Right? And you're just, like, man, we're 50,000 a day. We're, like, at the millions of users per day, sometimes per hour.

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, Hangouts or Meet. See, I can even keep it straight. Hangouts or Meet. I think it's I think we call it Google 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.

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

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 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 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?

I don't know for sure if that's wiz.

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.

And we're hoping to get to the bottom of a lot of those questions. Yeah. Like like, let's say you wanna make a funny funny Google search result. Like, what's the What's the process there?

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

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

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,

I'm not sure that I ever thought about, like, the urgency 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, 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?

So if you want to go and build an app, you're probably not going to be building drop down filter yourself and all of those sort of common components, both because 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.

So

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.

And then if you are like, well, I want the functionality, but not that look, we have a thing called the component development kit, the CDK.

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

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, 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

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

Right now, 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, because more people are wanting that. So, yeah, we're definitely talking about it. And let me explain it

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 A headless component would be all of the event listeners, all of the logic 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, like the array that that data goes into.

But That's the headless part. And then the head full part is you would bring the divs, you bring the inputs, and you simply just wire up the event listeners And the the things that the library would give to you. In that same regard, like,

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,

it doesn't have a virtual DOM. Correct? Right. Right. Right. Right. So we do have Components, web components. So we have thing called Angular elements, and Angular element is is our version of a web component That you can use. Yeah. And so so what some developers would do, we've seen this, sometimes at the enterprise level. They'll 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, And you wanna host to those on, like, a dashboard, for example. Sometimes we've seen developers, you know, be able to import, like, bolt and then be able to run multiple versions of their, like, application, You know, through these Angular elements. Alright. Let's move into

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

We are curious, you, an Angular developer, what text editor

theme and font are you using? Oh, good question. And you have some great questions. I love this podcast.

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

And and that's because one time when I was teaching, at a university, they use this I had a student.

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

And he was perplexed the whole time.

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.

And I said, okay. I'll never ever again show my screen Unless it's high contrast. Uh-huh.

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.

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 Yeah. That's this whole podcast.

Light mode.

Just blind you.

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

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

make sure I know what you folks are talking about. So, 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, 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, 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, You know, just smaller things where it's like, oh, like, use this new, like, library for CSS. See, that could potentially be a trend.

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,

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

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.

No. Seriously, that is fantastic because I get that question 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.

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,

when you hear us talk about it for the 7th time, 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, you gotta go you gotta go do a little fiddle or something like that and and build something with it.

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, technology radars.

Those are a good way to kinda know where the broader industry because Twitter is a microcosm of what's the hottest.

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 when I look at the Radars from places like RedMonk or Thoughtworks, that that gives me a big wide view of what folks are doing And where enterprise is going.

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

Frameworks and languages To adopt, Playwright. Agree. Playwright is the headless browser from Microsoft.

And then things to assess. Let's see if we can find anything for our listener.

Lang chain. Yeah. It's kinda AI based one. HTMX is on there to assess. Wow. That is huge.

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

design systems is a hard adopt, And lightweight approach to RFCs is under adopt. And then under tools, mermaid, dbt, Snick, And Ruff I don't know. He is. Only ever heard of only heard of Snick,

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, text based and not like PNG graphics you have to make?

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

And charting tool, that renders markdown inspired text definitions and creates modified

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, and we switched most of them on Angular .dev to be using mermaid.

Interesting.

Yeah. No mermaid. Hey. I'm I'm in on mermaid. I agree with, Thoughtworks.

Under hold as web components for server side rendering?

Yeah.

Oh, For web components.

Oh, this is cool. I had never heard of a radar before in my life, let alone There is actual examples of them. They must, like 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.

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

a programming, like, game engine programming thing.

I'm trying to trick my my son into learning how to code. He's 6.

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, people are loving Godot.

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

Yeah. Yeah.

My my son is the same age, and he Just started finally getting into, like, logic based games where, like, even, like, last year, he was, like, Couldn't be bothered, and now he's like, alright.

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,

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

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 scripting focused style of, like, script, if that makes sense. It's kinda just how, like, Unity Had, like, JavaScript, but it wasn't JavaScript.

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, university, YouTube.

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

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.

I want to make games since I was a small kid, and I have I made games before. And it was very hard because I made my 1st game in Java, 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 was that I met a game developer who worked at, With now Warner Brothers, but it but it was like NetherRealm Studios, people who make, like, Mortal Kombat.

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 withered because of this, like, game schedule.

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.

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

Anything 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 I've never heard somebody be like, yeah. It's it's great balance for building games. It seems crazy. Pass.

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, 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 to ask him questions about

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, a new browser based tutorial, And

so much more.

Thing, just go for the scrolling experience. There's a very buttery Very buttery. Animation Yeah. That, like, I'm, like, playing DJ with my mouse here making it scroll in and out. Like, so nice.

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,

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.

So, definitely check out good morning with Mark that hashtag on Twitter Or on YouTube or on Instagram, you'll find some of the videos that I've make. I make, weekly videos Around somewhere between 1 to 2 minutes, just encouraging people, trying to help folks get unstuck, and sharing a lot of transparent moments of how I get myself unstuck. And when I get stuck again, how I get unstuck again.

Oh, yeah. Hashtag good morning with Mark. Alright. So I'll link up that search.

And, also, for listeners, we started a Twitter list of every guest who has ever been on the podcast. So, 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.

Head on over to syntax.fm for a full archive of all of our shows, And don't forget to subscribe in your podcast player or drop a review if you like this show.