Ngobrolin Storage - Ngobrolin WEB ep18

1:50Publishing site, bukan di Indonesia, tapi masih di Asia.

1:56Okay.

1:58Traffic-nya lumayan.

2:0020 jutaan sampai...

2:05Lumayan.

2:07Pick-nya, dia pernah pick 80 juta sebulan.

2:12Page view sebulan.

2:14Jadi per harinya itu lumayan lah ya.

2:16Kayak sejuta apa dua juta gitu per page view per hari.

2:19Terus kemudian...

2:23Masih berkutat, saya sendiri masih berkutat soal side performance dan core web vital dan fitur-fitur tambahan lainnya.

2:33Namun musuh terbesar saat ini, saya itu, bukan LCP, TTFB itu udah lewat masanya.

2:42Sekarang musuh terutama itu layout shift.

2:45Sulit banget.

2:47Content layout shift itu celes ya.

2:51Banyak iklan atau gimana?

2:54Iklan gampang, iklan itu ketahuan, size-nya.

2:58Tahu nggak apa yang paling susah?

3:01Dynamic content, misalnya lo posting gitu.

3:04Embed, Twitter embed, Instagram embed, TikTok.

3:10Karena kalau YouTube masih bisa di prediksi.

3:14Ukurannya dijelas ya.

3:17Karena Instagram embed atau TikTok embed itu depend sama content.

3:22Nah itu sedang saya nggak bisa menaruh minimal height-nya berapa.

3:28Karena kalau saya bikin terlalu besar, content-nya jadi bolong-bolong.

3:33Kalau saya bikin terlalu kecil, terjadi layout shift.

3:37Jadi mau gimana?

3:39Jadi sedang saya research, jadi target saya saat ini sedang mengumpulkan data sendiri.

3:45Untuk elemen-elemen tertentu.

3:48Jadi saya bisa tahu embed itu apa, dari mana.

3:52Nanti saya cari rata-ratanya berapa.

3:54Layout shift bakal terjadi, tapi saya minimal kan.

3:57Jadi masih itu.

4:01Selanjutnya masih ada satu sisi site WatCamp Asia tanggal 17 Februari di Bangkok.

4:13Jadi WatCamp Asia audiensnya 1800 orang yang sudah beli dikit.

4:20Di Bangkok tanggal 17 sampai 19 Februari.

4:25Jadi saya organizing, jadi organizer termasuk 2020 yang dibatalkan.

4:34Sekarang 2023 akhirnya kita jalan lagi.

4:37- Offline lagi? - Sudah setahun ini.

4:40- Pertama kali offline berarti ya sejak?

4:43- Enggak, kemarin. Kampat kan?

4:45- WatCamp Asia 2020 itu sudah mau terjadi, tetapi dibatalkan karena pandemi hit.

4:54Jadi Februari 2020, namun Desember 2019, pandemi kan.

5:03Akhirnya semua di cancel. Sekarang 2023.

5:09Dan mudah-mudahan doain, teman-teman semua doain supaya lancar.

5:14Jadi kita bisa punya WatCamp Asia pertama kali di 2023.

5:20- Wah, nanti bisa kita review ya. - Kenapa?

5:24- Lo doang atau wakil Indonesia-nya banyak? - Ada 3 orang.

5:30Saya, mbak Devin, yang organizer ya.

5:34Saya, mbak Devin, dan satu mas Haris Rustiono dari Jawa Timur.

5:41- Ada yang jadi speaker dari Indonesia? Pasti ada dong?

5:45- Nggak tahu. - Tahu saya nggak ada.

5:50- Semoga tahun depan. - Udah ada, belum ada.

5:55- Udah tutup ya GFP-nya? - Sudah rangkum semua.

5:59- Udah rangkum lagi banyak. - Udah sayap tahun depan.

6:03- Tahun depan harus ada. - Harus dong.

6:06- Iya. - Nah, yang nonton, siap-siap GFP buat WatCamp Asia.

6:13Tahun depan siapa dari sekarang?

6:15- WatCamp Asia bagi yang nggak dapat tiket, karena tiketnya udah habis.

6:19Jadi jangan tanya saya. Udah habis dari kapan tahun.

6:23- Oh, nice. Berarti apa? - Ada online-nya ya.

6:27- Ada online-nya juga. - Jadi hybrid ya?

6:31- Iya, ini gue kasih link-nya buat siya.wotcamp.org.

6:38- Oke, sambil menunggu. Eka, gimana? Ada update apa nih? Kerjaan-kerjaan?

6:45- Wah, lagi seru nih kerjaan. Jadi aku kerjanya tuh di sebuah NGO.

6:51In-house, konsultan. Jadi maksudnya ngerjain satu produk doang sebetulnya.

6:56Produknya itu semacam, ada user-generated kontennya ada,

7:02static kontennya ada, tanpa iklan, karena ini lebih buat

7:07ada unsur komunitas sama konten manusia.

7:12monthly active user-nya nggak, apa, kalau active user nggak sebanyak, Ivan.

7:17Hanya harian, setiap hari tuh di angka ratusan aja.

7:21Cuma mungkin challenge-nya adalah timnya kecil banget.

7:25Tim developer-nya itu kayak cuma sekitar, kalau yang loading, 3 orang.

7:30Sama QA, UI/UX 1 orang, QA-nya 2 orang.

7:35Apalagi timnya kecil banget dan kerjanya harus cepet banget.

7:40Karena sering, apa, sebenarnya untuk funding,

7:45kan nggak pakai iklan dan nggak menjual apapun.

7:51Terus banyak berurusan dengan funding atau sponsor atau kerja sama.

7:56Jadi sering harus iterate feature-feature, nyoba suatu feature.

8:01Terus sedikit-sedikit ditambahin buat demo misalnya.

8:06Atau mungkin untuk try out dengan pihak yang propose suatu feature.

8:12Belum tentu develop sampai selesai, jadi kayak tek-tekannya

8:15mesti selalu vigil.

8:19Terus yang kalau belakangan ini, yang lumayan seru adalah

8:23baru dapet kayak hand-over produk eksternal

8:27yang di-develop oleh pihak eksternal, pokoknya kita nggak dikasih dokumentasi.

8:33Cuma, maksudnya, di luar itu, beyond itu, nggak bisa tanya-tanya

8:37ya pokoknya nggak ada kontak dengan yang bikin.

8:39Jadi kayak, ya udah, harus mengadaptasi.

8:43Dan itu emang produknya di semacam di hand-over.

8:46Beberapa bagiannya mau diintegrasi ke produk tempat kerja aku.

8:51Cuma ada yang disesuaikan.

8:53Dan pusingnya kadang kayak tiba-tiba dapet codebase

8:57yang dokumentasinya kurang lengkap.

9:00Atau misalnya nggak pakai TypeScript sama sekali,

9:04terus beneran library-nya mesti nyocokin.

9:07Oh, nggak, di auto-update ke versi terbaru.

9:11Jadi untuk ngecek dokumentasi, cross-check dokumentasi pun

9:14mesti ngecek versinya berapa.

9:17Ya, itu yang paling berkesan, yang belakangan sih.

9:20Sampai mau nangis lah udah, handle JavaScript semua,

9:25nggak ada type system, bahkan nggak ada JSDoc-nya gitu,

9:28nggak ada JSDoc, sama versinya nggak tahu gimana,

9:31nggak matching semua sama dokumentasi.

9:34Rewrite, rewrite, rewrite.

9:38Nggak bisa berburu-buru kejar tayang.

9:40Iya, nggak tahu apa yang rewrite.

9:43Ada beberapa bagian yang sukses dapet sign-off

9:47buat bikin baru, pakai Astro.

9:50Ada bagian yang emang setelah dicek,

9:55itu reasonable bahwa daripada maksain,

9:58terlalu banyak yang dimodifikasi dari versi lama.

10:01Jadi kalau bikin baru, pakai stack yang pilihan sendiri.

10:05Karena gua satu-satunya front-end, jadi bebas milih stack juga.

10:08Asal bisa justify ke seluruh tim,

10:12dan misalnya anggota tim lain mau edit,

10:16atau mau bikin modifikasi minor, harus jelas.

10:20Asal semua udah oke, ya udah.

10:23Jadi sebenarnya agak random, agak wild-wild quest juga,

10:28cuma seru.

10:30Cuma seru, oke.

10:32Tapi setidaknya ada dokumentasi, kan?

10:34Atau nggak ada sama sekali? Ada, kan?

10:36Nggak, kalau yang kayak data model, data base,

10:39yang gitu-gitunya sih ada.

10:41Cuma kalau udah yang di function-functionnya,

10:44ya kayak isinya lah, kayak nggak ada testing,

10:47sama nggak pakai jesdoc ataupun TypeScript.

10:50Dokumentasi biasanya dikode itu sendiri katanya.

10:53Kalau mau baca dokumentasi, baca aja.

10:56Nggak ada, nggak ada komennya juga.

10:58Nggak ada komen, nggak ada TypeScriptnya,

11:01atau TypeSystemnya, nggak ada jesdocnya.

11:03Jadi nggak ada interesting-nya.

11:05Oke.

11:07Nah, terus versinya bukan yang terbaru.

11:09Jadi pas nggak buka, misalnya pakai LibraryX,

11:13ya, bisa lah.

11:15Mesti nyocokin sendiri.

11:18Ya, ya, ya.

11:20Lumayan latihan mental lah.

11:22Latihan mental.

11:24Udah coba pakai change GPT, rewrite my code gitu.

11:28Belum minta kredit.

11:32Belum minta kredit.

11:34Masih gratis kok.

11:36Tapi suka down, sering down malah, lebih sering.

11:38Iya, karena gratis.

11:40Oke.

11:44Kalau saya nggak ada update berkait dengan coding-codingan sih ya.

11:48Jadi agak ini juga ya.

11:50Mungkin share sedikit lagi ya.

11:52- Dimana update-nya soal ekosistem?

11:54- Ecosistem. - Nah, ini yang penting.

11:56- Iya.

11:58- Kalau saya terakhir-terakhir ini lebih sering ngerjain

12:03ada sesi foto.

12:07Jadi nggak ada yang sama coding.

12:10Sesi foto, terus juga besok hari Rambu

12:13ada

12:16hari Kamisnya, grand launching-nya.

12:20Jadi persiapan ke sana.

12:23- Kita diundang nggak nih?

12:25- Boleh, silahkan datang.

12:27- Diundang grand launching, ada makan-makannya nggak sih?

12:31- Ada dong.

12:33- Cuma, maksudnya sebagai coder, programmer

12:36biasa coding, maksudnya dulunya biasa coding.

12:39Terus sekarang kan kayak ngurus launching, blablabla,

12:41mesti lebih banyak urusan sama manusia ya.

12:43Daripada biasa ya, biasa ya sama layar, sama pixel.

12:47Sekarang sama manusia, stres nggak?

12:50- Stres sih nggak ya.

12:54Mungkin ada fase adem-samasanya.

12:57Kalau misalkan udah terlalu lama ketemu sama orang

12:59bersosialisasi, mungkin ada stres juga,

13:01paling cepat-cepat pulang, penginin diri, gitu kan.

13:04Tapi di sisi yang lain lebih ke kangen sih,

13:06kangen bikin produk, kangen coding, gitu.

13:09Makanya ini kan, makanya banyak-banyak yang acara live streaming

13:13kayak gini, ngobrol sama teman-teman yang masih

13:16intens dengan coding gitu kan,

13:18masih intens dengan produk, live streaming juga

13:21buat belajar-belajar sendiri.

13:23Karena di kantor udah, basically udah nggak coding lagi.

13:26Ya, walaupun coding, mungkin lebih ke bikin use case lah.

13:29Bikin misalkan contoh aplikasi untuk ngajarin orang

13:33cara penggunaan state management misalkan atau apa gitu.

13:37Jadi bukan real product.

13:39Ya, jadi udah selama beberapa tahun terakhir ya,

13:42begitulah pekerjaannya.

13:44Meminangkan, cuman ada kangen juga ke programming,

13:50bikin produk, bikin fitur.

13:53- Berarti bisa kan dikonekin aja sama Eka.

13:57Bantu aja Eka ngerewrite itu.

14:00- Ya nggak bisa, kalau udah bantuin.

14:04Ini apa, ini commitment waktunya kan harus ada.

14:12- Nah, ini ada komentarnya nih, lebih enak coding.

14:15- Tuh, lebih enak coding daripada debat. Benar, setuju.

14:18- Nah, cuman ini kalau dari aku sih kerasa banget nih,

14:23stand-up meeting kan pengen cepetlar ya,

14:25biasanya terus iya-iya aja.

14:27Cuman kalau lagi ngerjain produk atau fitur yang high velocity gitulah.

14:34Terus banyak potensi buat miss.

14:37Mungkin misscom, entah orang produk pengennya gimana

14:41dari sudut pandang produk, dari designer gimana, dari kita gimana.

14:46Kadang kita harus memperjelas dari sisi kita yang programmer.

14:54Kita kan mungkin ada kecenderungan males jelasin ke orang

14:58yang bukan perspektif coding ya.

15:01Cuma itu kayaknya yang harus dibiasain sih.

15:05- Iya, tapi meeting, ya nggak tahu ya, stand-up dan lain-lain itu

15:14sebenarnya perlu juga kan buat koordinasi.

15:16Kalau misalnya kan kita benar-benar kerja sendiri ya,

15:19bukan kerja, menamanya.

15:21Nanti itu dibahas. Yang satu bikin ini, yang satu bikin itu nggak nyambung gitu kan.

15:25- Cuma mungkin biar nggak lama ya identifai aja bagian apa

15:28yang "wah kayaknya kita abis ini perlu janjian mojok nih."

15:31- Nanti sih stand-up itu jangan sampai bertela-tela pastinya.

15:37Karena stand-up itu kalau saya ya, di tempat saya,

15:40masimal itu 15 menit aja sih, nggak boleh.

15:43Sebisa mungkin ya, kita jarang banget lewat dari 15 menit.

15:47Jadi cuma kayak update aja, kayak temperature check yang ini, bagian ini.

15:51- Ada yang blocking nggak gitu ya?

15:53- Ada yang nge-block, nggak.

15:54Kalau ke-block, hubungi siapa?

15:57Atau nanti jadi extent item setelah stand-up, di-unblock gitu.

16:02Jadi karena di stand-up itu kan kita dapat attention product owner.

16:08Kayak full attention gitu.

16:10Oh, masalahnya ini berarti nanti dikontekin sama bagian ads, contohnya.

16:14Oh, si ini punya masalah ini, hubungannya sama desain.

16:17Ternyata desainnya masih ke-block sama bagian approval.

16:22Approval bagian whatever it is.

16:25Belum di-approved.

16:26Berarti nanti konteksi ini kejar atau langsung dia buka slide-nya, kejar.

16:33Ini gimana update-nya? Udah, lanjut, next.

16:35Jadi di stand-up itu dalam 15 menit, banyak hal bisa ke-unblock.

16:42Daripada kita ngejar-ngejar secara asingkronos.

16:45Oh, berarti ininya harus jago.

16:47Apa namanya?

16:48Yang mengatur, bukan mengatur ya.

16:51Kayak striker.

16:53Itu organizer-nya harus ini ya.

16:56Iya, itu tugasnya PM kalau tempat saya.

17:00Iya, istilahnya harus.

17:02Dia harus berani nge-cut, omongan.

17:04Misalkan udah terlalu panjang nih, langsung ditutup.

17:06Oke, kita nanti ngomongin ini setelah meeting ini ya.

17:09Kita ngumpul lagi beberapa orang.

17:11Oh iya, iya.

17:12Harus ada gitu kan.

17:13Yang tempat saya, oke, kita sekarang sudah jadi kayak obrolannya sudah terlalu dalam nih.

17:17Masa nya relevan, tapi udah makin deep.

17:21Udah di group tertentu aja.

17:22Udah di...

17:23Bikin janji aja.

17:24Jadi, nggak perlu kita bahas, terpisah.

17:27Meeting terpisah.

17:28Iya, harus ada yang begitunya kan.

17:30Yes.

17:31Oke, oke.

17:32Nah, kita udah ngelantur sedikit.

17:34Banyak sih.

17:35Banyak.

17:36Jadi, topik malam ini kita akan bahas tentang media penyimpanan atau storage ya.

17:44Storage.

17:45Yang di browser.

17:46Ya, yang hanya di browser, tidak ngomongin database di sisi backend.

17:50Kita nggak ngomongin Postgre, nggak ngomongin database SQL, NoSQL, dll.

17:54Tapi yang hanya sedia di browser.

17:56Nggak ngomongin hard disk, nggak ngomongin SSD juga.

17:59Yes.

18:00Atau MMC gitu ya.

18:06SSD card.

18:07Masih jatuh freeze tuh.

18:10Luh.

18:12Luh.

18:13Iya.

18:15Aduh.

18:16Bentar, kayaknya mati lampu atau internetnya down.

18:20Wah, iya masih freeze.

18:24Oke.

18:27Kita lanjut, teman.

18:30Kita lanjut aja yuk.

18:31Jadi, Eka gimana? Ada saya atau oh Eka aja yang lanjut?

18:37Evan aja deh.

18:38Oke.

18:39Jadi kita kan mau ngomongin soal storage atau media penyimpanan yang ada di web.

18:44Nah, media penyimpanan di web tuh kan ada beberapa.

18:47Ya, kita coba buka media, ada beberapa dan yang paling sering itu,

18:54kalau teman-teman sering dengar itu local storage atau session storage.

18:59Session storage ada.

19:00Saya coba share screen.

19:02Oh, bisa share screen ya?

19:05Bisa.

19:08Oh, saya bisa share tapi kayaknya nggak bisa naikin ke,

19:12hanya bisa Mas Liza yang naikin ke live.

19:18Iya, emang gitu.

19:20Cerita.

19:21Ya betul.

19:22Buka sendiri-sendiri deh.

19:24Minggu lalu kan kita bahas cookies ya.

19:28Cookies, iya.

19:29Cookies itu juga sudah masuk storage.

19:31Cuman cookies itu ada limitationnya kan.

19:33Dia hanya bisa 16 kilobyte dan 16 apa 64 ya.

19:38Saya lupa.

19:39Size-nya terbatas.

19:40Size-nya terbatas dan hanya bisa string.

19:43Cuma bisa string sama satu lagi.

19:45Apa, selalu karena fungsinya emang buat nyeimbangin apa,

19:51kirim state ke server, selalu terbawa dengan request ya.

19:56Di request.

19:57Nah, ada storage yang lain.

19:59Itu pertama, local storage.

20:01Terus kemudian session storage.

20:05Ada index DB.

20:08Ada web SQL.

20:11Cuma jangan pakai lagi web SQL ya.

20:13Karena web SQL itu sudah.

20:15Terutama malah ada yang namanya web SQL.

20:17Ya, web SQL jangan dipakai.

20:20Jadi nggak usah disebut aja.

20:21Dan terakhir ada cache yang sering teman-teman.

20:24Caching.

20:25Caching. Kita pernah bahas caching nggak sih?

20:28Cache itu kita pernah bahas sekilas waktu kita bahas service worker.

20:32Kita bisa pakai service worker buat mencegat data yang masuk.

20:36Disimpen dulu ke cache.

20:38Buat misalnya yang paling sering kalau lagi offline.

20:41Kita bisa serving dari cache.

20:44Itu juga salah satu bentuk penyimpanan di browser.

20:48Betul.

20:49Jadi kita mau fokus ke tiga hal.

20:55Local storage, session storage, dan index DB.

20:58Dan apa fungsi-fungsinya.

21:00Eka mau lanjut.

21:03Kayaknya Eka ada beda.

21:05Local storage dan session storage.

21:07Dan kapan pakai local storage, kapan pakai session.

21:09Nah, ini sih bagusnya kalau sambil buka artikelnya.

21:14Cuma nggak bisa ya.

21:15Intinya itu kedua hal itu masih bersaudara sih.

21:19Jadi dalam arti API-nya sama sintaksnya dan segala macem caranya sama

21:25antara local storage dan session storage.

21:28Tapi sesuai namanya session itu ya cuma persis atau tersimpan di satu session.

21:35Apa yang dimaksud session?

21:38Ini session browser.

21:39Jadi kalau misalnya tab atau window-nya ditutup, ya udah datanya ilang.

21:45Jadi session storage itu cuma buat penyimpan di satu session browser itu saja.

21:51Sementara kalau local storage, walaupun ditutup, dibuka lagi,

21:55ya bakal ada terus sampai dihapus atau di clear secara manual oleh user.

22:01Storage ini nempelnya di domain kan ya.

22:04Di domain dan subdomain, ya kan?

22:09Local storage itu nggak nempel di browser.

22:13Iya, tapi benar.

22:16Maksudnya local storage nempel di browser tetapi connect-nya ke domain.

22:22Jadi kalau kita buka domain berbeda, storage-nya container-nya beda lagi.

22:28Jadi hanya bisa diases oleh domain yang kita pakai.

22:35Jadi kalau misalnya web.dev atau misalnya kita session storage-nya diset melalui web.dev,

22:48maka hanya bisa diases datanya jika di website web.dev.

22:54Waktu setiap kita buka web.dev sama seluruh part di dalamnya.

22:59Jadi behavior-nya mirip cookie ya.

23:02Termasuk subdomain, kalau nggak salah ya.

23:06Nah, karena ada perbedaan nantinya.

23:11Sebentar lagi akan muncul juga namanya shared storage.

23:16Shared storage API namun masih on trial.

23:24Jadi shared storage ini bisa diases dari domain yang berbeda.

23:28Oh iya nih. Allow access to unpartitioned cross-site data.

23:33Cross-site, betul.

23:35Tapi status-nya masih apa ini? Pro-posal?

23:39Masih origin trial ya?

23:42Origin trial. Ini iniisiatif dari Chromium team.

23:47Jadi diperkirakan masih Chromium only ya?

23:53Untuk beberapa tahun ke depannya.

23:56Kalau tidak diperjuangkan secara cepat, ya mungkin masih lama.

24:01Tapi sepertinya ini pendapat pribadi.

24:07Saat terpati cookies nanti sudah di-cut, maka hanya bisa akses data

24:13untuk multiple cross-site hanya bisa lewat shared storage.

24:18Dan ini sangat berguna bagi privacy.

24:22Karena untuk bisa website, untuk bisa akses data yang ada di shared storage,

24:30itu butuh konsen dari si pengguna.

24:35Penerima, misalnya website A sama website B.

24:39Berarti dua-duanya harus konsen ya?

24:42Betul. Untuk data itu disimpan dan data itu bisa diambil.

24:45Biar bisa terbaca.

24:47Nah, dari local storage dan shared storage itu sendiri,

24:51itu ada kasus yang menarik.

24:59Jadi begini, studi kasus bagaimana kita bisa menggunakan storage di web.

25:04Yang paling simple.

25:06Zaman dulu saya pernah sedikit kesal sudah nulis email panjang-panjang

25:13via web atau nulis panjang-panjang via komen di forum.

25:18Ternyata waktu submit internetnya masalah.

25:25Terus akhirnya harus refresh.

25:28Yang tulisan yang kita tulis panjang-panjang itu hilang.

25:34Ya kan? Pernah enggak teman-teman mengalami seperti itu?

25:38Nah, itu kayaknya orang yang menginternetan jaman dulu tuh pasti, hampir pasti.

25:42Nah, kalau sekarang, kita sudah jarang mengalami hal seperti itu kan?

25:48Jadi kalau misalnya, contohnya teman-teman kalau developer pakai Jira,

25:52pakai Basecamp, pakai apapun itulah yang project management.

25:57Pakai Gmail.

25:59Kalau misalnya sudah nulis, ada penubuhan, dia safe, dia safe, dia safe.

26:06Dan ke mana dia safe?

26:07Ya itu tadi, ke local storage atau di storage-nya di browser.

26:11Jadi kalau di refresh atau di reload akan mengambil data dari storage yang di local tersebut.

26:20Sehingga apa yang kita sudah tuliskan tidak hilang.

26:24Nah, itulah gunanya storage.

26:27Nah, implementasinya nih sering nih.

26:29Maksudnya mungkin kalau sekarang kan lebih banyak orang pakai UI framework ya,

26:33React, Svelte, sebagian, ya cukup banyak library yang sudah integrate dengan local storage.

26:39Jadi kita enggak harus secara manual.

26:41Ya, kalau mau manual, nge-sync ke, nyimpan, nulis ke local storage bisa.

26:48Cuma banyak banget state management, yang library state management,

26:54dan semacamnya yang otomatis membantu kita nge-save di local storage.

26:59Jadi itu memudahkan banget.

27:02Bahkan misalnya kalau kita pakai Svelte,

27:04Svelte itu kan untuk state di level aplikasi, pakainya store.

27:11Itu buat nge-sync ke local storage pun udah relatif mudah.

27:17Berarti udah bisa ya, contohnya di framework-framework tertentu.

27:22Jadi state yang tadi itu sudah bisa disimpan di storage.

27:26Jadi waktu di-reload, dia akan...

27:28Ya, otomatis dia baca.

27:30Oh, nice. Saya belum pernah pakai Svetkey soalnya.

27:33Ya, apapun sih, misalnya kalau pakai, bahkan vanilla JavaScript nih,

27:39kayak state library misalnya nano-stores, itu ada add-on-nya.

27:47Ada library tambahan, kita tinggal tambahin satu baris gitu lah,

27:53buat otomatis nge-save ke local storage.

27:57Menarik, menarik.

27:59Ya, saya yang studi kasus yang paling gampang itu itu.

28:06Jadi dengan adanya storage begini, itu sangat membantu buat teman-teman

28:10kalau ingin membangun sebuah produk di atas web platform

28:14yang bisa bekerja secara offline.

28:19Karena anggap aja membangun aplikasi, tetapi aplikasinya nggak perlu internet.

28:27Jadi cuma kayak contohnya, paling gampang itu anggap aja to-do list.

28:31Jadi mau buat to-do list, saya ada sampelnya ya, to-do-mvc.com.

28:37Jadi teman-teman silahkan nanti bisa lihat saya coba posting aja.

28:40Bisa nggak sih saya posting? Gak bisa.

28:42Gak bisa.

28:43Iya, cuma bisa Mas Riza. Karena saya nggak tahu.

28:47Iya, ada to-do mvc. Tuduh mvc.com.

28:53Nanti teman-teman bisa ke sana.

28:55Itu aplikasi to-do list sampel yang dibuat dengan segala macam framework.

29:08Namun sebagai dasarnya disitu dia menggunakan local storage untuk menyimpan data.

29:14Jadi anggap aja teman-teman kalau membangun sebuah aplikasi PWA,

29:20bisa menggunakan misalnya PWA to-do list, terus simpan data di lokal,

29:25di web storage-nya di aplikasi, di web.

29:30Lalu bisa menggunakan antara local storage atau index DB.

29:36Index DB nanti akan ada pembahasan yang lebih dalam lagi.

29:39Jadi kan nggak perlu connect internet.

29:44Jadi bisa work secara offline.

29:46Dan teman-teman bisa tambah to-do list, bisa kurangin to-do list, bisa.

29:50Ya bisa do apa pun lah. Bisa lakukan apa pun dengan to-do list-nya.

29:55Nah, jika nanti suatu saat mau disinkron dengan online,

30:02aplikasinya, jadi kalau misalnya internetnya mati, bisa tetap jalan.

30:07Dan kalau internetnya online, apa yang ada tadi di local storage,

30:11itu bisa disinkron ulang ke database yang ada di online.

30:15Jadi akan membuat pengalaman dari pengguna,

30:21aplikasi teman-teman itu bisa jauh lebih baik,

30:24tidak tergantung terhadap kondisi internet.

30:28Dan nggak bolak-balik ngebebanin database yang remote kali ya.

30:33Jadi nggak bolak-balik harus nge-send.

30:35Ya bisa dikontigur lah setiap berapa.

30:38Entah setiap berapa detik atau setelah user menyelesaikan suatu task,

30:43baru di-sinkronize ke remote database.

30:47Nah, penggunaan.

30:49Saya juga pernah singgung,

30:51saya juga pernah singgung buat aplikasi yang untuk sales,

30:56yang secara offline, yang pakai backbone,

31:01jaman dulu pakai backbone, cuman aplikasinya...

31:04- Yay, Mas Rizal. - Wey.

31:08Ini namanya teknik apa? Delegasi.

31:14- Ya. - Maaf ya.

31:17- Gak apa-apa. - Terus tiba-tiba banget sih.

31:20Ya, saya mau ini Mas Rizal, kita balik sedikit ke to-do MVC ya.

31:25- Oke, to-do MVC. - Boleh, boleh, boleh.

31:27Jadi tadi kita udah cover apa saja storage yang ada di web.

31:31Misalnya cookies kita udah bahas minggu lalu.

31:36Case kita udah bahas yang lalu.

31:40Terus ada local storage, session storage, dan index DB, iya kan?

31:44- Iya. - Nah.

31:46Tadi ada kasus yang saya sampaikan, itu mengenai to-do MVC.

31:50Ini menggunakan local storage.

31:53Jadi to-do MVC ini sampel untuk to-do list

31:56yang dipakai menggunakan segala macam framework.

31:59Silahkan klik saja salah satu, Mas, kayak Vue.js atau apapun lah.

32:06Ya, react mungkin kalau mau, klik aja yang react atau Vue.js.

32:11- No guess. - Ya, boleh lah, klik aja.

32:14Jadi apapun frameworknya tetap pakai teknologi local storage ya.

32:18- Clear atau nggak, diinspect? - Ya, langsung diinspect.

32:23- Oh, insert again, sir. - Insert dulu apapun.

32:27- Test. - Webbing.

32:30- Eat. Sleep. - Sleep.

32:33Oke, nah, coba lihat sekarang diinspect element.

32:37- Inspek element. - Di bagian application.

32:41- Di bagian application. - Di bagian application.

32:45Kemudian di--

32:47Dia, kalau khusus untuk to-do MVC ini, dia pakai local storage.

32:52- Local storage. - Ya, klik local storage.

32:55Ada ininya ya, dia terapa?

32:58- Domein. - Domein atau sub-domein.

33:01Lihat tuh, ada key-nya. Jadi, local storage itu key value store.

33:06Dan hanya untuk simple to-do di sini cuma satu key-nya.

33:10Sisanya dia semua simpan sebagai objek di value.

33:14Itu lihat, value-nya dibawah ada 0, 1, 2, itu.

33:17Isinya code, eat, sleep.

33:19Oke, berarti ini local storage ini bisa menyimpan objek JavaScript ya?

33:24- Betul. - Nggak, sebetulnya stringing fight kan itu.

33:26- Stringing fight ya. - Kalau kita baca,

33:29kalau kita ambil value-nya itu sebetulnya stringing fight.

33:32Tapi di browser DevTool untuk memudahkan kita ngebajak,

33:36itu ditampilkan sebagai objek.

33:38Tapi kalau dipanggil, hati-hati, stringing fight.

33:41- Harus stringing fight juga ya. - Sekarang, Mas Riza, coba reload.

33:45- Reload. - Reload di sini.

33:47Harusnya kalau tidak kita nggak menggunakan storage, pasti value hilang.

33:53- Betul, dihapus di sini ya. - Iya, coba dihapus aja, Mas Riza.

33:57- Di-clean. - Hapus.

33:59- Hapus, hilang ya. - Kita reload.

34:02- Jadi area kosong lagi. - Yey, nggak ada kerjaan.

34:06Terus aja kerjaan.

34:09- Oke. - Mbak Ika mau lanjut apa tadi?

34:13Kepotong, lanjut Mbak Ika.

34:15Tadi sudah ada beberapa contoh penggunaannya.

34:19Terus salah satu penggunaan yang cocok untuk local storage,

34:23itu untuk hal-hal yang memang cukup ada di browser user aja,

34:28memang cukup ada di client.

34:30Jadi kan local storage itu kontras atau bersebrangan dengan cookies ya.

34:35Kalau cookies, ukurannya terbatas, terus dikirim di setiap request.

34:41Kalau sebaliknya, local storage kapasitasnya lebih besar

34:46dan memang cuma di browser user.

34:48Kalau favorit akuma, ini selalu buat misalnya dark mode, light mode.

34:53Itu kan biasanya nggak perlu juga untuk dikirim atau ditempelin ke request kan,

34:59karena berurusan dengan browser aja, client.

35:02Jadi itu cukup reasonable buat disimpan di local storage.

35:07Nah, terus ini ada komentar.

35:09Shopping card ini melayah abu-abu sih, sebetulnya kalau menurut aku.

35:13Antara shopping card itu mungkin beberapa, ya itu kan tergantung requirement-nya.

35:20Cuma biasanya shopping card tetap perlu disink dengan database.

35:24Karena misalnya kita browsing, kan sering tuh kita browsing suatu e-commerce,

35:30kita masuk-masukin shopping card, tapi belum check out.

35:34Nah, kan sebisa mungkin yang diinginkan adalah kalau kita buka di entah di device lain

35:42atau mungkin setelah uninstall.

35:46Kita buka dimanapun, itu shopping card kita kan tetap harus ada isinya.

35:51Jadi kalau untuk level e-commerce atau marketplace yang reputable,

35:58biasanya itu tetap harus di-store sih.

36:00Bukan reputable, marketplace yang 360 yang ada di mana.

36:05Bukan 360, jadi di semua device, di semua channel ada.

36:12Kalau hanya web platform, mungkin kita bisa tetap pakai local storage.

36:17Tapi kalau hanya web platform, kalau dia clear cache, terus dia buka lagi?

36:22Kalau misalkan dibuka di mobile, itu local storage-nya nggak ikut kan?

36:29- Iya, maksudnya dia buka di browser di laptop, atau browser di mobile,

36:36atau HP-nya dia ada 2, kan sebisa mungkin shopping card-nya harus tetap sama.

36:41Jadi biasanya shopping card-nya harus dikirim ke database remote.

36:48- Tergantung use cache-nya juga ya, berarti ya?

36:52- Ya cuma itu kan seberapa kompleks aplikasi kita.

36:56To-do juga sebetulnya kan, eventually kalau misalnya kita bikin produk

37:01yang udah cukup besar kayak jira atau apapun,

37:04ya to-do list-nya kan nggak boleh di lokal doang, tetap harus disimpan di database juga.

37:10Biar bisa dibuka dari device lain.

37:13- Iya, case-nya adalah yang saya katakan tadi,

37:16kalau misalnya kita sudah lagi nulis komen atau nulis sesuatu,

37:20kalau di-reload, sebisa mungkin, maksudnya sebelum di-send atau sebelum di-kirimkan ke server,

37:28di-cache dulu di local storage, jadi waktu kita reload, dia nggak hilang.

37:33- Iya, bisa di-kombinasikan ya berarti,

37:36antara local storage dan sync ke remote database.

37:40- Iya, apalagi yang ngisi konten gitu ya, tulisannya panjang gitu,

37:46kayak ngisi forum atau konten, artikel dan lain-lain ya, udah capai panjang-panjang tiba-tiba.

37:53- Email. - Tiba-tiba peneksi.

37:57- Salah satu cara untuk winning solution lah, paling cepat gitu,

38:07kita hanyalahin aja local storage, simpan gitu.

38:09Itu udah user experience si pengguna itu meningkat secara tajam.

38:15- Betul, betul.

38:17- Oke, lanjut, kita bahas apa lagi nih?

38:22Tadi udah bahas local storage, storage, terus apa lagi?

38:27To do MVC, index DB udah dibahas?

38:30- Belum, belum. - Index DB belum dibahas.

38:33Nah, index DB deh, next.

38:35- Index DB? - Iya.

38:37- Ini adalah yang ini ya, oke. Apa itu index DB?

38:42- Index DB ini sebenarnya anggap aja seperti kalau teman depan tau,

38:50pernah pakai, mungkin nggak sampai, SQLite lah.

38:54Nah, SQLite tapi sudah ada browser.

39:00- Behavior-nya kayak database beneran ya, bukan cuma value string

39:05yang kayak local storage atau session storage.

39:08Jadi dia perform, performanya bagus, sudah ada indexing key-nya sudah ada

39:18dan bisa nyimpan data lebih banyak dan bisa lakukan SQL query.

39:26- SQL query? - Sorry, bukan SQL query.

39:29Bisa seperti key value stored ya, key value, tetapi lebih performance.

39:36Nah, yang enaknya di atas index DB ini banyak yang sudah framework-framework

39:45tambahan kayak PouchDB tadi.

39:49Oh, PouchDB itu based on index DB ya?

39:52Iya, PouchDB ternyata ada di sini ya, client site implementation of PouchDB

39:57in the browser using index DB. Ternyata dia pakai index DB.

40:01Tadi kita sempat bahas di belakang air.

40:03Sama satu lagi ini Minimongo.

40:07Minimongo.

40:08Minimongo DB versi client yang ada di Meteor.

40:11Iya, jadi bisa juga NoSQL juga bisa.

40:17NoSQL kayak RxDB itu.

40:21RxDB, iya.

40:23Dia juga bisa pakai index DB di belakang air.

40:28Jadi, dan ini bisa jadi kayak, NoSQL ini kita bisa, apa namanya?

40:35Kayak observability-nya bisa, ini lho, bisa kayak kalau ada perubahan terjadi.

40:41Di satu tempat, update semua.

40:44Nah, dia support index, compression, dan replication.

40:50Jadi seperti apa yang kita miliki, seperti punya database beneran.

40:55Jadi kalau butuh behavior dan punya kemampuan kapabilitas database,

41:00tapi pengen di browser, di client, takkenya index DB ya.

41:05RxDB ini berarti dia tidak ada database di sisi backend,

41:12tapi di client aja, di browser masing-masing.

41:15Dan dia bisa syncing dan lain-lain gitu ya, peer-to-peer gitu.

41:19Saya nggak tahu sampai peer-to-peer-nya, tetapi dia cross-tap kan, cross-tap itu artinya,

41:25karena cross-tap kan artinya, maksudnya kalau tab-nya banyak dibuka,

41:30kan index DB itu kan bukan kayak session storage ya.

41:33Index DB itu nempel di domain.

41:35Jadi semuanya bisa akses.

41:37Dan misalnya anggap aja buka to-do list banyak, di tab,

41:44terus update this app, diseluruhi yang lain, ke update.

41:49Oh, oke, oke.

41:52Jadi sempat udah kita bahas juga di belakang layar tadi sebelum mulai,

41:56POSDB, ini adalah pasangan dari POSDB.

42:01POSDB itu database di sisi server ya, di sisi backend.

42:05POSDB ini untuk synchronize.

42:13Jadi data yang ada di client itu kita bisa save tanpa harus ada koneksi internet,

42:18mungkin koneksi internetnya naik turun atau nggak stabil gitu kan.

42:21Atau debatchingnya setiap sekian detik aja kirinya.

42:25Iya, betul.

42:27Dan kemudian ketika internetnya sudah nyala lagi,

42:31atau dalam waktu sekian detik atau sekian menit, dia akan synchronize ke server.

42:38Dan ini, dia bikin library-nya udah satu set ya, berpasangan.

42:43Jadi sintaksnya lebih user-friendly.

42:47Selama ini sih ngeliat index DB,

42:50kayak salah satu hal yang bikin aku nggak terlalu suka,

42:57nggak terlalu tertarik sama index DB itu, kayak penggunaannya, sintaksnya segala macam.

43:05- Sintaksnya kurang ya? - Ya, sebetulnya nggak jelek-jelek amat sih.

43:10Maksudnya udah cukup modern, cuma kayak tetap nggak menarik aja sih.

43:15Kayak lebih tergoda ke superbase atau semacamnya yang udah ada SDK-nya,

43:21ya udah sekalian pakai itu.

43:23Cuma ternyata underlying technology-nya kan tetap penting bahwa,

43:27yang penting konsepnya itu adalah kapabilitas database dengan segala fungsi-fungsinya,

43:33transaksi yang ala database tapi di browser.

43:37Jadi, solusinya ya ini mungkin semacam PouchDB ini kan enak banget tuh kan sintaksnya.

43:42Nah, yang membedakan antara local storage dan index DB,

43:48index DB itu karena bisa indexing, dia lebih performance.

43:54Performance-nya lebih baik daripada local storage.

43:58- Karena local storage itu cuma keyfairing. - Keyfairing aja ya, keyfair listore kan.

44:03Jadi apa aja bisa disimpan, jadi nggak bisa di-structure ya.

44:06Kalau di index DB itu lebih bisa di-structure.

44:11Ini API-nya dia mengikuti gayanya si CouchDB ya.

44:16Jadi, ini ada layer di atas si index DB.

44:20Wujung-wujungnya didulis kayak index DB juga.

44:23Sama halnya dengan Minimongo. Minimongo ini adalah database yang ada di sisi klien,

44:29yang digunakan di framework namanya Meteor.js.

44:33Dan API-nya itu menyelupai cara penggunaan MongoDB di server.

44:37Dan dia bisa sincronis juga, mirip seperti PouchDB.

44:42Nah, itu malah seru tuh, local storage iya, index DB iya, si Minimongo itu.

44:49- Iya. - Back to my local storage.

44:53Tapi pakai index DB juga.

44:56Iya, dia kayak gini aja nih, misalkan nih.

44:59Ini local DB terus add collection, upsert atau update, dan insert gitu.

45:05- Kayak Minimongo. - Kayak Minimongo DB.

45:08Iya, bener-bener mirip, dibuat mirip.

45:11Kayak udah terbiasa dengan, kerja dengan Minimongo DB.

45:16Jadi kita hanya perlu safe di sisi klien.

45:20Nanti dia seru otomatis MongoDB-nya atau Minimongo-nya akan melakukan sincronisasi dengan server.

45:27Kira-kira seperti itu.

45:29- Ternyata bukan berat lagi. - Biasanya ada...

45:32Biasanya ada kasus juga pernah menghasilkan.

45:35Tapi sebelum jamannya ada Minimongo, PouchDB, segala macam,

45:39itu yang membuat aplikasi yang menggunakan elektron,

45:43buat sales yang bisa untuk aplikasi bisa bekerja secara offline.

45:50Nah, saat itu saya pakai storage-nya pakai index DB.

45:55Jadi sedot data dari server, file image-nya saya simpan di lokal.

46:01Bukan pakai Vasis CPI, cuma kayak lokal aja, hard disk.

46:06Dan database-nya pakai index DB.

46:10Jadi kan dia nempel di elektron, cuma lokal pos, blablabla.

46:15Jadi nempel, update, sudah.

46:18Jadi begitu laptop-nya dibawa ke tempat klien yang butuh jualan,

46:24karena dia kayak produk katalog, nggak butuh internet.

46:29Jadi semua langsung bisa presentasi.

46:32Jadi kayak terima order, ini katalognya A, B, C, D, tinggal di-search.

46:36Bisa search juga loh. Yang ini dah catat jadi duit, dah.

46:44Limit lebih nggak ada? Limit size-nya?

46:47Ada, pasti ada kan?

46:50Iya, pasti ada kan.

46:52Tapi gede banget loh, saya nggak tahu, coba saya baca dulu.

46:55Kayaknya gede banget loh, gede banget.

46:57Berarti kasus yang tadi ceritakan ini sekaligus menjawab pertanyaan dari Mas Munawar.

47:02Masih relevan nggak sih, website dashboard sekaligus dia datanya terlalu saja?

47:07Nah, ya itu tergantung use case-nya kan.

47:10Nah, oh iya, salah satu kelebihan index.db juga kan,

47:13kalau local storage, atau session storage, atau cookie kan,

47:17nggak bisa nyimpan file blob ya, B-L-O-B, binary large object.

47:22Nah, kalau index.db, karena dia full feature database, bisa buat nyimpan blob.

47:30Ini saya Google sebentar sedikit, untuk maximum size index.db itu

47:37kalau di Chrome-based browser, Chromium-based browser,

47:41dia bisa pakai 80% dari disk space.

47:44Jadi kalau punya 1TB, ya bisa 800GB.

47:51Iya, kan harus dikonsiderasi...

47:55Cuma harus hati-hati juga, berarti kita... Karena masing-masing client beda kan?

48:00Masing-masing client beda.

48:02Ya device user juga beda, jadi berarti kalau kita bikin transaksi,

48:06harus jangan lupa nge-catch ya.

48:08Betul. Nah, selanjutnya, tadi setelah local storage,

48:15ada session storage, kemudian index.db,

48:18selanjutnya kalau misalkan masih berasa kurang powerful,

48:26nah, ini ada sekarang kita sudah bisa menggunakan SQLite

48:32di browser dengan menggunakan WebAssembly.

48:36WebAssembly ini kayaknya bisa ngapa-ngapain aja ya,

48:39sampai bikin sistem sendiri juga bisa.

48:42Waktu dulu kita pernah bahas Figma ya?

48:44Iya, Figma.

48:46Figma sama apa? Codespaces.

48:50Nah, ini kali ini bisa bikin rantai database berarti,

48:55ngejalanin SQLite.

48:58Betul.

48:59Kemarin saya tunjukin WordPress bisa jalan di browser,

49:02pakai SQLite database ya.

49:04WordPress bisa jalan di browser kan.

49:08Gak usah pakai XAMPP lagi ya?

49:11Gak usah.

49:13Gak usah install lagi gitu ya.

49:15Jadi SQLite ini adalah salah satu database yang mungkin underrated ya,

49:20kalau bisa dibilang ya.

49:21Jadi kalau temen-temen nih misalkan, wah, pengen belajar SQL,

49:24tapi terbatas device misalkan,

49:28wah, gak bisa install macem-macem nih,

49:30mau install Postgreel gak bisa,

49:32ngasih SQL susah gitu misalkan,

49:34dibatasi antara terbatas mungkin sistem requirementnya,

49:39atau mungkin gak boleh install macem-macem di laptopnya gitu kan.

49:42Atau pengen cepet aja.

49:44Betul.

49:45Nah, kalau apa, mungkin bisa melirik si SQLite ini,

49:49karena SQLite ini ya,

49:50bedahannya hanya satu file, kemudian udah.

49:53Tidak ada apa,

49:56kalau misalkan kayak Postgreel mySQL gitu,

49:58dia ada di install dulu kan,

50:00di install, terus ada di folder apa,

50:02di dalamnya ada sub-folder-sub-folder lagi gitu kan.

50:05Kalau SQL ini cuma satu file,

50:06kita tinggal buka SQLite 3 spasi 6 file-nya udah.

50:09Dan kita bisa menjalankan atau belajar SQL.

50:13Semua transaksi SQL.

50:15Iya, semua sintak SQL bisa dicoba di sini.

50:18Jadi ini salah satu database yang cukup,

50:22sebenarnya cukup banyak yang digunakan ya.

50:24Di handphone semua temen-temen,

50:26mau OS-nya apa, pasti itu ada SQLite.

50:28Kalau di kalangan front-end developer nih,

50:31SQLite naik-daun gara-gara remix,

50:34apa, framework remix,

50:36ini by default semua tutorial-nya,

50:38dan semua kayak starter site yang paling basic,

50:41demonstrate-nya pakai SQLite,

50:43tapi kita bisa replace mau pakai Postgreel,

50:45atau pakai apa lah, yang lain bisa.

50:48Cuma by default, contoh-contohnya pakai SQLite.

50:51Jadi di kalangan orang yang mungkin para developer

50:54yang mungkin belum terbiasa pakai database,

50:57nggak punya Apache, nggak punya segala macam,

51:00ini SQLite ngebantu banget.

51:03- Yes. Dan sekarang,

51:06kalau misalkan merasa index DB kurang powerful,

51:09sekarang kita bisa menjalankan SQLite di sisi browser.

51:12Jadi dengan menganfaatkan WebAssembly,

51:15SQLite-nya itu bisa jalan di browser,

51:18jadi kita bisa, apa ya,

51:21kalau misalkan bikin tutorial SQL yang interaktif,

51:25website gitu, aplikasi web yang interaktif

51:28untuk belajar SQL.

51:30Itu bisa perlintah SQL-nya,

51:32bisa dieksekusi di SQLite, di browser,

51:34nggak perlu diinstall macam-macam.

51:36Tapi ada balasannya ya, nggak bisa sampai,

51:39kalau nggak salah,

51:41SQLite bisakah sampai group by?

51:45Bisa ya? - Bisa, bisa, bisa.

51:47Dia udah full support SQL ANSI, kalau nggak salah.

51:51Pokoknya udah standar lah, standar SQL itu udah bisa.

51:55- Cuma ini sih repotnya kalau kita pakai serverless,

51:59SSR serverless, semacam remix, atau Next.js,

52:03itu nggak bisa sembarang nimpah file-nya

52:06kalau udah dari remote sih.

52:08Misalnya kita pakai Next.js atau remix gitu

52:11yang udah CICD,

52:14yang misalnya kita nge-deploy, nge-push ke GitHub,

52:17ke repo, terus dia otomatis nge-build di lambda function,

52:21itu kelihatannya nggak bisa deh, nggak bisa.

52:24Jadi gatasnya di situ.

52:26Kalau mau ya, kita harus... - Bikin server sendiri, tetap ya.

52:30Atau yang gampang, jalanin transaksinya di lokal,

52:33baru di-push lagi. - Oh, iya, iya, iya. Benar, benar.

52:36Nah, ternyata si SQLite ini menganfatkan sebuah web API

52:42yang namanya file-system. - Lah, balik ke file-system berarti ya?

52:45Balik ke file-system karena

52:47file-system ini yang membuat dia bisa berjalan, karena ya itu.

52:51Jadi dari apa?

52:53Mungkin buat teman-teman yang nggak familiar dengan file-system,

52:55kalau ada yang pakai Figma,

52:57mungkin developer jarang ya, pakai Figma ya.

53:00Kalau dulu kan...

53:02Karena desainnya hand-overnya di Figma.

53:05Oh, hand-overnya lewat Figma ya.

53:07Kalau dulu kan Figma itu,

53:09kalau misalkan kita mau save file, itu kayak download kan.

53:12Download file Figma kan.

53:14Begitu kita mau load, juga kita kayak upload file-nya kan.

53:19Nah, dengan adanya file-system itu udah perlu seperti itu.

53:22Jadi dia bisa membaca folder yang ada di lokal komputer kita.

53:28Tentunya dengan permisihan tertentu ya, pasti ada ininya ya.

53:33Jadi native file-system API sudah didukung oleh browser,

53:36dan API ini yang dimanfaatkan oleh SQLite untuk meletakkan

53:42file data SQL-nya di folder atau di lokal komputer kita.

53:50Makanya dia batasannya lebih besar dibandingkan sama yang tadi apa,

53:56index DB atau lokal storage dll.

53:58Karena dia sudah berada di lokal,

54:02sudah berada di komputer kita masing-masing.

54:05Nah, ini tuh udah didukung semua browser,

54:12atau masih Chromium-only, atau gimana ya statusnya?

54:16Mari kita lihat.

54:17Coba paling bawah biasanya.

54:19Masa sudah official sudah ini.

54:25Tapi ini masih Chromium deh.

54:27Gak ada ya di sini.

54:29Kita buka Can I use ya?

54:31Can I use.com

54:34File, API.

54:41Belum bisa, Safari dan Firefox belum bisa, sayang sekali.

54:45Mana? Ini aja.

54:47File API, bukan ya?

54:49Bukan, file system.

54:51Oh, file system.

54:53Oh, masih kuning dan merah ya.

54:58Itu tuh file system dan file writer.

55:01File system access, oh ini.

55:04WebKit support with prefix.

55:07Kok WebKit? Oh, mati.

55:10Duh, tapi sharing-nya bisa. Nah, aman.

55:15Ini Safari, merah.

55:18Firefox.

55:20Firefox mana? Oh, merah juga.

55:23Itu kan file system.

55:27Kalau file system API, yang bawah gimana coba?

55:30Yang bawah, awal lagi.

55:33Berarti, udah bisa.

55:35Berarti yang...

55:38Jadi ada beberapa API-nya masih belum bisa,

55:42tapi kayaknya yang file system API-nya, core-nya udah bisa.

55:47Yang file writer-nya yang belum bisa.

55:50Saya nggak tahu perbedaannya.

55:53Belum bisa nulis ya.

55:55Tapi saya nggak tahu itu apa.

55:56Mungkin kita perlu baca, mungkin topik selanjutnya kali.

55:59Ya, file system.

56:02Return of reading and writing file to a sandbox file system.

56:06Belum pernah dengar saya malah.

56:08Menarik.

56:11Banyak ya. Ada sync juga.

56:14Ada file system entry.

56:16Apa ini? Beda-beda ya?

56:19Kayaknya dipecah kelasnya gitu biar granular.

56:23Jadi ada yang bisa read aja,

56:25ada yang sudah bisa read and write gitu ya.

56:28Lebih step-by-stepnya, lebih kelihatan gitu kali ya.

56:33Cuma kalau dilihat-lihat, berarti sepanjang yang semua kita bahas tadi,

56:37yang paling aman udah ada di semua browser,

56:39berarti kan local dan session storage sama index DB ya.

56:42Yang udah paling stable dan udah lama bertahun-tahun ada.

56:46Dan index DB juga udah banyak ini ya.

56:50Library dan layer di atasnya.

56:53Jadi kalau misalkan merasa index DB kurang menarik,

56:56mungkin bisa cek kayak pause DB.

56:58Mungkin pause DB harus connect sama pause DB ya.

57:01Yang lain-lain ada banyaknya.

57:04Nggak juga sih.

57:06Jadi nggak perlu connect.

57:07Oh, kalau mau syncing baru ya, oke.

57:10Jadi tetap bisa digunakan walaupun tidak ada server kaos DB-nya ya.

57:14Kalau nggak perlu sync ke remote database ya nggak usah pakai.

57:18Tapi pertanyaannya apakah masih...

57:23Iya tadi pertanyaan tadi.

57:24Kalau Ivan tadi kayaknya nemuin ya,

57:26ada satu kasus di mana semua aplikasi tidak membutuhkan server.

57:30Jalan di elektron, semua teknologi web tapi offline.

57:34Termasuk database-nya.

57:36Itu kasus yang umum nggak sih di aplikasi jaman sekarang gitu?

57:43Kalau aku pribadi belum pernah harus yang kayak gitu sih.

57:48Jadi biasanya malah cuma perlu local atau session storage aja.

57:53Ya kayak tadi buat handling misalnya user udah ngetik panjang-panjang

57:57biar tetap safe.

57:58Habis itu ya remote database biasa sih.

58:01Jadi belum sejauh ini.

58:03Biasanya aplikasi yang produk yang bisa offline mode.

58:09Itu lebih perlindung.

58:11Terus ingat juga ya, web worker dan service worker itu kan nggak bisa akses DOM.

58:18Jadi perantaranya middlemanenya ya ini, si storage-storage ini.

58:24Jadi anggap aja kalau misalnya teman-teman punya aplikasi

58:30yang bisa fetching data dari online, tetapi jangan diakses melalui main thread.

58:37Bisa di alokasikan, didistribusikan menggunakan web worker untuk ngambil data

58:44synchronize ke index DB.

58:48Nanti index DB-nya berubah, data-nya berubah.

58:51Otomatis UI-nya berubah.

58:53Betul. Contohnya misalnya teman-teman mau bikin spreadsheet.

58:57Spreadsheet tabular data yang besar gitu ya.

59:01Yang mau disinkronkan ke aplikasi yang lain secara real-type.

59:09Jangan pakai main thread.

59:11Karena kalau pakai main thread, kalau lagi synchron, spreadsheet-nya ngefreeze.

59:17Jadi pakai web worker.

59:19Bisa digabungkan dengan web RTC.

59:23Bisa pakai web RTC. Jadi dari peer-to-peer.

59:32Itu kayak Pub/Sub ya?

59:34Mirip Pub/Sub.

59:36Kayak torrent.

59:38Jadi bisa konek ke, jadi contohnya kita ambil spreadsheet ya

59:43yang diakses secara berbanding secara tiga orang.

59:46Jadi web RTC sesama tiga orang.

59:49Yang konek ke web RTC ini menggunakan jika ada update baru,

59:57simpan dulu si web worker yang akan mengupdate ke index DB, contohnya ya.

1:00:02Jadi index DB-nya, kalau terjadi perubahan di index DB,

1:00:05kan tadi si library-nya ada observable-nya kayak gitu,

1:00:08bisa dilihat perubahannya apa.

1:00:11Dan si UI-nya kita tinggal melihat perubahan itu,

1:00:14event itu didispatch, terus kemudian value-nya keupdate.

1:00:19Itu bisa seperti itu juga.

1:00:22Jadi aplikasinya bisa tetap performance, index DB-nya performance,

1:00:29jalur koneksinya via web RTC atau kalau misalnya online,

1:00:38bisa lewat web worker.

1:00:40- Tapi worker class berarti bisa berinteraksi sama index DB langsung ya?

1:00:47- Bisa. - Mantap.

1:00:50Kan soalnya worker class, entah itu web atau service worker,

1:00:54kan dia nggak bisa mengakses local storage ya,

1:00:56karena itu masuknya di client site, di browser, nggak bisa mengakses langsung.

1:01:03Local storage bisa sepertinya ya, local storage bisa.

1:01:10- Bisanya mengakses cash kelihatannya, belum ngecek.

1:01:15Penasaran gitu, kan service worker.

1:01:20Kalau cash bisa, memang worker bisa interaksi sama cash.

1:01:26Oh, nggak bisa.

1:01:29Gak bisa? - Iya, lanjut. Local storage nggak bisa.

1:01:33- Local storage nggak bisa, oke.

1:01:35Ini pertanyaan lanjutan dari Damar.

1:01:37Eskilite yang di browser yang tadi ya.

1:01:40Jadi kalau misalkan nyimpen data, pakai file system API,

1:01:43tapi bikinannya, bikinnya file XML supaya bisa mudah di-share.

1:01:48Bisa. Eskilite bisa nyimpen file kan, blob ya, jadi bisa.

1:01:55Possible. Jadi XML-nya disimpan di database gitu maksudnya.

1:01:58Bisa? - Bisa, bisa.

1:02:01- Ada pertanyaan satu lagi ini menarik juga.

1:02:05Jadi dia ini Nian JS.

1:02:10- Koceng.

1:02:13- Iya. Masih bingung karena ada satu artikel yang bilang

1:02:19kalau JWT itu aman disimpan di local storage.

1:02:23Tapi di artikel yang lain, simpannya di session storage.

1:02:27Lebih baik mengenak simpan token JWT di sini maksudnya ya.

1:02:31Itu lebih baik disimpan di local storage atau di session storage.

1:02:35- Bahkan ada yang bilang, Pak, kalau token ya,

1:02:38kalau contain data yang sensitif, jangan disimpan di browser.

1:02:42Cuma itu tergantung lead, team lead kalian masing-masing.

1:02:47Ada yang bilang itu nggak accept kalau nggak boleh di client side,

1:02:51nggak boleh di browser sama sekali, harus di cookie.

1:02:54Dan cookie pun ada aliran pemikiran ya, harus HTTP only.

1:03:00Maksudnya hanya bisa di server side, di request.

1:03:03Jadi di handle di sisi server, nggak bisa dibaca dari document.cookie.

1:03:08Cuma ya, kalau pun di local atau session storage,

1:03:13sebenarnya satu-satunya perbedaannya kan

1:03:15cuma session storage itu kalau tab-nya ditutup, hilang.

1:03:18Jadi nanti kalau browser buka tab baru, misalnya tadi udah login.

1:03:23Terus user nutup tab, buka tab lagi, dia terlockout.

1:03:29Jadi itu behavior yang diinginkan seperti apa.

1:03:32Gitu doang sih bedanya, antara local dan session.

1:03:37- Kalau JWT ya, JWT itu kan sebisa mungkin,

1:03:43payload-nya itu kan bisa dibacakan cuma base 4.

1:03:52Sebisa mungkin itu kan isinya cuma data umum,

1:03:55dan data validasinya itulah yang kan ada private key

1:04:00yang nggak boleh di-share kan, yang untuk bisa ngevalidasi hash-nya itu.

1:04:08Sebenarnya JWT itu bagi saya, pendapat pribadi,

1:04:16nggak apa-apa sih disimpan di local storage, nggak masalah.

1:04:19Karena itu membuat supaya aplikasi kita bisa berhubungan,

1:04:24divalidasi koneksinya ke server.

1:04:27Namun, sebisa mungkin pertama di sisi server validasi,

1:04:36dari sisi hash-nya harus bisa divalidasi, dan timestamp.

1:04:42Timestamp itu juga penting divalidasi.

1:04:45- Tapi harus di-handle dari server-site ya, dari API.

1:04:50Dari API atau apapun itu service buat apa, urus authorization.

1:04:57- Betul.

1:04:59- Iya, karena kalau apa-apa disimpan ke database,

1:05:02kasian database-nya.

1:05:04Berat ya, nulis database itu bukan pekerjaan ringan gitu ya.

1:05:08Walaupun kalau kita simpan kayaknya cepat gitu.

1:05:11Tapi kalau sudah 100 orang secara simultan kan berat gitu kan.

1:05:15Dan istilahnya membutuhkan biaya yang sangat besar juga gitu.

1:05:19Makanya kalau misalkan setiap kali request harus nge-check ke database,

1:05:25itu nggak efisien juga kan.

1:05:27Yang penting datanya itu tidak bisa dibongkar,

1:05:32kalau hanya token-nya doang kan nggak ada informasi yang bisa di-extract dari situ kan.

1:05:45Nah, kalau dapat hash-nya atau dapat salt-nya, itu baru.

1:05:50- Tapi itu pun tetap harus siap invalidate.

1:05:54Yang penting itu semua bisa segera di-invalidate

1:05:57kalau terdeteksi ada kecolongan.

1:06:02- Ya, kayak timestamp tadi, jadi harus ada time-out-nya berapa lama gitu ya.

1:06:08Masa berlakunya, expired-nya berapa lama.

1:06:11Kalau udah expired, coba dihapus lagi cookie-nya, login lagi, dan lain-lain.

1:06:16Nah, ini juga pertanyaan yang bagus tuh.

1:06:22Sebenarnya web platform PWA ini udah powerful buat storage.

1:06:27Apa masih ada lahasan untuk pakai elektron atau tauri?

1:06:30- Nah, gimana tuh? Belum ada pengalaman pribadi sih buat compare yang head-to-head.

1:06:38- Kalau sebenarnya saya sekarang preferensinya nggak pakai elektron lagi.

1:06:43Jadi sebenarnya udah murni langsung menuju web aja dan web-nya dipatahin service work dan PWA.

1:06:51Itu defaultnya.

1:06:53Kasus yang saya bilang pakai elektron itu karena itu adalah proyek 6 tahun lalu.

1:06:59PWA itu masih di awang-awang.

1:07:03Sudah ada tapi belum oke.

1:07:06- Belum ada desktopnya, kayaknya belum terlalu ini kan?

1:07:10- Desktopnya belum di-support kan? Baru akhir-akhir ini kan?

1:07:12- Baru-baru. - Akhir-akhir ini baru ada.

1:07:15Jadi, alasan untuk elektron.

1:07:21Mungkin kalau buat aplikasinya sekelas text editor, maybe ya, kayak atom.

1:07:30- Ya, atom. Atau udah mendinggal. - VSCode lah.

1:07:35- VSCode lah, VSCode ya. Seperti VSCode, mungkin masih butuh elektron.

1:07:40Karena butuh build-in browser. Jadi waktu kita...

1:07:45Distribute able-nya kita itu waktu kita kasih ke user, mereka nggak perlu install browser lagi.

1:07:51Sedangkan kalau kita PWA, mereka butuh install browser kan.

1:07:55- Itu yang dialami.

1:07:57Jadi misalkan saya pakai, sekarang sering pakai misalkan kayak xkaldraw atau pake tldraw dan lain-lain.

1:08:04Itu kan PWA ya.

1:08:06Kita mau buka aplikasi desktop-nya, kita harus buka browser-nya.

1:08:10Misalkan saya waktu install aplikasi di desktop-nya itu menggunakan Brave.

1:08:17Tapi sehari-hari saya menggunakan Firefox misalkan.

1:08:20Lagi buka Firefox tiba-tiba mau nulis-nulis, itu kan menyata buka xkaldraw, buka lah itu Brave.

1:08:27Jadi dia buka Brave dulu, baru dia buka aplikasinya.

1:08:31Jadi itu yang mungkin ada kasus dimana ya memang harus desktop.

1:08:36Harus desktop apps ya, elektron atau tower yang bisa menyelesaikan masalah itu mungkin ya.

1:08:43Tapi kalau nggak masalah, browser-nya kebuka di belakang layar ya nggak ada masalah sebenarnya menggunakan PWA juga.

1:08:56Oke, kita sudah satu jam. Masih ada yang mau didiskusikan lagi?

1:09:02Oh, ini Dito. Dita, Dita.

1:09:06- Wow, ada yang notice kita nggak lah. - Ada yang notice ya.

1:09:12Mohon maaf ya, kita absen sehari, sehari seminggu.

1:09:16Satu minggu tidak bersuai ya.

1:09:19Dita ini adalah GDG Makassar ya.

1:09:22Yang kemarin ngajakin makan ikan fugu Indonesia.

1:09:33Wah, sepertinya sudah tidak ada lagi topik yang mau kita diskusikan, kalau begitu mungkin kita udahan dulu.

1:09:43Terima kasih banyak buat semua teman-teman yang sudah menemani diskusi kita malam hari ini. Cukup seru.

1:09:50Maaf tadi koneksi jadi tiba-tiba mati dan menghilang sebentar, berapa lama.

1:09:56- Iya. - Mudah-mudahan tidak terjadi lagi.

1:09:59Maalum koneksi saya cuma satu, nggak kayak Ivan, ada redundansinya.

1:10:04Lepikasi. Loh, redundansi, redundan.

1:10:08- Load balancer, nggak bisa ya. - Load balancernya, jadi ada dua provider kan.

1:10:14- Ada satu. - Callback. - Sebenarnya ada gue sih, cuman lagi di PC nggak ada Wi-Fi.

1:10:20- Satu juga mati. - Gak bisa titeri, jadi bingung.

1:10:25- Begitu lagi harus beli Wi-Fi, dongle. - Bekabel.

1:10:32Oke, kalau gitu terima kasih banyak sekali lagi buat diskusinya seru-seru.

1:10:38Jadi mudah-mudahan kita ketemu lagi minggu depan di jam yang sama, di hari yang sama,

1:10:45di selasa malam jam 8. Kalo takut ketinggalan, subscribe aja.

1:10:52- Jadi nanti bisa... - Pencet lonceng.

1:10:55Ya, ada pencet loncengnya.

1:10:57Kalau ada yang mau ditanyakan lagi, di luar sesi live, teman-teman bisa ke bit.ly/nobrolinweb

1:11:04Atau ke sosial media kita masih mesti tanyain aja, nggak apa-apa, di DM atau di Twitter dan lain-lain.

1:11:10Oke, kita mamit. Terima kasih banyak buat teman-teman semua.

1:11:14Mudah-mudahan minggu depan kita ketemu lagi dengan topik-topik yang menarik lagi.

1:11:20Dan tetap di tunggu topik-topik menarik lainnya. Jangan sampai kita menggunakan CTPT untuk...

1:11:26Terima kasih, selamat malam. Sampai jumpa lagi. Bye-bye.