Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Polymer 2.0 introduction at GDG Algiers: Google Fair event

91 views

Published on

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

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Polymer 2.0 introduction at GDG Algiers: Google Fair event

  1. 1. <Polymer- presentation>
  2. 2. 1 Summary What’s Polymer ? Principle Version Popularity Demonstration Conclusion
  3. 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. 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. 5. 4
  6. 6. What’s web components ? 5
  7. 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. 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. 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. 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. 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. 12. 11 Template helps you reuse code, by adding html code embedded in template tag, thus reusing it Principle : Template ”
  13. 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. 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. 15. 14 Popularity Polymer is open source with an innovative principles. it became quite popular in the developing world.
  16. 16. They use Polymer 15“from polymer-summit 2016”
  17. 17. Demonstration Demo using Polymer 2.0 ! 16
  18. 18. Demonstration 17 Create Post-it element
  19. 19. Demonstration 18 Import it Use it
  20. 20. Conclusion That’s all folks! 19
  21. 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. 22. </Polymer- presentation>

×