Chocolate-Covered Vegetables: Tasty Workflows with Broccoli

Af7acd01448753af3dfd648c3f5ea287?s=47 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.

Af7acd01448753af3dfd648c3f5ea287?s=128

timgthomas

January 29, 2016
Tweet

Transcript

  1. None
  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