Introducing Polymer 2.0 at Google Fair, GDG Algiers, April 22th,2017 for a cleaner presentation : https://docs.google.com/presentation/d/15eVgyKh6KKcKQpO3wTotW3kVfeursFfQlomUTJKXAPo/edit?usp=sharing for more detail about the code lab : https://github.com/amandaSalander/PolymerGFair Polymer 2.0 : https://www.polymer-project.org feel free to contact me at : ds_baraka@esi.dz

1. <Polymer-
presentation>

2. 1
Summary
What’s Polymer ?
Principle
Version
Popularity
Demonstration
Conclusion

3. 2
What’s Polymer ?
Polymer is a new type of web library based on web
components, its aim is to influence web
technologies in modern browser. Developed by
Google
Presented and announced in Google I/O in May
2013, and it’s public development started in
November 14th
,2013.
Polymer is open source, great communities who
helped in developing it.
Modern design principles are implemented as a
separate project using Google's Material design
project

4. 3
What’s Polymer ?
Polymer lets you observe changes to an element's
properties and take various actions based on data
changes. These actions, or property effects, include:
Observers. Callbacks invoked when data
changes.
Computed properties. Virtual properties
computed based on other properties, and
recomputed when the input data changes.
Data bindings. Annotations that update the
properties, attributes, or text content of a
DOM node when data changes.
“polymer-project”

5. 4

6. What’s web
components ?
5

7. 6
Principle
Web Components are a set of standards currently
being produced by Google engineers as
a W3C specification.
It allow the creation of reusable widgets or
components in web documents and web
applications.
There are 4 standards :
Custom elements, Shadow DOM, HTML Imports
Templates HTML

8. 7
Principle : custom elements
”
HTML gives us an excellent tool for structuring a document but its
vocabulary is limited to elements the HTML standard defines.
So there is custom elements that gives you the possibility to create new
HTML tags

9. 7
Principle : custom elements
<div>
<div class="tab-pane" id="home" >Home</div>
<div class="tab-pane" id="profile" >Profile</div>
<div class="tab-pane" id="messages" >Messages</div>
<div class="tab-pane" id="settings" >Settings</div>
</div>
Home Profile Messages
Settings
From a div soup to ….
8

10. 7
Principle : custom elements
Home Profile Messages
Settings
<tab-panels>
<tab-panel id="home" >Home</tab-panel>
<tab-panel id="profile" >Profile</tab-panel>
<tab-panel id="messages" >Messages</tab-panel>
<tab-panel id="settings" >Settings</tab-panel>
</tab-panels>
Home Profile Messages
Settings
... reusable HTML elements
9

11. 10
The shadow Dom addresses the DOM tree encapsulation problem. Thus
using shadow will solve problems such as same name for classes and ids
that CSS brings in maintaining your app
Principle : Shadow DOM
”

12. 11
Template helps you reuse code, by adding html code embedded in template
tag, thus reusing it
Principle : Template
”

13. 12
HTML imports is a way to include html documents in other html documents,
the imports is not limited to markups, you can include CSS, and JS
Principle : HTML Import
”

14. 20172016
13
Version
Polymer stable version 1.X
It’s first real version is 0.4
Polymer 1.0 is a stable version
201520142013
Polymer announce version 2.0
First rc Polymer version 2.0

15. 14
Popularity
Polymer is open source with an
innovative principles. it became quite
popular in the developing world.

16. They use Polymer
15“from polymer-summit 2016”

17. Demonstration
Demo using Polymer 2.0
!
16

18. Demonstration
17
Create Post-it element

19. Demonstration
18
Import it
Use it

20. Conclusion
That’s all folks!
19

21. Find it interesting ?
Polymer Project https://www.polymer-project.org/
You can find the code on github
https://github.com/amandaSalander/PolymerGFair
Contact me at
ds_baraka@esi.dz
20

22. </Polymer-
presentation>