Chrome berkolaborasi dengan framework open source untuk mewujudkan web yang lebih baik
Chrome adalah kontributor aktif untuk ekosistem framework web dan presentasi kami di Chrome Dev Summit 2019 membahas hal-hal yang telah kami kerjakan dalam setahun terakhir.
Baca terus untuk mengetahui ringkasan presentasi yang diperluas dengan detail dan referensi tambahan.
Bagaimana cara kami membuat web menjadi lebih baik?
Tujuan semua orang di tim Chrome adalah membuat web menjadi lebih baik. Kami berupaya meningkatkan API browser dan V8--mesin JavaScript dan WebAssembly inti yang mendukung Chrome--sehingga developer dilengkapi dengan fitur yang membantu mereka membuat halaman web yang bagus. Kami juga mencoba meningkatkan kualitas situs yang sudah diproduksi saat ini dengan berkontribusi pada alat open source dalam berbagai cara.
Sebagian besar developer web mengandalkan alat open source jika memungkinkan dan mereka lebih memilih untuk tidak membuat infrastruktur yang sepenuhnya kustom. Framework JavaScript sisi klien dan library UI merupakan bagian yang semakin besar dari penggunaan open source. Data tentang tiga framework dan library sisi klien yang paling populer, React, Angular, dan Vue, menunjukkan bahwa:
- 72% peserta dalam Survei Tahunan Pertama Developer & Desainer Web MDN menggunakan setidaknya satu framework dan library ini.
- Lebih dari 320.000 situs dalam 5 juta URL teratas yang dianalisis oleh HTTP Archive menggunakan setidaknya satu framework dan library ini.
- Jika dikelompokkan berdasarkan waktu yang dihabiskan, 30 dari 100 URL teratas menggunakan setidaknya satu framework dan library ini. (Penelitian dilakukan pada data internal.)
Artinya, alat open source yang lebih baik dapat secara langsung menghasilkan web yang lebih baik dan itulah sebabnya engineer Chrome mulai bekerja langsung dengan penulis framework dan library eksternal.
Kontribusi pada framework web
Framework yang umum digunakan untuk membuat dan menyusun halaman web dibagi menjadi dua kategori:
- Framework UI (atau library), seperti Preact, React, atau Vue, yang memberikan kontrol atas lapisan tampilan aplikasi (melalui model komponen, misalnya).
- Framework web, seperti Next.js, Nuxt.js, dan Gatsby, yang menyediakan sistem end-to-end dengan fitur bawaan yang memiliki opini, seperti rendering sisi server. Framework ini biasanya memanfaatkan framework atau library UI untuk lapisan tampilan.
Developer dapat memilih untuk tidak menggunakan framework, tetapi dengan menggabungkan library lapisan tampilan, router, sistem gaya, perender server, dan sebagainya, mereka sering kali membuat jenis framework mereka sendiri. Meskipun memiliki opini, framework web menangani banyak masalah ini secara default.
Bagian lain dari postingan ini menyoroti banyak peningkatan yang baru-baru ini diterapkan di berbagai framework dan alat, termasuk kontribusi dari tim Chrome.
Angular
Tim Angular telah mengirimkan sejumlah peningkatan ke framework versi 8:
- Pemuatan diferensial secara default untuk meminimalkan polyfill yang tidak diperlukan untuk browser yang lebih baru.
- Dukungan untuk sintaksis impor dinamis standar untuk rute pemuatan lambat.
- Dukungan pekerja web untuk menjalankan operasi di thread latar belakang yang terpisah dari thread utama.
- Ivy, mesin rendering baru Angular yang memberikan performa kompilasi ulang yang lebih baik dan pengurangan ukuran paket, tersedia dalam mode pratinjau untuk project yang ada.
Anda dapat mempelajari lebih lanjut peningkatan ini di "Angular Versi 8" dan tim Chrome berharap dapat bekerja sama dengan mereka secara erat pada tahun mendatang saat lebih banyak fitur diterapkan.
Next.js
Next.js adalah framework web yang menggunakan React sebagai lapisan tampilan. Selain model komponen UI yang diharapkan banyak developer dari framework sisi klien, Next.js menyediakan sejumlah fitur default bawaan:
- Pemilihan rute dengan pemisahan kode default
- Kompilasi dan penggabungan (menggunakan Babel dan webpack)
- Rendering sisi server
- Mekanisme untuk mengambil data di tingkat per halaman
- Gaya visual enkapsulasi (dengan styled-jsx)
Next.js dioptimalkan untuk mengurangi ukuran paket, dan tim Chrome membantu mengidentifikasi area tempat kami dapat membantu meningkatkan performa lebih lanjut. Anda dapat mempelajari lebih lanjut setiap fitur tersebut dengan melihat permintaan komentar (RFC) dan permintaan pull (PR):
- Strategi chunking webpack yang ditingkatkan yang memancarkan paket yang lebih terperinci, sehingga mengurangi jumlah kode duplikat yang diambil melalui beberapa rute (RFC, PR).
- Pemuatan diferensial dengan pola modul/nomodule yang dapat mengurangi jumlah total JavaScript di aplikasi Next.js hingga 20% tanpa perubahan kode (RFC, PR).
- Pelacakan metrik performa yang ditingkatkan yang menggunakan User Timing API (PR).
Kami juga mempelajari fitur lain untuk meningkatkan pengalaman pengguna dan developer dalam menggunakan Next.js, seperti:
- Mengaktifkan mode serentak untuk membuka hidrasi komponen progresif atau sebagian.
- Sistem kesesuaian berbasis webpack yang menganalisis semua file sumber dan aset yang dihasilkan untuk menampilkan error dan peringatan yang lebih baik (RFC).
Nuxt.js
Nuxt.js adalah framework web yang menggabungkan Vue.js dengan berbagai library untuk menyediakan penyiapan yang memiliki opini. Mirip dengan Next.js, framework ini menyertakan banyak fitur siap pakai:
- Pemilihan rute dengan pemisahan kode default
- Kompilasi dan penggabungan (menggunakan Babel dan webpack)
- Rendering sisi server
- Pengambilan data asinkron untuk setiap halaman
- Penyimpanan data default (Vuex)
Selain bekerja langsung untuk meningkatkan performa berbagai alat, kami telah memperluas dana framework untuk memberikan dukungan finansial kepada lebih banyak framework dan library open source. Dengan dukungan terbaru kami untuk Nuxt.js, beberapa fitur dijadwalkan akan diterapkan dalam waktu dekat, termasuk rendering server dan pengoptimalan gambar yang lebih cerdas.
Babel
Kami juga telah membuat kemajuan dalam meningkatkan performa alat dasar penting di hampir semua framework yang disebutkan--Babel.
Babel mengompilasi kode yang berisi sintaksis yang lebih baru menjadi kode yang dapat dipahami oleh berbagai browser.
Penggunaan @babel/preset-env untuk menargetkan
browser modern menjadi hal yang umum, dengan berbagai target browser dapat ditentukan untuk menyediakan polyfill yang cukup
yang diperlukan untuk semua lingkungan yang dipilih. Salah satu cara untuk menentukan target adalah dengan menggunakan <script
type="module"> untuk menargetkan semua browser yang mendukung Modul ES.
Untuk mengoptimalkan kasus ini, kami meluncurkan preset baru;
@babel/preset-modules. Daripada mengonversi sintaksis modern ke sintaksis yang lebih lama untuk menghindari bug browser, preset-modules memperbaiki setiap bug tertentu dengan mengubah ke sintaksis modern yang tidak rusak dan sedekat mungkin. Hal ini menghasilkan kode modern yang dapat dikirim hampir tanpa modifikasi ke sebagian besar browser.
Developer yang sudah menggunakan preset-env juga akan mendapatkan manfaat dari pengoptimalan ini tanpa harus melakukan apa pun, karena pengoptimalan ini akan segera dimasukkan ke dalam preset-env juga.
Apa langkah selanjutnya?
Bekerja sama dengan framework dan library open source untuk memberikan pengalaman yang lebih baik membantu tim Chrome menyadari apa yang pada dasarnya penting bagi pengguna dan developer.
Jika Anda menggunakan framework web, library UI, atau bentuk alat web apa pun (pemaket, pengompilasi, linter), ajukan permohonan dana framework!