Ember.js - A JavaScript framework for creating ambitious web applications

Ember.js - A JavaScript framework for creating ambitious web applications
Dev-day Ember.js A JavaScript framework for creating ambitious web applications Juliana Lucena 26 Oct 2012
Why? • Clearly separate back-end and front- end • Faster user app interaction • Makes your life easier :) 2
Ember.js • Browser based MVC framework • Eliminates boilerplate • Provides architecture • Based on event propagation 3
Dependencies • jQuery • Handlebars.js - Template language <script type="text/x-handlebars" data-template-name="answer"> <a href="#" class="author-name">{{ answer.author.name }}</a> <span class="status-info">respondeu:</span> {{#if answer.created_at}} {{datetime answer.created_at}} {{/if}} <p class="input-user">{{ answer.content.text }}</p> </script> 4
Examples • http://emberjs.com/examples/ • https://github.com/dgeb/ ember_data_example 5
Ember.js MVC 6
MVC Workflow User Notifies Model action View Updates Controller Updates • Tracks the app’s state Router • Affects the application’s view hierarchy • Mediates between the MVC components Serialize URL Usable app state Deserialize 7
Hello Redu var App = Em.Application.create(); App.ApplicationView = Em.View.extend({ templateName: 'application' }); App.ApplicationController = Em.View.extend({! }); App.Router = Em.Router.extend({ index.html root: Ember.Route.extend({ (...) index: Ember.Route.extend({ <body> route: '/' <script type="text/x-handlebars" }) data-template-name="application"> }) <h1>Hello Redu! (chuckle)</h1> }); </script> </body> (...) App.initialize(); http://jsfiddle.net/x8zpH/1/ 8
M for Model Ember.Object 9
Ember.Object • Enhanced JavaScript object model • Computed Properties (synthetizes properties) • Observers (reacts to changes) • Bindings (syncs objects) Always access properties using get and set 10
Ember.Object var App = Ember.Application.create(); App.Person = Em.Object.extend({ firstName: null, lastName: null, fullName: function(){ return this.get('firstName') + " " + this.get('lastName'); }.property('firstName', 'lastName') }); Computed Property var john = App.Person.create({ firstName: "John", lastName: "Doe" }); john.get("fullName"); // John Doe What about computed property for arrays, hãn? femalesCount: function() { http://jsfiddle.net/cBWsr/2/ var people = this.get('people'); return people.filterProperty('isFemale', true). get('length'); }.property('people.@each.isFemale') 11
Ember.Object var App = Ember.Application.create(); App.Person = Em.Object.extend({ login: null, firstName: null, changedFirstName: function(){ this.set('login', this.get('firstName').toLowerCase()); }.observes('firstName') }); Observer var john = App.Person.create(); john.set('firstName', 'John'); john.get("login"); // john http://jsfiddle.net/X7QBU/3/ 12
Ember.Object App = Ember.Application.create({}); App.wife = Ember.Object.create({ householdIncome: 80000 }); App.husband = Ember.Object.create({ householdIncomeBinding: 'App.wife.householdIncome' Binding }); Ember.run.later(function() { // someone gets a raise App.husband.set('householdIncome', 90000); }, 3000); See the magic inside the view <script type="text/x-handlebars" > Wifes income: {{App.wife.householdIncome}}<br/> Husbands income: {{App.husband.householdIncome}} http://jsfiddle.net/qQ382/ </script> 13
Ember.Object • Apply for Models • Apply for Controllers • Apply for Views • Apply for (...) 14
Time for Dojo 15
Time for Dojo • Already? • It will be in a paused way • We have so many concepts to discuss 16
Time for Dojo todo doing verify done 17
Time for Dojo • Scrum board • Stories and tasks (executed by a person) • I want to create stories (tasks) • I want to edit stories (tasks) • I want to delete stories (tasks) • I want to assign a task for me • No server integration (for now) Next dev-day /o/ (ember-data) 18
Time for Dojo • Spoiler: http://jsfiddle.net/37YMc/2/ 19
Router 20
Router • Maps URLs to states and vice versa • Preferred for building large apps • Can link views based on the state • Loves name conventions 21
Router App.Router = Ember.Router.extend({ root: Em.Route.extend({ contacts: Em.Route.extend({ route: '/', redirectsTo: 'index' index: Em.Route.extend({ route: '/', connectOutlets: function(router) { router.get('applicationController').connectOutlet('contacts', App.Contacts.findAll()); } }), contact: Em.Route.extend({ route: '/contacts/:contact_id', connectOutlets: function(router, context) { router.get('contactsController').connectOutlet('contact', context); }, }) }) }) }); 22
WTF is outlet? ApplicationView Name convention {{outlet}} router.get('applicationController'). connectOutlet('contacts', objects); Name convention Passed objects ContactsView (objects) 23
C for Controller 24
C for Controller • Controller simple controller • ObjectController support to manipulate an Object • ArrayController support to manipulate a collection 25
C for Controller Accessing the content App.ContactController = Em.ObjectController.extend({ someProperty: 'cool-value', destroyRecord: function() { this.get('content').destroy(); } }); pushing a object to a controller’s collection App.ContactsController = Em.ArrayController.extend({ createContact: function(name) { push var contact = App.Contact.create({ name: name }); this.pushObject(contact); }, }); Remember that all binding’s magic apply to Controllers 26
V for View 27
V for View • Always associated with a template • Your friend when dealing with browser events • touch (touchStart), keyboard (keyDown), mouse (mouseDown), form (submit), drag and drop (dragStart), 28
V for View App.EditContactView = Ember.View.extend({ templateName: 'edit_contact', tagName: 'form', classNames: ['form-horizontal'], didInsertElement: function() { DOM event this._super(); this.$('input:first').focus(); }, submit: function(event) { Browser event event.preventDefault(); this.get('controller').updateRecord(); } }); <script type="text/x-handlebars" data-template-name="edit_contact"> {{ view Ember.TextArea }} <button class="button-primary" type="submit">Enviar</button> </script> 29
Handlebars helpers 30
Handlebars helpers • {{#if}} • {{#each}} • {{view}} • {{action}} 31
Final doubts 32
References • http://emberjs.com/ (updated yesterday!) • http://emberwatch.com/ 33
Thanks. /o/ Juliana Lucena 34

Check these out next

Ember.js - A JavaScript framework for creating ambitious web applications

Recommended

More Related Content

Slideshows for you(20)

Similar to Ember.js - A JavaScript framework for creating ambitious web applications (20)

Recently uploaded(20)

Ember.js - A JavaScript framework for creating ambitious web applications