Hal — hal menarik di mata saya tentang Chrome Dev. Summit 2018

Tampilan halaman depan web Chrome Dev. Summit
Catatan: Pada video-video di bawah sudah saya arahkan ke bagian yang saya anggap menarik sehingga Anda (yang sedang fakir kuota) tidak perlu menonton dari awal. Selamat membaca.

Acara Chrome Dev. Summit tahun 2018 adalah acara yang mana semua videonya saya berhasil tonton dibandingkan tahun-tahun sebelumnya. Mengapa demikian? Karena durasi per sesi mulai dari 21–35 menit. Menurut saya ini terobosan kecil namun berdampak penting bagi orang yang sedang bekerja dan agak senggang ketika istirahat atau liburan.

Kemudian, entah mengapa isi dari setiap sesi videonya dapat saya ikuti dengan baik. Kemungkinan ada dua faktor:

  1. Isi konten videonya yang ringkas.
  2. Pengalaman saya sudah pernah menonton acara-acara seperti ini sebelumnya.

Berikut saya akan paparkan beberapa hal yang menurut saya menarik di acara Chrome Dev. Summit 2018 tahun ini:

  • Google bot berbasis Chrome 41

Sebenarnya ini sudah pernah diutarakan sebelumnya di acara Google I/O sebelumnya dan di artikel terkait hal di atas. Hanya saja waktu itu saya tidak begitu memperhatikan.

Google bot dengan berbasis Chrome 41 membuat kita developer harus melakukan transpile kodingan (menurunkan versi kodingan) ES6 ke versi ES5. Jika menggunakan Web Components versi 1, dukungannya tidak mumpuni. Sebab, versi Web Components pada Chrome 41 adalah versi 0. Selain itu, Chrome 41 bersifat stateless yang berarti tidak ada dukungan Service Worker, local storage, session storage, IndexedDB, Web SQL, Cookies atau Cache API.

Solusi saat ini adalah menggunakan polyfill dan mengecek perbandingan browser yang kita gunakan dengan browser yang kita targetkan saat ini di sini: https://caniuse.com/#compare=chrome+41. Saat ini tim Chrome sedang bekerja keras agar Google bot minimal sejalur dengan Chrome versi yang kita pakai sekarang.

Membuat konten web dapat ditemukan
  • Native Lazy Loading

Native lazy loading merupakan sebuah fitur baru yang membuat Anda tidak tergantung pada pihak ketiga untuk membuat gambar di tampilkan secara lazy. Fitur ini mendukung gambar dan cross-origin iframes.

Esensi Kecepatan: Teknik kunci untuk website yang cepat
  • Situs web.dev beta

Situs web.dev dirancang untuk memudahkan Anda mencari pembelajaran terkait membangun web modern. Di situs tersebut berisi panduan dan latihan yang bisa Anda coba. Jika sebelumnya Anda sudah pernah berkunjung ke situs ini namun ada masalah terkait audit lighthouse dan isi konten yang kurang maka hal itu wajar karena situs ini masih dalam tahap perbaikan yang lebih baik. Anda bisa membaca laporan dari Rob Dodson terkait situs web.dev sebelum dan sesudah.

Keynote 1 Chrome Dev. Summit
  • Dampak yang dirasakan oleh perusahaan ketika mengimplementasikan teknologi modern web di sisi bisnis

Spotify, Starbucks, dan Pinterest menunjukkan pertumbuhan bisnis yang mereka hasilkan dengan menggunakan web yang modern. Simak cerita mereka di video ini.

Dampak bisnis dari web yang modern
  • Menangani aplikasi berbasis JS yang kompleks

Situs web squoosh.app merupakan situs yang membantu Anda untuk menghasilkan gambar dengan hasil kompresi yang beragam. Yang menarik di sini adalah proses tim Squoosh membuat website mereka hingga berhasil memuat website dengan ukuran sebesar 15kb dengan tambahan teknik code splitting. Teknologi yang mereka gunakan meliputi TypeScript, Preact, Webpack, Web Components, Web Assembly dan Web Worker. Untuk repository nya Anda bisa lihat klik di sini.

Menangani aplikasi JS yang kompleks.
  • Project VisBug

VisBug merupakan proyek open source yang membuat Anda seolah-olah meng-hack tampilan website secara langsung. Hack dalam artian di sini adalah mengubah warna, mengganti konten, background namun tidak berdampak bagi website itu sendiri dan pengguna lain yang mengakses web tersebut. Proyek ini lebih ditujukan kepada web designer dan sebagai pelengkap perkakas dalam mendesain web. Simak video di bawah ini untuk demonya dan jika tertarik dengan source codenya bisa klik di sini.

Pengenalan proyek open source VisBug
  • Rise of Web Components (termasuk DOM invicible dan Virtual Scroller)

Saya perhatikan Web Components telah menjadi primadona di dunia web modern semenjak Firefox 63 diluncurkan dengan dukungan Shadow DOM dan Custom Element di Web Components V1. Hal ini berdampak pula pada sesi presentasi di Chrome Dev Summit. Project squoosh dan visbug (segera) menggunakan Web Components misalnya.

Kemudian muncul virtual-scroller, sebuah scroller yang memudahkan kita scroll data yang lebih dari ratusan bahkan ribuan data. Project ini masih dalam pengembangan. Selanjutnya ada pengenalan atribut baru bernama “invicible” untuk menghemat budget DOM.

Virtual scroller dan invicible attribute

Di sesi membangun web yang imersif (dunia maya rasa dunia nyata a.k.a VR) mendemokan project yang menggunakan Web Components yakni model-viewer yang masih dalam tahap pengembangan.

Membangun web yang imersif

Berikutnya, Chrome memaparkan bagaimana menghasilkan UI web yang cepat dengan Web Components.

Membangun web UI yang cepat dengan Web Components
  • Sikap Das Surma beserta tim ketika terjadi “kekacauan” saat sesi State Of Houdini (bonus)

Saat Surma membawakan CSS Houdini terjadi “kekacauan” dalam slidenya dan alhasil menyita waktu sekitar 19 menit dan membuatnya ke belakang panggung dan memperbaiki kekacauan tersebut. Hal ini berhasil ditutupi dengan gerak cepat dari MC (Jake, Paul Lewis dan Mariko) untuk mencairkan suasana. Bahkan saat Surma pun mengalami “kekacauan tersebut”, dia berusaha membawa hal-hal yang lucu dan menghibur penonton.

Lantas mengapa saya memasukkan bagian ini ke hal menarik? Karena ada kejadian-kejadian yang tak terduga di dalam panggung ketika kita memberi presentasi atau live coding ke penonton. Teknik untuk membuat penonton hanyut dalam suasana tersebut (tidak bosan) saya anggap patut ditiru dalam meetup skala besar.

Saran-saran dari saya sebagai berikut:

  1. Cukup buka aplikasi yang kita perlukan saat presentasi.
  2. Gunakan slide yang tidak terlalu banyak animasinya.
  3. Jika Anda mengunduh sesuatu dan itu diperlukan dalam live coding Anda, pastikan Anda sudah mengunduhnya sebelumnya (node modules misalnya). Kita tidak tahu seberapa cepat koneksi wi-fi yang dihasilkan di tempat acara.

Detail “kekacauan”nya bisa Anda lihat di sini.

“Kekacauan” di sesi State of Houdini

Sekian dan semoga bermanfaat.