Empfohlen
Weitere ähnliche Inhalte
Was ist angesagt?
Was ist angesagt? (20)
Ähnlich wie Ember App Kit & The Ember Resolver
Ähnlich wie Ember App Kit & The Ember Resolver (20)
Kürzlich hochgeladen
Kürzlich hochgeladen (20)
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 Kit is boilerplate for ambitious web applications
- 3. L HTML Ambitious web applications have lots of assets JavaScript Emblem CSS
- 4. Ambitious web applications have lots of build tasks • Compilation • Concatenation • Minification • Linting • Server • Watcher
- 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. Ambitious web applications have modules
- 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. 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 namespace means 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’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. 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. Demo time! (and a disclaimer about syntax)
- 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. 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!