Upload
bekket-mcclane
View
422
Download
0
Embed Size (px)
Citation preview
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
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