Download as PDF, PPTX
Uploaded byChristoforus Surjoputro
Introduction to polymer project
This document introduces Polymer, an open-source JavaScript library for building web components. It discusses how Polymer uses existing web platform APIs like templates, shadow DOM, and custom elements to create reusable components. It also explains that Polymer is not a framework, but a library that can be used to build elements on top of existing standards. Finally, it provides a simple example of creating a new custom element in Polymer and emphasizes that Polymer is production-ready.
More Related Content
Similar to Introduction to polymer project
Introduction to polymer project
- 1. Introduction to polymerproject Christoforus Surjoputro Materi: https://github.com/3mp3ri0r/introduction-to-polymer-project Facebook: www.facebook.com/totoganteng
- 2. when presented withan abundance of choice, you can feel increasingly unsure of whether yours is the right one - Addy Osmani
- 5. Web components merupakan standardw3c yang merupakan gabungan dari beberapa low-level API.
- 6. Template Shadow DOM Custom Elements HTMLImports native client-side templating scoping, composition define new HTML/DOM loading web components
- 7. API Web componentssudah di desain agar kita dapat membuat library di atas standar yang sudah ada.
- 8. So what isPolymer?
- 9. Polymer is not aframework
- 10. Existing Frameworks Applications Web Platform WebComponents built with Polymer (or not)
- 11.
- 12.
- 13.
- 14.
- 17.
- 18. Let’s build an element! Imageby Gloria Viganò for the Noun Project
- 19. element-baru.html <dom-module id=“element-baru"> <template> </template> <script> Polymer({ is: ‘element-baru' }); </script> </dom-module> <linkrel=“import” href=“../polymer/polymer.html”>
- 20. element-baru.html <dom-module id=“element-baru"> <template> </template> <script> Polymer({ is: ‘element-baru' }); </script> </dom-module> <linkrel=“import” href=“../polymer/polymer.html”> Import all of your dependencies. HTML Imports
- 21. element-baru.html <dom-module id=“element-baru"> <template> </template> <script> Polymer({ is: ‘element-baru' }); </script> </dom-module> <linkrel=“import” href=“../polymer/polymer.html”> A container for your element definition. Custom Element
- 22. element-baru.html <dom-module id=“alert-banner"> <template> </template> <script> Polymer({ is: ‘alert-banner' }); </script> </dom-module> LocalDOM is the DOM an elements is in charge of creating and managing. Template and Shadow DOM <link rel=“import” href=“../polymer/polymer.html”>
- 23. Elements Building blocks fora better web
- 24. There’s an elementfor that!
- 25.
- 33.
- 34. There’s an elementfor that!
- 35. Applications Combining elements intosomething great
- 36.
- 37.
- 38.
- 39. Build process outof the box
- 40. Polymer is lean,and production ready
- 41. Create or reuseelements in any app
- 42. Starter Kit getsyou up and running
- 44.
- 45. Thank You! Christoforus Surjoputro Materi:https://github.com/3mp3ri0r/introduction-to-polymer-project Facebook: www.facebook.com/totoganteng