Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Chocolate-Covered Vegetables: Tasty Workflows with Broccoli

timgthomas
January 29, 2016

Chocolate-Covered Vegetables: Tasty Workflows with Broccoli

Arguably, one of the best trends in software is that building it requires less and less overhead. While once developers used punch cards to perform even the most basic of mathematical calculations, we can now make changes to live web sites in a browser and see the results instantly. In this session, you'll learn how to use Broccoli, a blazingly-fast new asset pipeline tool, to dramatically cut down the time it takes to build for the web. We'll also explore other tools and methods that work well with Broccoli, and build the web workflow you've always hungered for.

timgthomas

January 29, 2016
Tweet

More Decks by timgthomas

Other Decks in Technology

Transcript

  1. HI!
    @timgthomas
    avention.com

    View full-size slide

  2. THE STORY SO FAR

    View full-size slide

  3. THE STORY SO FAR

    View full-size slide

  4. THE STORY SO FAR

    View full-size slide

  5. THE STORY SO FAR

    View full-size slide

  6. ENTER BROCCOLI

    View full-size slide

  7. BROCCOLI
    Broccoli

    [ files ]

    [ files ]



    View full-size slide

  8. HOW BROCCOLI DIFFERS

    View full-size slide

  9. HOW BROCCOLI DIFFERS
    high productivity
    rich plugin ecosystem

    View full-size slide

  10. HOW BROCCOLI DIFFERS
    asset pipeline
    tree-based
    fast incremental builds
    inherently chainable

    View full-size slide

  11. THE ESSENTIALS

    View full-size slide

  12. INSTALLATION
    > npm install broccoli-cli -g
    > npm install broccoli --save-dev

    View full-size slide

  13. SETUP
    Brocfile.js

    Terminal

    /app

    View full-size slide

  14. THE BROCFILE
    module.exports = 'app';

    View full-size slide

  15. STARTING BROCCOLI
    > broccoli serve
    :4200

    /app


    View full-size slide

  16. Demo
    THE ESSENTIALS

    View full-size slide

  17. BROCCOLI PLUGINS

    View full-size slide

  18. INSTALLING PLUGINS
    > npm install [plugin] --save-dev

    View full-size slide

  19. INSTALLING PLUGINS
    > npm install broccoli-jade --save-dev

    View full-size slide

  20. USING PLUGINS
    var jadeify = require('broccoli-jade');
    var app = 'app';
    app = jadeify(app);
    module.exports = app;

    View full-size slide

  21. USING (NEW) PLUGINS
    var BroccoliSass = require('broccoli-sass');
    var app = 'app';
    app = new BroccoliSass(app);
    module.exports = app;

    View full-size slide

  22. Demo
    WORKING WITH PLUGINS

    View full-size slide

  23. "ADVANCED" BROCCOLI

    View full-size slide

  24. CHAINING PLUGINS
    var BroccoliCoffee = require('broccoli-coffee'),
    es6ify =
    require('broccoli-babel-transpiler');
    var scripts = 'app';
    scripts = new BroccoliCoffee(scripts);
    scripts = es6ify(scripts);
    module.exports = scripts;

    View full-size slide

  25. SPLITTING TREES
    var BroccoliMergeTrees =
    require('broccoli-merge-trees');
    // JavaScript
    var scripts = 'app/scripts';
    // CSS
    var styles = 'app/styles';
    // Final Output
    module.exports =
    new BroccoliMergeTrees([ scripts, styles ]);

    View full-size slide

  26. BROCCOLI + REACT

    View full-size slide

  27. BROCCOLI + REACT

    View full-size slide

  28. BROCCOLI + REACT
    jsx compilation
    dependency lookup
    css preprocessing
    live reloading

    View full-size slide

  29. BROCCOLI + REACT
    jsx compilation
    dependency lookup
    css preprocessing
    live reloading
    broccoli-babel-transpiler
    broccoli-browserify
    broccoli-sass
    broccoli-browser-sync




    View full-size slide

  30. Demo
    BROCCOLI + REACT

    View full-size slide

  31. GRUNT-BROCCOLI

    View full-size slide

  32. GRUNT-BROCCOLI
    module.exports = function(grunt) {
    grunt.initConfig({
    broccoli: {
    dev: {}
    }
    });
    };

    View full-size slide

  33. GRUNT-BROCCOLI
    > grunt broccoli::serve
    :4200

    /app


    View full-size slide

  34. Demo
    GRUNT-BROCCOLI

    View full-size slide

  35. WHEN THINGS GO WRONG

    View full-size slide

  36. WHEN THINGS GO WRONG
    > broccoli build
    /dist

    /app


    View full-size slide

  37. Demo
    WHEN THINGS GO WRONG

    View full-size slide

  38. WHEN THINGS GO WRONG
    /app

    /dist


    > broccoli build

    View full-size slide

  39. WHEN THINGS GO WRONG
    /tmp

    /dist

    /app



    > broccoli build

    View full-size slide

  40. Demo
    WHEN THINGS GO WRONG

    View full-size slide

  41. FURTHER READING

    View full-size slide

  42. FURTHER READING
    bit.ly/ccv-broccoli-blog
    bit.ly/ccv-broccoli-react
    bit.ly/ccv-broccoli-slides
    bit.ly/ccv-broccoli-code

    View full-size slide

  43. Thanks!
    bit.ly/ccv-broccoli-slides
    broccolijs.com
    @timgthomas

    View full-size slide