Baru di Chrome 63

Pete LePage

Dan masih banyak lagi fitur lainnya.

Saya Pete LePage. Mari kita lihat apa saja yang baru untuk developer di Chrome 63.

Ingin melihat daftar lengkap perubahan? Lihat daftar perubahan repositori sumber Chromium.

Impor modul dinamis

Mengimpor modul JavaScript sangat praktis, tetapi bersifat statis, Anda tidak dapat mengimpor modul berdasarkan kondisi runtime.

Untungnya, hal itu berubah di Chrome 63, dengan sintaksis impor dinamis baru. Dengan begitu, Anda dapat memuat kode secara dinamis ke dalam modul dan skrip saat runtime. Fungsi ini dapat digunakan untuk memuat skrip secara lambat hanya saat diperlukan, sehingga meningkatkan performa aplikasi Anda.

button.addEventListener('click', event => {
  import('./dialogBox.js')
  .then(dialogBox => {
    dialogBox.open();
  })
  .catch(error => {
    /* Error handling */
  });
});

Daripada memuat seluruh aplikasi saat pengguna pertama kali membuka halaman, Anda dapat mengambil resource yang diperlukan untuk login. Pemuatan awal Anda kecil dan sangat cepat. Kemudian, setelah pengguna login, muat sisanya, dan Anda sudah siap.

Iterator dan generator asinkron

Menulis kode yang melakukan iterasi apa pun dengan fungsi async bisa jadi tidak rapi. Bahkan, ini adalah bagian inti dari pertanyaan coding wawancara favorit saya.

Sekarang, dengan fungsi generator asinkron dan protokol iterasi asinkron, penggunaan atau penerapan sumber data streaming menjadi lebih sederhana, dan pertanyaan coding saya menjadi jauh lebih mudah.

async function* getChunkSizes(url) {
  const response = await fetch(url);
  const b = response.body;
  for await (const chunk of magic(b)) {
    yield chunk.length;
  }
}

Iterator asinkron dapat digunakan dalam loop for-of dan juga untuk membuat iterator asinkron kustom Anda sendiri melalui factory iterator asinkron.

Perilaku overscroll

Men-scroll adalah salah satu cara paling mendasar untuk berinteraksi dengan halaman, tetapi pola tertentu dapat sulit ditangani. Misalnya, fitur tarik untuk memuat ulang browser, dengan menggeser ke bawah di bagian atas halaman, melakukan pemuatan ulang paksa.

Sebelumnya, dengan pemuatan ulang halaman penuh.

Setelah itu, muat ulang konten saja.

Dalam beberapa kasus, Anda mungkin ingin mengganti perilaku tersebut dan memberikan pengalaman Anda sendiri. Itulah yang dilakukan aplikasi web progresif Twitter saat Anda menarik ke bawah, bukan memuat ulang seluruh halaman, aplikasi ini hanya menambahkan tweet baru ke tampilan saat ini.

Chrome 63 kini mendukung properti CSS overscroll-behavior, sehingga mempermudah penggantian perilaku scroll overflow default browser.

Anda dapat menggunakannya untuk:

Bagian terbaiknya, overscroll-behavior tidak memiliki dampak negatif pada performa halaman Anda.

Perubahan UI izin

Saya menyukai notifikasi push web, tetapi saya sangat frustrasi dengan banyaknya situs yang meminta izin saat halaman dimuat, tanpa konteks apa pun - dan saya tidak sendirian.

90% dari semua permintaan izin diabaikan atau diblokir sementara.

Di Chrome 59, kami mulai mengatasi masalah ini dengan memblokir sementara izin jika pengguna menutup permintaan tiga kali. Sekarang di m63, Chrome untuk Android akan membuat dialog modal permintaan izin.

Ingat, ini bukan hanya untuk notifikasi push, tetapi untuk semua permintaan izin. Jika Anda meminta izin pada waktu yang tepat dan dalam konteks, kami mendapati bahwa pengguna dua setengah kali lebih cenderung memberikan izin.

Dan banyak lagi!

Ini hanyalah beberapa perubahan di Chrome 63 untuk developer, tentu saja, ada banyak lagi.

  • finally kini tersedia di instance Promise dan dipanggil setelah Promise telah terpenuhi atau ditolak.
  • Device Memory JavaScript API yang baru membantu Anda memahami batasan performa dengan memberi petunjuk tentang jumlah total RAM di perangkat pengguna. Anda dapat menyesuaikan pengalaman saat runtime, mengurangi kompleksitas pada perangkat kelas bawah, sehingga memberikan pengalaman yang lebih baik kepada pengguna dengan lebih sedikit rasa frustrasi.
  • Intl.PluralRules API memungkinkan Anda mem-build aplikasi yang memahami bentuk jamak bahasa tertentu dengan menunjukkan bentuk jamak yang berlaku untuk jumlah dan bahasa tertentu. Dan dapat membantu dengan angka ordinal.

Pastikan untuk subscribe ke channel YouTube kami, dan Anda akan mendapatkan notifikasi email setiap kali kami meluncurkan video baru.

Saya Pete LePage, dan segera setelah Chrome 64 dirilis, saya akan langsung memberi tahu Anda -- apa yang baru di Chrome.