Building Apps with Ember

  • View
    193

  • Download
    5

Embed Size (px)

DESCRIPTION

Building Apps with Ember with Yehuda Katz Presented on September 17 2014 at FITC's Web Unleashed Toronto 2014 Conference In this session, Yehuda will talk about some of the benefits of Ember and show you how to build an app using the latest Ember features and tools. OBJECTIVE To learn about the benefits of Ember and how Ember can help you build web applications. TARGET AUDIENCE Front end web developers with some experience using tools like Backbone, Angular, React or Ember. ASSUMED AUDIENCE KNOWLEDGE Knowledge of JavaScript and building UIs for the browser.

Text of Building Apps with Ember

  • 1. Hello World
  • 2. What is "Data Binding"
  • 3. Hello {{name}} !

    You are {{age}} years old

    !
    • {{#each number in numbers}}
    • {{number}} {{/each}}
  • 4. Data Binding Instantiation Parent Mutation Child Mutation
  • 5. function person() { ! ! ! } Hello {{name}} !

    You are {{age}} years old

    !
    • {{#each number in numbers}}
    • {{number}} {{/each}}
  • 6. Hello {{name}} !

    You are {{age}} years old

    !
    • {{#each number in numbers}}
    • {{number}} {{/each}}
    ( name "Yehuda Katz" age ) 32 numbers [ "718-877-1325" ] Hello Yehuda Katz !

    You are 32 years old

    !
    • 718-877-1325
  • 7. Data Binding Instantiation Parent Mutation Child Mutation
  • 8. Hello {{name}} !

    You are {{age}} years old

    !
    • {{#each number in numbers}}
    • {{number}} {{/each}}
    ( name "Yehuda Katz" age ) 32 numbers [ "718-877-1325" ] Hello Yehuda Katz !

    You are 32 years old

    !
    • 718-877-1325
  • 9. [ "718-877-1325" ] ( ) Hello Yehuda Katz !

    You are 32 years old

    !
    • 718-877-1325
    Hello {{name}} !

    You are {{age}} years old

    !
    • {{#each number in numbers}}
    • {{number}} {{/each}}
    name "Yehuda Katz" age 33 numbers 33
  • 10. Data Binding Instantiation Parent Mutation Child Mutation
  • 11. function person() { ! ! ! } Hello {{name}} !

    {{input value=age}} You are {{age}} years old

    !
    • {{#each number in numbers}}
    • {{number}} {{/each}}
  • 12. Hello {{name}} !

    {{input value=age}} You are {{age}} years old

    !
    • {{#each number in numbers}}
    • {{number}} {{/each}}
    ( name "Yehuda Katz" age ) 32 numbers [ "718-877-1325" ] Hello Yehuda Katz !

    You are 32 years old

    !
    • 718-877-1325
  • 13. Hello {{name}} !

    {{input value=age}} You are {{age}} years old

    !
    • {{#each number in numbers}}
    • {{number}} {{/each}}
    ( name "Yehuda Katz" age ) 32 numbers [ "718-877-1325" ] Hello Yehuda Katz !

    You are 32 years old

    !
    • 718-877-1325
  • 14. Hello {{name}} !

    {{input value=age}} You are {{age}} years old

    !
    • {{#each number in numbers}}
    • {{number}} {{/each}}
    ( name "Yehuda Katz" age ) 33 numbers [ "718-877-1325" ] Hello Yehuda Katz !

    You are 32 years old

    !
    • 718-877-1325
  • 15. Hello {{name}} !

    {{input value=age}} You are {{age}} years old

    !
    • {{#each number in numbers}}
    • {{number}} {{/each}}
    ( name "Yehuda Katz" age ) 33 numbers [ "718-877-1325" ] Hello Yehuda Katz !

    You are 33 years old

    !
    • 718-877-1325
  • 16. Child Mutation, How {{name}}
  • 17. Child Mutation, Observation {{name}} (Polymer, Knockout, Ember) Object Model
  • 18. Pros Very predictable performance Transparent Updates Maximal Decoupling Cons Requires .set (except O.o) Can obscure data flow
  • 19. Child Mutation, Pub Sub {{name}} (Flux, Backbone) Event Bus
  • 20. Pros Cons Very simple Reasonable decoupling Very repetitive Often uses globals Obscures data flow
  • 21. Child Mutation, Dirty Checking {{name}} (Angular) Post-Event
  • 22. Pros Cons Mostly transparent updates* Good decoupling No .set and works today Unpredictable performance Can obscure data flow *Leaky watch abstraction
  • 23. Child Mutation, Virtual DOM {{name}} (React, Ember.next?) Parent Component
  • 24. Pros Explicit data flow No .set and works today Reasonably predictable performance Cons Explicit updates Performance edge cases Asterisks around server coordination
  • 25. Data Binding Instantiation Parent Mutation Child Mutation
  • 26. Instantiation, When? App bootstrap Page navigation
  • 27. Bootstrap Instantiation, Frameworks Backbone and React: up to you Angular: Automatically, via the app attribute Ember: Automatically, via the router
  • 28. Navigation Instantiation, Frameworks Backbone: Optionally, through the router React: Up to you Angular: Optionally, via the router Ember: Automatically, via the router
  • 29. Parent Mutation, When? Ajax response WebSockets
  • 30. Parent Mutation, How? Option 1: Indirectly, through pub/sub or observation Option 2: Directly, by coupling the request or response to UI
  • 31. Ideally, Consistent
  • 32. Router, Observable Objects instantiation & navigation internal mutation & external mutation
  • 33. Instantation Navigation Internal External React Your choice Your choice Explicit via Callbacks Notify parent component, which async triggers setState Angular Optional Router Transparent Notify $scope, which async updates itself, then transparent Ember Router Router Transparent Notify router, which async updates model, then transparent Backbone Your choice, optional router Your choice, optional router "Pub Sub" "Pub Sub"