Introduction to Polymer Project - DILo Surabaya
1 like159 views
Dipresentasikan oleh Christoforus S di DILo Surabaya bersama dengan komunitas Surabaya Dev pada bulan Desember 2016
More Related Content
What's hot (20)
Similar to Introduction to Polymer Project - DILo Surabaya (20)
More from DILo Surabaya (7)
Recently uploaded (20)
Introduction to Polymer Project - DILo Surabaya
- 1. Introduction to polymer project Christoforus Surjoputro Materi: https://github.com/3mp3ri0r/introduction-to-polymer-project Facebook: www.facebook.com/totoganteng
- 2. when presented with an abundance of choice, you can feel increasingly unsure of whether yours is the right one - Addy Osmani
- 5. Web components merupakan standard w3c yang merupakan gabungan dari beberapa low-level API.
- 6. Template Shadow DOM Custom Elements HTML Imports native client-side templating scoping, composition define new HTML/DOM loading web components
- 7. API Web components sudah di desain agar kita dapat membuat library di atas standar yang sudah ada.
- 8. So what is Polymer?
- 9. Polymer is not a framework
- 10. Existing Frameworks Applications Web Platform Web Components built with Polymer (or not)
- 11. Is it ready?
- 13. Over 1.3M pages
- 18. Lets build an element! Image by 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> <link rel=import href=../polymer/polymer.html>
- 20. element-baru.html <dom-module id=element-baru"> <template> </template> <script> Polymer({ is: element-baru' }); </script> </dom-module> <link rel=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> <link rel=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> Local DOM 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 for a better web
- 24. Theres an element for that!
- 25. core paper
- 34. Theres an element for that!
- 35. Applications Combining elements into something great
- 39. Build process out of the box
- 40. Polymer is lean, and production ready
- 41. Create or reuse elements in any app
- 42. Starter Kit gets you up and running
- 45. Thank You! Christoforus Surjoputro Materi: https://github.com/3mp3ri0r/introduction-to-polymer-project Facebook: www.facebook.com/totoganteng