Polymer Start-Up (SITCON 2016)
-
Upload
bekket-mcclane -
Category
Technology
-
view
422 -
download
0
Transcript of Polymer Start-Up (SITCON 2016)
![Page 1: Polymer Start-Up (SITCON 2016)](https://reader034.fdocuments.in/reader034/viewer/2022042723/586fa3271a28abcc238b71f3/html5/thumbnails/1.jpg)
PolymerPolymer Start-Up
Bekket McClane@SITCON2016
![Page 2: Polymer Start-Up (SITCON 2016)](https://reader034.fdocuments.in/reader034/viewer/2022042723/586fa3271a28abcc238b71f3/html5/thumbnails/2.jpg)
Who Am I ?
Bekket McClane
![Page 3: Polymer Start-Up (SITCON 2016)](https://reader034.fdocuments.in/reader034/viewer/2022042723/586fa3271a28abcc238b71f3/html5/thumbnails/3.jpg)
Who Am I ?
mshockwave
![Page 4: Polymer Start-Up (SITCON 2016)](https://reader034.fdocuments.in/reader034/viewer/2022042723/586fa3271a28abcc238b71f3/html5/thumbnails/4.jpg)
Who Am I ?
2
![Page 5: Polymer Start-Up (SITCON 2016)](https://reader034.fdocuments.in/reader034/viewer/2022042723/586fa3271a28abcc238b71f3/html5/thumbnails/5.jpg)
Department of Computer Science Sophomore
![Page 6: Polymer Start-Up (SITCON 2016)](https://reader034.fdocuments.in/reader034/viewer/2022042723/586fa3271a28abcc238b71f3/html5/thumbnails/6.jpg)
WARNING
Me Web Front End Development
Amateur Web Front End Developer
![Page 7: Polymer Start-Up (SITCON 2016)](https://reader034.fdocuments.in/reader034/viewer/2022042723/586fa3271a28abcc238b71f3/html5/thumbnails/7.jpg)
HighLights• It’s all about modules
• Data binding
• Event listening
• CSS namespaces
![Page 8: Polymer Start-Up (SITCON 2016)](https://reader034.fdocuments.in/reader034/viewer/2022042723/586fa3271a28abcc238b71f3/html5/thumbnails/8.jpg)
x-foo: DebutDefine (In x-foo.html):
![Page 9: Polymer Start-Up (SITCON 2016)](https://reader034.fdocuments.in/reader034/viewer/2022042723/586fa3271a28abcc238b71f3/html5/thumbnails/9.jpg)
x-foo: Debut
Usage (In index.html):
Define (In x-foo.html):
![Page 10: Polymer Start-Up (SITCON 2016)](https://reader034.fdocuments.in/reader034/viewer/2022042723/586fa3271a28abcc238b71f3/html5/thumbnails/10.jpg)
x-foo: Debut
Registering module
Usage (In index.html):
Define (In x-foo.html):
![Page 11: Polymer Start-Up (SITCON 2016)](https://reader034.fdocuments.in/reader034/viewer/2022042723/586fa3271a28abcc238b71f3/html5/thumbnails/11.jpg)
x-foo: Debut
Registering module
?
Usage (In index.html):
Define (In x-foo.html):
![Page 12: Polymer Start-Up (SITCON 2016)](https://reader034.fdocuments.in/reader034/viewer/2022042723/586fa3271a28abcc238b71f3/html5/thumbnails/12.jpg)
Shadow DOM• HTML5 standard
• Separate contents from presentation
• DOM encapsulation
• The theory basic behind Polymer
![Page 14: Polymer Start-Up (SITCON 2016)](https://reader034.fdocuments.in/reader034/viewer/2022042723/586fa3271a28abcc238b71f3/html5/thumbnails/14.jpg)
x-foo: Data Binding
![Page 15: Polymer Start-Up (SITCON 2016)](https://reader034.fdocuments.in/reader034/viewer/2022042723/586fa3271a28abcc238b71f3/html5/thumbnails/15.jpg)
x-foo: Data Binding
![Page 16: Polymer Start-Up (SITCON 2016)](https://reader034.fdocuments.in/reader034/viewer/2022042723/586fa3271a28abcc238b71f3/html5/thumbnails/16.jpg)
x-foo: Data Binding
![Page 17: Polymer Start-Up (SITCON 2016)](https://reader034.fdocuments.in/reader034/viewer/2022042723/586fa3271a28abcc238b71f3/html5/thumbnails/17.jpg)
x-foo: Usage
![Page 18: Polymer Start-Up (SITCON 2016)](https://reader034.fdocuments.in/reader034/viewer/2022042723/586fa3271a28abcc238b71f3/html5/thumbnails/18.jpg)
x-foo: Usage
![Page 19: Polymer Start-Up (SITCON 2016)](https://reader034.fdocuments.in/reader034/viewer/2022042723/586fa3271a28abcc238b71f3/html5/thumbnails/19.jpg)
x-foo: Usage
SO EASY?!
![Page 20: Polymer Start-Up (SITCON 2016)](https://reader034.fdocuments.in/reader034/viewer/2022042723/586fa3271a28abcc238b71f3/html5/thumbnails/20.jpg)
x-foo: Usage
![Page 21: Polymer Start-Up (SITCON 2016)](https://reader034.fdocuments.in/reader034/viewer/2022042723/586fa3271a28abcc238b71f3/html5/thumbnails/21.jpg)
x-foo: Properties
![Page 22: Polymer Start-Up (SITCON 2016)](https://reader034.fdocuments.in/reader034/viewer/2022042723/586fa3271a28abcc238b71f3/html5/thumbnails/22.jpg)
x-foo: Properties
![Page 23: Polymer Start-Up (SITCON 2016)](https://reader034.fdocuments.in/reader034/viewer/2022042723/586fa3271a28abcc238b71f3/html5/thumbnails/23.jpg)
x-foo: More Data Binding
![Page 24: Polymer Start-Up (SITCON 2016)](https://reader034.fdocuments.in/reader034/viewer/2022042723/586fa3271a28abcc238b71f3/html5/thumbnails/24.jpg)
x-foo: More Data Binding
![Page 25: Polymer Start-Up (SITCON 2016)](https://reader034.fdocuments.in/reader034/viewer/2022042723/586fa3271a28abcc238b71f3/html5/thumbnails/25.jpg)
x-foo: More Data Binding
![Page 26: Polymer Start-Up (SITCON 2016)](https://reader034.fdocuments.in/reader034/viewer/2022042723/586fa3271a28abcc238b71f3/html5/thumbnails/26.jpg)
x-foo: More Data Binding
![Page 27: Polymer Start-Up (SITCON 2016)](https://reader034.fdocuments.in/reader034/viewer/2022042723/586fa3271a28abcc238b71f3/html5/thumbnails/27.jpg)
x-foo: More Data Binding• <template is=“dom-repeat”>
ngRepeat
• <template is=“dom-if”> No more CSS display:none
![Page 28: Polymer Start-Up (SITCON 2016)](https://reader034.fdocuments.in/reader034/viewer/2022042723/586fa3271a28abcc238b71f3/html5/thumbnails/28.jpg)
x-foo: DOM Children
Usage:
![Page 29: Polymer Start-Up (SITCON 2016)](https://reader034.fdocuments.in/reader034/viewer/2022042723/586fa3271a28abcc238b71f3/html5/thumbnails/29.jpg)
x-foo: DOM Children
Usage:
![Page 30: Polymer Start-Up (SITCON 2016)](https://reader034.fdocuments.in/reader034/viewer/2022042723/586fa3271a28abcc238b71f3/html5/thumbnails/30.jpg)
x-foo: DOM Children
Usage:
![Page 31: Polymer Start-Up (SITCON 2016)](https://reader034.fdocuments.in/reader034/viewer/2022042723/586fa3271a28abcc238b71f3/html5/thumbnails/31.jpg)
x-foo: DOM Children
Usage:
![Page 32: Polymer Start-Up (SITCON 2016)](https://reader034.fdocuments.in/reader034/viewer/2022042723/586fa3271a28abcc238b71f3/html5/thumbnails/32.jpg)
x-foo: Event Firing
![Page 33: Polymer Start-Up (SITCON 2016)](https://reader034.fdocuments.in/reader034/viewer/2022042723/586fa3271a28abcc238b71f3/html5/thumbnails/33.jpg)
x-foo: Event Firing
![Page 34: Polymer Start-Up (SITCON 2016)](https://reader034.fdocuments.in/reader034/viewer/2022042723/586fa3271a28abcc238b71f3/html5/thumbnails/34.jpg)
x-foo: Event Firing
![Page 35: Polymer Start-Up (SITCON 2016)](https://reader034.fdocuments.in/reader034/viewer/2022042723/586fa3271a28abcc238b71f3/html5/thumbnails/35.jpg)
x-foo: Event Listening
![Page 36: Polymer Start-Up (SITCON 2016)](https://reader034.fdocuments.in/reader034/viewer/2022042723/586fa3271a28abcc238b71f3/html5/thumbnails/36.jpg)
x-foo: Event Listening
![Page 37: Polymer Start-Up (SITCON 2016)](https://reader034.fdocuments.in/reader034/viewer/2022042723/586fa3271a28abcc238b71f3/html5/thumbnails/37.jpg)
Polymer Elements Catalog
https://elements.polymer-project.org/
![Page 38: Polymer Start-Up (SITCON 2016)](https://reader034.fdocuments.in/reader034/viewer/2022042723/586fa3271a28abcc238b71f3/html5/thumbnails/38.jpg)
Other Must-See Cool Stuffs• Properties observer
• Computed Data Binding Value
• Behavior: similar to inherence • dom-bind: Polymer Module in body
![Page 39: Polymer Start-Up (SITCON 2016)](https://reader034.fdocuments.in/reader034/viewer/2022042723/586fa3271a28abcc238b71f3/html5/thumbnails/39.jpg)
Drawbacks of Polymer• Rarely long learning curve
• Not very well in cross-browsers performance
• Lack of elements CDN
![Page 40: Polymer Start-Up (SITCON 2016)](https://reader034.fdocuments.in/reader034/viewer/2022042723/586fa3271a28abcc238b71f3/html5/thumbnails/40.jpg)
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
![Page 41: Polymer Start-Up (SITCON 2016)](https://reader034.fdocuments.in/reader034/viewer/2022042723/586fa3271a28abcc238b71f3/html5/thumbnails/41.jpg)
Thank You