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

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."
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
27. Demo 2
32. Demo 3
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?
42. THANK YOU! @blangslet github.com/blangslet @signwithenvoy