Your SlideShare is downloading. ×
0
Dev-day                Ember.jsA JavaScript framework for creating ambitious web                   applications           ...
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 propa...
Dependencies    • jQuery    • Handlebars.js - Template language      <script type="text/x-handlebars" data-template-name="...
Examples    • http://emberjs.com/examples/    • https://github.com/dgeb/      ember_data_example5
Ember.js MVC6
MVC Workflow                                         User                       Notifies    Model                           ...
Hello Reduvar App = Em.Application.create();App.ApplicationView = Em.View.extend({  templateName: application});App.Applic...
M for Model        Ember.Object9
Ember.Object     • Enhanced JavaScript object model     • Computed Properties (synthetizes       properties)     • Observe...
Ember.Objectvar App = Ember.Application.create();App.Person = Em.Object.extend({  firstName: null,  lastName: null,  fullN...
Ember.Objectvar App = Ember.Application.create();App.Person = Em.Object.extend({  login: null,  firstName: null,  changedF...
Ember.ObjectApp = Ember.Application.create({});App.wife = Ember.Object.create({  householdIncome: 80000});App.husband = Em...
Ember.Object     • Apply for Models     • Apply for Controllers     • Apply for Views     • Apply for (...)14
Time for Dojo15
Time for Dojo     • Already?     • It will be in a paused way     • We have so many concepts to discuss16
Time for Dojo     todo   doing   verify   done17
Time for Dojo     • Scrum board      • Stories and tasks (executed by a person)        •   I want to create stories (tasks...
Time for Dojo     • Spoiler: http://jsfiddle.net/37YMc/2/19
Router20
Router     • Maps URLs to states and vice versa     • Preferred for building large apps     • Can link views based on the ...
RouterApp.Router = Ember.Router.extend({  root: Em.Route.extend({    contacts: Em.Route.extend({      route: /,      redir...
WTF is outlet?     ApplicationView                    Name convention        {{outlet}}                                   ...
C for Controller24
C for Controller     • Controller    simple controller     • ObjectController       support to manipulate       an Object ...
C for Controller                       Accessing the contentApp.ContactController = Em.ObjectController.extend({  someProp...
V for View27
V for View     • Always associated with a template     • Your friend when dealing with browser       events      • touch (...
V for ViewApp.EditContactView = Ember.View.extend({  templateName: edit_contact,  tagName: form,  classNames: [form-horizo...
Handlebars        helpers30
Handlebars helpers     • {{#if}}     • {{#each}}     • {{view}}     • {{action}}31
Final doubts32
References     • http://emberjs.com/ (updated       yesterday!)     • http://emberwatch.com/33
Thanks. /o/        Juliana Lucena34
Upcoming SlideShare
Loading in...5
×

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

8,407

Published on

Dev-day presented at Redu Educational Technologies about Ember.js.

It points some Ember.js' benefits and gives an overview.

Published in: Technology
0 Comments
15 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
8,407
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
163
Comments
0
Likes
15
Embeds 0
No embeds

No notes for slide

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

  1. 1. Dev-day Ember.jsA JavaScript framework for creating ambitious web applications Juliana Lucena 26 Oct 2012
  2. 2. Why? • Clearly separate back-end and front- end • Faster user app interaction • Makes your life easier :)2
  3. 3. Ember.js • Browser based MVC framework • Eliminates boilerplate • Provides architecture • Based on event propagation3
  4. 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. 5. Examples • http://emberjs.com/examples/ • https://github.com/dgeb/ ember_data_example5
  6. 6. Ember.js MVC6
  7. 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 Deserialize7
  8. 8. Hello Reduvar 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. 9. M for Model Ember.Object9
  10. 10. Ember.Object • Enhanced JavaScript object model • Computed Properties (synthetizes properties) • Observers (reacts to changes) • Bindings (syncs objects) Always access properties using get and set10
  11. 11. Ember.Objectvar 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 Propertyvar 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
  12. 12. Ember.Objectvar App = Ember.Application.create();App.Person = Em.Object.extend({ login: null, firstName: null, changedFirstName: function(){ this.set(login, this.get(firstName).toLowerCase()); }.observes(firstName)}); Observervar john = App.Person.create();john.set(firstName, John);john.get("login"); // john http://jsfiddle.net/X7QBU/3/12
  13. 13. Ember.ObjectApp = 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. 14. Ember.Object • Apply for Models • Apply for Controllers • Apply for Views • Apply for (...)14
  15. 15. Time for Dojo15
  16. 16. Time for Dojo • Already? • It will be in a paused way • We have so many concepts to discuss16
  17. 17. Time for Dojo todo doing verify done17
  18. 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. 19. Time for Dojo • Spoiler: http://jsfiddle.net/37YMc/2/19
  20. 20. Router20
  21. 21. Router • Maps URLs to states and vice versa • Preferred for building large apps • Can link views based on the state • Loves name conventions21
  22. 22. RouterApp.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. 23. WTF is outlet? ApplicationView Name convention {{outlet}} router.get(applicationController). connectOutlet(contacts, objects); Name convention Passed objects ContactsView (objects)23
  24. 24. C for Controller24
  25. 25. C for Controller • Controller simple controller • ObjectController support to manipulate an Object • ArrayController support to manipulate a collection25
  26. 26. C for Controller Accessing the contentApp.ContactController = Em.ObjectController.extend({ someProperty: cool-value, destroyRecord: function() { this.get(content).destroy(); }}); pushing a object to a controller’s collectionApp.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 Controllers26
  27. 27. V for View27
  28. 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. 29. V for ViewApp.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. 30. Handlebars helpers30
  31. 31. Handlebars helpers • {{#if}} • {{#each}} • {{view}} • {{action}}31
  32. 32. Final doubts32
  33. 33. References • http://emberjs.com/ (updated yesterday!) • http://emberwatch.com/33
  34. 34. Thanks. /o/ Juliana Lucena34
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×