Live coding and Q/A with the Angular Team | Dec 2024

we made it we made it we made it we made it it's the last one of the year we made it we made it Jeremy we did so many streams I think we did 11 streams this year that sounds about right we definely miss at least one month that's so many um hey everyone and welcome to the angular Q&A coding live stream I'm your host Mark Texan joined by the incomparable the Fantastic the undeniably excellent Jeremy elborne I'm definitely comparable no man sorry I can't let you feel that way um my my set here let me change my set okay sounds good but they're all saying hello you know what we got to do we know what we got to do gotta greet the people Jeremy okay Joe what's going on good to see you a angular is simply incredibly beautiful Yan thank you thank you yeah Amry what up what up what up what up gabos what up good to see you Joel halet what's good what's good Michael small Michael small I noticed that you stay pretty active in the Reddit putting out good information we thank you for that thank you for doing doing that work I appreciate that um Jeremy elborne we're starting in a sec sadik what's good what's going on what's going on good to see you let's see think create share grow tcsg I like that energy that's right that's right I say we we made friend and Dev excited about annual 2024 we have been doing our best okay that's all I can say we've been doing our best a lot to do we've been doing that best uh what's going on Krishna what's going on Shivam hello hello Mohamed how are you Andre what up though ham welcome back good to see you again uh sub commandante NG sir start stream we did start Demitri from Melmac oh where's that where's Melmac we can we can easily figure that out yeah Javier what's good dgs what's good from Romania o hello helloo wilver what's up I introduced was introduced to Ang this year and completely changed my life literally I'm so happy to hear that we're so happy to hear that we're so glad welcome to the community I meet what up what up oh the legend F Genie what's going on welcome welcome welcome um let's see new to angular say here welcome well we you're new to good stuff no stand alone all Standalone hello from Mexico oras uh let's see hello from be okay mil is from Oh Yeah from the show Al Jeremy how did you not know that that that because uh it's a little little bit before my time but uh that explains why nothing came up in Google Maps let's go let's go you know what episode I remember Alf as a kid I remember the episode where he lives with the blind woman for a little while and of course she couldn't tell that he was an alien and he had changed her apartment to have all these speed bumps and like all this like safety equipment and the lesson was like she had learned to live normally in her environment and he made it worse trying to be helpful I remember that very well as a kid that's one episode I do remember uh May what's going on all right Yan Nicholas what's good uh Karan what up what up what up okay friends here I saw uh webstorm is adding their own basil plugin in very excited about this why are you so excited about this because Google publishes a basil plugin but it's always behind right like it doesn't keep up very quickly with the like Jeet brains IDE releases and there are reasons for that um very understandable reasons but it would be nice to have an official jet brains one sure sure I get that um I'm in the mood to do a lot of cool stuff oh you can see my my cable in this shot I you I'm using different camera lens you all probably can't tell but today I'm using different camera lens it prob looks just the same over a compressed stream I can't but uh what should we do today Jeremy because okay I have an idea I was goingon to ask you but I have an idea let's take a moment and let's just recap let's review let's think about all the things that we did this year we did a lot I barely even remember what happened in this year versus last year it's all a blur well so let's see was signals this year last year I mean the signal Primitives was definitely last year right that was quite a while ago now yeah so see we' shipped so much that it is kind of hard to keep track of but we shipped some major things this year I think one of the so you know what a surprise hit for me was Jeremy was how much the community loved our work with linked signal and resource that was surprising to me yeah uh these are some very good apis yeah that was interesting because I felt like I thought that incremental hydration was going to be like the big hit that everyone talked about only and I was pretty confident that that's what we spend a lot of our time chatting about and people have really loved incremental hydration but link signal is just like the thing that the streets have been waiting for they've been waiting so long for this uh API yeah there's even been googlers like we have an angular chat inside of Google and there's been a couple of times when someone is like man I've got this situation where I've got like one signal but it needs to be like based on the value of this other thing over here I'm like well you haven't been reading our blog we've got API for you yeah it's bananas it's just so wild to think that we ship that and you know why but so on the other side I'll say this about when it comes to incremental hydration and how important of a release that is I don't think the community quite I mean I'm sure they appreciate I don't know if they quite understand just like the magnitude of that because it wasn't supposed to be possible with angular's architecture or internal architecture yeah I mean the introduction of the defer block into angular made a lot of things possible that wouldn't have been otherwise because of to get technical for a second like defer introduces an explicit asynchronous loading boundary inside of templates and without some sort of mechanism like that the the feature of defer loading itself but also things like incremental hydration just wouldn't be very nice to do yeah see that's that's incred in you know what I mean like that's just incredible and then we're able to leverage all the functionality of defur to be able to open up the the pathways to something like incremental hydration which is Magic I talked about this recently I was at a conference in uh Texas last week I talked about just like incremental hydrations from the future and I said the same thing last year about defer and I know that there are other Frameworks that have similar mechanisms like this island architecture like refer loading parts of the application but like I tell people I say you know that's true it's fine but the way we've been able to do it with angular really has created some really interesting new paradigms for the way to do these things because at the template level you have you know this ridiculously powerful lazy loading with defer and now at the template level you get to Define like you said you know these like hydration boundaries and like these loading boundaries at the template level and you're not fudging around and your like router and you're not doing all these configuration things you're like okay and with your providers you say okay and support it just support it with your provider and then you just type hydrate on these incredibly powerful triggers so I think that in the longterm hydration will just come to serve developers in a very special way and and that's why I'm so excited about it that was a big win all the other signal apis we released this year right like the inputs and uh what is it content children yeah the queries and model in particular um I'm really a big fan of model inputs because you know having worked on angular material for a long time working on common UI components this was one of the things that was kind of a little like honestly like a little clumsy with like NG model and the forms right kind of the original idea behind making NG model work the way it was compared to angularjs was like ah like it doesn't need to be built into the framework it can be this thing that exists in user space and it's this makes sense as part of the fors package and I think what we kind of learned over time is like actually it's just easier if it's built into the framework you know what that gives me a really good idea um let's J you feel like doing some some fun coding nothing super complicated yeah I was thinking if we wanted to do some coding um we could look at the new resource API because in the last stream we looked at link signal but we didn't get into resource at all yeah but before you go there I would love for you to demonstrate model versus signal input and some some of the just like ideas be to separate those for developers because I think those yeah see okay so people are are asking like input versus input. signal um definitely we spend some time doing that and we'll spend the rest of our time doing resource because I think resource is really cool and uh we spend some time doing that I'm look for some questions too a question is this am I supposed to return a new object and when I do signal. update yes yes we return a new one well if you let think about this for a second if you just change it inside of update I think you are like the intention is that you return a new object that you're like using with immutable stuff for now in the original like the very first time we put out signals there was also a mutate function that would say like hey go change this thing even if I uh it doesn't seem like it changed and we got rid of that um and at the time we were like well we're maybe not getting rid of it forever but we're just getting rid of it for now and I think with h with update the idea is that you're always returning a new instance of the thing so uh Genie also brings up a really interesting idea he says well because in you don't have a previous value and update is needed for in case when you need access to the previous value so that that's one way to think about yep uh when to use both of those uh really good insights there wilver says the atmosphere is very pleasant and very inspiring here thank you we are nice it's true it's true the Legends are true we are nice um thank you for that though I'm so glad I'm so glad uh Michael small says link signal really made template driven forance pop off in my opinion uh link signal is so cool um I think it's a underrated uh API in a way that here's remember that I think it's underrated in the fact that developers are going to come up with new exciting use cases for that API over time and we're only at the beginning of what people are going to do with an API uh so if we want to get into some coding uh let me get a starting place so yeah go for it oh here's some good feedback from alcatra one what up alcatra good to uh do Dev teams I think at Google test on Windows particularly CLI tooling recently the template HMR experimental feature will discovered to not work on Windows farbas C CLI has similar issues okay first first and foremost let me talk about the template HMR thing uh template HMR is experimental we're working on it meaning so it's experimental meaning the apis and the surface may change Etc but we're actually working on it still like we're still working on because first we started with HMR we had form support uh one of my first videos for the angular team was actually the HMR video that I made where I talked about how HMR supported maintaining your form data and I remember even then asking a really right question like Hey when's it going to support the other stuff that's important and so um we've made tremendous updates uh to the framework since then and so we have CSS which I think is in developer preview right now uh for HMR hot module replacement just released a video on that like I think yesterday for edit refresh cycle and then but I didn't talk about the HTML templates just yet because those are still in a developer preview so if there's some bugs uh please do do that thing where you go to the GitHub and update us like let us know that things are not working there uh especially if you have like specific reproducible states that you can share with us that'll really help us out to track down bugs but yeah anything else you want to add Jeremy uh I mean the question here is like specifically asking like hey is there a lot of Windows testing inside of Google no there is not um I mean they for teams that will like our building software that needs to run on Windows like Chrome I'm sure the Chrome team has some sort of Windows testing but the vast vast majority of googlers have nothing to do with Windows ever yeah okay okay okay okay okay okay uh let's see I am just checking out some stuff here for us looks good looks great how are you excellent excellent excellent yeah good feedback okay question from subc on day are there any plans to ship a promise-based HTTP client if so when there there's maybe plans to to ship a signal-based HTTP client yeah how do we make sure that our application is future PS for Zone Zone JS less migration we are using signals but is that enough or do we need to I'll change the on push as well so on push is um like there's well I'll put it this way there's two paths to getting to being zoness compatible path number one is like get on push everywhere and path number two is get signals everywhere um generally if you are on push you can just flip over to zoness and it is a very low uh complexity Affair I don't know that we have ever talked to anyone who has like gone to like taken an existing application of decent size yeah switched everything to signals and then went to zoness every everyone we've set everybody we've gone to zoness with so far for an existing application has gone the on push route so there may you may be treading a new ground there if you do it that way conle is playing ngrx and angular signals well angular signals are our reactive Primitives and ngrx is a community-led prodct project uh that has some reactive extensions that you can check out yeah like and ngrx is not something that is maintained by the angular team we we always want to clarify um it is a very popular community library though lots of people love it and it's based heavy on um rxjs um and although I think like the new like versions of ngrx have more signal stuff yes whereas angular signals right like it's a set of kind of lower level apis in angular itself that are part of angulars like directly used inside of angular um that can be used to build bigger things um you can also have kind of a bigger State Management solution like ngrx built on top of angular signals uh so oh so while Jeremy's setting up his coding environment he's gonna be able to uh share in a minute I'll tell you all something that I've been thinking about I learned a new term recently so I like this this is paper go like you can I don't know if you can see that I'm actually casting a little bit of a shadow this is paper uh this is really good for like videos uh and like educational like type content but I want a set down here I'm in a I'm in a space for recording but I want to like build a set so I learned this term stage Flats stage Flats where these are these low effort to build very lightweight and portable like scenery that you can make for like they make for like movies and plays I'm going to try to build some over the holiday break I'm going to be on holiday uh soon and one of my first thing I'm GNA go to Lowe's or some hardware store near me and I'm G to get some wood I'm G to build a stage flat um for here and then hopefully in January when we do our next stream I'll have like a different scene to show people I can't wait I'm really excited about this idea how how handy are you Mark I'm growing in my handiness let's say that look if you want advice on tools especially woodworking tools let me know oh I'm gonna call you you know I'm gonna call you Jeremy you know the worst thing I went through so I I have uh I had to replace some baseboards in my house and I had 13 Fe feet long to go uh the hardware store near me would not do a cut because I need like an inch cut off and they wouldn't cut it in store they're like you got to do that yourself yeah and I didn't have anything but a handsaw and I cut 13 feet of one inch with the Handa and it was miserable you yeah you shouldn't have done that I didn't have any other option because I was just so tired I really wanted to wrap that project did you like have to say like was the part that you cut the part that was like invisible it was the bottom part yeah yeah okay yeah yeah yeah yeah because yeah because if I had to sand it and like Smooth it out I even had a planer that I bought like a manual planer to try to do it and the manual planner didn't work yeah you learn you learn um what's up Lars had to running in the background you forgot about it that's all right what's up LS always good to see you always good to see you all here something else I'll tell you um I look at a lot of videos on the internet like most people and then sometimes I'll look at angular videos written by other people just to see what people are saying just to be on the the the in the know so to speak I see people like uls and other people from the community like in there like spitting facts about angular I appreciate that thank you for being an advocate for angular um is runtime rendering component Factory at NG template outlet has performance issue also can I use strategy pattern with components UI depending on runtime rendering uh so let's let's dissect this is well I'm going to like rephrase this is using component Factory or NG template Outlet uh a performance problem no like those are fine to use um there's no like in intrinsic performance problems with using those apis uh the only catch is no there's not that's not even a catch um it's fine and the second part of this is can I use the strategy pattern with components UI Depending on ront time rendering yeah you could do that um that is a pattern that I've used in product code before back when I was doing product code development before I was on the angular team and it's fine like there's uh the only what the strategy pattern means Jeremy so the idea here would be like you have something that is deciding what controls you're going to render based on some runtime logic so there is a couple of caveats I will give here though and so if you are not statically using a particular component and you are instead saying like hey I have some runtime condition and based on that runtime condition I'm going to render one of these three components if you're doing that you have to include the code for all three of those components in your bundle um ahead of time or you can make it so that instead of like having direct references to those components you can dynamically import them that will keep them out of your initial bundle and that will be better for performance if it's something that you're going to if you can tolerate being kind of a higher latency for rendering those things based on some condition further if it is based on some data being loaded if you're going to like render something then load some data and then use that data to decide what to show and then you dynamically render something based on that like if you do it very naively you can end up with like a you know suboptimal performance uh experience because what you're doing is like okay you're loading your initial JavaScript bundle and you're making another round trip to the server to get that data then um if you didn't like dynamically load the components that you care about you loaded those components in your initial bundle unnecessarily um but you also don't want to like do a round trip to the data and then do another round trip to get the components because then the latency is even farther so you have to kind of Be Clever about knowing like what am I what do I want to render and when and when do I need to load it to like minimize the latency and so there's no one siiz fits-all solution for that you just have to kind of tailor it to the specific pattern that you're trying to support excuse me I need some water hold on oh ah no water again I keep forgetting put water in here all right I don't know why I think that joke is so funny that there's nothing in my mug but in my mind this is the hilarious joke and I keep telling it but it's really not even that funny it's not funny at all okay let me change my my set here I need some gaas tape on my desk so I can know where to place all my items you know what I'm I'm you know that I have a problem with the community Jeremy I know you're ready to share your code screen but I'm going tell you something nobody has commented on my nice new glasses and I take that personally I want y'all to know at home nobody comments that I'm wearing my my new glasses so I can see it's really that really hurts my feelings okay Jeremy you ready to share your screen I want to highlight this though someone uh tell mention here they migrated 5,000 components to new control flow how'd that go any problems I'm gonna guess I'm gonna guess it went great wait I like how people panda to me because when I complain like a baby people are so nice but I love it thank you in future streams just compliment whatever Mark is wearing every time if you want to be my favorite compliment me every time I love it thank you everyone thank you you love my glasses look sharp thank you very very much um hold on I'm gonna answer this before you can share your screen Jeremy while you're sharing your screen I'll answer this but you got to take off the uh what you call that first yeah so I'm gonna minimize my thing here whenever you're ready you got the power to share why is ang often considered less beginner friendly compared to other Frameworks and what steps are being taken to make it more appealing and accessible to new users okay rondol this is actually a really great question and I feel uniquely qualified to answer this because I've been working on this problem since I got here this is the thing that I've been working on um well so at be before it's considered L's beginner friendly because some of the patterns that you just had to know out of the gate uh were traditionally seen as more complex for example if you were going to try to make an HTTP request to arrest API initially people always pointed you toward things like HTP uh client right and that requires you to know rxjs and then people say well why do I need rxjs to get to data which makes sense right so we we saw things around that and we're were trying to make some changes there um around the complexity around those ideas and then there was other things that made it more complex we had the system of organizing your resources for your compart components directors and pipes uh in a system called modules for us modules helped us to do some really nice code organization and manage this idea of dependency injection Etc however when you come in from it uh maybe not knowing angular modules seem like a lot of overhead and complexity so we just kind of gained the reputation of being complex through some of the things that we were hoping to be helpful for community members but just turned out to be a little bit harder um unexpectedly so that was part of the story what have we been doing since well I feel like we've made an incredible amount of progress um some of the work that's been done if you think about things like the new control flow instead of using directors in your templates for control flow uh for Loops things like that that makes it completely less overhead when you just want to do things some of the basic things that you do when you first start to learn the program and and framework then if you consider something like Standalone components right versus module base we teach Standalone first uh speaking of teaching that's one of the things that we spent a lot of time on and myself as well and Jeremy's actually helped a magnificent amount with this we've been doing things like rewriting our documentation uh coming up with new fresh examples right for people to be able to um like learn things with angular so a lot of stuff a lot of stuff uh I want to ask did anybody on the stream notice that the the template guide was recently Rewritten if you go to angular actually here I'm going to do it right now I'm sharing my screen go for it share your screen um go even full screen so uh recently uh the Fantastic Ben Hong who's been helping with uh angular documentation and uh myself worked on this Rewritten template guide here that is so much more comprehensive than what we had before um so just to like example we got all of our information about bindings and we actually have documentation now about all the like CSS and style syntax stuff you can use we've got information about two-way binding brand new that we never had before is like an actual documentation page about what actually is supported and what's not supported in angular's expression syntax in templates so you know we support all these literal types uh but we don't support template strings we don't support regex literals um we support all these operators we do not support like any of this stuff uh so you can actually find a place here that tells you what is supported and what is not this is where the defer docs live now everything you could do in template um this is following up the components guide which is also kind of similarly had a big overhaul and we have a draft for the router guide which you know is in need of some intention and then uh we have an outline for the dependency injection guide that we're kind of working on and so we're we're working our way through these foundational documentation Pages trying to make sure that they are giving you all the information oh yeah I also here one more thing I'll show I'm to answer this question part of v19 I also um updated all of these Essentials topics for components reactivity with signals templates so this is kind of our introductory content the way I kind of think about it is like this is the bare minimum you need to know to start coding with angular and it's very short very to the point so if there is someone new uh to angular that you want to kind of nudge them where they should start these Essentials are a really great place or if they want to just start coding go straight to the tutorial uh Melissa mus ask hi what makes angular different from react that's worth mentioning Mark and Jeremy oh I mean that's a that's an hourong talk yeah but we are we are V do you remember that show we VR Troopers by any chance showed what do you remember the show VR Troopers VR Troopers yes man I was a a child when TV we are VR that's what made when I said we are what's different than react um but yeah VR Troopers uh man what what a time what a time but seriously though like J said that's about we talk for an hours about what makes us different um I I think I think what's really exciting check out incremental hydration that's nobody has that so check that out yeah I mean I can give you kind like this is not going to be comprehensive but here's no no no don't go into it no no not now no because I want you to go into to the code they've been listening to us Jabber especially me I've been talking aot okay okay Mark Mark's the boss and so I'm going to code for him now yeah let's write some code all right so I'm going to like scrunch down this little template down here but this is a b very basic thing I have an an application here um and the only thing in this application right now is I have this one instance of my control and then I have this my control right here it's a component all it's doing is printing out the values of some input and control value and it defines this Su input input and this control value is the model and so let's come here and say all right I've got uh two things here I'm going to call them like first value and second value and they're both signals they're both going to start off as the empty string well let's start them off as something else let's just say like first and second and then we're going to go ahead and just bind these into the control so we're going to say Su input is equal to the first value wait asking for a slightly larger code this is as large as it always is yeah that's all right um wait what Justin wait somebody said react and angular are at the same number and then Justin was like yeah for now now that's true we do release two major vers a year we'll be at 21 by the end of the year this is there's nothing surprising here right like angular releases two major versions every year right like we do one in the spring and one in the fall or winter yeah and like that's just the way of things the version is very predictable yeah but I like that people you know have their feelings about it I'm not even mad I get it I get it cool so we have this control here my control here I can maybe like can I here I can try to like zoom in a little bit more um and they're both bound the same way right we can do like normal property bindings on these and they work exactly the same way I see my first value second whoops what just happened I don't know what happened uh they both work EXA identically the same right so what is the difference between input and model well the difference is that for this model for this control value I can also use the two-way binding syntax here the colloquially affectionately referred to as banana in a box and when I do that with a signal I take these parentheses away and instead of binding to the value of the signal I am passing the signal itself and so when I save that I come over here and like this still works this is refreshed still doing exactly the same thing we're binding uh you know this first value the second value into this component and let me actually make it so that I can change these yeah okay wait Jeremy uh the the streets are saying what are you doing I'm showing off uh input and model and the difference between them yes yes yes yes yes yes so I'm just going to go ahead and add um I'm not even going to bother adding a text input I'm going to just add a button uh update values click because I'm lazy and I don't feel like uh adding a whole text input but I'm going to do that so in my update method here I'm going to say uh this do first value. update and I'm just going to do I'm just going to add an X at the end I'm to do that to both of those okay sounds good I'm very I'm being very lazy all right so update values and so like I'm adding X's there um and you can see that when I update these signals those values come through the Bings to the the input and the model and they get rendered out into the template right so we can just keep doing that and that's fine so refresh that so the difference here is in this control I'm going to add another button now and I'm click here and I'm going to say update control value add that function and here I can say this. model or not model this. control value dot update and I'm going to do the same thing I'm just going to update that value and add a y at the end now and I should add some button text but update all right so now I have these two buttons this one is part of my common control this one is part of the like parent control and so so I can click this and both still update but I can now also click update this control value and it's going to add y's here and I realize I don't actually have um anything that shows that in the parent control so let's add that yeah there you go so I'm we're gonna say first value andate that so and I'm just going to put a little HR here just for funsies yeah could you throw like a little P tag right on line five that says from parent and then child so they can see the difference parent and then two child there you go I'll even put a an HR here for more for more Lin ux designers love when you add lines um and I'm going to move this button um up so that it's with the parent section there we go so we can update this and we see that updates everywhere and then I update my control value here and we'll see that that value actually propagates back up to the parent because I'm using this uh where is it this two-way binding syntax and because I'm passing this signal itself rather than just the signal value angular is able to hook this signal up to this signal this control value here and they it keeps them in sync now if I were second value is a model though yes control value is a model um if I were to try to take this input here here and I say this. suum input. update and I try to do the same thing what's going to happen Mark you can't because inputs are read only that is correct Pro the update method does not exist on input signal because inputs are read only so we'll just get that right out of there and so that is the difference between input and model so input is a normal input uh if you are familiar with any other web framework this is the equivalent to a prop right so react preact spelt solid view like they use the term prop angular uses the term input just because they came out at different times um but this is the some value that is passed into your component kind of like a parameter to a function whereas model is it can also be behave as a parameter that this accepts but if you use this two-way binding syntax and you pass the signal by by passing The Signal you're saying I'm I'm explicitly giving you kind of right access to my signal um then this control can update that value as well and angular will make sure that these values stay in sync and so when I update this in either location it updates in both places and you can see the like XY XY here all right Jeremy I want to I want to answer this question but I want you to fact check me on this one so we don't use output we should use model okay so that's not quite the truth well output is a different thing entirely right right so this person is probably thinking previously if I wanted to keep values in sync I would do an event to say here's the new value for this you know uh input that I have right like here's the new value I manually sync it that way so this is a very good question um because it is it the answer is quite nuanced and so um I will diging into a little bit of like when does it make sense yes to use model yes and most of the time you would want to use model when you are building some sort of control that inherently changes the value of some part of its own State some part of its UI the perfect example here is a checkbox if you are building a checkbox component part of what that checkbox does is inherently it changes its own check State when you click on it right um in angular material um I can come over here and go to the demo for mat checkbox if I just drop a Matt check box like on the page here right this has no inputs bound to it um I can zoom this in a little but like there's just a Mac checkbox here it says check me uh it has no bindings it has no inputs it has no event handlers um but when I go here and I click check me that check State changes and you want that right like it's kind of a pain if you have a UI component and you drop it on the page and you try interacting with it and the interaction don't do anything because um if you are exclusively dealing with like readon props and you don't have something like model or something like that then you like you click on this and nothing happens because the component is built in such a way it's like ah I'm just showing the state that's Bound in and I you would listen to a click event and change that state that's Bound in so model lets you um write components that update their own State and that state can propagate back to whatever parent is binding into it um if you are in a situation where instead you have some single like some single piece of state that is consumed by many different components and may be edited or like uh change like the user may interact with many of these different components and that all of those things might lead to changes to that data you probably don't want model um although you may be able to use it depending on your situation but what you probably want instead is a single source of Truth for that state that all of those components have access to potentially in a service so the thing that I I really want to emphasize is that one of the most important things when architecting your application with signals is making sure that any state you introduce has a single source of Truth um one of the most common things we see one of the most common pitfalls with signals is people using an effect to synchronize State between two different angular signals if you ever find yourself using an effect over a signal and then writing to a different signal that is a very clear sign that that state should be somewhere else yeah does that make sense Mark no it does I think that I want to write write an article about this because I feel like this pattern is just going to be unclear for developers who are still getting used to it and I want to make a video I want to write write an article just to make sure that people feel more comfortable uh Eric says thanks that is helpful but Eric listen to me this is super serious your question I'm looking at the wrong camera I'm looking at my like laptop camera your question you just ask it out loud but everyone has this question right as they're trying to get used to our new uh patterns even when I was working with the team when we were uh first releasing model I remember asking one of the authors on the framework I was like wait why wouldn't I just do this with an output because that's what I would do normally I would just make an output and then I would sync state that we right I would say okay something changed and I would fire an event I would admit an event and then but if I already have a signal that does this like what's the difference so great question people are going to benefit greatly from you prompting Jeremy with that explanation uh super good super super good uh love it love it love it love it love it all right you want to do some resource programming Jeremy I don't know if we have time um I got well it depends on you how much time you got brother uh I think maybe we we can defer doing a demo of resource until January we can because I think that's a that's a whole hour worth of uh discussion resource Stu all right then then let's rid fire through some questions I've been like uh let's see uh okay here's a good question where where are the new patterns published been out of the angular game for a few years and work is forced me back into independent Californian listen independent California check out angular.js

I think we're we're actively working on getting an official angular account on Blue Sky we are that's right that's right soon soon working on it working on I got so many questions let's see if we can get through some of these some these were asked like 30 minutes ago so if you're still around thank you for your patience or you can catches catch the answer on the replay all right I would love to hear about resource being promise based and what that says about the future of HTTP client and specifically interceptors so um HD the like rxjs based HTTP client isn't going anywhere right like that is going to stick around and continue to be supported um we may get to a point where we move the HTTP client that exist today into the rxjs inop package instead of angular common honestly like we shouldn't have an angular common package at all um but it's there and what we are thinking about I'm I'm not making any promises here but having an H an API that you know similar to how we have resource today something that would be HTTP resource and that would be a kind of reactive abstraction over HTTP requests that are giving you a signal back with the result um it were would work very similar to Resource but would be specifically tailored to being kind of those like HTTP requests no matter what we build that is like doing HTTP stuff it is going to support interceptors yeah um they probably won't be rxjs based interceptors which I know like today all the interceptors are based on rxjs and so if we ever get to a point where we are um using some underlying hdp client that is not rxjs based it may be some different Interceptor API I don't know that would be yet uh so it's hard to say what that like the differences would be but that that is a direction that we might consider is it a valid use case to try and initiate a signal with the value of the required input signal I tried and I get an error related to the input signal not being initialized yet so is to try to initialize a signal the value of a required input signal oh I see so even required inputs are still not set until in it you can't read them in the Constructor and this actually comes up uh this brushes against the the use of the class construct for angular components because because angular components are classes angular has to First instantiate the class and then can interact with that class which means that you have to say you know say you have a user profile component angular first somewhere in the framework code is saying new user profile component then the Constructor runs and then only after that Constructor finishes does angular get back a reference to your component instance to which it can set the inputs and so there is no way for angular to make the inputs have values during the Constructor because angular can't even get a reference to the instance back until the Constructor finishes and that is one of the kind of like the trade-offs you make with using classes as the like authoring structure and the like the construct for angular components is that you have this uh not exactly like temporal Dead Zone means something else but this is the term we've been using for it in our own conversation of that's like this dead zone between the Constructor and on a knit when those input values can be set all right let's keep it rolling pwa is still a first class citizen in angular or is it history uh I mean the angular service worker service worker package is still supported it's not deprecated if it solves a problem for you you can use it I think over time though the team has kind of come to see that we're not really adding a lot of value to the like service worker or pwa user cases and that you're probably just as well off doing that yourself instead of like relying on angular to do that stuff for you yeah and so the what I would say like if that package provides some value to you feel free to still use it but it's not something we're actively working on and probably won't be actively working on for the foreseeable future okay let's see I'm looking I'm looking I'm looking I'm looking I'm looking I'm looking okay we got a ton of questions got some ton of comments I want to add some more to our list let's see if we can wrap it fire because we're coming up on the end of this thing and I want to ask a different question to the community why is true HMR including typescript hard is it because of NG module uh it's not because of NG module um I wish Doug were here Doug has a has a could talk for like 20 minutes on why typescript HMR is really difficult uh it's because it can put your code in an inconsistent State um I'm not you know I'll leave it at that right like it's it's very tricky because your your code is when you write your code you're expecting it to run a certain way and when you're doing HMR you're kind of changing the contract so that it is running in a different way for servers HMR makes a lot of sense because a server responds to a request right like and if you don't have a lot of like you obviously servers have state but um if you are doing like HMR with like a Java web server right like you change some code your Java web server updates and then you make you like have a initiate a new request to that server and so you're like the path that you're going through as your code changes um is consistent as you interact with it whereas on UI code if you try to like change some code the state that you're storing in your UI may now be inconsistent with what that code is expecting since you've changed it and that could lead to weird errors in your local developer experience that would just force you to need to refresh anyway and so it's there's this trade-off between like well like could it be faster versus like it's going to be give you like confusing errors and it's probably better to just try to make the edit refresh fast enough such that refreshing the page is not a problem yeah are they say it again question from John here are there any limitations to using two signal with rout slash data for Rams not that I'm aware of we are planning on adding signal apis on top of kind of the existing forms and router system so that they you can just use them more without having to call like two signal but that is still on the backlog will on push be default in the future like Standalone is now I don't know um so here I will say for new applications inside of Google we do set them to on Push by default we did not change what like the actual change detection strategy is but we make it so that whenever you generate a new application it sets on push and then we add a little check to the project that uh will give you an error if you said something that's not on push yeah but for the rest of the world it's it's hard to say like I I can't give a definitive answer but the idea like longer term idea is if you go back and you read the original angular signals RFC we had an alternate configur figuration that was in your component decorator it was signals true and we we called the signals based components and these were components that only allowed you to use the signal based apis for like input and queries and what have you and they also got rid of all of the um life cycle methods except for on andit and on Destroy because all of those are the life cycle hooks are related to the way the change detection Works before you're in a signal based world and in that kind of signals based component there would be no option for change detection strategy it would always just be like using signals and the kind of the longer term goal is to get to a point where we have these signal-based components and you don't even have to think about like on push versus something else okay let me uh all right so here's I know there were a bunch of other questions friends but I have another question I think is really important I would love to hear from you all we changed up the stream quite a bit since Inception first we started off by playing video games then we did coding video games uh now we do chatting plus showing off new features I still want to play games Mark uh oh did I go away your your video uh B we're seeing the Elgato no signal oh no wonder if my camera died let me check what do people want to see next though that's what I'm interested in well I mean the thing I want to see next is you oh that's so that's really too bad you know what I've been doing this whole time my camera has been unplugged this whole time the whole time how uh how are we seeing you brutal brutal camera has been unplugged so the battery has been draining oh the battery died I see what yeah the battery died it's it's it's been slowly draining um this whole time let me see what I can do I can't do anything really I can't reveal my my true form let me see I got a different camera let me see if it's going to reveal it reveal too much of my uh here I'll I'll show this camera for now my other camera battery's dead okay I'm back look how look how less glossy that is yes well I thank you for compromising your production values yeah so so so Frosty but now you all get to see like so people looking again damn St the man oh but now you all get to see that there is a uh you know there is a difference between the quality of camera like people don't don't understand how much camera quality varies because they look at numbers like oh it's 4K resolution it doesn't matter like the lens matters the um the the sensor matters like lots of stuff matters uh Sprint mode camera activated hey um because I'm here for the people I'm here for the people I will let this uh what more do you want to see from us in 2025 what more do you want to see from us that's that's that's what I'm really interested in um build a game I see that oh God I'm not using signals okay this is a funny one I like this joke hiby this is a good joke oh God no s they're not using good joke I like that um alra says I was just thinking about the games not being around anymore okay if I had to choose for myself what I would choose for us to do I would choose for us definitely play more games um I would like to see us do more games build more games and continue to do like this uh chatty slash let's explain a topic that's you know people you know maybe want to check out with API oh and you can see my my Gray beard hairs more closely this way too probably I trim my I trim my Gray beard hairs out yeah I like them I like them because it makes me feel like uh a young Denzel Washington um uh but no I even had a I had a game queued up in case you were like all right let's do it it's December let's play a game what game would it been uh it would have been this game called malware it is a puzzle game where uh it seems like you're trying to navigate Windows installers and avoid installing malware along the way I love it we should play that in January when we kick off uh people get some good things here they want to see more real world examples plus Cod practices okay let me tell you friends this at home though I will tell you this this is true story I've suggest this a lot of times and Jeremy rightfully brought up the limitation with that it takes a lot of planning if we're going to do like a real world example right takes a lot of planning and neither one of us have a ton of bandwidth right like part of what makes the stream so uh great for us is that it doesn't require us to like do a lot of extra work to make this happen yeah I mean I've told Mark before like the only thing I the only way I can keep doing the stream is if it we do streams that require no preparation I just show up and start talking so maybe this Jeremy I got an idea oh I should write this down this is a really good idea um maybe uh we can do a series next year oh that'd be so good that'd be so good we'll see let me just say it out loud maybe we do a series next year like I'll plan it I I'll plan an app right and then we just code it and you can coach me through coding it and you can code some of it and we can like keep the GitHub repo public as as people case people want to see it you know what I mean and we can just build some but I'll plan it though I'll plan it first myself so that way it's not the the burden is not on you and I can come up with like the tasks that we need to do for each part of it yeah we can do something like that right I got plenty of ideas for apps I want to make yeah tell me and I'll start planning it and then that way yeah DM me and I'll start planning it if I plan it then uh I think that takes the burden off of you to have to do it because because listen friends you all don't really understand uh what it you know what Jeremy's life is like it Google being Uber TL I always joke around like oh he's incomparable he's this he's that no Jeremy really does a ton to lead this team and he's quite busy so to get him on stream is like you know it's great and and I don't ever want to like uh waste his time people love this idea people love it we're gonna do it that's it like of all the games that we've built the one I feel like is actually most attainable for us to implement like a real version of is Spades yes totally agree we were so close we were so close but we spent like an hour describing the difference between tricks and books and looking it up on like Wikipedia all this kind of stuff it's so funny um yeah okay okay I love this I love this uh we will make some stuff we'll do some games next year we'll we we we'll build an app next year together I think it' be good says what if we do design patterns on your angular app that would add a lot of value sure we can do all that stuff and you all can add you know stuff like we can make this a fun Community project um that'd be good yeah if you want if you want to give us more ideas go get on Blue Sky and just post them on Blue Sky and you can tag me and Mark do that Justin white says what's your go-to Advent code setup do you do it in node or bun are you doing Advent and code this year no I've never done that like I I have work you got Advent of work um are you guys gonna have a special video for angular 20 uh vono let me tell you something you should see the proposals I come up with for the stuff it's so far out um but we're going to continue to uh plan and v20 is going to be special if if v20 if the video is anything short of hiring a helicopter Mark I'm going to be disappointed that's right that's right I'd be disappointed if if they'll make me do it um let's see do blue sky yeah go to Blue Sky that's where that's where we're hanging out at lately somebody asked if we use an AI editor I like to use idx right now uh for my hobby programming lot of fun lot of fun with idx all right Jeremy let's wrap this one up let's put this one in the books I think we have um enough ideas to start for next year I'll write up a I'll do the Google thing I'll write up a doc about our 2025 uh stream plan if you want to know what it's like to be a Google engineer it's like you're you're spending the majority of your time just writing and reading Google Docs that's right that's right that's right um we're gonna do that uh let's see the last thing is this uh what are you watching playing reading okay so I don't normally listen to audiobooks sure but the r fantasy subreddit I saw them keep recommending an audio book called Dungeon Crawler Carl and it went on sale over the holidays and over Thanksgiving and I picked it up and started listening and I have just been rocketing through the series I have listened to dozens of hours of the series now I'm in I think the fifth book and the the audio book is so good it's such a great performance the narrator has an incredible range and does different voices and accents for all of the characters uh I've been enjoying it so much that I have not yet started reading the new Stormlight Archive book which I had been eagerly anticipating archive wait Stormlight Archive is that I'm trying to remember is storite archive the one where everybody has superhero Powers sure yeah you could say that no no no no no no Brandon Sanderson popular F like Epic Fantasy series but there's a book series that he wrote where the superheroes are like evil oh that is different that's called the reckoners the reckoners okay because I'm like I went through like three of the reckoners books um and so Stormlight Archive has been on my list of books to read okay so you're going through this audiobook what are you playing playing uh Dragon Age mailu guard nice I think last time we talked to what are you watching um the only like scripted show we're watching now uh rewatching season one of Arcane in order to get up to watching season two to catch up um we we watched season moment it came out but yeah watching it again just to kind of remember but um yeah Arcane also great fantasy television highly recommend oh fantastic okay about you Mark I am I just finished uh the the Andy Weir book The something project project Hail Mary project Hil Mary good one it's a good one very good one I'll tell you offline why I gave it 4.5 out of five stars I'll tell you offline I don't want to spoil it for anybody I gave it f 4.5 out of five just finish that um I'm working on We Are Legion right now I just started we are legion the Baba verse book uh this is a different uh author so I'm working on that book and I'm reading another book by this guy Yari Yari it's called Nexus it's about like a history of information and artificial intelligence very heavy read it's not like a light read it's like a yeah get smart read actually I just ordered that uh that book as a a holiday present for my

2024-12-30 16:15

Other news