Ember.js - A JavaScript framework for creating ambitious web applications
34
Dev-day Ember.js A JavaScript framework for creating ambitious web applications Juliana Lucena 26 Oct 2012
-
Upload
juliana-lucena -
Category
Technology
-
view
8.021 -
download
3
description
Dev-day presented at Redu Educational Technologies about Ember.js. It points some Ember.js' benefits and gives an overview.
Transcript of Ember.js - A JavaScript framework for creating ambitious web applications
Dev-dayEmber.js
A JavaScript framework for creating ambitious web applications
Juliana Lucena26 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
Model
Controller
View
Updates
Model Notifies
Updates
ViewUser action
7
Router• Tracks the app’s state• Affects the application’s view hierarchy• Mediates between the MVC components
URL Usable app stateDeserialize
Serialize
Hello Redu
8
var App = Em.Application.create();
App.ApplicationView = Em.View.extend({ templateName: 'application'});
App.ApplicationController = Em.View.extend({!});
App.Router = Em.Router.extend({ root: Ember.Route.extend({ index: Ember.Route.extend({ route: '/' }) })});
App.initialize();
(...)<body> <script type="text/x-handlebars" data-template-name="application"> <h1>Hello Redu! (chuckle)</h1> </script></body>(...)
index.html
http://jsfiddle.net/x8zpH/1/
M for ModelEmber.Object
9
Ember.Object
• Enhanced JavaScript object model
• Computed Properties (synthetizes properties)
• Observers (reacts to changes)
• Bindings (syncs objects)
10
Always access properties using get and set
11
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')});
var john = App.Person.create({ firstName: "John", lastName: "Doe"});john.get("fullName"); // John Doe
Computed Property
http://jsfiddle.net/cBWsr/2/femalesCount: function() { var people = this.get('people'); return people.filterProperty('isFemale', true). get('length');}.property('[email protected]')
What about computed property for arrays, hãn?
Ember.Object
12
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')});
var john = App.Person.create();john.set('firstName', 'John');john.get("login"); // john
Observer
http://jsfiddle.net/X7QBU/3/
Ember.Object
13
App = Ember.Application.create({});
App.wife = Ember.Object.create({ householdIncome: 80000});
App.husband = Ember.Object.create({ householdIncomeBinding: 'App.wife.householdIncome'});
Ember.run.later(function() { // someone gets a raise App.husband.set('householdIncome', 90000);}, 3000);
Binding
http://jsfiddle.net/qQ382/
<script type="text/x-handlebars" > Wifes income: {{App.wife.householdIncome}}<br/> Husbands income: {{App.husband.householdIncome}} </script>
See the magic inside the view
Ember.Object
Ember.Object
• Apply for Models
• Apply for Controllers
• Apply for Views
• Apply for (...)
14
Time for Dojo
15
Time for Dojo
16
• Already?
• It will be in a paused way
• We have so many concepts to discuss
Time for Dojo
17
todo doing verify done
Time for Dojo
18
• 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)
Time for Dojo
• Spoiler: http://jsfiddle.net/37YMc/2/
19
Router
20
Router
21
• Maps URLs to states and vice versa
• Preferred for building large apps
• Can link views based on the state
• Loves name conventions
Router
22
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); }, }) }) })});
WTF is outlet?
23
ContactsView(objects)
router.get('applicationController').connectOutlet('contacts', objects);
Name convention
Name convention
Passed objects
ApplicationView
{{outlet}}
C for Controller
24
C for Controller
• Controller simple controller
• ObjectController support to manipulate an Object
• ArrayController support to manipulate a collection
25
push
C for Controller
26
App.ContactController = Em.ObjectController.extend({ someProperty: 'cool-value',
destroyRecord: function() { this.get('content').destroy(); }});
App.ContactsController = Em.ArrayController.extend({ createContact: function(name) { var contact = App.Contact.create({ name: name }); this.pushObject(contact); },});
pushing a object to a controller’s collection
Accessing the content
Remember that all binding’s magic apply to
Controllers
V for View
27
V for View
28
• Always associated with a template
• Your friend when dealing with browser events
• touch (touchStart), keyboard (keyDown), mouse (mouseDown), form (submit), drag and drop (dragStart),
V for View
29
App.EditContactView = Ember.View.extend({ templateName: 'edit_contact', tagName: 'form', classNames: ['form-horizontal'],
didInsertElement: function() { this._super(); this.$('input:first').focus(); },
submit: function(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>
DOM event
Browser event
Handlebars helpers
30
Handlebars helpers
31
• {{#if}}
• {{#each}}
• {{view}}
• {{action}}
Final doubts
32
References
• http://emberjs.com/ (updated yesterday!)
• http://emberwatch.com/
33
Thanks. /o/
34
Juliana Lucena
