Polymer 1.0
Easier, faster, better!
Photo: http://on.natgeo.com/1BlepN7
<about-me>
</about-me>
Maria Clara Santana
● Computer Engineering student at UFAL;
● AI researcher;
● Front-end developer;
Agenda
A brief introduction
What’s new on 1.0?
How to get started today?
Photo: http://bit.ly/1CeBPyN
Photo: http://bit.ly/1d2I81R
WEB COMPONENTS
Photo: http://bit.ly/1d2I81R
Custom and Interoperable
polymer
(Mobile)
4x FASTER
(Available on: http://bit.ly/1FnHG4V)
0.5
1.0
3x FASTER
(Available on: http://bit.ly/1FnHG4V)
0.5
1.0
0.5 1.0
65kb 42kb
35% LESS CODE
1.0 Coolest Features
Shady DOM
Shadow DOM Shady DOM
(Taken from: http://bit.ly/1QFmNhg)
Theming
Custom Property
“Everything is an element.”
(Polymer team)
core-elements paper-elements
core-elements paper-elements
“There’s an element for that!”
(Polymer team)
<google-map><google-drive><google-calendar>
(Available on: http://bit.ly/1HRgoLr)
<gold-cc-cvc-input>
<gold-cc-expiration-input>
<gold-cc-input>
<gold-email-input>
How do I get started?
Polymer Starter Kit
❏ Components;
❏ Layout;
❏ Theming;
❏ Build tools;
Material Design
<paper-menu-buton>
<paper-toolbar>
<paper-header-panel>
Theming feature
Adaptative UI
Photo: http://bit.ly/1AyYVVE
Photo: http://bit.ly/1L2gAr9
Breakpoints
(Available on: http://bit.ly/1MO2xns)
Offline first!
Service Worker caching
Take your app offline
Where you can learn more:
Polymer: polymer-project.org
Polymer Starter Kit: bit.ly/1cOygZh
Github: bit.ly/1L2stNV
<contact-me>
</contact-me>
+MariaClaraSantana1
@olarclara
claarasantana@gmail.com
<thank-you>
Polymer 1.0: easier, faster, better!
Polymer 1.0: easier, faster, better!
Polymer 1.0: easier, faster, better!
Polymer 1.0: easier, faster, better!
Polymer 1.0: easier, faster, better!
of 40

Polymer 1.0: easier, faster, better!

In this talk, I show the coolest news about Polymer's new release. It starts with a brief introduction of what are Web Components and Polymer, after I show 1.0 features, like Shady DOM, Theming with CSS custom properties and the new catalogue of elements. And, to finish, I show a guide through the Polymer Starter Kit, talking about Material Design, Adaptative UIs and Offline first.
Published on: Mar 4, 2016
Published in: Mobile      
Source: www.slideshare.net


Transcripts - Polymer 1.0: easier, faster, better!

  • 1. Polymer 1.0 Easier, faster, better! Photo: http://on.natgeo.com/1BlepN7
  • 2. <about-me> </about-me> Maria Clara Santana ● Computer Engineering student at UFAL; ● AI researcher; ● Front-end developer;
  • 3. Agenda A brief introduction What’s new on 1.0? How to get started today?
  • 4. Photo: http://bit.ly/1CeBPyN
  • 5. Photo: http://bit.ly/1d2I81R WEB COMPONENTS
  • 6. Photo: http://bit.ly/1d2I81R Custom and Interoperable
  • 7. polymer
  • 8. (Mobile) 4x FASTER (Available on: http://bit.ly/1FnHG4V) 0.5 1.0
  • 9. 3x FASTER (Available on: http://bit.ly/1FnHG4V) 0.5 1.0
  • 10. 0.5 1.0 65kb 42kb 35% LESS CODE
  • 11. 1.0 Coolest Features
  • 12. Shady DOM
  • 13. Shadow DOM Shady DOM (Taken from: http://bit.ly/1QFmNhg)
  • 14. Theming
  • 15. Custom Property
  • 16. “Everything is an element.” (Polymer team)
  • 17. core-elements paper-elements
  • 18. core-elements paper-elements
  • 19. “There’s an element for that!” (Polymer team)
  • 20. <google-map><google-drive><google-calendar>
  • 21. (Available on: http://bit.ly/1HRgoLr)
  • 22. <gold-cc-cvc-input> <gold-cc-expiration-input> <gold-cc-input> <gold-email-input>
  • 23. How do I get started?
  • 24. Polymer Starter Kit
  • 25. ❏ Components; ❏ Layout; ❏ Theming; ❏ Build tools;
  • 26. Material Design <paper-menu-buton> <paper-toolbar> <paper-header-panel>
  • 27. Theming feature
  • 28. Adaptative UI Photo: http://bit.ly/1AyYVVE
  • 29. Photo: http://bit.ly/1L2gAr9
  • 30. Breakpoints (Available on: http://bit.ly/1MO2xns)
  • 31. Offline first!
  • 32. Service Worker caching Take your app offline
  • 33. Where you can learn more: Polymer: polymer-project.org Polymer Starter Kit: bit.ly/1cOygZh Github: bit.ly/1L2stNV
  • 34. <contact-me> </contact-me> +MariaClaraSantana1 @olarclara claarasantana@gmail.com
  • 35. <thank-you>

Related Documents