SlideShare une entreprise Scribd logo
1  sur  34
Télécharger pour lire hors ligne
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

Contenu connexe

Tendances

Javascript Module Patterns
Javascript Module PatternsJavascript Module Patterns
Javascript Module PatternsNicholas Jansma
 
Viking academy backbone.js
Viking academy  backbone.jsViking academy  backbone.js
Viking academy backbone.jsBert Wijnants
 
Angular 1 + es6
Angular 1 + es6Angular 1 + es6
Angular 1 + es6장현 한
 
Workshop 1: Good practices in JavaScript
Workshop 1: Good practices in JavaScriptWorkshop 1: Good practices in JavaScript
Workshop 1: Good practices in JavaScriptVisual Engineering
 
AngularJS Architecture
AngularJS ArchitectureAngularJS Architecture
AngularJS ArchitectureEyal Vardi
 
Workshop 3: JavaScript build tools
Workshop 3: JavaScript build toolsWorkshop 3: JavaScript build tools
Workshop 3: JavaScript build toolsVisual Engineering
 
Backbone.js and friends
Backbone.js and friendsBackbone.js and friends
Backbone.js and friendsGood Robot
 
Intro to Ember.js
Intro to Ember.jsIntro to Ember.js
Intro to Ember.jsJay Phelps
 
«От экспериментов с инфраструктурой до внедрения в продакшен»​
«От экспериментов с инфраструктурой до внедрения в продакшен»​«От экспериментов с инфраструктурой до внедрения в продакшен»​
«От экспериментов с инфраструктурой до внедрения в продакшен»​FDConf
 
AngularJS for Java Developers
AngularJS for Java DevelopersAngularJS for Java Developers
AngularJS for Java DevelopersLoc Nguyen
 
Laravel 8 export data as excel file with example
Laravel 8 export data as excel file with exampleLaravel 8 export data as excel file with example
Laravel 8 export data as excel file with exampleKaty Slemon
 
Workshop 27: Isomorphic web apps with ReactJS
Workshop 27: Isomorphic web apps with ReactJSWorkshop 27: Isomorphic web apps with ReactJS
Workshop 27: Isomorphic web apps with ReactJSVisual Engineering
 
Building a Startup Stack with AngularJS
Building a Startup Stack with AngularJSBuilding a Startup Stack with AngularJS
Building a Startup Stack with AngularJSFITC
 
Vue.js + Django - configuración para desarrollo con webpack y HMR
Vue.js + Django - configuración para desarrollo con webpack y HMRVue.js + Django - configuración para desarrollo con webpack y HMR
Vue.js + Django - configuración para desarrollo con webpack y HMRJavier Abadía
 
Workshop 4: NodeJS. Express Framework & MongoDB.
Workshop 4: NodeJS. Express Framework & MongoDB.Workshop 4: NodeJS. Express Framework & MongoDB.
Workshop 4: NodeJS. Express Framework & MongoDB.Visual Engineering
 
Redux. From twitter hype to production
Redux. From twitter hype to productionRedux. From twitter hype to production
Redux. From twitter hype to productionFDConf
 
Introduction to Node.JS Express
Introduction to Node.JS ExpressIntroduction to Node.JS Express
Introduction to Node.JS ExpressEueung Mulyana
 
Backbone.js
Backbone.jsBackbone.js
Backbone.jsVO Tho
 

Tendances (20)

Javascript Module Patterns
Javascript Module PatternsJavascript Module Patterns
Javascript Module Patterns
 
Viking academy backbone.js
Viking academy  backbone.jsViking academy  backbone.js
Viking academy backbone.js
 
Angular 1 + es6
Angular 1 + es6Angular 1 + es6
Angular 1 + es6
 
Workshop 1: Good practices in JavaScript
Workshop 1: Good practices in JavaScriptWorkshop 1: Good practices in JavaScript
Workshop 1: Good practices in JavaScript
 
AngularJS Architecture
AngularJS ArchitectureAngularJS Architecture
AngularJS Architecture
 
Workshop 3: JavaScript build tools
Workshop 3: JavaScript build toolsWorkshop 3: JavaScript build tools
Workshop 3: JavaScript build tools
 
Backbone.js and friends
Backbone.js and friendsBackbone.js and friends
Backbone.js and friends
 
Intro to Ember.js
Intro to Ember.jsIntro to Ember.js
Intro to Ember.js
 
«От экспериментов с инфраструктурой до внедрения в продакшен»​
«От экспериментов с инфраструктурой до внедрения в продакшен»​«От экспериментов с инфраструктурой до внедрения в продакшен»​
«От экспериментов с инфраструктурой до внедрения в продакшен»​
 
AngularJS for Java Developers
AngularJS for Java DevelopersAngularJS for Java Developers
AngularJS for Java Developers
 
Laravel 8 export data as excel file with example
Laravel 8 export data as excel file with exampleLaravel 8 export data as excel file with example
Laravel 8 export data as excel file with example
 
Workshop 27: Isomorphic web apps with ReactJS
Workshop 27: Isomorphic web apps with ReactJSWorkshop 27: Isomorphic web apps with ReactJS
Workshop 27: Isomorphic web apps with ReactJS
 
Building a Startup Stack with AngularJS
Building a Startup Stack with AngularJSBuilding a Startup Stack with AngularJS
Building a Startup Stack with AngularJS
 
Vue.js + Django - configuración para desarrollo con webpack y HMR
Vue.js + Django - configuración para desarrollo con webpack y HMRVue.js + Django - configuración para desarrollo con webpack y HMR
Vue.js + Django - configuración para desarrollo con webpack y HMR
 
Workshop 4: NodeJS. Express Framework & MongoDB.
Workshop 4: NodeJS. Express Framework & MongoDB.Workshop 4: NodeJS. Express Framework & MongoDB.
Workshop 4: NodeJS. Express Framework & MongoDB.
 
Redux. From twitter hype to production
Redux. From twitter hype to productionRedux. From twitter hype to production
Redux. From twitter hype to production
 
AngularJS Basics with Example
AngularJS Basics with ExampleAngularJS Basics with Example
AngularJS Basics with Example
 
Drupal 8: Fields reborn
Drupal 8: Fields rebornDrupal 8: Fields reborn
Drupal 8: Fields reborn
 
Introduction to Node.JS Express
Introduction to Node.JS ExpressIntroduction to Node.JS Express
Introduction to Node.JS Express
 
Backbone.js
Backbone.jsBackbone.js
Backbone.js
 

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

Ember.js for Big Profit
Ember.js for Big ProfitEmber.js for Big Profit
Ember.js for Big ProfitCodeCore
 
Building Web Apps with Express
Building Web Apps with ExpressBuilding Web Apps with Express
Building Web Apps with ExpressAaron Stannard
 
Introducing Rendr: Run your Backbone.js apps on the client and server
Introducing Rendr: Run your Backbone.js apps on the client and serverIntroducing Rendr: Run your Backbone.js apps on the client and server
Introducing Rendr: Run your Backbone.js apps on the client and serverSpike Brehm
 
Introduction to Ember.js
Introduction to Ember.jsIntroduction to Ember.js
Introduction to Ember.jsVinoth Kumar
 
Practical AngularJS
Practical AngularJSPractical AngularJS
Practical AngularJSWei Ru
 
Writing HTML5 Web Apps using Backbone.js and GAE
Writing HTML5 Web Apps using Backbone.js and GAEWriting HTML5 Web Apps using Backbone.js and GAE
Writing HTML5 Web Apps using Backbone.js and GAERon Reiter
 
Meteor Meet-up San Diego December 2014
Meteor Meet-up San Diego December 2014Meteor Meet-up San Diego December 2014
Meteor Meet-up San Diego December 2014Lou Sacco
 
Patterns Are Good For Managers
Patterns Are Good For ManagersPatterns Are Good For Managers
Patterns Are Good For ManagersAgileThought
 
React & The Art of Managing Complexity
React &  The Art of Managing ComplexityReact &  The Art of Managing Complexity
React & The Art of Managing ComplexityRyan Anklam
 
Crossing the Bridge: Connecting Rails and your Front-end Framework
Crossing the Bridge: Connecting Rails and your Front-end FrameworkCrossing the Bridge: Connecting Rails and your Front-end Framework
Crossing the Bridge: Connecting Rails and your Front-end FrameworkDaniel Spector
 
Containers & Dependency in Ember.js
Containers & Dependency in Ember.jsContainers & Dependency in Ember.js
Containers & Dependency in Ember.jsMatthew Beale
 
Clojure and the Web
Clojure and the WebClojure and the Web
Clojure and the Webnickmbailey
 
Good karma: UX Patterns and Unit Testing in Angular with Karma
Good karma: UX Patterns and Unit Testing in Angular with KarmaGood karma: UX Patterns and Unit Testing in Angular with Karma
Good karma: UX Patterns and Unit Testing in Angular with KarmaExoLeaders.com
 
How and why i roll my own node.js framework
How and why i roll my own node.js frameworkHow and why i roll my own node.js framework
How and why i roll my own node.js frameworkBen Lin
 
Angular.js Primer in Aalto University
Angular.js Primer in Aalto UniversityAngular.js Primer in Aalto University
Angular.js Primer in Aalto UniversitySC5.io
 
MVC on the server and on the client
MVC on the server and on the clientMVC on the server and on the client
MVC on the server and on the clientSebastiano Armeli
 
Top 10 Mistakes AngularJS Developers Make
Top 10 Mistakes AngularJS Developers MakeTop 10 Mistakes AngularJS Developers Make
Top 10 Mistakes AngularJS Developers MakeMark Meyer
 

Similaire à Ember.js - A JavaScript framework for creating ambitious web applications (20)

Ember.js for Big Profit
Ember.js for Big ProfitEmber.js for Big Profit
Ember.js for Big Profit
 
Angular js
Angular jsAngular js
Angular js
 
Building Web Apps with Express
Building Web Apps with ExpressBuilding Web Apps with Express
Building Web Apps with Express
 
Introducing Rendr: Run your Backbone.js apps on the client and server
Introducing Rendr: Run your Backbone.js apps on the client and serverIntroducing Rendr: Run your Backbone.js apps on the client and server
Introducing Rendr: Run your Backbone.js apps on the client and server
 
Introduction to Ember.js
Introduction to Ember.jsIntroduction to Ember.js
Introduction to Ember.js
 
Practical AngularJS
Practical AngularJSPractical AngularJS
Practical AngularJS
 
Writing HTML5 Web Apps using Backbone.js and GAE
Writing HTML5 Web Apps using Backbone.js and GAEWriting HTML5 Web Apps using Backbone.js and GAE
Writing HTML5 Web Apps using Backbone.js and GAE
 
Basics of AngularJS
Basics of AngularJSBasics of AngularJS
Basics of AngularJS
 
Meteor Meet-up San Diego December 2014
Meteor Meet-up San Diego December 2014Meteor Meet-up San Diego December 2014
Meteor Meet-up San Diego December 2014
 
Patterns Are Good For Managers
Patterns Are Good For ManagersPatterns Are Good For Managers
Patterns Are Good For Managers
 
React & The Art of Managing Complexity
React &  The Art of Managing ComplexityReact &  The Art of Managing Complexity
React & The Art of Managing Complexity
 
Crossing the Bridge: Connecting Rails and your Front-end Framework
Crossing the Bridge: Connecting Rails and your Front-end FrameworkCrossing the Bridge: Connecting Rails and your Front-end Framework
Crossing the Bridge: Connecting Rails and your Front-end Framework
 
Containers & Dependency in Ember.js
Containers & Dependency in Ember.jsContainers & Dependency in Ember.js
Containers & Dependency in Ember.js
 
Clojure and the Web
Clojure and the WebClojure and the Web
Clojure and the Web
 
Good karma: UX Patterns and Unit Testing in Angular with Karma
Good karma: UX Patterns and Unit Testing in Angular with KarmaGood karma: UX Patterns and Unit Testing in Angular with Karma
Good karma: UX Patterns and Unit Testing in Angular with Karma
 
AngularJs Crash Course
AngularJs Crash CourseAngularJs Crash Course
AngularJs Crash Course
 
How and why i roll my own node.js framework
How and why i roll my own node.js frameworkHow and why i roll my own node.js framework
How and why i roll my own node.js framework
 
Angular.js Primer in Aalto University
Angular.js Primer in Aalto UniversityAngular.js Primer in Aalto University
Angular.js Primer in Aalto University
 
MVC on the server and on the client
MVC on the server and on the clientMVC on the server and on the client
MVC on the server and on the client
 
Top 10 Mistakes AngularJS Developers Make
Top 10 Mistakes AngularJS Developers MakeTop 10 Mistakes AngularJS Developers Make
Top 10 Mistakes AngularJS Developers Make
 

Dernier

Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdfPedro Manuel
 
Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.YounusS2
 
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfAijun Zhang
 
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6DianaGray10
 
Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintMahmoud Rabie
 
AI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarAI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarPrecisely
 
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsIgniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsSafe Software
 
Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesDavid Newbury
 
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaborationbruanjhuli
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPathCommunity
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024SkyPlanner
 
How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?IES VE
 
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopBachir Benyammi
 
Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Adtran
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationIES VE
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...Aggregage
 
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDEADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDELiveplex
 
VoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXVoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXTarek Kalaji
 
20230202 - Introduction to tis-py
20230202 - Introduction to tis-py20230202 - Introduction to tis-py
20230202 - Introduction to tis-pyJamie (Taka) Wang
 

Dernier (20)

Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdf
 
Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.
 
201610817 - edge part1
201610817 - edge part1201610817 - edge part1
201610817 - edge part1
 
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdf
 
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6
 
Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership Blueprint
 
AI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarAI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity Webinar
 
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsIgniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
 
Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond Ontologies
 
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation Developers
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024
 
How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?
 
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 Workshop
 
Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
 
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDEADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
 
VoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXVoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBX
 
20230202 - Introduction to tis-py
20230202 - Introduction to tis-py20230202 - Introduction to tis-py
20230202 - Introduction to tis-py
 

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('people.@each.isFemale') 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
  • 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
  • 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
  • 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
  • 33. References • http://emberjs.com/ (updated yesterday!) • http://emberwatch.com/ 33
  • 34. Thanks. /o/ Juliana Lucena 34