Yang Web Developers Harus Tahu Di #IO18

Selesai sudah hajat tahunan Google Developers, Google IO 2018 di Mountain View yang menjadi ajang tahunan untuk mengundang para developers dari seluruh dunia untuk bisa mendapatkan update terkini terkait platform teknologi yang dimiliki Google dan berinteraksi dengan orang-orang di belakangnya sehingga para developers bisa membangun aplikasi atau fungsi di atas platform tersebut. Dan tulisan ini akan memberikan rekapan apa saja yang perlu kalian tahu terkait web platform dan bagaimana kalian sebagai pengembang bisa mengadopsi perkembangan tersebut. Berikut adalah pilihan beberapa video dari sesi web di Google IO 2018 yang sudah kita pilih, dan dilengkapi deskripsi singkat terkait video tersebut.

The web: state of the union

Bagaimana web platform terus beradaptasi untuk memberikan pengalaman lebih baik untuk pengembang dan pengguna? Beberapa yang menarik di antaranya adalah browser supports untuk komponen penting seperti service workers, dan web assembly sudah diadopsi untuk semua major browsers. Selain itu, prototype web packaging sudah bisa dicoba untuk mendapatkan kecepatan tampil seperti halaman AMP.

Building a seamless web

Web terus berkembang dan browser juga berusaha agar para pengembang web bisa lebih mudah dalam membuat web yang memberikan pengalaman baik bagi penggunanya. Karena itu ada beberapa hal yang sedang dirancang di dalam browser seperti web packaging, layering API, dan best practices policies yang dirancang agar pengalaman web yang baik bisa distandarisasi.

PWAs: building bridges to mobile, desktop, and native

Bagaimana PWA bisa memberikan pengalaman yang lebih baik? Empat point penting menjadi kunci utama yaitu Fast, Integrating, Reliable, Engaging (FIRE). Bagaimana 4 poin tersebut diimplementasikan di dunia nyata? Kalian bisa melihat beberapa contoh implementasi PWA dan dampaknya di Starbucks, Google Search, dan Google Map.

What’s new in Chrome DevTools

Debugging asynchronous code yang menggunakan fungsi await sebelumnya tidaklah mudah. Karena kalian tidak bisa menggunakannya di console tanpa wrapper function. Namun di Chrome DevTools terbaru kalian bisa langsung menggunakannya. Selain itu fungsi step into debugging di asynchronous code juga berfungsi baik di mana sebelumnya kita tidak bisa melakukan debugging step in di asynchronous code.

Build awesome media experiences on the web

Talk ini sangat menarik bila kalian membuat web yang banyak menyajikan media seperti video. Dengan API baru yang ada di web, kalian bisa membuat tampilan video picture in picture(PIP) yang sudah tersedia di Android Oreo pada aplikasi web kalian. Selain itu ada juga web API baru untuk menampilkan konten secara remote seperti layaknya Google Cast, sehingga kalian bisa membuat sebuah aplikasi receiver yang siap menerima lemparan konten untuk ditampilkan. Serta gambaran video codec terbaru yang mampu melakukan kompresi video 2,5GB menjadi hanya 300MB.

Web performance made easy

Bagaimana mempercepat performance sebuah website? Di talk ini kalian akan mendapatkan langkah-langkah bagaimana mengoptimalkan performance web kalian mulai dari optimasi critical resources, code splitting, font loading, serta optimalisasi gambar. Selain itu, ada library baru yaitu guess.js yang akan mempelajari pola akses penggunjung website kalian dengan machine learning dan akan melakukan prefetch otomatis untuk halaman yang sering dikunjungi berikutnya dari halaman tersebut.

Web Components and the Polymer Project: Polymer 3.0 and beyond

Update terkini untuk perkembangan web components yang sudah diadopsi secara native di mayor browsers. Dan mengikuti perkembangan JS module yang sudah didukung juga di mayor browsers, maka Polymer library untuk web components juga berpindah dari HTML import ke JS module di rilis terbaru Polymer 3.0. Dengan demikian kalian bisa menggunakan Webpack atau bundler app lainnya yang menggunakan JS module pada Polymer 3.0.

Make your WordPress site progressive

Buat kalian WordPress developers, talk ini memberikan best practices di WordPress site untuk memberikan peningkatan pengalaman secara progresif di WordPress site. Ada juga plugin AMP versi terbaru dan bagaimana plugin tersebut bisa membantu mengkonversi keseluruhan WordPress web kalian menjadi AMP site yang bisa tampil dengan sangat cepat tanpa banyak melakukan perubahan source code.

PWA starter kit: build fast, scalable, modern apps with Web Components

Kalau dulu kita punya Bootstrap yang menjadi boilerplate setiap kita memulai sebuah project baru sekarang sudah banyak tool sesuai framework masing-masing. Namun kalau kalian ingin memulai project baru dengan web component tanpa framework kalian bisa mencoba PWA starter kit. Di talk ini juga dijelaskan terkait Redux pattern untuk menghubungkan states antar komponen. Untuk kalian yang ingin memahami lebih jauh bagaimana arsitektur sebuah aplikasi web modern, sesi ini wajib kalian tonton.

Deliver search-friendly JavaScript-powered websites

Salah satu ketakutan pengembang terhadap single page application(SPA) adalah susah untuk di-index oleh mesin pencari. Padahal aplikasi modern dengan arsitektur single page application merupakan standar saat ini. Sesi ini akan membantu kalian untuk mengoptimalkan aplikasi web modern kalian agar tetap bisa di-index oleh mesin pencari seperti Google Search. Ada beberapa pola dan best practice yang perlu diikuti agar aplikasi web modern kalian bisa tetap terbaca dan ditemukan di mesin pencari.

What’s new with sign up and sign in on the web

Keamanan selalu menjadi hal yang sangat penting dalam pengembangan aplikasi. Namun kadang keamanan mengorbankan kenyamanan karena prosesnya kadang terlalu kompleks. Bahkan dalam pengembangannya juga kadang cukup rumit. Dengan API baru untuk keamanan identitas di web maka kemudahan pengguna untuk daftar atau masuk hanya dengan sekali klik atau tap ke halaman website terproteksi akan jadi lebih baik. Bahkan bagaimana menggunakan finger print sebagai akses kunci masuk ke dalam website. Developer akan lebih mudah dalam implementasinya karena API ini akan menjadi dukungan standar yang ada di dalam browser tanpa harus menggunakan library khusus.

Introducing .app domain names and how to secure them

Google meluncurkan Top Level Domain (TLD) bernama .app ke publik dengan tujuan agar user mudah mengingat nama domain dan memiliki kesan bagi user. Tidak seperti TLD lainnya, ketika kita mengakses domain .app maka langsung mengarah ke HTTPS secara default. Hal ini dikarenakan karena domain .app menggunakan teknik HTTP Strict Transport Security (HSTS). Jika kamu datang ke Google I/O 2018, kamu beruntung karena Google membagikan TLD .app cuma — cuma ke kamu. Di video ini akan membahas lebih mendalam mengapa .app ini lahir dan bagaimana cara kamu menggunakannya.

What’s new in web accessibility

Kini Accessibility (A11y) menjadi salah satu prioritas yang wajib diperhatikan oleh developer dalam mengembangkan produk yang ditujukan kepada kalangan disabilitas. Pada video di atas, terdapat hal menarik yang patut dicoba antara lain accessibility tab pane, color contrast ratio, style CSS baru yakni :focus-visible untuk membedakan hasil fokus antara keyboard dan mouse serta Accessibility Object Model (AOM), sebuah low-level API yang didesain untuk memberikan developer kendali penuh untuk terhadap A11y di website mereka.

Mana yang kalian ingin tahu lebih dalam?

Silakan memberikan respon di artikel ini untuk memberikan mana yang harus kita kupas lebih dalam di artikel berikutnya.

Terima kasih untuk Satya Kresna Adi Pratama atas kontribusinya ke artikel ini.

Yang Web Developers Harus Tahu Di #IO18 was originally published in WWWID on Medium, where people are continuing the conversation by highlighting and responding to this story.