Ngobrolin i18n - Ngobrolin WEB Ep6

1:44Oh nggak, sudah.

1:45Saya confirm di dua tempat, Depok dan Bogor.

1:49Wah, deket-deket ya.

1:51Driving distance ya.

1:53Mas Rissa dimana nih?

1:55Kalo saya yang udah confirm itu Surabaya, Semarang.

2:00Seru.

2:02Dengar-dengar isi medan juga kan?

2:04Kabarnya gitu, tapi belum ada kabar dari mereka.

2:08Sama Makassar satu lagi, jadi ada empat.

2:12Uset, ada empat.

2:16Ada empat.

2:18Mulanya berapa sih?

2:22Mulainya November.

2:24Ini udah November?

2:26Iya, week 3.

2:28Sampai Desember.

2:32Jadi setiap Sabtu itu keluar kota terus setiap minggu, jadinya empat kali.

2:38Belum siapin materi.

2:40Mudah-mudahan materinya bisa sama semua ya.

2:44Reusable.

2:48Oke, sebelum kita ngelantur kemana-mana.

2:52Kita akan bahas malam ini tentang international.

2:57Oh bukan ya, kita tentang internationalization.

3:00Internationalization.

3:041810 ya.

3:06Dan apa itu, tapi sebelum itu saya mau sapa-sapa dulu temen-temen kita yang sudah hadir, yang sudah menunggu.

3:14Ini katanya Mas Muhammad Abdul Mubarak, yang menunggu kita setiap hari Selasa.

3:18Halo-halo, selamat kenal.

3:20Gokil dari selamatan, mantap.

3:22Ada Andra, dan ada juga RS Production.

3:24Ini kayak, production apa nih?

3:28Production House.

3:30RS berarti, ini ya, Ras Production.

3:34Aku pikirannya rumah sahaja.

3:38Ya, jangan lupa kalau teman-teman yang hadir live punya topik diskusi,

3:44atau ada yang mau ditanyakan, ada yang mau dibahas, boleh langsung dicat aja.

3:48Tapi kalau teman-teman yang nonton ini nanti, setelah acaranya selesai, tidak live,

3:54teman-teman bisa juga bertanya di bit.ly/ngobroinward.

3:58Oke, kita akan bahas tentang internalization.

4:01Siapa yang mau membahas apa itu internalization?

4:05Mungkin Ivan kali ya.

4:07Enak ya, jadi host ya, bisa nembaknya.

4:12-Iya. -Nenyok-nenyok.

4:14Intel, kalau saya sih bahasnya panggilannya Intel.

4:20E18N Internationalization.

4:23Jadi sebenarnya ini web API.

4:26Jadi baru-baru ini aja.

4:28Aku nggak salah, ini launch-nya, saya nggak tahu kapan launch-nya ya.

4:32Tapi ini sempat disinggung waktu kita di Chrome Dev Summit yang...

4:38-Kapan itu? -Oh, you're extended.

4:40-2019? 2018? -2018 kayaknya.

4:44Pernah disinggung waktu itu.

4:46Intel API itu udah rilis gitu.

4:49Seperti yang teman-teman tahu, kalau misalnya teman-teman itu mau bangun web aplikasi

4:59yang multi-language dan multi-currency.

5:05Multi-language itu artinya multi-currency, terus kemudian date format, number format.

5:14-Language sensitive. -Language sensitive bahasanya.

5:18Yes, formatting itu.

5:20Jadi misalnya decimal aja kadang ada beberapa negara seperti Indonesia.

5:27Decimal pakenya koma, ribuan pakenya titik.

5:30Kalau di US, decimal pakenya kebalik.

5:35December pakenya titik, ribuannya pakenya koma.

5:38Dan kalau jangan, kemudian tanggal.

5:44-Tanggal gimana lagi? -Ya, ada yang bulan duluan,

5:48ada yang tanggal duluan, ada yang tahun duluan.

5:51-Oh, pusing dah pokoknya. -Selain nama bulannya sendiri juga ya.

5:55Tergantung bahasa, selain nama bulannya, format angkanya sama format urutannya juga ya.

6:01-Betul. Terus ada juga yang concatenation ya.

6:05Misalnya N, misalnya ayah, ibu, dan anak. Kalau di bahasa Inggrisnya, father, mother, and children.

6:18-Koma N. -Ya kan.

6:21-Plural, plural juga sesuatu. -Plural.

6:24Ada yang S belakangnya kalau plural, ada yang S aja.

6:29-Kalau Indonesia jamak plural. -Gak ada.

6:31Kalau Indonesia itu lebih ke arah diulang anak-anak, bukan "kids".

6:39Cuma kalau web UI di bahasa Indonesia itu bisa di omit.

6:45Misalnya "Halo Eka, kamu punya 10 pesan baru, kita nggak harus pesan-pesan baru."

6:51Jadi lebih santai kali ya.

6:54Nah, kalau teman-teman saya itu aslinya dulu adalah back-end development, jadi PHP misalnya.

7:05Kalau saya mau translate, saya udah bikin tuh 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12.

7:10Januari, Februari, Marat, April, May. Itu untuk bahasa Indonesia.

7:15Untuk bahasa Inggris bikin lagi beda. Untuk bahasa Jerman bikin lagi beda.

7:19Kalau misalnya saya detek AP-nya dari mana, baru pilih bahasa yang mana.

7:25Saya pakai sesuai array. Itu cara saya dulu.

7:28Nah, itu saya nggak mau lakukan lagi dengan Intel API.

7:35Jadi kalau misalnya datetime, saya hanya cukup format 1 hal aja.

7:41Jadi formatnya apa? Misalnya datetime itu dipersing dari string atau pakai API-nya si web.

7:50Ini si last pakai new date. Apa? Instansi?

7:54Ya, new date ya function dari si browser.

7:59Tinggal pakai, tinggal di format, mau jadi, ya seperti ini.

8:04Datenya mau di format jadi format US bisa.

8:07Format jadi BN itu apa sih? BN? B-A-N? Saya nggak tahu.

8:11- B-A-N apa ya? - Nggak tahu.

8:13Oh, ini contohnya Balinese. Ini buat, jadi kalau misalnya.

8:18- Indonesia. Indonesia nih ya? - Iya.

8:20Iya, jadi misalnya ini kasusnya kita bisa pas argumennya bisa single string kayak di atas itu NUS.

8:29Bisa pakai ray of strings. Ray of strings itu kegunaannya kalau yang pertama ada.

8:34Misalnya di browsernya support apa, format ke bahasa daerah.

8:39Yaitu di sini bahasa Bali, dia bakal display itu.

8:43Cuma kalau misalnya nggak ada, apa, orang bisa berbahasa Bali kan kemungkinan besar pasti bisa berbahasa Indonesia.

8:50Jadi fallback-nya yang lebih aman yang ada di browser.

8:54Ini ya, ini US bulan duluan ya, baru tanggal kan.

8:59Kalau Indonesia, tanggal dulu baru bulan.

9:02Tunggal dulu.

9:04Bisa juga ngasih tahu itu di timezone mana. GMT+11 otomatis.

9:10Ini sangat penting sekali kalau yang date sensitive untuk situs yang time sensitive.

9:19Contohnya situs lelang.

9:22Ngasih tahu countdown datenya itu harus sesuai dengan di mana si user itu berada.

9:34Kalau kita ngasih tahu jam 12 malam di tutup, jam 12 malam mana.

9:38Jadi harus pas gitu.

9:41Kalau kita pake Intel API, itu sudah disolve. Nggak cuma date ya, ada number, ada plural, ada macem-macem.

9:57Kalau dulu sebelum ada INTL ini biasanya kita pake third party ya kan?

10:02Iya, pake JavaScript.

10:05- Buat angka sendiri ya kan? - Buat number format sendiri.

10:11Number format itu biasanya jadi satu sama library buat handle translation ya.

10:17Biasanya kalau common practice-nya.

10:19Atau kita harus hand roll sendiri, customize.

10:23Ya, biasanya itu dulu sebelum ada library ini bikin sendiri. Jadi di parse, kalau 0-nya 3 ya dikasih titik,

10:35terus ujungnya dikasih koma, terus misalkan tambahkan RP, gitu-gitu ya, sendiri semuanya.

10:41Nah, itu yang bikin Parno banget apalagi kalau dealing sama uang ya currency.

10:46Sangin nggak sih kalau misalnya kita ngehandle banking atau e-commerce, terus salah gitu, salah saldo orang 10.000

10:56gara-gara salah titik sama koma, ilang jadi 10, kita suruh ganti sisanya, gimana?

11:03Iya, cuma salah koma doang ya. Misalkan ini 0,79 gitu kan, itu satu kan.

11:08Kalau ada 1.000, berarti 0,79 kali 1.000, berapa tuh? Lumayan kan?

11:14Maksudnya kalau di rupiah, kalau misalnya di-ponser link kayak di contohnya.

11:19Euro, ya misalnya bisa transaksi pakai euro, pakai rupiah, nah kita salah tuh pas convert.

11:25Terus apa, user-nya kecar 10.000 euro, wah.

11:28Waduh, ngeri ya.

11:30Jadi intinya jangan, maksudnya jangan handling yang, jangan main kasar yang gitu lah.

11:35Jangan yang apa, nge-replace-replace titik atau koma sendiri.

11:39Iya, apalagi kan JavaScript sangat sensitif ya.

11:43Maksudnya kan kalau awalnya number, terus kita, mungkin kita salah atau kita keliru,

11:48number-nya kita convert jadi string, abis itu string ditambah dengan angka jadinya kan,

11:54100.000 ditambah 1, jadi 1 juta 1 kan.

11:58Apalagi kalau nggak, ini skenario ngaco banget sih, misalnya nggak pakai strict mode, kan apa,

12:06itu tambah operasi penjumlahan kan, kalau nggak di strict mode itu, itu ada quirk aneh dari JavaScript.

12:14Jadi kan string ditambah number, itu jadi string semua.

12:18Jadi kayak bisa 10, misalnya kita mau nambah 10 tambah variable B,

12:25tapi variable B ini karena salah parsing jadi not a number, n-a-n.

12:29Nah pusing kan kalau tiba-tiba saldo user kita jadi 10 n-a-n.

12:34Jadi ingat beberapa tahun yang lalu anak saya pernah nanya, 1 ditambah 1 berapa?

12:41Saya jawabnya 2, dia jawabnya 11, jadi dia cocok jadi JavaScript developer ya.

12:46- Bukan, dia cocok jadi JavaScript engine. - JavaScript engine.

12:54Compiler ya, dia compil kode ya.

12:59Terus saya argumen, kenapa kok nggak dikasih string gitu kan satunya.

13:05Ya, begitulah. Jadi apa namanya, sebelumnya kita biasanya menggunakan library tambahan

13:17yang paling populer adalah momen JS, itu yang paling lengkap, di satu sisi paling lengkap,

13:22di sisi yang lain paling berat atau paling besar ukurannya.

13:26Karena dia legacy ya, salah satu dari dulu ada, yang paling established.

13:32Yang paling established dan itu yang membuatnya terlalu besar adalah dia punya

13:39koleksi di kineri kan, jadi bahasa-bahasa di seluruh dunia itu dikumpulin semua.

13:45Dan kayaknya belakangnya bisa di tri-shaking, tapi awalnya belum bisa ya.

13:51Awalnya belum bisa jadi satu, maka dari itu dia besar sekali.

13:55Dan salah satu fitur yang menarik dari library seperti momen JS, ada date JS sekarang ya,

14:02ada date FNS dulu, itu adalah yang sering saya pakai adalah relative time format.

14:08Ini juga menarik. - Iya, ini dia.

14:10Ternyata sudah ada juga di INTL. - Ternyata ada, mantep.

14:15One day ago. - Ini permintaan product owner atau product lead ini

14:20kalau kita bikin product yang user facing, customer atau client facing,

14:26ini hampir pasti ada. - Ada chat app lah, atau email, atau apa.

14:31Kalau kita ganti di sini dan kita run, dia akan menjadi itu.

14:35Dalam 3/4 satu hari yang lalu, bahasa Indonesia kan, padahal dia tulis -1 day,

14:40tapi sudah di-convert ke Indonesia. Jadi ini membantu sekali.

14:45Tidak perlu ada library tambahan, tidak perlu memberatkan user untuk men-download

14:51terpantir library, kita sudah bisa menggunakan INTL ini di browser-browser modern ya.

14:57Ada ininya nggak? Can I use? Ini dia. - Ada.

15:00Kayaknya sudah relatif stabil. - Sudah ada semua ya.

15:05Cuma belum semua metode-nya support kelihatannya ya.

15:09Relative time format, katakanlah. Ini sudah 7/1 sudah cukup lama kan.

15:14Ini sudah 100 kan, versi 100 ya. - Ini sudah cukup stabil kok.

15:18Sudah cukup stabil. Jadi aman ya. - Aman.

15:21Oh iya, ijo semua. Oke ya. - Ijo semua.

15:24Dan itu apa namanya, sedikit promosi.

15:32Saya pernah punya online course untuk progressive web apps,

15:37ini dia contoh aplikasinya. Aplikasi e-commerce

15:40yang jualan produknya yang diidam-idamkan Ivan.

15:45Herman Miller. - Course ke-52 juta.

15:50Ini saya bikinnya pakai INTL, itu tahun 2021.

15:55Ini kode sumbernya seperti ini. Jadi sederhana, kita tinggal panggil INTL,

16:01nggak perlu import, nggak perlu apa. - Tanpa harus import atau install?

16:06Iya. Terus kita kasih, kita mau destinasinya, tujuannya adalah number dari negara mana.

16:14Style-nya currency. Kita bisa pakai style yang lain juga.

16:17Ada beberapa style selain currency. Terus kita tambahkan,

16:22ini adalah currency-nya IDR. Sehingga hasilnya yang tadinya 52 juta

16:27dalam bentuk number, dia di format ke dalam bentuk RP, spasi, 52.00.

16:35- Sudah ada separator titiknya juga ya? - Iya, itu sudah otomatis.

16:41- RP-nya juga sudah dari INTL-nya? - RP-nya juga sudah dari INTL-nya, begitu.

16:48Dan tadi kita sebutkan momen JS. Momen JS itu adalah salah satu yang paling populer

16:54dan juga paling berat karena ukurannya yang cukup berat.

16:59Dan salah satu cara untuk mengetahui seberapa besar sebuah library.

17:06Teman-teman bisa menggunakan bundle phobia. Ini web yang bisa digunakan

17:14untuk ngecek seberapa besar sebuah library. Katakanlah tadi momen ya.

17:19Kita lihat di sini ada... Nah, momen ini sudah dipisah sekarang.

17:23Ada momen, ada timezone, ada lokal, dan lain-lain.

17:27Kalau dulu jadi satu semuanya, makanya dia besar sekali.

17:30Tapi kita lihat sekarang, ukurannya masih cukup besar, 300 kilobytes ya,

17:35290 kilobytes yang sudah diminifit. Kalau kita lihat download time-nya,

17:39bayangkan 1,5 detik hanya untuk men-download si library momen.

17:45Sedangkan di INTL kita tinggal pakai, nggak perlu download.

17:49- Kalau yang lebih kecil apa? DIGS ya? - DIGS coba.

17:53DIGS ini jauh lebih kecil. 6,5 kilobytes.

17:59Nggak tahu download time-nya kalau yang di slow 3G ya, atau di 4G itu 3 mili detik.

18:05Tetap ada delay time-nya sedikit.

18:09Nah, pertanyaan sekarang, ini yang ditulis ya kelihatannya, pertanyaan sekarang,

18:17kapan kita memutuskan untuk menggunakan library, kapan kita memutuskan untuk

18:23tidak menggunakan library? Atau mungkin ada kalanya kita harus bikin sendiri?

18:28- Kalau saya, by default, jangan pakai library apapun. - Bikin sendiri dulu?

18:38- Tidak, by default pakai API dari web yang ada dulu. Susahakan pakai yang ada.

18:47Kalau sampai nggak. Misalnya dalam development ya, kita butuh sesuatu gitu.

18:53Pikirkan dulu misalnya apa yang ada dari web. Contohnya Intel ini.

19:01Banyak loh web API. Minggu lalu pernah kita bahas web API itu di MDN tuh ada banyak sekali.

19:07Apa aja yang sudah ada gitu. Jangan develop, jangan reinventing the wheel dulu gitu ya.

19:16Pakai apa yang ada. Kalau misalnya nggak ada, baru kita coba pikirkan

19:21library apa yang kecil, yang kira-kira makes sense gitu.

19:28Contohnya yang paling terkenal adalah LODAS ya. LODAS sebelum dipisah itu kan

19:38gede banget ya. Masa cuma mau pakai buat LODAS itu yang hanya LODAS.

19:45- Compare object ya misalnya. - Antara compare object, filter.

19:52- Filter atau yang gini loh. Misalnya kalau kita get sesuatu object, kalau nggak ada

19:58returnnya, defaultnya apa gitu. Tau nggak itu? Kalau nggak salah LODAS get deh.

20:03Jadi hanya untuk pakai get doang, di import seluruh LODAS aja.

20:09Nah itu saya kalau misalnya ketemu developer yang bikin gitu, "Aduh, jangan deh pakai ginian."

20:15Kalau cuma mau pakai getnya doang, jangan pakai LODAS, ya udah bikin aja sendiri lah.

20:19Nah itulah maksudnya komparasi nggak gitu. Kalau sampai kayak butuh-butuh banget,

20:25misalnya kayak contohnya memikirkan antara fetch API atau pakai Axios misalnya.

20:33Kalau memang butuh sampai lebih mendalem karena harus pakai asingkronus plus dia ada

20:42authentication atau ada blablabla yang perlu kita customize di header, ya pakai Axios misalnya.

20:50Kalau nggak ya, pakai fetch API aja gitu. Itu dari saya. Eka gimana Eka?

20:56- Sebetulnya ya sama, kalau misalnya start small dulu kan ya.

21:01Kalau misalnya masih bisa pakai web API yang udah ada ya pakai aja.

21:05Tapi kan pertimbangannya mungkin browser support, kita harus support browser apa aja.

21:11Ini kan tergantung sama analytics user base kita ya.

21:15- Target user kita. - Cuma kalau dalam kasus Intel ini kan

21:20sebenarnya supportnya udah merata jadi ya nggak masalah sama sekali.

21:24Ada kasus lagi, kemungkinan kedua, terlanjur misalnya kan nggak semua kodil kita tulis dari awal ya.

21:31Kalau legacy code, dan terlanjur pakai library, terus dipakai di banyak tempat.

21:36Jadi kalau kita ganti satu, ini takutnya ngerusak yang lain.

21:41Dan belum ada waktu yang cukup buat apa, totally nge-replace semua.

21:48Ya sementara pakai itu dulu, cuma biasanya kalau strategi aku sih minta waktu untuk

21:54pelan-pelan diganti aja. Dan kayak misalnya tadi disebut Ivan soal Lodes,

22:00itu cuma sebetulnya yang diperluin, yang dipakai itu cuma get, kan bisa juga bisa curang-curang dikit lah.

22:07Sebagian besar kan bukan curang ya, maksudnya berakal lah, akal-akalan megaever ya.

22:13Apa? Lodes atau library sejenis kan open source.

22:17Kadang tuh hal yang pengen kita pakai tuh segitu kecilnya sampai ya udah kita buka aja

22:23di bagian metode yang kita pengen, kopas aja.

22:26Kopas dengan kredit kalau misalnya kode kita juga publik, ya gak apa-apa kita tetap mention kredit.

22:33Cuma kan maksudnya ini untuk keperluan performance,

22:37selain performance juga mengurangi dependensi ke library kan.

22:41Nah itu yang pertimbangan kedua.

22:44Ada pertimbangan ketiga nih, tadi udah masuk di list itu sih.

22:50Pertimbangan ketiga adalah kadang kita butuh isomorphic yaitu re-usable function Javascript

22:57yang jalan di server, jalan di client, client atau browser maksudnya.

23:02Nah Intel itu kan web API ya, browser API, jadi bukan.

23:07Eh, atau udah di nulung sih?

23:11Sudah ada, ada.

23:14Nah itu pertimbangan juga, tapi kalau ternyata udah support ya udah, berarti aman bisa dipakai.

23:19Yang gak ada itu yang pakai window object misalnya apapun itu.

23:25Intersection Observer, Resize Observer.

23:27Loh gak semua, dulu fetch aja sampai lama gak ada kan.

23:31Jadi mesti check itu dulu, kalau udah aman di kedua environment jalan ya udah oke itu.

23:37Nih, sudah ada di Deno dan Deno.js.

23:39Uy Deno aja ada, iyalah satu engine ya sama Note. Mantap.

23:46Ada yang Note.

23:49Ada yang bintang, bintang ini apa?

23:52Note, apa ini?

23:54Itu cuma apa?

23:56Oh, beberapa metode yang aneh-aneh.

24:00Yes, gitu. Benar-benar.

24:04Ya, jadi tadi yang perlu di highlight adalah kalau misalkan kita pakai sebuah satu fungsi aja

24:10baik itu dari Lodash kah, atau dari Moment kah, atau dari GQuery kah.

24:16Itu kan open source ya, coba aja ditelusuri, dibuka source-nya kita lihat.

24:22Misalkan, kalau dulu tuh beberapa kali saya sering nemuin kalau misalkan kita udah pakai React.

24:27Kan React ada tuh, react-dom.render kan, react-dom.render.

24:33Yang render adalah app-nya, kemudian tujuan div_id sekian, div_id_app gitu kan.

24:40Nah, div_id_app-nya pakai jQuery selektor.

24:44Ya.

24:46Hanya untuk select div dengan id_app, itu beberapa kali saya pernah lihat.

24:53Padahal kalau nggak ngerti cala selection-nya, mungkin karena sudah terbiasa, kadung terbiasa dengan jQuery.

24:58Sebelum itu kan jQuery udah no-brainer ya, kita install gitu kan.

25:03Sebelumnya dia kayaknya udah ada jQuery kan.

25:05Iya, bahkan kadang-kadang satu web itu bisa lebih dari satu versi jQuery, ada versi jQuery.

25:11Terus WordPress itu tiap plugin bawa jQuery sendiri, pusing-pusing.

25:15Iya, karena nggak kompatibel kan, gitu kan.

25:17Jadi ada plugin yang tidak kompatibel dengan versi 2 atau sebaliknya.

25:21Jadi karena sudah terbiasa, ya jadi pakai dollar dalam kurung, petik satu, pager, app gitu kan, selektor.

25:30Kalau misalkan kita aware bahwa kalau kita bawa jQuery itu ukurannya sekian,

25:36ya mungkin kita harus melihat ini selektor ini kayak gimana cara jalan-jalan.

25:41Mungkin karena nggak aware kalau itu jQuery, mungkin karena itu JavaScript, kiranya.

25:46Bisa jadi.

25:47JQuery itu bagian dari JavaScript gitu ya. Terlalu terkenalnya JavaScript,

25:51jadi semua apa-apa semua pakai jQuery.

25:53Jadinya kirain kalau dollar apa itu adalah bagian dari JavaScript.

26:01Sama kayak Lodas ya, Under School itu udah ini ya.

26:04Dan itu juga karena perkembangan web API kali ya, kalau dulu emang belum bisa.

26:12Maksudnya misalnya beberapa dari Lodas kayak contoh yang paling itu sort sih yang kebayang.

26:16Dulu kan sort belum di, masih banyak yang belum support ya, sort, merge.

26:21Lama-lama sekarang udah ada di stable release semua browser, ya udah itu jadi obsolete.

26:29Dulu justified, cuma sekarang jadi nggak perlu lagi.

26:33- Iya bahkan selektor jQuery, sorry, selektor JavaScript tidak seudah sekarang.

26:41Kalau sekarang kan tinggal query selektor atau query sector all, udah bisa pakai class,

26:46pakai yang hitik, atau pakai pager gitu kan.

26:50Kalau zaman dulu kan harus sell apa, get element by ID, get element by class name gitu kan.

27:00Jadi mungkin agak males gitu ya buat kita develop.

27:05- Trendnya vanilla first development. Semua-semuanya harus vanilla dulu, diutamakan vanilla dulu.

27:15Pakai apa yang ada.

27:17- Iya, ada yang cinta mati sama jQuery ya.

27:21- Cinta pertama nggak perlu lupa ya.

27:24- Satu lagi soal kenapa saya mengurangi memakai library third party.

27:32Itu maintenance-nya, kalau misalnya memikirkan maintainability-nya skala panjang gitu ya dalam waktu yang panjang.

27:43Library third party itu sebetulnya bisa ada vulnerability juga.

27:49Bisa terjadi vulnerability dan mereka buku di update.

27:51- Kayak waktu itu kalau JS ya, ada kasus, ada kasus apa sih, ya vulnerability entah karena sengaja atau nggak sengaja.

27:59Kalau kasus yang ekstrim kan, itu yang kelar JS kemarin.

28:03Yang karena dengan sengaja, ya si creator-nya lagi ada masalah sendiri.

28:07Terus apa, si library-nya di break, atau bisa juga vulnerability yang nggak disengaja, atau karena dari dependensinya ya.

28:18- Dependensi, iya.

28:20- Intinya, kita kan tetap harus aware untuk update itu ya.

28:24Jadi, apa namanya, untuk keep update itu kan ada waktu yang harus diinvestasikan di masa depan kalau kita pakai third party.

28:36Biasanya kalau di GitHub itu kan sudah ada, apa namanya, ada bot-nya ya kalau kita pakai.

28:43- Depend the bot.

28:46- Jadi itu yang bisa bantuin kita untuk update update, keep update library kita yang ada di repository.

28:53Jadi pakai third party bukan berarti plug and play ya sudah ditinggalin, tetap harus dimaintain juga.

29:00Apalagi namanya dependensi hell terjadi.

29:04- Itu sih, satu depend react 14, satu depend react 16.

29:10Padahal kadang itu nggak kritikal, maksudnya itu bahkan mungkin nggak breaking ya,

29:14cuma kan waktu kita npm install ya tetap jadi error ya.

29:19Apalagi lebih parah kalau misalkan tiba-tiba project-nya berhenti.

29:26Terpaksa, kita yang harus maintain kan, misalkan ada bugs dan bugs-nya kritikal,

29:33terus kita send issue, issue-nya nggak dijawab, nggak di bales, terus mungkin dia bilang silahkan PR.

29:41Ya mau nggak mau harus saya pendong tangan kan.

29:44Jadi anggaplah kalau kita pakai sebuah library itu anggap aja seperti kita outsource ke orang.

29:51Kecuali kalau misalkan kita lempar tangan jawab, setelah aplikasinya jadi, sudah oke,

29:57tanda tangan, ACC, duit dapat, udah bye-bye gitu. Kalau itu si aman ya.

30:02- Hand over jalan ya udah. Ya kan emang maintenance sama...

30:07- Maintenance-nya beda lagi.

30:09- Iya, dengan client yang sama tiba-tiba dia bilang,

30:14ya udah kita tanda tangan maintenance dengan harga project yang tinggi,

30:20terus tiba-tiba kita harus maintain banyak terpati library juga capek juga sih ya.

30:25Harus dipikirin benar-benar.

30:29Kalaupun terpaksa harus menggunakan terpati library, ada konsiderasi khusus nggak?

30:34Project seperti apa yang aman, project seperti apa yang sebaiknya dihindari?

30:39- Project yang komunitasnya sedikit itu harus dihindari.

30:48- Dihindari ya? - Iya, karena maintenance-nya,

30:53misalnya kalau contohnya kita lihat sebuah project yang kita pengen pakai,

30:57ternyata library tersebut, bisa lihat ya di NPMJS itu kan,

31:02kapan sih terakhir kali di maintain, terakhir kali di update,

31:07terus kemudian requirement-nya note berapa, misalnya kalau mau di install pakai note ya.

31:13Terus untuk dependensinya apa aja, kan misalnya kita bongkar gitu dependensi apa-apa aja.

31:21Kalau misalnya itu obsolete ya jangan dipakai.

31:24Tapi kalau misalnya yang maintain juga sedikit ya jangan dipakai juga

31:32karena yang ngerjain open source itu nggak bisa dipaksa juga kan dia untuk update.

31:38- Nah itu ada komentar gue bisa ngomong-ngomong open source kan, donate lah biar open source sancaran.

31:44Nah itu cocok tuh komentarnya.

31:47- Kalau nggak bisa donate uang, donate tenaga, jadi kontributor, iya kan?

31:53- Iya kalau, maksudnya itu fair sih kalau kita emang pakai.

31:57Nah itu contoh kasus yang justified justru itu sih misalnya entah gimana suatu library itu,

32:03ya contoh lah DJS atau semacamnya kita emang udah pakai itu dan sesuai kebutuhan kita,

32:10ya nggak ada salahnya kalau emang kita punya waktu kita invest juga ke situ.

32:16Kan sebenarnya apa ya, kayak simbiosis mutualisme berarti kan ya dengan gabung di komunitasnya,

32:26ikut kontribusi kan kita jadi lebih tahu, jadi bisa lebih menjamin lah kayak performa tahu keamanan

32:36karena kita terlibat di situ.

32:40- Terus ada pertimbangan lain sih kalau dari aku, jadi kayak aku kalau buat tanggal nih, buat formatting,

32:48walaupun udah ada Intel, sebenarnya ada satu project yang sampai sekarang masih pakai DJS.

32:54Sebetulnya alesannya lebih karena teranjur sih, itu dulu banget dan butuh cepet dan emang ya udah pakai DJS aja.

33:03Cuma emang pernah ngecek, pertama kan yang dicek itu kayak yang tadi udah dibilang Ivan juga aktif di update,

33:13ya terus supportnya emang udah ya dari pertimbangan awal juga browser dan environment support udah masuk.

33:21Nah ada nih ketiga, coba aja iseng kita baca-baca source code-nya, kita paham nggak maksudnya

33:27kalau itu sesuatu yang mungkin dari style kurang cocok sama kita atau bahkan kita sulit paham.

33:35Kita nggak tahu nih apa yang, kan membaca kode orang lain itu sebenarnya kayak seni tersendiri ya.

33:42Kadang kita nggak tahu ini apa-apaan sih, ini kenapa gini, ini munculnya dari mana.

33:47Nah maksudnya kalau kita lihat sekilas dan kita kurang bisa pahamin kode itu entah beneran karena kurang paham

33:54atau karena emang, karena kita nggak cocok aja sama style-nya atau sama dependensi mereka,

34:00ya udah sebaiknya jangan dipake, kenapa?

34:03Karena kalau misalnya suatu saat ada emergency yang kayak tadi tuh, ada yang apalah ada masalah isu dependensinya,

34:12versinya clash atau ada vulnerability issue, kita nggak bisa dengan gampang nge-fork dan adjust sesuai kebutuhan kita.

34:21Nah kalau misalnya kita paham dan kita cocok, kita cukup paham sama cara kerjanya,

34:27ya udah kalau suatu hari kita butuh entah karena ada masalah atau karena kita perlu optimize aja,

34:33ya udah kita tinggal pinjam bagian-bagian yang perlu aja kan.

34:37Betul, betul, betul.

34:40Oke. Dan kalau pun seandainya akhirnya kita memutuskan untuk bikin sendiri in-house,

34:48ya alangkah baiknya juga itu di-share juga di open source aja gitu,

34:54biar yang lain juga kalau misalkan kayak tadi misalkan momen JS gitu.

34:58- Open source first development sih, bahasa kerennya.

35:03- Mungkin di awal ya nggak di open dulu kan, maksudnya oh kita butuh nih momen JS kayak one day go misalkan yang tadi.

35:10Hanya itu aja misalkan kita butuhnya, ya udah kita lihat kodenya si momen JS,

35:16mungkin kita buat versi kita sendiri dengan bahasa Indonesia misalkan,

35:19abis itu ya bisa kita share ke open source sehingga teman-teman atau perusahaan-perusahaan lain

35:26yang butuh hal yang sama tapi nggak mau install momen JS,

35:31bisa pakai versi kita gitu dan itu juga bagus buat perusahaan gitu kan.

35:36Iya atau default juga bisa.

35:40Ada juga satu hal yang perlu diketahui kalau kita mau open source kan,

35:49itu nggak cuma kayak kita buat open source kan, that's it.

35:54Kita juga harus maintain. - Maintain.

35:57Maintain yang paling berat.

36:00- Investment jangka panjang itu, dan itu harus ada kayak bagiin waktu.

36:05Banyak kan maintainer-maintener open source itu sensian orangnya.

36:11- Iya, karena itu istilahnya bukan job desk-nya dia kan.

36:15- Iya, beda ya kalau jangan disandingkan dengan kayak FNU yang khusus main jobnya adalah maintainer dan open source.

36:24- Tapi kan mulanya dari awal ya dia iseng-iseng bikin produk sampai suatu saat dia bisa full time kan,

36:30sebenarnya ya itu Pat, itu jalur yang valid kalau emang... - Valid juga.

36:35- Jalur yang sangat ideal sebenarnya, jarang terjadi.

36:40- Jarang. - Kalau kita rilis sebuah plugin dan kita masih punya main job,

36:51atau suatu saat misalnya kita rilis plugin sekarang, kita rajin, maintain.

36:55Tapi 2-3 tahun lagi mungkin saja kita sudah beda job description atau sudah pindah company

37:03yang kita nggak pakai produk yang kita buat itu, open source project yang kita buat itu lagi.

37:14Jadi gimana mau maintain kita udah nggak pakai lagi gitu.

37:17Dan itulah saatnya kalau ada yang mau ngambil alih di default, ambil alih silahkan.

37:25Maksudnya ya rilis open source, yes, recommended, tapi juga butuh investasi waktu untuk main job.

37:34- Dan sebenarnya itu seleksi alam juga kali ya, maksudnya dari kebutuhannya apakah banyak orang yang pakai,

37:41apakah banyak orang yang butuh, dari segi si developer, creaturnya juga apakah dia bisa kayak gain traction.

37:49Jadi kayak banyak maintainer yang tertarik bantu dan suatu saat kalau dia udah nggak bisa, si creaturnya sendiri

37:57udah nggak bisa maintain lagi, apa ada yang nerusin, apa ada yang bisa jadi penerus,

38:02itu kan faktornya banyak ya, sebetulnya rumit.

38:06Cuma ada justru sebaliknya ada kasus idealnya sih, kayak Rich Harris kan ya.

38:11Dia kan sebetulnya dulu punya, dia creator swell, tapi sebetulnya dia dulu punya kerja full time ya kan,

38:18dia di New York Times ya. - Dia designer kan aslinya kan.

38:22- Designer, tapi designer, kalau di sana kelihatannya kan banyak designer yang dia design tapi sekaligus coding.

38:31- Nah dia kan di bagian data visualisasi kayak apa sih, artikel berita yang ada interaktifnya kan, data visualisation,

38:41ya infographic yang interaktif lah. Nah dia bikin swell kan buat menuhin kebutuhannya,

38:47kebutuhan kerjaannya pas itu kan, nah ternyata swell bisa sepopular itu dan gaining traction sebesar itu

38:56dan akhirnya sekarang dia di hire full time, ditarik Fairsell buat kerjain ya si swell itu sih produk open source-nya.

39:06- Oh gitu ya, bukan buat dimatikan nggak kalah SES ya.

39:10- Swell kit nggak, biar orang yang pakai swell kit ikut ketergantungan sama Fairsell juga.

39:17- Iya itu juga menjadi alasan kenapa perusahaan-perusahaan besar teknologi terutama di Indonesia ya,

39:27mereka tuh jarang mengeluarkan kayak framework-framework seperti Next.js gitu,

39:33padahal setau saya dulu sempat ada beberapa, ada satu yang saya tahu, tapi akhirnya nggak di-maintain karena ya tentutan pekerjaan.

39:40Jadi ini kan kayak proyek hobi sama pekerjaan sehari-hari. Proyek hobi kita awal-awal mungkin kita berapi-api.

39:48- Excited ya penasaran? - Iya.

39:50Begitu ditumpuk sama kerjaan, deadline dan lain-lain, udah bye-bye gitu kan.

39:54Makanya beberapa dev tools yang cukup menarik atau framework yang cukup menarik biasanya itu dikembangkan

40:02sama perusahaan yang memang memonetisasi dari situ. Kayak Fairsell misalkan, dia bikin framework walaupun tidak ada hubungan

40:10langsung dengan produknya dia yang adalah hosting dan lain-lain, cloud gitu kan.

40:18Tapi banyak orang yang akhirnya pengguna Next.js akhirnya pakai Fairsell. Begitu juga sebaliknya,

40:26pengguna Fairsell juga menggunakan Next.js karena sedikit-sedikit mereka integrasikan kan.

40:31- Kayak function apa? - Itu sebagai funnel sih.

40:34Karena integrasinya gampang kan. Bahkan front-end developer pun nggak usah ngerti infra,

40:40bisa langsung deploy serverless semua. Udah itu kan sebetulnya kayak apa? Bisnis strateginya mereka lah.

40:48- Yes, gitu. Dan akhirnya yang terkenal-terkenal ya semacam itu kan. Next.js, kemudian Remix.

40:58Remix juga dikembangkan oleh beberapa orang gitu. Dan barusan dibeli oleh Shopify.

41:03- Barusan dibeli Shopify ya. - Gatsby kemana ya Gatsby?

41:08Gatsby. Udah bikin perusahaan sendiri, sudah difunding, kemudian turun. Dulu naiknya luar biasa cepat.

41:14Dulu naiknya luar biasa cepat. Ada yang menggaung-gaungkan bahwa ini adalah WordPress killer gitu kan.

41:23Karena kan Node.js JavaScript itu belum punya killer app seperti PSP kalau WordPress gitu kan.

41:34Jadi itu digaung-gaungkan digadang-gadang kan, "Iya, sekarang melempam ya." Nggak tahu ini nasibnya gimana.

41:42- Iya. Gatsby. Karena barusan teringatnya Gatsby, karena barusan selesai masalah Gatsby di hari ini tadi.

41:52- Masih pakai Gatsby. - Karena legacy code kan.

41:56- Oh, legacy code. - Gatsby aja udah legacy ya. Luar biasa ya. Game stack ya.

42:02- Umur library di dunia front-end web itu kayaknya pendek. - Kayaknya kalau setahun itu udah lama banget ya gitu ya.

42:09- Udah usur. Kalau nggak bisa bikin inovasi baru kayaknya cepat itunya ilang.

42:17- Tahu nggak masalahnya apa? Double rendering. Aduh, riak lagi double rendering lagi.

42:22- Astro dong. - Paling males berusaha sama application itu double rendering.

42:31- Di performance ya kenanya. - Iya. Sudah nge-load, nge-load lagi.

42:38- Nah, itu kalau buat temen-temen yang nonton yang tertarik sama itu, kita ada episode yang tentang apa sih waktu dulu?

42:45- Itu island ya. Masalah itu kan mulai dibecain sama island architecture.

42:53- Episode berapa? Episode 2 CSS. Episode 1. - Episode 1 ya. Island architecture.

43:01- Iya, episode 2 kan kita mulainya dari 0. - Kita kan ini JavaScript.

43:08- Jelas script banget orangnya. - Iya, sekarang kan lagi apa, itu kan, framework-framework baru lagi bermunculan kan.

43:15Ada Quick, ada Astro, ada apa lagi itu? Banyak. - Fresh punya nya Denoo.

43:22- Iya, fresh Denoo. Ada macem-macem, ada banyak. Bahkan itu di front-end.

43:28Di backend juga mulai banyak kan rantai-rantai yang baru kan. Ada Boon.js, ada Denoo sebelumnya.

43:35Terus juga kemarin itu, sembari di launching-nya Next.js versi 13 juga mereka bikin banding sendiri kan, Turbo.

43:45- Bo-pack. - Ini Turbo-pack.

43:48- Belum pakai gue. Bagus ya sih? - Iya.

43:49- Udah pakai belum? - Yang bikin adalah yang bikin webpack juga.

43:52Jadi sampai gitu ya polanya. - Serius ya, yang bikin webpack ya?

43:55- Iya, karena sekarang dia juga di-hire sama Versel. Si yang bikin webpack itu. Yang bikin atau maintainer utama atau apa lah semacamnya.

44:06Itu di-hire oleh Versel. Kerja di Versel.

44:11- Dia pakai SWC yang adalah Rust. - Rust-based.

44:15- Iya, terus ada yang menggadang-gadangkan kalau Turbo-pack ini lebih cepat 10 kali dibandingkan VT.

44:21Habis itu FNU nyobain. Ternyata enggak 10 kali lebih cepat. Beda sedikit aja.

44:27- Iya, nafasnya. - HMR-nya yang lebih cepat.

44:33- Hot module reloaded. - Iya.

44:36Itu kan VT kan kayaknya baru setahun belakangan ya populer gitu kan. Terus tiba-tiba muncul Turbo-pack.

44:42Orang udah sibuk, "Ini VT gimana? Ini kok ketimbangan?"

44:46Gitu kan. Udah sibuk. Padahal biasa-biasa aja santai aja kali.

44:51- Iya, dan itu sebenarnya bahasa marketing banget ya sih. Oh iya. - Bener ya, Tobias Copper tuh.

44:57Wah, Vandika ngikutin banget. Mantap. Kita aja nggak tahu namanya.

45:02- Jadi gini, kadang itu bahasa marketing juga sih. Misalnya hot module reloadingnya itu kan fit udah cepet banget ya.

45:090,1 millisecond. Terus katakan lah, terus si Turbo-pack itu emang betul 10 kali lebih cepat.

45:17Tadi berapa? 0,1 millisecond terus jadi 0,01 millisecond.

45:23- Enggak. - Itu signifikan nggak sih buat kita? Kita ngerasa nggak?

45:27- Si fit itu 0,9 dan si Turbo-pack 0,1. - Itu beda 0,8.

45:36- 0,9. Dibuletin ke atas. - Dibuletin gitu ya?

45:40- Kan dia keren. - 10x gitu. 10x engineer.

45:44- Jadi sebenarnya masih di bawah 1 second gitu. Masih instant.

45:48- Iya. - Cuma ya kalau kita ngelihat apa kita switching.

45:51- Realistically. Maksudnya mata manusia itu sadar nggak sih?

45:56Jadi kan sebenarnya itu bukan poin yang kuah banget. Cuma kalau pakai bahasa marketing kan 10 kali lebih cepat.

46:03- Wow. - Wah, langsung heboh ya. Ini kita harus upgrade nih.

46:07- Harus migrate nih. - Itu blazingly fast.

46:11- Blazingly fast. - Hype driven development.

46:19- Iya. Begitulah. Itu memang naturalnya di dunia JavaScript seperti itu ya.

46:27Mungkin di back-end tidak se-wah itu ya. - Oh, nggak juga. Justru kayak PHP kan update terus nih.

46:37Bagi teman-teman nih, sekalian sedikit ngasih tau. PHP 74 bulan depan udah...

46:43- Dipikir-pikir. - Oh, cepet banget. Kayaknya belum terlalu lama ya.

46:47- Nggak. Maksudnya kalau back-end. - PHP 74 itu. Oh, framework ya framework.

46:52- Iya, kalau framework back-end kayak PHP, Laravel udah berapa lama sih berjaya gitu. Belum ada...

46:57- Laravel tuh update terus loh. Tapi bit pakai bit sekarang yang baru.

47:02Nah, kayaknya yang baru itu yang khusus buat PHP 8 ya, kalau nggak salah. Laravel yang baru.

47:09- Iya. Terus juga Node.js lah yang masih JavaScript. Express yang masih banyak.

47:15Ya walaupun ada yang lain ya, tapi yang istilahnya yang masih di top of money itu kan masih express.

47:22Apa lagi? Ruby on Rails, Python, Django, gitu. Jadi kayak nggak secepat yang di front-end gitu.

47:32Front-end bahkan nggak usah nyebut framework gitu kan. Nggak usah nyebut framework.

47:38Nyebut apa bundler-nya aja tuh udah berubah berapa kali, gitu kan. Dari Gulp, habis itu ada webpack, habis itu ada feed.

47:47Sekarang ada tubuh pack. - Web API. Web API aja cepet banget rilisnya, Mas.

47:52- Nah, itu. - Makanya kita ada ngobrolin web.

47:55- Setiap minggu ya. - Ada konten terus aman ini.

47:58- Yang benar aman. - Web API aja banyak.

48:01- Dan nanyain, kita mau bahas apa nih? - Lo kan udah deh, udah banyak ya.

48:09Apa lagi yang mau dibahas nih? Kita sudah berapa jam? Oh, belum jam 9, masih panjang.

48:17- Tadi belum, apa benchmark competition-nya. - Belum habisin sih.

48:20- Oh iya. Jumatnya tadi dimana? Ivan, Ivan, coba. - Iya, iya, iya.

48:23- Bagaimana caranya kita bisa tahu, bisa ngetes salah satu yang perlu kita bandingkan

48:36atau yang perlu kita konsiderasi adalah kecepatannya, kan.

48:40- Kecepatan memproses. - Kecepatan memproses sebuah...

48:43- Jadi, saya mencoba membandingkan antara momen JS menggunakan JSBenz.me.

48:50- Zoom in dikit, tidak kelihatan. - Boleh zoom in dong, zoom in.

48:53- Momen JS dan Intel. Jadi, coba round. Dan ternyata, yang mana lebih cepat?

49:06- Float twist. - Kayaknya momen ya.

49:14- Nah, momen lebih cepat. Kenapa? - Kok bisa?

49:20- Kok bisa, gitu. - Kok bisa?

49:22- Kita coba yang lain. Luxon dengan Intel. Eh, mana Intel?

49:28- Luxon ini library untuk datetime juga ya, sama ya?

49:31- Iya, salah. Saya belum copy paste. Ini hasilnya sama ya. Intel format hasilnya sama.

49:38- Oke. - Luxon dan...

49:44- Kok bisa lebih cepat terparti ya? - Loh.

49:48- Itulah. - Cuma... Oh, running-nya emang satu persatu ya. JSBenz-nya.

49:54- Ya, lebih lambat. - 97% slower, 98% slower. Jauh banget.

50:00- DGS dengan Intel untuk format parsing.

50:08Lama hasilnya ya. Jadi, meskipun menggunakan web API, bukan berarti lebih cepat.

50:20Tapi ada trade-off di sini ya. Ada trade-off yang perlu diketahui.

50:25Kalau misalnya kita load library, pertama ada overhead yang perlu dilakukan, yang di download ya.

50:35Ini saya nggak tahu berapa kilobyte, tetapi tadi dari momen JS ya, Banelphobia tadi mengatakan sekitar 200 kilobyte.

50:44Sedangkan ini 0 kilobyte. Terus pertanyaan apakah di website teman-teman

50:51menggunakan 743 kali operation per second untuk parsing dead format.

50:59- Dalam satu komponen, mungkin nggak ada 70 ribu tanggal sekaligus.

51:05Nah, kan tergantung aplikasinya.

51:07- Iya. Sedangkan loading untuk ngedownload 200 kilobyte tadi di 3G itu butuh 1,5 second.

51:181,5 detik, jadi itu trade-off.

51:21Nah, jadi kalau nggak butuh-butuh amat, ya ini kan yang paling sering membuat lambat bukan operation-nya kan sebenarnya.

51:28Gitu. Jadi, meskipun di berdasarkan hasil tes ini, saya nggak tahu bagaimana dia melakukan tes ya.

51:37Masalah hasil tes ini, mungkin dia nggak pakai browser atau gimana, saya nggak tahu.

51:41Dia lebih lambat, tetapi menurut saya kalau di-compare dengan trade-off harus download 200 kilobyte

51:51atau paling kecil tadi si DGS ya, 2 kilobyte.

51:57Mungkin saya lebih konsiderasi kalau harus memilih library, saya lebih memilih yang paling kecil

52:04untuk mencapai kebutuhan saya kalau harus memilih, daripada memilih library yang berat untuk didownload oleh user.

52:17Oke.

52:19Teruntungan bisa ngetes array juga bisa parsing string, parsing yang lain bisa coba ditest di sini juga.

52:27- Baru tahu nih ada JSBench.me, baru tahu ada tools kayak gini, seru juga.

52:33Ya, sekadar buat mengetahui bagaimana sih performa code yang kita tulis di-compare A dengan B yang Apple to Apple ya.

52:43- Tapi ada benang merahnya juga, beberapa waktu yang lalu saya sempat nonton video dari yang bikin GunJS database gitu ya.

52:55Itu dia sempat compare beberapa library untuk parsing JSON, yang sebenarnya sudah ada.

53:02JSON.parse itu ada kan.

53:04Tapi ternyata, library-library yang lain yang terparti itu beberapa ada yang jauh lebih cepat daripada JSON.parse.

53:12Karena mungkin mereka sudah lebih advance aja ininya, codingnya atau algoritmanya dibandingkan yang standar.

53:23- Atau ada trade-off. - Iya, trade-off tadi. Kita harus download dulu.

53:29- Bukan, maksudnya mungkin si algoritma yang dipakai di Web API, ingat yang di Web API itu kan java skip engine, si developer-nya beda kan menulis code-nya.

53:45Kan speknya mungkin sama.

53:47- Speknya sama, implementasinya bisa beda, dan pertimbangan backwards compatibility-nya itu tinggi banget kan.

53:53Pertimbangannya banyak lah, nggak bisa tiba-tiba diubah di optimize maksimal.

53:59- Yang nge-develop third party library atau library javascript itu ada trade-off yang dilakukan.

54:07Mungkin nggak support dengan Unicode, dia nggak peduliin.

54:16- Atau tidak optimize untuk engine-nya Firefox mungkin gitu ya.

54:21Bisa jadi atau nggak support UTF-16, UTF-64, dia cuma UTF-8, mungkin ya, dia cuma support ASCII karakter.

54:30Bisa jadi, trade-off yang dilakukan banyak kan. Jadi bisa lebih cepat.

54:35- Contohnya, saya sering membandingkan antara looping di javascript, antara forage atau map, itu mana sih yang lebih cepat?

54:53Coba aja teman-teman PR di rumah, apa sih yang lebih cepat antara map, forage atau for, untuk looping di javascript?

55:02- Kayaknya kalau boleh nebak, for yang paling cepat. - Yang paling lama biasanya punya yang paling cepat ya.

55:12- Yang paling lambat itu yang paling lambat, forage. - Tapi banyak banget yang pakai forage.

55:21- Yang pakai forage. - Masa banyak yang suka pakai forage, saya lihat beberapa, maksudnya di dunia saya ya.

55:33Nggak tahu kalau di dunia teman-teman, di dunia saya melihat developer-nya, kok pakai forage sih?

55:39- Kita udah pakai map sekarang, semenjak react mah udah map semua.

55:43- Apa-apa di map, apa-apa di filter. - Yang tahu nya map filter reduce udah itu.

55:51- Map filter reduce. - Funksional programming adalah map filter reduce.

55:59- Oke, Eka, ada yang mau disampaikan? Apa nih, fitur CSS? Atau mau jawab pertanyaan dari Slido?

56:13Ada pertanyaan bagus nih dari Slido. Ini, front-end logging, yang benar dan baik gimana?

56:21Soalnya kalau build production kan kodenya udah di minify, dan sulit kalau mau cari tau error-nya kenapa.

56:29- Tergantung error dimana gak sih? - Tergantung error dimana? Bukannya bisa pakai map ya?

56:37- Css.map? - Css.map. Chrome terbaru, Chrome terbaru, 108, ntar gue cari itu.

56:51Kita kasih map, map file, kita bahkan bisa kasih breakpoint, dan di tracing-nya itu bisa lebih jelas, bisa kita filter out tracing-nya.

57:02Jadi bisa pakai developer console. - Langsung pakai developer console bisa ya?

57:09- Iya. - Oke, oke. Terus ada teknik logging yang lain gak?

57:16Bisa pakai ini kan kalau gak salah ya? Kayak semacam, ini nama product sih ya.

57:22Jadi kayak ada terparti yang kalau ada error dia akan kirimin ke sebuah service, kemudian kita bisa lihat di dashboard-nya.

57:31- Aku punya dashboard-nya. Itu nama product-nya apa sih? Error logging service ya?

57:36- Error logging service, kayak Regan, Centri, dan lain-lain itu ada banyak.

57:45Itu menjawab gak sih pertanyaannya? Logging itu logging error kan bener ya?

57:50- Bisa macam-macam ya, logging performance juga bisa.

57:55Sebetulnya kalau yang paling simpel, paling basic, tetap console log atau warn atau error ya, sesuai kebutuhannya kan.

58:09Dan emang di kode kita handling-nya aja. Maksudnya kadang kita lupa try catch ya, try catch atau semacamnya.

58:17Jadi kalau itu kan ngaruh juga, kadang ada suatu kesalahan, error-nya karena gak di-catch atau gak di-handle dengan baik, error-nya gak jelas apa.

58:28Nah itu kan investigate-nya agak susah juga, cuma kalau kita catch kan lebih jelas karena pas kita nulis kodenya kita tahu tuh konteksnya apa.

58:36Apa yang gak ada atau apa yang hilang, missing atau invalid.

58:41Tapi yang tricky-nya adalah ketika istilahnya mungkin di kita gak kebaca atau gak kelihatan.

58:48Tapi yang tricky-nya adalah di user, bukan di laptop kita atau di komputer kita.

58:55Jadi makanya butuh tools-tools seperti Centri, tujuannya adalah setiap ada error dia akan kirimin.

59:01Oh, di user ini, browser-nya ini, versi OS-nya apa, error ini nih.

59:12- Terus di round apa dan apa, request shader-nya apa. - Iya.

59:16Tapi jangan lupa kalau misalnya produk kita beroperasi di area yang kena GDPR 100 jenisnya, itu ya harus ada disclosure-nya kan.

59:26Harus ada disclosure-nya dan kita harus, itu kan bisa ada personally identifiable data ya.

59:33Karena itu kan ngirim juga apakah user dalam keadaan login atau gak.

59:37Kan bisa aja misalnya error-nya waktu user yang login, ngeakses route yang mungkin untuk guess atau apa.

59:46Itu punya status login user kekirim, cookies kekirim, request shader dan mungkin referrer segala macam kekirim.

59:55Nah itu kalau kita punya kebutuhan legal compliance, kita harus punya mekanisme buat handling itu.

1:00:03Cuma kalau soal topic error logging ya yang paling manjur, paling oke ya kayak gitu sih pakai layanan yang buat logging ya.

1:00:13Ya, itu kalau untuk sudah di sisi klien. Tapi kalau dari sisi kita developer, ya itu tadi.

1:00:21- Jangan lupa di handle dengan try catch kah atau dengan apa? - Sama satu lagi dependensi, kembali ke dependensi.

1:00:30Pakailah tools yang ada di browser namanya Network Request Blocking.

1:00:36Coba blocking-blocking misalnya contoh, ada kita memakai jQuery contohnya.

1:00:45- JQuery lagi. - Tetapi, pakai jQuery. Terus ternyata saat jQuery kita download dari CDN, ternyata CDN-nya lagi down.

1:00:54- CDN-nya diblock. Apa yang terjadi? - Apa yang terjadi dengan situs kita.

1:00:59Masa jadi blank white space atau jadi berantakan, usahakan.

1:01:05Coba tes-tes aja pakai Network Request Blocking, klik dari JavaScript kita, URL-URL mana yang jadi dependensi.

1:01:14Jangan sampai kayak contohnya, contoh misalnya kita paling sering nih kejadian adalah dia script third party atau vendor di load dari tech manager.

1:01:28Tetapi untuk ngerunning script itu, dia nge-load third party vendor ternyata diblock oleh si ad blocker.

1:01:39Tetapi tech managernya enggak. Akhirnya JavaScript jadi error. Runtime jadi error kan.

1:01:45Coba gitu, kalau misalnya ada misalnya Google Analytics, misalnya ada analytics-analytics lainnya sering diblock oleh ad blocker karena dia tracking.

1:01:56Coba tracking-tracking itu atau script-script tertentu diblock, maksudnya diblock dan cek apakah kode kita masih aman enggak.

1:02:12Jadi kita harus seolah-olah berada di sisi klien. Kode klien berarti, oh jangan-jangan pakai VPN nih. Bisa jalan nggak kode kita pakai VPN?

1:02:26Jangan-jangan ada ad blocker. Tahu-tahu ad kita pada nggak jalan tuh gara-gara ad blocker.

1:02:32By default rata-rata semua browser sudah pakai ad blocker. Jadi kita harus aware juga kalau kita pasang analytics dan kita ada di kode kita

1:02:45ngedependensi ke analytics tersebut, masa kode kita error gara-gara analytics-nya nggak ke-load?

1:02:50- Harus ada itu ya, callback-nya gitu ya? - Iya, kita harus tahu.

1:02:55Nah itu bisa applicable juga sebetulnya yang soal third party itu bisa ke first party komponen kita sendiri kan.

1:03:03Misalnya gini, kadang ada kasus yang umum kita fetch menjalankan network request ya.

1:03:09Cek user ini punya pos atau nggak. Kalau usernya punya pos, mungkin kita punya pos komponen.

1:03:15Tapi kan itu lazy loaded kan, karena satu belum tentu user sedang di dalam keadaan login, dua belum tentu user punya pos, jadi komponen pos kita juga lazy loaded.

1:03:27Itu kan sebenarnya point of failure-nya banyak ya. Bisa nge-fetch-nya yang gagal, network request-nya ini yang gagal entah kenapa.

1:03:34Ya bisa aja service kita kan sekian detik down bisa. Jadi emang pos-nya nggak muncul.

1:03:40Bisa juga mungkin aja ada kasus kita import lazy loaded komponennya yang gagal.

1:03:46Nah itu kalau misalnya berkaitan sama perkara logging error tadi, itu kan tergantung level kita handling-nya gimana pas kita bikin kodenya ya.

1:03:56Jadi kalau itu hal-hal yang bisa di expect, bisa di handle dari awal itu sebetulnya.

1:04:04Nah ini juga sering nih kejadian ya, lupa handling data null atau undefined.

1:04:10Itu salah satu kekurangannya JavaScript ya.

1:04:14Selalu cek response tipe data sebelum eksekusi.

1:04:19Response tipe datanya seperti apa. Atau bisa pakai, terus ini kalau di ESLint gitu bisa ditangkap nggak sih? Nggak bisa ya?

1:04:26- Karena ini runtime. - Kalo kasusnya data bisa null, ya tergantung type definition kita kan.

1:04:34Kalau kita punya type definition yang bener.

1:04:38- Maksudnya kalau ngarapin response dari network request gitu. - Dari RCPI gitu-gitu ya.

1:04:46- Kan kita nggak bisa. - Harus cek lagi ya. Kecuali GraphQL mungkin ya lebih strict kan.

1:04:51Iya, GraphQL ada types-nya soalnya.

1:04:55Eh yang membantu banget itu tuh, apa namanya? Tandatanya itu loh, optional change.

1:05:01- Optional change. - Itu namanya susah.

1:05:05Ya optional, apa, kalau dulu kan kita harus cek kan, if data dot status,

1:05:12ya data dot length sama lebih besar dari 0, maka kita tampilin data dot name gitu kan.

1:05:19- Tapi sekarang kita bisa dengan data dot name. - Data dot datanya dot map.

1:05:24Lumayan bantu lah. Apasih itu namanya? Penasaran.

1:05:29Ya, atau yang kalau mau lebih advanced lagi yang berhubungan dengan null atau undefined

1:05:36untuk menangani supaya nggak kejadian yang aneh, ya bisa pakai yang type language

1:05:41yang dikompilasi ke JavaScript. Contohnya ada typescript, ada rescript,

1:05:46script-script yang lainnya, itu mereka udah. - Flow gak sih? - Flow, kayaknya udah nggak deh.

1:05:54Ya, kalau bahasa-bahasa seperti yang ada type-nya itu dia tidak bisa menerima null.

1:06:05Sebenarnya bisa, cuma harus di handle kan, harus di handle.

1:06:09Kalau null itu maka harus apa gitu.

1:06:12Jadi lebih aman dari sisi user, meskipun dari sisi engineer ya capek.

1:06:18Tapi jauh lebih capek kalau dapat error dari user.

1:06:24Itu lebih capek lagi, mendingan capeknya di awal.

1:06:26Tapi begitu udah di production, udah aman.

1:06:29Oke, ada lagi yang mau dibahas? Eka atau Ivan?

1:06:37Apa ya? Gak ada sih. - Gak ada ya. - Cukup kayaknya ya.

1:06:42Cukup ya, udah satu jam kita ngobrol panjang lebar sampai ngelantur kemana-mana.

1:06:47Menarik juga. - Seru ya.

1:06:49Jadi mungkin untuk malam ini kita udahan dulu ngobrol-ngobrolnya.

1:06:54Kita ketemu lagi minggu depan, insyaallah.

1:06:57Kalau gitu kita pamit, kita bertiga pamit.

1:07:01Saya Riza, ada Ivan dan juga ada Eka, sampai ketemu lagi minggu depan.

1:07:07Selamat malam. - Hai, malam.