Slide DevCoach

DevCoach 145 : Front-End | Bikin Web Component Lebih Gampang Pakai Lit

Transcript

1. Position Bikin Web Component Lebih Gampang Pakai Lit Front-End Web Nur Rizki Adi Curriculum Developer
2. Learning Objectives Front-End Web • Ada apa dengan Lit • Lit vs. Native Web Component • Apa itu reactive property • Gaya baru terapkan style dan event • Cara pasang Lit di Proyek
3. Masih ingat dengan Web Components?
4. Sport Club Finder App
5. <search-bar> <club-list> <footer-app> <app-bar>
6. Framework yang Mengadopsi Component Architecture Front-End Web
7. • Simple. Building on top of the Web Components standards. • Fast. Updates are fast. • Lightweight. Weighing in at around 5 KB (minified and compressed). Front-End Web Why should I choose Lit? - lit.dev Lit, Web Component Library
8. Tiga Teknologi Web Component • Custom Element • Shadow DOM • HTML Template Front-End Web
9. Fitur Lainnya dari Lit • Menggunakan class LitElement • Memanfaatkan JavaScript tagged template literal • Reactive properties • Scoped for styles • Didukung baik dengan TypeScript Front-End Web
10. Membutuhkan Module Bundler Webpack Vite Parcel Browserify
11. Cara Bikin Element dengan Lit Front-End Web Defining a component - MDN
12. Styling for Lit Component Styles - lit.dev
13. Event Listener looks like familiar in JS framework… Styles - lit.dev
14. Reactive Property Change Everything
15. Mekanisme Sederhana Perubahan Nilai Reactive Property
16. Mekanisme Sederhana Perubahan Nilai Reactive Property
17. Mekanisme Sederhana Perubahan Nilai Reactive Property
18. Mekanisme Sederhana Perubahan Nilai Reactive Property Reactive update cycle - lit.dev
19. Let’s get dirty our hands
20. Full Support Lit dengan TypeScript Front-End Web
21. Thank You nurrizkiadip Nur Rizki Adi Prasetyo @NAdiPrasetyo nrizki@dicoding.com Nur Rizki Adi Prasetyo Nur Rizki Adi Prasetyo Front-End Web
22. Feedback! Hadiah: • 2 Token Langganan Academy (30 Hari) *untuk pengisi feedback terpilih! dicoding.id/devcoachfeedback
23. Front-end Web