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.

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