AngularAir - Extending Angular for the Reactive Web with Michael Hladky

hey how's it going welcome to another episode of angular air I am your host Justin and today we are going to be talking about extending angular for the reactive web some reactive programming stuff probably some performance stuff some exciting stuff around that so looking forward to it that's a I say hi to our panelists and then we'll meet our guest and we'll get right into the content I joining us today we have Alisa Alisa how's it going hey so glad to be here so glad to have you Mike is with us Mike how's it going not too bad happy to be back talking tech and hanging out with a few good friends all the group all the group Bonnie's with us Bonnie how's it going it's going good I'm I'm over here in Europe I want to throw something in before we start the show if that's okay because I'm watching the I'm watching the news over in America there's scary stuff going on over there so I just want to give a quick shout out to a black lives matter there's some people fighting for justice and I support them and if I can start out with a pic real fast equal justice initiative out of Atlanta there's a guy named Bryan Stevenson out there who's been doing really good work and also as far as nonprofits go they're really good accountability really good transparency and they're fighting for equality and the justice system so yeah I just wanted to get that out there before we jump in Thank You Bonnie thank you now maybe sharing that link that we can put up we'll put it up on the description of the video and share that out I'll send it to you awesome and who do we have tonight who do we have Michaels joining us Michael how's it going it's amazing over here in Europe it is the end of the day I would say so the last bit of my energy is for you awesome also we appreciate that I really like your is that a just full-blown bookshelf that you got behind you or is it multiple things use the bookshelf I moved it there because it looks good on a camera have you read all those books Mike these are the books of my wife and only a very small portion like here is one are my books so Mike you have a very smart wife that's true but I'm not really smart so this so why don't you you want to tell our viewers a bit about yourself yeah my name is Michael Michael latke I always say Mikey but in fact this Michele German yeah English German however maybe let me say hi to Mike hi Mike I'm Mike Witt was running bigger than people trainer and soft and something with a focus on England ionic typescript everything in this ecosystem in my hobby is reactive programming and this is I guess also a big part of the today's discussion and whenever I talk about them I'm very happy little more happy than normally how do you get reactive programming to be a hobby is my question [Laughter] it's kind of when it goes into the Train of the first time I was the technology stuff in angularjs was the new kid on the block and then I went on a meet-up in this attack and I said like what is the newest chief that I wanna try and once it is and it's a cool and I'm like I would try it and then another guy interrupts it means it no no no all right check it within you should and you should try this and it it took me in 10 the first experiment before exchange was getting a clicks being the only enough from event they took in three days - should I do here I mean I managed it somehow to do a very basic day moment even presentation victim lost a little bit of focus and came back a year later to the same topic and since then and so fascinated about this and it was also some part for me to learn it some I couldn't get rid of it and you know if you put a lot of effort in something like trying to understand this whatever library you it gets a little value for you for it from a psychological perspective so I cannot get rid of it because I pulled it so much effort to learn it I was stuck about six months on trying to figure out the difference between rxjs and ng Rx because the letters confuse me a lot and I just was like I don't know like do they go together are they like competing or I couldn't so then all the letters was crazy for me and then what it out what it actually does it was it was it was a while for me to figure that out but but once you once you master react especially because even since then where it's grown that it's become such a part of I mean rxjs is like if you master reactive programming then it's such an essential part of angular because it's just it shows up in everything so it's kind of good that you became such an expert on that I mean angular is for sure not implementing more reactive features I would say they all they try to limit it where they can which is valid of course this is not a problem because it you can do anyway always everything on your own and it's not not hard to set up a behavior subject so I guess the value is not in for me only in the angular ecosystem but you can use it for saying all the other frameworks right you can use it any any framework you want or vanilla and the coolest part is it is the principle it's push based processing instead of page based processing and this is something that for example Alibaba and when they turned their whole infrastructure from batch processing to push based processing in the backend to because otherwise they could not survive anymore it took too long to get the number how much money they have today it took too long to get a number of something and they really switch the whole ecosystem to stream stream based programming and in the backend in the front end this is the way this device so it's or you can use it on the first thing this reminds me of Thomas Burleson was on our show last year with the post push based architecture and it was such a good show and it was very it was very good yeah yeah and so are you so and you have slides for us and everything you're going to show us you're gonna talk more about this one thing real quick you talk about you also using rxjs on the background or in the backend is well not just in the front end I just wanted to explain for those who may not know is that rxjs is part of a larger ecosystem called reactive extensions and vailable for a lot more languages than just javascript /type today so whether you're not you doing dotnet go ruby swift java there's a whole bunch of different reactive extensions so if you're using a different programming language other than Java slash typescript you take a look you may be able to find reactive extensions for your development environment as well I was scanning that it was new only to JavaScript but that reactive programming wasn't new to a lot of back in languages is that not true Oh react rxjs has been around for quite a while obviously popularity has grown quite a bit partially thanks to angular but it's been available for multiple languages for quite a while so you can use the same paradigms on the same concepts across different programming languages there is even its called Apache flink I guess it's for the back end it's also very active programming but this is a completely different let's say library and you if you look at it at the code and you selected sorry x chase but or RX in general but it is it's just like bringing the concepts and also they have the names like switch map or whatever so it's it's like a language read metal language in programming languages I was finding interesting that it's like the the concept is complex right there's a lot going on the code is pretty straightforward and feels pretty clean and light so it's like something that's light and small yet is so shiny and exciting and I think it's because partly I think about it in terms of it's different from a lot of the stuff that you do in terms of how you approach programming it's in certain ways right and so it's it's this new different that's not really new but it's just different right and so and maybe that's part of why it makes it so it's like you talk about like oh so you know excited about getting into it and stuff like that like what is it that makes it so exciting you should yeah we have a doubleheader tonight so we're so we have to jump right in there just something minor I will have a conversation and maybe we'll have fun and maybe we learned something I always like to crash Mike's workshops at conferences and give him a hard time and give his students a hard time and I always try to dig up dirt on him like hey is he mistreating you how are you guys doing and he is he's mistreating the students but they love him and they're always so happy with him and they're like hugging him at the end of the class but he's picking on them a lot it's a lot of fun he's a goofball but he is a really good teacher okay I jump over something I think maybe we can also talk a little bit the code is open um in general I want to talk about the current state of angular what tools I'm working on some demos and a road map and let me start with the current state of angular angular is if you work in bigger application or in very interactive applications you have a lot of stuff that is going on a lot of behavioral of state that you need to manage in the lot of interactions from different other modules the user or the backend and this is a mess if you look at this picture this is what my code normally looks like when when I start into a new project just do something and don't focus on certain principles and this leads to a lot of footage box and what I did over the time is I merely in generally read fully reactive applications because it's way easier in the display more robust the code is sneak slim and you have realistic effects so I used rxjs to do this in angular there are different reactive programming libraries in JavaScript there is also baking tracing this stuff but there is some different concepts that it is not so easy for me I would say it's not easy to have an observable that is always hot this is for example the difference to bacon and it feels harder to reason about the code so I really appreciate that rxjs is what it is today and what I will use it for is to introduce some organization of processes in events and they will also introduce a good separation of responsibilities is the separation of concerns where do I get my state from how do I change the state and this is basically the world all of these of this conversation adhere to get a good understanding but what's the problem today and maybe should we go so England eyes as we know pretty reactive from out of the box but if you want to write fully reactive applications it's different on their service level we have really cool things like the Rada actually service and other stuff that brings us reactivity on the component level we are a little bit less well-equipped we have the reactive forms and maybe some pipe and this stuff no push but it is in a template layer area and then the template layer where we have only the async pipe not only the instant path and if you ask me the async pipe is pretty boring to use we could do way more with this little thing than we think and what you end up normally the async pipe is fascinating my ticket back anything that is boring it's official the Black Sea is very accustomed to it and you attend this stuff vanities there are some parts missing let's say the reactive chlorine Angra is missing on the component and template level and if this would mean for angular to read his second framework is reactive I understand that we cannot have a fully-featured thing so I started to write my own set of tools to take this and I try to bring applications that have a confused data instead flow into applications that are well more organized and I do this with my set of tools or the set of tools that we as a community it's an open source repository and other people also work on it build and I'm already introduced a safe the time I want to wait from in a confused state to a state where we have a well structured data flow and then I will go one step further we'll take this one with this well structured data flow and implement some stuff that will bring a lot of performance in the end we will have for Less performance in so on full applications and this is pretty pretty amazing libraries of our X angle and [Music] they thought I think single estate and there you go right connections kind of fading out I know I was like is it me is it him Mike you want you might want to turn your camera off because we can still see your maybe we can hear your audio better if your cameras off because I think your your internet might be cutting out a little bit I just want to say it can be confusing to have the same name as the guest he gets to be Mike so we should call our guest Alaska Rooney [Laughter] we can hear you good now you got it I was just backed up a slide and start again Mike you'll be fine okay I pretend you like rain so that the overview of this State Library is an API this really really slim and mirrored you have two layers you have two top layer which history actively and you can connect observables to this state and you can select and stream of values from this state and then you also have the imperative layer combined you have set and gates which you can use imperatively on the top you have the dollar sign and this is the observable as it is the full state so no selected slash just bill as it is and at the bottom you have this hold methods and the hold method is here to hold some side effects that are not changing any state and the air is same as the API also the typing is really really symmetric and easy you can merge in partial of T which is the state you can get the states at the top and you can get out partials of this state tip and this is basically the full API that you can use and now I could switch over to some code and I could start to ask some questions and maybe we can have a discussion so let me first open an example I hope that the coldest valve is Ebru and you can see some lines of code on is it true yeah you can see it perfect solo when we start to use for example in TRX which is a really really great estate management library we have often the problem that we have to somehow connected so let's assume there is my constructor I have a service and this service is mine my state my clover state which is push-based and I somehow need to use this together with some other parts of my application or another good example where we would be this is an example that we always have to call subscribe right because we have the trends to move it in the template but if we cannot directly use the async pipe in a template we have to somehow do some subscription handling with this stuff and the other part where we miss some glue is the input binding and this is basically a method that is not composable I cannot get something reactive out of it and this is a lair where I say okay this new library deserves to be the glue in a class and what I want to do now is to show you how to connect on composable methods like this input binding or streams of values to the components tape by using this library so whenever I call the component I start with the mental model that I try to write down what my component state is in an interface that I can really know what what state what data do I manage and let me bring in a little bit of database know-how maybe you know the term normalized data structure and denormalized data structure an easy explanation for a denominator data structure is a data structure that contains redundant information if you have a list of of my comments and in every common threat also my name this is redundant maybe you should read if just a foreign key to my profile and gets name from there so demobilized means redundant information normalized means non redundant informations in the component state my component model is a normalized data structure in my component view model is stuff that I showed a good example on a few model is I have the list here and maybe I have big number of list items Ekans number here and this is for sure related to that lives here so my number of items is derived from the array and I can say array dot length and then I get the number of items so I don't need to store this value here and may my thesis my normalized data structure this would be my my denormalized data structure that i want to display in the view and this is I guess a very good concept when you start with a component that you think in these two levers Model View model and then you can have a clear understanding what too many in what to derive just as they a small intro of course I have an initial state and now I want to show you how to glue those uncomfortable unreactive things together I will use my mine library it's called onyx angular slave state and this is a state class and here I can move in my component state itself I hope that some of you are not screaming why are you extending the class are you weird no berries you can also move this into the component constructor and injected here you can also put it here and could say I want to inject my Marek spit the only thing that wouldn't would you what you would need to do is you would need to prevent your state here on the local providers this is the reason because my rx T is not a treatment if you think about component state component state can never be a single rep you have stationary component different so what I do is with this state if I register it here or if I extend the glass the component will whatever you give you there's the state will whatever you give him will automatically subscribe to it and then the components get destroyed it will automatically unsubscribe from it and the first really really cool thing that you will realize after that after the demo I don't use the word subscribe or unsubscribe a single time and if the end we will have a fully reactive application if you think is a very big benefit because subscription handling or to be more specific to memory leaks that result from it are painful and very hard to find and you have no chance to redeem it by using it and now I have this state and I can say I initialize my state with my initial state and therefore I can use the method set so I can imperative leaf at the initial component state and this was already a small hint I use this imperative segment but to all of also fix our input bending so for here you can use write your decorators the transit into a stream but maybe you have to do some logic or other stuff so it's it's a very good way to hook into declarative imperative functions on composable functions and how can I use it I can say I use set state but instead of inserting the initial state I can insert an object which has its key refresh value in the value refresh menu here I just use the shortcut and this is the moment where I add or I set the refresh interval to a specific number after this line here is valid this is called a partial update so if you are used to write reducers in in TRX you always have to retrieve the full state and return the full state what I do here is I run partial updates and you just apply the slice that you want to change and the rest is done under the hood it saves a bunch of lines of code and you can also have a clear my hands on managing only one slice at a time and not a full set of actions and everything this is one way to connect uncontrollable methods to the to the component State and the second way where I do my subscriptions in here and manage the store list I can also show how to connect this to the state so I basically copy out those two lines and I delete the rest and I go here I could do is an engine in it but as we are fully reactive we don't care about life status anymore this is the next benefit if you could fully react if you mostly don't make any life cycle hook so what I wanna do is I wanna connect this string here and let me quickly explain this this is from my list service which could be the global trade management in any any library engine exists in TRX whatever and you get a list of items and a method and I turned this server object into a client object here I just pluck out only the ID and the name the rest is data that I don't need to display or process and this is done in this line so this is an observable of items and now I can use the connect method if the connect metal takes me to connect and observable to my state without using subscribe what I can do is I can put in here an observable of partial T an observable that returns some portion of my T is this would be an example of a partial of my state or if I'm lazy I can also name and here of course I have Auto completion and everything is pretty typed I can say under this under this key here in my state connect me this observable write refresh list and if I do this sorry this is the list and all the typing noise effects will be working good I cannot apply the wrong value and now I basically say whenever this observable emits a value I update the list state and whenever the lists the changes I update my template because there is an async papering in TR e the late path or a another reactive thing these are two ways how you can connect different things I also can could connect changes from my template I have an expansion panel here that is changing its state whenever I click it and I can in the same way as I do this here and say okay I want to connect this observable here in this observable is returning me a partial and is partially can be created here whoops I receive a porch value is it open or close and what the return is a value that says at least expanded and then the beam that will value and they return this and now I do update by returning one key value pair or multiple I could also return a set and then you could apply some refreshing cover true here as you can see you are pretty flexible and if you need to do really something specific with the last value of the state and the new value and it can also pass in a callback function you receive the old state you receive the new value and you compose composite and the result of this function is then connected to my key here so you see whatever way you want to connect any observable outside of an uncompetitive method or from your state classes which provide observables directly to this state and if we run the mo how do you get the values out after you correct how do you get the value salt this is a good question let me introduce something that is called VM caller is called view model view model let me write it model because before I also had the concept of a view model right and this view model is already imperative lis implemented in my code I worked with object mutations before and now I can say okay I want to have a reactive view model so what I do know is I can say this but select and then I can either slice out a specific state only the list for example or a read nothing then I get the full state out of it or I can also and now the really cool part comes if I operate directly so my interface is fully is speaking fully to reactive to the directive API and you can do whatever you want here there really good stuff about the select operator and why I it is in replacement for pipe normally read observable dot type here on me right these states don't select you in state management you care about changes so you want to only render distinct values instead management you care about undefined you don't care about undefined values because state could not be said yet right Rx chess is lazy and you don't care if the state is not present yet you don't omit this is also filtered out and if you would subscribe multiple times on this observable all their expensive processes in the middle would get shared and replayed automatically to all the other new subscribers so it takes away the full mental model of how can I share and tweet-tweet this state for stream with other parts of my application I only focus on the behavior and that distinct until changed filter out on the flank here a playlist a hurry play one is done under the hood because you would have to apply it anyway all the time when you select something that used stateful and then you can use this observable in the template and a scroll here and the implement ng-if in Pinner to the hecka trick my observable not async is the end of you bottle and then I can go down here and replace everything that was previously on with manual I thinking of that map where you just only even give us our smart oh no I just was observe it okay so perfect I get rid I want the full state about you see pack script is this free breaking it is kept so you know this is working and now I just use my few model everywhere right here and right here I can get rid of the food stop believe this I can write new model here and here and that's that's it no implant and the cool part of it is VM is not the only place where my state lives isn't that cool if I look in the template I know that everything fits on my view model and maybe I can introduce the rule oh I can also get rid of this in a second this is also implemented and this is also VM so those things are not all reflected into one single object you have you ever seen your single source of truth in the template they are state lives and for the old programmers and are you maybe you remember English yes and there was a time when that was this few model proposal thingy this is a really good example of the same concept so we introduced this view model stuff and we can get rid of a lot of stuff now we can get rid of this one and we could also get rid of this one and instead of using an event emitter for the output I can also just say this dot select and in this case I'm only interested in changes from the list expanded state um it is not to finding a one-liner no event in me to omit something in the corvex just right there but you wanna the hand half is output and pin you're done in the rest of the question on that there on line 118 so by using this luck method there is that only going to fire whenever list expanded changes yes because we have to select operator view model changes yes yes that's true you are right because the Select is taking away the mental model that I treat a state for stream you know already that because you asked me this question if I tweet a stream as this is my state I wanted I don't wanna have all emissions I just wanna receive state changes and I could always use the pipe but then I have corrected on my own and the lake is basically taking away the mental model of these 1/2 estates for stream alright so you don't have to worry about the distinct until that's awesome you can also dig deeply into an object by providing more key value pairs here if you want if you have a fully nested state and you also know that you can have any operator here so I'm pretty sure you can solve your problem by just using rxjs and no special api that is again a different API it'll work for something reactive not really try to stick with our exchange interfaces for the four libraries it isn't that cool so let me stop the sharing quickly that I can see your pictures in your faces so normally we write a decorator to get the imperative stuff like the setter method in the info painting normally we have to subscribe to something and unsubscribe from something I could get rid of all of this there is one thing a piece missing where I could use the word subscribe can you guess would be hell I could use the word subscribe which is not related to state management it's tricky it's a is something that is not related to state management ok at the component level at the component level with the AC you could use the yes you could use the isn't pipe to do the trick but I'm speaking of these background processes or side effects that are not really related to my States for example every 10 seconds I fire an HTTP request and refresh the list this is a background process that the firing and the triggering of the of the HTTP is not stateful but maybe the later on state a chain a state change will then drop in so how can I maintain this thing that fires an HTTP request this is maybe my last quick code example that I show you before we can go to the performance stuff so if you look here you have subscription handling and all the other stuff and if I jump into my solution like you're not sharing your screen anymore why not turned off your screen share so you could see our faces so let me jump in show the last line of code whenever I need food hey while you're doing that Tobias wants to know where he can find your code Mike do you have this on our public repo somewhere that they can see yeah it's our X angular it's a repository in the I do okay and and Hans wrote Hans Hans said you could do all of this with pure rxjs so they can do all of this functionality without the library that you wrote but you're just saving them some work is that right well yes well I save them is I saved them the subscription handling in state four streams in on state four streams I take away the mental model of this thing until change here we play one and filtered undefined with the Select operator you can still as you can see right reactive code what I do here is I merge a button click and then interval of that is ticking every 10 million 10 seconds that is triggering automatically with a tap operator with a side effect the Refresh list method and this is also managed here so you you really read normal or exchange you just don't do the clutter look at this class here that's it if you remember the initial stuff when I when I undo all my changes it is like at least 70 lines of code more with the same result so if you scroll here you have to the subscription handling that they subscribe the unsubscribe their own image if we go back there is not a single lifecycle hook left here so no life cycles no subscription handling no mental model of state management just like having the motor that the interface didn't know what keeps you want to maintain least expanded list whatever so that's what this whole method is is handled inside the hold my thought is subscribing to an observable and this observable is performing a side effect that you can see here and if you want to read really nice and separated cold you can also cut out the side effect now you have only the tick this is not a trigger and we can take the trigger and fire this method here and then you see it trigger is here side effect is here there is no state change related but we still need to do subscription handling and you can do this with the hold method okay so the whole method is I can give an observable when I call the whole method on it it'll handle the subscription to it fire time start it also handle cleaning up the subscription for me like that second are you mean I can say hey when data comes through the subscription when a value comes through the subscription I could take action on that to do some other side and you use it whenever you don't want to maintain state if you if this would return stateful stuff then you take the observable and connect it to your state slice but if it is not related to state management you want to just hold it the subscription and then does their support like how it if there was an error in that subscription right would I be able to write code here to do something on that error for sure you can write number rxjs so you go here and you say oh you can move it in here more specific let me close this line here so this is my stuff let's see there could be an error you could catch it whatever you want it is really plain or it's just what you read there is no but I Prague I don't provide a new way and you API I just take away the clutter that is needed to do state management but how you manage your state is up to you and this is there a really cool thing I don't I don't force you to use a paradigm if you are happy to go with the commando pattern go for it you will end up with way less code and implementing the subscription of stuff on your own if you go for this secure s pattern like stuff that is implemented in in TRX store you can go with that approach implement that pattern I will not interfere with your decision on architecture or whatever and in the end what we do is we we anyway end up with one-liners I barely have situations where I not I'm not able to do whatever I want with a single line of code with this with this set up here they're cool very cool there is only a couple of minutes left question before you do yeah at the onset you mentioned two different libraries you mentioned @rx angular slash state and yes you talk you're doing a lot of talking about the state do you have anything to show about the angular slash time extinct this is what I want to show no because I out of your way perfect sorry so what I wrote is what I also so the same thing here two things at the push pipe and delete directive I implemented in the entire extra posit or II already and I created a separate way more performant implementation of the same tool the pipe interactive that I created for in TRX also for this library and this is the really cool thing and I found a design document this is basically my pic of this core this is the design document of mishko that is talking about anger has changed to take to mental model in a V which is just the design document and will end up somewhere in the future in angular and guess what I have the code running here in this very exemplar and now I want to quickly introduce you to problems and to some some ways of rendering and then we hopefully quickly can talk about what the performance optimization is so when you ran the angular and now I will rush a little bit more than before it is basically done top-down read the complete application ref karstic and then you walk down the tree and then you render the full application and if you use change the texture on push on a specific component you can only rerender it when there is a change so this is already a small performance improvement if you use it everywhere you still have the problem that people forget to put it there and then you end up with this over entering and if you believe you are smart and you put a linking rule to prove this overview everywhere you still have soldiers and soldiers will mess up your performance so are valid things to improve it a little bit but not enough if you ask me so I implemented a the pipe which is similar to the a string type but you can configure it with three different methods with three three different rendering strategies the global strategy which is nearly exactly the same thing that the a stream pipe is doing compact with the big difference but this will also work so unless then you have the local strategy this is kind of what would happen when you call change detection reference detect changes but my my stuff is a little bit more a little bit way more performance and then you have detach and detach is a very special render method that detaches your component from the view whenever you receive a new value it attaches the Tom again renders the state and detaches it again if you think about it if them if the components template is detected from from the component tree of angular not even sewn can interfere and rerender unnecessarily and this is implemented in the push pipe where you can use it like this with the column or in my rx directive and you can use those no sorry I just assumed you knew I thought you were just trying to get through it we are an engineer where everything is a lot okay I created a push pipe and a letter active that we are am i you confused me completely and I confused you but boy we go here this is how you can use it at ons the type in a directive and you can configure it with a strategy with those three strategies that I've talked about the global strategy is going bottom-up top-down as angular is we would do it but it's still over Enders the local strategy is only rendering the very component and nothing else and then there is the detach strategy where I will also get rid of some trace and only render every change when it leaves needed by reattaching and detecting the components template for every change and that sounds scary yes the only problem is you can really only use it if you mark the full path of the of the component tree with this decorator this is the current state we still work on on making it easier but you will use it anyway in those edge cases where you need really the last bit of performance the local data tree itself is bringing incredible performance it will bring you let me quickly jump here instead of 12 right renderings in an exemple that I run here I normally angular runs 12 re-rendering then I did I implemented the principle of coalescing and I coalesced multiple synchronous emissions into one if the in this example I end up with four and then I scoped all those coalescing of the push pipe the letter activity component class together in one scope and then I end up in one thing in rendering where angular nowadays would 212 and this is all that the real real big performance improvement of this template rendering and I F to rush so I demonstrate multiple subscriptions to a to observe a pressing the template and or so static rendering then multiple synchronous emissions of observable and multiple synchronous course of declarative nonreactive course in Brenda you can imagine as calling detects change just with the rapper and even at us it's 12 times in this exemplar and I do it one time the first thing that I implemented is coalescing so if you have a synchronous task synchronous code this is in the first block then you can have a micro task which is a promise this happens in this I block here or you could have a set timeout which is a macro task if this is this block here and what my operator is doing it buffers all the values that happens to chronically in the same browser tick and they will replay only one value whenever the synchronous code is done after the synchronous code and this helped me to get down to having one omission in the component class and one omission in the template in this very very limited example and then I introduced another concept scope coalescing I know it is very very technical in the mist to start directly with this and only talk explain the technical part slowly but time is running so we have two different scopes the scope of the component clouds in the scope of the template and then for every single direct if you use you also have those scopes and then you have again on performant renderings so what I did is I said I find something that I can share between all of them and this is some internal part of the change detector if that is called the context and the context is if you look deeper they like directly related to the a view of heavy and this is the same instance across here and here and with this trick I was able to go down to a single rendering for no matter what you will do and this is what I am really excited about the local strategy the way to start using it in a template with the async pipe or the ledge directive and going down to this one piece here and in the future I will work on a full set of reactive tools I wish if that are if the rx which TRX for and you can basically throw an observable in the template whatever you would need is functionality it is there I ain't the screen sharing I go back and I give the word to you and I'm sorry that I talked all the time and I rushed and we had no time and I didn't share my screen and it was aliens I only wish we had another hours so he'd go through some code I love it in rendering stuff which is really deeply technical and explain a lot about it but I started with the wrong topic follow that cell for sure I have a question then so with that with modules and you're providing your own module for this to provide essential essentially like parallel implementations of those directives is it possible that if you were to become feature parity with common module that we can configure this at the root level of an application to provide your module instead of common module and you use the same in aliens you have you are brilliant five minutes I just need a bit more info on this and I guess I cannot sleep tonight the only issue that I see with that is more change in a signature of the async pipe no I just don't ship the async pipe I call it push pipe no you are really mural anything no I don't change the signature I just add another parameter that German it will work won't breaking change on very cool yeah you can you can use it as a replacement all right I think we have to wrap you guys don't get lost us Bonnie yeah what else we have there's a reason they call me Angie mom you guys have any pics and then we'll wrap it up so panelists anybody have any pics uh right after this you guys stay tuned on the YouTube channel because we have Jeremy l born talk about angular cdk and material it's gonna be very cool was it Mike ELISA and he picked right now or 19 right now my focus is the design document that is implemented in my code it is in your channel you can law there is another piece that you will read later on thanks Mike I like I'm like I just yeah Mike our detail oh yeah no that would make a lot more sense yeah one of those like birds that are like mine mine oh you're like Mike Mike Mike [Laughter] Alex Eagle put out a blog post about the future of Basel and angular I put the link in our chat here that we can share out as well nice it talks about the future of angular and Basel in that relationship there Michael I wanted to know is there like a blog post or just the repos like if people really want to dive into these - this is according to the state management part was her research that had written in 1980 at the end of the nineteen I presented it it was a you just search for reactive components they take link or reactive component state Dana did another component state and now I slowly switch to the template stuff so the next talk that we give on that is only focusing on rendering strategies and these really low level optimizations in the browser and I will do more like that you really can see how picked for display the tree is not only numbers and slides but also in demos this is what I'm working on at the moment and is a small teaser I use the main thread scheduling posts toss API averages the Chrome Canary whatever experimental feature right now in my in my company so just that I'm prepared for the future you know very cool okay all right well Michael H thanks so much for coming I really really appreciate you taking your time and doing that thank you yeah it's a lot of fun thing to me so to give the more content so yes snick I've got this I might boy boy Mike Mike alright we'll see

Channel: AngularAir

Views: 779

Rating: 4.7647057 out of 5

Keywords:

Id: qTOuu-9xKuA

Length: 55min 4sec (3304 seconds)

Published: Wed Jun 10 2020