AngularJS: making a browser a better development platform

0 0

thanks for coming and I'm really so nice to see so many people coming to the to see what the angular is all about and I'm really sorry for not speaking in French but I guess your English is far better than my friend so hey I understand some friends so I mean if you prefer to ask question in French I will try to do my best to understand so thanks for having me here and thanks for the sponsors forgan izing this event so before we start about angular just so you know me um so my name is Pavel kozlovsky and I'm i would kind of put a label on me being like open-source hacker in the sense that i really i really self open source i mean the wolf on the software i think level and also on the human interaction level there's so much energy in the open source so every time I I like certain piece of software i'm trying to get involved in the community and give back a bit on what I'm receiving from all the great developers and this is how my my journey with an ungulate restarted so I I was looking for a library for myself um one of those the MV c or MVP or whatever frameworks in a browser and i was evaluating the usual bunch that was available on the market and uncle are kind of from the very beginning made sense to me i mean that there was solving in this framework mmm that was striking me its simplicity it kind of really from the very beginning made sense so this is how i started to dig deeper into it and the got involved in the community and at one point I got a proposal to write a book about it so it's it's now available and this is in 10 how I got in contact with the with the core development team are at angular and the I'm now part of the angular team trying to help with the development of angularjs and also I'm person behind the angular UI and mostly bootstrap components so trying to get some software written so I think the since its introductory talk iie probably i'm not going to dive into details of angular JS how it works behind the scene or but I what I would like to do here is to encourage you to try it out and the and and try it for two reasons first is that it really tries to make a browser a better place for us as web developers I mean we we managed to write like really wonderful software but the the browser is sometimes really painful and sometimes really painful place to be in so I'm glad tries to solve this problem and another thing about it is that it is really different it's really different compared to the approaches that we had before and the approaches that that exists on the market so i'll try to show how it's different compared to other and so like basic basic facts about wogs it seems to be like a new kid on the block i mean everyone say ok and below it's a new framework it's it's getting popular it's great it is getting the player but it kind of didn't came out of nowhere it was in the active development for more than four years and I think it's only recently kind of started to get get popular so so so it's not like it's new in terms of popularity but in terms of code it's not so new it's an operations project started by Google but it's very open up probably if you go to github and see the number of pull requests that are contributed by the community there's this the huge contribution from the arm from outside of Google so we are saying okay like the angularjs tries to make a browser a button development platform but what it means in practice right i mean and and it's like really funny story about the web development because in the last I don't know 10 or 15 years we moved we did enormous lab in terms of the applications that we are able to deploy on the in a browser like you can see the screenshot of the its life inc it was one of the most popular travelers magazine in 1993 or 1996 i don't remember exactly but this is how the web looked like right i mean 10 years ago it was like the static interlink pages and and so on and then we like jump to to writing full-blown applications here this is the art screenshot from the google docs so i mean if you compare the two that there's just like I mean this huge huge huge huge difference and while it's great for for our users like the people who use those web applications it not necessarily great for us as web developers right because we've got like so much more to do and the other funny part that happened are while this explosion of web application was ah what's happening is that we move from this beautiful declarative HTML that like you know like five year old like child can understand immediately what it's all about right we want to make something stronger and we we give a simple instructions to a browser and we let browser to figure out what to do mmm in terms of rendering right we are giving some hints but ultimately it's a browser that makes makes a decision and then along the along the way we move to something like this of course I mean it's exaggerated right it's the hell awarding in JavaScript lock nowadays no one would like write it like this but this is like even if we use frame also use jQuery or something like this behind the scene this is what happens right like the browser needs to execute this code and the I don't know if you come in you can probably recognize hello world here because it's written Hereward but it's nothing like this very declarative or very decorated fiend so my mental picture when I think about this you know the JavaScript a reference just like this you we need to take on this superhero clothes and then like okay say like okay I will drink this this enormous amount of coffee today and like work on this application and the and it's really amazing what we are what we arrived to do and we were just able to do great great applications but it's painful but then you say like okay why this guy is ranting here you know the web development is good we've got jquery which is which is the most popular the library that is deployed over the web it was around for a few years we know how to use it there are patterns there are books we can write great applications and it's true but when you come to think about it it's just like jQuery was was created to solve the problem of the insane Dom API that we've got right i mean it just like before we couldn't write in the reliable way across browsers web applications so jQuery I think I it is good as I can I can breathe now so so this was it we needed something to make Dom manipulations a bit more normal right but this this is something that should have been done in a browser I mean we should have like a normal API from the very beginning it was solved by the library but it is just like masking and masking the problem in a browsers API I and and the the other thing that the jQuery did it really is so much done focused right i mean it tells you what i would look at those great selectors so we can grab dom element we can we've got all those tools that we can manipulate this dom element but the but the programming model didn't change like compared to the RO javascript we we just like to do very low-level precise instructions i get this down taint this property if there is this event grab another dom element and so on and so forth so while this you know called sympathies batteries still not perfect so so this is where angular Diaz comes and the it was it it isn't like building on top of this jquery or dome minded our programming model but it tries to think like what should we do with a browser so we can actually write our web applications and like not don't get insane in the process of doing so so this is like really another approach which we want to like rethink how how the browser can can be a better place for us and the i like also this quote from a governor which is that like technique of the of the angular project because like at one point there were number of discussions on the on the mailing list on the google plus and so on what is the pattern behind angularjs this is like MVC or m VV p or like some other and and then equals likes it like okay i declare in angular JS being like model view whatever and you know if you need a lot label to put on top of it you can put it like you know you can call it MVC on VV p or whatever but it doesn't doesn't matter i mean it's just like so different you need to try it out to get a few of it so enough of the Orion let's start with examples so one of the most important things in in angular dress is to go back to this very declarative HTML that we had at the beginning and and and have like the framework do a bit of heavy lifting for us so if you see this you know like hello world with in angularjs style which is live here and so on this is actually the whole code for this mini application right so like if you compare it to jquery or the it small is the same amount of code if you compare it to the wrong javascript it's not at all the same amount of code but but the hello world itself starts to look as it as it looked before only that this time it's dynamic so how this magic happens so what you will see a lot are in languages web applications are those little funny attributes and some custom elements and in angularjs were there called directives so what angular JS does is like saying like let's extend the base HTML language to give some dynamic behavior to the 2d to the dome and what is happening here that we are like bootstrapping an application this is the whole thing that is needed to boot up application we can see a syntax that you probably recognize from the other frameworks like handlebars or something like this right i mean we can immediately immediately see that there is a we are outputting name here and the only unfamiliar territory probably is dislike fancy ng model think here and what it does is just like the angularjs whenever anything in the dump changes take me the value from the input and put it in the name variable right and at the same time we've got something else dressing like whenever this variable changes i'll put meat in them so we start to have like a two white connection like every time something interesting changes in the dome we can put it we can we can take some interesting value our from the down and put it in a JavaScript variable and as soon as it's available in JavaScript we can immediately out put it on the screen and like once again there is we don't have to register any down listeners here we don't have to explicitly say you know when this will change please render a template right i mean this is the languages will observe all the modern mutations and we'll do the heavy lifting for us so it is really one of the one of the fundamental differences between traditional on the incline site templates where we've we had like a template we had a set of modern values we've been mixing it together and putting it in a dome and then when we when we saw that some other variables have times we had to repeat the whole process right once again let's intermingle everything together roots put it in Adam here its angular JS will take care of like doing this process are constantly so if you will often hear a this statement that the angularjs is declarative while jquery is imperative and and what it means really is that somehow we need to realize that with jquery we need to enumerate all the little steps that we have to do right it is really super explicit we say like all like when input changes take the value and put it in the in some other element while with angularjs we just give some hints like okay when the and saying like every time there is the change in the input put it in the model and then render the model whenever it changes so what is happening here is that we are truncating a lot of of code that we need to write I mean we just simply well we don't have to write code and this is this is great because I mean this is the work that the framework does for us but it has some other consequences which that then probably there are two that should mention first is that like by giving control over the Dom manipulation we are yeah we are just simply giving up a bit of control so we we we allow angular JS to do the heavy lifting we we take advantage of the machinery but we giving up a bit of control so on you know if you like really if you really want to control your down if you really want to have the every little like attribute change I under your under your control here you need to realize that you are giving up a bit of it so but it has some like positive outcomes so let's do the scary part which is a bit of life coding so we are going to look into like more complete example and I'm going to sit down because it will be different to type otherwise so into Tate sprinkle this is that's super cool to sit on and so what we are going to do is to play with the little like Twitter like example you know like a little box with the with the list of tweets that we can do and so on and so forth and it might be not like the most advanced and appellant on earth but this is what we tend to do every day like right we've got a form that that has some moving parts we've got a list that we need to fill in and so on and so forth so as we said like the to bootstrap and good at this application of course we we need to include the library I'm using the latest version here so the the what you need to do that that like I'm included animation support which we are going to see are in a sec but the core of the angularjs library is just one file I think it's below 70 k our minified and gzipped so so this is all you need to just include the 11 file and you've got all the angular JS magic so after including the file it does say ng up and these boots tops are the the angular mercenary the i'm not going to do going to into the details of angular DS models but in essence you can declare a module and put some controllers on it and other stuff which we are going to so we started the angular here nothing still happening let's make this um let's make this form life so there are even in the simple form dreadlocks few moving parts we've got those buttons that means to get the proper state they need to get enabled disabled we need to see like how many are remaining tweets are here and so on so we saw already the ng model attribute that also has to do to a data binding between the content of the DOM and eat and some and some model so she works so we can see that immediately we've got our phone life so what i'm doing here is that I'm binding the content of the text area to the to the variable and this variable lives in angularjs scope so scope is basically a map where angular keeps the data on to be exposed to a template so just like a you know like everything that is on the scope is available to a template and the the other thing that you can probably immediately see when we look at this example we've got this funny scope but other than this we are manipulating raw JavaScript objects we are dealing with the objects or arise but we are not calling any specific API s2 to make the Refresh happen we can really interact with the normal JavaScript object so then what happens on this model we've got a tweet controller so controller in angularjs has nothing to do to in control nothing to do with controllers in MVC so it doesn't in does it control anything and it's probably name is a bit misleading but the role of the controller is to initialize the scope so like we've got this map that is called scope that gets Fink exposed to a template and control it is there just to do initialization of this map this is only it just doesn't control anything it just the r initializes things so what we want to initialize that we've got the this initial tweet we've got the list of tweets that we are going to that is going to keep all that switch that we tweet and there are some some methods there once again those methods that we've got a pure JavaScript there is no specific angular JS api's to be called magic happens without a specific goals so let's use this controller so we've got methods and the controller controller so what's going on here we've got this number here that should show us the remaining twitch remaining characters let's make it life pretty simple we can mean- tweet text link voila so what you can see here is that like we we make a piece of screen on being driven by a model I mean we've got 11 texts that we that we keep in a variable but we start to drive our other parts of the screen from this model and and this is also one of the center center things in in our garages that the model is the source of truth I mean we really did the angular JS where you're thinking someone is destroying my presentation ok cool it's fine I didn't ask is it like too small to be or can you see it or ok because otherwise i would be talking to myself so like the we've got this model thing and it starts to drive other elements of the screen so we've got one source of truth the way of thinking is like let's take the model let's give some hints to one good address in forms of directives and let it do the heavy lifting we just like don't do any Dom manipulation here so what what other things are here for example we've got this button that should be only enabled when there is a text right there's no point on enabling it otherwise so we've got and the another directive called ended disabled and let's say we disable this button if we don't have any on text right Sorry Sorry Sorry ha i was checking know it was real time so you see so like once again this tweet this button and disabled we should disable this one if the length is not not valid so we've got this method has valid length but wallah so it's the one of the things that i wanted to to show here is that once again we've got this model thing and we drive different elements from the model but the in jquery approach what you would do is like you would have a listener on the detained here and you would say like every time something changes here go to this button change its property go to this button traded property go to this element changes property and so on and so forth we've got like this one central method that kind of you know the coordinate like all the pieces of the screen and here you got like very localized I mean if I want to work on this button right now I'm focusing only on this button and driving it from the model so let's make it more lively let's add some twit so we can use the another directly called ng-click which is basically every time you click we call the add method and this add method is pretty simple you'll take a existing tweet and you push it in on top of the our Twitter right once again pure JavaScript nothing nothing special here nothing happens right because we don't have anything to display so let's try to display it which no perfect so once again manipulating model is as easy as as interacting with normal JavaScript objects so let's let's display the list of tweets so we've got this structure we've got for each tweet we've got a lie and we want to display the content of the list and it's pretty simple with another directory called ng-repeat which is basically saying take a collection and repeat this Dom element repeat this li plus its children for each item in a collection so 2 E yeah there is something to eat in tweets so when we start to we don't have content yet but we are going to fix it pretty soon tweet text camera it's life reload that is not always cooperating perfect so so this is like one of the typical examples that we do you know the least are we can okay we cannot delete as well and you click you already know this one you can say remove remove the street oh and it works as well perfect so as you can see are we given up the the control over Dom here to angular GS we just manipulate the model and we give some hints in forms of directives and let angular geez they figure out the things now once again the control freaks will say like okay but it's scary because like I don't know what the machinery is doing I don't know if it's going to be performant enough I don't know if it's going to render what I want and so on and so on and it's true because we are giving up control for the performance we are probably having had going to have a question about it so on i'm going to say nothing for now but giving up control to a machine eric has some other positive effects for example you can declaratively ask the machinery to do more for example I you can make the the least animated right by just adding another class on an alloy element you the so what angular is going to do here it's saying like okay this is this animate which class here which is nothing more than CSS transitions so but what angular JS will do is to select ok now I'm adding an item to a list so I'm going to add appropriate classes at the right time and remove appropriate CSS classes at the right time to make the animations work and obviously it is possible to do it in a satyr declarative way because we've got the machinery that does the Dom rendering you could do it by hand but you have to do it by hand right i mean so this is the so what else well I mean let's see a bit of filtering on the list which should be pretty once again ng model you know it already we want to have a search term and you want to filter the list with the search term and it's pretty easy because we can use something called filter in and god yes so this pipe is like filtering and we are going to say like you know like give me the least that only has those search terms inside so EA be being CAS and then you know you can filter it and so on and with their animations working so so it really I mean it doesn't take much code to have a like a small mini application that is that is functioning here okay so let's switch back so i hope that sorry before so i hope that i managed to convince you that well at least hope managed to convince you that with this declarative approach we can dramatically reduce the amount of code that we need to write and we also take advantage of the machinery to do fancy stuff like animations and this is this is part of angularjs that people see immediately by playing with the with the examples on the home page like this is kind of already mind-blowing okay I can like work with the road JavaScript I can develop applications pretty quickly and it's all good but the unconscious has some more hidden treasures and the the probably the next big thing that people are seeing is that you can use it built in HTML compiler we call it HTML compiler but but in the essence you can create your own attributes and your own HTML elements and give them behavior I hope it's an announcement of the new version of angular disease because it gave me time to drink some water so so you saw this built-in a built-in directives like Angie and repeat and remodel and so on and so forth but actually we can create our own are elements and give them behavior and we've got at our disposal the same api's as the as the color of the framework so everything that the core developers of the family could do in terms of special elements we can do as well we've got the same API nothing we don't have like less power we've got actually the same power and this is absolutely great because we can create our own elements give them whatever name that we understand and whatever meaning we can put on this element and we can make it life we can adding elements you can even bring back the ones that were removed I don't suggest that you should do it in terms of blink but it is possible so what we can do with those custom elements there and there are really different categories of those directives that we can and that you can create and there are multiple usages and the the one pretty obvious is that you can create your own wording you can create your own vocabulary you can you can create your own dictionary on of terms that make sense to you and your application so even for the simple things like bootstrap alerts that you know create HTML like this you can shrink it a little bit so maybe you are not saving much of HTML here but at least you are creating your own your own thing here on alert I mean I know that I've got I've got an alert it has a type I can use it anywhere in the web application and there are well and this salad was like pretty simple we define that there is a bit of behavior here but okay well this is not much but actually you can build more complex directives are or create like reusable components and here is the example of pagination that probably we can that we are going to use in multiple places in web applications so what we gain by are encapsulated this piece of HTML into a directive is that once again we give it our name our friendly name we remove HTML a duplication right because like this is this is not a rocket science I mean we can do it in the road angularjs this is this is pretty simple to do but uh even though you have to repeat it all the time you have to remember to add the appropriate class and so on and so forth so it's so much more convenient to just select ok here's the pagination this is the current page on which I want to be it it has this two-way data binding so every time the current faint changes you will have your UI update it and every every time you click on the page number you will have your model updated and so on and so forth but the other funny thing is that you can write those directives or those mini widgets in the exact same way as we written a mini application which means we can I'm going to show you a template for an encoding the template for this directive if I can find it the dig dig dig dig with so pagination so this is the definition of the directive I don't want to scare you with this because there is a bit of magic but I hear the of the magic how we declared directives but if you scroll down to the to the meat of this of this directive to the to the to the core of it there is not much difference are as compared to the application that we've been writing we've got like a scope we manipulate a model on the scope and later on we can have a template for this pagination which once again this is just accept encapsulated the demarc up so the funny thing we can do is to completely separate the the behavior of this of this directive with the template and as soon as we do so we can have a template for bootstrap CSS we can have a the template for foundation our CSS and so on and so forth so we can really decouple a bit of applications from the low-level HTML and CSS and obviously we can go on and create even more complex directives like this you know this is once again ability for us to work on the higher level like create our own vocabulary encapsulate it and and somehow enforce consistency because like in indy in the directives like accordion there are so many classes that you have to take care of like the you have to make sure that animations i work and so and so on so if you have to repeat it all over the place where you want to have accordion it's certainly possible i mean it's not magic i'm new you can do it with without any directives but you have to repeat yourself risking all the bad things that happen when we duplicate the code so we've been through two-way data-binding the dislike the magic that powers and Gladius we've been through directives that for me are the one of the coolest part of the framework but the unblurred is it's not only about the rendering engine it's really a complete framework so when you include this angular JS like 70k file you are not only getting the the rendering engine but we are getting a complete framework which is sufficient to write a rather complex web applications and the you will find in the core of the framework all the libraries the Adicts abstraction all the utilities really everything that that you might need and while you dig into this utilities or the way we use them you probably going to notice pretty quickly something that is not so common yet in javascript but pretty common in other languages which is dependency injection so here there is an example of the users controller is like you know kind of abstract we are acquiring the the collection of user through addicts but the interesting part is not declaring but actually how you are getting access to the utilities that you are going to use in your controller so here we are to sing like okay in this function I need to sculpt yet because I need to initialize it I need HTTP i need log and we don't care from where it's coming and it's coming from angularjs because it's getting to be are injected and dependency injection is the pattern that been around for quite some time but it has like two pretty powerful consequences the first one is that you can easily swap dependencies for your own so even if like HD even if I'm gorgeous is coming with his own log implementation that by default is going to log all the error messages to a console you can swap it to something that is going to send errors to it to your server for example and and this is pretty much easy when you've got the similac dependency injection but swapping dependencies come very handy when you need testing are your JavaScript code and the unit testing is very central think in angularjs like they it's not only that the framework is a very well tested I mean the derelict I think at this point there are more than 2,000 like tests executed for on each build in several browsers but so like the the unconscious developers went into the and and made sure that the framework is table that it's well tested but it's all not only this it's also are making sure that the code that you write against the framework is the stable and and its really when you see things like HTTP obviously when you are doing unittest you want to write them fast right especially if we are doing test-driven development so if you want to go fast obviously we don't want to do xhr requests during the unit test so what we can do with dependency injection is to swap this HTTP think for for a mocha implementation that doesn't do real xhr request but instead are using mock data outside so those are the things that I would like you to take home from from this presentation so the first is like really give an Gladius a try if you haven't done so already because it gives you this two-way data binding with automatic refresh which dramatically reduces the amount of code you write and at the same time enables things like under clarity fanimation did this this machinery that is doing rendering for you can actually and do some cool stuff behind the scene then you can create your own directives and by doing so you can create your own vocabulary you can create higher level components and once again like not only write less JavaScript code but also like removed duplication in HTML language is it's not only about the rendering engine is the it's really the full framework to can take advantage of today but you need to be prepared that for the thing for the fact that angularjs is different and probably people who who've been hanging out in an angular JS communities in this picture so you need to be prepared to go through these phases of you know low it's called versus like oh my god it's just like how this be so horribly wrong and and it really happens I mean it's just like it happened to me in heaven too many people that I've been speaking to so you know just be be prepared but at the same time it's it's really a fun piece of technology to work with and like so many times I I mean I've been working with this beast for like almost three years now and I still got those moments are like oh my god it's so simple I mean it's just like really it's really cool a bits and pieces so obviously I'm glad you guess ork with the documentation references to the reference the github project and so on I've been using examples from the angular UI bootstrap which is kind of companion you I companion sweet are one gorgeous a fall any resources I can only recommend you my book plus Nova sorry nay it actually the there is excellent called site called egghead io which has short videos recorded by John linquist which is the absolute master when it comes to comes to web storm so you can not only learn I'll go edgy as well actually how proficient one can get with the ID it's pretty amazing and the and as soon as you start there is like really great community are around angularjs I mean I'm so amazed how have it explode for example on Stack Overflow we've got like questions that get transferred in in a matter of minutes and it does pretty crazy they're also like some folks that are hanging out on the on the I years eternal that they seem to be there like every every time like you know like night and day answering the questions before you can ask them and like you know like you finish us but you don't finish the sentence and they've got an answer so just like pretty pretty amazing community behind and this is it what I've prepared we've got still 10 minutes maybe even 12 for the for the questions so I would be happy to answer okay so now it great intro now so it has certain performance characteristics like it for me it kind of like this topic because like people tend towards the question like is it performant and and this is the questions you this type of question you you can't like answer you can say like yes or no I mean and it doesn't mean anything right so the you always have to measure and like you know on your browser on your environment on your application and so on this is the first thing that there's no no absolute performance like holy holy grail then definitely it has certain performance characteristic and it is just the kind of performance sensitive part is this magic that figures out which which dom elements should be repainted and this and this figuring out magic is directly proportional to the number of bindings or number of like the the moving parts on the on the screen so there were some to actually do the evaluation of the all those bindings of all the model changes we can actually compare are quite a significant number of those even on the low end browsers and apparently up to like 2000 plug bindings on a page it is not not disabled so like a browsers can say oh ok I compare this model to that model this changes didn't change I need to refine this I need to find it because this is what we can notice on how lucky I am typing your screen something I think a model value and then angular distance to figure out which parts of the screen needs to European so we need to compare what has turned and what it influence on the screen so it has certain performance characteristics and those performance characteristic are directly linked to the number of findings yet that you've got on a page so anything below 2000 should be not not disabled then 2000 seems to be okay can we can be spot 2014 parts on a screen writer needs so the official like the messages like the Unger jist works with jquery so I mean you have to include jquery before and then angular JS will start to use its to do Dom manipulation instead of like built-in jquery light which is kind of you know like mini mini version of jQuery so this is what you see in ER in the official languages the documentation ends true then I guess you are talking about the widget so I guess about jQuery UI or like one of the other custom widgets that was written in jQuery that is doing Dom manipulation and yeah yeah so so you can make them so yeah this is like the one of the popular quests I guess on the stack over fall back one sec okay I've created my dom elements with those fancy attributes like you know when to click or whatever I've dumped them in the dominant doesn't work so actually it won't work because language doesn't know anything they didn't like observe the dose Dom elements so you can ah but there is actually service built-in service called compile so you say like I compile me this that's why we're talking about the HTML compiler just compile me this piece of the DOM and then I'll go say okay hey I know I know what it is but then really we need to be careful because like sometimes those jQuery plugins are going to create dom dom elements when when it's live so the wrapping I mean there are certain things that we need to be aware of while rapping existing jQuery jQuery plugins it's certainly possible but sometimes requires a bit a bit of working on the edges somehow I mean we you know like if jquery is creating certain developments we need to make sure that they are compiled and the when it's throwing events when we need to know that anger is aware of those and so on so it is certainly possible to wrap a jquery into directives but it it requires a bit of a bit of work on the mobile browsers or likely or d so so what is the so i think the the once again official story about the well official and through the story about the browser support is that i was mentioning those like typing tests that are that i ran in on it attacking and the unconscious is continuously tested around like the with the ranch of like this web browsers so like everything starting from IE I to i-10 I don't know the 11 is already tested as well so all the most one so I'm measuring IE because I guess this is the most sensitive part the all the other modern browsers also part of the of the continuous test there are guys working on putting also mobile browsers in a test like through sauce labs so so this is what what is executed on it commits and like guaranteed that like you know that all the tests are passing and they and nothing is broken then for the exotic stuff I did they were like I don't know what why but the at one point languages was really popular on the in kind of embedded devices like people were doing applications in PlayStation and so on so yeah it works like pretty well across the range of browsers but then there are probably there at their browsers or like the things that you can't work but like I i I'm not kind of aware of the of the you know specifics of each and every browser so that the ones that are part of the continuous testing are guaranteed to work bonus one more question so I mean II know it's not a direct call to use UI rotor so I don't know if everyone heard the questions of the the question was like the in 1.2 you can start to see the trend of breaking up the framework into sub files so we like certain parts are getting extracted so at the beginning there was like the resource that was extracted and the story continues like the routing get extracted from from the car and and this is on one hand to enable things like you I Reuters to to coexist peacefully so then if people are not using the built-in routing they can just take you I router and like not duplicate the call but it's just done general trend that that is going to continue what breaking apart the framework and making it more modular so you can only take pieces the that you really need in in your application I don't know if you've got time for one more butta whichever as soon as all the developers agree okay thank you very much thanks for coming