Malte Ubl & John Hjelmstad: A novel, efficient approach to JavaScript loading

yeah this going to be exciting uh it's also going to be lots of material and um yeah uh imagine you're building Gmail and uh you know we both both work on

Google Plus so this is as much as a of a mind game for us than it is for everybody here except this guy uh who's actually working on Gmail and um so most of you guys probably know Gmail it looks somehow like you know this it's big right so there's megabytes of JavaScript and um you would think that you probably don't need all of it right away right so initially you might draw something and then you know the user does something need a little bit more code so it you know that's that's kind of how it looks

and um you know we can probably agree on that downloading lots of JavaScript is you know can be really slow and that compilation of JavaScript is also something that may be slow um so to follow along this is our example app it um you know it's Gmail it has an inbox and has a compose you and kind of our assumption is that not everybody always composes email so it's kind of wasteful to load all the code you need to compose emails right and um then we make made this completely

arbitrary madeup dependency tree um that has you know this thing that we call inbox app at the top and then there's like an inbox model and an inbox View and the inbox model depends on the Ajax thing and the threat thorder and the URL module is depend of the Ajax module can you see that yeah and then there's like the template renderer and the text G and it's you know doesn't really matter it's all just things we made up it's a dependency tree you know you have modules that kind of need other stuff

and when you add the compose app uh you get you know these two other things like the email sender and the compose View and the compost view also depends on the same thing the template renderer and the text get thing and the email sender needs Ajax so there's you know there's some overlap and the dependencies between those two apps so H we talk about JavaScript loading so let's imagine we're building our app with requirejs now requirejs is two ways to load JavaScript that's the which are kind of built in and and and

this is the first one that you would used in development and it's recursive downloading so you say you know your app says I want the inbox app so it figures you know there's these two things that I know I need because they're like defined to be my dependencies It downloads them then they go and say yeah I actually do need a couple more modules and it downloads them and then Ajax says yeah I also need the URL module and there's another step so loading Javas like like this is really really bad um it's overall AG eight HP requests and

there's a four-step photoall so assuming you have like a round trip time of like 100 milliseconds it takes 400 milliseconds just to do these like trivial modu loading uh which is bad um let's look at the incremental load so now I say like we want to load the compost app and that's actually really easy uh in in with AMD say like you load it and then it figures out okay email sender and they compost VI and then you have all those other dependencies but they're already there so it doesn't download them anymore so it's a little bit better in the

incremental load so it's 3 HTP request uh still a twostep waterfall really really bad um so what can you do require JS has this you know thing where you say you compile it all into one big file you know you have your entry module and they figured out all dependencies makes it one thing right and you deliver that in production and that's actually a very very very good way to deliver JavaScript that's totally what you want to do it's super super efficient for small to medium and we don't really know where