This course has been updated! We now recommend you take the Webpack 4 Fundamentals course.
Table of Contents
Introduction
Introduction
Dave begins the course with an overview of his work at both Test Double and Shopify and discusses why workflow is so important to front-end development.
Web Apps
Traditional web applications are "the heavy". They handle the templates, generating front-end code, MVC, authentication, security, and storage. Modern web applications tend to separate the responsibilities. Authentication and security stay on the server. The front-end logic is moved to a separate workflow.
Tooling
Traditionally, tooling like compiling, minifying, modularizing, etc. has been managed by the server. Moving from one server environment to another is very difficult. Modern tooling allows for a normalization layer on the front-end. Dave discusses tooling options like Node and Node Packaged Modules.
Grunt
Dave gives a very brief overview about Grunt. There are two main pieces: The command line interface and the Gruntfile.js. He will be diving deeper into Grunt throughout the course.
Project Setup
Dave demonstrates a few ways to set up the project using both GitCrawl and GitX. Either tool can be used to move backward and forward through the history of the project. He also gives some troubleshooting tips for setting up this workflow.
Starting Point
In this course, Dave will be working with a game: The Banner Saga. The game has been pre-constructed so the focus will be on slicing it up and creating a maintainable workflow. Dave reviews all the assets in the project.
Working with Grunt
NPM Init & Grunt
The first step is to get NPM setup. Doing an "npm init" command will take you through a wizard with all the necessary configuration. Dave demonstrates the process of installing Grunt.
Gruntfile.js
Dave creates a config object inside the Gruntfile.js file. The moves all the required JavaScript library definitions there so they can be concatenated during the build phase. The build can be initiated by running the "grunt" command.
Globs & CoffeeScript
With the Gruntfile.js created, Dave adds some additional configuration. He introduces the concept of Globs. They ease the inclusion of framework dependencies and library files by automatically picking up files in the build process. Dave also compares Gruntfile.js with Gruntfile.coffee.
Grunt Watch
The grunt-contrib-watch task will continuously watch any of the included files in the project for changes. When a change occurs, it will re-run all tasks specified in the watch task. This allows developers to streamline their workflow by not having to run grunt after each change.
CSS Preprocessors
Dave adds the CSS preprocessor, LESS, into the workflow. He does this by adding the Grunt LESS task and introduces the concept of "options" in the Gruntfile.
LESS Mixins
Using a few LESS mixins, Dave demonstrates how to base-64 encode images and the pros and cons of it. He also show a few other mixins that helped his workflow when building the game.
LESS Watch Tasks
Right now, the watch task we created do not monitor the LESS files. Dave separates his watch task to include a JS target and a LESS target.
Grunt Documentation
Dave takes a break from the hands-on portion of the course to look at the Grunt documentation. Specifically he notes the configuring tasks section.
Splitting Concerns & Using Copy
As the Gruntfile grows, there can be confusion between the list of files and the tasks associated with them. By separating the files and the tasks, the configuration of those tasks becomes cleaner. Dave also uses the copy task to copy our index.html file into the generated folder along with the other build files.
Custom Server Tasks
Using the Grunt registerTask method, custom tasks can be created. In this example, Dave creates a custom task called "server" which will set up a static file development server.
Finishing the Custom Task
Dave answers a few general questions about the usefulness of the Node server. He then finishes the custom server task by instantiating the Express server and configuring the deployment.
Using Express Compress
Setting up the development environment to mirror production as much as possible will remove a whole category of bugs when moving to production. The Express compress method turns on gzip compression for the application's assets.
Live Reload
Live-reload is a Chrome extension that makes switching from the editor to the browser faster. The Grunt watch task includes the live-reload task so installing the plugin is the only step.
Live Reload Alternative
The Grunt live-reload task also has a JavaScript snippet that can added to implement the live-reload functionality without the Chrome extension. The drawback of this is you have to modify the HTML to turn off the reloading.
Chrome Workspaces
In the Chrome Developer Tools, adding a folder to the workspace allows developers to edit their source files in Chrome and save the changes. With the Grunt watch task running, changes will automatically reload the browser.
Grunt Clean & Grunt LESS
The Grunt clean task will remove any workspace added to the "workspaces" target. This wouldn't be a task to include as a part of the project's automation layer so it will be run manually as needed. Dave also updates the LESS plugin to use the merged version.
The DIST Workflow
Dave adds the "dist" target to the workflow. This will involve minifying the CSS and JavaScript and copying the HTML to the correct directory.
Minifying JavaScript
Grunt has a nice API for adding metadata to distribution files. It supports reading JSON or YAML. This metadata could include dates, authors, copyrights, etc.
Grunt Open
Grunt open will automatically launch a new browser. This can be somewhat annoying when using live-reload, though.
Match Dependencies
Including each Grunt plugin every time can be tedious. Using matchdep, Grunt will automatically load any dependencies that match the specified pattern.
Simulating Production Assets
Using the prodsim task, application assets will be served in a way that simulates a production environment. This includes minifying, compressing, and gzipping files.
Vendor JavaScript Libraries & CoffeeScript
Dave separates his "js" target in the Gruntfile to include a "vendor" bundle and a "src" bundle. They are still combined in the "concat" task, however this separation will make using other dependency-management plugins like Bower much easier. Dave also replaces all the JavaScript source files with CoffeeScript files for comparison purposes.
Compiling CoffeeScript
Now that all the source code has been ported to CoffeeScript, Dave adds a coffee task to the configuration file. He also looks at Grunt Newer to make the watch task more efficient.
Beyond Grunt
Bower
Similar to NPM, Bower manages packages that are consumed in the browser. This would include any of the files from the "vendor" folder in this application.
Reorganizing the Application
Now that the application includes Bower and NPM modules, Dave organizes all the source code into an "app" directory. He also creates the necessary Angular template files and install the Grunt task for pre-compiling these templates.
Sourcemaps
Sourcemaps make debugging in the browser easier by tying the generated CSS/JS back to the original file. For example, showing the correct .coffee file a line of generated JavaScript came from.
Backbone
To prove the workflow is robust, Dave swaps out Angular for Backbone. This can be done with minimal changes to the Gruntfile and build processes. Most of the changes are Backbone-specific.
Yeoman Introduction
Yeoman scaffolds out a new application by writing the Grunt configuration and pulling in relevant tasks. It includes generators for 100's of frameworks and can quickly streamline web application development.
Browserify
Dave sidetracks from his Yeoman example to discuss Browserify. Browserify incorporates CommonJS to recursively bundle all required modules into a single file. Dave also shows how to add source maps with CommonJS
Yeoman Workflow
After introducing Yeoman in a previous video, Dave walks through the installation and configuration files. Hey also demonstrates the generators inside of Yeoman.
Lineman Workflow
Lineman, like Yeoman, is helps scaffold an application. While Yeoman covers a boarder range of applications, Lineman tends to focus more on rich client MVC applications.
Lineman Spec and Build
Lineman-spec kicks off a test runner. This happens in parallel with Lineman-run. Any tests in the spec folder would execute. Lineman-build generates the production-ready assets. Dave also overviews the scaffolding that ships with Lineman.
Test-Driven Development Questions
Dave answers a few audience questions about using Lineman's test-driven development. Specifically, should Lineman be used over Karma in an Angular application.
End-to-End Testing
Dave demonstrates some techniques around end-to-end testing using Angular and Protractor. He simulates a backend using server.js inside Lineman
Push State Simulation
Push state simulation is built into Angular and can integrate with Lineman. When enabled, server request will be intercepted by the server.js file and allow for URLs that don't use the hash tag.
Integrating with Rails
An audience member asks how this workflow integrates with deployment frameworks like Rails Asset Pipeline. Dave shows how they handle this at Shopify. Dave also answers some additional audience questions.
Unit Testing Grunt Plugins
As some bonus content, Dave demonstrates how to unit test Grunt plugins. This is done by using Node Unit. A more robust way is to use grunt-jasmine-bundle.
Writing a blog with Lineman
Dave ends the course showing how to use Lineman to create static markdown for a blog.
Wrap-up
Final audience comments and questions.