Di tim Chrome, kami peduli dengan pengalaman pengguna dan ekosistem web yang berkembang. Kami ingin pengguna mendapatkan pengalaman terbaik di web, tidak hanya dengan dokumen statis, tetapi juga saat mereka menggunakan aplikasi yang kaya dan sangat interaktif.
Alat dan framework open source berperan besar dalam memungkinkan developer membuat aplikasi modern untuk web, sekaligus mendukung pengalaman developer yang baik. Framework dan alat ini memberdayakan perusahaan besar maupun kecil, serta individu yang membangun aplikasi untuk web.
Kami percaya bahwa framework juga dapat memainkan peran besar dalam membantu developer dengan aspek kualitas utama seperti performa, aksesibilitas, keamanan, kesiapan seluler. Daripada meminta setiap developer dan pemilik situs untuk menjadi pakar dalam bidang ini dan mengikuti praktik terbaik yang terus berubah, framework dapat mendukung hal ini dengan solusi bawaan. Hal ini memberdayakan developer dan memungkinkan mereka fokus pada pembangunan fitur produk.
Singkatnya, visi kami adalah bahwa standar kualitas UX yang tinggi menjadi efek samping dari membangun web.
Aurora: kolaborasi antara Chrome dan framework & alat web open source
Selama hampir dua tahun, kami telah menggunakan beberapa framework paling populer, seperti Next.js, Nuxt, dan Angular, yang berupaya meningkatkan performa web. Kami juga mendanai alat dan library populer seperti Vue, ESLint, dan webpack. Hari ini, kami menamai upaya ini - Aurora.
Aurora adalah tampilan cahaya alami yang berkilauan di langit. Karena kami mencoba membantu pengalaman pengguna yang dibuat dengan framework yang berkilauan, kami pikir nama ini adalah pilihan yang tepat.
Dalam beberapa bulan ke depan, kami akan membagikan lebih banyak detail tentang Aurora. Ini adalah kolaborasi antara tim kecil engineer Chrome (WebSDK dengan nama kode internal) dan penulis framework. Tujuan kami adalah memberikan pengalaman pengguna terbaik untuk aplikasi produksi, terlepas dari browser yang digunakan untuk merender.
Apa strategi kami?
Di Google, kami telah belajar banyak saat menggunakan framework dan alat untuk membangun serta memelihara aplikasi web skala besar seperti Google Penelusuran, Maps, Penelusuran Gambar, Google Foto, dll. Kami menemukan bagaimana framework dapat memainkan peran penting dalam kualitas aplikasi yang dapat diprediksi dengan menyediakan default yang kuat dan alat yang tidak sesuai.
Framework memiliki sudut pandang yang unik untuk memengaruhi DX dan UX saat meliputi seluruh sistem: klien dan server, lingkungan pengembangan dan produksi, serta mengintegrasikan alat seperti compiler, pemaket, linter, dll.
Setelah solusi dimasukkan ke dalam framework, tim developer dapat menggunakan solusi ini dan memfokuskan waktu mereka pada hal yang paling penting bagi produk, misalnya mengirimkan fitur yang bagus bagi pengguna.
Meskipun kami berupaya meningkatkan kualitas alat yang ada di setiap lapisan stack, framework seperti Next.js, Nuxt, dan Angular CLI, mengelola setiap langkah siklus proses aplikasi. Karena alasan ini, dan fakta bahwa adopsi React adalah yang terbesar dalam ekosistem framework UI inti, sebagian besar pengoptimalan kami telah dimulai terbukti di Next.js sebelum memperluas ke bagian ekosistem lainnya.
Aurora mendukung kesuksesan dalam skala besar dengan menghadirkan solusi ke lapisan kanan tech stack populer. Dengan menjembatani kesenjangan antara browser dan framework, kualitas tinggi akan menjadi efek samping dari proses build untuk web sekaligus berperan sebagai feedback loop untuk meningkatkan platform web.
Bagaimana proses kerja kita?
Prinsip kami terkait cara Aurora menjembatani browser dan ekosistem developer adalah: kerendahan hati, keingintahuan, pertanyaan ilmiah, dan pragmatisme. Kami bekerja sama dengan penulis framework untuk melakukan peningkatan, berkolaborasi dengan komunitas, dan melakukan uji tuntas sebelum menerapkan perubahan apa pun.
Untuk meringkas langkah-langkah yang kami ambil untuk fitur baru yang kami kerjakan:
- Mengidentifikasi kesulitan pengalaman pengguna di {i>stack <i}yang populer, dengan menggunakan aplikasi yang representatif.
- Buat prototipe solusi yang mengatasi hal ini, dengan penekanan pada "default yang kuat".
- Verifikasi fitur dengan stack framework lain untuk memastikannya dapat disesuaikan.
- Validasi fitur ini dengan bereksperimen di beberapa aplikasi produksi, biasanya dengan pengujian lab untuk mengetahui performa.
- Dorong desain menggunakan proses RFC, sambil menanggapi masukan dari komunitas.
- Tempatkan fitur di stack populer, biasanya di belakang bendera.
- Aktifkan fitur di aplikasi produksi yang representatif untuk menilai kualitas dan integrasi alur kerja developer.
- Ukur peningkatan performa dengan melacak metrik di aplikasi produksi perwakilan yang mengadopsi fitur atau diupgrade.
- Aktifkan fitur ini sebagai default dalam stack, sehingga semua pengguna yang melakukan upgrade akan mendapatkan manfaat.
- Setelah terbukti, gunakan framework tambahan untuk menghadirkan fitur tersebut.
- Mengidentifikasi kesenjangan di platform web, dengan feedback loop.
- Lanjutkan ke masalah berikutnya.
Alat dan plugin yang mendasarinya (webpack, Babel, ESLint, TypeScript, dll...) digunakan bersama di banyak framework. Hal ini membantu menciptakan efek ripple, bahkan saat berkontribusi ke satu stack framework.
Selain itu, Chrome Framework Fund mendukung library dan alat open source dengan pendanaan. Meskipun kami berharap ada cukup tumpang tindih di lapisan masalah dan solusi pada upaya kami di atas untuk diterjemahkan ke framework dan alat lain, kami tahu bahwa kami dapat berbuat lebih banyak. Untuk itu, kami ingin memastikan library dan framework yang membantu developer sukses dapat berkembang. Itulah salah satu alasan kami akan terus berinvestasi dalam Chrome Framework Fund. Hingga saat ini, alat ini telah mendukung pekerjaan Webpack 5, Nuxt, serta performa dan peningkatan ESLint.
Apa yang telah dibuka oleh upaya kita sejauh ini?
Pekerjaan kami telah berfokus pada pengoptimalan dasar untuk resource seperti gambar, JS, CSS, font. Kami telah mengirimkan sejumlah pengoptimalan untuk meningkatkan kualitas default beberapa framework, termasuk:
- Komponen Image di Next.js yang mengenkapsulasi praktik terbaik untuk pemuatan gambar, diikuti dengan kolaborasi dengan Nuxt pada proses yang sama. Penggunaan komponen ini telah menghasilkan peningkatan yang signifikan pada waktu menggambar dan pergeseran tata letak (contoh: penurunan sebesar 57% dalam Largest Contentful Paint dan pengurangan Pergeseran Tata Letak Kumulatif sebesar 100% pada nextjs.org/give).
- Penyelarasan otomatis CSS untuk deklarasi Font Web pada waktu build. Fitur ini telah hadir di Angular (Google Fonts) dan Next.js (Google Fonts & Adobe Fonts) yang menghasilkan peningkatan signifikan pada Largest Contentful Paint dan First Contentful Paint (contoh).
- Sejajarkan CSS penting menggunakan Critters di Angular dan Next.js untuk mengurangi waktu proses menggambar. Menghasilkan peningkatan skor performa Lighthouse sebesar 20-30 poin pada aplikasi Angular berskala besar yang umum saat dikombinasikan dengan fitur inline CSS font.
- Dukungan ESLint siap pakai di Next.js yang menyertakan plugin kustom dan konfigurasi yang dapat dibagikan untuk memudahkan penemuan masalah umum khusus framework pada waktu build, sehingga performa pemuatan lebih dapat diprediksi.
- Pengantar lapisan ulang performa bawaan di Create React App dan Next.js untuk memungkinkan insight yang lebih mudah terkait performa halaman melalui data web dan metrik kustom lainnya.
- Potongan terperinci dikirimkan dalam Next.js dan Gatsby, yang menghasilkan pengurangan ukuran paket 30 hingga 70 persen sekaligus meningkatkan performa cache. API ini telah menjadi default di Webpack 5.
- Potongan polyfill terpisah untuk browser lama, bekerja sama dengan tim Next.js, untuk meningkatkan ukuran paket di browser modern.
Setiap fitur ini telah diotomatiskan untuk diaktifkan secara default atau hanya memerlukan keikutsertaan sederhana. Hal ini penting untuk memastikan bahwa developer dapat dengan mudah memperoleh manfaatnya tanpa menambah kompleksitas pada alur kerja mereka.
Apa rencana kami untuk tahun 2021?
Sepanjang sisa tahun ini, kami akan berfokus untuk membantu stack framework meningkatkan pengalaman pengguna dan seberapa baik performanya pada metrik seperti Data Web Inti. Pekerjaan ini akan mencakup:
- Kesesuaian untuk menerapkan praktik terbaik. Lihat postingan blog untuk mempelajari lebih lanjut.
- Mengoptimalkan performa pemuatan awal dengan mengembangkan kolaborasi kami untuk mengoptimalkan Gambar, Font, dan CSS Penting.
- Memuat skrip pihak ketiga (3P) dengan dampak performa minimal dengan mengembangkan dasar pekerjaan pada komponen Script dan melakukan riset mendalam tentang cara terbaik untuk mengurutkan dan mengurutkan pihak ketiga.
- Performa JavaScript dalam skala besar (misalnya mendukung Komponen Server React di Next.js).
Tim kami akan berupaya memposting informasi yang lebih rutin tentang RFC dan dokumen desain untuk ide-ide ini sehingga framework atau developer mana pun yang ingin mengikutinya dapat melakukannya.
Kesimpulan
Tim Aurora (Shubhie, Houssein, Alex, Gerald, Ralph, Addy, Kara, Keen, Katie) berharap dapat terus meningkatkan pengalaman open source di komunitas Next-source dan Nux Kami akan meningkatkan engagement untuk mencakup lebih banyak kerangka kerja dan alat dari waktu ke waktu. Tonton ruang ini untuk postingan blog, pembicaraan, dan RFC dari tim kami selama setahun ke depan :)