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

2. HI! @timgthomas avention.com
3. THE STORY SO FAR
4. THE STORY SO FAR
5. THE STORY SO FAR
6. THE STORY SO FAR
7. ENTER BROCCOLI
8. BROCCOLI Broccoli  [ files ]  [ files ]  › ›
9. HOW BROCCOLI DIFFERS
10. HOW BROCCOLI DIFFERS high productivity rich plugin ecosystem
11. HOW BROCCOLI DIFFERS asset pipeline tree-based fast incremental builds inherently chainable
12. THE ESSENTIALS
13. INSTALLATION > npm install broccoli-cli -g > npm install broccoli --save-dev
14. SETUP Brocfile.js  Terminal  /app 
15. THE BROCFILE module.exports = 'app';
16. STARTING BROCCOLI > broccoli serve :4200  /app  ›
17. Demo THE ESSENTIALS
18. BROCCOLI PLUGINS
19. INSTALLING PLUGINS > npm install [plugin] --save-dev
20. INSTALLING PLUGINS > npm install broccoli-jade --save-dev
21. USING PLUGINS var jadeify = require('broccoli-jade'); var app = 'app'; app = jadeify(app); module.exports = app;
22. USING (NEW) PLUGINS var BroccoliSass = require('broccoli-sass'); var app = 'app'; app = new BroccoliSass(app); module.exports = app;
23. Demo WORKING WITH PLUGINS
24. "ADVANCED" BROCCOLI
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;
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 ]);
27. BROCCOLI + REACT
28. BROCCOLI + REACT
29. BROCCOLI + REACT jsx compilation dependency lookup css preprocessing live reloading
30. BROCCOLI + REACT jsx compilation dependency lookup css preprocessing live reloading broccoli-babel-transpiler broccoli-browserify broccoli-sass broccoli-browser-sync › › › ›
31. Demo BROCCOLI + REACT
32. GRUNT-BROCCOLI
33. GRUNT-BROCCOLI module.exports = function(grunt) { grunt.initConfig({ broccoli: { dev: {} } }); };
34. GRUNT-BROCCOLI > grunt broccoli:<target>:serve :4200  /app  ›
35. Demo GRUNT-BROCCOLI
36. WHEN THINGS GO WRONG
37. WHEN THINGS GO WRONG > broccoli build <folder> /dist  /app  ›
38. Demo WHEN THINGS GO WRONG
39. WHEN THINGS GO WRONG /app  /dist  › > broccoli build <folder>
40. WHEN THINGS GO WRONG /tmp  /dist  /app  › › > broccoli build <folder>
41. Demo WHEN THINGS GO WRONG
42. FURTHER READING
43. FURTHER READING bit.ly/ccv-broccoli-blog bit.ly/ccv-broccoli-react bit.ly/ccv-broccoli-slides bit.ly/ccv-broccoli-code
44. Thanks! bit.ly/ccv-broccoli-slides broccolijs.com @timgthomas