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

Transcript

1. “Dear Ember”
2. “Let’s be honest.. I think you’ve gained weight”
4. “You have been leaving messes everywhere”
6. “And I have to force you to be frugal when we are out and about”
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!”