Interaction Design with Ember 2.0 and Polymer

Slide 1

Slide 1 text

EMBERCONF 2015 PROJECT DATE CLIENT MARCH 4, 2015 INTERACTION DESIGN WITH EMBER 2.0 AND POLYMER

Slide 2

Slide 2 text

Turmoil in the Web Landscape DOM Web Views SUCK! The DOM is horribly slow!

Slide 3

Slide 3 text

Web = Classic Underdog Story

Slide 4

Slide 4 text

Oliver Twist

Slide 5

Slide 5 text

Cool Runnings

Slide 6

Slide 6 text

Dirty Dancing

Slide 7

Slide 7 text

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.

Slide 8

Slide 8 text

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.

Slide 9

Slide 9 text

Yes, Native Apps Can Be

Slide 10

Slide 10 text

“The fact remains that web tools are starting to get really fucking awesome.”

Slide 11

Slide 11 text

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?

Slide 12

Slide 12 text

Standing on the Shoulders of Giants

Slide 13

Slide 13 text

Best of Ember + Polymer + Material Design

Slide 14

Slide 14 text

Giddy

Slide 15

Slide 15 text

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."

Slide 16

Slide 16 text

No content

Slide 17

Slide 17 text

Ember-Flow Integrates Ember 2.0 features and Polymer web components to shift web app ﬂows from jarring, state- based, click-pop, click-pop interactions -> -> to a continuous ﬂow through an app… …with smooth navigation, no break in the user experience.

Slide 18

Slide 18 text

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.

Slide 19

Slide 19 text

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 - ¯\_(ツ)_/¯

Slide 20

Slide 20 text

Web Component Spec Extending the browser itself Encapsulation Declarative True reusability/portability

Slide 21

Slide 21 text

Developer productivity Conventions and developer happiness Brilliant community World-class routing and state management Ember vs. Polymer Use Cases I ❤️

Slide 22

Slide 22 text

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:

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

Demo 1

Slide 25

Slide 25 text

No content

Slide 26

Slide 26 text

No content

Slide 27

Slide 27 text

Demo 2

Slide 28

Slide 28 text

No content

Slide 29

Slide 29 text

No content

Slide 30

Slide 30 text

No content

Slide 31

Slide 31 text

No content

Slide 32

Slide 32 text

Demo 3

Slide 33

Slide 33 text

No content

Slide 34

Slide 34 text

No content

Slide 35

Slide 35 text

Trip Treasure Hunt Live Live Demo on iPad - Terrible Idea

Slide 36

Slide 36 text

OPEN SOURCE! github.com/blangslet

Slide 37

Slide 37 text

Ember for routing, high level architecture, translating user intent into meaningful state/data manipulation and persistence. Polymer layout grid: built on ﬂexbox, concise, declarative structure. Ember Components + Polymer Components Polyﬁlls - things like shadow DOM, templating, etc. - getting to use tomorrow’s technology in production today. Dream Stack

Slide 38

Slide 38 text

Ember Going Forward

Slide 39

Slide 39 text

Community

Slide 40

Slide 40 text

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?