Polymer
Polymer 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: Debut
Define (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...
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 fea...
Thank You
of 41

Polymer Start-Up (SITCON 2016)

Bekket McClane@SITCON2016 Introduction to Polymer project
Published on: Mar 4, 2016
Published in: Technology      
Source: www.slideshare.net


Transcripts - Polymer Start-Up (SITCON 2016)

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

Related Documents