Nonton video-video Chrome Dev Summit di setiap tahunnya adalah suatu kebiasaan baik buat para web developer yang ingin tahu perkembangan mutakhir di platform web & kasus-kasus penggunaan API-API nya. Nah yang berbeda di tahun 2019 ini adalah Jakarta dan beberapa kota lainnya di dunia berkesempatan untuk menghadirkan versi Extended-nya awal Desember lalu. Senang sekali bisa dengar langsung presentasi dari para praktisi yang menggunakan API-API mutakhir ini di produk-produk mereka yang tidak asing bagi kita.

Kali ini gw berbagi catatan & pengalaman gw hadir ke Chrome Dev Summit 2019 Extended di Jakarta. Semoga yang berhalangan hadir bisa merasakan sedikit dan pengurus komunitas yang mendengarkan ini bisa dapat kesempatan untuk mengadakan acara serupa di tahun 2020. Dengerin sampai habis saat Yohan Totting ngasih tahu gimana caranya.


Daftar Isi

Dengarkan

Langganan podcast | Ikuti survey pendengar

Ada yang terlewat? Silakan komentar di bawah ya.. Jangan lupa berlangganan podcast dan newsletter Developer Muslim. Lihat arsip edisinya di sana. Kalau suka sama pilihan artikel-artikelnya, kenapa ga langganan? :)

Transkrip

Catatan: Apa yang tertera dalam transkrip belum tentu sama persis dengan apa yang saya ucapkan di podcast.

Halo-halo, apa kabar semuanya? Alhamdulillah gw baik-baik. Baru dari Singapur untuk urusan kerjaan. Di sana gw sebrangan duduk di MRT dengan podcaster kondang & komedian lepas, Adriano Qalbi. Rada sungkan negor dan ga tau kapan dapat kesempatan kaya gini lagi, akhirnya gw foto secara kandid. Karena excited gw post lah di Twitter tanpa mention dengan tujuan ga mau heboh2 ga jelas gitu. Singkat cerita akhirnya gw mention lah beliau di thread itu dan dapat reply “Ya Tuhaaann”. Gw ga tau maksudnya apa karena cuma teks. Cuma yang jelas pelajaran dari sini adalah ya kalau mau melakukan sesuatu jangan setengah-setengah. Kalau mau candid buat dokumentasi pribadi ya silakan selama di tempat umum & ga dilarang foto. Kalau candid & disebarin di media sosial, ya sebagian orang mungkin lebih memilih mendingan lo minta foto baik-baik supaya dia juga bisa mengatur sewajarnya dari pada candid yang gampang banget untuk kelihatan rada gimana gitu.

Anyways, buat yang belum tahu, Adriano Qalbi punya podcast namanya Podcast Awal Minggu. Gw suka dengerin terutama episode-episode yang ngobrol bareng tamu. Gw dapet wawasan tentang kehidupan tamu yang diundang, yang lumayan asing buat gw dan gimana proses mereka berkarya. Gw juga belajar gimana dapetin insight-insight dari narasumber, melalui pertanyaan dan pendekatan lainnya. Memang bukan podcast buat semua orang karena dari yang pernah gw denger, sebagian orang bisa berbagai macam perasaan kalau dengerin ocehannya. Jadi kalau mau ngecek podcast beliau, ya “proceed with caution” kata orang putih. Atau “you have been warned” kata preman di film-film.

Podcast ini bukan podcast ngomongin media sosial atau mereview podcast lain. Jadi gw mau banting setir dari apa yang barusan gw omongin.

Makasih buat lo yang udah setia dengerin dan yang baru bergabung. Podcast ini bahas seputar developer, apa yang bikin mereka produktif, berkembang dan peduli sama lingkungan.

Awal Desember lalu gw hadir ke Chrome Developer Summit Extended di Jakarta. Gw baru tahu kalau ada CDS Extended dan ternyata memang diadakan baru tahun ini di sekitar 10 kota di dunia.

Di episode kali ini gw mau berbagi rangkuman CDS Extended 2019 dan cuplikan wawancara bareng Yohan Toting mengenai acara ini. Gw ga mungkin jelasin secara detil tp gw berharap buat lo yang ga datang bisa tau intinya dan bisa ngikutin yang menarik buat mereka di catatan episode kali ini. Jadi tetep dengrin dan ayo kita mulai!

1. Web Assembly oleh Jacky Efendi dari Tokopedia

Jacky mulai jelasin definisi Web Assembly, atau yang juga biasa disebut Wasm. Termasuk juga apa yang bisa kita dapat dan dijanjikan dari Wasm ini. Btw, gw baru tahu kalau nulis wasm nya ini huruf W nya aja yang kapital, bukan semua huruf.

Standar terbuka yang mendefinisikan format kode biner yang portable, agar menjadi progam yang dapat dieksekusi dan sebagai bahasa pemrograman assembly tekstual yang berkorespondensi, yang juga sebagai interface untuk memfasilitasi interaksi antara program-program itu dengan lingkungan host mereka.

Tujuan utama dari WebAssembly adalah untuk memungkinkan aplikasi berperforma tinggi di web. Tapi formatna dirancang supaya bisa dieksekusi dan diintegrasikan di lingkungan-lingkungan lainnya.

Di Tokopedia, mereka coba menggunakan WebAssembly ini untuk meningkatkan performa pembaca kode QR di website mereka. Sebenarnya membaca kode QR bisa dilakukan dengan Javascript. Di antaranya adalah zebra crossing, yang pengejaannya itu zxing.

Pertama kali yang mereka lakukan adalah periksa ketersediaan WebAssembly ini di CanIUse.com. Ini adalah praktik yang bagus untuk implementasi sesuatu yang baru seperti ini atau web API tertentu. Sejauh mana implementasinya di browser-browser. Dan ternyata Web Assembly 1.0, inisial Minimum Viable Product, sudah tersedia di 4 browser engine besar.

Selanjutnya Jacky membandingkan library pembaca kode QR dengan Javascript dan yang berbasis Wasm. Beliau juga menjelaskan secara ringkas cara kerja Wasm dan kenapa bisa lebih cepat. Kalau mau tahu lebih lanjut beliau menyarankan untuk menonton presentasinya seorang Google Engineer, Franziska Hinkelmann.

Jacky juga jelasin sedikit potensi Web Assembly dan fitur-fitur apa yang lagi dikembangkan di sana setelah inisial MVP nya dirilis. Di antaranya threads & SIMD (Single Intruction Multiple Data). Jacky nyaranin untuk nonton

Kalo lo tertarik buat ngoprek, ada tulisannya Jacky di Medium yang cerita proses belajar Web Assembly. Nanti gw masukin ke catatan episode. Terus jangan lupa follow beliau di sana karena tulisannya bagus-bagus.

2. SMS Receiver API oleh Dimitrij Agal dari Traveloka

Dimitrij Agal, yang akrab disapa Agal, presentasi mengenai API Web untuk membaca SMS dengan format khusus yang terkait sama origin dari aplikasi kita. Dari SMS ini kita bisa meminta OTP secara terprogram dari pesan SMS dan verifikasi nomor hp ke pengguna dengan lebih mudah.

API ini masih dalam tahap pengembangan, namun sudah bisa dipakai di Chrome 78 dan itupun melalui Origin Trial. Targetnya akan sepenuhnya jalan dan tanpa perlu Origin Trial saat versi 81 dirilis.

Buat yang belum tahu, Origin Trials adalah suatu pendekatan untuk memungkinkan eksperimen secara aman terhadap fitur-fitur di platform web.

Jadi web itu kan tentunya perlu fitur-fitur baru dan fitur itu akan terus disempurnakan melalui beberapa iterasi. Hanyasaja sebelum-sebelumnya ini fitur yang masih eksperimental diimplementasikan secara prematur dan web developer juga mulai bergantung sama fitur ini. Akhirnya fitur experimental ini menjadi burn-in (masalah yang terabaikan terlalu lama) dan susah untuk diubah dan kadang juga dihapus, padahal implementasi yang lebih baik itu ada. Berupa konsep misalnya.

Nah salah satu akar masalahnya adalah fitur eksperimental ini udah tersedia terlalu luas, sehingga penggunaannya lama kelamaan jadi ga diperiksa / dimonitor. Idealnya kan harus ada mekanisme yang gampang untuk mengekspos fitur baru dan melakukan iterasi perbaikan dari sana, cuma terbatas sama populasi developer tertentu. Nah dari populasi ini, developer harus berkomitmen untuk memberikan tanggapan, trus juga membatasi ukuran user yang sudah pakai fitur ini dan membatasi juga durasi dari experimen nya. Dengan begitu iterasi bisa terjadi lebih cepat tanpa resiko burn-in tadi.

Kalo lo tertarik / penasaran sama konsep OriginTrials ini, bisa baca explainer-nya yang ada di catatan episode.

Balik ke presentasi Agal, beliau mmperlihatkan kode yang diperlukan untuk implementasinya. Jadi tinggal panggul fungsi sms dari obyek navigation. Dan seperti yang udah disebut sebelumnya, format isi SMS juga ada ketentuannya sendiri. Ada OTP dan hash string khusus dari Chrome.

3. Seamless Navigation with Portal oleh Adrianti dari IDS Skincare International

Jadi ada proposal API web baru yang namanya Portals yang tujuannya untuk membantu transisi halaman keluar masuk situs kita menjadi mulus.

Alasan banyak orang bikin Single Page Application (SPA) adalah transisi antar halamannya itu bagus karena pada dasarnya halaman yang dirender dari server itu cuma 1 atau ga banyak, sisanya tinggal aplikasinya yang mengatur perubahan itu. Tapi membuat SPA itu punya kompleksitas yang tinggi dibandingkan Multi-Page Application. Multi-page application atau situs web tradisional yang beragam halaman itu lebih gampang dibikin karena setiap halaman-nya kita bisa rancang & bikin dari awal, dalam artian ga punya status terhadap komponen HTML tertentu, bagaikan kertas kosong.

Nah, yang ditawarkan sama Portals adalah gabungan terbaik dari keduanya ini. Ga kompleks seperti MPA, tapi transisinya mulus seperti SPA. Bayangin seperti tag <iframe> yang memungkinkan untuk embed, tapi punya fitur untuk melakukan navigasi perpindahan terhadap konten di dalamnya. Fitur yang ga bisa dilakukan dengan <iframe>.

Ini karena developer dapat akses states nya. Address bar juga berubah ke alamat dari apa yang di embed namun masih di dalam situs kita dalam arti kita masih bisa mengatur & mengkontrol state-nya. Biasanya kan kalau pengguna melakukan sesuatu di dalam konten yang diembed itu entah ke halaman baru atau sesuatu yang ga bisa kita kontrol.

Menarik dan bikin penasaran seperti apa kan makhluk ini? Portals sebenarnya sudah didemokan di Chrome Dev Summit 2018 sama Kinuko Yasuda. Adrianti kemarin jelasin lebih lanjut apa yang bisa dilakukan dengan Portals di tahun ini. Beliau menyarankan untuk nonton video nya Kenji Bahaeux di Chrome Dev Summit 2019.

4. Adaptive Loading - Improving Performance oleh Jefry Dewangga, dari Dana, dompet digital

Beliau membahas bagaimana memperbaiki performa situs / aplikasi kita secara bertahap sesuai dengan situasi pengguna. Jadi mulai dari strategi me-load aset yang ga hanya gambar dan video, tapi juga bundle Javascript dan CSS nya yang menyesuaikan dengan alat yang dipakai user dan kecepatan internet saat mengakses situs kita.

Keren banget dan lumayan teknis jadi gw bisa gw sampaikan di sini. Lo bisa tonton presentasinya Addy Osmani yang dari dulu spesialisasi di preforma web. Link ada di catatan episode.

5. Friska dari Blibli.com

Beliau menjelaskan pengalaman blibli.com dalam memperbaiki performa situs mereka dari skor Lighthouse yang hanya 12 per pertengahan Juli 2019, hingga 90an! Wah, ini benar-benar edan sih.

Mereka mulai dari mengikuti saran-saran dari Lighthouse, yang hanya mendongkrak nilai menjadi sekitar 30 kalau ga salah. Terus mereka ga nyerah dan mulai retrospeksi ke internal mereka dengan nanya ke berbagai departemen bagian mana yang masih benar-benar diperlukan. Dan ini lumayan berdampak sekali pada perbaikan skor mereka.

Friska menyarankan untuk baca studi kasusnya Netflix Web Performance & Pinterest PWA Performance yang intinya bagaimana caranya agar user bisa disuguhkan sesuatu dengan cepat meskipun jumlahnya ga banyak. Makanya mereka bikin lite version dari blibli.com untuk pengguna yang baru mengunjungi situs itu.

Beliau juga menjelaskan bahwa lite version di sini bukan berarti versi PWA sebagaimana Twitter Lite, tetapi versi yang meload sesedikit mungkin konten namun cukup untuk memberikan sesuatu yang bermanfaat buat user. Yang kemudian sambil user berinteraksi, situsnya bisa mengambil konten-konten yang mirip dengan full version-nya di background.

Benar-benar perjalanan yang seru untuk diceritakan dan sesi ini juga lumayan interaktif.

Catatan terakhir dari sini, Friska menyarankan untuk pakai kalkulator untuk menghitung performance budget.

6. Chrome Developer Summit Recap oleh Yohan Toting, dari Google

Di sesi terakhir ini, Yohan menjelaskan:

Baik, itu aja yang bisa gw ceritain dari presentasi-presentasi yang ada di CDS Extended 2019 di Jakarta kemarin. Di antara fakta menarik dari acara ini adalah sebagian besar pembicara di acara itu relatif baru. Ada yang baru karena presentasinya di luar lingkungan kantor, ada juga yang baru presentasi di meetup dan acara extended seperti ini. Alhamdulillah semuanya berjalan lancar, semua orang bisa saling menghargai dan gw lihat peserta-peserta lainpun ga ada yang negatif.

Ini menunjukkan sebenarnya pembicara itu tidak harus dari yang senior, udah biasa kasih presentasi dan sebagainya. Selama kita bisa menciptakan lingkungan yang kondusif dan kita bisa meyakinkan calon pembicara, itu udah cukup untuk mulai merencanakan sebuah meetup.

Di acara ini gw senang sekali bisa berkesempatan untuk ngobrol sebentar dengan Yohan mengenai CDS Extended ini. Yuk dengerin.


Wawancara


Baik, itu aja yang bisa gw beri dari Chrome Developer Extended 2019 di Jakarta. Benar-benar bagus, banyak dapat wawasan dan kenalan baru. Semoga yang ga hadir bisa kecipratan.

Kalau lo hadir di acara-acara seperti ini dan lo biasa catet poin-poin presentasinya, mau dong gw undang ke podcast ini. Atau kenalin dengan orang yang seperti ini. Kenalin aja dulu, biar gw yang jelasin prosedurnya. Lumayan bisa berbagi tanpa harus berdiri di depan umum kan? Ngobrol santai aja ama gw.

Kalau lo punya pertanyaan atau kasih usul topik pembahasan, gw seneng banget nerima tanggapan dari lo semua. Lo bisa kirim email ke [email protected] atau DM gw di Twitter & Instagram dengan akun yang sama, @devmuslimid. Jangan tunda-tunda lagi buruan kirim.

Jangan lupa liat link-link yang dibahas kali ini seperti Web Assembly, OriginTrials, Portals dan rekomendasi video-video YouTube, semua link nya ada di devmuslim.id/episode110. Beberapa update juga akan gw taruh di sana. Jadi jangan lupa mampir ke sana kalau mau menelusuri lebih lanjut.

Kalau lo suka dengan apa yang disajikan di podcast ini, setidaknya lo bisa bantu kasih rating yang bagus di manapun lo dengerin podcast ini, terutama di Apple Podcast & Google Podcast. Lo juga bisa follow Podcast ini di Spotify.

Gw juga mulai mengumpulkan dana untuk mengupah editor dan biaya operasional lainnya. Lo bisa ke anchor.fm/devmuslimid untuk mendukung operasional podcast dengan memberikan donasi bulanan mulai dari $1.

Dan gw mau ngucapin terima kasih buat donatur yang pertama. Mereka adalah

  1. Satya Kresna: Website | Github | Twitter
  2. Fariz Rizaldy: Website | Github | Twitter

Makasih banyak buat dukungannya. Gw sangat berterima kasih dan semoga gw bisa melanjutkan apa yang gw kerjakan selama ini. Apapun, itu akan sangat berarti buat podcast ini dan para pendengar sekalian di tanah air kita tercinta. Buktikan kepedulian & dukungan lo untuk podcast ini.

Baik, gw pamit dulu. Sampai di episode developer muslim podcast berikutnya insya Allah.

Berbagi itu Tanda Peduli

Jangan merasakan manfaat episode ini sendirian aja. Ayo sampaikan informasi ini ke teman-teman developer lainnya. Kasih rating & komentar yang bagus di layanan-layanan podcast ini. Saya juga senang sekali dapat tanggapan & komentar di bawah.


Kembali ke: