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. Fitur ini dapat digunakan untuk memuat skrip dengan lambat hanya jika 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 over-scroll

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, yang menggeser ke bawah di bagian atas halaman, melakukan pemuatan ulang paksa.

Sebelumnya, dengan refresh 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 progressive web app Twitter, saat Anda menarik ke bawah, alih-alih memuat ulang seluruh halaman, aplikasi 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 menolak permintaan tiga kali. Kini 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 dan konteks yang tepat, kami mendapati bahwa pengguna dua setengah kali lebih mungkin untuk memberikan izin.

Dan banyak lagi!

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

  • finally kini tersedia pada instance Promise dan dipanggil setelah Promise 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, memberikan pengalaman yang lebih baik kepada pengguna dengan lebih sedikit rasa frustrasi.
  • Intl.PluralRules API memungkinkan Anda mem-build aplikasi yang memahami bentuk jamak dari bahasa tertentu dengan menunjukkan bentuk jamak mana yang berlaku untuk jumlah dan bahasa tertentu. Dan dapat membantu dengan bilangan 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.