Web Components - Apa, Mengapa dan Bagaimana

Penjelasan definisi web components, mengapa menjadi tren baru dalam dunia pengembangan web dan bagaimana cara mengimplementasikannya.

Transcript

1. Satya Kresna WEB COMPONENTS @satyakresna
2. APA?
3. Membuat tag HTML baru (custom) yang dapat digunakan berulang - ulang (reusable) dan bisa di enkapsulasi (encapsulation)
4. HTML JS CSS
5. MENGAPA?
6. “Ketergantungan beragam framework dan library - tag HTML element yang diberi CSS dan JS.”
19. Sedikit “DIV” & tag buatan sendiri.
20. WEB COMPONENTS
21. PA M AK: P O R R I MA
22. KEUNTUNGAN WEB COMPONENTS
23. WEB COMPONENTS: JUST IN THE NICK OF TIME (POLYMER SUMMIT 2017)
24. BAGAIMANA?
25. SPESIFIKASI
26. SPESIFIKASI DEPRECATED SOON
27. CUSTOM ELEMENTS <foo-bar></foo-bar> >= 2 kata kebab-case Tag penutup
29. SHADOW DOM
31. class FooBar extends HTMLElement { constructor() { super(); // Panggil di sini boleh this.attachShadow({ mode: 'open' }) } connectedCallback() { // Di sini juga boleh this.attachShadow({ mode: 'open' }) } } Rek da ya ik pa g co t t ()
32. SHADOW DOM MODE
33. HTML TEMPLATES <template> <p>Foobar <strong></strong> :D</p> </template> Tem t i er
34. HTML IMPORT <link rel="import" href="foobar.html" />
36. KOK BISA???
37. TL;DR: BROWSER VENDOR LAIN TIDAK SEPAKAT DENGAN HTML IMPORT
38. HTML MODULES STILL DRAFT
39. APA WEB COMPONENTS DIDUKUNG OLEH SEMUA BROWSER?
40. TIDAK!
41. KOK BISA???
42. PRIORITAS BROWSER VENDOR
43. https://caniuse.com/#search=web%20components
44. SOLUSINYA?
46. DISKUSI & PERDEBATAN WEB COMPONENTS
48. AYO KITA COBA!
49. SIAPA YANG PAKAI WEB COMPONENTS?
50. SUMBER BELAJAR Try Web Components Web Components TODO MDN Web Components Examples How to components
51. Terima kasih! Satya Kresna @satyakresna