Angular, webpack and gulp for an SPA: Part III

In Part I, we got webpack to run with gulp, watching our Angular app. In Part II, we added routing with ui-router. Here in Part III, we check out the magic of lazy loading.

What is lazy loading? Typically, with most Single Page Apps (SPAs), what the client actually receives is the index file, downloads the application script(s), and then the client-side framework and routing kick in. From that point on, whenever you navigate to a new ‘page’, the app doesn’t really request a new page — it was all downloaded from the get-go.

Well, this can be wasteful. If your user goes to the User Settings page, she doesn’t need to download app components for other pages. Wouldn’t it be nice if the user could download only what she needs for that current page, and then download other stuff as she needs them?  This is called lazy loading.

Continue reading “Angular, webpack and gulp for an SPA: Part III”

Angular, webpack and gulp for an SPA: Part III

Angular, webpack and gulp for an SPA: Part II

We left off last time in Part I where we set up Gulp to watch changes and feed those changes to webpack.

Let’s add a ‘page’ to our single-page app showing the captains in Star Trek. We’ll add routing to our entry file (index.js):

// we'll first 'require' the module
require('modules/captain-list/');

// add ui-router to help manage our routing
var startrekApp = angular.module("startrekApp", ['ui-router',
     'startrekApp.captainList'      
])
.config( ['$stateProvider', '$locationProvider', function($stateProvider, $locationProvider) {

    $stateProvider
    .state('captainList', {
          url: '/captains',
          templateUrl: 'captainList.html',
          controller: 'CaptainListController',
    })

    $locationProvider.html5Mode(true);
}]);

A few things are happening here. We first require the captain-list module – webpack will bundle those files into the namespace, which will allow us to specify it as a dependency for our startrekApp. Next, we use ui-router to create a ‘page’ for showing our captains. Note we don’t need the full path url.

In captain-list/, we have the typical suspects: our controller, our view, our css (or scss, in this case).

Continue reading “Angular, webpack and gulp for an SPA: Part II”

Angular, webpack and gulp for an SPA: Part II

Angular, webpack and gulp for an SPA: Part I

The latest hotness in front-end packing has arrived. Nope, it’s not browserify. I’m talking about Webpack.

I was first alerted to Webpack by Pete Hunt’s very cool talk on optimizing frontend performance at Instagram. Highly recommended.

Anyways, inspired, I decided to refactor an existing app of mine. This is a moderately-complex Angular Single Page App (“SPA”) (check it out here at crosslinks3.mit.edu).  I wanted to:

  1. Make the codebase more modular, because good architecture makes me happy
  2. Have the ability to lazy load modules
  3. Roll with a sane build system

Enter Webpack. It’s still relatively young in the game and there isn’t much good documentation. Perhaps I’m just dense, but Webpack’s docs reminds me of Angular’s in the early days, and those could (and did) make grown men weep.

This series takes you through the process of getting set up with Webpack and Gulp (Part I, what you’re reading now), modifying your Angular files to be webpack’able (Part 2) and optimizing fun (Part 3). I assume you know Angular, appreciate the advantages of modularizing, and already use a build system. I’m also focusing on SPAs.

Continue reading “Angular, webpack and gulp for an SPA: Part I”

Angular, webpack and gulp for an SPA: Part I