Brian Prior

An introduction to Ember.js, a javascript framework for 'ambitious' applications.

Transcript

1. Ember.js 1 Wednesday, 2 October 2013
2. A framework for creating ambitious web applications 2 Wednesday, 2 October 2013
3. #IWDev What is Ember.js? A(nother) client-side Javascript MVC framework It evolved from a project called SproutCore(1/2) owned by a company called Strobe, which was bought by Facebook. Yehuda Katz and Tom Dale(main SproutCore developers) left Strobe and set up a new company called Tilde based on SproutCore and renamed it Ember 3 Wednesday, 2 October 2013
4. 4 A long night finger plonking! Wednesday, 2 October 2013
5. #IWDev What can it do? Two way data binding Computed properties Observers Easy data interaction Routes Re-usable components and more... 5 Wednesday, 2 October 2013
6. #IWDev Ember’s MVC Models: Think data (arrays + JSON) Routes: Think URL data/template links Views: Think ‘semantic event handlers’ Controllers: Think actions and model-view links Router: Think URL’S Templates: Think Handlebars scripting 6 Wednesday, 2 October 2013
7. #IWDev Relationships among Components 7 Wednesday, 2 October 2013
8. #IWDev Convention over Configuration Ember leans heavily on the Rails approach in using a naming convention. Router -> this.resource(‘xxx’) Route -> App.XxxRoute Controller -> App.XxxController Model -> App.Xxx View -> App.XxxView Template name -> Xxx App = Ember.Application.create(); App = a namespace object that MUST be created before any other code. The name need not be ‘App’ 8 Wednesday, 2 October 2013
9. #IWDev Templates (the HTML side of things) All rendering is performed through Handlebars templates (<script...> tags) using Handlebars expressions ( {{...}}) <script type="text/x-handlebars" data-template-name = ‘xxx’> <div class="navbar"> <div class="navbar-inner"> <a class="brand" href="#">Bloggr</a> <ul class="nav"> <li>{{#link-to 'posts'}}Posts{{/link-to}}</li> <li>{{#link-to 'about'}}About{{/link-to}}</li> </ul> </div> </div> {{outlet}} </script> 9 Wednesday, 2 October 2013
10. #IWDev Handlebars Template Usage • In Ember, only script tags appear in the body • Each template has a corresponding controller • Templates can nest other templates using Handlebar links • ‘id’ may be used instead of ‘data-template-name’ 10 Wednesday, 2 October 2013
11. #IWDev Controllers and Templates 11 Templates get their data from their respective controllers according to the naming convention Controllers are always active for each template Template components (e.g. views or HTML elements) can initiate an action on the controller or view e.g. by clicking a button. Action responses ‘bubble up’ from controller to routes if needed, wherever the handler is located. No handler => error Wednesday, 2 October 2013
12. #IWDev Ember Controllers 12 Ember creates controllers when required They are always ‘live’ in memory. You may extend or add controllers Ember uses three types of controller • Ember.Controller • EmberArray.Controller • EmberObject.Controller Wednesday, 2 October 2013
13. #IWDev URLs and State The Ember designers placed great importance on the use of URLs in the design of applications. Page URLs are defined through the Router class and by extensions allow the association of stores (models) to the routes. Routes may also respond to user actions but this is usually handled by either controllers or views 13 Wednesday, 2 October 2013
14. #IWDev Router Examples 14 App.Router.map(function() { this.resource('about'); // http://domainName#/about this.resource('posts', function() { this.resource('post', { path: ':post_id' }); }); // // http://domainName#/posts // // http://domainName#/posts/2 }); ‘resource’ => model association Nested route Wednesday, 2 October 2013
15. #IWDev 15 Wednesday, 2 October 2013
16. #IWDev Starter Kit file structure (except bootstrap files) 16 Main files to edit Wednesday, 2 October 2013
17. #IWDev 17 index.html Handlebars Wednesday, 2 October 2013
18. #IWDev app.js from starter kit 18 Wednesday, 2 October 2013
19. #IWDev Browser View 19 Wednesday, 2 October 2013
20. #IWDev Demonstration Time 20 Wednesday, 2 October 2013