Building a single page application with Polymer

38
Bart Wouters UX Designer Paul van Dam Front-end Developer BUILDING AN APPLICATION WITH POLYMER .

Transcript of Building a single page application with Polymer

Page 1: Building a single page application with Polymer

Bart WoutersUX Designer

Paul van DamFront-end Developer

BUILDING AN APPLICATION WITH POLYMER.

Page 2: Building a single page application with Polymer

What are we going to do?

How are we going to do it?

Page 3: Building a single page application with Polymer
Page 4: Building a single page application with Polymer
Page 5: Building a single page application with Polymer

HUMAN WORK.Wearing out keyboards.

Page 6: Building a single page application with Polymer
Page 7: Building a single page application with Polymer
Page 8: Building a single page application with Polymer
Page 9: Building a single page application with Polymer
Page 10: Building a single page application with Polymer

Filter manager options

Filter groups Filters per group

Change sortorder

Edit filter content

Add filter

Page 11: Building a single page application with Polymer

Filter manager

Page 12: Building a single page application with Polymer

NEW CMS.No biggie.

Page 13: Building a single page application with Polymer
Page 14: Building a single page application with Polymer
Page 15: Building a single page application with Polymer

STANDARDIZED COMPONENTS.Sheldon style.

Page 16: Building a single page application with Polymer

BUT HOW SHOULD WE DO THAT?

Page 17: Building a single page application with Polymer

COMPONENTS.Don’t Repeat Yourself.

Page 18: Building a single page application with Polymer

Polymer

WebComponents

Page 19: Building a single page application with Polymer
Page 20: Building a single page application with Polymer
Page 21: Building a single page application with Polymer
Page 22: Building a single page application with Polymer

HTML CSS JS

Page 23: Building a single page application with Polymer

HTML

CSS

JS

HTML

CSS

JS

HTML

CSS

JS

Page 24: Building a single page application with Polymer

POLYMER.Prepare for more code samples.

Page 25: Building a single page application with Polymer

POLYMER UNBOXED.We’re in the library, sssssst.

Polyfill

Clean declarative syntax

Two-way data binding and property observation

Component library

Page 26: Building a single page application with Polymer
Page 27: Building a single page application with Polymer
Page 28: Building a single page application with Polymer
Page 29: Building a single page application with Polymer
Page 30: Building a single page application with Polymer

COMMUNICATION.Hello world.

Page 31: Building a single page application with Polymer
Page 32: Building a single page application with Polymer
Page 33: Building a single page application with Polymer

TOO MUCH COMMUNICATION.Bye world.

Page 34: Building a single page application with Polymer

Model

Controller-view

Comp.

Comp. Comp.

Comp.

Comp. Comp.

Comp.

Comp. Comp.

Page 35: Building a single page application with Polymer

API

Model

Controller-view

View

Page 36: Building a single page application with Polymer

POINTS OF INTEREST.Dot dot dot.

Browser support

Requests

Two-way data binding

Version 0.8 is coming

Clean syntax

Features

Web Componentsfuture standard

Page 37: Building a single page application with Polymer

INTERESTING.A little homework.

github.com/pcvandamcb/polymer-examplecoolblue-polymer-example.divshot.io

webcomponents.orgpolymer-project.org

github.com/polymer/vulcanizeaurelia.io

divshot.com