 Okay, so I know talks in the afternoon are a little difficult. So let's do something fun. Okay. I want all of you to stand up Just kidding How many of you think it's annoying, you know when you attend these workshops and the facilitator comes in after lunch and says Makes you stand up and do these really silly and annoying things. Yeah. Yeah Don't worry. I'm not gonna let you guys do that so Yeah, you're talking about angular to and how to make it lean and fast Some of the topics that you're covering Probably just one is actually specific to angular the rest of them are universal and gentle and you can apply them to any framework or any application that you're building and No, you do not need to know angular one or angular two or anything else to follow the talk All you need to do is just remember a couple of those keywords or jargon I'm going to throw around and you can Google your way through and find a way out. Yeah so Angle two was released yesterday. Yeah, finally, right great great and I'm not going to beat around the bush. I'm here to Garner some love for angular. So, obviously, I think we all know the angular Hasn't seen the best of times off late and things have been very good. But now that angle is finally released Let's put all of that aside and let's try and enjoy the amount of great work that the code team has put in So I'm really hoping that after this, you know, people kind of get interested in angular A lot of people start exploring it playing around with it and maybe some of you also start falling in love with it Right. Yeah. So so what happened was after my last talk at meta refresh I finished my talk and I just walking around one of my colleagues walked in and he said hey great talk But, you know, there's a lot more entertaining so I'm trying to make my talk a little entertaining this time and That explains that give out here and probably a few more that you're going to see Okay, so first when you talk about angular the first thing that pops up. Oh my god, you change so much I don't even recognize you right Yeah, so So there's a reason to that Back in the days when you made single page applications and then anglers primarily used to do those things Life was very easy. The expectation of a spa was very very basic Get the data from the server Render it give me a client's experience I'm happy with that and I'm okay to wait a few additional seconds here and there But I just want to enjoy that client's experience So that was what spas were meant to do but since then things have changed a lot, right? Concepts have changed so one of the things that angular really sold on was this called thing called data to a data binding Angler with this to a data binding everybody's excited about it a lot of other frameworks did that but as you moved along people figured out Okay, that's probably not the right way to do it and a lot of concepts came in paradigms changed toolings changed so There was a time and these were the standard tools that you would work on most of us would use the same tools But now that's drastically changed a whole bunch of tools have come into place a lot of libraries a lot of frameworks in and not only that You have multiple options that do the same job for you, right? And what's also changed is this The attention span of the average human has dropped below that of a goldfish So what that means now is an average attention span this study was done in 2013 When it says a human being can stay focused for over eight seconds. It's about three years now So probably that number has dropped and what that means for us is no It's not that we have got eight seconds over five seconds for us to load up our application What it actually means is that within that five seconds or eight seconds You need to get an application loaded let the user click around interact with your app and kind of read of the content and Get interested in your app so that he's coming here She's committing to spend the rest of the time on the app, right? So that's a lot of time that is there and that really requires us to rethink the way things had been done before and the entire focus is now is on performance and speed, right and Obviously what the angle to realize at that point of time was I'm taking taking to account the new landscape That's the new tells that are available and keeping speed and performance you are the best way to do it is write the library from the ground up, right and Just trying to imagine that for a library that has been so popular Which is so so been used across so many places for somebody to come on there and say hey We're going to write this from scratch requires a lot of courage and I think we should try and appreciate that So that's great The next question now what's taking so long? It's been two years guys. So what's taking so long? So for this I have a nice small funny clip actually from a talk by Shair as neck He gives talking NG con for 2016 so he's trying to figure out trying to predict when angular 2 is going to be released and also Time well up on why it's taking so long. So just have a look So even he couldn't predict the future or when is the release date so We were left with only one choice to try and figure out when it will get released ourselves Try to assess the number of features and by that the year of the release. So Let's go back to to 2014 to energy Europe When the first announced the development of angular 2 What are these new ingredients in angular 2? We're gonna talk about mobile We'll talk about performance Okay, let's see. So we have where we're talking about Mobile, okay, so Okay, and we're talking about performance and it should be like scale Okay, so we're talking about like, I don't know one year of development And it should be done by 2015 probably right, but then came 2015 There's a couple things that we think we can do to actually push our abilities even further Let's talk about server side wait what So we have done a lot of things in England to to make it possible to run things on a server This is a much more generic framework. It is very high priority for us to have lazy loading. It's an internationalization Since energy comp we actually didn't know that we were going to do this kind of exciting when fun things like that happen Exciting or shall I say panic? Yeah, so Guys just released the framework already, okay enough with the with the feature look at all this feature, okay I we're talking about like like I don't know like Another year of development and we just want to just release the framework and and leave it with these features Okay, and then add more afterwards. So we'll be done by 2016 and that's it. Okay, okay Okay Is that we're building a command line interface angle of CLI material design with component rather observables You can do a functional reactive programming who removed the framework itself into the web worker finding an XML template With data to create a native UI component view so yeah, so that was it and I'm sure a lot of you guys are thinking, you know, that's the fundamental problem with angular They're trying to do two minute things at the same time You should not do that you should probably just focus on one single thing and do it right a lot of other libraries are doing that Right, a lot of people are doing that and at some point of time, even I thought that's probably the way to go But if you look at it a job as engineers We need to build end-to-end solutions for our customers and clients, right? And the way we do that nowadays is we pick up these libraries that do that one single great thing Put them all together and build an entire solution Most of the time that works Many a times it probably does not work. It starts off great But then as you go somewhere midway or towards the end you start seeing a bit of a friction between these libraries and you start Seeing things fall apart and that's where angle is trying to differentiate itself Angle is trying to make a life easy as a developer. It's time to give you a whole bunch of tools libraries and Entire platform where you can build end-to-end solutions for your clients and that's essentially what This is so your angle to platform has kind of evolved from a framework To a platform and the way it works is like this. So you got angular to you got solutions for mobile you got server-side rendering you got components that can use material design and You got a whole bunch of productivity tools on top of it You have something called the angular CLI a command line interface that just simplifies your Your workflows the development workflows. You've got very tight integrations with ID and type script Yeah, so a point on that right a lot of people are very hesitant to get on angular because oh, it's built on type script I don't want to learn another programming language. So for one angular is not you don't need to know type script to write angular code You can add angular in JavaScript, but the point aside Get over your stubbornness and move on to type script. It's a beautiful thing end of the day It is not in your language. It is just ES 2015 with a couple of your initial features that are there But the productivity that you'd get as an individual and as a team is significant So just get on to type script and you'll really start seeing the benefits of that And there are a couple of other things like Audrey which allow you to do debugging of your angular apps and stuff So how you said that is angular to really fast So a couple of numbers from the angular team So I'm going to says that the angle beta was about two and a half times faster than the angle one and about 4.2 times faster on reloads But by now it's reached final state. It's five times faster than angular one So that's really fast and how are they trying to do that a couple of things the first thing is change detection So if you remember an angular one the change detection used to be more of a cyclic in nature You know where your parent updates a child child goes back and updates your parents I'll can update something else one that if you can update something and so the change detective kind of go into a cycle But now with angular two It's a tree So change detection just goes all the way down and it's very fast Second thing default lazy loading of your routes. So this is something that is very very newly come in It used to be as an optional feature About a few releases back But now what angular two does is it looks through your routes and looking at a route You just lazy loads the components that are immediately required. So that significantly improves your first time bites and Finally a OT you're probably going to hear this term a lot often if you're going to be interacting with angular AOT stands for ahead of time compilation And what it does is it takes your angular code Converts it into VM friendly code and helps to reduce the bundle size and even load things faster You're going to spend a lot of a bit of a time looking at this later And there's also something called a tree sake which we'll just look at so uh So you're quite excited about all these new things that angular is coming out right and we want to see how you can play with that So be in a bunch of guys together started off trying to build up an app Called the my india report card. So what the my india report card does is it goes and hits the indian government's open data website Data.go.in and pulls up a bunch of apis. So we've got apis regard to the attendance of a parliamentarians the quality of the water Number of accidents in cities and stuff like that. We decided and build a dashboard out of it So let me quickly show you what we have so far It's still a work in progress Oh Okay, sorry. I'm just going to need to switch to mirroring again refresh this So this is the my india app. It's built on angular cli uses webpack for bundling and uses Back in web services from the indian government website And this is a data of the attendance of a parliamentarians for the loaq server 15 session Interesting you can do fun stuff. So you see a lot of people You barely have a lot of guys who got 100 attendance, which is good But you also have some interesting names at the bottom who have zero attendance Do you see any names around? Yeah, any prominent names that you can come across? There's one Not going to name that so that's so that's the data of the parliamentarians crimes in states So this is a graph that generates data of the number of accidents So these are all data that the indian government is collecting in the background and makes it available to us as open apis So that's the number of crimes in cities Crime against women actually and you kind of realize that with the pradesh mark takes a lead out there And the age group of people between 18 to 30 is like the highest of there And then you have other states falling behind And what's interesting is like something like a state like maharashtra you have mail above 60 years, I guess at 60 years with significant crime rates. So that's something that you should worry Accidents in cities so The number of accidents that are happening around Obviously, I think deli takes the lead out there And then you have chen chen I coming in second But the good thing that you notice is the number of accidents or the fatalities is that that's dropping drastically So things are improving for india. We also had actually another card That says the number of fatal accidents with regard to the type of vehicle So that again motorcycles had the maximum number of fatalities But we also had case of two interesting cases where there were two accidents by animal drawn cuts So there were two fatalities by animal drawn cuts That's another thing and Finally some data on river. So that's the water quality of the ganga measured across different data points We're hoping to put this into a line graph We'll probably do that But it checks the temperature the maximum temperature the minimum temperature the ph values across the various points So there's a lot of data out there There's some very interesting data sources that are available out there If you're interested in data sciences, do check it out and play with that. So anyway, that's the app that you've been working with and Getting back to what you're doing So the first bundles that we did out, that's the number that came out with So it was about 2.9 mb and the paints were about 4.5 seconds. So this is total. So this is not a full wi-fi I think it's a total I believe it started about 1 mbps or 3g. I'm not really sure But that's a total connection. That's so so the first time you built an app in angular 2 These are the numbers that we came in and then we went about trying to see how we can improve the performance of that So the first thing that you would do with an angular app And the latest thing that is called the ahead of time compilation or the aot, right? This has been the most crucial feature of angular 2. It has been in the works for a very very long time And I also think it's probably one of the most complex pieces that you know, it has taken time for them to crack But now that it's done, it's a really awesome thing. And what exactly is aot? Currently most of the apps that we built angular angular one or even angular 2x by default What they do is they do something called a just a time compilation or a g it that you call us And the way it works is so you have obviously two modes that you do a development and then you deploy your app So you'd deploy a write a code in type script You would compile it using the type script compiler And then you'd bundle it many fire it and then you deploy it onto the server And then the end user he or she would consume that app the bundles would download your angular bootstrap The compiler would run and then you render the app, right? So that's how it works And most of the techniques that people have been doing to try and improve performance Has been trying to see how much we can reduce time in any of these steps So can I reduce the type of bootstrapping? Can I reduce the time for the compilation and stuff like that? Or that's fine, but they're all giving you very incremental benefits The angry thing thought of doing something different. They said Why don't we just move the entire compiling thing from the render time onto the development time? And that's how the aot came into picture. So the error of time compilation The compilation actually happens at the time of development So in this mode, you do a development in TypeScript You run the ngc compiler to compile your application And what the ngc does is it takes your angular templates, takes your html or css And bundles them all into a type script file, which eventually gets converted into a vm-friendly JavaScript code, which is then minify and bundle and send it to your clients And when the users download the app, you'll realize an entire step is gone missing for them They download the app, angular bootstraps, and start sending right away Because there's no compilation So that's a significant benefit that you're all going to get now thanks to the aot A couple of things that aot does in the background is So when you have a components file, I'm sure everybody knows by now that Angular 2 is a string of components That everything is a component So you take a component file and when you run the ngc compiler, it converts into two files So you have something called the ngfactory, which is the compilation of the angular component, the html, the css All of them bundled together as a TypeScript file And you also have the component.metadata.json, which is information that Angular needs for the bootstrapping part This is how the files will look like You just need to worry about the top left one because that's a code that you write The stuff that you have below the ngfactory and the metadata files, they're all automatically generated by the Compilers You can just look at that. So I think it's somewhere like you write 20 lines of code and the compiler runs about 110 lines of code for you The way you bootstrap is also a little different. So when you do a just-in-time compile You would bootstrap using the bundle which says platform browser dynamic because that has the bundler along with that But when you do an ahead-of-time compiler, you use a different bundle and we just says platform browser So the entire compiler module is moved out of that and what I've heard is the compiler the code to compile it In real time was closer about 50 percent of the entire bundle size So that's the reason you get the majority of the benefits So when we did the couple of aot's so these are the numbers that we got at So we moved we moved the bundle size down from about 2.9 mb. It came down to about one 1.5 mb About 54 percent reduction in the bundle size And in terms of first paints we got an improvement about 67 percent So it was taking us about four seconds or 4.5 seconds We brought it down to about 1.5 seconds So that's a significant improvement. I think you're pretty happy with that Once it on your aot the next step that you'd usually want to do is something called a tree shake Right and now angular recommends two bundles that you can work with one is called roll up And there have also been experiments where you could do it using the google closure compiler And we were actually struggling to get this working. It didn't quite work for us And uh, but then there were some other experts that got it done And they they said that they were able to get bundle sizes down to about two and a half times of what the original was And I was just sitting out here and one of my colleagues wish was probably sitting somewhere out here He just came in and there he sits So he just came in and said he managed to get that whole tree shake working and got a g zipped And this is what we managed to do. I'm going to go and verify that by the way, but uh, This is what happened. So a bundle size moved from about 2.9 mb to about 261 k Put all of them together So that's what you can do with aot's and your tree shakes And jesus So that's aot for you right and universal rendering there have enough talks about universal rendering I'm not going to touch upon the need to do it and why you should do that I'm going to talk about how angular is helping you out with that angle So universal learning is obviously about rendering the file on the server and transferring the state onto the client side In angular you do that using the angular universal which is primarily a node based application You can do that using nodes you run a service on the node But you can also do that in asp.net and there have been talks about doing it in other frameworks like java And in fact, you can be a part of some engagement with drupal where we're trying to run angular within the drupal big templates So the way universal rendering would work is uh, you have your application layer in which your application runs And you have the rendering layer and now since angular 2 is decoupled you can render it specifically To whatever area that you want to run it on so you could run rendering on the node dom server which runs it on the node server You can run it on the dom the road Dom renderer, which will run it for your browser And you also have an option of running it on things like the web worker or typescript and stuff like that So that opens up a whole area of opportunity for you Anybody heard of the uncanny valley Of a gap in server and yeah, there you go. So this was a tweet which paul lewis tweeted a couple of months back He said the problem with server side rendered apps or hydrated apps or whatever term that you call them as Is this thing called the uncanny valley The uncanny valley is where in your server side app your first view is rendered from the server It comes in people are able to see that but a client's application hasn't loaded in so when I try to click on or do something I'm lost So that's the uncanny valley that he was referring to and he was saying frameworks should try and solve that particular problem He had a different approach to that and angular universal has a slightly different approach to that They do it something they do do something called the preboot So what is preboot? So preboot is a small javascript library Kind of injects itself into the head of the server side html file And what it does is once your server side html has loaded in it takes over It starts recording all the actions that you have been doing And then when the client said loads in it goes and plays them back for you And that's the technique that is trying to use to solve the problem of the uncanny valley I have an example of this. Let me see if I can show that to you Let's start off my webpack So this is an example from a demo from what patek stapleton showed up in ng con So patek stapleton is one of the core contributors to the angular universal app. He's a maintainer for the app Okay So a small simple example Once I can start I'm just going to try and close it and start again. Sorry I'll give it one last try and if not I'm going to move forward and try and see if I can Get back to this later Yeah, there you go So you'll just see the switching between server side to client side So that's a four second timeout that I've set in for the pre boot to for the angular bootstrap client side to kick in Right. So if you refresh the page It loads the server side And then after once the client said loads in it loads the client and that's what you see that So what is this uncanny valley? The uncanny valley is when I start and I type something into the text box And once the client takes over It's all gone, right? So the user's like lost what happened stuff like that So that's where pre boot comes in and the way pre boot would work is it's a small flag that I would set In my server side ended code It's set to false right now. I'm just going to set it to true Restart my server Have you there yet? So let's try now refresh Server side I type something Wait for the client side to take over Hopefully it still stays It still stays and I've just relayed out the message from the Bundle that's recording all the action So the bundle has recorded all my keys presses and it just lays out So that's how pre boot is trying to help solve the problem of the uncanny valley And I think that's something good about angular universal Okay, so that was the uncanny valley That's the site that you can go and learn more about the universal application As access to github we can play with that Next topic web workers So I think everybody knows web workers are this really cool thing and they do a fantastic job with our stuff But the challenge has always been it's not very easy to work with And I think it's it's true to be honest also with angular But the angular team is trying to think about some pretty ambitious Goals of trying to run the entire angular code in a web worker and then just run to the front end ui is on the front end So these are a couple of still experimental level thoughts that are being pushed around But this is where you're probably going to look at see how you can run angular to in a web worker You have so essentially is divided into two parts that you have the browser thread or the main thread And you have a service worker thread that's running separately So you have an angular application and the you know the view part or the front end part of it more ended on the The browser and the angular the cp intensive part of that That's all running on the angular the web worker thread and they're using something called the client message Broker to do the communication between both of them because web workers cannot directly talk to the DOM You'd use something like a message worker to start a relay events back and forth So that's an example from there and I have a demo of trying to show you why web workers should be Why they are so important or why it matters? Again, we need to run a couple of servers So we got two angular apps There's a bit of a fair bit of static content and then there's a Sort of angular code that is trying to find the largest prime number from a given set of datasets And that's what will actually Drive your cp a little crazy. So this is The application in a single thread mode the regular angular app that I would say I'll try and refresh that and you see my my page kind of like stuck And didn't move until I'm trying to scroll. I'm actually trying to scroll and nothing is happening You can see that it's been happening. Then once my data loads in then Then it kind of comes into life, right? So that's how angular would run in a single threaded mode But if I were able to do that in the web worker, this is how it works So I'm able to scroll very freely My data hasn't loaded in my windows very freely And now my data loads in see and you can see the scroll was shooting up and then my data has loaded in So because web worker moves in the entire intensive process into a separate thread The ui is not hindered and this becomes very important when you're building a progressive web apps or mobile application mobile first applications So that's a web workers for you Service workers Then you can on the block right a lot of cool things happening about service workers and progressive web apps Uh, yes, they are really great and And they're also important. So Again, I think it's a tweet or it's a one of the points from jake archipel stock So by jake says that it's a lot more expensive to transmit a data than to compute it on the local end It spends especially to on mobile devices on cellular networks Where the data the route that it takes to send the data and back and forth is insane And that's why you need to use service workers to try and see how much we can Minimize the round trips or this calls to the server And uh progressive web apps are essentially A kind of collection of principles, uh, you know, I could say So a progressive app is one that is using an app shell model that kind of renders instantaneously That has offline support and can direct 60 frames per second And uh, you can also have the ability to add it to home screen and how does angular fall? How does kind of angular play in line with this? So in angular the root component can be treated as a rap shell So items that are part of the rap shell could be the navigation bar could be a logo could be as many bar Put them all into the app shell and whenever you want to an instant load for it Go server side rendering for the app shell So always make sure your app shell is server side rendered because it loads instantaneously and there's no angular boost happening at that point of time For offline support, you obviously need to add a service worker Like I said the cli is a really powerful tool So when you're building applications and you pass a mobile flag to it angular sale will automatically create a service worker for you You want to do 60 frames per second? Like an example you just showed try and use the workers And also for the home screen use the angular cli So when you use an angular cli pass the mobile flag it creates your home screen It creates a web manifest file Which has those file all the details that you need to store it as a You know add to home screen icon and run it in full screen mode and all of that And the service workers also covers a part of the angular CLS So these are the things how angular would kind of for one-on-one when you want to build a web work or a progressive app Again some numbers of how we could have input the performance on the mobile Talking from one of the angular's mobile team. So when they did their application the first initial thing was about 2300 second milliseconds and then when they did the nap shell it came down to about 287 seconds Milliseconds, sorry And when you move to a service worker it actually dropped down to about 1.128 milliseconds So now by using all of these things together able to get these sub second loads Which is like the holy grail for our applications, right? And you can learn more about this on the mobile angular website mobile dot angular.io So quickly summarizing Uh, so I would I could solve all the topics that we talked about I would look at them as a pyramid of performance enhancements The iot sorry the aot and the Tshake is something that you should do for pretty much all the apps because it's a given right? It's it's nobody now You should do aot as much as possible when you're doing Universal obviously yes, you should do it for as much of apps as possible But they become predominantly important when you're doing things like e-commerce sites or where you have where the number of first time visitors are a lot higher Or people are sharing it on social media and you need to preview that image and those kind of things So university becomes a lot more important to that web workers You're doing number crunching. You're doing data visualization. You're kind of building these big huge dashboards Trying to web workers over there And the pwa is just on top of all of them. So mobile first you trying to build a Very strongly mobile first app or you're trying to build an app that's going to probably replace a native app You should go for that and then you should probably obviously go down the entire tree So those were a couple of uh enhancements And yes a shout out to my crew So so obviously, you know, when we when I came to this whole fancy idea of building the report card and all of those things You're like very close to uh Gs content. I didn't have time to work. So I just shot out an email saying hey guys can somebody help me out And these bunch of guys help me out. So, uh, we had akash and keshav and siddharth and bishwas So bishwas are sitting out there So these guys kind of volunteered and helped me out and the interesting thing is none of us new angular too It's all a first and up that we built and very in about Number two weeks time, but I think the amount of time that he spent was very few hours And if anybody of you guys have been playing the jay's jargon game What we're playing enjoying whatever so these are the guys who built that it was built in the last two days. So It's sort of a progressive web app. I'm think sort of because I think I don't think the service is working very well though So yeah, so nishi shafiq Anup and bhoomika. They're all part of the team that built these are a big shout out to these guys Cool. Okay. Yeah, I have time. I have time. That's great. So Some public service announcements I think we as a community in us, you know in our need for being opinionated and And you know kind of having cult status kind of to the frameworks and libraries that we use It sort of becomes cynical. It sort of becomes cynical and I kind of created this whole Environment which is intimidating to people outside Is intimidating to people outside who want to try and enter a space from other Backgrounds or even for new people who want to enter this I think it's very important for us to be nice The more you become an expert the more nicer you are supposed to become two people help them What a question they ask they are genuine. So please try and respond to them And embrace diversity So embracing diversity obviously in terms of gender color race is a given I think there's no two ways about it. You have to take care of that But also within the frameworks within the various frameworks that are available in the javascript community within The various thought processes that we have the within, you know, the various opinions that we have We got classes, right? I know people are saying no classes are not good. Let's do pure functions Or you have inheritances and no we should do interfaces People are not going to agree on a certain thing, right? Typing is typing important or not. That's another debate of its own So people are not going to agree on a certain thing I think what's important is embrace that diversity respect the thoughts But obviously also look at what are the good things that you guys are doing there and tan Pick it up in your work So with that, I'm fully on promise Questions nice talk and first talk from Thank you about angular or something other than react I know. Thank you And this is one question which is which is not technical and I always wanted to ask people Who work on angular? Why is google doing angular? I mean Because when I search websites, which are built on angular, none of the websites of google are built on angular today I don't think that's true Which one? So double click happens to be one of the biggest Clients for angular and there are a lot of internal applications that are built on angular. Yeah internal, right? Yeah. Yeah, I agree You you are getting my point react. I get your book, but angular is nowhere on google. So yeah So why is google doing angular? What's the motive behind it? So google is not So angular is an open source framework. It is it is truly driven by the open source principles. If you looked at David was built all the design documents were on on open source They were on google docs people would look at it comment on it and people It was a community built framework google. Obviously is supporting it is driving it Um, so it is not I would not say it is why is google not being a part of that So it is a community built framework and yes, there are a lot of internal tools that are being built Yes on the outset. They are not many that you could look at probably the way change I don't know. I may not even have the right answer for that right now But double click happens to be one of the biggest customers There were a couple of sites. I think if you probably go so there's a site which says Built with angular and built with angular too There are quite a few sites on there. I think some parts of even youtube are on angular Some parts of youtube, but yeah, none of the sites are completely You need to realize that youtube was an acquisition by somebody else They had built on a different framework and trying to migrate such large applications is going to take a lot of time and effort and consensus Right and the way google I think works is everybody is on individual team You need to sell you need to sell a lot internally within google Again, I may not be the right person to comment on these things. You should probably ask the google history at the booth out there Thank you Hello. Hi, so the shin here. Yeah, so I want to just ask a couple of questions. What about Um, aot that you are talking about do we need to do anything specifically during bundling to enable aot? irrespective of the bundling mechanism used whether you use the back up or anything like that So, how is it? It depends what your tool stack is if you're using the angular cli everything is very very seamlessly built in So if you're using angular cli, for example, you do an ng serve It will run the application in dev mode. You do an ng build or you do an lg build hyphen prod It will automatically run it in It'll run using the ngc compiler converted to aot do the buddling and give it out So that's the ultimate aim that it is going to reach out So the angular cli will become the single go-to tool for all your solutions as of now if you really want to do that Yes, you'll have to use you can use webpack. You can use system gs You can use any of your bundling tools. It's just the ngc compiler that you need to run It's just only single thing. Yeah, okay. So one more question is like see Nowadays a lot of frameworks have come we have react gs we have new gs If in a big organization, it is quite possible each team has their own set of frame So I would like to know like I I I understand that angular is inspired from web components So if we develop any component or new widget on angular js, would it be inter portable in terms of other mbc frameworks? So that is the aim or that way I would call that as the final destination for how web components should evolve all too so you have components and uh The components can be built using different frameworks and they're all interoperable as of now It's not as easy that it should be But if you probably look at aot the next step for aot would be so right now aot compiles into vm friendly code But it is still specific to angular in some extent If you're able to to take it to the next state where it just pure pure javascript and all the other frameworks do that Then I can get a component that is agnostic to any framework because end of the day is just talking to html css and pure javascript So I think that's the next stage when what you're saying should be possible as of now. I think it's still bundled It's with every other framework as of yet It's the same with react. It's the same with polymer other things So polymer and angular are working a lot closer to try and make sure the interoperability between them is a lot more smoother But as of here, I think every framework has that situation where they want to There's a bit of a dependency on the framework But I think the next evolution of frameworks is probably going to be where every framework renders it to pure javascript And the web components becomes the holy grail. Yeah Hi here. I'm sorry. I can't see you. No Okay, yeah Okay, so first of all, I would like to say a nice presentation and a lot of good pointers Thank you But I have few questions regarding so basically it's about building a mobile app Right cross-platform app. So if one comes to choose between react native, right? And an angular to pure angular to where So, uh, I know that Ionic has support for Angular 2 and it had support for angular one as well But it's kind of debatable like what will you choose over ionic with angular to or react native with Facebook has huge amount of support, right? Yeah, so there's a slight difference I would say between the way ionic works is an angular react native work So react native uses native apis Whereas ionic is still using angular and is using something like cod over to do a A hybrid app, right? But what you should instead look at is something called typescript So typescript is working very closely with angular to to build native frontend ui is with angular So you can look at typescript the typescript will become an exact competitor to react native in a certain way So ionic 2 is using typescript on you, right? So sorry, did I say typescript? Native script. I'm so sorry native script. So native script is the Native script is a framework by telleric Where it renders into front a complete ui. I'm sorry. I completely used the wrong word. Yeah native script So native script is using uh, it's a direct competitor to react native. That's what you're saying Okay, thank you that answers my question I haven't seen this is a visit I think you are the first one to mention typescript in the conference for the last two days Uh, I mean, what do you see with the evolution of es6 and es7? Uh, is typescript going to I mean, it's just opinion related question. I believe Uh, do you think that typescript is going to survive long or should we stay together with the plain javascript? Uh I'm not sure how do you want to so your question is Will typescript become obsolete? Uh, I mean the question is typescript brings a lot of goodies like interface class and Polymorphism all those things are there in javascript, but with function keyword Uh, when it comes to es6 and es7 they have kind of they have inherently started supporting all those things in a better way So, uh, is it like typescript still makes sense? When writing angular two apps I would say for angular to definitely yes because there's a lot of type Integrations with that but even to answer the general question on typescript What I personally feel is Somehow browser is always going to be lagging behind in terms of the innovation that's going to happen in javascript Right and you're always going to be dependent on polyfills in a certain way So you're either going to be using babel or something else to keep compiling And if typescript is allowing you to do that plus a lot more and plus help you improve productivity I think it's taking care of everything. So I do not think typescript should go obsolete Because think you'll keep moving forward Yeah Repactoring is easy. Thank you. Vinci. Thank you