productive out-of-the-box: tooling with yeoman to rapidly develop ember.js applications
DESCRIPTION
For this presentation to EmberFest in Munich, German, on August 30th, 2013, I highlighted the use of the Yeoman Generator for Ember.js to speed up the process of Ember.js application creation. Ref URL: https://github.com/yeoman/generator-emberTRANSCRIPT
![Page 1: Productive Out-of-the-Box: Tooling with Yeoman to Rapidly Develop Ember.js Applications](https://reader034.vdocuments.net/reader034/viewer/2022052523/5558bd74d8b42aa52a8b5036/html5/thumbnails/1.jpg)
Anthony Bull Sr, Web Engineer, CrowdFlower [email protected] @inkredabull
Tooling with Yeoman to Rapidly Develop Ember.js Applications
Productive Out-of-the-Box
EmberFest 2013-08-30 Munich, Germany
![Page 2: Productive Out-of-the-Box: Tooling with Yeoman to Rapidly Develop Ember.js Applications](https://reader034.vdocuments.net/reader034/viewer/2022052523/5558bd74d8b42aa52a8b5036/html5/thumbnails/2.jpg)
• 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
![Page 3: Productive Out-of-the-Box: Tooling with Yeoman to Rapidly Develop Ember.js Applications](https://reader034.vdocuments.net/reader034/viewer/2022052523/5558bd74d8b42aa52a8b5036/html5/thumbnails/3.jpg)
• 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
![Page 4: Productive Out-of-the-Box: Tooling with Yeoman to Rapidly Develop Ember.js Applications](https://reader034.vdocuments.net/reader034/viewer/2022052523/5558bd74d8b42aa52a8b5036/html5/thumbnails/4.jpg)
• 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
![Page 5: Productive Out-of-the-Box: Tooling with Yeoman to Rapidly Develop Ember.js Applications](https://reader034.vdocuments.net/reader034/viewer/2022052523/5558bd74d8b42aa52a8b5036/html5/thumbnails/5.jpg)
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
![Page 6: Productive Out-of-the-Box: Tooling with Yeoman to Rapidly Develop Ember.js Applications](https://reader034.vdocuments.net/reader034/viewer/2022052523/5558bd74d8b42aa52a8b5036/html5/thumbnails/6.jpg)
What is Yeoman? Part II
6
• The Yeoman Generator for Ember.js:https://github.com/yeoman/generator-ember
![Page 7: Productive Out-of-the-Box: Tooling with Yeoman to Rapidly Develop Ember.js Applications](https://reader034.vdocuments.net/reader034/viewer/2022052523/5558bd74d8b42aa52a8b5036/html5/thumbnails/7.jpg)
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
![Page 8: Productive Out-of-the-Box: Tooling with Yeoman to Rapidly Develop Ember.js Applications](https://reader034.vdocuments.net/reader034/viewer/2022052523/5558bd74d8b42aa52a8b5036/html5/thumbnails/8.jpg)
• 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”
![Page 9: Productive Out-of-the-Box: Tooling with Yeoman to Rapidly Develop Ember.js Applications](https://reader034.vdocuments.net/reader034/viewer/2022052523/5558bd74d8b42aa52a8b5036/html5/thumbnails/9.jpg)
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)
![Page 10: Productive Out-of-the-Box: Tooling with Yeoman to Rapidly Develop Ember.js Applications](https://reader034.vdocuments.net/reader034/viewer/2022052523/5558bd74d8b42aa52a8b5036/html5/thumbnails/10.jpg)
• 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
![Page 11: Productive Out-of-the-Box: Tooling with Yeoman to Rapidly Develop Ember.js Applications](https://reader034.vdocuments.net/reader034/viewer/2022052523/5558bd74d8b42aa52a8b5036/html5/thumbnails/11.jpg)
• 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
![Page 12: Productive Out-of-the-Box: Tooling with Yeoman to Rapidly Develop Ember.js Applications](https://reader034.vdocuments.net/reader034/viewer/2022052523/5558bd74d8b42aa52a8b5036/html5/thumbnails/12.jpg)
Thanks!
12
• @emberfest • @crowdflower • @gvisda • contributors to the generator (maybe you someday?)