Bekket McClane gave a presentation on Polymer, an open-source JavaScript library for building web components. Polymer allows developers to create reusable custom elements called modules through techniques like data binding and event handling. Modules are defined separately and can then be implemented on pages through registration. Polymer uses concepts from Shadow DOM to encapsulate components and separate structure from presentation. While Polymer enables powerful component-based development, its learning curve can be long and cross-browser performance and lack of a central element library are drawbacks.

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