Polymer Start-Up (SITCON 2016)

PolymerPolymer Start-Up

Bekket McClane@SITCON2016

Who Am I ?

Bekket McClane

Who Am I ?

mshockwave

Who Am I ?

2

Department of Computer Science Sophomore

WARNING

Me Web Front End Development

Amateur Web Front End Developer

HighLights• It’s all about modules

• Data binding

• Event listening

• CSS namespaces

x-foo: DebutDefine (In x-foo.html):

x-foo: Debut

Usage (In index.html):

Define (In x-foo.html):

x-foo: Debut

Registering module

Usage (In index.html):

Define (In x-foo.html):

x-foo: Debut

Registering module

?

Usage (In index.html):

Define (In x-foo.html):

Shadow DOM• HTML5 standard

• Separate contents from presentation

• DOM encapsulation

• The theory basic behind Polymer

Shadow DOM

http://goo.gl/udfVkA

x-foo: Data Binding

x-foo: Data Binding

x-foo: Data Binding

x-foo: Usage

x-foo: Usage

x-foo: Usage

SO EASY?!

x-foo: Usage

x-foo: Properties

x-foo: Properties

x-foo: More Data Binding

x-foo: More Data Binding

x-foo: More Data Binding

x-foo: More Data Binding

x-foo: More Data Binding• <template is=“dom-repeat”>

ngRepeat

• <template is=“dom-if”> No more CSS display:none

x-foo: DOM Children

Usage:

x-foo: DOM Children

Usage:

x-foo: DOM Children

Usage:

x-foo: DOM Children

Usage:

x-foo: Event Firing

x-foo: Event Firing

x-foo: Event Firing

x-foo: Event Listening

x-foo: Event Listening

Polymer Elements Catalog

https://elements.polymer-project.org/

Other Must-See Cool Stuffs• Properties observer

• Computed Data Binding Value

• Behavior: similar to inherence • dom-bind: Polymer Module in body

Drawbacks of Polymer• Rarely long learning curve

• Not very well in cross-browsers performance

• Lack of elements CDN

Summary• Highly reusable custom components

• Integrate some OOP principles (e.g. Encapsulation, Inherence )

• Great features of event handling, data binding and component configurations

• Based on the latest HTML5 / CSS3

Thank You