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. View Slide

  2. HI!
    @timgthomas
    avention.com

    View Slide

  3. THE STORY SO FAR

    View Slide

  4. THE STORY SO FAR

    View Slide

  5. THE STORY SO FAR

    View Slide

  6. THE STORY SO FAR

    View Slide

  7. ENTER BROCCOLI

    View Slide

  8. BROCCOLI
    Broccoli

    [ files ]

    [ files ]



    View Slide

  9. HOW BROCCOLI DIFFERS

    View Slide

  10. HOW BROCCOLI DIFFERS
    high productivity
    rich plugin ecosystem

    View Slide

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

    View Slide

  12. THE ESSENTIALS

    View Slide

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

    View Slide

  14. SETUP
    Brocfile.js

    Terminal

    /app

    View Slide

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

    View Slide

  16. STARTING BROCCOLI
    > broccoli serve
    :4200

    /app


    View Slide

  17. Demo
    THE ESSENTIALS

    View Slide

  18. BROCCOLI PLUGINS

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  23. Demo
    WORKING WITH PLUGINS

    View Slide

  24. "ADVANCED" BROCCOLI

    View Slide

  25. 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 Slide

  26. 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 Slide

  27. BROCCOLI + REACT

    View Slide

  28. BROCCOLI + REACT

    View Slide

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

    View Slide

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




    View Slide

  31. Demo
    BROCCOLI + REACT

    View Slide

  32. GRUNT-BROCCOLI

    View Slide

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

    View Slide

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

    /app


    View Slide

  35. Demo
    GRUNT-BROCCOLI

    View Slide

  36. WHEN THINGS GO WRONG

    View Slide

  37. WHEN THINGS GO WRONG
    > broccoli build
    /dist

    /app


    View Slide

  38. Demo
    WHEN THINGS GO WRONG

    View Slide

  39. WHEN THINGS GO WRONG
    /app

    /dist


    > broccoli build

    View Slide

  40. WHEN THINGS GO WRONG
    /tmp

    /dist

    /app



    > broccoli build

    View Slide

  41. Demo
    WHEN THINGS GO WRONG

    View Slide

  42. FURTHER READING

    View Slide

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

    View Slide

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

    View Slide