Top Ember Build Tools John Kurkowski UI Engineer @ CrowdStrike Ember-SC Meetup 2/18/2014 

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 

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. 

Ember @ CrowdStrike 

Why Build Tools For when you outgrow TodoMVC. 

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 

Evaluating Build Tools 6 dimensions. Because you’ve got an app to get on with. 

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 

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. 

Evaluating Build Tools 3. Community •Active development •Support 

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? 

Evaluating Build Tools 5. Compose (plug in) the behavior you want •“Functionality is an asset, code is a liability” 

Evaluating Build Tools 6. Opinionated-ness •Bend your build tool to your code, or vice versa? 

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 

Grunt Code Review https://github.com/john-kurkowski/todomvc/commits/ember-sc_top-build-tools_grunt 

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 

Grunt tl;dr: raw. 

Gulp Code Review https://github.com/john-kurkowski/todomvc/commits/ember-sc_top-build-tools_gulp 

Introducing Gulp (aside) From http://slid.es/contra/gulp With Grunt, you pictured this You didn’t picture this 

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 

Gulp tl;dr: raw, but keep an eye on it displacing Grunt. 

Yeoman Code Review https://github.com/john-kurkowski/todomvc/commits/ember-sc_top-build-tools_yeoman 

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. 

Yeoman tl;dr: starting point for good patterns. Not enough value for not being Ember centric though. 

Ember App Kit Code Review https://github.com/john-kurkowski/todomvc/commits/ember-sc_top-build-tools_ember-app-kit 

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 

Ember App Kit tl;dr: keep an eye on it. It aims to be the Ember build tool. 

Brunch Code Review https://github.com/john-kurkowski/todomvc/commits/ember-sc_top-build-tools_brunch 

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 

Brunch tl;dr: niche. But the spirit of pluggable. Balances flexibility with web application opinionated-ness. 

Mimosa Code Review https://github.com/john-kurkowski/todomvc/commits/ember-sc_top-build-tools_mimosa 

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. 

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. 

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 

In the Way Invisible Immature Mature Niche Popular Language Specific Language Agnostic Write Code Plug In Behavior Whatever Opinionated Comparison 

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 

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 

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 

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 

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 

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