Perkembangan Teknologi WEB dari httparchive - Ngobrolin WEB Ep7

1:4440 persen.

1:46Tapi dari survey, bukan dari survey, maksudnya.

1:50Dari web survey yang dilakukan itu dari strategi, Pak.

1:55Top 1 million web itu, Pak, 41 persen menggunakan WordPress.

2:01Oh, wow.

2:03Gede sekali ya.

2:05Ya, WordPress ini kan salah satu killer feature-nya ini ya.

2:08Bisa dibilang killer feature-nya PHP kan.

2:11Dan CMS yang paling populer lah ya.

2:14Kalau jawab dulu, kita ada jumlah, ada Drupal.

2:20Drupal juga masih eksis ya, masih banyak juga yang pakai.

2:24Ada yang tahu nggak sebelum jumlah itu apa?

2:28Sebelum apa ya?

2:30Ya, deket-tek aja.

2:32Ngetek ATML manual. Enggak ya?

2:34Is it Mambo?

2:36Mambo.

2:38Mambo ganti jadi jumlah kan kalau nggak salah ya?

2:41Gue pakai CMS-nya mulainya dari Mambo.

2:45Dari Mambo.

2:47Tahun umur deh gue.

2:49Kalau untuk e-commerce-nya, gue pakainya OS Commerce.

2:55OS Commerce.

2:57Iya, baru diporking jadi Zencar.

3:02Oh, jadi Zencar.

3:04Tapi yang dari WordPress sendiri juga ada kan.

3:08Ya namanya, e-commerce kan itu WordPress ya.

3:11Ngefreeze kan Ivan kan.

3:14Kita remove dulu ya.

3:17Jadi Ivan boleh join lagi nanti kalau internetnya udah oke.

3:24Jadi malam hari ini, topiknya apa nih kak?

3:28Topiknya adalah web almanak.

3:32Jadi kita mau bahas tentang state of the web ya.

3:36State of the web 2022, perkembangan dunia web itu seperti apa dari 2021 sampai tahun ini, 2022.

3:46Tapi bukan berdasarkan survey,

3:50melainkan berdasarkan statistik data yang dikumpulkan dari pengguna-pengguna browser Chrome.

4:02Khusus browser Chrome.

4:04Bukan Chromium, Microsoft Edge, atau Opera, atau anak-anaknya Chromium, enggak.

4:10Jadi dia hanya Chrome aja yang warnanya merah kuning hijau.

4:15Dan juga bukan dari Firefox dan bukan dari Safari.

4:19Jadi yang ada statistiknya itu dari Chrome aja.

4:26Terus begitu datanya dikumpulkan, kemudian disimpan ke satu sumber data dengan BigQuery.

4:36Kemudian dari situ baru bisa didapatkan di analisa.

4:42Jadi mungkin kita bisa mulai dulu dari Eka.

4:47Ini bahas tentang KTTP Archive itu apa dan bagaimana cara data dikumpulkan.

4:54Jadi kan tadi sudah dibahas sekilas tentang web almanak.

5:01Yang bakal banyak kita bahas malam ini sebetulnya hasil dari web almanak untuk tahun 2022.

5:10Tapi web almanak itu datanya dari mana?

5:13Dari project yang namanya HTTP Archive.

5:17Nah, HTTP Archive itu project yang sudah berjalan selama berapa ya? Dari tahun 2010 atau berapa punya?

5:25Sudah berjalan selama bertahun-tahun.

5:28Eh, sebelumnya deh.

5:31Tapi almanaknya 2019, disini datanya.

5:36Jadi HTTP Archive itu project parent-nya.

5:39Jadi dia mengumpulkan seluruh URL yang tadi dibahas itu, URL yang diakses oleh pengguna Chrome.

5:46Nah, itu bagian dari project yang namanya CRUX, Chrome User Experience.

5:53By default, kalau kita pakai Chrome, itu URL yang kita akses itu dikirim.

6:02Tapi pastinya di-anonymize ya, nggak include apa IP address kita atau apa.

6:09Jadi cuma general region, mungkin dari Indonesia, device-nya seperti apa, URL yang diakses itu apa,

6:17itu dikirim ke Archive mereka.

6:21Di preferences, kalau kita nggak bersedia, ya bisa off-out. Cuma ya, maksudnya itu...

6:27Kayaknya waktu install Chrome pertama kali, ada ininya kok.

6:32Oh, ada checkbox-nya ya?

6:34Ada consent-nya kok, ada inform consent-nya. Dan by decode memang enable by decode.

6:40Tanyaannya, apakah kalian membacanya?

6:43Oke-oke aja.

6:45Jangan, oke-oke saja.

6:47Nah, itu data URL-nya kan dikumpulin sama si HTTP Archive ini,

6:53yaitu tadi URL-nya itu masing-masing URL setiap tanggal 1 setiap bulannya,

7:00itu mereka running sejumlah tes. Bisa tolong buka halaman yang metodologi.

7:05Metodologi, siap.

7:08Nah, itu ada tools-nya.

7:11Jadi mereka si pihak HTTP Archive ini dengan bekal URL-URL yang dikirim dari Chrome UX study,

7:20Chrome study, mereka running sejumlah tes pakai beberapa tools-nya.

7:25Ada tool di situ kan, ada web page test, ada Lighthouse, dan lain-lain.

7:30Terus di-store di database yang namanya BigQuery.

7:35Nah, BigQuery-nya.

7:37Google BigQuery ya, maksudnya ya?

7:40Ya, Google BigQuery.

7:42GCP, GCP.

7:43Dan itu bisa, ya betul, GCP bisa diakses dari Google Cloud Platform oleh siapapun,

7:50bukan cuma si pihak siapa, HTTP Archive atau yang bikin Almanak aja, kita semua bisa, tapi bayar.

7:58Kita juga pernah eksplor ya, tapi abis itu menyerah. Susah.

8:02Ya, jadi emang itu kan bayarnya berdasarkan usage ya.

8:06Jadi ada free tier-nya, buat kalau yang cuma pengen iseng coba-coba tuh,

8:10ada kan contoh dataset-nya itu, ya semacam SQL query lah.

8:14Jadi kalau penggunaan kita per bulan di bawah 1 terabyte, masih free.

8:19Nah, cuma ini kan datanya tuh banyak banget, dan ekstrim lah.

8:25Maksudnya ini data yang di-store itu, test-nya aja banyak, tools-nya banyak, hal-hal yang apa,

8:31metric-metric yang di analisa itu sangat banyak.

8:35Kalau misalnya kita harus nulis SQL command untuk mendapatkan data yang kita mau,

8:44kalau belum terbiasa itu sulit.

8:46Jadi kalau dari segi data, memang datanya tersedia, bisa diakses,

8:52baik secara gratis, maupun kalau mau maksimal, ya berbayar.

8:56Tapi kan kita belum tentu bisa langsung membaca, apa, cari data yang kita mau,

9:03pilih kolom-kolom apa aja yang datanya relevan, dan apa,

9:08menafsirkan lah ya, meninterpretasi datanya maksudnya seperti apa, itu kan agak sulit.

9:16Nah, makanya sekitar 3 tahun kayaknya, 3 tahun terakhir ini,

9:21mereka dari HTTP Archive itu membuat project state of the web lah, almanak tahunan.

9:29Jadi ini yang paling baru yang mau kita bahas ini, yang tahun 2022.

9:33Tahun lalu ada 2021, dimana mereka itu ternyata mereka bekerja sama dengan ekspert di masing-masing bidang.

9:43Jadi ada CSS, JavaScript, atau mungkin Accessibility, dan lain-lain,

9:49dan mereka juga merekrut banyak kontributor sukarela.

9:52Ternyata itu ada, apa sih, bisa volunteer kalau kita mau.

9:56Jadi ikut dalam tim yang menafsirkan dan mendiskusikan data-data atau matrix apa aja yang mau diolah.

10:07Dan itu hasil olah data mereka itu dipresentasikan dalam almanak tahunan ini.

10:14Jadi kita bisa relatif lebih mudah membaca atau menafsirkan data-datanya.

10:20Kayak misalnya CSS nih contoh, ya contoh random aja. Mungkin ada hal-hal yang relevan

10:27seperti media query atau support query, atau misalnya untuk accessibility, prefer reduced motion.

10:35Itu kan kalau cuma lihat dari database, itu sekadar hanya satu dari banyak kolom yang ada.

10:45Tapi kan di almanak ini di analisa dari kacamata misalnya accessibility.

10:50Jadi kita lebih mudah menafsirkan data-data itu, dan yang paling enak sih dibawahnya ada contoh query-nya.

10:58Jadi kalau kita mau pakai tinggal kopas aja.

11:01- Oh iya, mana ya? - Nanti kalau di bagian-bagian kayak CSS.

11:06Di bawahnya ada contoh. - Di setiap kategorinya ya.

11:10Ada dua hal menarik ya di almanak ini yang saya perhatikan.

11:16Yang pertama adalah kalau misalkan survei-survei kayak dari Stack Overflow,

11:23atau State of JS, atau State of CSS dan lain-lain itu kan survei kan.

11:28Jadi orang yang kenal sama... - Pembuat survei.

11:33Yang pas kebetulan baca. - Ya, friend of friend gitu ya, yang kebetulan baca.

11:40Dan kemudian ada keinginan untuk menulis survei, atau mengisi survei-nya.

11:43Dan isi survei-nya juga belum tentu akurat kan.

11:45Dia bisa aja berbohong dalam tanda kutip gitu.

11:47"Ah nggak mau isi yang ini, isinya yang itu." Bisa aja gitu kan.

11:52Tapi kalau dari web almanak ini lebih jujur karena...

12:00Ya, emang URL yang diakses.

12:03Ini lebih tepatnya, lebih ada field report, satu field report, satu lagi survei report.

12:09Terbeda ya. - Ya, jadi kadang-kadang ada misleading juga.

12:15Kalau misalkan State of JS gitu kan, dia memang yang bikin survei-nya itu ya di lingkungannya React.

12:21Makanya React menang. Walaupun memang secara jujur, secara umum memang React paling atas.

12:26Cuman kan teman-teman dia juga banyak pakainya di lingkungan dia pakai React.

12:30Karena itu jadi agak bias, bukan misleading ya, agak bias gitu lah kira-kira.

12:35Sementara kalau ini kayaknya lebih netral lah.

12:38Ya, nggak netral juga karena cuma Chrome aja, nggak browser yang lain gitu.

12:42Tapi lebih representatif kali ya.

12:47Iya, browser lain kan nggak meliputan gitu.

12:50Dan juga data ini juga sebenarnya open door buat teman-teman jika ingin melihatnya secara langsung.

12:57Saya bisa demo-in sedikit kalau teman-teman pengen lihat.

13:00Wah, boleh dong, coba-coba.

13:04Kebetulan saya lagi mainan BigQuery.

13:09Kita waktu itu pernah minta diajarin sama Johan ya bikinin BigQuery, main-main BigQuery.

13:17Wow, oke. Jadi ini saya punya akun Google Cloud.

13:26Di Zoom dong, di Zoom, nggak kelihatan.

13:29Gak bisa ya?

13:32Oke, bisa aja.

13:33Oke, cukup, cukup.

13:34Jadi saya punya akun di Google BigQuery.

13:39Jadi ada 3 data yang open.

13:42Satu dari HTTP Archive, saya lupa efadu query ini apa,

13:48tetapi ini kelihatannya dari troller untuk beberapa situs-situs besar seperti Stack Overflow,

13:55Hacker News, GitHub, Wikipedia, segala macam.

13:59Dan satu lagi, Chrome UX Report.

14:02Oke, kita bahas sedikit.

14:05Kalau misal dari HTTP Archive, ini data-data yang ada.

14:08Jadi contohnya kalau mau lihat, dari 2016 nggak ada data ini.

14:14Contoh kalau mau lihat data dari 2021 aja ya, mau bala ya.

14:25Kita bisa preview datanya apa yang dipumpulkan.

14:31Oke, contohnya seperti ini.

14:34Timewise.net dan data yang dikirimkan itu apa aja.

14:40On content loaded, blablabla.

14:43Terus nanti dari data ini ada yang proses ke data-data yang lebih kecil lainnya.

14:49Contohnya mau ke data yang diproses itu jadi, contohnya data almanak nih.

14:59Yang para mereka mana aja yang sudah jumpstack. Jadi contohnya kalau yang begini itu data table,

15:06kalau yang begini itu sudah view.

15:08Kalau tau apa ya, jadi view lah.

15:13Data table ya table, kalau yang view itu sudah kaya difilter dari data set yang besar.

15:19Udah ada kondisinya, udah dimodifikasi.

15:23Betul, jadi kita bisa query ke view aja.

15:25Jadi kita lihat nih kalau tahun 2022, clientnya desktop, terus website-nya ini,

15:32kira-kira response-nya gini, kelihatan nih average LCP, fast LCP, CLS, blablabla sudah kelihatan.

15:42Ini juga, ini data almanak ya, itu juga bisa di cross-reference.

15:47Saya dulu pernah bermain di cross-reference antara datang dari harta TVR.

15:51Kita selalu punya pertanyaan, bagaimana sih pertumbuhan pengguna jamstack di Indonesia

16:02dari tahun ke tahun, yang khususnya dari Indonesia dari tahun ke tahun.

16:05Nah, maksudnya kita bisa dari query dari data HTTPR5,

16:11di query ke Chrome UX Report, misalnya dari country-nya Indonesia.

16:15Karena kita pengen berapa data dari Indonesia, data country ID soalnya.

16:20Sudah difilter nih berdasarkan country. Ini agak skew datanya ya,

16:26karena situs dari Indonesia itu apa gitu ya, berdasarkan apa.

16:30Kalau di sini itu, situs dari Indonesia itu adalah situs yang di-visit dari Indonesia.

16:36Jadi bisa jadi situs luar negeri tapi di-visit dari Indonesia.

16:40Oh, bukan server yang serve si website-nya sendiri ya?

16:44Susah, susah, susah itu.

16:46Oh ya, nggak ada datanya. Gimana?

16:50Contohnya, WhatsApp kan bukan dari Indonesia kan,

16:54tetapi di-visit dari Indonesia, contohnya seperti itu.

16:58Jadi, bisa teman-teman bisa menquery data yang kayak Google,

17:03terus bisa dilihat performance-nya seperti apa.

17:07Jadi, kalau mau lihat kompetitor atau teman-teman mau lihat kompetitor,

17:11bisa. Bagaimana sih performa kompetitor itu dari sini gimana, itu juga bisa.

17:18Last thing, jadi antara data set ini pun,

17:23yang penting teman-teman ingat ya, ini berbayar ya,

17:25jadi kalau di running query-nya, dia berbayar sesuai dengan total execution time.

17:32Ya, jadi hati-hati dengan query-nya.

17:35Jangan lupa pakai limit ya.

17:36Iya, jangan lupa pakai limit.

17:38Kalau udah benar, baru limitnya di...

17:40Tapi kalau dibawah 1 terabyte, masih free kan ya, ada free tier-nya?

17:44Masih ada, saya lupa free tier-nya, tetapi...

17:461 terabyte sebulan.

17:48Jadi, hati-hati bagi teman-teman yang mau bermain,

17:52karena kita GDI, kita tuh dapat kupon.

17:55Jadi, kita bisa eksplorasi.

17:57300 solar ya.

17:59Iya, jadi bisa eksplorasi, jadi data Reddit,

18:03bisa kita lihat juga di sini, Toktoin di Reddit itu.

18:06Silahkan. Nah, jadi soal transparansi data,

18:12apa yang dikumpulkan sama RTPP Archive, Chrome UX Report, ada semua di sini.

18:16Ada semua.

18:17Jadi, kalau misalkan kita mau lihat gitu,

18:21website yang paling, performanya paling bagus yang diakses dari Indonesia, bisa ya?

18:27Bisa.

18:29Tinggal nanti pinter-pinter bermain SQL query,

18:33nanti saya udah kehilangan, kehilangan saya punya query gak tahu lagi dimana ya.

18:40Kalau gak saya bisa tunjukin bagaimana query yang kemarin saya sudah pernah coba.

18:44Mengatahu kalau gak tahu itu, saya mencari pertumbuhan situs WordPress

18:49yang dikundingi dari Indonesia dari tahun ke tahun.

18:54Nah, itu saya pernah bikin itu datanya.

18:56Dan itu perkembangannya sangat pesat di Indonesia.

18:58Jadi, apa namanya?

19:02Bisa menggunakan fitur ini jika ingin melakukan saya survei-survei atau...

19:08Analisa.

19:10Analisa dengan metodologi data-data science.

19:14Bisa bikin semacam state of web atau state of JS versi lokal gitu kan.

19:21Betul.

19:22Jadi misalkan kita pengen tahu apakah library yang banyak digunakan, yang diakses apa?

19:28Kan kita bisa cek website yang berbahasa Indonesia misalkan.

19:32Ada language-nya ID gitu, Indonesia.

19:35Terus habis itu dicek dia pakai library apa.

19:37Atau ukuran halamannya totalnya berapa gitu.

19:43Atau FTP-nya berapa. Core Web Vitals-nya berapa gitu ya.

19:49Bisa kayak gitu ya.

19:51Betul, betul.

19:53Seru sih ya.

19:54Cuma mungkin ini ada kafiatnya sedikit ya soal akurasi.

19:58Tadi kalau URL-nya kan emang karena auto-report.

20:02Jadi nggak ada bias-bias yang kayak di survei-survei yang survei manual kita bahas tadi.

20:09Jadi kalau dari segi URL sih emang cukup representatif untuk user Chrome.

20:15Jadi pengguna Chrome kan cukup mayoritas ya.

20:18Jadi secara statistik mungkin kita bisa dapat gambaran besarnya.

20:23Tapi ini kan dia pakai walaupun URL-nya, field URL.

20:29Matrix-nya kan berasal dari lab tools ya.

20:33Web page test dari Lighthouse dan lain-lain.

20:37Dan di metodologinya ada penjelasannya tuh.

20:41Bahwa mereka emulate dengan kondisi cash kosong dan lock out.

20:46Namanya ya mereka nge-crawl process itu dengan cara atau metodologi lab tools.

20:54Jadi nggak 100% mewakili apa yang dialami user.

20:59Karena user mungkin speed-nya berbeda-beda.

21:02Ada cash, mungkin kalau login experience-nya beda ya.

21:07Kadang kan ada aplikasi yang kalau landing page memang status.

21:11Status dan server render misalnya.

21:13Karena kan bisa berubah, tapi begitu kita login itu fungsinya semua misalnya client render.

21:19Pakai JavaScript yang mungkin dari segi thread blocking-nya, total blocking time-nya.

21:26Bisa ada perbedaan karena ya emang usage-nya beda.

21:30Jadi nggak 100% mewakili usage.

21:35Sama untuk library yang client-side, itu kan mereka pakai weaponizer ya.

21:42Tools yang bernama weaponizer tuh ada di halaman metodologi.

21:48Itu tuh nggak semua library JavaScript bisa dideteksi dengan akurat oleh tooling itu.

21:57Jadi kayak contohnya React itu lebih mudah dideteksi karena kan dia ada global-nya kan, ada runtime-nya.

22:04Tentara kayak swell dan mungkin view ada nggak sih? Ya view atau mungkin solid atau lain-lain. Yang ya swell lah.

22:12Dia kan nggak ada runtime-nya ya. Jadi maksudnya kalau kita punya aplikasi atau situs web yang pakai swell,

22:19begitu udah dibuild, ya swell-nya ilang. Itu jadi JavaScript biasa aja.

22:24Jadi itu solid dideteksi oleh tooling seperti weaponizer tadi.

22:31Terus kalau WordPress kan, kalau CMS seperti WordPress itu bukan lebih mudah dideteksi.

22:40Sedangkan kalau yang pure HTML-based, misalnya 11t atau apalah, kan 11t atau Hugo kan dia generate pure HTML.

22:50Ya terus gimana? Itu kan nggak ada jejaknya. Gak bisa di data.

22:55Jadi namanya statistik itu kan nggak bisa presisi banget. Cuma kita tetap dapat gambaran besarnya aja.

23:06Oke. Nah, dari web Almanac ini kan ada beberapa kategori-kategorinya ya. Ada banyak ya.

23:16Banyak-banyak banget. Di table content-nya ini juga kan ada CSS, ada JavaScript, markup, font, media, web assembly,

23:26sampe PWA dan lain-lain. CMS juga ada. Ada banyak sekali. Dan malam hari ini kita akan bahas sedikit-sedikit ya.

23:34Sedikit aja. Mungkin cukup kalau 2-3 jam.

23:38Kita mulai dari JavaScript dulu ya. Kita mulai dari JavaScript. Yang menarik dari JavaScript.

23:44Nah, ini yang bisa saya lihat ada ini apa, dari tahun lalu dibandingkan tahun lalu sama tahun ini,

23:53ada pertumbuhan yang cukup, apa ya, cukup lumayan untuk jumlah JavaScript yang di apa ya,

24:04di daca, di browser. Ada sekitar 8%. Kemudian untuk di desktop 10%. Jadi nambah.

24:14JavaScript-nya yang tadi kita lihat ada website yang nggak ada JavaScript, sekarang nambah.

24:18Kemudian yang menarik lagi, gimana ya, nah ini. 17% pengguna Chrome itu membuka website yang menggunakan Webpack

24:33sebagai bundler-nya. Ini lagi seru karena si Versel baru ngeluarin Turbo Pack juga kan?

24:40- Turbo Pack. Yang buat sama. - Yang buat sama.

24:45- Ini trend banget yang bikin Note, bikin Deno. - Iya.

24:48Nah, ini yang bikin Webpack. Pas Webpack ada lambat, dia bikin Turbo Pack.

24:53Iya. Ini juga, ya, Turbo Pack di last belum masuk doang kan. Dia baru mulai kan.

24:59Jadi mungkin tahun depan kita akan lihat apakah pengguna Webpack semakin menurun atau gimana, kita nggak tahu.

25:05Kemudian, secara apa ya, agak di luar perkiraan, bundler yang populer kedua adalah ternyata Parcel.

25:16Wow. Parcel ini sebenarnya awalnya ya, berawal dari Webpack yang tidak perlu dikonfig.

25:27Abis itu dia akhirnya bikin bundler sendiri akhirnya. Kalau nggak salah ya.

25:32Dulu awal-awal Parcel 1 itu kalau nggak salah itu. Dia Webpack tapi dia nggak perlu dikonfigurasi.

25:38Sama seperti Veed sebenarnya. Cuman kalau Veed kan kita harus itu kan, define kan.

25:44Oh, saya mau react dan typescript gitu kan. Ada menu-nya kan.

25:48Kalau Parcel itu dia bisa auto-detect kalau nggak salah.

25:52Ini cukup seru juga karena adopsinya lumayan naik dari 1,2 ke 1,9.

26:03Tidak terlalu signifikan tapi untuk ukuran Parcel yang tidak banyak orang dengar ini lumayan sih.

26:09Kemudian transpiler ya masih bubble lah ya.

26:12Kemudian nah ini untuk beberapa cara memanggil JavaScript gitu ya. Ada yang menggunakan async.

26:22Ada yang menggunakan devr. Ada yang pakai module. Atau ada yang no module.

26:28Ini script, text script kemudian spasi type sama dengan module itu digunakan

26:35kalau teman-teman mau pakai sintaks yang import bla bla bla.

26:39Kita bahas sedikit pas bahas Veed Convert itu ya episode lalu.

26:47Jadi import itu sebenarnya sudah didukung oleh browser nggak perlu pakai WP.

26:55Belum semua loh.

26:56Belum semua. Hampir ya hampir.

26:58Jadi kalau teman-teman mau pakai import.

27:00Maksudnya browser yang lama ya.

27:02Browser yang lama. Betul. Browser modern yang sudah up to date automatis update seperti Chrome, Edge, atau Firefox, Safari mungkin itu udah bisa.

27:12Jadi tinggal tambahkan aja spasi type sama dengan module itu udah bisa support import.

27:18Jadi nggak perlu pakai.

27:19Ya browser keluaran 2 tahun terakhir lah ya.

27:21Keliatannya mulai apa? Mulai major.

27:24Ya dan ada juga cara pemanggilan yang asingkranus supaya nggak blocking ya kalau nggak salah ya.

27:32Ya betul.

27:33Supaya nggak blocking.

27:34Kalau devor ini apa devor?

27:35Di load setelah domp content load selesai semua selesai.

27:39Di download domp content load dia baru jadi di download ditunda sampai selesai domp.

27:46Sedangkan kalau asing seselesainya dia ya?

27:49Seselesainya dia dipanggil.

27:53Dan sudah selesai di download baru dia di expect.

27:57Nah sebenarnya asing dan devor kalau dipakai bersamaan itu salah kan ya.

28:01Maksudnya devornya nggak berlaku asingnya kan yang menang.

28:06Nggak boleh dipakai dua-duanya kan.

28:08Tepatnya boleh aja tapi devornya nggak rusak.

28:13Cuma buat apa?

28:15Yang jalan asingnya doang katanya kalau dipakai dua-duanya.

28:19Kalau scriptnya berbeda yang satu dipakai asing yang satu dipakai devor karena tidak terlalu perlu.

28:24Misalkan analytics kan butuhnya terakhir ya.

28:29Nggak perlu di awal ya.

28:30Tergantung analyticsnya ya.

28:32Misalkan kayak itu lah counter lah.

28:35Counter web page counter gitu.

28:38Counternya nambah gitu kan.

28:40Itu kan bisa terakhir gitu kan.

28:42Atau misalkan mau load JavaScript untuk komentar.

28:46Yang pastikan artikelnya harus muncul dulu dong.

28:49Baru komentarnya ada gitu kan.

28:52Kalau saya malah lebih ekstrim lagi.

28:55Hanya load JavaScript hanya saat dibutuhkan.

28:59Oke itu gimana caranya?

29:01Jadi island architecture.

29:06Atau kalau mau manual pakai intersection observer.

29:13Misalnya komen kan biasanya jauh di bawah ya.

29:18Sedangkan buat apa dia di load saat di atas.

29:22Meskipun kita tunda buat apa dia di load di atas.

29:24User yang aja belum scroll sampai ke bawah.

29:27Belum tentu dia tertarik untuk komen dan belum tentu dia selesai membaca terus dia mau komen gitu ya.

29:32Iya dan bisa-bisa mungkin pakai intersection observer.

29:37Misalnya sampai kayak 300 pixel sebelum komen baru scriptnya baru di request.

29:46Request dulu, running, baru dia di render.

29:50Jadi hemat banyak kan.

29:53Contohnya kalau kita di restoran.

29:57Kita nggak akan mungkin juga, kan ada juga teknik yang kalau kita mau order dessert.

30:08Makanan pencuci mulut ya setelah selesai makan dong harusnya.

30:13Jangan waktu makan.

30:16Kalau pesen minum, minumnya duluan sampai.

30:20Minumnya manis-manis lagi kan.

30:24Jadi hilang selera makan kita ada keburu minum.

30:29Oke, anyway.

30:34Jadi si asing ini sudah lumayan banyak orang yang tahu.

30:40Jadi sudah banyak dipakai.

30:42Ada sekitar 76% web mobile itu menggunakan script dengan asing.

30:48Karena supaya nggak render blocking, terutama bisa meningkatkan skor dari performance juga.

30:56Core white vital.

30:58Betul core white vital.

30:59Kemudian, tapi si Diver ini yang masih belum terlalu banyak dipakai.

31:06Kemudian apa lagi yang menarik?

31:11Kita lihat lagi.

31:12Ini nggak semua ya.

31:13Kamu bisa baca langsung dari almanac.http.archive.org ya.

31:18Kalau mau detailnya.

31:19Tapi di sini kita highlight yang menarik-menarik aja.

31:22Yang menurut kita menarik ya.

31:24Kemudian ini adalah percentage.

31:28Percentase.

31:30Aplikasi mobile atau halaman web mobile.

31:34Yang masih ada render blocking script.

31:37Yang tidak menggunakan asing.

31:39Tinggi 77%.

31:41Jadi masih banyak yang belum terlalu dioptimasi.

31:44Terutama untuk mobile page.

31:46Masih scriptnya masih di-head dan belum menggunakan asing.

31:51Belum di-referensi kan?

31:53Yes.

31:54Bisa jadi topic.

31:56Topic.

31:57Bisa, bisa.

31:59Boleh, boleh, boleh.

32:01Kemudian dynamic import juga salah satu fitur yang menarik.

32:05Dan masih belum banyak orang yang tahu.

32:07Ternyata udah ya tapi ya.

32:09Sudah, sudah.

32:11Sudah ada.

32:12Sudah ada.

32:13Bedanya dengan static import apa?

32:15Static bedanya adalah kalau dynamic import dia hanya di-load ketika dibutuhkan.

32:20Jadi kalau memudahkan untuk chunk JavaScript.

32:23Kan JavaScript code kita kan enggak.

32:25Kalau misalkan ukurannya besar kan dipotong-potong ya.

32:28Jadi dengan menggunakan dynamic import.

32:30Ya.

32:31Lebih apa ya.

32:32Lebih efektif lah gitu penggunaannya.

32:34Dan hanya enggak sampai setengah persen dari pengguna yang mengakses website dengan fitur dynamic import.

32:45Mungkin karena juga masih baru ya.

32:47Untuk mobile 0,34 tapi untuk desktop 0,41.

32:50Nggak beda jauh.

32:52Terus web worker juga salah satu fitur yang lumayan menarik.

32:56Karena dia bisa dijalankan dengan thread yang berbeda.

33:01Jadi asingkronus.

33:02Jadi main thread ya.

33:04Ya.

33:05Khusus untuk pekerjaan-pekerjaan tidak ada hubungannya sama manipulation DOM.

33:09Memakses DOM dan lain-lain.

33:11Apa sih maksudnya?

33:12Maca file.

33:14Ambil data dan lain-lain itu bisa dikerjakan oleh web worker.

33:20Ini naiknya berapa nih dari tahun lalu?

33:22Angka statistik web worker.

33:2412 persen ini naiknya enggak ada ya.

33:28Kayaknya tahun lalu belum ini deh.

33:30Belum rilis.

33:34Sekarang kan mungkin ngetrend salah satunya karena ada party town ya.

33:39Yang lagi ke hype.

33:41Jadi mungkin mulai public adoptionnya mulai tinggi lah.

33:45Ya enggak harus dari party town.

33:47Cuma orang jadi tahu bahwa oh ya bisa kayak gitu.

33:51Ini ada kasus saya pakai web worker ini.

33:55Untuk ini apa namanya?

33:58Request data di background.

34:00Saya pakai ini juga.

34:02Jadi di project yang saya itu.

34:04Misalnya setelah loading, loading setelah loading pertama.

34:10Saya tahu di bagian bawah itu ada statistik.

34:12Ada data, data endpoint yang harus saya load.

34:16Tapi enggak saya load dari, enggak saya load via.

34:21Main thread.

34:23Main thread.

34:24Karena saya tahu data itu enggak penting-penting amat di load.

34:26Karena data cukup gede.

34:28Dan harus diproses.

34:30Jadi saya requestnya via web worker.

34:32Saya via web worker sudah sampai.

34:34Terus saya simpen di local storage.

34:38Jadi waktu scrolling sampai ke komponen tersebut.

34:44Saya cuma tinggal load dari local storage.

34:46Enggak perlu request.

34:48Betul.

34:50Jadi buat teman-teman yang enggak tahu party town.

34:52Tadi sempat dibahas.

34:54Itu adalah salah satu library untuk melod.

34:58Terparti script seperti analytics.

35:02Ternyata party town itu terparti maksudnya.

35:04Ya analytics.

35:06Kemudian apalah gitu ya terparti library.

35:08CDN dan lain-lain.

35:10Itu yang tidak ada hubungannya sama manipulasi dom.

35:14Itu di loadnya di web worker.

35:16Jadi lebih cepat.

35:18Misalkan teman-teman pakai Google Analytics.

35:20Atau pakai analytics yang lain.

35:22Seperti itu.

35:24Kemudian kita lanjut lagi.

35:26Ivan sudah selesai atau tadi kepotong sorry?

35:28Enggak.

35:30Oke.

35:32Ini juga seru nih.

35:34Pasti banyak yang mengefriend sama jQuery.

35:36Jadi jQuery masih teratas.

35:38Jauh sekali dibandingkan React 8%.

35:42Menurut saya sih karena pengaruh WordPress.

35:48Satu itu karena kadang-kadang ada satu aplikasi web atau halaman web.

35:58Itu bisa punya dua library jQuery yang berbeda versi.

36:04Jadi dia bisa dua kali lipat sendiri.

36:06Itu dihitung satu.

36:08Kalau di sini mungkin dihitung satu ya.

36:10Kalau dihitung satu, berarti ini bisa lebih dari 81%.

36:14Lebih banyak lagi.

36:16Itu udah penjelasan itu.

36:18Sebagian karena WordPress.

36:20Karena tingginya penggunaan WordPress.

36:22Itu ternyata berkorelasi langsung sama tingginya si jQuery.

36:26Betul.

36:28WordPress menggunakan jQuery dan digunakan 35% dari website sejauh ini yang menggunakan Chrome.

36:34Yang dari CRUX ini.

36:36Itu menggunakan WordPress.

36:38Sehingga jQuery-nya yang paling tinggi.

36:40Beda ceritanya kalau nanti jQuery-nya digantikan oleh yang lain.

36:46Dan di sini juga ada cerita bahwa hampir semua fitur-fitur jQuery sebenarnya sudah bisa dilakukan di DOM API.

36:56Jadi kalau misalkan teman-teman berfikir untuk bikin aplikasi web di luar WordPress.

37:04Diusahakan jangan pakai jQuery dulu sampai benar-benar dibutuhkan.

37:08Saya nggak tahu kapan. Kayaknya udah nggak butuh ya.

37:10Kalau project baru nggak butuh.

37:12Cuma kalau project lama kan kalau rewrite semua.

37:16Ditulis ulang menggunakan web API yang baru.

37:18Nggak ada yang mau, males.

37:20Salah satunya kalau nggak salah Bootstrap.

37:24Bootstrap udah tergantung budget.

37:26Kalau nggak salah Bootstrap udah nggak pakai jQuery.

37:32Jadi sudah mulai sedikit-sedikit orang berpindah.

37:37Karena memang DOM API udah lebih mudah digunakan dibandingkan dulu ya.

37:43Kalau dulu kan kita harus pakai XHR.

37:51XML.

37:53XHR HTTB Request.

37:55Kami nyebelin waktu.

37:57XML-nya, huruf besar, huruf kapital.

37:59HTTP-nya, TTP-nya, huruf kecil.

38:03Siapa itu yang buat API ya?

38:05Yang bikin itu si XML HTTB Request yang bikin.

38:11Bukan.

38:13Cuma Internet Explorer kan ya itu.

38:15Internet Explorer.

38:17EA itu yang bikin itu.

38:19Jadi Ajax itu yang bikin dulu EA.

38:21EA ya.

38:23Jadi gara-gara itu aja, worth it.

38:28Untuk pakai jQuery dan kita bisa pakai dolar titik Ajax atau GET.

38:33Itu udah worth it untuk urusan gitu.

38:36Tapi kalau sekarang kan udah ada vets ya.

38:38Jadi harusnya lebih mudah lah.

38:41Terus juga untuk selektor dan lain-lain juga sudah lebih sederhana dibandingkan dulu.

38:47Jadi disarankan, pikir dua kali ya.

38:51Pikir berapa kali untuk menggunakan library-library seperti jQuery, moment.js,

38:56dan lain-lain yang kita udah bahas di episode sebelumnya juga.

38:58Episod terakhir.

39:00Kemudian, nah ini juga gede nih.

39:0357% ternyata dari halaman mobile page.

39:08Ada 57% web yang JavaScript-nya pasti ada isu...

39:16Kamanan.

39:18Kamanan.

39:20Ini lumayan besar.

39:22Lebih dari setengahnya.

39:24Tapi turun tahu, turun signifikan dari tahun lalu.

39:27Oh iya, turun.

39:29Udah mulai aware ya.

39:31Tahun lalu 64%, tahun ini 57%.

39:35Itu juga salah satunya karena library biasanya.

39:40Ini adalah vulnerabilities.

39:45JQuery paling rawan karena ada di mana-mana ya.

39:49Maksudnya karena penggunaannya tinggi, kemungkinan disusupin, apalah, keli jahat.

39:56Lebih besar juga.

39:58Ini yang gede-gede nih ya.

40:00Yang cukup besar dan cukup populer.

40:06Makanya dia 57% cukup besar karena yang populer-populer pada kena ya.

40:12Cuma yang paling tinggi, paling signifikan sih jQuery doang.

40:16Hampir separoh kan.

40:18Ini berdua loh.

40:19JQuery dan jQuery UI kalau digabungin berapa ini?

40:23Kalau pakai jQuery UI kan pasti pakai jQuery juga.

40:28Oh iya, jelas.

40:30Cuma misalnya tingkat risikonya berarti jauh lebih tinggi

40:33kalau pakai jQuery UI dan jQuery.

40:37Dan dari sekian library, muncul satu framework angular.

40:43Ini angular berapa ya, angular JS?

40:45Angular JS itu yang lama deh kayaknya.

40:47Satu ya, satu apa dua gitu.

40:50Yang disebut angular JS itu yang paling pertama kayaknya deh.

40:54Yang pertama ya.

40:55Kalau sekarang angular aja nggak pakai JS ya.

40:59Oke, kemudian ini ada percentage desktop page yang menggunakan webcomponent.

41:05Custom element, baru 2%.

41:08Masih sedikit, adaptinya masih kecil.

41:11Bertahun-tahun ini naiknya seberapa ya?

41:14Kayaknya naiknya 0,00.

41:15Justru ini turun.

41:16Tahun lalu 3%. Tahun ini jadi turun.

41:20Bisa.

41:21Entah kenapa.

41:22Entah, mungkin ada framework yang lagi ngetrend kayak Astro

41:32atau Quick dan lain-lain jadi orang jadi malah berhenti menggunakan.

41:38Kemudian Shadow DOM masih ada hubungannya sama webcomponent juga.

41:41Cukup kecil, cuman agak naik memang.

41:44Shadow DOM ini adalah salah satu fitur yang bisa membuat isolated CSS styling.

41:50Tahun lalu itu 0,37 naiknya nggak terlalu signifikan.

41:55Kemudian yang pakai template nih, ini salah satu fitur yang saya suka juga nih.

42:00Kalau misalkan kita nggak mau pakai DOM manipulation.

42:05Ya, nggak perlu bikin function render.

42:08Jadi kita bisa pakai template, tapi sayangnya adaptinya juga masih terlalu kecil.

42:13Ternyata template pun ada di WebPiPiA ya, kirain cuma di view.

42:17Saya suka pakai ini loh.

42:19Iya, ini salah satu yang favorit juga ini.

42:22Makanya kecil sekali.

42:23Mungkin belum banyak yang tahu juga.

42:25Topik, salah satu topik.

42:29Bisa jadi topik juga.

42:32Dapat dua topik malam ini kan?

42:33Iya, dapat dua topik nih.

42:35Kita lanjut sedikit lagi.

42:39Kalau ini WebAssembly nggak terlalu banyak yang bisa di highlight.

42:44Tapi paling hot nih, salah satu topik paling hot ya.

42:47Iya, jadi yang saya highlight adalah bahasa yang digunakan untuk WebAssembly itu paling banyak yang mana.

42:54Ternyata yang paling banyak adalah C, C++.

42:59Yang kedua, dan perbedaannya cukup jauh.

43:01Yang ketiga adalah C#.

43:03Ya, nscripten dan lain-lain itu C ya, C++ ya.

43:08Kemudian...

43:10Karena, kayaknya ya mas ya.

43:12Ini karena yang di-convert itu adalah library-library yang sudah ada.

43:19Ya, betul sekali.

43:21Di komen yang sudah ada kayak genu itu sudah, jadi tinggal di-convert.

43:26Jadi nggak bikin baru.

43:28Kayak AutoCAD itu dari C++.

43:30Kemudian Adobe juga dari C++.

43:33Di-legasi code, di-modifikasi sedikit, di-kompilasi dengan nscripten, jadilah aplikasi web gitu ya.

43:43Oke ya, berarti maksudnya bisa nggak harus beneran nulis semua dari awal kan.

43:49Justru itu jadi daya tariknya kan.

43:51Bisa pakai WhatsApp di web.

43:53Betul.

43:54Karena kan ada banyak juga aplikasi-aplikasi yang berjalan misalkan kayak di DOS gitu kan.

44:00Yang akhirnya terpaksa harus menggunakan DOS, padahal DOS sudah nggak di-support lagi gitu kan.

44:05Jadi dengan adanya WebAssembly ini, dia bisa dijalankan di web gitu.

44:11Dan lebih enak juga kita nggak tergantung kepada OS tertentu gitu.

44:17Bisa diakses dari mana aja.

44:19Contohnya kayak JPEG 2.0 PNG atau konverter-konverter itu kan sudah banyak komen line-nya.

44:27Betul.

44:28FMPEG itu yang buat konversi video itu sudah bisa diakses dari web juga kan.

44:34Sudah ada alat darinya.

44:36Mantap.

44:38Mantap.

44:3916% belum teridentifikasi bahasanya apa.

44:43Assembly script itu adalah salah satu yang populer juga, 8,2%.

44:48Kalau mau lebih lanjut, temen-temen bisa cek state of WebAssembly 22 survey.

44:53Oh, ada itunya juga ya.

44:55Ada survey-nya juga.

44:57Dan yang menarik juga ini, saya kurang tahu terlalu dalam tentang WebAssembly sih.

45:03Jadi fitur apa yang digunakan, yang paling tinggi adalah sign extension.

45:06Ini apa, nggak tahu.

45:07Ini apa?

45:09Kita mesti cari bintang tamu ini.

45:11Mesti cari featuring yang mendalami WebAssembly ini, seru kayaknya.

45:16Betul.

45:17Oke, dari saya cukup itu aja JavaScript dan WebAssembly.

45:21Selanjutnya mungkin bisa dari Eka mau bahas tentang apa nih pertama.

45:26Kayaknya bahas PWA sama capabilities aja deh.

45:30PWA dulu aja.

45:31PWA.

45:32Jadi kalau untuk PWA, TLDR-nya atau ringkasannya, penggunaannya naik.

45:38Cuma nggak secara signifikan.

45:41Jadi cukup ajak tingkat kenaikannya.

45:43Atau bisa dilihat, naik sih.

45:45Naik cuma nggak ekstrim muah banget.

45:48Tapi ya sisi positifnya adalah, ini trend yang cukup stabil.

45:54Jadi kayak bukan.

45:55Kan PWA itu mulai naik sejak 2019 ya.

46:00Nah pergerakannya sampai dengan sekarang itu bukan cuma kayak yang trend bentar doang.

46:08Abis itu udah dilupain.

46:10Tapi positifnya ini adoptionnya tetap selalu naik secara trend.

46:16Terus kalau yang di Almanak ini sih sebetulnya detail-detail penggunaan metodnya.

46:22Secara umum sih ini yang paling banyak digunakan itu metod yang cukup basic ya.

46:28Jadi kayak pertama kali life cycle-nya, install, activate, ya itu pasti kalau kita menggunakan service worker.

46:36Nah ini nih bagian manifest ini seru juga.

46:38Jadi manifest itu sering dianggap sebagai bagian dari PWA.

46:45Nah ini bisa dibilang ya benar dan salah.

46:49Maksudnya bukan salah gimana ya.

46:52Jadi manifest itu sebetulnya web manifest itu ada spesifikasi sendiri.

46:58Intinya itu sekedar file JSON yang memberi informasi tentang suatu aplikasi atau situs web.

47:06Jadi sebetulnya kalopun kita nggak menggunakan service worker, nggak bisa add to home screen dan nggak bisa lain-lain.

47:14Mau ada manifestnya ya bisa-bisa aja dan boleh-boleh aja.

47:18Itu manifest begitu.

47:20Jadi kalau gampangnya kalau kita ingin pakai service worker, kita pengen pakai capabilities PWA.

47:26Memang harus ada manifestnya.

47:29Tapi sebaliknya kalau mau pakai manifest ya pakai manifest aja.

47:33Nggak harus pasang service worker dan lain-lain.

47:36Nah di Alam Anak ini dia mengkomper macam-macam penggunaan baik dari service worker-nya maupun Alam Anak-nya.

47:46Wait-wait, jadi PWA itu nggak mesti pakai service worker ya?

47:51PWA harus ada service worker-nya kalau mau pakai add to home screen.

47:58Oh oke, biar bisa jalan di background ini ya?

48:04Ya buat casing, background sync dan lain-lain dia memang harus service worker.

48:09Berarti kalau share-an minimalnya dia harus kalau di-visit harus kalau 404 ini apa kalau offline.

48:18Home page-nya atau origin-nya harus tetap 200.

48:23Oke, nggak ada itu.

48:26Kira-kira begitu. Terus itu sih kalau di Alam Anak itu ada perbandingan detail-nya.

48:31Nah ini scroll ke bawah sedikit mungkin.

48:35Nah ini manifest properties, macam-macam ada display, ada apa?

48:41Display itu untuk mengatur tampilan-tampilan seperti nama yang ditampilkan.

48:47Kalau kita install namanya apa?

48:50Terus ya termasuk background color full screen punya ya yang berurusan sama tampilan.

48:56Terus soal icons, ukuran icons itu kalau kita ngikutin macam-macam versi browser lama itu variasi icons-nya banyak banget.

49:08Nah sering kita bingung, cuma sekarang nih hasil survey, hasil Alam Anak ini menunjukkan bahwa icon yang dipakai

49:17cuma ada dua size icon yang cukup major.

49:21Ke bawah lagi sedikit.

49:25Ini apa nih? Oh ini display ya tadi ya. Ada stand alone, ada full screen, yang paling banyak stand alone.

49:30Kemudian icon-nya ya.

49:33Nah itu kan sebenarnya variasi ukuran icon-nya banyak banget dan kadang kita tuh

49:37mungkin overwhelmed yang aduh males banget kalau harus bikin, harus nge-generate.

49:43Ada tools-nya tapi kan tetap setiap kita ganti icon, adjust icon, harus generate

49:48belasan versi ukuran. Nah sebetulnya kalau untuk major browser yang baru itu dua icon,

49:58dua ukuran icon cukup. Itu bisa, itu kelihatan banget kan tuh di bar chart-nya

50:04192 sama 512 yang paling major. Kecuali kita memang punya user base yang pakai browser lama

50:13variasi tertentu, misalnya Safari, Safari iOS 14 atau Safari iOS 13, ya itu beda kasus.

50:22Nah terus ada lagi nih, manifest kategoris ke bawah lagi sedikit.

50:27Nah ini ada hal menarik, jadi mereka si HTTP Almanak ini mengelompokan semua situs yang di-crawl.

50:38Ada kategori-kategorinya ada shopping, news, dan lain-lain. Nah ini ada dua chart

50:44terkait apa, penggunaan manifest dan penggunaan PWA.

50:51Nah jadi jenis-jenis situs seperti apa atau web app seperti apa yang banyak menggunakan

50:57teknologi PWA itu ada di shopping dan news yang paling banyak. Terus selain itu ya

51:05ada bisnis, ada sosial, jadi menarik sih ini kita dapat gambaran teknologi ini

51:12dipakai di situs jenis apa aja.

51:15Hmm menarik, kalau service worker gak ada ya?

51:21Ada tadi di atas.

51:23Oh ada, maksudnya yang kayak gini tapi yang service worker gak ada ya?

51:29Kayaknya masuknya di PWA tadi, yang atasnya.

51:33Oh yang ini?

51:34Iya, ini yang pakai service worker jadi apa bisa add to home screen.

51:39Tapi bedanya sedikit sih, bedanya tipis, maksudnya antara yang manifest saja atau

51:45yang manifest complete dengan service worker PWA itu kategori paling atas setap

51:52shopping, news, dan bisnis. Jadi apa jenis aplikasi yang menggunakan itu.

51:58News ya ternyata berita itu paling butuh apa, fungsionalitas PWA, news dan shopping.

52:05Oke.

52:06Nah terus ini nih soal advance capabilities, Fugu API.

52:12Fugu API.

52:14Jadi project Fugu itu, itu codename dari project yang dilakukan oleh Chromium

52:22dan stakeholder terkait. Jadi ada dari Google Chrome, ada dari Microsoft,

52:28terus ada dari seperti Intel, itu kan mereka gak bikin browser tapi bikin hardware-nya ya.

52:34Mereka itu punya project yang memajukan atau mempropos standar web API

52:46yang memiliki kapabilitas canggih, intinya yang kapabilitasnya menyamai

52:52feature-feature native. Nah itu sering disebut dengan Fugu API.

52:58Nah ini apa?

53:01Fugu itu dari ikan Fugu kan?

53:05Iya, ikan kebung.

53:07Bukan, ikan buntal, ikan buntal.

53:12Buntal, buntal.

53:14Katanya belom pernah makan, katanya dagingnya enak, tapi kalau salah siapin, berencun.

53:20Saya sudah pernah makan, sudah pernah.

53:23Gak ada rasanya.

53:26Gak ada rasanya?

53:28Iya, kayak teksturnya aja gitu, rasanya kalau gak pakai sausnya gak ada rasa.

53:34Oh, padahal bahaya ya, maksudnya apa? Saking enaknya, ya harus disiapkan.

53:41Jadi yang menggunakan 8,8% di desktop ya, baru 8,8%.

53:49Jadi project Fugu itu kan sebetulnya mencakup banyak banget API-nya

53:53dari yang sudah lumayan established, major, sampai yang masih experimental.

53:59Nah itu penggunaannya, itu 4, di situ ada 4 API yang sudah paling umum, paling banyak digunakan.

54:08Itu angkanya web share di sekitar 8%, jadi not bad lah.

54:14Terus sebenarnya ada bagian yang menarik tuh, di API push itu sebetulnya

54:22originally bagian dari project Fugu.

54:25Tapi kan sebetulnya semua feature-feature web API itu merupakan spesifikasi atau standar ya,

54:32jadi bukan milik dalam arti patent atau hak miliknya siapapun.

54:37Jadi apa, semua API itu bukan punya orang Chromium atau orang Google atau orang Microsoft,

54:44jadi bisa diadopsi, gak tertutup kemungkinan diadopsi browser lain kalau dirasa perlu.

54:51Dan di sini tahun ini kelihatan untuk pertama kalinya push API itu cukup naik,

54:58salah satu alasannya karena Safari juga mengadopsi push API itu.

55:05Jadi ternyata API dari project Fugu pun gak eksklusif, gak menutup kemungkinan,

55:14suatu saat bisa diadopsi oleh browser lainnya, kalau memang dirasa relevan.

55:19Intinya kan kalau sudah di-approved di konsorsium ya browser lain harus adopsi.

55:26Walaupun gak tahu kapan ya.

55:29Iya, walaupun gak tahu kapan.

55:31Oh iya, kan kalau masih di WICG itu Working Group Specification in Progress itu kan dalam proses,

55:40berarti kalau sudah dianggap stabil, ya suatu saat browser akan...

55:45Tapi ya itu, bebas suka-suka mereka mau adopsi sekarang atau kapan-kapan.

55:50- Betul. - Tapi sukses story-nya itu salah satunya push yang pertama kali masuk,

55:57walaupun cuma 2% ya, karena mungkin banyak faktor.

56:01Karena Chrome juga kan?

56:03Safari juga sekarang.

56:05Iya, maksudnya yang di Almanak ini kan Chrome aja kan?

56:09Oh iya, betul-betul.

56:11Jadi gak kelihatan tuh Safari, Firefox dan lain-lain, gak kelihatan.

56:15Tapi kan itu mempush developer untuk, maksudnya developer jadi oke,

56:19bisa dapat green light dari project manager atau client untuk nambahin...

56:24Biasanya product owner lah yang itu ya.

56:28Oke, ada lagi? Sudah?

56:32Udah sih, sisanya baca-baca sendiri aja langsung di URL-nya.

56:37Saya boleh ijin undur diri dulu, baterai saya sudah tinggal 10-12% lagi.

56:45Maaf, gak ada colokan di sini, kalau gak sudah saya colokan nih.

56:50Maaf, maaf.

56:54Oke, kalau mau duluan silahkan.

56:56Iya, mohon maaf ya, teman-teman semua.

57:00Ini udah mau jam 9 juga emang.

57:02Oh iya, ya udah 3 menit lagi deh, 3 menit lagi.

57:06Serius, 3 menit lagi?

57:08Kalau tiba-tiba ilang berarti mati.

57:10Kalau tiba-tiba ilang berarti tiba-tiba mati ya.

57:13Oke, siap kalau gitu. Lanjut ke capabilities ya kedua ya?

57:17Ya, capabilities sebenarnya itu tadi sih.

57:20Ini masih ada hubungannya kan?

57:21Itu ringkasannya tadi, TLDR-nya tadi,

57:24cuma kalau pengen lihat exactly perbandingan atau API-nya apa aja,

57:30bisa dilihat di situ.

57:32Ini agak berbeda dengan yang tadi ya.

57:35Yang tadi kan ini yang udah major, udah diadopsi kan.

57:39Kalau ini kan ada beberapa yang belum diadopsi juga kan.

57:42Udah, cuma itu kecil. Udah, ini semua udah major.

57:47Udah semua ya ini ya? Oh iya, web share API.

57:50Atau homescreen sudah.

57:52Ini detail-nya.

57:54Mungkin ada beberapa teman-teman yang nggak nyadar gitu ya.

57:58Kayak misalkan web share API.

58:00Itu saya sering banget pakai, karena saya nggak pakai, misalkan Twitter ya.

58:04Saya nggak pakai Twitter app, jadi saya pakainya web version Twitter di handphone.

58:09Jadi kalau saya mau simpan bookmark atau mau simpan sebuah tweet yang menarik,

58:15itu saya pakai web share API.

58:17Disimpan ke telegram.

58:19Nah, tapi harus di-check.

58:21Karena hanya browser mobile yang punya web share API.

58:26Desktop tidak punya.

58:27Desktop tidak ada.

58:28Jadi kalau dibuka di desktop, lo kok nggak ada?

58:30Ya, memang belum ada. Jadi yang mobile.

58:33Nah, itu bisa di-combine sama tadi itu dynamic import ya kan.

58:38Mungkin kita tetap pakai library, entah library eksternal,

58:42atau kita nulis sendiri buat bikin share pop-up ya.

58:46Cuma kita nggak usah load itu dulu.

58:48Siapa tahu kalau emang browser,

58:50kalau emang si user pakai browser mobile yang support share API, ya udah bagus.

58:55Nah, fallback-nya kalau nggak support, baru lazy load,

58:59dynamic import si JavaScript buat share dialog gitu.

59:04Jadi itu enak.

59:06Sebelum kita tutup, saya punya satu pertanyaan.

59:11Apa sih keuntungan kita, apa sih informasi yang kita bisa dapat dari sini untuk membantu kita?

59:19Apa tujuannya kita mengetahui informasi dari Almanak ini?

59:23Menurut teman-teman.

59:26Mungkin nanti teman-teman yang lain juga bisa isi YouTube comment atau di slido.

59:32Apa sih keuntungannya kita mengetahui Almanak ini?

59:35Kenapa informasi ini?

59:39Mungkin salah satunya mengetahui trend-nya ya, kecenderungannya kayak gimana.

59:45Kecenderungan misalnya tadi apa, ternyata kalau sebelumnya kita,

59:51mungkin kita gambling atau merasa gambling atau ragu-ragu adopsi PWA misalnya,

59:57ternyata cukup banyak yang pakai PWA, berarti relatif aman lah.

1:00:01Terus mungkin kita bisa, itu kan tadi yang positifnya ya.

1:00:09Kalau yang negatifnya mungkin kita bisa cek room for improvement.

1:00:13Misalnya tadi masih banyak website yang belum nge-load JavaScript secara asing.

1:00:25Masih banyak yang render blocking.

1:00:27Berarti kita harus memperhatikan itu di, mungkin misalnya kita kerja dalam tim

1:00:32atau kita ngerjain codebase orang lain, kita bisa tahu hal-hal yang perlu diperhatikan.

1:00:37Kesalahan umum kali ya, itu kan hal yang tadi kan cukup besar tuh

1:00:41yang punya render blocking script sampai 71%, berarti kalau kita nge-handle orang lain.

1:00:47Membuka wawasan kita lah berarti ya. Apa aja sih trend sekarang?

1:00:52Yang sekarang tuh apa? Kita tewas website yang di posisi mana?

1:00:56Jadi kita bisa tahu benchmark kita itu dimana gitu ya.

1:00:59Apakah kita sudah yang udah jadi yang lebih baik dari rata-rata atau kita masih di bawah rata-rata?

1:01:05Sama ini, jadi sumber konten.

1:01:10Kita kan GDE Web kan salah satu tugas kita, salah satu job desk kita adalah untuk

1:01:19memasarkan atau menyebarluaskan informasi-informasi ini kan.

1:01:23Misalkan tadi dynamic import itu kok kecil sekali, web component itu kok kecil sekali gitu.

1:01:30Jadi itu yang harus kita suarakan lagi, lebih sering lagi gitu.

1:01:34Misalkan ngisi acara dimana gitu ya, kita bisa bahas ini misalkan kayak tadi,

1:01:39oh ini masih banyak website-website di Indonesia atau di dunia bahkan

1:01:45belum menggunakan script asing gitu.

1:01:48- Script asing kok jadi enak ya script asing? - Script asingkronus gitu kan.

1:01:55Padahal itu udah ada fitur udah cukup lama dan dampaknya kepada performa itu cukup tinggi gitu.

1:02:01Jadi ya tugas kita sebenarnya buat menyebarkan lagi beritanya,

1:02:06buat menyebarkan lagi buat orang-orang jadi lebih tahu gitu.

1:02:10- Terus apa ya, kadang kalau kita bikin konten, kalau cuma nyebutin tentang API-nya,

1:02:15tentang sinteks ya, tentang demo kayak contoh penggunaan yang kayak di dokumentasinya,

1:02:20itu kan mungkin kurang menarik ya.

1:02:23Cuma yaudah itu keren, flashy, new, trendy, cuman belum tentu relevan sama kehidupan nyata.

1:02:30Nah dari alamanak ini kan kita bisa dapat konteks yang lebih baik kan.

1:02:34Misalnya tadi contoh gampangnya PWA dipakai di website jenis apa aja sih,

1:02:39kita punya data real buat ngedukung statement atau konten kita.

1:02:43- Bisa ini juga bisa buat ke apa, ngajuin ke pemegang apa ya, placeholder.

1:02:50- Product owner atau project lead atau apapun itu.

1:02:54- Stakeholder atau pemegang keputusan, misalkan keputusan bisnis gitu ya.

1:02:58- Kita mau maju kemana gitu ya?

1:03:01- Iya, ngapain sih kita, website kita pakai PWA, website kita kan website berita misalkan gitu kan.

1:03:06Nggak perlu PWA, coba deh lihat.

1:03:09- Kita komen sama BigQuery yang diberhasilkan tadi, kompetitor kita pakai semua ini.

1:03:15- Ibaratnya kita bisa membantu kita mengambil keputusan juga kayaknya,

1:03:22disupport dengan data yang ada.

1:03:25- Iya, kalau cuman bilang kita harus pakai PWA nih, kenapa emang?

1:03:29Kita nggak bisa support dengan datanya jadi kurang menarik kan.

1:03:32Tapi kalau misalkan kita bilang 90% website berita di luar sana sudah pakai PWA.

1:03:38- Semua kompetitor kita sudah pakai PWA.

1:03:41- Oke, saya harus kita...

1:03:49- Ya udah, kita pamit aja.

1:03:52- Atau tinggal 9%.

1:03:56- Kita juga sudah satu jam, jadi mungkin untuk malam ini kita cukupkan dulu aja.

1:04:02Terima kasih buat teman-teman, ada pertanyaan-pertanyaan yang belum terjawab,

1:04:05nanti akan kita recap dan kita masukkan ke Slido.

1:04:09Mungkin kita akan jawab di episode-episode berikutnya ya.

1:04:12- Mungkin next time kita bisa bahas kenapa shadow dome konsepnya gimana Pak Risa.

1:04:17- Ya, buat komponen dan shadow dome akan kita bahas.

1:04:20- Nah web komponen, udah ada materinya kan tuh.

1:04:23- Ya, jadi kita juga ngumpulin materi.

1:04:27Oke, terima kasih buat semuanya yang sudah hadir.

1:04:29Terima kasih buat Ivan, terima kasih buat Eka.

1:04:32- Sukses acara wordcam-nya besok, kita ketemu minggu depannya.

1:04:36- Thank you, bye.