Ember Build Tools Showdown

Slide 1

Slide 1 text

“Dear Ember”

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

“You have been leaving messes everywhere”

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

“And I have to force you to be frugal when we are out and about”

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

“Lastly, you don’t speak my Love Languages”

Slide 9

Slide 9 text

AMD/CJS/ES6 Transpile Concat + Minify Production Builds CoﬀeeScript/Less/Sass/Stylus Automated Testing

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

“… I think we should try a threesome”

Slide 12

Slide 12 text

Ember Build Tools You Just a dog

Slide 13

Slide 13 text

“I’ve brought over a few Build Tools and I thought we could… experiment”

Slide 14

Slide 14 text

“I’d ﬁrst like to introduce you to Yeoman”

Slide 15

Slide 15 text

Yeoman + Ember Generators • Get up and running very quickly • CommonJS • Ember Generators • Test with Mocha + Karma (or other) • Actively maintained

Slide 16

Slide 16 text

Yeoman + Ember Generators $ npm install -g generator-ember $ mkdir && cd $ yo ember $ grunt server

Slide 17

Slide 17 text

Demo

Slide 18

Slide 18 text

Yeoman + Ember Generators • Built-in Generators • Test Framework (Karma) • Grunt • Based on Ember Starter Kit • Bower support • Generators are terrible • Global namespace • Gruntﬁle is huge and difﬁcult 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

Slide 19

Slide 19 text

“Now I’d like to introduce you to Brunch”

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

Brunch.io (Yet Another Ember Brunch*) $ npm install -g brunch $ brunch new gh:cavneb/yet-another- ember-brunch $ cd $ cake server

Slide 22

Slide 22 text

Demo

Slide 23

Slide 23 text

• 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*)

Slide 24

Slide 24 text

“Next, I would like you to meet my old friend, Ember Tools”

Slide 25

Slide 25 text

Ember Tools • Super easy • CommonJS • Generators • Very light footprint (easy to add to   existing project)

Slide 26

Slide 26 text

Ember Tools $ npm install -g ember-tools $ ember create $ cd $ ember build —watch $ open index.html

Slide 27

Slide 27 text

Demo

Slide 28

Slide 28 text

• Generators • Minimalist approach • Applies best practices • Easy to integrate into backend app (e.g. Django or Rails) • Not actively maintained *** • Hard decency on Ember ﬁle 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

Slide 29

Slide 29 text

“Finally, I would like to introduce you to Ember App Kit”

Slide 30

Slide 30 text

Ember App Kit • Sane project structure • ES6 module transpiler support • Module system-aware resolver • Transparent project compilation and miniﬁcation 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

Slide 31

Slide 31 text

@stefanpenner $ git clone [email protected]:stefanpenner/ ember-app-kit.git $ cd $ rm -rf .git $ npm install $ grunt server Ember App Kit

Slide 32

Slide 32 text

Demo

Slide 33

Slide 33 text

• 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

Slide 34

Slide 34 text

“There are others, but I don’t want to overwhelm you”

Slide 35

Slide 35 text

mimosa.io

Slide 36

Slide 36 text

Rake Pipeline https://github.com/livingsocial/rake-pipeline https://github.com/wycats/rake-pipeline-web-ﬁlters

Slide 37

Slide 37 text

… and for all you Rails lovers …

Slide 38

Slide 38 text

brought to you by Ember App Kit for Rails

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

Demo

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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 -