Ember.js - A JavaScript framework for creating ambitious web applications
16 likes9,672 views
The document provides an overview of Ember.js, a JavaScript framework designed for building ambitious web applications, emphasizing its browser-based MVC architecture and features that facilitate faster user interaction. Key topics include the separation of back-end and front-end processes, model and controller functionalities, and the use of Handlebars.js for templating. It also discusses the router for managing application states and includes examples and links to relevant resources.
![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](https://image.slidesharecdn.com/dev-day-emberjs-121026104433-phpapp01/85/Ember-js-A-JavaScript-framework-for-creating-ambitious-web-applications-29-320.jpg)
Ember.js - A JavaScript framework for creating ambitious web applications
- 1. Dev-day Ember.js A JavaScript framework for creating ambitious web applications Juliana Lucena 26 Oct 2012
- 2. Why? • Clearly separate back-end and front- end • Faster user app interaction • Makes your life easier :) 2
- 3. Ember.js • Browser based MVC framework • Eliminates boilerplate • Provides architecture • Based on event propagation 3
- 4. 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
- 5. Examples • http://emberjs.com/examples/ • https://github.com/dgeb/ ember_data_example 5
- 7. 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
- 8. 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
- 9. M for Model Ember.Object 9
- 10. 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
- 11. 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('[email protected]') 11
- 12. 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
- 13. 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
- 14. Ember.Object • Apply for Models • Apply for Controllers • Apply for Views • Apply for (...) 14
- 15. Time for Dojo 15
- 16. Time for Dojo • Already? • It will be in a paused way • We have so many concepts to discuss 16
- 17. Time for Dojo todo doing verify done 17
- 18. 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
- 19. Time for Dojo • Spoiler: http://jsfiddle.net/37YMc/2/ 19
- 20. Router 20
- 21. Router • Maps URLs to states and vice versa • Preferred for building large apps • Can link views based on the state • Loves name conventions 21
- 22. 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
- 23. WTF is outlet? ApplicationView Name convention {{outlet}} router.get('applicationController'). connectOutlet('contacts', objects); Name convention Passed objects ContactsView (objects) 23
- 25. C for Controller • Controller simple controller • ObjectController support to manipulate an Object • ArrayController support to manipulate a collection 25
- 26. 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
- 27. V for View 27
- 28. 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
- 29. 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
- 30. Handlebars helpers 30
- 31. Handlebars helpers • {{#if}} • {{#each}} • {{view}} • {{action}} 31
- 32. Final doubts 32
- 33. References • http://emberjs.com/ (updated yesterday!) • http://emberwatch.com/ 33
- 34. Thanks. /o/ Juliana Lucena 34