EMBER APP KIT &
THE EMBER RESOLVER
or, “magic isn’t just for wizards (and Rails users) anymore”	

Thomas Boyt - Ember NYC ...
Ember App Kit is boilerplate
for ambitious web
applications
L

HTML
Ambitious web applications have
lots of assets
JavaScript
Emblem
CSS
Ambitious web applications have
lots of build tasks
• Compilation	

• Concatenation	

• Minification	

• Linting	

• Server...
Ambitious web applications have
structure
• app/
• components/
• controllers/
• helpers/

• public/
• tasks/
• options/
• ...
Ambitious web applications have
modules
Why modules?
index.html
1 <html>
2
<head>
3
<title>My Super Awesome App</title>
4
5
<script src="vendor/jquery.js"></scrip...
Why modules?
app.js
1 App = Ember.Application.create({});
2
3 App.IndexRoute = Ember.Route.extend({
4
model: function(){
5...
Why modules?
1
2
3
4
5
6
7

<script
<script
<script
<script
<script
<script
<script

src="js/app.js"></script>
src="js/rou...
ES6 Modules: easy & futureproof
foo.js
1 export default = Ember.Object.create({
2
isAwesome: true
3 });

bar.js
1 import f...
ES6 Module Transpiler
• https://github.com/square/es6-module-transpiler	

• Created

by Yehuda Katz and Brian Donovan	


•...
Import statements aren’t cool
• Modules
• Ember

are awesome, but manually wiring them up is not	


is built on convention...
Introducing the resolver, your
new best friend
• Remember

our awesome
new structure?	


• app/
• components/
• controller...
Demo time!

(and a disclaimer about syntax)
Things that are resolver-friendly
• Routes	

• Models (this.modelFor)	

• Controllers (this.controllerFor, needs, {{render...
Other things you should know
• Testing

is easier: just import what you need (see test
examples that come with Ember App K...
Upcoming SlideShare
Loading in …5
×

Ember App Kit & The Ember Resolver

5,423 views

Published on

Published in: Technology, Design
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
5,423
On SlideShare
0
From Embeds
0
Number of Embeds
774
Actions
Shares
0
Downloads
25
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Ember App Kit & The Ember Resolver

  1. 1. EMBER APP KIT & THE EMBER RESOLVER or, “magic isn’t just for wizards (and Rails users) anymore” Thomas Boyt - Ember NYC 10.24.13
  2. 2. Ember App Kit is boilerplate for ambitious web applications
  3. 3. L HTML Ambitious web applications have lots of assets JavaScript Emblem CSS
  4. 4. Ambitious web applications have lots of build tasks • Compilation • Concatenation • Minification • Linting • Server • Watcher
  5. 5. Ambitious web applications have structure • app/ • components/ • controllers/ • helpers/ • public/ • tasks/ • options/ • tests/ • models/ • unit/ • routes/ • integration/ • styles/ • vendor/ • templates/ • Gruntfile.js • utils/ • bower.json • views/ • package.json • app.js • README.md • router.js
  6. 6. Ambitious web applications have modules
  7. 7. Why modules? index.html 1 <html> 2 <head> 3 <title>My Super Awesome App</title> 4 5 <script src="vendor/jquery.js"></script> 6 <script src="vendor/handlebars.js"></script> 7 <script src="vendor/ember.js"></script> 8 </head> 9 <body> 10 <script type="text/handlebars" data-template-name="application"> 11 <h2>Welcome to Ember.js</h2> 12 13 {{outlet}} 14 </script> 15 16 <script type="text/handlebars" data-template-name="index"> 17 <ul> 18 {{#each}} 19 <li>{{this}}</li> 20 {{/each}} 21 </ul> 22 </script> 23 24 <script src="app.js"></script> 25 </body> 26 </html>
  8. 8. Why modules? app.js 1 App = Ember.Application.create({}); 2 3 App.IndexRoute = Ember.Route.extend({ 4 model: function(){ 5 return [ 6 {firstName: 'Kris', lastName: 'Selden'}, 7 {firstName: 'Luke', lastName: 'Melia'}, 8 {firstName: 'Alex', lastName: 'Matchneer'} 9 ]; 10 } 11 });
  9. 9. Why modules? 1 2 3 4 5 6 7 <script <script <script <script <script <script <script src="js/app.js"></script> src="js/router.js"></script> src="js/models/todo.js"></script> src="js/models/store.js"></script> src="js/controllers/todos_controller.js"></script> src="js/controllers/todo_controller.js"></script> src="js/views/edit_todo_view.js"></script> global namespace means hard to test, reuse (this is why angular developers make fun of us!) 1 Todos.TodoController = Ember.ObjectController.extend({ 2 // ... 3 });
  10. 10. ES6 Modules: easy & futureproof foo.js 1 export default = Ember.Object.create({ 2 isAwesome: true 3 }); bar.js 1 import foo from "foo"; 2 3 console.log(foo.get("isAwesome")) // true
  11. 11. ES6 Module Transpiler • https://github.com/square/es6-module-transpiler • Created by Yehuda Katz and Brian Donovan • Already used in Ember-related projects, including Handlebars, RSVP.js, and the Ember debug extension • Transpiles • Output runtime to AMD (RequireJS) or CommonJS modules is easy to read & debug, no extra obfuscation or
  12. 12. Import statements aren’t cool • Modules • Ember are awesome, but manually wiring them up is not is built on convention: • App.PostController • App.PostRoute • App.PostView • post.hbs • How can we use similar conventions in a module system?
  13. 13. Introducing the resolver, your new best friend • Remember our awesome new structure? • app/ • components/ • controllers/ • post.js • Each JS file is a module that export defaults a Route, View, Controller, or Model • models/ • These • templates/ files are resolved through an extra dependency, called the resolver • post.js • routes/ • post.js • post.hbs • utils/ • views/ • post.js
  14. 14. Demo time! (and a disclaimer about syntax)
  15. 15. Things that are resolver-friendly • Routes • Models (this.modelFor) • Controllers (this.controllerFor, needs, {{render}}) • Views ({{view}}) • Components • Ember and Helpers (Ember 1.2.0 beta) Data: Adapters, Serializers, and Transforms • Templates
  16. 16. Other things you should know • Testing is easier: just import what you need (see test examples that come with Ember App Kit) • Modules • JSHint updates in progress (?) • Slower • Work can have source maps* builds than rake-pipeline :( continues!

×