The ability to reply to discussions is limited to PRO members. Want to join in the discussion? Click here to subscribe now.

Compile an Angular Application Written in ES6

Compile an Angular Application Written in ES6

5:31
Angular 2 leverages new language features in ES6 and TypeScript so that we can organize and express our ideas better. By writing our Angular 1.x application in ES6, we can create a surprising resemblance to an Angular 2 application. To do this, we need to set up Webpack and Gulp to convert our code into something the browser can safely understand. In this lesson, we will learn how to configure Webpack to process our source code and then hook it into Gulp as part of our build system.
Watch this lesson now
Avatar
egghead.io

Angular 2 leverages new language features in ES6 and TypeScript so that we can organize and express our ideas better. By writing our Angular 1.x application in ES6, we can create a surprising resemblance to an Angular 2 application. To do this, we need to set up Webpack and Gulp to convert our code into something the browser can safely understand. In this lesson, we will learn how to configure Webpack to process our source code and then hook it into Gulp as part of our build system.

Avatar
Robert

I've never quite understood the benefit of using the raw loader to load HTML into the JS source. I'm presuming it's a better alternative than referring to template paths directly?

Avatar
Lukas

The easy answer is that it reduces HTTP calls which happen to be one of the most expensive operations you can do on a mobile device. In most cases it is better to bundle everything up and incur the payload cost upfront.

In reply to Robert
Avatar
Ivo

I got your point Lukas but is there any best practice about how big the bundle should be to start considering breaking it in smaller parts? I'm pretty new to webpack and maybe that is why this is weird for me.

Thanks

In reply to Lukas
Avatar
Lukas

Good question Ivo :D This is a bit more art than science but an easy rule of thumb to start out with is separating your vendor files from your source files. From there, I probably put everything into single bundles as they are going to get loaded anyways. To be clear, during development I will loosen this up a bit and avoid minification, etc to make it easier to debug but in production, you really want a tight, optimized build.

In reply to Ivo
Avatar
Arthur Groupp

Maybe it's stupid question, but why we don't just use webpack with webpack-dev-server? What for we need gulp + browser-sync + etc with its complex configuration? We could solve this problem with just one configuration file and few modules.

In reply to egghead.io
Avatar
Lukas

Hi Arthur -- not a "stupid question" but a good one :D The reason I use gulp + webpack is because it allows me to sequence things besides just bundling and serving the application. With that said, there are a near infinite ways to accomplish the same thing via NPM, webpack, etc and to that, I say use the configuration that is most comfortable for you.

In reply to Arthur Groupp
HEY, QUICK QUESTION!
Joel's Head
Why are we asking?