presentation-tooling

Workflows for the Modern Web

An introduction to the world of Frontend Tooling

You might be doing it wrong. Sorry.

Introductions!

Denmark

What is an "old-school" web app?

Tightly coupled server and client

Often has a server-side asset pipeline

Javascript (mostly) used decoratively

Everything is happening on the server

So... what is a modern web app?

Server: Data-driven API (typically JSON)

Client: Self-contained Javascript app

Communication through AJAX/WebSockets

The client is separate from the server

The browser does a lot of the work...

...but not all of it

What are we missing?

Where did the asset pipeline go? (hint: there is none)

So... who's going to bundle, optimize, and deploy this thing?

Take a wild guess...

You

Front-end Workflow

Nonchalantly stolen from "Book of Modern Frontend Tooling"

Let's get to it!

Section 1: Build Tools

The key to productivity:

Automation

Automate all the things!

Running your test spec – Automate it!

Concatenating scripts – Automate it!

Precompiling templates – Automate it!

Injecting dependencies – Automate it!

You get the idea...

A single tool for the entire build chain

Let one of these fellas help you out...

Grunt

Gruntfile.js

module.exports = function (grunt) {
  grunt.loadNpmTasks('grunt-task-a');
  grunt.loadNpmTasks('grunt-task-b');
  ...
});

...
grunt.initConfig({
  taskA: {
    options: {
      foo: 'bar'
    },
    glob: {
      src: ['glob/**/*.baz'],
      dest: 'dist/'
    }
  },
  taskB: {
    files: ['dist/**/*']
  }
});
...

grunt.registerTask('default', [
  'taskA',
  'taskB'
]);

gulp.js

gulpfile.js

var gulp  = require('gulp')
  , taskA = require('gulp-task-a')
  , taskB = require('gulp-task-b');
...

...
gulp.task('default', function () {
  return gulp.src('glob/**/*.baz')
    .pipe(taskA({
      foo: 'bar'
    }))
    .pipe(taskB())
    .pipe(gulp.dest('dist'));
});

The selection is vast

Automated workflow

Section 2: Dependency Management

vendors/

Once again:

Automation

We've already solved this in other environments

Node.js has npm

Ruby has RubyGems

PHP has Composer

Python has pip

Heck, .NET has NuGet

Why leave out the browser?

Get your app back on track...

Bower

Why do this...

Bonus step: Repeat the above after every single new release

...when you could just do this?

# Eureka!
$ bower install jquery

# Stay up-to-date...
$ bower update jquery

# Nah, let's go vanilla...
$ bower uninstall jquery

Integrate with your build system

In case you've forgotten: Automation

Get your dependencies under control

You know, productivity and all that

Section 3: Scaffolding

Writing boilerplate sucks

Last time, I promise:

Automation!

Write your boilerplate once

Use it over and over again

With just a couple of commands

Let me present...

yo

All the stuff we've talked about?

You can get it all in seconds:

# Scaffold out the front-end web app
$ yo webapp

# Install some dependencies
$ bower install --save jquery bootstrap

# Inject the dependencies into the app
$ grunt bowerInstall

# Boot up a development server...
$ grunt serve

# ...or build the app for production
$ grunt

Now you've got no excuse

For not building awesome web apps

Questions?

By the way...

Yeoman + Bower + Grunt

$ yo reveal
$ yo reveal:slide "Workflows for the Modern Web"
$ yo reveal:slide "Section 1: Build Tools"
$ ...
$ bower install # Yo actually takes care of this
$ grunt server

Reveal.js generator: https://github.com/slara/generator-reveal

Thanks!