Slide DevCoach

DevCoach 147 : Front-End | Melangkah Lebih Jauh dengan Lit

Transcript

1. Position Lebih Jauh dengan Lit Front-End Web Nur Rizki Adi Curriculum Developer
2. Learning Objectives Front-End Web • Mengingat kembali dengan Lit • Penanganan shadow DOM di Lit • Localization dalam Lit
3. • 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
4. • Menggunakan class LitElement • Memanfaatkan JavaScript tagged template literal • Reactive properties • Scoped for styles • Didukung baik dengan TypeScript Front-End Web Incredible Feature dari Lit
5. Shadow DOM for Lit
6. Alasan Shadow DOM Ada! • DOM API tidak dapat menjangkau elemen hingga shadow root. • Styling yang diterapkan dalam DOM utama tidak dapat memengaruhi susunan DOM internal dari suatu component. • Setiap custom element yang merupakan child dari custom element lain akan terpisahkan dari shadow root custom element lain tersebut.
7. Cara Akses Shadow Root
8. • Only some elements that can have shadow DOM. • Call Element.attachShadow(). • Set mode property to `closed` or `open`. Configure Shadow Root
9. Configure Shadow Root
10. Configure Shadow Root in Lit
11. Menonaktifkan Shadow DOM
12. Lit Localization
13. Localization • Fitur untuk mengadaptasi berbagai bahasa yang digunakan pengguna sesuai preferensi. • Fitur yang tidak remeh untuk warga di seluruh penjuru dunia.
14. Beberapa istilah wajib • Source locale • Target locale • Active locale
15. Dua Libraries Pendukung
16. Let’s get dirty our hands
17. Thank You nurrizkiadip Nur Rizki Adi Prasetyo @NAdiPrasetyo nrizki@dicoding.com Nur Rizki Adi Prasetyo Nur Rizki Adi Prasetyo Front-End Web
18. Feedback! Hadiah: • 1 Token Langganan Academy (30 Hari) *untuk pengisi feedback terpilih! dicoding.id/devcoachfeedback
19. Front-end Web