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. Chocolate-Covered Vegetables
   TASTY WORKFLOWS WITH BROCCOLI
   

   View Slide

2. TIM G. THOMAS
   @timgthomas
   timgthomas.com
   Avention.com
   

   View Slide

3. SPONSORS
   

   View Slide

4. BROCCOLI
   

   View Slide

5. BROCCOLI
   Broccoli
   
   
   
   
   
   ›
   ›
   

   View Slide

6. BROCCOLI
   @jo_liss
   github.com/broccolijs
   broccolijs.com
   

   View Slide

7. WHY BROCCOLI
   Fast
   Chainable
   

   View Slide

8. WHAT’S DIFFERENT?
   Trees
   “Incremental” builds
   

   View Slide

9. GETTING STARTED
   

   View Slide

10. GETTING STARTED
    > npm install broccoli-cli -g
    > npm install broccoli
    

    View Slide

11. SETUP
    Brocfile.js
    
    Terminal
    
    /app
    
    

    View Slide

12. USE
    

    View Slide

13. USE
    > broccoli serve
    :4200
    
    /app
    
    ›
    

    View Slide

14. USE
    > broccoli build
    /dist
    
    /app
    
    ›
    

    View Slide

15. THE BASICS
    

    View Slide

16. THE BASICS
    module.exports = ‘app’;
    

    View Slide

17. INSTALLING PLUGINS
    > npm install broccoli-[plugin] --save
    

    View Slide

18. USING PLUGINS
    var doSomething =
    require(‘broccoli-’);
    var app = ‘app’;
    app = doSomething(app);
    module.exports = app;
    

    View Slide

19. CHAINING PLUGINS
    var doSomething = require(‘...’),
    doSomethingElse = require(‘...’);
    var app = ‘app’;
    app = doSomething(app);
    app = doSomethingElse(app);
    module.exports = app;
    

    View Slide

20. DEMO: THE BASICS
    

    View Slide

21. ADVANCED PLUGINS
    

    View Slide

22. “MERGE-TREES”
    var mergeTrees =
    require('broccoli-merge-trees');
    module.exports =
    mergeTrees([ 'app', 'test' ]);
    /test
    
    /dist
    
    /app
    
    ›
    +
    

    View Slide

23. “ENV”
    var env =
    require('broccoli-env').getEnv();
    if (env === 'production') {
    ...
    }
    

    View Slide

24. “ENV”
    > BROCCOLI_ENV = ‘development’
    > broccoli build
    

    View Slide

25. “CONCAT”
    var concat =
    require('broccoli-concat');
    module.exports = concat('js', {
    inputFiles: [ '**/*.js' ]
    });
    app.js
    
    scripts.js
    
    vendor.js
    
    ›
    +
    

    View Slide

26. PLUGINS
    broccoliplugins.com
    

    View Slide

27. GRUNT-BROCCOLI
    

    View Slide

28. GRUNT-BROCCOLI
    module.exports = function(grunt) {
    grunt.initConfig({
    broccoli: {
    dev: { config: 'Brocfile.js' }
    }
    });
    // ...
    };
    

    View Slide

29. GRUNT-BROCCOLI
    > grunt broccoli::serve
    :4200
    
    /app
    
    ›
    

    View Slide

30. DEMO: GRUNT-BROCCOLI
    

    View Slide

31. WHEN THINGS GO WRONG
    

    View Slide

32. WHEN THINGS GO WRONG
    /app
    
    /dist
    
    ›
    

    View Slide

33. WHEN THINGS GO WRONG
    /tmp
    
    /dist
    
    /app
    
    ›
    ›
    

    View Slide

34. DEMO: WHEN THINGS GO WRONG
    

    View Slide

35. LEARNING MORE
    

    View Slide

36. LEARNING MORE
    bit.ly/prdc-broccoli-blog
    bit.ly/prdc-broccoli-slides
    broccolijs.com
    broccoliplugins.com
    

    View Slide

37. Thanks!
    @TIMGTHOMAS
    

    View Slide