Speaker is almost done with the post radio show stuff. They have one more account to post two more and then they can get back to working on their side project.

Speaker is a big fan of angular and recommends it to anyone working on a large project. They were working at a place where they got to travel and inventory like assets. They were learning about angularjs. Speaker wants to do the algebra making their website for their radio show.

Speaker wants to create a new website for their radio show. They created a website using Google products. They want to be more interactive.

Speaker is using Firebase, Google Sheets and action scripts to send data from the sheets to the real-time database. They are also using Google Maps and YouTube for videos. Speaker created a website using angularjs. It helped them get a second developer job because they were using angular. Sarah Dresner is a director of engineering web infrastructure at Google. They are also a great developer. Speaker found out about them from a tweet. They are going to check out Sarah's demo.

Speaker explains to Speaker what a signal is and how it works. They explain how the signal works. Speaker updates the platform via settable signal.

Speaker explains how the amounts derive from users in the page are calculated. Speaker's calculation tracks signals read by the calculation as dependencies and recalculates them when they change. It also schedules and runs a side effectual. Speaker explains how to set the user amount and how to redraw the connecting lines when a user amount changes.

Speaker is developing a compiler that allows for seamless integration with angular and other adjacent libraries.

Speaker wants to have the whole page re-render and make it lazy evaluation so that the user doesn't have to explicitly batch operations. They talk about the differences between angular and spelt. Speaker is impressed with angular's work. They praise Sarah and the team there for their work.

Speaker wants to go back to angular and check it out. They are going to finish working on a radio show and send Anthony Cruz some traveling music.

• google sheets
• signal
• notify interest consumers
• reactive context
• angular signals

Welcome back, your dreams were your ticket, welcome back, ladies.

Well then since you hung around but those dreams everything, and they have turned around All right.

Y'all, welcome back.

Give it a stretch.

Okay.

Hopefully that last work session was productive for you, actually.

I am almost done with the post radio show stuff.

So I got a lot of the I sent off, I scheduled the email blast to the radio promoters in the people who sign up to the mailing list and also almost done with the Social Media stuff.

So I got like one more account to post two and should be good.

So yeah, someone was done with that and then I can actually get back to working on my side project, which I am making some good progress with so feeling good about that things are working.

So, talking about working, I wanted to talk about this thing I saw and I want to kind of Take you all on a journey real quick.

Alright, so Okay, here we go.

This one here.

Don't just in case I am a share audio just in case, okay?

So angular write, angular is a framework that I have used in the past, right?

And I have always liked angular because there's always an angular way to do things, right?

I am a big fan of angular and if I am ever working on, like a large, That project angle is pretty much I am going to you because everything you need is there, which is dope, right?

You don't have to worry about like looking at other libraries and things.

Like its everything you need is there.

So I am a big fan of that.

And we spoke about angular before break sessions, and so he's not so deliver.

Web apps with confidence.

Right?

And then I have been using angular.

It was like, was probably my very first like a framework that I use.

Used.

Just like coming out of like, just doing regular JavaScript stuff and the it was like angularjs I remember I was working at a place nothing like To tech-related.

It was a thing where we got to travel and inventory like assets or whatever.

Right.

And I remember this like after work or whatever it's like the hotel or whatever and taking this angular like one point something like tutorial I remember was like it's a drawing of like a family.

I think there were aliens or something, I don't remember and it's kind of like talking about the stuff I am like oh that's pretty cool.

Now the reason why I want to do the algebra making my website for my radio show and I gave myself the challenge.

Oh by the way let me I am going to add links to all the stuff I show next to the video so you can check it out yourself, right?

So I remember, so I wanted a new website for my radio show.

I want to be more interactive, and so I gave myself the challenge to use nothing but like Google projects or products Google products, right?

And so angular it was created by, well as Google kind of like hand like develops angular.

Yes, it's where you put it, and so I created my site here using all like Google products and like this here is what I think all that they did a right.

And so this is like a huge suppose, the load super quick.

So this is like the latest show right now.

I have going now if you want to so you can listen to Kai wanted, you can listen to the show straight away.

That's what it's there for is.

That's the main thing.

But I also made it so you can click to enter.

That is weird bug where I added this thing and jumps up to here for iframe.

I am not sure why but all this is built with angular, right?

Like I am using Firebase for the hosting and some like and then what was it real-time database?

I am using Google Sheets as kind of like a back end where I put in the information and then I use what is it?

I think called action scripts or whatever to send the data from the sheets to the real-time database, and I am always changing these things.

As all this stuff is basically using like this is even a Google map, I think.

Yeah, this is Google Maps.

I have right here, all this stuff, YouTube for videos, so all type of random stuff, right?

So I created this, even like the form thing I made.

Let us see.

So yeah.

So I created this site right?

Using a know, Google felt so angular big fan.

Right?

Funny, but this is this angular.

I learned angularjs.

And then like two weeks later like angler came out, so I kind of learned it and created a site.

All right.

Cool.

So that's 0 and even, so I the template here because again, this is super early, I was actually like a template.

I think I found somewhere and I modified it like a lot and it's a using materialize.

For some of the CSS stuff.

So like all Google stuff cool.

Now I think this site help me get my second developer job because they were using angular.

And since I had some experience with angular with this project, I was able to talk through it but like, oh, okay, yeah, I mean, so yeah.

So this is I made this site pre boot camp and everything, and they said, like oh he's at least he had some sort of Experience with it.

Cool, say all that say this, that recently.

Shouts is Sarah Dresner, super, super developer, young saying, they are right now, director of engineering web infrastructure at Google and Amazing.

We do a lot of cool stuff.

Right.

Some of the demos that Sarah's done previously mind-blowing.

That's why I first found out about Sarah.

Right amazing.

So I saw recently that they posted this thing, so I guess Sarah is kind of in like, in charge of like, angular development, right at Google.

And I guess it falls under web infrastructure, right?

And so I saw this.

I don't know why this is bugging out like that, but I saw this tweet and says, what if I told you Anglers about to have a Renaissance.

Oh okay.

Angular.

Just release a new signal.

Reactivity, primitive.

And is just the first step I made a little explainer about what it is.

And so, again, Sarah with the demos amazing, And so it goes on, and they go on and talk more about what's happening, right?

So let me add a link to this so you can read through the Tweet yourself.

Cool.

And so kind of break down everything that went into it right now I want to check out this demo which is pretty dope.

All right, so it's going to be looking at it.

Okay, how long are you when you refresh it?

All right.

Nice animation, fading in.

And so that's kind of like an explainer of how signals work in angular and I will talk about because it reminds me of something else.

She kind of talks about all like the different other like Frameworks and how they're doing it and stuff, which is a pretty dope and Yeah, okay, so yeah.

So again, I linked to that.

You can check it out.

I want to check out this demo though.

All right, so breaks down, so step one.

What's the signal?

And so let us say you have an app like this one.

So this app here, right?

This shows all the users and things and like I guess I am not sure what this is happening here but focusing on all the users here.

So we want to set up at any data, we might like to track with a signal.

So there's something that you want to track you attach a signal basically, right?

Right?

So a signal is a value which is reactive.

Meaning it can notify interest consumers when it changes, which is pretty cool because it's like, like, it sends out a signal when it changes, right?

So it's like, hey, something's changed.

Here's the value.

If you care And so this is kind of what it looks like.

So signal are zero arguments.

Functions.

Right?

When executed, they return the current value of the signal.

All right, cool.

Now signals.

So in this particular app, we might want to track the users.

Listed here at the top.

It's right here, right?

So this is all the users.

So then we're tracking it.

So I guess this is the initial that we have here and the so users the signal.

So you come back with the actual users, the number of users, right?

Cool, then settable signals.

So let us say you want to update our users.

These are all that updated, super dope.

We know that as of our last update, We now have 660,000, we can set that amount.

So then they set it here.

So, this is the.

So, you set this thing, I guess is the initial, and then you're setting it now with this, right?

So then we can also update the users as news.

Users, come onto the platform.

And so, as people come on, you update it with the plus 1, right?

So we do this via settable signal.

In addition to being a getter function, right?

So getting the value, we can also change the value of the signal and notify, any dependence of the change?

All right, the API includes dot set for replacement.

So replacing the initial value with that, and then dot update for deriving a new value.

So that update you add one, right?

So you're driving a new value and you take for performing internal, mutations of the value which I am kind of into see what that does.

All right, so cool.

So now what is computed So there are a few amounts on this page derive from our users in the key, at the bottom down here, you can see the change between this month and last month, all right?

So it's actually computed like, it's calculated.

The percentage of increase or decrease from the previous month, dope, alright?

Okay.

So we don't necessarily want a whole new value to update manually.

Computed values.

Allow us To show a derived.

Value a new view from our data in our signal.

So I am actually updates when users change, right?

So when you do this set for the update it looks like.

So this one is going to be computed so and there's that same function, that doesn't have any arguments.

So we got users then — last month.

All right, so you didn't like the current set of users and then ones from last month, all right?

Computer values are cached, okay?

Based on the dependencies and will only update with necessary.

All right.

So any signals read by the calculation will be tracked as dependencies.

Okay?

So everything seems that read by this calculation will be tracked as dependence is like users.

And then recalculated when any these dependencies change.

All right so wonder what last month.

So I wanted last month is being pulled from like a database or something.

Maybe or but yeah but it's subtracting the current ones from the they're.

All right.

Cool.

All right.

Good.

So now effect So there are times we might want something to occur when a signal has a new value.

All right, so with effect, we can schedule and run a side effectual.

I have never even heard of that function inside a reactive context.

Let us say we want to redraw the connecting lines when a user amount changes, all right?

So you have these lines here, you want to redraw them in case the lines are adjusting.

So then we set it.

So like it was so the 16 if I There's actually no I can't screw up anyway all right so user dot sets or setting it rights.

So that's going to cause looks like a redraw of wines All right, cool.

So, okay, so that's cool.

So if you want to like, actually have something happen when thing changes as not as a value, like these redrawing, the lines are redrawing, the lines, they're not like a value like a variable value and so to recall that function, you can set as an effect.

So, yeah, so this Again, zero argument joint is X having this function run again, when that thing changes.

All right.

What else?

So this is just the beginning.

Angular signals has also has flexible affect scheduling.

So, I guess this thing over here, allowing for seamless integration with angular and other adjacent libraries, like, rxjs on the largest.

Yeah, we have got a lot at my job leaning, into the compiler to optimize various reactive operations, especially Dom, apis, and update.

So that's good.

So because you do, you want to like really pinpoint?

What should change?

Instead, have your whole page re-render because that's kind of waste you just want to Point things, and then I will lazy evaluation so that the user doesn't have to explicitly batch operations.

All right, cool.

And then head over to the RFC for further updates and discussion.

So it's still kind of like it's being worked on, so that's cool.

So, if you like this, you can have some sort of effect on it.

And, you know, let your thoughts be heard now.

Like I was saying before, this reminds me of.

So, I have been using spelt a lot, right?

And because spelt just makes sense to me, like I am Quinn Stuff together.

If crying feels like angular was working on angular, but spelt is a little bit lighter at least in my like perception, right?

So we have all this stuff it cut.

So the with the signals it kind of reminded me of like stores and smelt because in store like with stores you can like subscribe to things.

So we have this whole that's not a good one, but we have the writable thing and to change the rideable, let us see here.

So you see we have an update here that was in their resetter you set it just like with the signals, right?

And then the also mentioned, what else was mentioning is mentioning Like computed, right?

So this kind of remind me so like with the whole dot set and the dot update from signal, angular signals, remind me of these stores and then also spelt has these computed values as well.

Is it under activity?

Which one was it?

I think it was really cool.

Where is it?

Come on.

See I sure.

Look this up before.

It's not a science.

No.

They have this other lady.

Okay, go the dollar sign.

So these are computed as well which is pretty cool and so, so just like they're saying, so often some parts of a component, State need to be computed from other parts, right?

And so we can see here this so This doubled comes from whenever count changes it, doubles it And so you just like a dollar sign the variable name and then the things that it like relies on and it just does it for you, which is pretty cool.

So it's cool to see angular bringing all this stuff into it and I just wanted to so again, shells to Sarah and the team there for doing some good work.

I am looking forward to seeing what more comes from angular and look like, it's so cool stuff.

All right, so let me get you all back to work.

It's on screen share.

So do y'all think y'all thinking about heading back to angular and check it out?

I am saying like it look like a lot of cool stuff is happening so it's good to see them doing this.

All right.

Oh let me add a link before I forget to this spelt thing here so you can also check that out.

Some adding all the stuff here you can check out the video the recording later.

All right cool thanks again for hanging out, I agree.

Add a bunch of stuff.

I want to finish working on.

I am gonna finish this program promo radio host promo radio, show stuff, whatever.

And yeah.

Thanks again for hanging out.

Share my screen here.

I am gonna send you off with some traveling music.

This is Anthony Cruz, AKA butter.

The track is called, thank you, because thanks again for hanging out and I will see you all 15 minutes after the hour.

For the final break session will take a look at artists website.

This is a music maybe watching Videos and maybe you will become a fan and check them out.

Alright, thanks again for hanging out, Anthony Cruz, AKA butter.

Thank you until then until next time, I wish you much productivity you will be easy and peace.