Dev-day Ember.js A JavaScript framework for creating ambitious web applications Juliana Lucena 26 Oct 2012
Ember.js - A JavaScript framework for creating ambitious web applications
May 17, 2015
Dev-day presented at Redu Educational Technologies about Ember.js.
It points some Ember.js' benefits and gives an overview.
It points some Ember.js' benefits and gives an overview.
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
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
Related Documents
