Dipresentasikan oleh Christoforus S di DILo Surabaya bersama dengan komunitas Surabaya Dev pada bulan Desember 2016

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?

12. https://translate.google.com/community
http://projector.tensorflow.org
Chrome Dev Editor
https://gaming.youtube.com

13. Over 1.3M pages

14. 300+ Google projects

17. READY FOR
PRODUCTION

18. Let’s 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. There’s an element for that!

25. core paper

33. elements.polymer-project.org

34. There’s an element for that!

35. Applications
Combining elements into something great

36. Polymer Starter Kit

37. Production-ising Apps

38. image: http://gulpjs.com

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

44. polymer-project.org

45. Thank You!
Christoforus Surjoputro
Materi: https://github.com/3mp3ri0r/introduction-to-polymer-project
Facebook: www.facebook.com/totoganteng