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

Interaction Design with Ember 2.0 and Polymer

Interaction Design with Ember 2.0 and Polymer

EmberConf 2015 Talk about integrations between htmlbars and polymer to create inter-state animated transitions.

Source code is at: https://github.com/blangslet/treasure-hunt

25b19cc4d64c1ef857b01266b4493967?s=128

Bryan Langslet

March 04, 2015
Tweet

Transcript

  1. EMBERCONF 2015 PROJECT DATE CLIENT MARCH 4, 2015 INTERACTION DESIGN

    WITH EMBER 2.0 AND POLYMER
  2. Turmoil in the Web Landscape DOM Web Views SUCK! The

    DOM is horribly slow!
  3. Web = Classic Underdog Story

  4. Oliver Twist

  5. Cool Runnings

  6. Dirty Dancing

  7. I’m a huge believer in the web The web browser

    is the largest application runtime in the world and will just continue to grow. Every single device, no matter what it is, has to be connected to the web. Develop native apps for each? Web-style engineering skill-sets make too much business sense, and inevitably will prevail.
  8. Web Perf is on the Rise Web frameworks and toolkits

    are getting closer and closer to native performance every day. Moving towards native-style “multi-threaded” perf: 
 Web Components extend the browser and the web animations API runs off of the main JS thread. Hybrid apps have a bad reputation, but if you use the right, performant interlocking pieces, you can build delightful mobile apps with web tech.
  9. Yes, Native Apps Can Be

  10. “The fact remains that web tools are starting to get

    really fucking awesome.”
  11. Leverage My Time How can I - one person with

    a laptop - leverage my time as powerfully as I possibly can, every minute I dedicate to work?
  12. Standing on the Shoulders of Giants

  13. Best of Ember + Polymer + Material Design

  14. Giddy

  15. Ember-Flow “A paradigm shift for web interaction design: an animation

    approach that bridges the gap between application states, providing a sense of context and clarity of purpose as you move through an app experience."
  16. None
  17. Ember-Flow Integrates Ember 2.0 features and Polymer web components to

    shift web app flows from jarring, state- based, click-pop, click-pop interactions -> -> to a continuous flow through an app… …with smooth navigation, no break in the user experience.
  18. Ember-Flow The Goal:
 To blur the lines between native and

    web. 
 To create such an immersive experience that 
 you don’t notice what’s running what.
  19. Why should I care about web components? WTF is the

    difference between an ember component and a polymer component (and when do I use each)? How can I use web components to be more productive as a developer day to day? Web Components - ¯\_(ツ)_/¯
  20. Web Component Spec Extending the browser itself Encapsulation Declarative True

    reusability/portability
  21. Developer productivity Conventions and developer happiness Brilliant community World-class routing

    and state management Ember vs. Polymer Use Cases I ❤️
  22. Constantly pushing the web forward Bridging the gap between the

    browser APIs 
 of tomorrow Being able to use them in production in your apps today Ember vs. Polymer Use Cases I ❤️ Google’s & Projects for:
  23. Web Animations API Web Animations API - has the best

    of both CSS and Javascript animations Web Animations run outside of the main thread - can be accelerated on the GPU - outside the main thread in parallel browser rendering engines. Chrome uses the same engine to render CSS animations as Web Animations - declaratively & concisely in javascript with max perf Motion Paths, animation grouping, granular control
  24. Demo 1

  25. None
  26. None
  27. Demo 2

  28. None
  29. None
  30. None
  31. None
  32. Demo 3

  33. None
  34. None
  35. Trip Treasure Hunt Live Live Demo on iPad - Terrible

    Idea
  36. OPEN SOURCE! github.com/blangslet

  37. Ember for routing, high level architecture, translating user intent into

    meaningful state/data manipulation and persistence. Polymer layout grid: built on flexbox, concise, declarative structure. Ember Components + Polymer Components Polyfills - things like shadow DOM, templating, etc. - getting to use tomorrow’s technology in production today. Dream Stack
  38. Ember Going Forward

  39. Community

  40. Community Who are the people that you’ve met in these

    couple days that you can build relationships with and that will change the course of your life? What are the ideas that will change the way you think about yourself, your own capabilities and the community momentum around you?
  41. None
  42. THANK YOU! @blangslet github.com/blangslet @signwithenvoy