Top Ember Build Tools

The web build tool ecosystem is far from cut and dry choices. We'll review and discuss the pros & cons of Ember's most prevalent build tools.

* Grunt
* Gulp
* Yeoman
* Ember App Kit
* Brunch
* Mimosa

Presented at Ember-SC Meetup http://www.meetup.com/Ember-SC/events/159041272/

Transcript

1. Top Ember Build Tools John Kurkowski UI Engineer @ CrowdStrike Ember-SC Meetup 2/18/2014
2. Outline •Intro •About the presenter •About Ember at CrowdStrike •Comparison of (Ember) build tools •Why build tools •How to evaluate •Code samples: what it took to retrofit •Pros/cons discovered
3. About the Presenter •Engineer on the UI team at CrowdStrike •New to Ember, ~10 months •Met some of you before. Sorry I’ve been absent.
4. Ember @ CrowdStrike
5. Why Build Tools For when you outgrow TodoMVC.
6. Why Build Tools •Asset compilation •e.g. CoffeeScript, Sass •Precompilation •Handlebars •Minify & Concat •Handling dev vs. prod vs. test envs ! •Live reload •Bootstrap new apps, components
7. Evaluating Build Tools 6 dimensions. Because you’ve got an app to get on with.
8. Evaluating Build Tools 1. Invisibility •How much time is spent adjusting the build tool? •Faster dev cycle: compilation, reloading •Hardest to measure in a quick bake off
9. Evaluating Build Tools 2. Maturity •Unless you welcome risk in your projects, wait for 1.0 •(But that would throw out half of NPM) •Reliant on risky tech.
10. Evaluating Build Tools 3. Community •Active development •Support
11. Evaluating Build Tools 4. Language agnosticism •What languages does it take to run the tool? •For this talk, I can safely assume you’re all using JavaScript •Does the build tool care what languages you use?
12. Evaluating Build Tools 5. Compose (plug in) the behavior you want •“Functionality is an asset, code is a liability”
13. Evaluating Build Tools 6. Opinionated-ness •Bend your build tool to your code, or vice versa?
14. Evaluating Build Tools - The Demo What’s it like to retrofit TodoMVC with build tools? •Just to give a sense how they work •More upfront change isn’t necessarily worse
15. Grunt Code Review https://github.com/john-kurkowski/todomvc/commits/ember-sc_top-build-tools_grunt
16. Grunt •Pros •Widespread •Huge userbase •Good experience •Plugins exist for everything •Cons •Gruntfile quickly gets large, spaghetti •Promotes copy/paste lines of code - more liability than intelligible asset •You figure out boilerplate, patterns, tests on your own
17. Grunt tl;dr: raw.
18. Gulp Code Review https://github.com/john-kurkowski/todomvc/commits/ember-sc_top-build-tools_gulp
19. Introducing Gulp (aside) From http://slid.es/contra/gulp With Grunt, you pictured this You didn’t picture this
20. Gulp •Pros •Simpler than Grunt •Opinionated, Unix-like plugin & pipes philosophy •A e.g. concat plugin does just enough •A server plugin is too much; write your own task •Cons •New kid on the block •You’re still maintaining code •You’re still on your own for patterns
21. Gulp tl;dr: raw, but keep an eye on it displacing Grunt.
22. Yeoman Code Review https://github.com/john-kurkowski/todomvc/commits/ember-sc_top-build-tools_yeoman
23. Yeoman •Pros •A lotta generated patterns •Didn’t have to Grunt •Bootstraps directories •Enforces require via grunt-neuter •Test runner came free •Cons •Still gotta research. •Is this Ember template (Charcoal) even good? •A lotta generated code to make sense of •Maybe learning’s a good thing? •Want new behavior? Gruntfile already 400 loc Summary: made my app fit the convention, not the Gruntfile.
24. Yeoman tl;dr: starting point for good patterns. Not enough value for not being Ember centric though.
25. Ember App Kit Code Review https://github.com/john-kurkowski/todomvc/commits/ember-sc_top-build-tools_ember-app-kit
26. Ember App Kit •Pros •A lotta generated patterns •Didn’t have to Grunt •Bootstraps and enforces directories •Test runner came free •Pushing Ember modularity forward •Encourages modules via ES6 transpiler; discourages globals •Very trustworthy •Good docs so far •Cons •Cutting edge •ES6, not 1.0, unofficial •Even more initial code to make sense of •Learning’s a good thing but… •The docs are rife with gotchas & limitations •Probably will only help you build Ember apps
27. Ember App Kit tl;dr: keep an eye on it. It aims to be the Ember build tool.
28. Brunch Code Review https://github.com/john-kurkowski/todomvc/commits/ember-sc_top-build-tools_brunch
29. Brunch •Pros •Briefest config file •Closest to my pluggable behavior ideal •Bends to your existing code •Yet skeletons are first-class too •Cons •Somewhat niche •Skeleton permutations and maintenance are O_o •New task runner language •Heavy to code new behavior: must create a Node package •Vendor autodiscovery didn’t pan out •Noticeable 5-10% CPU watch on my Mac
30. Brunch tl;dr: niche. But the spirit of pluggable. Balances flexibility with web application opinionated-ness.
31. Mimosa Code Review https://github.com/john-kurkowski/todomvc/commits/ember-sc_top-build-tools_mimosa
32. Mimosa •Pros •Enforces AMD/CommonJS modules •Warns of mystery globals & missing deps, rather than waiting till runtime •Docs cater to •From scratch •From skeleton •Existing projects •Vendor autodiscovery worked •Cons •Niche - 10x stars < Brunch •More config to read through Didn’t get to play with Mimosa as much as I’d have liked.
33. Mimosa tl;dr: very similar to Brunch, but even more niche. At CrowdStrike, it would’ve been a contender with Brunch, had we been ready to adopt AMD/CommonJS.
34. Honorable Mentions •Ember Tools •Rewrite in progress to use Grunt, Loom generators ! •Broccoli •Beta 1 landed yesterday •I respect anything with the goal of displacing all the build tools in this presentation
35. In the Way Invisible Immature Mature Niche Popular Language Specific Language Agnostic Write Code Plug In Behavior Whatever Opinionated Comparison
36. In the Way Invisible Immature Mature Niche Popular Language Specific Language Agnostic Write Code Plug In Behavior Whatever Opinionated Comparison - Grunt Gr Gr Gr Gr Gr Gr
37. In the Way Invisible Immature Mature Niche Popular Language Specific Language Agnostic Write Code Plug In Behavior Whatever Opinionated Comparison - Gulp Gr Gr Gr Gr Gr Gr Gu Gu Gu Gu Gu
38. In the Way Invisible Immature Mature Niche Popular Language Specific Language Agnostic Write Code Plug In Behavior Whatever Opinionated Comparison - Yeoman Gr Gr Gr Gr Gr Gr Gu Gu Gu Gu Gu Y Y Y Y Y Y
39. In the Way Invisible Immature Mature Niche Popular Language Specific Language Agnostic Write Code Plug In Behavior Whatever Opinionated Comparison - Ember App Kit Gr Gr Gr Gr Gr Gr Gu Gu Gu Gu Gu Y Y Y Y Y Y E E E E E E
40. In the Way Invisible Immature Mature Niche Popular Language Specific Language Agnostic Write Code Plug In Behavior Whatever Opinionated Gr Gr Gr Gr Gr Gr Gu Gu Gu Gu Gu Y Y Y Y Y Y E E E E E E B B B B B B Comparison - Brunch
41. In the Way Invisible Immature Mature Niche Popular Language Specific Language Agnostic Write Code Plug In Behavior Whatever Opinionated Comparison - Mimosa Gr Gr Gr Gr Gr Gr Gu Gu Gu Gu Gu Y Y Y Y Y Y E E E E E E B B B B B B M M M? M M