ember app kit & the ember resolver
TRANSCRIPT
EMBER APP KIT & THE EMBER RESOLVER
or, “magic isn’t just for wizards (and Rails users) anymore” Thomas Boyt - Ember NYC 10.24.13
Ember App Kit is boilerplate for ambitious web
applications
Ambitious web applications have lots of assets
LESS
EmblemJavaScript
CSS
HTML
Ambitious web applications have lots of build tasks
• Compilation
• Concatenation
• Minification
• Linting
• Server
• Watcher
Ambitious web applications have structure
• app/ • components/ • controllers/ • helpers/ • models/ • routes/ • styles/ • templates/ • utils/ • views/ • app.js • router.js
• public/ • tasks/
• options/ • tests/
• unit/ • integration/
• vendor/ • Gruntfile.js • bower.json • package.json • README.md
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"></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>
Why modules?
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 });
app.js
Why modules?1 <script src="js/app.js"></script> 2 <script src="js/router.js"></script> 3 <script src="js/models/todo.js"></script> 4 <script src="js/models/store.js"></script> 5 <script src="js/controllers/todos_controller.js"></script> 6 <script src="js/controllers/todo_controller.js"></script> 7 <script src="js/views/edit_todo_view.js"></script>
1 Todos.TodoController = Ember.ObjectController.extend({ 2 // ... 3 });
global namespace means hard to test, reuse (this is why angular developers make fun of us!)
ES6 Modules: easy & futureproof
1 export default = Ember.Object.create({ 2 isAwesome: true 3 });
1 import foo from "foo"; 2 3 console.log(foo.get("isAwesome")) // true
foo.js
bar.js
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 to AMD (RequireJS) or CommonJS modules
• Output is easy to read & debug, no extra obfuscation or runtime
Import statements aren’t cool
• Modules are awesome, but manually wiring them up is not
• Ember is built on convention:
•App.PostController •App.PostRoute •App.PostView •post.hbs
• How can we use similar conventions in a module system?
Introducing the resolver, your new best friend
• app/ • components/ • controllers/
• post.js • models/
• post.js • routes/
• post.js • templates/
• post.hbs • utils/ • views/
• post.js
• Remember our awesome new structure?
• Each JS file is a module that export defaults a Route, View, Controller, or Model
• These files are resolved through an extra dependency, called the resolver
Demo time!(and a disclaimer about syntax)
Things that are resolver-friendly
• Routes
• Models (this.modelFor)
• Controllers (this.controllerFor, needs, {{render}})
• Views ({{view}})
• Components and Helpers (Ember 1.2.0 beta)
• Ember Data: Adapters, Serializers, and Transforms
• Templates
Other things you should know
• Testing is easier : just import what you need (see test examples that come with Ember App Kit)
• Modules can have source maps*
• JSHint updates in progress (?)
• Slower builds than rake-pipeline :(
• Work continues!