Chrome berkolaborasi dengan framework open source untuk meningkatkan kualitas web
Chrome adalah kontributor aktif bagi ekosistem framework web dan diskusi kami di Chrome Dev Summit 2019 membahas berbagai upaya yang telah kami lakukan selama setahun terakhir.
Baca terus untuk mengetahui rangkuman pembahasan hal ini dengan detail dan referensi tambahan.
Bagaimana cara membuat web menjadi lebih baik?
Semua orang di tim Chrome bertujuan untuk membuat web menjadi lebih baik. Kami berupaya meningkatkan API browser dan V8--mesin JavaScript dan WebAssembly inti yang mendukung Chrome--sehingga developer dibekali dengan fitur yang membantu mereka membuat halaman web yang berkualitas. Kami juga mencoba meningkatkan kualitas situs yang sudah beroperasi saat ini dengan berkontribusi pada alat open source dalam berbagai cara.
Sebagian besar developer web mengandalkan alat open source jika memungkinkan dan mereka memilih untuk tidak membangun infrastruktur yang sepenuhnya kustom. Framework JavaScript sisi klien dan library UI menghasilkan penggunaan open source yang semakin banyak. Data tentang tiga framework dan library sisi klien yang paling populer, React, Angular, dan Vue, menunjukkan bahwa:
- 72% peserta dalam Survei Developer & Desainer Web Tahunan Pertama MMD menggunakan setidaknya salah satu framework dan library ini.
- Lebih dari 320.000 situs di 5 juta URL teratas yang dianalisis oleh Arsip HTTP menggunakan setidaknya salah satu framework dan library ini.
- Jika dikelompokkan berdasarkan waktu yang dihabiskan, 30 dari 100 URL teratas menggunakan setidaknya salah satu dari framework dan library ini. (Penelitian dilakukan pada data internal.)
Artinya, alat open source yang lebih baik dapat langsung menghasilkan web yang lebih baik, dan itulah sebabnya engineer Chrome mulai bekerja sama langsung dengan penulis library dan framework eksternal.
Kontribusi untuk framework web
Framework yang umum digunakan untuk membangun dan menyusun halaman web terbagi dalam dua kategori:
- Framework UI (atau library), seperti Preact, React, atau Vue, yang memberikan kontrol atas lapisan tampilan aplikasi (misalnya melalui model komponen).
- Framework web, seperti Next.js, Nuxt.js, dan Gatsby, yang menyediakan sistem menyeluruh dengan fitur opini bawaan, seperti rendering sisi server. Framework ini biasanya memanfaatkan framework UI atau library 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 akan membuat jenis framework sendiri. Meskipun memiliki opini yang jelas, framework web menangani banyak masalah ini secara default.
Bagian lainnya dalam postingan ini menyoroti banyak peningkatan yang baru-baru ini terdapat pada berbagai framework dan alat, termasuk kontribusi dari tim Chrome.
Angular
Tim Angular telah mengirimkan sejumlah peningkatan ke versi 8 framework:
- 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 sudah ada.
Anda dapat mempelajari lebih lanjut tentang peningkatan ini di "Versi 8 Angular" dan tim Chrome berharap dapat bekerja sama dengan lebih erat pada tahun depan seiring dengan semakin banyaknya fitur yang tersedia.
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:
- Perutean dengan pemisahan kode default
- Kompilasi dan pemaketan (menggunakan Babel dan webpack)
- Rendering sisi server
- Mekanisme untuk mengambil data pada tingkat per halaman
- Gaya visual enkapsulasi (dengan styled-jsx)
Next.js dioptimalkan untuk mengurangi ukuran paket, dan tim Chrome membantu mengidentifikasi area yang dapat kami tingkatkan performa lebih lanjut. Anda dapat mempelajari setiap kolom tersebut lebih lanjut dengan melihat permintaan komentar (RFC) dan permintaan pull (PR):
- Strategi pemotongan webpack yang lebih baik dan memunculkan 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).
- Peningkatan pelacakan metrik performa yang menggunakan User Timing API (PR).
Kami juga sedang 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 library yang berbeda untuk menyediakan penyiapan pasti. Mirip dengan Next.js, aplikasi ini menyertakan banyak fitur siap pakai:
- Perutean dengan pemisahan kode default
- Kompilasi dan pemaketan (menggunakan Babel dan webpack)
- Rendering sisi server
- Pengambilan data asinkron untuk setiap halaman
- Penyimpanan data default (Vuex)
Bersama dengan upaya langsung untuk meningkatkan performa berbagai alat, kami telah memperluas dana framework untuk memberikan dukungan keuangan ke lebih banyak framework dan library open source. Dengan dukungan terbaru kami untuk Nuxt.js, beberapa fitur diperkirakan akan tersedia dalam waktu dekat, termasuk rendering server dan pengoptimalan gambar yang lebih cerdas.
Babel
Kami juga telah membuat progres dalam meningkatkan performa alat dasar yang penting di hampir semua framework yang disebutkan--Babel.
Babel mengompilasi kode yang berisi sintaksis yang lebih baru ke dalam kode yang dapat dipahami oleh browser yang berbeda.
Penggunaan @babel/preset-env umumnya digunakan untuk menargetkan browser modern, sementara target browser yang berbeda dapat ditentukan untuk menyediakan cukup polyfill yang diperlukan bagi 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 lama untuk menghindari bug browser, preset-modules memperbaiki setiap bug tertentu dengan mengubahnya ke
sintaksis modern yang paling mendekati. Hal ini menghasilkan kode modern yang dapat dikirimkan hampir
tidak dimodifikasi ke sebagian besar browser.
Developer yang sudah menggunakan preset-env juga akan mendapatkan manfaat dari pengoptimalan ini tanpa harus
melakukan apa pun, karena pengoptimalan tersebut juga akan segera dimasukkan ke dalam preset-env.
Apa langkah selanjutnya?
Bekerja sama dengan framework dan library open source untuk memberikan pengalaman yang lebih baik akan membantu tim Chrome menyadari hal yang pada dasarnya penting bagi pengguna dan developer.
Jika Anda mengerjakan framework web, library UI, atau bentuk alat web apa pun (bundler, compiler, linter), ajukan permohonan pendanaan framework.