Automating Front-end Workflow With Yeoman

An introduction to Yeoman - a workflow of tools for keeping you productive on the front-end.

Transcript

1. AUTOMATING FRONT-END
   WORKFLOW
   WITH YEOMAN
   @addyosmani TOKYO, Oct 2013.
   

   View Slide

2. The front-end tooling landscape
   is getting more complex.
   

   View Slide

3. Boilerplate Abstractions
   Frameworks Testing Docs
   Workflow Dependency
   management Performance
   optimization Build
   Continuous Integration
   Deployment Version control
   

   View Slide

4. Automate repetitive tasks
   to stay effective.
   

   View Slide

5. The average front-end
   workflow today
   

   View Slide

6. Setup
   Scaffolding
   Download libraries
   Download templates
   Download frameworks
   

   View Slide

7. Develop
   Watch Sass / Less / Stylus
   Watch CoffeeScript
   Watch Jade / Haml
   LiveReload
   JS / CSS Linting
   

   View Slide

8. Code linting
   Running unit tests
   Compile everything
   Minify and concatenate
   Generate images / icons
   Optimize performance
   HTTP Server
   Deployment Build
   

   View Slide

9. This workflow can be
   automated.
   

   View Slide

10. View Slide

11. Scaffold, write less with Yo
    Build, preview and test with Grunt
    Manage dependencies with Bower
    

    View Slide

12. View Slide

13. Helps run repetitive tasks.
    

    View Slide

14. Alternative to
    Rake/Cake/Make/Ant
    

    View Slide

15. Linting
    Compiling
    Minification
    Testing
    Conversion
    Documentation
    Deployment
    And more
    

    View Slide

16. Huge ecosystem.
    

    View Slide

17. Fantastic for simple and complex projects.
    ♥
    

    View Slide

18. touch package.json Gruntfile.js
    

    View Slide

19. package.json
    

    View Slide

20. {
    ! "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.
    

    View Slide

21. Gruntfile.js
    

    View Slide

22. 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
    

    View Slide

23. $ npm install -g grunt-cli
    

    View Slide

24. $ npm install
    

    View Slide

25. $ grunt
    Running “jshint:all” (jshint) task
    Running “uglify:build” (uglify) task
    Done.
    

    View Slide

26. Not bad!
    

    View Slide

27. $ npm install grunt- --save-dev
    

    View Slide

28. Grunt
    Pagespeed
    

    View Slide

29. task tip
    grunt-responsive-images
    Create multi-resolution images from
    a directory for src-set/srcN
    bit.ly/grunt-resp
    

    View Slide

30. task tip
    grunt-contrib-imagemin
    Lower page-weight by applying
    optimizations to JPG/PNG/Gif
    bit.ly/grunt-image
    

    View Slide

31. Build directly from DevTools
    

    View Slide

32. grunt-devtools extension
    

    View Slide

33. A first look at something new I’ve
    been hacking on
    

    View Slide

34. grunt-uncss
    Remove unused CSS across your
    project at build time.
    bit.ly/uncss
    

    View Slide

35. A few weeks ago..
    

    View Slide

36. View Slide

37. Get audits for unused CSS in
    your page with DevTools
    

    View Slide

38. Chrome DevTools Audits
    

    View Slide

39. grunt-uncss can remove
    unused CSS at build time
    

    View Slide

40. View Slide

41. 120KB
    11KB
    What about Bootstrap alone?
    

    View Slide

42. View Slide

43. A package manager for the web.
    

    View Slide

44. 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.
    

    View Slide

45. New hotness.
    

    View Slide

46. $ npm install -g bower
    

    View Slide

47. $ bower search
    

    View Slide

48. $ 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
    ........
    

    View Slide

49. $ bower install
    

    View Slide

50. $ bower install angular --save-dev
    bower install angular#1.0.8
    angular#1.0.8 app/bower_components/angular
    

    View Slide

51. $ bower list
    

    View Slide

52. $ 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
    

    View Slide

53. Runs over:
    Git
    HTTP(s)
    Zip
    npm
    

    View Slide

54. You can even wire up deps
    from the command-line!
    

    View Slide

55. View Slide

56. grunt-bower-install
    bit.ly/grunt-bower
    

    View Slide

57. $ npm install grunt-bower install --save-dev
    $ bower install jquery --save
    $ grunt bower-install
    

    View Slide

58. http:/
    /bower.io
    

    View Slide

59. bit.ly/bowersearch
    

    View Slide

60. View Slide

61. Yo is your gateway to this
    magical new world.
    

    View Slide

62. It scaffolds out boilerplate.
    

    View Slide

63. Can prescribe helpful Grunt tasks.
    

    View Slide

64. Can automatically install
    dependencies you need.
    

    View Slide

65. View Slide

66. $ npm install -g yo
    

    View Slide

67. This installs yo, grunt and bower
    for you.
    

    View Slide

68. $ 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)
    

    View Slide

69. $ 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
    

    View Slide

70. $ 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
    

    View Slide

71. Boom. You just created a jQuery
    plugin.
    

    View Slide

72. Installing a custom generator.
    

    View Slide

73. $ npm install generator-webapp -g
    

    View Slide

74. $ yo webapp
    Out of the box I include H5BP and jQuery.
    [ ? ] What more would you like?
    ›❯ Bootstrap for Sass
    RequireJS
    Modernizr
    

    View Slide

75. View Slide

76. 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!
    

    View Slide

77. $ grunt server
    

    View Slide

78. You can now edit and LiveReload!
    

    View Slide

79. Make changes. Save. Browser automatically refreshes.
    

    View Slide

80. Fantastic for getting a real-time
    view of application state.
    

    View Slide

81. Edits can also refresh all your
    devices. Instant real-device previews.
    

    View Slide

82. Cross-device live reload
    bit.ly/gruntsync
    

    View Slide

83. View Slide

84. What about frameworks?
    

    View Slide

85. $ npm install generator-angular -g
    

    View Slide

86. $ yo angular
    [?] Would you like to include Bootstrap? (Y/n)
    

    View Slide

87. $ yo angular
    [?] Would you like to include Bootstrap? (Y/n)
    [?] Would you like to use the SCSS version?
    

    View Slide

88. $ 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
    

    View Slide

89. View Slide

90. Generators also available for:
    Polymer
    Backbone
    Ember
    Flight
    CanJS
    & many other frameworks.
    

    View Slide

91. $ 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
    

    View Slide

92. http:/
    /yeoman.io
    

    View Slide

93. Generator search
    

    View Slide

94. Work less. Do more.
    Build awesome.
    

    View Slide

95. Thank you.
    

    View Slide