Downloaded 25 times
![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 });](https://image.slidesharecdn.com/presentation-131021192733-phpapp02/85/Ember-App-Kit-The-Ember-Resolver-8-320.jpg)
More Related Content
Similar to Ember App Kit & The Ember Resolver
Ember App Kit & The Ember Resolver
- 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. Ember App Kitis boilerplate for ambitious web applications
- 3. L HTML Ambitious web applicationshave lots of assets JavaScript Emblem CSS
- 4. Ambitious web applicationshave lots of build tasks ā¢ Compilation ā¢ Concatenation ā¢ Miniļ¬cation ā¢ Linting ā¢ Server ā¢ Watcher
- 5. Ambitious web applicationshave 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. Ambitious web applicationshave modules
- 7. Why modules? index.html 1 <html> 2 <head> 3 <title>MySuper 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. 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. 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 namespacemeans hard to test, reuse (this is why angular developers make fun of us!) 1 Todos.TodoController = Ember.ObjectController.extend({ 2 // ... 3 });
- 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. 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. Import statements arenātcool ā¢ 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. Introducing the resolver,your new best friend ā¢ Remember our awesome new structure? ā¢ app/ ā¢ components/ ā¢ controllers/ ā¢ post.js ā¢ Each JS ļ¬le is a module that export defaults a Route, View, Controller, or Model ā¢ models/ ā¢ These ā¢ templates/ ļ¬les are resolved through an extra dependency, called the resolver ā¢ post.js ā¢ routes/ ā¢ post.js ā¢ post.hbs ā¢ utils/ ā¢ views/ ā¢ post.js
- 14. Demo time! (and adisclaimer about syntax)
- 15. Things that areresolver-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. Other things youshould 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!