Anthony Bull Sr, Web Engineer, CrowdFlower anthony@crowdflower.com @inkredabull

Tooling with Yeoman to Rapidly Develop Ember.js Applications

Productive Out-of-the-Box

EmberFest 2013-08-30 Munich, Germany

•  Based in San Francisco • World’s Leading Crowdsourcing Platform •  5M+ contributors, 1B+ judgments • We have four Ember.js apps (using four versions of the framework) • We’re hiring!

About CrowdFlower

2

http://www.flickr.com/photos/vanpelt/2191500067/in/set-72157603708386280

• My Background with Ember.js • Tooling for Ember.js:

–  What is Yeoman? –  What do I mean by ‘tooling’? –  Today’s Tooling Landscape

• Demo: build/test a (simple) Admin Tool • Q&A

Overview of This Talk

3

• 13 yrs as a software engineer (lean towards F2E) • Started with Ember.js in March 2012 •  Implemented and/or maintained apps using 0.9.6, 0.9.8, 1.0.0-pre.2, and RC(s)1.0

• Authoring book: “Ember.js by Example” (Packt Publishing, Dec 2013)

• Became Yeoman Generator for Ember.js maintainer in December 2012

My Background with Ember.js

4

What is Yeoman? Part I

5

• Announced at Google I/O 2012

• Brought to you by the Google Chrome Developer Relations Team

• “… an open source project which defines an opinionated stack for web application development. It includes a golden bundle of tools and frameworks…” http://yeoman.io/about.html

What is Yeoman? Part II

6

• The Yeoman Generator for Ember.js:https://github.com/yeoman/generator-ember

Before We Go Any Further On Tooling…

7

was NOT my intent to lift talk title from emberjs.com

IMO: Ember.js : webdev :: Yeoman : Ember.js app dev

• MVC: different client-side than sever-side • what’s a directory structure that makes sense? • persistence and development in parallel with backend systems

• Emberisms –  naming conventions –  coupling components (.e.g controller with view) –  routing

How Do We Benefit From Tooling?

8

Or: “The Difficulties of Getting Started with Ember.js” Or: “Some of the Pain Points To Be Addressed By Tooling”

Ember.js Tooling Landscape: August 2013

9

ember-app-kit (Jun 2013)

ember-tools (Feb 2013)

Yeoman & Ember.js

(Sep 2012)

opinionated dir struct

x x x

scaffolding/generators

- x x

Grunt x x x

Karma x - x

Bower x - x

(dates cited are projects’ first commit dates in github)

•  installation: –  creation of project –  git baseline –  LiveReload –  view source

• generators: –  controller –  model

• Scaffolding •  testing w/Karma using Mocha/Chai & ember-testing*

Demo

10

* : 2013-08-30 needs update on master

• Update for Karma • Yeoman 1.0 & Ember.js 1.0 Updates • Continued generator improvements •  Issues/PRs • More out-of-the-box test coverage • Support for ES6 & Modules

The Future!

11

Thanks!

12

• @emberfest • @crowdflower • @gvisda •  contributors to the generator (maybe you someday?)