Ember Build Tools Showdown

0e2948f19a7dacdf4085d7d33093f260?s=47 Eric Berry
November 26, 2013

Ember Build Tools Showdown

Covers the different build tool options for Ember and evaluates the pros and cons of each.

Video at http://www.youtube.com/watch?v=b1VfmeXznfk&feature=c4-overview&list=UU7zhgq6ntpbl0tgOsTTsenw

Download source code (demos) at https://github.com/cavneb/build_tools_showdown

0e2948f19a7dacdf4085d7d33093f260?s=128

Eric Berry

November 26, 2013
Tweet

Transcript

  1. “Dear Ember”

  2. “Let’s be honest.. I think you’ve gained weight”

  3. None
  4. “You have been leaving messes everywhere”

  5. None
  6. “And I have to force you to be frugal when

    we are out and about”
  7. None
  8. “Lastly, you don’t speak my Love Languages”

  9. AMD/CJS/ES6 Transpile Concat + Minify Production Builds CoffeeScript/Less/Sass/Stylus Automated Testing

  10. “Now don’t get mad over what I’m about to suggest…”

  11. “… I think we should try a threesome”

  12. Ember Build Tools You Just a dog

  13. “I’ve brought over a few Build Tools and I thought

    we could… experiment”
  14. “I’d first like to introduce you to Yeoman”

  15. Yeoman + Ember Generators • Get up and running very

    quickly • CommonJS • Ember Generators • Test with Mocha + Karma (or other) • Actively maintained
  16. Yeoman + Ember Generators $ npm install -g generator-ember $

    mkdir <appname> && cd <appname> $ yo ember $ grunt server
  17. Demo

  18. Yeoman + Ember Generators • Built-in Generators • Test Framework

    (Karma) • Grunt • Based on Ember Starter Kit • Bower support • Generators are terrible • Global namespace • Gruntfile is huge and difficult to follow • Folder structure not complete (missing components/helpers) • Does not support subfolders in routes (controllers too?) • TONS of cleanup to do initially Pros Cons
  19. “Now I’d like to introduce you to Brunch”

  20. Brunch.io (Yet Another Ember Brunch*) • Compile scripts, templates, styles,

    lints them • Wraps scripts in CommonJS/AMD • Generates source maps • Minify code and optimize images • Bower Integration • Generators with Loom • Test with qUnit + Testem • Build for production • Automated gzip of assets • Auto Reload • Less • CoffeeScript
  21. Brunch.io (Yet Another Ember Brunch*) $ npm install -g brunch

    $ brunch new gh:cavneb/yet-another- ember-brunch <appname> $ cd <appname> $ cake server
  22. Demo

  23. • Generators • Very simple (single config file) • Easy

    to understand • CoffeeScript? • Bower integration is VERY good • Environment Vars!!! • Difficult to tie into build process • Need to rely on good skeletons • Not a lot of community support • Weird way of wrapping transpired CommonJS to AMD. • CoffeeScript (or use another skeleton) • Relies on global namespace Pros Cons Brunch.io (Yet Another Ember Brunch*)
  24. “Next, I would like you to meet my old friend,

    Ember Tools”
  25. Ember Tools • Super easy • CommonJS • Generators •

    Very light footprint (easy to add to 
 existing project)
  26. Ember Tools $ npm install -g ember-tools $ ember create

    <appname> $ cd <appname> $ ember build —watch $ open index.html
  27. Demo

  28. • Generators • Minimalist approach • Applies best practices •

    Easy to integrate into backend app (e.g. Django or Rails) • Not actively maintained *** • Hard decency on Ember file locations • No build for production • No default setup for tests. • There’s no build process to tie into (e.g. Grunt) Pros Cons Ember Tools *** Ryan says he will start work on it again soon
  29. “Finally, I would like to introduce you to Ember App

    Kit”
  30. Ember App Kit • Sane project structure • ES6 module

    transpiler support • Module system-aware resolver • Transparent project compilation and minification for easy deploys via Grunt • Package management via Bower • Optional support for CoffeeScript, SASS, LESS or Stylus • Testing via QUnit, Ember Testing and Karma • Linting via JSHint (including module syntax) @stefanpenner
  31. @stefanpenner $ git clone git@github.com:stefanpenner/ ember-app-kit.git <appname> $ cd <appname>

    $ rm -rf .git $ npm install $ grunt server Ember App Kit
  32. Demo

  33. • ES6 • Generators • Core team supported • Applies

    and enforces best practices • Production builds • Test framework integrated • It is changing a lot (but starting to stabilize) • Gruntfile is massive (see tasks folder) • Development builds to a ‘tmp’ folder • More difficult to add to existing projects • Complicated • Grunt has weirdness in relation to new file watching • Generators aren’t quite flushed out yet Pros Cons Ember App Kit
  34. “There are others, but I don’t want to overwhelm you”

  35. mimosa.io

  36. Rake Pipeline https://github.com/livingsocial/rake-pipeline https://github.com/wycats/rake-pipeline-web-filters

  37. … and for all you Rails lovers …

  38. brought to you by Ember App Kit for Rails

  39. Ember App Kit • Everything that Ember App Kit provides

    (except tests) • Integrated into Rails Asset Pipeline • Uses Rails Generators • Automatic environment-based building • Warm fuzzies for all! for Rails
  40. Demo

  41. “Whew! That was a lot of experiments! Let’s summarize”

  42. Yeoman Brunch.io Ember
 Tools Ember" App Kit Ember App" Kit

    for Rails Generators Kindof Yes Yes Yes Yes ES6 - - - Yes Yes Custom Tasks Yes - - Yes Yes (via Rails) Production Builds Yes Yes - Yes Yes Ease of Use Moderate Excellent Excellent Moderate Excellent Support/Activity Excellent Moderate Moderate Excellent Excellent Testing Yes Yes - Yes -
  43. “Thanks for listening!”

  44. None