Slide 1
Slide 1 text
AUTOMATING FRONT-END
WORKFLOW
WITH YEOMAN
@addyosmani TOKYO, Oct 2013.
Slide 2
Slide 2 text
The front-end tooling landscape
is getting more complex.
Slide 3
Slide 3 text
Boilerplate Abstractions
Frameworks Testing Docs
Workflow Dependency
management Performance
optimization Build
Continuous Integration
Deployment Version control
Slide 4
Slide 4 text
Automate repetitive tasks
to stay effective.
Slide 5
Slide 5 text
The average front-end
workflow today
Slide 6
Slide 6 text
Setup
Scaffolding
Download libraries
Download templates
Download frameworks
Slide 7
Slide 7 text
Develop
Watch Sass / Less / Stylus
Watch CoffeeScript
Watch Jade / Haml
LiveReload
JS / CSS Linting
Slide 8
Slide 8 text
Code linting
Running unit tests
Compile everything
Minify and concatenate
Generate images / icons
Optimize performance
HTTP Server
Deployment Build
Slide 9
Slide 9 text
This workflow can be
automated.
Slide 10
Slide 10 text
No content
Slide 11
Slide 11 text
Scaffold, write less with Yo
Build, preview and test with Grunt
Manage dependencies with Bower
Slide 12
Slide 12 text
No content
Slide 13
Slide 13 text
Helps run repetitive tasks.
Slide 14
Slide 14 text
Alternative to
Rake/Cake/Make/Ant
Slide 15
Slide 15 text
Linting
Compiling
Minification
Testing
Conversion
Documentation
Deployment
And more
Slide 16
Slide 16 text
Huge ecosystem.
Slide 17
Slide 17 text
Fantastic for simple and complex projects.
♥
Slide 18
Slide 18 text
touch package.json Gruntfile.js
Slide 19
Slide 19 text
package.json
Slide 20
Slide 20 text
{
! "name": "awesome-app",
! "version": "0.0.1",
! "devDependencies": {
! ! "grunt": "~0.4.1",
! ! "grunt-contrib-jshint": "~0.6.3",
! ! "grunt-contrib-uglify": "~0.2.0"
! }
}
Specify Grunt plugins and metadata.
Slide 21
Slide 21 text
Gruntfile.js
Slide 22
Slide 22 text
module.exports = function(grunt){
! grunt.initConfig({
! ! uglify: {
! ! ! build: {
src: 'app.js',
dest: 'build/app.min.js'}
! ! },
! ! jshint: { all: ['**/*.js']}
! });
! grunt.loadNpmTasks('grunt-contrib-uglify');
! grunt.loadNpmTasks('grunt-contrib-jshint');
! grunt.registerTask('default', ['jshint', 'uglify']);
};
Config tasks and load plugins
Slide 23
Slide 23 text
$ npm install -g grunt-cli
Slide 24
Slide 24 text
$ npm install
Slide 25
Slide 25 text
$ grunt
Running “jshint:all” (jshint) task
Running “uglify:build” (uglify) task
Done.
Slide 26
Slide 26 text
Not bad!
Slide 27
Slide 27 text
$ npm install grunt- --save-dev
Slide 28
Slide 28 text
Grunt
Pagespeed
Slide 29
Slide 29 text
task tip
grunt-responsive-images
Create multi-resolution images from
a directory for src-set/srcN
bit.ly/grunt-resp
Slide 30
Slide 30 text
task tip
grunt-contrib-imagemin
Lower page-weight by applying
optimizations to JPG/PNG/Gif
bit.ly/grunt-image
Slide 31
Slide 31 text
Build directly from DevTools
Slide 32
Slide 32 text
grunt-devtools extension
Slide 33
Slide 33 text
A first look at something new I’ve
been hacking on
Slide 34
Slide 34 text
grunt-uncss
Remove unused CSS across your
project at build time.
bit.ly/uncss
Slide 35
Slide 35 text
A few weeks ago..
Slide 36
Slide 36 text
No content
Slide 37
Slide 37 text
Get audits for unused CSS in
your page with DevTools
Slide 38
Slide 38 text
Chrome DevTools Audits
Slide 39
Slide 39 text
grunt-uncss can remove
unused CSS at build time
Slide 40
Slide 40 text
No content
Slide 41
Slide 41 text
120KB
11KB
What about Bootstrap alone?
Slide 42
Slide 42 text
No content
Slide 43
Slide 43 text
A package manager for the web.
Slide 44
Slide 44 text
1. That lib is 6 months old? Better update.
2. Open up the site
3. Download the lib
4. Copy from ~/Downloads
5. Paste to app folder
6. Wire in with script tags
The old way of doing things.
Slide 45
Slide 45 text
New hotness.
Slide 46
Slide 46 text
$ npm install -g bower
Slide 47
Slide 47 text
$ bower search
Slide 48
Slide 48 text
$ bower search angular
Search results:
angular git://github.com/angular/bower-angular.git
angular-mocks git://github.com/angular/bower-angular-mocks.git
angular-resource git://github.com/angular/bower-angular-
resource.git
angular-cookies git://github.com/angular/bower-angular-cookies.git
angular-sanitize git://github.com/angular/bower-angular-
sanitize.git
angular-bootstrap git://github.com/angular-ui/bootstrap-bower.git
........
Slide 49
Slide 49 text
$ bower install
Slide 50
Slide 50 text
$ bower install angular --save-dev
bower install angular#1.0.8
angular#1.0.8 app/bower_components/angular
Slide 51
Slide 51 text
$ bower list
Slide 52
Slide 52 text
$ bower list
bower check-new Checking for new versions of the project
dependencies..
testapp#0.0.0 /Users/addyo/projects/testapp
ᵓᴷᴷ angular#1.0.8 (latest is 1.2.0-rc.3)
ᵓᴷᵣ bootstrap#3.0.0
ᴹ ᵋᴷᴷ jquery#1.9.1 (2.0.3 available)
ᵓᴷᴷ jquery#1.9.1 (latest is 2.0.3)
ᵋᴷᴷ modernizr#2.6.2
Slide 53
Slide 53 text
Runs over:
Git
HTTP(s)
Zip
npm
Slide 54
Slide 54 text
You can even wire up deps
from the command-line!
Slide 55
Slide 55 text
No content
Slide 56
Slide 56 text
grunt-bower-install
bit.ly/grunt-bower
Slide 57
Slide 57 text
$ npm install grunt-bower install --save-dev
$ bower install jquery --save
$ grunt bower-install
Slide 58
Slide 58 text
http:/
/bower.io
Slide 59
Slide 59 text
bit.ly/bowersearch
Slide 60
Slide 60 text
No content
Slide 61
Slide 61 text
Yo is your gateway to this
magical new world.
Slide 62
Slide 62 text
It scaffolds out boilerplate.
Slide 63
Slide 63 text
Can prescribe helpful Grunt tasks.
Slide 64
Slide 64 text
Can automatically install
dependencies you need.
Slide 65
Slide 65 text
No content
Slide 66
Slide 66 text
$ npm install -g yo
Slide 67
Slide 67 text
This installs yo, grunt and bower
for you.
Slide 68
Slide 68 text
$ yo
[?] What would you like to do?
›❯ Install a generator
Run the Angular generator (0.4.0)
Run the Backbone generator (0.1.9)
Run the Blog generator (0.0.0)
Run the jQuery generator (0.1.4)
Run the Gruntfile generator (0.0.6)
(Move up and down to reveal more choices)
Slide 69
Slide 69 text
$ yo
[?] What would you like to do? Install a generator
[?] Search NPM for generators: jquery
[?] Here's what I found. Install one?
›❯ generator-jquery-boilerplate
generator-jquery-mobile
Search again
Return home
Slide 70
Slide 70 text
$ yo jquery-boilerplate
create .jshintrc
create CONTRIBUTING.md
create Gruntfile.js
create HISTORY.md
create boilerplate.jquery.json
create demo/index.html
create dist/jquery.boilerplate.js
create dist/jquery.boilerplate.min.js
create package.json
create src/jquery.boilerplate.coffee
create src/jquery.boilerplate.js
Slide 71
Slide 71 text
Boom. You just created a jQuery
plugin.
Slide 72
Slide 72 text
Installing a custom generator.
Slide 73
Slide 73 text
$ npm install generator-webapp -g
Slide 74
Slide 74 text
$ yo webapp
Out of the box I include H5BP and jQuery.
[ ? ] What more would you like?
›❯ Bootstrap for Sass
RequireJS
Modernizr
Slide 75
Slide 75 text
No content
Slide 76
Slide 76 text
Boilerplate - H5BP, Bootstrap, Modernizr
Abstractions - optionally Sass, CoffeeScript, grunt-
bower-install available by default.
Performance optimization - optimize images,
scripts, stylesheets, get lean Modernizr builds,
concurrently run all of these tasks at build time.
Testing and build process - Mocha, Jasmine,
PhantomJS
Boom. Just created a webapp!
Slide 77
Slide 77 text
$ grunt server
Slide 78
Slide 78 text
You can now edit and LiveReload!
Slide 79
Slide 79 text
Make changes. Save. Browser automatically refreshes.
Slide 80
Slide 80 text
Fantastic for getting a real-time
view of application state.
Slide 81
Slide 81 text
Edits can also refresh all your
devices. Instant real-device previews.
Slide 82
Slide 82 text
Cross-device live reload
bit.ly/gruntsync
Slide 83
Slide 83 text
No content
Slide 84
Slide 84 text
What about frameworks?
Slide 85
Slide 85 text
$ npm install generator-angular -g
Slide 86
Slide 86 text
$ yo angular
[?] Would you like to include Bootstrap? (Y/n)
Slide 87
Slide 87 text
$ yo angular
[?] Would you like to include Bootstrap? (Y/n)
[?] Would you like to use the SCSS version?
Slide 88
Slide 88 text
$ yo angular
[?] Would you like to include Bootstrap? (Y/n)
[?] Would you like to use the SCSS version?
[?] Which modules would you like to include?
(Press to select)
›❯ angular-resource.js
angular-cookies.js
angular-sanitize.js
Slide 89
Slide 89 text
No content
Slide 90
Slide 90 text
Generators also available for:
Polymer
Backbone
Ember
Flight
CanJS
& many other frameworks.
Slide 91
Slide 91 text
$ yo chrome-extension
[?] What would you like to call this extension?
[?] How would you describe it?
[?] Would you like more UI Features?
›❯ Options Page
Content Scripts
Omnibox
[?] Would you like to use permissions? (Press to select)
›❯ Tabs
Bookmarks
Cookies
History
Management
Slide 92
Slide 92 text
http:/
/yeoman.io
Slide 93
Slide 93 text
Generator search
Slide 94
Slide 94 text
Work less. Do more.
Build awesome.
Slide 95
Slide 95 text
Thank you.