Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Your Website is Just an App

tomdale
November 13, 2012

Your Website is Just an App

In this talk, we'll explore why you should think of your web application as no different from an iOS or Android app, by moving 100% of logic and HTML to the browser. While other frameworks like Backbone help you embed "islands of richness" into the traditional page-by-page model, we'll also explore the tools Ember.js gives you to build real, honest-to-goodness apps that run entirely in the browser.

tomdale

November 13, 2012
Tweet

More Decks by tomdale

Other Decks in Technology

Transcript

  1. Your Website is Just an App This is a talk

    in two parts. In the first half, I want to convince you that, if you have a sophisticated web app, you should be architecting it like an app for every other platform—Mac, Windows, iOS, Android. In the second half, I'll talk specifically about some of the features of Ember.js that help you write these apps, and make them as fast as possible.
  2. “To improve the twitter.com experience for everyone, we've been working

    to take back control of our front-end performance by moving the rendering to the server.
  3. “Turbolinks makes following links in your web application faster. Instead

    of letting the browser recompile the JavaScript and CSS between each page change, it keeps the current page instance alive and replaces only the body and the title in the head.
  4. 500ms The problem with this is that your user interface

    can only respond as fast as your server—especially bad on flaky 3G connections
  5. By decoupling the user interface from the typical HTTP request/

    response cycle, you can completely modify how updates are communicated to the client. WebSocket
  6. { todos: [{ isDone: false }, { isDone: false },

    { isDone: false }], remainingTodos: 3 } Todo 1 Todo 2 Todo 3 3 Remaining
  7. { todos: [{ isDone: true }, { isDone: false },

    { isDone: false }], remainingTodos: 3 } Todo 1 Todo 2 Todo 3 3 Remaining
  8. { todos: [{ isDone: true }, { isDone: false },

    { isDone: false }], remainingTodos: 3 } Todo 1 Todo 2 Todo 3 3 Remaining ✔
  9. { todos: [{ isDone: true }, { isDone: false },

    { isDone: false }], remainingTodos: 2 } Todo 1 Todo 2 Todo 3 3 Remaining ✔
  10. { todos: [{ isDone: true }, { isDone: false },

    { isDone: false }], remainingTodos: 2 } Todo 1 Todo 2 Todo 3 2 Remaining ✔
  11. { todos: [{ isDone: true }, { isDone: true },

    { isDone: false }], remainingTodos: 2 } Todo 1 Todo 2 Todo 3 2 Remaining ✔
  12. { todos: [{ isDone: true }, { isDone: true },

    { isDone: false }], remainingTodos: 2 } Todo 1 Todo 2 Todo 3 2 Remaining ✔ ✔
  13. { todos: [{ isDone: true }, { isDone: true },

    { isDone: false }], remainingTodos: 1 } Todo 1 Todo 2 Todo 3 2 Remaining ✔ ✔
  14. { todos: [{ isDone: true }, { isDone: true },

    { isDone: false }], remainingTodos: 1 } Todo 1 Todo 2 Todo 3 1 Remaining ✔ ✔
  15. { todos: [{ isDone: true }, { isDone: true },

    { isDone: true }], remainingTodos: 1 } Todo 1 Todo 2 Todo 3 1 Remaining ✔ ✔
  16. { todos: [{ isDone: true }, { isDone: true },

    { isDone: true }], remainingTodos: 1 } Todo 1 Todo 2 Todo 3 1 Remaining ✔ ✔ ✔
  17. { todos: [{ isDone: true }, { isDone: true },

    { isDone: true }], remainingTodos: 0 } Todo 1 Todo 2 Todo 3 1 Remaining ✔ ✔ ✔
  18. { todos: [{ isDone: true }, { isDone: true },

    { isDone: true }], remainingTodos: 0 } Todo 1 Todo 2 Todo 3 0 Remaining ✔ ✔ ✔
  19. { todos: [{ isDone: true }, { isDone: false },

    { isDone: false }], remainingTodos: 3 } Todo 1 Todo 2 Todo 3 3 Remaining
  20. { todos: [{ isDone: true }, { isDone: false },

    { isDone: false }], remainingTodos: – } Todo 1 Todo 2 Todo 3 3 Remaining
  21. { todos: [{ isDone: true }, { isDone: true },

    { isDone: false }], remainingTodos: – } Todo 1 Todo 2 Todo 3 3 Remaining
  22. { todos: [{ isDone: true }, { isDone: true },

    { isDone: true }], remainingTodos: – } Todo 1 Todo 2 Todo 3 3 Remaining
  23. { todos: [{ isDone: true }, { isDone: true },

    { isDone: true }], remainingTodos: 0 } Todo 1 Todo 2 Todo 3 3 Remaining
  24. { todos: [{ isDone: true }, { isDone: true },

    { isDone: true }], remainingTodos: 0 } Todo 1 Todo 2 Todo 3 0 Remaining
  25. { todos: [{ isDone: true }, { isDone: true },

    { isDone: true }], remainingTodos: 0 } Todo 1 Todo 2 Todo 3 0 Remaining ✔
  26. { todos: [{ isDone: true }, { isDone: true },

    { isDone: true }], remainingTodos: 0 } Todo 1 Todo 2 Todo 3 0 Remaining ✔ ✔
  27. { todos: [{ isDone: true }, { isDone: true },

    { isDone: true }], remainingTodos: 0 } Todo 1 Todo 2 Todo 3 0 Remaining ✔ ✔ ✔
  28. Declarative Advantages •Can be optimized by the system •As the

    framework gets faster, your apps get faster •Makes best practices portable •Automatic memory management
  29. Identity Map •Every request for a record returns the same

    object •Changes synchronized across app •Avoid redundant HTTP requests