Perkembangan Teknologi WEB dari httparchive
Ringkasan Episode
Bantu KoreksiEpisode ini membedah Web Almanac 2022, laporan tahunan tentang keadaan web yang datanya berasal dari HTTP Archive. Yang membedakannya dari survei seperti State of JS adalah metodenya: ini field report, bukan kuesioner. Datanya berasal dari URL yang benar-benar diakses pengguna Chrome lewat Chrome UX Report, lalu tiap bulan URL-urL itu diuji dengan sejumlah tools dan disimpan di BigQuery yang bisa dikueri siapa saja. Temuan dari sisi JavaScript: jumlah JavaScript yang dimuat justru naik dibanding tahun sebelumnya, webpack masih memimpin sebagai bundler, dan jQuery masih jauh di atas React — sebagian besar karena WordPress yang dipakai sekitar 35% situs. Sisi lain dari popularitas jQuery adalah ia jadi penyumbang celah keamanan terbesar. Yang cukup memprihatinkan, 77% halaman mobile masih memuat script yang render blocking, padahal atribut async sudah lama tersedia. Adopsi PWA naik stabil sejak 2019, dan datanya menunjukkan jenis situs yang paling banyak memakainya adalah shopping dan news. Ada temuan praktis soal ikon: meski variasi ukurannya membingungkan, hanya dua ukuran yang benar-benar dominan. Ditutup dengan pembahasan kenapa laporan seperti ini berguna — bukan sekadar tahu tren, tetapi punya data untuk mendukung keputusan teknis di hadapan pemegang keputusan, dan tahu di mana posisi kita dibanding rata-rata.
Poin-poin Utama
- •Web Almanac adalah field report, bukan survei — datanya dari URL yang benar-benar diakses pengguna Chrome, sehingga bebas dari bias lingkaran pertemanan pembuat survei
- •Datanya terbuka di BigQuery dan bisa dikueri siapa saja untuk analisis sendiri, misalnya melihat pertumbuhan teknologi tertentu di situs yang diakses dari Indonesia — gratis sampai satu terabyte sebulan
- •jQuery masih jauh di atas React, sebagian besar karena WordPress yang dipakai sekitar 35% situs — dan popularitas itu pula yang membuatnya jadi penyumbang celah keamanan terbesar
- •77% halaman mobile masih memuat script yang render blocking padahal atribut async sudah lama tersedia — salah satu celah perbaikan terbesar yang datanya jelas
- •Adopsi PWA naik stabil sejak 2019, bukan tren sesaat, dan paling banyak dipakai situs shopping serta news
- •Untuk web manifest, meski variasi ukuran ikon membingungkan, hanya dua ukuran yang benar-benar dominan — sisanya hanya perlu kalau memang menyasar browser lama
- •Angkanya perlu dibaca dengan hati-hati: metriknya diukur dengan lab tools dalam kondisi cache kosong dan tidak login, dan framework tanpa runtime seperti Svelte sulit terdeteksi karena jejaknya hilang setelah di-build
Halo, Assalamualaikum Warahmatullahi Wabarakatuh.
Selamat malam, selamat hari Selasa.
Selasa malam, waktunya kita ngobrolin web.
Masih sama-sama kita bertiga.
Riza, masih ada saya, Riza. Kemudian ada Eka. Halo, Eka.
Halo.
Ya, saya Riza dari Tangerang, Eka dari Jogja.
Dan ada tamu jauh, ya, Ivan, yang jalan-jalan terus.
Yay! Halo, halo.
Dari mana nih? Dari mana nih?
Iya, kali ini dari Gresik.
Saya lagi di WorldCamp Gresik.
WorldCamp, ya? Wah, mantap.
- Acaranya mulai besok. - Acaranya besok, ya? Berapa hari?
- Selama 2 hari. - Selama 2 hari.
Wow, seru ya.
Seru banget. Ini mulai ramai banget nih.
Kan sekarang ada lagi kayak seperti gala dinner gitu ya.
Jadi ketemu speaker, sponsor.
Speakersnya juga ada dari lokal, dari luar juga ada.
Sponsor dari lokal juga ada, dari luar juga ada.
Jadi, iih, seru banget.
Iya, iya, iya.
Tapi tetap COVID-man.
Organisernya mau stream.
Ngobrol di web. Iya, iya dong.
Ya kan masih berkaitan sama WordPress juga ya ini.
Betul.
Ya, WordPress kan menguasai dunia web kan? Berapa persen?
Kalau saat ini sekitar 41 persen. Saya lupa angka eksternya.
Lihat transkrip lengkap (873 segmen lagi)
40 persen.
Tapi dari survey, bukan dari survey, maksudnya.
Dari web survey yang dilakukan itu dari strategi, Pak.
Top 1 million web itu, Pak, 41 persen menggunakan WordPress.
Oh, wow.
Gede sekali ya.
Ya, WordPress ini kan salah satu killer feature-nya ini ya.
Bisa dibilang killer feature-nya PHP kan.
Dan CMS yang paling populer lah ya.
Kalau jawab dulu, kita ada jumlah, ada Drupal.
Drupal juga masih eksis ya, masih banyak juga yang pakai.
Ada yang tahu nggak sebelum jumlah itu apa?
Sebelum apa ya?
Ya, deket-tek aja.
Ngetek ATML manual. Enggak ya?
Is it Mambo?
Mambo.
Mambo ganti jadi jumlah kan kalau nggak salah ya?
Gue pakai CMS-nya mulainya dari Mambo.
Dari Mambo.
Tahun umur deh gue.
Kalau untuk e-commerce-nya, gue pakainya OS Commerce.
OS Commerce.
Iya, baru diporking jadi Zencar.
Oh, jadi Zencar.
Tapi yang dari WordPress sendiri juga ada kan.
Ya namanya, e-commerce kan itu WordPress ya.
Ngefreeze kan Ivan kan.
Kita remove dulu ya.
Jadi Ivan boleh join lagi nanti kalau internetnya udah oke.
Jadi malam hari ini, topiknya apa nih kak?
Topiknya adalah web almanak.
Jadi kita mau bahas tentang state of the web ya.
State of the web 2022, perkembangan dunia web itu seperti apa dari 2021 sampai tahun ini, 2022.
Tapi bukan berdasarkan survey,
melainkan berdasarkan statistik data yang dikumpulkan dari pengguna-pengguna browser Chrome.
Khusus browser Chrome.
Bukan Chromium, Microsoft Edge, atau Opera, atau anak-anaknya Chromium, enggak.
Jadi dia hanya Chrome aja yang warnanya merah kuning hijau.
Dan juga bukan dari Firefox dan bukan dari Safari.
Jadi yang ada statistiknya itu dari Chrome aja.
Terus begitu datanya dikumpulkan, kemudian disimpan ke satu sumber data dengan BigQuery.
Kemudian dari situ baru bisa didapatkan di analisa.
Jadi mungkin kita bisa mulai dulu dari Eka.
Ini bahas tentang KTTP Archive itu apa dan bagaimana cara data dikumpulkan.
Jadi kan tadi sudah dibahas sekilas tentang web almanak.
Yang bakal banyak kita bahas malam ini sebetulnya hasil dari web almanak untuk tahun 2022.
Tapi web almanak itu datanya dari mana?
Dari project yang namanya HTTP Archive.
Nah, HTTP Archive itu project yang sudah berjalan selama berapa ya? Dari tahun 2010 atau berapa punya?
Sudah berjalan selama bertahun-tahun.
Eh, sebelumnya deh.
Tapi almanaknya 2019, disini datanya.
Jadi HTTP Archive itu project parent-nya.
Jadi dia mengumpulkan seluruh URL yang tadi dibahas itu, URL yang diakses oleh pengguna Chrome.
Nah, itu bagian dari project yang namanya CRUX, Chrome User Experience.
By default, kalau kita pakai Chrome, itu URL yang kita akses itu dikirim.
Tapi pastinya di-anonymize ya, nggak include apa IP address kita atau apa.
Jadi cuma general region, mungkin dari Indonesia, device-nya seperti apa, URL yang diakses itu apa,
itu dikirim ke Archive mereka.
Di preferences, kalau kita nggak bersedia, ya bisa off-out. Cuma ya, maksudnya itu...
Kayaknya waktu install Chrome pertama kali, ada ininya kok.
Oh, ada checkbox-nya ya?
Ada consent-nya kok, ada inform consent-nya. Dan by decode memang enable by decode.
Tanyaannya, apakah kalian membacanya?
Oke-oke aja.
Jangan, oke-oke saja.
Nah, itu data URL-nya kan dikumpulin sama si HTTP Archive ini,
yaitu tadi URL-nya itu masing-masing URL setiap tanggal 1 setiap bulannya,
itu mereka running sejumlah tes. Bisa tolong buka halaman yang metodologi.
Metodologi, siap.
Nah, itu ada tools-nya.
Jadi mereka si pihak HTTP Archive ini dengan bekal URL-URL yang dikirim dari Chrome UX study,
Chrome study, mereka running sejumlah tes pakai beberapa tools-nya.
Ada tool di situ kan, ada web page test, ada Lighthouse, dan lain-lain.
Terus di-store di database yang namanya BigQuery.
Nah, BigQuery-nya.
Google BigQuery ya, maksudnya ya?
Ya, Google BigQuery.
GCP, GCP.
Dan itu bisa, ya betul, GCP bisa diakses dari Google Cloud Platform oleh siapapun,
bukan cuma si pihak siapa, HTTP Archive atau yang bikin Almanak aja, kita semua bisa, tapi bayar.
Kita juga pernah eksplor ya, tapi abis itu menyerah. Susah.
Ya, jadi emang itu kan bayarnya berdasarkan usage ya.
Jadi ada free tier-nya, buat kalau yang cuma pengen iseng coba-coba tuh,
ada kan contoh dataset-nya itu, ya semacam SQL query lah.
Jadi kalau penggunaan kita per bulan di bawah 1 terabyte, masih free.
Nah, cuma ini kan datanya tuh banyak banget, dan ekstrim lah.
Maksudnya ini data yang di-store itu, test-nya aja banyak, tools-nya banyak, hal-hal yang apa,
metric-metric yang di analisa itu sangat banyak.
Kalau misalnya kita harus nulis SQL command untuk mendapatkan data yang kita mau,
kalau belum terbiasa itu sulit.
Jadi kalau dari segi data, memang datanya tersedia, bisa diakses,
baik secara gratis, maupun kalau mau maksimal, ya berbayar.
Tapi kan kita belum tentu bisa langsung membaca, apa, cari data yang kita mau,
pilih kolom-kolom apa aja yang datanya relevan, dan apa,
menafsirkan lah ya, meninterpretasi datanya maksudnya seperti apa, itu kan agak sulit.
Nah, makanya sekitar 3 tahun kayaknya, 3 tahun terakhir ini,
mereka dari HTTP Archive itu membuat project state of the web lah, almanak tahunan.
Jadi ini yang paling baru yang mau kita bahas ini, yang tahun 2022.
Tahun lalu ada 2021, dimana mereka itu ternyata mereka bekerja sama dengan ekspert di masing-masing bidang.
Jadi ada CSS, JavaScript, atau mungkin Accessibility, dan lain-lain,
dan mereka juga merekrut banyak kontributor sukarela.
Ternyata itu ada, apa sih, bisa volunteer kalau kita mau.
Jadi ikut dalam tim yang menafsirkan dan mendiskusikan data-data atau matrix apa aja yang mau diolah.
Dan itu hasil olah data mereka itu dipresentasikan dalam almanak tahunan ini.
Jadi kita bisa relatif lebih mudah membaca atau menafsirkan data-datanya.
Kayak misalnya CSS nih contoh, ya contoh random aja. Mungkin ada hal-hal yang relevan
seperti media query atau support query, atau misalnya untuk accessibility, prefer reduced motion.
Itu kan kalau cuma lihat dari database, itu sekadar hanya satu dari banyak kolom yang ada.
Tapi kan di almanak ini di analisa dari kacamata misalnya accessibility.
Jadi kita lebih mudah menafsirkan data-data itu, dan yang paling enak sih dibawahnya ada contoh query-nya.
Jadi kalau kita mau pakai tinggal kopas aja.
- Oh iya, mana ya? - Nanti kalau di bagian-bagian kayak CSS.
Di bawahnya ada contoh. - Di setiap kategorinya ya.
Ada dua hal menarik ya di almanak ini yang saya perhatikan.
Yang pertama adalah kalau misalkan survei-survei kayak dari Stack Overflow,
atau State of JS, atau State of CSS dan lain-lain itu kan survei kan.
Jadi orang yang kenal sama... - Pembuat survei.
Yang pas kebetulan baca. - Ya, friend of friend gitu ya, yang kebetulan baca.
Dan kemudian ada keinginan untuk menulis survei, atau mengisi survei-nya.
Dan isi survei-nya juga belum tentu akurat kan.
Dia bisa aja berbohong dalam tanda kutip gitu.
"Ah nggak mau isi yang ini, isinya yang itu." Bisa aja gitu kan.
Tapi kalau dari web almanak ini lebih jujur karena...
Ya, emang URL yang diakses.
Ini lebih tepatnya, lebih ada field report, satu field report, satu lagi survei report.
Terbeda ya. - Ya, jadi kadang-kadang ada misleading juga.
Kalau misalkan State of JS gitu kan, dia memang yang bikin survei-nya itu ya di lingkungannya React.
Makanya React menang. Walaupun memang secara jujur, secara umum memang React paling atas.
Cuman kan teman-teman dia juga banyak pakainya di lingkungan dia pakai React.
Karena itu jadi agak bias, bukan misleading ya, agak bias gitu lah kira-kira.
Sementara kalau ini kayaknya lebih netral lah.
Ya, nggak netral juga karena cuma Chrome aja, nggak browser yang lain gitu.
Tapi lebih representatif kali ya.
Iya, browser lain kan nggak meliputan gitu.
Dan juga data ini juga sebenarnya open door buat teman-teman jika ingin melihatnya secara langsung.
Saya bisa demo-in sedikit kalau teman-teman pengen lihat.
Wah, boleh dong, coba-coba.
Kebetulan saya lagi mainan BigQuery.
Kita waktu itu pernah minta diajarin sama Johan ya bikinin BigQuery, main-main BigQuery.
Wow, oke. Jadi ini saya punya akun Google Cloud.
Di Zoom dong, di Zoom, nggak kelihatan.
Gak bisa ya?
Oke, bisa aja.
Oke, cukup, cukup.
Jadi saya punya akun di Google BigQuery.
Jadi ada 3 data yang open.
Satu dari HTTP Archive, saya lupa efadu query ini apa,
tetapi ini kelihatannya dari troller untuk beberapa situs-situs besar seperti Stack Overflow,
Hacker News, GitHub, Wikipedia, segala macam.
Dan satu lagi, Chrome UX Report.
Oke, kita bahas sedikit.
Kalau misal dari HTTP Archive, ini data-data yang ada.
Jadi contohnya kalau mau lihat, dari 2016 nggak ada data ini.
Contoh kalau mau lihat data dari 2021 aja ya, mau bala ya.
Kita bisa preview datanya apa yang dipumpulkan.
Oke, contohnya seperti ini.
Timewise.net dan data yang dikirimkan itu apa aja.
On content loaded, blablabla.
Terus nanti dari data ini ada yang proses ke data-data yang lebih kecil lainnya.
Contohnya mau ke data yang diproses itu jadi, contohnya data almanak nih.
Yang para mereka mana aja yang sudah jumpstack. Jadi contohnya kalau yang begini itu data table,
kalau yang begini itu sudah view.
Kalau tau apa ya, jadi view lah.
Data table ya table, kalau yang view itu sudah kaya difilter dari data set yang besar.
Udah ada kondisinya, udah dimodifikasi.
Betul, jadi kita bisa query ke view aja.
Jadi kita lihat nih kalau tahun 2022, clientnya desktop, terus website-nya ini,
kira-kira response-nya gini, kelihatan nih average LCP, fast LCP, CLS, blablabla sudah kelihatan.
Ini juga, ini data almanak ya, itu juga bisa di cross-reference.
Saya dulu pernah bermain di cross-reference antara datang dari harta TVR.
Kita selalu punya pertanyaan, bagaimana sih pertumbuhan pengguna jamstack di Indonesia
dari tahun ke tahun, yang khususnya dari Indonesia dari tahun ke tahun.
Nah, maksudnya kita bisa dari query dari data HTTPR5,
di query ke Chrome UX Report, misalnya dari country-nya Indonesia.
Karena kita pengen berapa data dari Indonesia, data country ID soalnya.
Sudah difilter nih berdasarkan country. Ini agak skew datanya ya,
karena situs dari Indonesia itu apa gitu ya, berdasarkan apa.
Kalau di sini itu, situs dari Indonesia itu adalah situs yang di-visit dari Indonesia.
Jadi bisa jadi situs luar negeri tapi di-visit dari Indonesia.
Oh, bukan server yang serve si website-nya sendiri ya?
Susah, susah, susah itu.
Oh ya, nggak ada datanya. Gimana?
Contohnya, WhatsApp kan bukan dari Indonesia kan,
tetapi di-visit dari Indonesia, contohnya seperti itu.
Jadi, bisa teman-teman bisa menquery data yang kayak Google,
terus bisa dilihat performance-nya seperti apa.
Jadi, kalau mau lihat kompetitor atau teman-teman mau lihat kompetitor,
bisa. Bagaimana sih performa kompetitor itu dari sini gimana, itu juga bisa.
Last thing, jadi antara data set ini pun,
yang penting teman-teman ingat ya, ini berbayar ya,
jadi kalau di running query-nya, dia berbayar sesuai dengan total execution time.
Ya, jadi hati-hati dengan query-nya.
Jangan lupa pakai limit ya.
Iya, jangan lupa pakai limit.
Kalau udah benar, baru limitnya di...
Tapi kalau dibawah 1 terabyte, masih free kan ya, ada free tier-nya?
Masih ada, saya lupa free tier-nya, tetapi...
1 terabyte sebulan.
Jadi, hati-hati bagi teman-teman yang mau bermain,
karena kita GDI, kita tuh dapat kupon.
Jadi, kita bisa eksplorasi.
300 solar ya.
Iya, jadi bisa eksplorasi, jadi data Reddit,
bisa kita lihat juga di sini, Toktoin di Reddit itu.
Silahkan. Nah, jadi soal transparansi data,
apa yang dikumpulkan sama RTPP Archive, Chrome UX Report, ada semua di sini.
Ada semua.
Jadi, kalau misalkan kita mau lihat gitu,
website yang paling, performanya paling bagus yang diakses dari Indonesia, bisa ya?
Bisa.
Tinggal nanti pinter-pinter bermain SQL query,
nanti saya udah kehilangan, kehilangan saya punya query gak tahu lagi dimana ya.
Kalau gak saya bisa tunjukin bagaimana query yang kemarin saya sudah pernah coba.
Mengatahu kalau gak tahu itu, saya mencari pertumbuhan situs WordPress
yang dikundingi dari Indonesia dari tahun ke tahun.
Nah, itu saya pernah bikin itu datanya.
Dan itu perkembangannya sangat pesat di Indonesia.
Jadi, apa namanya?
Bisa menggunakan fitur ini jika ingin melakukan saya survei-survei atau...
Analisa.
Analisa dengan metodologi data-data science.
Bisa bikin semacam state of web atau state of JS versi lokal gitu kan.
Betul.
Jadi misalkan kita pengen tahu apakah library yang banyak digunakan, yang diakses apa?
Kan kita bisa cek website yang berbahasa Indonesia misalkan.
Ada language-nya ID gitu, Indonesia.
Terus habis itu dicek dia pakai library apa.
Atau ukuran halamannya totalnya berapa gitu.
Atau FTP-nya berapa. Core Web Vitals-nya berapa gitu ya.
Bisa kayak gitu ya.
Betul, betul.
Seru sih ya.
Cuma mungkin ini ada kafiatnya sedikit ya soal akurasi.
Tadi kalau URL-nya kan emang karena auto-report.
Jadi nggak ada bias-bias yang kayak di survei-survei yang survei manual kita bahas tadi.
Jadi kalau dari segi URL sih emang cukup representatif untuk user Chrome.
Jadi pengguna Chrome kan cukup mayoritas ya.
Jadi secara statistik mungkin kita bisa dapat gambaran besarnya.
Tapi ini kan dia pakai walaupun URL-nya, field URL.
Matrix-nya kan berasal dari lab tools ya.
Web page test dari Lighthouse dan lain-lain.
Dan di metodologinya ada penjelasannya tuh.
Bahwa mereka emulate dengan kondisi cash kosong dan lock out.
Namanya ya mereka nge-crawl process itu dengan cara atau metodologi lab tools.
Jadi nggak 100% mewakili apa yang dialami user.
Karena user mungkin speed-nya berbeda-beda.
Ada cash, mungkin kalau login experience-nya beda ya.
Kadang kan ada aplikasi yang kalau landing page memang status.
Status dan server render misalnya.
Karena kan bisa berubah, tapi begitu kita login itu fungsinya semua misalnya client render.
Pakai JavaScript yang mungkin dari segi thread blocking-nya, total blocking time-nya.
Bisa ada perbedaan karena ya emang usage-nya beda.
Jadi nggak 100% mewakili usage.
Sama untuk library yang client-side, itu kan mereka pakai weaponizer ya.
Tools yang bernama weaponizer tuh ada di halaman metodologi.
Itu tuh nggak semua library JavaScript bisa dideteksi dengan akurat oleh tooling itu.
Jadi kayak contohnya React itu lebih mudah dideteksi karena kan dia ada global-nya kan, ada runtime-nya.
Tentara kayak swell dan mungkin view ada nggak sih? Ya view atau mungkin solid atau lain-lain. Yang ya swell lah.
Dia kan nggak ada runtime-nya ya. Jadi maksudnya kalau kita punya aplikasi atau situs web yang pakai swell,
begitu udah dibuild, ya swell-nya ilang. Itu jadi JavaScript biasa aja.
Jadi itu solid dideteksi oleh tooling seperti weaponizer tadi.
Terus kalau WordPress kan, kalau CMS seperti WordPress itu bukan lebih mudah dideteksi.
Sedangkan kalau yang pure HTML-based, misalnya 11t atau apalah, kan 11t atau Hugo kan dia generate pure HTML.
Ya terus gimana? Itu kan nggak ada jejaknya. Gak bisa di data.
Jadi namanya statistik itu kan nggak bisa presisi banget. Cuma kita tetap dapat gambaran besarnya aja.
Oke. Nah, dari web Almanac ini kan ada beberapa kategori-kategorinya ya. Ada banyak ya.
Banyak-banyak banget. Di table content-nya ini juga kan ada CSS, ada JavaScript, markup, font, media, web assembly,
sampe PWA dan lain-lain. CMS juga ada. Ada banyak sekali. Dan malam hari ini kita akan bahas sedikit-sedikit ya.
Sedikit aja. Mungkin cukup kalau 2-3 jam.
Kita mulai dari JavaScript dulu ya. Kita mulai dari JavaScript. Yang menarik dari JavaScript.
Nah, ini yang bisa saya lihat ada ini apa, dari tahun lalu dibandingkan tahun lalu sama tahun ini,
ada pertumbuhan yang cukup, apa ya, cukup lumayan untuk jumlah JavaScript yang di apa ya,
di daca, di browser. Ada sekitar 8%. Kemudian untuk di desktop 10%. Jadi nambah.
JavaScript-nya yang tadi kita lihat ada website yang nggak ada JavaScript, sekarang nambah.
Kemudian yang menarik lagi, gimana ya, nah ini. 17% pengguna Chrome itu membuka website yang menggunakan Webpack
sebagai bundler-nya. Ini lagi seru karena si Versel baru ngeluarin Turbo Pack juga kan?
- Turbo Pack. Yang buat sama. - Yang buat sama.
- Ini trend banget yang bikin Note, bikin Deno. - Iya.
Nah, ini yang bikin Webpack. Pas Webpack ada lambat, dia bikin Turbo Pack.
Iya. Ini juga, ya, Turbo Pack di last belum masuk doang kan. Dia baru mulai kan.
Jadi mungkin tahun depan kita akan lihat apakah pengguna Webpack semakin menurun atau gimana, kita nggak tahu.
Kemudian, secara apa ya, agak di luar perkiraan, bundler yang populer kedua adalah ternyata Parcel.
Wow. Parcel ini sebenarnya awalnya ya, berawal dari Webpack yang tidak perlu dikonfig.
Abis itu dia akhirnya bikin bundler sendiri akhirnya. Kalau nggak salah ya.
Dulu awal-awal Parcel 1 itu kalau nggak salah itu. Dia Webpack tapi dia nggak perlu dikonfigurasi.
Sama seperti Veed sebenarnya. Cuman kalau Veed kan kita harus itu kan, define kan.
Oh, saya mau react dan typescript gitu kan. Ada menu-nya kan.
Kalau Parcel itu dia bisa auto-detect kalau nggak salah.
Ini cukup seru juga karena adopsinya lumayan naik dari 1,2 ke 1,9.
Tidak terlalu signifikan tapi untuk ukuran Parcel yang tidak banyak orang dengar ini lumayan sih.
Kemudian transpiler ya masih bubble lah ya.
Kemudian nah ini untuk beberapa cara memanggil JavaScript gitu ya. Ada yang menggunakan async.
Ada yang menggunakan devr. Ada yang pakai module. Atau ada yang no module.
Ini script, text script kemudian spasi type sama dengan module itu digunakan
kalau teman-teman mau pakai sintaks yang import bla bla bla.
Kita bahas sedikit pas bahas Veed Convert itu ya episode lalu.
Jadi import itu sebenarnya sudah didukung oleh browser nggak perlu pakai WP.
Belum semua loh.
Belum semua. Hampir ya hampir.
Jadi kalau teman-teman mau pakai import.
Maksudnya browser yang lama ya.
Browser yang lama. Betul. Browser modern yang sudah up to date automatis update seperti Chrome, Edge, atau Firefox, Safari mungkin itu udah bisa.
Jadi tinggal tambahkan aja spasi type sama dengan module itu udah bisa support import.
Jadi nggak perlu pakai.
Ya browser keluaran 2 tahun terakhir lah ya.
Keliatannya mulai apa? Mulai major.
Ya dan ada juga cara pemanggilan yang asingkranus supaya nggak blocking ya kalau nggak salah ya.
Ya betul.
Supaya nggak blocking.
Kalau devor ini apa devor?
Di load setelah domp content load selesai semua selesai.
Di download domp content load dia baru jadi di download ditunda sampai selesai domp.
Sedangkan kalau asing seselesainya dia ya?
Seselesainya dia dipanggil.
Dan sudah selesai di download baru dia di expect.
Nah sebenarnya asing dan devor kalau dipakai bersamaan itu salah kan ya.
Maksudnya devornya nggak berlaku asingnya kan yang menang.
Nggak boleh dipakai dua-duanya kan.
Tepatnya boleh aja tapi devornya nggak rusak.
Cuma buat apa?
Yang jalan asingnya doang katanya kalau dipakai dua-duanya.
Kalau scriptnya berbeda yang satu dipakai asing yang satu dipakai devor karena tidak terlalu perlu.
Misalkan analytics kan butuhnya terakhir ya.
Nggak perlu di awal ya.
Tergantung analyticsnya ya.
Misalkan kayak itu lah counter lah.
Counter web page counter gitu.
Counternya nambah gitu kan.
Itu kan bisa terakhir gitu kan.
Atau misalkan mau load JavaScript untuk komentar.
Yang pastikan artikelnya harus muncul dulu dong.
Baru komentarnya ada gitu kan.
Kalau saya malah lebih ekstrim lagi.
Hanya load JavaScript hanya saat dibutuhkan.
Oke itu gimana caranya?
Jadi island architecture.
Atau kalau mau manual pakai intersection observer.
Misalnya komen kan biasanya jauh di bawah ya.
Sedangkan buat apa dia di load saat di atas.
Meskipun kita tunda buat apa dia di load di atas.
User yang aja belum scroll sampai ke bawah.
Belum tentu dia tertarik untuk komen dan belum tentu dia selesai membaca terus dia mau komen gitu ya.
Iya dan bisa-bisa mungkin pakai intersection observer.
Misalnya sampai kayak 300 pixel sebelum komen baru scriptnya baru di request.
Request dulu, running, baru dia di render.
Jadi hemat banyak kan.
Contohnya kalau kita di restoran.
Kita nggak akan mungkin juga, kan ada juga teknik yang kalau kita mau order dessert.
Makanan pencuci mulut ya setelah selesai makan dong harusnya.
Jangan waktu makan.
Kalau pesen minum, minumnya duluan sampai.
Minumnya manis-manis lagi kan.
Jadi hilang selera makan kita ada keburu minum.
Oke, anyway.
Jadi si asing ini sudah lumayan banyak orang yang tahu.
Jadi sudah banyak dipakai.
Ada sekitar 76% web mobile itu menggunakan script dengan asing.
Karena supaya nggak render blocking, terutama bisa meningkatkan skor dari performance juga.
Core white vital.
Betul core white vital.
Kemudian, tapi si Diver ini yang masih belum terlalu banyak dipakai.
Kemudian apa lagi yang menarik?
Kita lihat lagi.
Ini nggak semua ya.
Kamu bisa baca langsung dari almanac.http.archive.org ya.
Kalau mau detailnya.
Tapi di sini kita highlight yang menarik-menarik aja.
Yang menurut kita menarik ya.
Kemudian ini adalah percentage.
Percentase.
Aplikasi mobile atau halaman web mobile.
Yang masih ada render blocking script.
Yang tidak menggunakan asing.
Tinggi 77%.
Jadi masih banyak yang belum terlalu dioptimasi.
Terutama untuk mobile page.
Masih scriptnya masih di-head dan belum menggunakan asing.
Belum di-referensi kan?
Yes.
Bisa jadi topic.
Topic.
Bisa, bisa.
Boleh, boleh, boleh.
Kemudian dynamic import juga salah satu fitur yang menarik.
Dan masih belum banyak orang yang tahu.
Ternyata udah ya tapi ya.
Sudah, sudah.
Sudah ada.
Sudah ada.
Bedanya dengan static import apa?
Static bedanya adalah kalau dynamic import dia hanya di-load ketika dibutuhkan.
Jadi kalau memudahkan untuk chunk JavaScript.
Kan JavaScript code kita kan enggak.
Kalau misalkan ukurannya besar kan dipotong-potong ya.
Jadi dengan menggunakan dynamic import.
Ya.
Lebih apa ya.
Lebih efektif lah gitu penggunaannya.
Dan hanya enggak sampai setengah persen dari pengguna yang mengakses website dengan fitur dynamic import.
Mungkin karena juga masih baru ya.
Untuk mobile 0,34 tapi untuk desktop 0,41.
Nggak beda jauh.
Terus web worker juga salah satu fitur yang lumayan menarik.
Karena dia bisa dijalankan dengan thread yang berbeda.
Jadi asingkronus.
Jadi main thread ya.
Ya.
Khusus untuk pekerjaan-pekerjaan tidak ada hubungannya sama manipulation DOM.
Memakses DOM dan lain-lain.
Apa sih maksudnya?
Maca file.
Ambil data dan lain-lain itu bisa dikerjakan oleh web worker.
Ini naiknya berapa nih dari tahun lalu?
Angka statistik web worker.
12 persen ini naiknya enggak ada ya.
Kayaknya tahun lalu belum ini deh.
Belum rilis.
Sekarang kan mungkin ngetrend salah satunya karena ada party town ya.
Yang lagi ke hype.
Jadi mungkin mulai public adoptionnya mulai tinggi lah.
Ya enggak harus dari party town.
Cuma orang jadi tahu bahwa oh ya bisa kayak gitu.
Ini ada kasus saya pakai web worker ini.
Untuk ini apa namanya?
Request data di background.
Saya pakai ini juga.
Jadi di project yang saya itu.
Misalnya setelah loading, loading setelah loading pertama.
Saya tahu di bagian bawah itu ada statistik.
Ada data, data endpoint yang harus saya load.
Tapi enggak saya load dari, enggak saya load via.
Main thread.
Main thread.
Karena saya tahu data itu enggak penting-penting amat di load.
Karena data cukup gede.
Dan harus diproses.
Jadi saya requestnya via web worker.
Saya via web worker sudah sampai.
Terus saya simpen di local storage.
Jadi waktu scrolling sampai ke komponen tersebut.
Saya cuma tinggal load dari local storage.
Enggak perlu request.
Betul.
Jadi buat teman-teman yang enggak tahu party town.
Tadi sempat dibahas.
Itu adalah salah satu library untuk melod.
Terparti script seperti analytics.
Ternyata party town itu terparti maksudnya.
Ya analytics.
Kemudian apalah gitu ya terparti library.
CDN dan lain-lain.
Itu yang tidak ada hubungannya sama manipulasi dom.
Itu di loadnya di web worker.
Jadi lebih cepat.
Misalkan teman-teman pakai Google Analytics.
Atau pakai analytics yang lain.
Seperti itu.
Kemudian kita lanjut lagi.
Ivan sudah selesai atau tadi kepotong sorry?
Enggak.
Oke.
Ini juga seru nih.
Pasti banyak yang mengefriend sama jQuery.
Jadi jQuery masih teratas.
Jauh sekali dibandingkan React 8%.
Menurut saya sih karena pengaruh WordPress.
Satu itu karena kadang-kadang ada satu aplikasi web atau halaman web.
Itu bisa punya dua library jQuery yang berbeda versi.
Jadi dia bisa dua kali lipat sendiri.
Itu dihitung satu.
Kalau di sini mungkin dihitung satu ya.
Kalau dihitung satu, berarti ini bisa lebih dari 81%.
Lebih banyak lagi.
Itu udah penjelasan itu.
Sebagian karena WordPress.
Karena tingginya penggunaan WordPress.
Itu ternyata berkorelasi langsung sama tingginya si jQuery.
Betul.
WordPress menggunakan jQuery dan digunakan 35% dari website sejauh ini yang menggunakan Chrome.
Yang dari CRUX ini.
Itu menggunakan WordPress.
Sehingga jQuery-nya yang paling tinggi.
Beda ceritanya kalau nanti jQuery-nya digantikan oleh yang lain.
Dan di sini juga ada cerita bahwa hampir semua fitur-fitur jQuery sebenarnya sudah bisa dilakukan di DOM API.
Jadi kalau misalkan teman-teman berfikir untuk bikin aplikasi web di luar WordPress.
Diusahakan jangan pakai jQuery dulu sampai benar-benar dibutuhkan.
Saya nggak tahu kapan. Kayaknya udah nggak butuh ya.
Kalau project baru nggak butuh.
Cuma kalau project lama kan kalau rewrite semua.
Ditulis ulang menggunakan web API yang baru.
Nggak ada yang mau, males.
Salah satunya kalau nggak salah Bootstrap.
Bootstrap udah tergantung budget.
Kalau nggak salah Bootstrap udah nggak pakai jQuery.
Jadi sudah mulai sedikit-sedikit orang berpindah.
Karena memang DOM API udah lebih mudah digunakan dibandingkan dulu ya.
Kalau dulu kan kita harus pakai XHR.
XML.
XHR HTTB Request.
Kami nyebelin waktu.
XML-nya, huruf besar, huruf kapital.
HTTP-nya, TTP-nya, huruf kecil.
Siapa itu yang buat API ya?
Yang bikin itu si XML HTTB Request yang bikin.
Bukan.
Cuma Internet Explorer kan ya itu.
Internet Explorer.
EA itu yang bikin itu.
Jadi Ajax itu yang bikin dulu EA.
EA ya.
Jadi gara-gara itu aja, worth it.
Untuk pakai jQuery dan kita bisa pakai dolar titik Ajax atau GET.
Itu udah worth it untuk urusan gitu.
Tapi kalau sekarang kan udah ada vets ya.
Jadi harusnya lebih mudah lah.
Terus juga untuk selektor dan lain-lain juga sudah lebih sederhana dibandingkan dulu.
Jadi disarankan, pikir dua kali ya.
Pikir berapa kali untuk menggunakan library-library seperti jQuery, moment.js,
dan lain-lain yang kita udah bahas di episode sebelumnya juga.
Episod terakhir.
Kemudian, nah ini juga gede nih.
57% ternyata dari halaman mobile page.
Ada 57% web yang JavaScript-nya pasti ada isu...
Kamanan.
Kamanan.
Ini lumayan besar.
Lebih dari setengahnya.
Tapi turun tahu, turun signifikan dari tahun lalu.
Oh iya, turun.
Udah mulai aware ya.
Tahun lalu 64%, tahun ini 57%.
Itu juga salah satunya karena library biasanya.
Ini adalah vulnerabilities.
JQuery paling rawan karena ada di mana-mana ya.
Maksudnya karena penggunaannya tinggi, kemungkinan disusupin, apalah, keli jahat.
Lebih besar juga.
Ini yang gede-gede nih ya.
Yang cukup besar dan cukup populer.
Makanya dia 57% cukup besar karena yang populer-populer pada kena ya.
Cuma yang paling tinggi, paling signifikan sih jQuery doang.
Hampir separoh kan.
Ini berdua loh.
JQuery dan jQuery UI kalau digabungin berapa ini?
Kalau pakai jQuery UI kan pasti pakai jQuery juga.
Oh iya, jelas.
Cuma misalnya tingkat risikonya berarti jauh lebih tinggi
kalau pakai jQuery UI dan jQuery.
Dan dari sekian library, muncul satu framework angular.
Ini angular berapa ya, angular JS?
Angular JS itu yang lama deh kayaknya.
Satu ya, satu apa dua gitu.
Yang disebut angular JS itu yang paling pertama kayaknya deh.
Yang pertama ya.
Kalau sekarang angular aja nggak pakai JS ya.
Oke, kemudian ini ada percentage desktop page yang menggunakan webcomponent.
Custom element, baru 2%.
Masih sedikit, adaptinya masih kecil.
Bertahun-tahun ini naiknya seberapa ya?
Kayaknya naiknya 0,00.
Justru ini turun.
Tahun lalu 3%. Tahun ini jadi turun.
Bisa.
Entah kenapa.
Entah, mungkin ada framework yang lagi ngetrend kayak Astro
atau Quick dan lain-lain jadi orang jadi malah berhenti menggunakan.
Kemudian Shadow DOM masih ada hubungannya sama webcomponent juga.
Cukup kecil, cuman agak naik memang.
Shadow DOM ini adalah salah satu fitur yang bisa membuat isolated CSS styling.
Tahun lalu itu 0,37 naiknya nggak terlalu signifikan.
Kemudian yang pakai template nih, ini salah satu fitur yang saya suka juga nih.
Kalau misalkan kita nggak mau pakai DOM manipulation.
Ya, nggak perlu bikin function render.
Jadi kita bisa pakai template, tapi sayangnya adaptinya juga masih terlalu kecil.
Ternyata template pun ada di WebPiPiA ya, kirain cuma di view.
Saya suka pakai ini loh.
Iya, ini salah satu yang favorit juga ini.
Makanya kecil sekali.
Mungkin belum banyak yang tahu juga.
Topik, salah satu topik.
Bisa jadi topik juga.
Dapat dua topik malam ini kan?
Iya, dapat dua topik nih.
Kita lanjut sedikit lagi.
Kalau ini WebAssembly nggak terlalu banyak yang bisa di highlight.
Tapi paling hot nih, salah satu topik paling hot ya.
Iya, jadi yang saya highlight adalah bahasa yang digunakan untuk WebAssembly itu paling banyak yang mana.
Ternyata yang paling banyak adalah C, C++.
Yang kedua, dan perbedaannya cukup jauh.
Yang ketiga adalah C#.
Ya, nscripten dan lain-lain itu C ya, C++ ya.
Kemudian...
Karena, kayaknya ya mas ya.
Ini karena yang di-convert itu adalah library-library yang sudah ada.
Ya, betul sekali.
Di komen yang sudah ada kayak genu itu sudah, jadi tinggal di-convert.
Jadi nggak bikin baru.
Kayak AutoCAD itu dari C++.
Kemudian Adobe juga dari C++.
Di-legasi code, di-modifikasi sedikit, di-kompilasi dengan nscripten, jadilah aplikasi web gitu ya.
Oke ya, berarti maksudnya bisa nggak harus beneran nulis semua dari awal kan.
Justru itu jadi daya tariknya kan.
Bisa pakai WhatsApp di web.
Betul.
Karena kan ada banyak juga aplikasi-aplikasi yang berjalan misalkan kayak di DOS gitu kan.
Yang akhirnya terpaksa harus menggunakan DOS, padahal DOS sudah nggak di-support lagi gitu kan.
Jadi dengan adanya WebAssembly ini, dia bisa dijalankan di web gitu.
Dan lebih enak juga kita nggak tergantung kepada OS tertentu gitu.
Bisa diakses dari mana aja.
Contohnya kayak JPEG 2.0 PNG atau konverter-konverter itu kan sudah banyak komen line-nya.
Betul.
FMPEG itu yang buat konversi video itu sudah bisa diakses dari web juga kan.
Sudah ada alat darinya.
Mantap.
Mantap.
16% belum teridentifikasi bahasanya apa.
Assembly script itu adalah salah satu yang populer juga, 8,2%.
Kalau mau lebih lanjut, temen-temen bisa cek state of WebAssembly 22 survey.
Oh, ada itunya juga ya.
Ada survey-nya juga.
Dan yang menarik juga ini, saya kurang tahu terlalu dalam tentang WebAssembly sih.
Jadi fitur apa yang digunakan, yang paling tinggi adalah sign extension.
Ini apa, nggak tahu.
Ini apa?
Kita mesti cari bintang tamu ini.
Mesti cari featuring yang mendalami WebAssembly ini, seru kayaknya.
Betul.
Oke, dari saya cukup itu aja JavaScript dan WebAssembly.
Selanjutnya mungkin bisa dari Eka mau bahas tentang apa nih pertama.
Kayaknya bahas PWA sama capabilities aja deh.
PWA dulu aja.
PWA.
Jadi kalau untuk PWA, TLDR-nya atau ringkasannya, penggunaannya naik.
Cuma nggak secara signifikan.
Jadi cukup ajak tingkat kenaikannya.
Atau bisa dilihat, naik sih.
Naik cuma nggak ekstrim muah banget.
Tapi ya sisi positifnya adalah, ini trend yang cukup stabil.
Jadi kayak bukan.
Kan PWA itu mulai naik sejak 2019 ya.
Nah pergerakannya sampai dengan sekarang itu bukan cuma kayak yang trend bentar doang.
Abis itu udah dilupain.
Tapi positifnya ini adoptionnya tetap selalu naik secara trend.
Terus kalau yang di Almanak ini sih sebetulnya detail-detail penggunaan metodnya.
Secara umum sih ini yang paling banyak digunakan itu metod yang cukup basic ya.
Jadi kayak pertama kali life cycle-nya, install, activate, ya itu pasti kalau kita menggunakan service worker.
Nah ini nih bagian manifest ini seru juga.
Jadi manifest itu sering dianggap sebagai bagian dari PWA.
Nah ini bisa dibilang ya benar dan salah.
Maksudnya bukan salah gimana ya.
Jadi manifest itu sebetulnya web manifest itu ada spesifikasi sendiri.
Intinya itu sekedar file JSON yang memberi informasi tentang suatu aplikasi atau situs web.
Jadi sebetulnya kalopun kita nggak menggunakan service worker, nggak bisa add to home screen dan nggak bisa lain-lain.
Mau ada manifestnya ya bisa-bisa aja dan boleh-boleh aja.
Itu manifest begitu.
Jadi kalau gampangnya kalau kita ingin pakai service worker, kita pengen pakai capabilities PWA.
Memang harus ada manifestnya.
Tapi sebaliknya kalau mau pakai manifest ya pakai manifest aja.
Nggak harus pasang service worker dan lain-lain.
Nah di Alam Anak ini dia mengkomper macam-macam penggunaan baik dari service worker-nya maupun Alam Anak-nya.
Wait-wait, jadi PWA itu nggak mesti pakai service worker ya?
PWA harus ada service worker-nya kalau mau pakai add to home screen.
Oh oke, biar bisa jalan di background ini ya?
Ya buat casing, background sync dan lain-lain dia memang harus service worker.
Berarti kalau share-an minimalnya dia harus kalau di-visit harus kalau 404 ini apa kalau offline.
Home page-nya atau origin-nya harus tetap 200.
Oke, nggak ada itu.
Kira-kira begitu. Terus itu sih kalau di Alam Anak itu ada perbandingan detail-nya.
Nah ini scroll ke bawah sedikit mungkin.
Nah ini manifest properties, macam-macam ada display, ada apa?
Display itu untuk mengatur tampilan-tampilan seperti nama yang ditampilkan.
Kalau kita install namanya apa?
Terus ya termasuk background color full screen punya ya yang berurusan sama tampilan.
Terus soal icons, ukuran icons itu kalau kita ngikutin macam-macam versi browser lama itu variasi icons-nya banyak banget.
Nah sering kita bingung, cuma sekarang nih hasil survey, hasil Alam Anak ini menunjukkan bahwa icon yang dipakai
cuma ada dua size icon yang cukup major.
Ke bawah lagi sedikit.
Ini apa nih? Oh ini display ya tadi ya. Ada stand alone, ada full screen, yang paling banyak stand alone.
Kemudian icon-nya ya.
Nah itu kan sebenarnya variasi ukuran icon-nya banyak banget dan kadang kita tuh
mungkin overwhelmed yang aduh males banget kalau harus bikin, harus nge-generate.
Ada tools-nya tapi kan tetap setiap kita ganti icon, adjust icon, harus generate
belasan versi ukuran. Nah sebetulnya kalau untuk major browser yang baru itu dua icon,
dua ukuran icon cukup. Itu bisa, itu kelihatan banget kan tuh di bar chart-nya
192 sama 512 yang paling major. Kecuali kita memang punya user base yang pakai browser lama
variasi tertentu, misalnya Safari, Safari iOS 14 atau Safari iOS 13, ya itu beda kasus.
Nah terus ada lagi nih, manifest kategoris ke bawah lagi sedikit.
Nah ini ada hal menarik, jadi mereka si HTTP Almanak ini mengelompokan semua situs yang di-crawl.
Ada kategori-kategorinya ada shopping, news, dan lain-lain. Nah ini ada dua chart
terkait apa, penggunaan manifest dan penggunaan PWA.
Nah jadi jenis-jenis situs seperti apa atau web app seperti apa yang banyak menggunakan
teknologi PWA itu ada di shopping dan news yang paling banyak. Terus selain itu ya
ada bisnis, ada sosial, jadi menarik sih ini kita dapat gambaran teknologi ini
dipakai di situs jenis apa aja.
Hmm menarik, kalau service worker gak ada ya?
Ada tadi di atas.
Oh ada, maksudnya yang kayak gini tapi yang service worker gak ada ya?
Kayaknya masuknya di PWA tadi, yang atasnya.
Oh yang ini?
Iya, ini yang pakai service worker jadi apa bisa add to home screen.
Tapi bedanya sedikit sih, bedanya tipis, maksudnya antara yang manifest saja atau
yang manifest complete dengan service worker PWA itu kategori paling atas setap
shopping, news, dan bisnis. Jadi apa jenis aplikasi yang menggunakan itu.
News ya ternyata berita itu paling butuh apa, fungsionalitas PWA, news dan shopping.
Oke.
Nah terus ini nih soal advance capabilities, Fugu API.
Fugu API.
Jadi project Fugu itu, itu codename dari project yang dilakukan oleh Chromium
dan stakeholder terkait. Jadi ada dari Google Chrome, ada dari Microsoft,
terus ada dari seperti Intel, itu kan mereka gak bikin browser tapi bikin hardware-nya ya.
Mereka itu punya project yang memajukan atau mempropos standar web API
yang memiliki kapabilitas canggih, intinya yang kapabilitasnya menyamai
feature-feature native. Nah itu sering disebut dengan Fugu API.
Nah ini apa?
Fugu itu dari ikan Fugu kan?
Iya, ikan kebung.
Bukan, ikan buntal, ikan buntal.
Buntal, buntal.
Katanya belom pernah makan, katanya dagingnya enak, tapi kalau salah siapin, berencun.
Saya sudah pernah makan, sudah pernah.
Gak ada rasanya.
Gak ada rasanya?
Iya, kayak teksturnya aja gitu, rasanya kalau gak pakai sausnya gak ada rasa.
Oh, padahal bahaya ya, maksudnya apa? Saking enaknya, ya harus disiapkan.
Jadi yang menggunakan 8,8% di desktop ya, baru 8,8%.
Jadi project Fugu itu kan sebetulnya mencakup banyak banget API-nya
dari yang sudah lumayan established, major, sampai yang masih experimental.
Nah itu penggunaannya, itu 4, di situ ada 4 API yang sudah paling umum, paling banyak digunakan.
Itu angkanya web share di sekitar 8%, jadi not bad lah.
Terus sebenarnya ada bagian yang menarik tuh, di API push itu sebetulnya
originally bagian dari project Fugu.
Tapi kan sebetulnya semua feature-feature web API itu merupakan spesifikasi atau standar ya,
jadi bukan milik dalam arti patent atau hak miliknya siapapun.
Jadi apa, semua API itu bukan punya orang Chromium atau orang Google atau orang Microsoft,
jadi bisa diadopsi, gak tertutup kemungkinan diadopsi browser lain kalau dirasa perlu.
Dan di sini tahun ini kelihatan untuk pertama kalinya push API itu cukup naik,
salah satu alasannya karena Safari juga mengadopsi push API itu.
Jadi ternyata API dari project Fugu pun gak eksklusif, gak menutup kemungkinan,
suatu saat bisa diadopsi oleh browser lainnya, kalau memang dirasa relevan.
Intinya kan kalau sudah di-approved di konsorsium ya browser lain harus adopsi.
Walaupun gak tahu kapan ya.
Iya, walaupun gak tahu kapan.
Oh iya, kan kalau masih di WICG itu Working Group Specification in Progress itu kan dalam proses,
berarti kalau sudah dianggap stabil, ya suatu saat browser akan...
Tapi ya itu, bebas suka-suka mereka mau adopsi sekarang atau kapan-kapan.
- Betul. - Tapi sukses story-nya itu salah satunya push yang pertama kali masuk,
walaupun cuma 2% ya, karena mungkin banyak faktor.
Karena Chrome juga kan?
Safari juga sekarang.
Iya, maksudnya yang di Almanak ini kan Chrome aja kan?
Oh iya, betul-betul.
Jadi gak kelihatan tuh Safari, Firefox dan lain-lain, gak kelihatan.
Tapi kan itu mempush developer untuk, maksudnya developer jadi oke,
bisa dapat green light dari project manager atau client untuk nambahin...
Biasanya product owner lah yang itu ya.
Oke, ada lagi? Sudah?
Udah sih, sisanya baca-baca sendiri aja langsung di URL-nya.
Saya boleh ijin undur diri dulu, baterai saya sudah tinggal 10-12% lagi.
Maaf, gak ada colokan di sini, kalau gak sudah saya colokan nih.
Maaf, maaf.
Oke, kalau mau duluan silahkan.
Iya, mohon maaf ya, teman-teman semua.
Ini udah mau jam 9 juga emang.
Oh iya, ya udah 3 menit lagi deh, 3 menit lagi.
Serius, 3 menit lagi?
Kalau tiba-tiba ilang berarti mati.
Kalau tiba-tiba ilang berarti tiba-tiba mati ya.
Oke, siap kalau gitu. Lanjut ke capabilities ya kedua ya?
Ya, capabilities sebenarnya itu tadi sih.
Ini masih ada hubungannya kan?
Itu ringkasannya tadi, TLDR-nya tadi,
cuma kalau pengen lihat exactly perbandingan atau API-nya apa aja,
bisa dilihat di situ.
Ini agak berbeda dengan yang tadi ya.
Yang tadi kan ini yang udah major, udah diadopsi kan.
Kalau ini kan ada beberapa yang belum diadopsi juga kan.
Udah, cuma itu kecil. Udah, ini semua udah major.
Udah semua ya ini ya? Oh iya, web share API.
Atau homescreen sudah.
Ini detail-nya.
Mungkin ada beberapa teman-teman yang nggak nyadar gitu ya.
Kayak misalkan web share API.
Itu saya sering banget pakai, karena saya nggak pakai, misalkan Twitter ya.
Saya nggak pakai Twitter app, jadi saya pakainya web version Twitter di handphone.
Jadi kalau saya mau simpan bookmark atau mau simpan sebuah tweet yang menarik,
itu saya pakai web share API.
Disimpan ke telegram.
Nah, tapi harus di-check.
Karena hanya browser mobile yang punya web share API.
Desktop tidak punya.
Desktop tidak ada.
Jadi kalau dibuka di desktop, lo kok nggak ada?
Ya, memang belum ada. Jadi yang mobile.
Nah, itu bisa di-combine sama tadi itu dynamic import ya kan.
Mungkin kita tetap pakai library, entah library eksternal,
atau kita nulis sendiri buat bikin share pop-up ya.
Cuma kita nggak usah load itu dulu.
Siapa tahu kalau emang browser,
kalau emang si user pakai browser mobile yang support share API, ya udah bagus.
Nah, fallback-nya kalau nggak support, baru lazy load,
dynamic import si JavaScript buat share dialog gitu.
Jadi itu enak.
Sebelum kita tutup, saya punya satu pertanyaan.
Apa sih keuntungan kita, apa sih informasi yang kita bisa dapat dari sini untuk membantu kita?
Apa tujuannya kita mengetahui informasi dari Almanak ini?
Menurut teman-teman.
Mungkin nanti teman-teman yang lain juga bisa isi YouTube comment atau di slido.
Apa sih keuntungannya kita mengetahui Almanak ini?
Kenapa informasi ini?
Mungkin salah satunya mengetahui trend-nya ya, kecenderungannya kayak gimana.
Kecenderungan misalnya tadi apa, ternyata kalau sebelumnya kita,
mungkin kita gambling atau merasa gambling atau ragu-ragu adopsi PWA misalnya,
ternyata cukup banyak yang pakai PWA, berarti relatif aman lah.
Terus mungkin kita bisa, itu kan tadi yang positifnya ya.
Kalau yang negatifnya mungkin kita bisa cek room for improvement.
Misalnya tadi masih banyak website yang belum nge-load JavaScript secara asing.
Masih banyak yang render blocking.
Berarti kita harus memperhatikan itu di, mungkin misalnya kita kerja dalam tim
atau kita ngerjain codebase orang lain, kita bisa tahu hal-hal yang perlu diperhatikan.
Kesalahan umum kali ya, itu kan hal yang tadi kan cukup besar tuh
yang punya render blocking script sampai 71%, berarti kalau kita nge-handle orang lain.
Membuka wawasan kita lah berarti ya. Apa aja sih trend sekarang?
Yang sekarang tuh apa? Kita tewas website yang di posisi mana?
Jadi kita bisa tahu benchmark kita itu dimana gitu ya.
Apakah kita sudah yang udah jadi yang lebih baik dari rata-rata atau kita masih di bawah rata-rata?
Sama ini, jadi sumber konten.
Kita kan GDE Web kan salah satu tugas kita, salah satu job desk kita adalah untuk
memasarkan atau menyebarluaskan informasi-informasi ini kan.
Misalkan tadi dynamic import itu kok kecil sekali, web component itu kok kecil sekali gitu.
Jadi itu yang harus kita suarakan lagi, lebih sering lagi gitu.
Misalkan ngisi acara dimana gitu ya, kita bisa bahas ini misalkan kayak tadi,
oh ini masih banyak website-website di Indonesia atau di dunia bahkan
belum menggunakan script asing gitu.
- Script asing kok jadi enak ya script asing? - Script asingkronus gitu kan.
Padahal itu udah ada fitur udah cukup lama dan dampaknya kepada performa itu cukup tinggi gitu.
Jadi ya tugas kita sebenarnya buat menyebarkan lagi beritanya,
buat menyebarkan lagi buat orang-orang jadi lebih tahu gitu.
- Terus apa ya, kadang kalau kita bikin konten, kalau cuma nyebutin tentang API-nya,
tentang sinteks ya, tentang demo kayak contoh penggunaan yang kayak di dokumentasinya,
itu kan mungkin kurang menarik ya.
Cuma yaudah itu keren, flashy, new, trendy, cuman belum tentu relevan sama kehidupan nyata.
Nah dari alamanak ini kan kita bisa dapat konteks yang lebih baik kan.
Misalnya tadi contoh gampangnya PWA dipakai di website jenis apa aja sih,
kita punya data real buat ngedukung statement atau konten kita.
- Bisa ini juga bisa buat ke apa, ngajuin ke pemegang apa ya, placeholder.
- Product owner atau project lead atau apapun itu.
- Stakeholder atau pemegang keputusan, misalkan keputusan bisnis gitu ya.
- Kita mau maju kemana gitu ya?
- Iya, ngapain sih kita, website kita pakai PWA, website kita kan website berita misalkan gitu kan.
Nggak perlu PWA, coba deh lihat.
- Kita komen sama BigQuery yang diberhasilkan tadi, kompetitor kita pakai semua ini.
- Ibaratnya kita bisa membantu kita mengambil keputusan juga kayaknya,
disupport dengan data yang ada.
- Iya, kalau cuman bilang kita harus pakai PWA nih, kenapa emang?
Kita nggak bisa support dengan datanya jadi kurang menarik kan.
Tapi kalau misalkan kita bilang 90% website berita di luar sana sudah pakai PWA.
- Semua kompetitor kita sudah pakai PWA.
- Oke, saya harus kita...
- Ya udah, kita pamit aja.
- Atau tinggal 9%.
- Kita juga sudah satu jam, jadi mungkin untuk malam ini kita cukupkan dulu aja.
Terima kasih buat teman-teman, ada pertanyaan-pertanyaan yang belum terjawab,
nanti akan kita recap dan kita masukkan ke Slido.
Mungkin kita akan jawab di episode-episode berikutnya ya.
- Mungkin next time kita bisa bahas kenapa shadow dome konsepnya gimana Pak Risa.
- Ya, buat komponen dan shadow dome akan kita bahas.
- Nah web komponen, udah ada materinya kan tuh.
- Ya, jadi kita juga ngumpulin materi.
Oke, terima kasih buat semuanya yang sudah hadir.
Terima kasih buat Ivan, terima kasih buat Eka.
- Sukses acara wordcam-nya besok, kita ketemu minggu depannya.
- Thank you, bye.
Deskripsi asli dari YouTube
Yuk mari kita diskusi dan ngobrol ngalor-ngidul tentang dunia web. Agar tetap up-to-date dengan teknologi web terkini. Topik, tautan dan pertanyaan menarik bisa dilayangkan ke https://bit.ly/ngobrolinweb Topik pembahasan: - https://almanac.httparchive.org/en/2022/javascript - https://almanac.httparchive.org/en/2022/webassembly - Datanya dari mana? seberapa akurat dan apakah representatif? - https://github.com/HTTPArchive/httparchive.org/blob/main/docs/gettingstarted_bigquery.md - ht Kunjungi https://ngobrol.in untuk catatan, tautan dan informasi topik lainnya.
Episode Terkait
9 Agu 2023
Ngobrolin URL
Episode ini bagian dari niat baru mereka: menyelipkan topik yang benar-benar mendasar setidaknya sebulan sekali, alih-al...
1 Okt 2025
File Upload Strategy
Episode ini membahas berbagai strategi upload file dalam pengembangan aplikasi web. Eka dan Ivan berdiskusi tentang trad...
5 Jul 2023
Ngobrolin I/O Extended
Setelah beberapa episode membahas pengumuman Google I/O dari jauh, kali ini ceritanya datang dari orang yang benar-benar...
Suka episode ini?
Episode baru setiap Selasa malam. Dengarkan lewat YouTube, Spotify, atau feed podcast favoritmu.
Memuat komentar dari GitHub Discussions...
Jika komentar tidak muncul karena ekstensi privasi / adblocker, kamu bisa berdiskusi langsung di GitHub Discussions .