Adventures in Angular

Adventures in Angular is a weekly podcast dedicated to the Angular JavaScript framework and related technologies, tools, languages, and practices.

Subscribe

Get episodes automatically

116

116 AiA Angular 2 Compiler with Tobias Bosch


02:20 – Introducing Tobias Bosch

03:40 – What does the Compiler do?

05:00 – Compiling in Angular 2

09:15 – Loading templates after using an Angular 2.0 Compiler

10:30 – Just In Time and Ahead Of Time compilations

15:40 – Advantages of the AOT approach

17:40 – Hacker attacks

19:45 – Dynamic scenarios

21:35 – Functions of the Compiler: Tree shaking

25:50 – Angular 2.0 Compiler and end modules

26:40 – AOT and sizing

27:40 – Rollup bundles

30:10 – Using RxJs

32:00 – Router outlets and siblings

34:40 – Plans for rolling out features for developers

37:40 – Motivations and driving forces

39:20 – Rendering targets

Picks:

Ship To Hawaii (Jules)

TensorFlow (Tobias)

Your Inner Fish by Neil Shubin book and the PBS Series (Ward)

“Cross Site Request Funkery” talk by Dave Smith (Lukas)

Professor Frisby's Mostly Adequate Guide to Functional Programming by Brian Lonsdorf (Lukas)

Life Expectancy by Dean Koontz (Joe)

NG Cruise (Joe)

Source Map Explorer (John)

Angular 2.0 Ultimate Workshop (rescheduled) (John)

The 12 Week Year (Charles)

AST Explorer (Joe)

Enter the lottery to win the opportunity to buy a ticket to NG-Conf (Joe)

Call for presenters for NG-Conf will open November 1st (Joe)

This episode is sponsored by

comments powered by Disqus

TRANSCRIPT

Charles: Hey everybody and welcome to Episode 116 of the Adventures in Angular Show. This week on our panel we have John Papa.

John: Hello.

Charles: Jules Kremer

Jules: Hello.

Charles: Ward Bell.

Ward: Hello there.

Charles: Joe Eames.

Joe: Hey everybody.

Charles: Lukas Ruebbelke.

Lukas: Yoh.

Charles: I’m Charles Max Wood from Devchat.tv. Don’t forget to go pick up the videos from Angular Remote Conf. This week we have a special guest and that is Tobias Bosch. Did I say that right?

Tobias: No, it’s actually Tobias. That’s we say Germany.

Lukas: Tobias or not Tobias, that is the question.

Tobias: You could put it that way.

Charles: Do you want to give us a brief introduction, who you are and what you do?

Tobias: Yeah, sure. My name is Tobias Bosch. I work for Google and I’m part of the Angular core team. I did a lot of changes to the Angular compiler and built big parts of it.

Joe: You do the hard work and everybody else does the easy stuff? Is that about.

Tobias: There’s different kinds of works but I did some really bigger refactorings in channel like shifting things around, arranging things differently so we can get faster and also smaller.

Joe: How many Angular compilers have your written to this?

Tobias: I think four of it. Since we started Angular 2.0 about four.

Joe: Yeah. I know the joke around here is that you land one and then you come in the next week and say, “But I can make it faster.”

Tobias: Yup. That’s what I’m trying.

Charles: I’m sure people are wondering, what is the compiler actually do? When I think compiler I think C into my code.

Tobias: Yeah. The compiler, initially it might not have been a real compiler. If you look at Angular 1.0, Angular 1.0 also has a compiler, we call it compiler but isn’t a real compiler. I don’t know. The main purpose of the compiler in Angular is to take what you wrote as a user. You write some filled files, you write JavaScripts, you write TypeScripts, you write annotations and bring this to life, to an application that actually runs. That’s the task of a compiler.

Traditionally compilers, as you know them is like I give you a file and then you split some other file outs at the end. Doing the two compilers so for you worked more in the mode of a browser. Again the browser if you type JavaScripts, you don’t see an output artifact coming out of that compiler but the browser runs the compiler. It’s just in time compiler, just means it runs your code, compiles it on the fly and executes it immediately. That’s the mode how Angular 1.0 runs right now and that’s also how we started out with the power compiler in Angular 2.0.

Ward: Not a lot of people understand what there is for you to compile because it’s easy to confuse it with trans filing from one like from TypeScript or ES6 down to a browser and stuff like that. That’s a compilation process but there’s something that Angular needs to do that goes above and beyond anything that would happen on the code level. Maybe you can talk about what are things that I as a developer of Angular apps do that you then have to compile? What do you do to the stuff I write? What do you do into it because it look pretty good when I wrote it?

Charles: Am I doing it wrong?

Tobias: Right. You as a developer, if you write JavaScript code, you could just run it right into the browser. There’s nothing to compile so far because now you got JavaScript or maybe TypeScript and then transfer down to JavaScript. That’ll works.

You want to have dependency injection. Suddenly, how does this work? You need to have a container that news up your classes. Who creates the container actually? For that, we need to analyze your code and see who depends on whom, and instantiate everybody in the right order, and then get things clear.

This analysis phase and then instantiating things, you could call already a mini compiler. That’s just JavaScript. The other big part is the templates that you write. These are not JavaScript, you cannot run them. You could say, “They’re HTML and we do just into HTML on an element.” But that’s not how Angular works. Angular has this data binding magic built in. If we just you know HTML, you would see the content but they would, you know data, the templates would not be live, nobody would instantiate your directives, and nobody would react to your abouts.

That’s the other parts. We analyze your template, go over each element, see which directive matches your set of event list here, set up data binding, and of course we need to analyze all of this and then bring it to life later on.

Ward: Does that template end up being HTML or does it end up being something else? When you’re done with this thing, what do I end up within my hand? What’s in my hands when I’m done? I realized and you’re going to tell us this that under one mode I can’t even see what happens because it ends up in memory and then off it goes, and then in other mode, I’ll actually be on the C files on this, but tell us a little bit about what is this thing that’s produced?

Charles: Please tell me it’s React DOM.

Ward: Exactly. It’s just React. He complies to React and we’re done.

Charles: Sorry it couldn’t happen.

Tobias: When compiling to a lower level and then React. We couldn’t transfer direct but this would leave us too much overhead because then you need Angular and React both two kind of the thing and that’s probably not what you want as end user.

What we compile a templates in your code into is first a factory, a factory that can lead your own extension to the application. If you run this factory and your template comes to life, in the end we create the elements via document.createElement, attend them together and then later on we update properties on these elements. We need to new up your directors we call it constructor, keep reference just to wait and move this around passive through depending to directors that depend on other directives and support.

Ward: At the end if I’d had a template that was in a different file, you would have read it from the file and you would have merge it all into something into this factory?

Tobias: Right, yes. Each component like AoTer compilation has one factory. Component becomes a component factory. You call that factory, we instantiate the component and we also create the DOM via document.createElement calls. If you have components that mess other component, we recourse down into the parent factory will call the factory of a child component. With that in the end, it just need to create the root component and each will create other child components transitively.

Joe: Tobias, of the realities we had in Angular 1.0 was that if we had a controller and we wanted to load a template, if we did nothing else we would have to make nation equal to get that template. Unless we use something like NG template cache, one of those plugins that we could use to ground a Gulp for example. Tell us how that kind of a thing works after I run through the compiler at Angular 2.0.

Tobias: It is similar. In one mode in Angular you could still load the templates from the server. While the compiler is compiling your components it will hit the template URL and you’re at component annotation, and then it will go fetch that template. That’s abstracted, there’s a resource loader behind the scenes and there are two versions of it. One is actually calling HTTP, HTML HTTP request to fetch your resource. The other one can read the files from cache. I think any pretty similar to Angular 1.0 in that record.

Ward: These two modes become available to me by doing what? There’s a distinction. How do I get one mode versus the other?

Tobias: It’s a configuration for the run time compiler, if you use the run time compiler. I’m not sure if we have talks about it yet but maybe soon.

Ward: What you are describing now were it actually goes out and gets a template live while you’re sitting in the browser. That who we been calling the Git or just in time compiler, is that right?

Tobias: There are two modes of the Git compiler. It can either fetch them live via request or it has the cache already. I did still compiling the templates on the fly. The templates are services may be an out like in a JavaScript but they are just still templates like HTML strings. And that conversion of this HTML strings into factory happens on the fly in the browser.

John: For our argument’s sake, if you call that the GIT mode, the run time in the browser mode is what we’re saying. If that’s what we call that, Angular 1.0 has said we had a way, we could use a plugin to inline those templates. In Angular 2.0 do we need to inline the templates or can we use server site compilation to solve this too?

Tobias: Sure. Angular 2.0 has this new thing called ahead of time compilation. That’s new, Angular 1.0 did not have this thing. We move the whole compilation, means analysis of all the templates, walking of all the templates, producing this factories all to the server site. To retemplates we would just go and read the file and that we produce this factories and then your application just includes these factories React. They are just TypeScripts, so it’s just JavaScript that can be loaded into the browser and run directly.

That’s a big thing actually. We want to do this for Angular 1.0 but we were never able to do this. It’s actually interesting to think about why. The reason why is in Angular 1.0, the problem was we never really knew what directives were available in the system. Maybe you remember in Angular 1.0, you can define modules, resist the directives and pipes, but it’s all imperative. If you  think about a  tool, a tool does not want to run and uses code because you could have crazy stuffing your code, you could do a while loop that’s never terminating and then suddenly my tools stop to work. I don’t want to execute your code just to know which directive you’re using. That was impossible in Angular 1.0, In Angular 2.0 when the different routes with these decorators. The nice thing about these decorators is that we can read them out without running your code. And now we’re able to read them and compile the templates and do all of these without running your code, produce a factories, and that’s a huge shift.

Charles: One thing that I’m seeing with the edit time compiler is that all that work it’s done ahead a time. It’s all kind of set up to just do the job once it’s all put on the website. It seem a lot of work if you’re doing the Git compiling in the browser. Does it slow things down as supposed to just say interpolating strings and dropping HTML into the DOM or is it still more performant and more efficient to have the compiler there?

Tobias: It is still more efficient, you have to compile it there because if you want to do in HTML, if you just do it once, you might be fast. Let’s say you have 20 components on your page, then you need to do 20 in your HTMLs and then you realize wait into HTML might not be the fastest actually in the end because the browser is just one of its two parts, the HTML deposit and then create the element. You think, “Let me execute document create elements.” Then you change your code to action document create element, and then you see, “Oh okay, so I’ve got this data binding. Let me think about how can I do this simply?” I just create a data structure that cubes mapping of the created Nodes to my expression and then you go forth, you do it step by step by step, and suddenly you have an Angular 2.0 compiler that you wrote yourself.

Charles: Right. That make sense. It’s do a more for me that just making Angular magic work. It’s doing it all intelligently and efficiently for me.

Tobias: Yes, exactly, exactly. The last thing is Angular 2.0 compiler is not done yet. It will probably will never be done. The syntax stays the same what the user writes but that we keep on optimizing it. One of our next goal is to make it even faster like the code that we produced should be faster, we’re working on the code that we produced should be smaller, and we’re working on making the compilation itself be faster.

Charles: Do you know how long I waited for Angular 2.0 and now you’re telling me that it’ll never totally be finished?

Tobias: I think that’s not your hope for.

Ward: Half of the audience had a heart attack when you said it’s not done.

Tobias: The syntax is done and it’s stable. What you wrote is stable but we keep optimizing our internals.

Ward: What are the key advantage just to this AoT approach? Just so people can see whether they want that or not. If you could just like the top three advantages to it.

Tobias: Alright. First off, you don’t need to shift the compiler to the client. That’s a bunch of Angular core code that you actually don’t have to shift. With that, you can build applications that are maybe 20 kilobytes minified gzipped. If you include the Angular compiler with your around 100 kilobyte minified gzipped, so that’s a big gap. That’s one.

Second, you don’t need to compile your templates on application bootstrap so application bootstrap gets faster. Partly because it’s mess code but the other part is actually that we don’t need to compile your components anymore. They are compiled and they just run, they’re optimized for running. That’s second.

Third is it’s safe for your application. If we compiled your templates on the fly, we convert the expressions you wrote. We need to somehow evaluate them. We can do this in the slow mode but that’s not what you want. You want to have this fast and for that we need to eval some generated code. As soon as you do eval in the browser, you are open to attacks. Not that you do it purposely but there might be some bugs in your code that will allow some hacker to inject some code into your page and now suddenly you eval their code and they can take over your website. We use the open compiler, we will never eval and then you can run your application with constant security policy. Call a security that policy that’s in your feature from browsers, essentially the server can tell the browser, “Hey, on this page never eval anything.”

Ward: Let me think about that for a second because does any other framework, I can imagine, I’m thinking about how I would write any other framework that was trying do with Angular is doing. It would seem that I would need eval in order to make that work. Is every other frameworks susceptible to the eval as eval attack or is this something unique to Angular as for Juno?

Tobias: No, that’s not true. Technically you don’t need eval. You can do reflection in JavaScript, even all the property name I can get it from the object and so forth. If you want to have a fast mode, then you will need eval. You have a lot of this reflection calls, then your code will get slow, that because that’s not what browser optimized for. Browsers optimized for static code not for reflective code. A lot the times the optimized is by using eval or new function. To generate a function from a string, that’s not possible for other frameworks like to use this fast pot.

Ward: Without this AoT, I would be stuck between two bad choices, either my performance has to suck or I have to open myself up to a potential security hole.

Tobias: Yeah. Which might be exploited by hackers, you don’t know. Nobody can encourage you that every code is flawless.

Ward: That’s interesting because I’ve heard the other arguments before but I’d forgotten that there is a security advantage to this. One of the things that comes from this though is that the template, the HTML, and the component are really tightly coupled together, they’re really one thing. If we were to talk about the component we’re really talking about the HTML template, and the class together.

Other circumstances, people have been very flexible about through dynamically taking whatever HTML they want and hooking it up to a class. Angular doesn’t work that way. For dynamics scenarios, what’s our game play?

Tobias: They are two. One is you can say, “I just use a random compiler.” Sure then you can also compile things on the fly while the application is running. The other way to do it is to say, “I actually know what kind of components I can insert here.” Let’s think about the dynamic form. Let’s say you have a form, and in the form I can display an input, I can display a textbox but I don’t know I had enough time. What is your display? It’s defined by my data that I get us input.

What the dynamic form can say, it can tell Angular via special complete, it’s called entry components. I will later on need to be able to create an input, I will later on need to be able to create maybe a tool button, and so forth. You list these components there and then you had enough time compiler knows about these guys and can compile them as well, and provide the factories for these components in a row known Plix.

Our dynamic form during runtime, it can just ask Angular, “Give me the factory for material input on material button,” because it declare it before that I will need discuss. There’s a thing called Component Factory Resolver, it ask this guy, “Give me the factory for material button.” And then Angular knows about this already because the open compiler provided it at the right place. You can create this guys on the fly as many as you want to.

Ward: It’s like I have a tool GitHub widgets that I could put onto the screen and if I’ve got my widget collection right, you’re saying that I could have some meditative somewhere and even in AoT world, I could dynamically construct a view using these predefined library of widgets?

Tobias: Yes. You could totally do that.

Ward: Wow. We’re going to learn how to do that.

Tobias: Yeah. There’s a little drawback to this. It’s action advantage of AoT that I didn’t mention before. With AoT, you can do crazy optimization on JavaScript code. It’s called Tree Shaking. Essentially if you have a great JavaScript compiler like Google Closure Compiler, it can analyze your code and find out which parts are used and which parts are not used. The parts that are not used, it can just say, “I’m not going to use this, I just remove it from your JavaScript code because I can prove it’s not being used.” I can do other crazy stuff, I can rename properties because I know nobody’s using them reflectively, that kind of stuff.

If you use these entry components, these will tell Angular, “Angular put these components at a specific place in your generated code.” And then closure compiler will not remove this. If you say, “I might be using Angular material button, material input.” These two things will not be tree shaking out of your application. You might not use them later on but they will stick to your code.

Joe: Let me push you on that for a second. In Angular 1.0, because come back to the days we’ve been living in Alaska five, six years, we often had a problem where is muddy pools and a widget library that’s got 50 components. The first problem I run into is why is my app five meg when I download it and bring it to the browser because we’re getting all these components we’re not using. Then there were tools that came out, tried to do what you’re proposing is tree shaking. Just figure out how do we get rid of the things we’re not using but not of them ever really worked out well personally because they don’t have a good way figuring out how to shake those guys out. In Angular 2.0 I’m assuming, and I want you to correct if I’m wrongdoing that is looking through the module imports, you have six modules. Is that what’s doing it?

Tobias: Yes, exactly. Plus together with I had a ten compilation. As soon as you have reflection in your system and you use it happily, there’s no way that any optimizer can find out which properties and which classes you’re using, which ones you’re not using. With AoT the optimizer can find out which things are actually using which factories, and which ones are not used. Even if you have an import, it can still be removed because the optimizer can prove these things actually not used. There are different kind of optimizers. We’re not as simple thing. Essentially, just checks which ones you imported and that’s a little bit of analysis in functions but not very deeply. Google Closure Compiler can go really deep and remove all the imports that you can prove you actually never used.

Joe: What do you mean by prove that it’s not used. It’s one thing to say I’m bringing on a symbol, that symbol is never referenced inside the file. What if it’s reference and somehow ends up in a dead code branch, something like that, can it actually removed at that point?

Tobias: Yeah, exactly. It can remove function, it can remove methods from classes if they’re never called and support, and then trans if we down. If your symbol is used in a function that is not being called, then the function is removed, then your symbol is removed as well on support.

Charles: I’m wondering here because when we asked what the compiler did you went straight to templates, and then we graduated from templates to components, and now we’re talking about tree shaking. Is this all a function of the compiler or is this ahead of time compiling and are there other things that it does that we haven’t talked about yet?

Tobias: This tree shaking, that’s not something Angular does. Angular is just using TypeScript code, properly type TypeScript code from your templates. And then there are external tools that do the tree shaking based on this information.

Charles: Okay. The compiler, the Angular compiler specifically just does the template compilation and does some work optimizing the components, is that correct?

Tobias: It also cares about end modules.

Charles: Okay. It does something about the modules too?

Tobias: It produces an initial injector as well. If you bootstrap Angular, you should bootstrap, there’s no component yet. Still there are some services available that you can use, that’s the router for example. The router does not live on the components. It’s independent of components, it can actually create other components. When you do have a place where the router lives, and that’s our bootstrap injector. These guys also generated based on the providence you have on NG modules.

Charles: Okay.

Tobias: It’s similar to component without a templates, kind of. We get tired enough.

John: I want to talk about size for a minute because you’ve mentioned some numbers, I’d like to just ask you kind of what the context those work. When we run AoT first of all, AoT itself isn’t going to make the bundles not work. It’s just putting the code in a way that is compile them the server. I realized you’re sending list to the client because you do not send the compiler there. But the output of AoT is not smaller than before than AoT.

Tobias: That is true. The output is actually bigger than the HTML template that you wrote. If you use it, AoT, you get the benefit of not shifting the compiler, and also not parts that within the Angular core that are not used anymore. The downs had regarding size is that the generated factories are bigger than your original templates. That being said, this generated code, it gzipped well but right now it’s really too big. We think it’s too big. It works, it’s not a problem. It works but we are working on making these things smaller.

John: That’s where my next question is going to go. I did some test over the last week or so with AoT. I started with AoT, damn I code working, and I took the theory here of sample for example. I run it through there and then I used rollup on it to make them bundle at. I did the tree shaking and put into a single bundle, and then I gzipped and looked at it.

When I took the rollup bundle, not the gzipped version but the rollup bundle, and I explore what was in it, I was pretty amazed how much it shocked out of the app. It was only using the pieces that I had but what really struck me and I wanted to ask you about on the show is as I was using forms, construed here as uses forms that uses the router, uses HTTP, uses comment, uses platform, use different modules that are inside of Angular 2.0, the total size of Angular 2.0 for that in roll up was about 70k, and you mentioned 20k earlier. Am I doing it the wrong way, or that I missed something, or that I need to do something else?

Tobias: Right now, you cannot do it better. It’s sad because rollup is not perfect. As I said rollup just does a shallow analysis of functions but it stops eventually. You need a tool like Google Closure Compiler. This guy will remove all the rest.

John: Okay, it’s not the AoT side then it’s rollup isn’t doing as good or as thorough a job as Closure would do.

Tobias: Exactly. Rollup has a hard job doing it actually because for doing it better, you need a type system to be able to analyze which things are used and which ones are not, which properties are used, which methods are used. Rollup is working, it’s working independently of a type system. Google Closure Compiler uses the type system internally. To get these small numbers, we convert what you write in TypeScript into the type system of Google Closure Compiler, and then that Google Closure Compiler do its job. That’s the scenario we would like to for you to be able to do, it’s not the area yet. It’s working inside an experiments, it works for us internally because we have our build tools setup and it works nicely but it’s super hard to use for external users right now. That’s one of the priorities of our TypeScript team, to make this possible for external users as well.

John: Thanks, that’s pretty awesome to hear. One other follow up question that I have is I was playing with RxJS, it’s something that’s what Ward and I have been doing lately is we will refer to just the pieces of our RxJS that we want. I want the operator for map for example, or for do but I don’t want everything. Instead of employing an entire library, I’m employing just a pieces. With rollup or closure, could I just reference all of our Rxjs much tree shaking basically shake the rest out? Because that would be easier and code if you just say, “Give me all our x and we’ll sort of that later.”

Tobias: It depends how you use Rx. There two modes in Rx. One is, it bunk patches to prototype of observable. If you do that like that supports to shake out. The other option is to just input the operator separately, I guess functions and use them directly. And then that’s tree shakable.

John: Okay. Which would mean you have to do each one individually of the operators which is essentially equivalent to what we’re doing right now in the samples in the docs.

Charles: It’s actually worse than that. You have to call them as functions as supposed to being able to chain, to do method chaining, which is the typical way which you can strive server now.

Ward: Which makes the code even harder.

Tobias: Yeah. But this will result in year seven, it will be a new syntax. We can use a function as if it was a method on an object, like this special syntax. I don’t remember them exactly but this will resolved.

Ward: Yeah, it’s a double coding syntax, something like that.

John: Which is also an advantage of using TypeScript because we don’t have to weigh free as even. Usually some of this does oh yeah, seven, my gosh, now we get a week for browsers for them. That’s one the reasons a TypeScript is so exciting about this.

Ward: Can I throw another eyeball question at you? It’s one those mysteries that I actually John and I kick around but I’m sure other people have noticed it too. Sometimes we use these elements, special directives or maybe their components, they come from Angular and router outlet. We think we talked to people and say, “Oh well, you know, when the router does this, it puts your view, the thing you navigated to inside the router outlet, except that if you look at the HTML, it’s not true.” The router outlet is still sitting there in the DOM and the actual content is in a sibling. I’ve noticed that in the couple of other places, where I think maybe NG content or something. Some of these things, they turned out to be look like to be markers and the content isn’t actually between the text, it’s adjacent to the text. Can you explain why Angular does it that way? Why it doesn’t just split the tags apart and jam the stuff in between? What the reasoning is there? What’s the advantage?

Tobias: It’s seem true for Angular because this way Angular just need to know about one way of depending things. Think about NG, if NG four, they’re actually want to have this sibling behavior. You write your sort of thing, you start thing and it should be like S siblings to displace where you declared it and you’re forced them on that siblings which are the not best of things.

You will need the sibling thing anyways for these directives. For adding children, there’s actually two cases. One case is if the element is empty, then you want to pen to the end of the symbols. What if the element is not empty? Let’s say you have a router outlet and you put something in the children already, where do you put it now? The user needs to be able to specify at which place should the new content go. You need to put a marker in there and then what do you with the marker? You insert next to that marker. In the end, you need to have a way of specifying where exactly in the DOM should something go. The simplest way of doing is having a marker and adding something next to it.

Ward: Okay. I should expect that. Colloquially I don’t have any problems saying, “Oh I just putted in the router outlet, but technically the router outlet is a marker, and the stuff is put as sibling immediately after.” Is the way you’re say.

Tobias: That’s the only way how Angular depends, it makes things a lot simpler for us internal.

Ward: As I long as I know that what it’s going to do, I won’t be shocked.

John: You mentioned a few times closure, rollup, tree shake, things like that. Where in the road map is that stuff as far as getting into everybody’s hands for developers? You mentioned how it’s hard but that it’s used to be right now for most people than years. Do you guys envisioned that, something that’s in near future, getting that developer’s hands, or where do you see that?

Tobias: Actually I would be to synced up without TypeScript to be honest. I don’t know exactly what their plans are. The plans obviously, to do that as fast as possible. But what the complete plans are, I don’t have a number, I don’t have the dates for that.

Jules: I went out and give me date anyway but we are actually just left being record for this one where we are going to prioritization in a waiting process. This is actually the top number one thing. I can’t give you a date either because we just left the planning meeting but it is absolutely a priority.

John: That’s all we really need to know. Is this something on your horizon? It sounds like your saying yes, very similar. At least we should get to it.

Jules: Yes. As soon as we can get to it.

John: I work at a large corporation and one of the things I’ve been pitching is the idea of using code splitting and bundling an AoT for some of our apps because we want apps to work for web performable. A lot of folks have been asking me this, “When can we this kind of stuff?” One of the reasons they’ve been asking me is I should have some numbers of 400k app which we could then split up in the bundles of approximately 75k for the first load and then 50k for each additional bundle, if we could do code splitting. The advantage there is over Wifi or even wired internet, you’re not going to see a difference of speed whether your literal or not frankly. Once you get down to 3G or 4G, you’re talking half a second to eight seconds, those are the kind of differences you’re looking at. These features to me you’re really is going separate Angular 2.0 from some of the others, by using AoT and code splitting and bundling.

Jules: We agree with you John.

Tobias: Actually it’s not just we internally in Google we did this, there’s this team at Lucidcharts. Do you know that tool? They actually did it as well. They are super sharp and they made it work. It work well for the application. Again we’ve used this sort of time, I think from eight seconds to five seconds, that’s almost twice as fast just by using AoT.

Jules: Yeah. I think part of it is you’re able to do it now but we really want to make this way easier. For example, a TypeScript team is talking, can we make closure compiler work as it does for Google for actual customer? I’m definitely being that weird thinking about and trying to get as soon as possible.

Ward: Is the concern that John is talking about something you’re seeing in the external world, is it a cool priority too because the Google itself is a big user of Angular 2.0. In some sense drive some of the prioritization. Can you talk a little bit about where this forces are coming from and where you see them?

Jules: Yes, Ward. We are getting a [0:43:18.5] from most of the developers that we talked to that are external to Google. I wouldn’t say that every big company because I think that’s really what you’re asking me is bringing this up. I say that the big companies who are really familiar with Angular 1.0 and are doing migrations absolutely are.  I would say that we’re talking to an equal amount of big companies who are green fielding Angular 2.0 and they start off in a way that I think upgrades or not.

Our TypeScript team has made all of the AoT stuff with closure compiler work already internally. Internally Google projects are already able to take advantage of these things. Much more readily that it’s, I don’t want to say doable for external because clearly it is doable, it just takes a little bit more work.

Ward: John was asking for timing. I’m asking about where the forces that are behind it and what I’m hearing is that there are a lot of internal forces driving this initiative and some external forces like John’s that are I think to give motivation to it.

Jules: I think the way that I would say this is we’ve already done this internally, that was already the motivation and we are now really low where what we need to do to make it work externally as well.

Ward: That’s even better.

Lukas: I’m a huge fan of Electron. Obviously with Angular universal that’s already big deal as well. I think why this is possible is because how we separated out the renders from the rest of the Angular. Here is what rendering target but you see is being or that are available but even, I’d love to hear your take on maybe some far out ones that maybe we haven’t thought about or it’s just like targeting like WebGL is a render target.

Tobias: Right. If you know a little bit about the journals of Angular 2.0, there’s this render interface. All the calls of Angular go through this render interface. We did demos about just by providing different implementation for this render interface so that Angular applications can run on web workers or they can run with Electron or Angular script just has a different render in the apps, and then your application works on mobile.

That’s one way to do it and it works. Now that we have this great compiler, we’re thinking you even further. This render interface, it’s nice to replace but what you actually want, you want to have code that is generated specifically for this platform. You want to have the compiler, if it runs on the browser, output directly document.createElement calls. Not call a render that will then eventually call Document Create Element, and so forth.  If the compiler runs, if the application able run on mobile, maybe the compiler should output Native code for your templates. That’s just a crazy idea but it is possible technically. We’re exploring ideas in these directions.

To make a point there, Electron and web workers, it’s still like experimental right now. We do not recommend going with this into production because there’s one big thing missing. Of course we might have a different compiler story but the second thing is if you are on a web workers or you have an electron then your application needs to be able to run code on the UI site. Web worker, the applications encapsulated, you cannot touch the DOM but there are always extra cases that where need to touch the DOM. We don’t have a good plugin model for this thing. We need to design this first before you can build really big applications with this. Demos work but as soon as it gets bigger, you will have get this extra cases and that is not solve yet.

Lukas: Totally make sense. Thank you, I appreciate.

Charles: Alright. Let’s go ahead and get to some picks. Jules, do you want to start us of with picks?

Jules: Yes. My pick this week is definitely I have personal things so as you heard me say before, I’m purchasing my first home. It happens to be on the amazingly beautiful glorious island of Maui. For the last week I’ve been freaking out like how am I actually going to get it furnished so that people like my friends could stay there? I found this really awesome companies. I know it’s all going to be valuable to a few listeners. If you need to ship something to Hawaii, there’s a really cool new company called shiptohawaii.com. Basically they let you send your shipment directly to them and then they ocean freighted over. Really cool thing for me.

Ward: You’re not using like Apple Crates and Doors, and stuff like that? You finally left college.

Jules: I’m trying. You might be some crates there for a while. Definitely maybe.

Tobias: A pick of mine would be TensorFlow. I did some machine learning in college. It was super interesting and I thought I took it in college because I will never use it again. And now there’s this thing called TensorFlow and there are all these examples showing up. It’s super interesting and there’s some bots that you can build. The other day I read somebody built a bot that drives around and tells you what it sees. It drives around, I see a dog, I see a door, and so forth. It uses one of the machine learning examples from TensorFlow which is like mind blowing.

Jules: Hey Tobias, guess what class, I took a whole year of it in college thinking I would never use it or even really hear the words again? Compiler Design. That’s my favorite course in school. Here we are.

Tobias: It all comes back.

Charles: Okay. Ward, what are your picks?

Ward: In my dotage, I am reading a book that I swear I read before. It feels like deja vu but it still seem new to me. It’s called Your Inner Fish and it’s by Neil Shubin. It is an amazingly accessible insightful guy, the two evolutionist experience by somebody who’s a scientist just trying to find it. In this particular field of study is that moment, brief moment when fish came out of the water and walked on land, and from there you extrapolates. It turns out it’s also a PBS series on TV. All I can tell you is that the stuff, this biology stuff that usually leaves me blinking my eyes and looking for something else to read or do is still gripping me. I highly recommend it if you’re curious about evolution.

Charles: Cool. Lukas, what are your picks?

Lukas: I have two picks. One is a talk from AngularConnect this year. It was by Dave Smith, Cross-Site Request Forgery. I just generally find Dave to be just a super engaging speaker, super funny, and he’s actually one of my favorite speakers, pretty much within this day in the community across the border. I think he gave just a really good talk. I was enjoying what he has to say.

Ward: Before you go on, can I just to a plus 100 that, I saw that and I thought it was the best explanation I’ve ever seen on Cross-Site Request Forgery.

Charles: Is that Dave Smith from JavaScript Jabber?

Lukas: Yup.

Charles: Awesome.

Lukas: Yes. I think to a point I almost feel he’s a bit underrated because every time he speaks something I’m just like, “Why is this guy not everywhere? He’s amazing.”

Joe: It’s so true.

Lukas: If you see him, give him a hug for me Joe

Joe: I’ll do.

Lukas: My second pick is Professor Frisby’s Mostly Adequate Guide to Functional Programming by Brian Lonsdorf. I read it before, I’ve been picking a backup, it’s just a free ebook on GitHub, and it’s just a pretty phenomenal. Brian is also a really good speaker and he does related Java taking some of that’s purely academic like functional programming and breaking it down to a way that mirror mortals such as myself cannot digest.

Charles: You know that’s so less fear functional programming. We’re not doing that anymore.

Lukas: It’s just functional programming this year.

Charles: Nice. Joe, what are your picks?

Joe: Hi, just recently finished a book by Dean Koontz, it’s actually been of an older book. Maybe it’s only a few years old but it’s called Life Expectancy. It’s a very unusual at least for I know of Dean Koontz. It’s just a very different kind of book. Really enjoyed it, had a great time reading it. Life Expectancy by Dean Koontz, it’s hilarious for one thing. I laugh out loud quite a few ties while reading the book. I highly recommend it if you’re looking for something a little bit different. Life Expectancy.

Of course I got a pick, the NG Cruise by NG Conf. Going to be a conference on a boat a couple of months after actual NG Conf has happened. NG Conf is in April, this is going to be in the end of May. I’m so excited to go and sit on a boat, sit in the sunshine and only spend a little bit of time indoors listening to boring people like Dave Smith talk.

Ward: Where is this boat going to be? You got a cruise around Salt Lake City or something?

Charles: Yeah, great Salt Lake.

Joe: No, I know. It’s going to be going to basically the Bahamas, it’s leaving from Florida, sailing around in the, I can’t recall the exact ports, you can go to ngcruise.com/#/ and see the exact ports it’s sitting. I think it leaves like May 28th or something, so excited for that.

The artwork on the website is so cool, the designer is just super awesome. This awesome stickers I give out on Angular Connect. Anyway, super excited for the cruise. That’s my other pick. I do have some NG Conf announcements as well.

Charles: Oh cool. We’ll let you do those in a second. Let’s get John’s picks.

John: Cool. Size in my quick picks. The first one is it’s around the topic of AoT today. There’s an NPM package called Source Map Explorer. With the Source Map Explorer which you can effectively do is use that to point to your build, your bundle, and then a map file if you want to. It will show you a visual diagram of all the code, the functions, and things that are actually in your bundle. After you do something like rollup or closure on it, you can take a look and see, did it actually get rid of the things that I know are not being used, which is really, really pretty wicked cool, and so fast to run it.

Second thing I like to pick is, Joe is it okay if we talk about the Angular 2.0 ultimate workshop?

Joe: Yeah, you bet.

John: Cool. We have rescheduled it, first time ever had to reschedule a workshop in 20 years of speaking, because hurricane decided to come to the site where we were going to hold it. We thought maybe we shouldn’t prioritize the workshop over the safety of our guests so we rescheduled it and now we’re scheduling it for was it November 4th and 5th, Joe is that correct?

Joe: Yeah, that’s right. Friday and Saturday.

John: Friday and Saturday, November 4th and 5th. The folks at Microsoft Office is camp had done or space to this, being a huge help so we can at least do it within the same state, relatively close, nice short drive from where we originally going to do it in Fort Lauderdale. If somebody’s interested in coming down and see me, Dan Wahlin, and Joe Eames do a workshop for two days in Angular 2.0 and learn the latest and greatest, including AoT, please check us out at the Ultimate Angular 2.0 Workshop.

Charles: Awesome. I’m just going to throw a quick pick out and then we’ll get Joe’s NG Conf announcements. I’ve been reading this book, it’s called The 12 Week Year, basically it’s a planning and productivity book. I don’t know what it is but something about this process really clicks with me. I’m super excited to get into it and do it. In fact, I listened to the book on audible in about a week, and then as soon as I got over I closed the book out, went back into the app and started to book all over again. I’m really excited about the options that are there. If you’re looking at planning, you’re taking years too long, maybe a little bit shorter term vision, we’ll help achieve the longer term goals, then check it out.

Ward: You’re scaring me, you’re scaring me Chuck because I need those other 50 weeks or 40 weeks. You can’t cut my year down to 12 weeks, what’s an old dialect means supposed to do and I need 26 hours in a day, not 24, so you’re scaring me man.

Charles: That’s my job. Joe, what are your announcements?

Joe: Actually I want to throw one more pick, I forgot this. Pretty topical based on what we’ve talking about today. I just found out about astexplorer.net. Seeing post placed in something like JavaScript and then you can see the actual abstract syntaxtry of your JavaScript. Over on our hands sign a tree form and see how are these get represented as an AST, super interesting. If you’re interested at all on what ASTs are and how they’re work, it’s really work. astexplorer.net.

I want to NG Conf announcements, the lottery is now open. You can register for the lottery to win the opportunity to buy a ticket. It’s free to register and then people who win will have the opportunity to go and buy their tickets to NG Conf happening April 5th, 6th and 7th in Salt Lake City. Has always way more demand than there are tickets, so the lottery is by far your best chance to get a ticket to NG Conf. You just head over to ng-conf.org, if you want to register. The CFP is announced, it’s going to open up on November 1st and it’ll close on January 8th. Those who are listening, generate your ideas for an awesome talk for NG Conf and please submit them, as always looking for excellent talks about Angular 1.0, Angular 2.0 community related items, that sort of stuff. That’s it.

Charles: Alright. We’ll go ahead and wrap this up then. We’ll catch everyone next week.

Joe: Toodles.

Charles: Bye.

x