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
2. TIM G. THOMAS @timgthomas timgthomas.com Avention.com
3. SPONSORS
4. BROCCOLI
5. BROCCOLI Broccoli  <files>  <files>  › ›
6. BROCCOLI @jo_liss github.com/broccolijs broccolijs.com
7. WHY BROCCOLI Fast Chainable
8. WHAT’S DIFFERENT? Trees “Incremental” builds
9. GETTING STARTED
10. GETTING STARTED > npm install broccoli-cli -g > npm install broccoli
11. SETUP Brocfile.js  Terminal  /app 
12. USE
13. USE > broccoli serve :4200  /app  ›
14. USE > broccoli build <folder> /dist  /app  ›
15. THE BASICS
16. THE BASICS module.exports = ‘app’;
17. INSTALLING PLUGINS > npm install broccoli-[plugin] --save
18. USING PLUGINS var doSomething = require(‘broccoli-<plugin>’); var app = ‘app’; app = doSomething(app); module.exports = app;
19. CHAINING PLUGINS var doSomething = require(‘...’), doSomethingElse = require(‘...’); var app = ‘app’; app = doSomething(app); app = doSomethingElse(app); module.exports = app;
20. DEMO: THE BASICS
21. ADVANCED PLUGINS
22. “MERGE-TREES” var mergeTrees = require('broccoli-merge-trees'); module.exports = mergeTrees([ 'app', 'test' ]); /test  /dist  /app  › +
23. “ENV” var env = require('broccoli-env').getEnv(); if (env === 'production') { ... }
24. “ENV” > BROCCOLI_ENV = ‘development’ > broccoli build <target>
25. “CONCAT” var concat = require('broccoli-concat'); module.exports = concat('js', { inputFiles: [ '**/*.js' ] }); app.js  scripts.js  vendor.js  › +
26. PLUGINS broccoliplugins.com
27. GRUNT-BROCCOLI
28. GRUNT-BROCCOLI module.exports = function(grunt) { grunt.initConfig({ broccoli: { dev: { config: 'Brocfile.js' } } }); // ... };
29. GRUNT-BROCCOLI > grunt broccoli:<target>:serve :4200  /app  ›
30. DEMO: GRUNT-BROCCOLI
31. WHEN THINGS GO WRONG
32. WHEN THINGS GO WRONG /app  /dist  ›
33. WHEN THINGS GO WRONG /tmp  /dist  /app  › ›
34. DEMO: WHEN THINGS GO WRONG
35. LEARNING MORE
36. LEARNING MORE bit.ly/prdc-broccoli-blog bit.ly/prdc-broccoli-slides broccolijs.com broccoliplugins.com
37. Thanks! @TIMGTHOMAS