Ngobrolin Framework - Ngobrolin WEB
Yuk mari kita diskusi dan ngobrol ngalor-ngidul tentang dunia web. Agar tetap up-to-date dengan teknologi web terkini. Topik, tautan dan pertanyaan menarik bisa dilayangkan ke https://bit.ly/ngobrolinweb Pembahasan: - 00:00 intro - 2:48 kenalan dengan mas irvan - 15:38 Alasan Angular dibenci - 20:25 Tips kerja dengan team - 32:45 Syarat untuk Rewrite - 35:32 Migration - 49:00 kelebihan nuxt js - 56:09 Kenapa dokumentasi menjadi penting - 59:02 kelebihan dan kekurangan svelte kit - 1:04:31 j Kunjungi https://ngobrol.in untuk catatan, tautan dan informasi topik lainnya.
0:14Hai, hai, hai selamat malam, halo, halo.
0:20Selamat malam. Selamat hari, selesah?
0:23Selesah malam. Selesah malam waktunya kita
0:26Ngobrolin web. Ngobrolin web.
0:29Asik.
0:30Eka belum berangkat nih, kita sempat ya sebelum Eka berangkat.
0:34Iya. Malam ini adalah episode ke-50 atau ke-51.
0:39Karena kita mulai dari 0, jadi udah setengah dari 100 ya.
0:43Hampir setahun. Hampir setahun ya.
0:46Episode besok kayaknya pas tahun ya.
0:49Jadi ditunggu aja. Kita sudah menjalani ini setahun.
0:53Mungkin kita mau rekap ya, ada kalidoskop itu gitu ya.
0:56Perjalanan acara ini dan gimana kelanjutannya.
1:02Oke, gimana kabarnya semua teman-teman?
1:04Mudah-mudahan dalam keadaan baik.
1:05Malam hari ini kita mau ngobrol-ngobrol tentang framework ya.
1:12Frontend framework. Javascript.
1:14Nara sumbernya ya, ini sangat berpengalaman.
1:19Karena sudah nyobain berbagai macam framework kita ya.
1:22Sering gunta ganti ya.
1:24Tidak sering sih, cuma sudah gunta ganti.
1:26Ya, tergantung company-nya kali ya.
1:29Sering juga bikin-bikin proyek-proyek pribadi.
1:32Jadi ya bisa kita galilah di sana.
1:34Kalau saya kan berkutatnya di framework itu aja kan.
1:38Jadi pengalamannya kurang gitu. Apalagi Ivan ya.
1:42WordPress terus ya.
1:45Tidak jauh-jauh dari WordPress.
1:47Tapi dengan semakin maraknya ya framework-framework sekarang muncul banyak yang baru-baru.
1:58Nah, kita mau ini nih, mau ngobrol-ngobrol nih sama ya langsung aja kita invite ya.
Lihat transkrip lengkap
2:04Mas Irfan Maulana, halo-halo.
2:06Halo, apa kabar mas?
2:09Sehat-sehat.
2:11Suara ku aman ya?
2:13Aman.
2:14Oh iya, Cep, ini ada yang nonton live nggak?
2:17Kalau ada coba tulis si komentar suaranya, kedengeran gila semua atau nggak?
2:22Yes, nah sebelum kita ngobrol-ngobrol ya, sebelum kita ngobrol-ngobrol, mungkin boleh lah perkenalan singkat lah dari mas Irfan.
2:30Siapa tahu ada yang belum kenal? Kayaknya nggak ada, ada.
2:32Coba-coba di komen ya, kalau ada yang nggak kenal, coba di komen ya.
2:40Sungguh terlalu.
2:42Sungguh terlalu.
2:44Halo-halo, selamat malam.
2:46Namaku Irfan Maulana, biasa ada yang manggil masipan di Slack atau di...
2:51Slack.
2:53Slack.
2:54Karena Irfan tuh banyak banget, hampir setiap dimanapun diriku berada, kayaknya ada yang namanya Irfan.
3:01Ada yang namanya Irfan ya.
3:02Eka juga sesang mas.
3:04Iya, di beberapa...
3:06Nasib pema pasaran.
3:08Di beberapa company bener-bener sama gitu, Irfan Maulana, Irfan Maulana gitu.
3:12Nama depan dan nama belakangnya cukup pasaran ya.
3:16Gak, unik ya bener-bener.
3:19Unik.
3:21Oke.
3:23Sekarang lagi kerja di GovTech.
3:25Sekarang lagi kerja di GovTech.
3:27Country Masibam, masrin kemantikan pendidikan, tim di Pusgatin.
3:33Ya, bikin-bikin web lah.
3:35Masih ya.
3:37Project-projectnya enterprise semua ya berarti ya.
3:40Enterprise.
3:42Nggak juga sih, yang kerja enggak enterprise.
3:44Kalau skalanya negara kan itu enterprise ceritanya.
3:48Sekali-kali semua lah.
3:50Iya, scalingnya iya.
3:52Tapi service, typical service-nya, terus typical cara kerja ini sih start-up banget ya.
3:58Kayak kita udah pakai framework-framework yang lucu-lucu.
4:03Kekinian ya.
4:04Kita udah pakai UI-equip yang cukup-cukup trendy lah.
4:10Boleh dibocorin nggak?
4:13Jack Query UI bukan?
4:18Itu 2012.
4:21Senca, senca, senca.
4:232012.
4:35Terus UI-kitnya bikin sendiri pakai Tailwind.
4:39Terus ada beberapa yang dibantu pakai Headless UI buat bikin kayak dialog gitu-gitu kan nggak pakai Headless UI.
4:49Unstyled ya, komponenunstyled.
4:51Iya, bikin stylingnya atas ya.
4:54Biasanya project yang dikerjain di GovTech itu berkisar ke project-project seperti apa sih?
5:01Buat internal atau buat bantuin guru dan lain-lain gitu?
5:05Depens on the team ya.
5:08Karena kan ada yang mungkin banyak di-expose orang-orang yang banyak kelihatan ya produk-produk yang buat memang publik ya.
5:16Ada yang buat guru-nya, ada yang buat murid-muridnya, ada yang buat sekolah atau sub-tech-nya juga.
5:23Orang-orang yang...
5:25Tapi banyak yang web-based berarti ya produknya?
5:29Iya, ada yang apps malah kayak satu-dua gitu.
5:33Itu pun nggak tahu apakah itu pakai natif atau pakai web-based, tapi kita punya banyak engineer web-nya.
5:40Wajh, engineer web-nya banyak ya.
5:43Hidup web.
5:46Berarti teman-teman yang nonton jangan kotir perspek karir.
5:51Mau di bidang...
5:54Ya, kalau biasanya kan web mungkin dipikirnya bakal kerjanya cuma bisa di-start up atau di-company.
6:00Nah, ini ternyata GovTech juga masa depannya lumayan cerah.
6:04Iya, banyak kementerian lain juga kayaknya ngarahnya pengen kesana ya.
6:08Jadi implementasi teknologinya udah mulai canggih-canggih lah.
6:11Kalaupun nggak under GovTech.
6:13Tapi ada...
6:15Ya.
6:16Begitu.
6:17Sudah ada yang convert dari app natif ke web belum?
6:21Nggak, begitu tahu.
6:24Oke.
6:25Ketanyaan memancing.
6:29Kalau itu apa, maintain legacy code ada kan?
6:32Maintain ada, tapi mostly yang tak kerjain sih migration justru ya.
6:40Jadi karena...
6:41Oh, di migration ya.
6:42Ya, ada beberapa application kan yang mungkin belum under GovTech ya.
6:46Legacy masih di handle sama tim kementerian sendiri ya.
6:50Atau tim pusat daten atau mana-mana.
6:52Nah, kalau mereka kesusahan handle-nya kadang-kadang kita migrate ke stacknya kita.
6:58Tapi kan karena legacy, jadi ya biasanya ada strateginya ya.
7:02Biar gimana mau gede-gedean atau dikit-dikit atau gimana.
7:08Begitu.
7:10Nah, sepanjang karir Mas Irfan, udah pernah nyobain framework apa aja sih?
7:17Macam-macam.
7:19Dulu jaman-jaman orang belum pakai framework pun.
7:22Dulu tuh ada framework trendy namanya XTJ Essentia.
7:26Oh, XTJ Essentia.
7:27Ya, itu ph framework yang...
7:29Apa itu?
7:30Belum pernah.
7:32Bukan pernah pakai XTJS.
7:34Bukan pernah pakai XTJS.
7:36Coba dulu.
7:38Asik.
7:40Bukan.
7:41XTJS N-nya dia tuh.
7:44Itu jamannya orang belum wedding MVC-MVC gitu dia udah MVC terus.
7:48Dia udah komponen base.
7:50Iya, dia komponen base saat orang-orang belum berpikir komponen base.
7:54Belum.
7:55Itu time of time sih.
7:58Udah juga udah jaman-jaman.
8:00Sebelum XTJ itu sebenarnya.
8:02Udah lama banget kan juga, maksudnya.
8:05Lama banget.
8:06Jaman itu.
8:07GWT pernah nggak?
8:09GWT enggak.
8:10GWT enggak.
8:13Berarti kalau tadinya pakai XTJS mau migrasi ke next yes.
8:17Tinggal tambah nuruf N.
8:21Tembakan umur.
8:23Itu mungkin salah satu ini ya.
8:25Apa?
8:27Pengalaman pertama.
8:29In touch dengan full Javanese.
8:32Front-end.
8:33Full Javanese.
8:34Mas Evan kan awalnya kan dari Java kan.
8:36Iya, Java.
8:37Itu pertama kalinya ke JavaScript gitu ya?
8:40Iya.
8:41Dan full feature framework istilahnya kan.
8:44Kalau yang jQuery, JavaScript, Ntml, CSS kan.
8:49UI framework.
8:51Orang-orang akan kesitu ya.
8:52Tapi ngerjain kayak satu halaman, full modingnya, JavaScript, semua itu XTJS.
8:58XTJS.
9:00Terus sempat ngerasain.
9:02Ini menariknya ya, karena pengalaman ku bergabung dengan tim yang berevolusi gitu.
9:12Jadi akhirnya punya pengalaman kayak ngerjain yang platesen dari pertama bergabung.
9:19Mereka pakai PHP atau Java yang timplating gitu.
9:24Terus berubah pakai ditambahin jQuery, ditambahin angulat CSS.
9:29Jadi nggak cuma tiba-tiba ujuk-ujuk kita belajar angulat CSS, tapi kayak ada reasoningnya.
9:36Kenapa mereka tiba-tiba pindah ke jQuery.
9:38Terus nambahin angulat JS.
9:40Terus tiba-tiba misalnya dari angulat JS move ke yang full feature framework.
9:45Kayak misalnya view JS yang SPA full gitu.
9:47Terus migrate ke meta framework kayak NuxJS di view.
9:54Terus di Tokopedia tuh nggak bisa dibilang framework.
9:58Tapi mereka punya in-house framework sendiri itu.
10:01Di atasnya area.
10:03Terus sekarang NuxJS.
10:07Jadi yang profesional cukup.
10:10Jadi dari XJS ke NuxJS ya.
10:13NuxJS sekarang NuxJS.
10:15Profesionalnya ya.
10:17Waktu di Blibli pakai angulat atau view?
10:22Sempet ngerasain pakai Java, terus tambahin jQuery, terus angulat JS.
10:30Angulat JS yang satu ya.
10:32Terus terakhir yang modernnya itu view JS yang versi 2-nya.
10:36Oke.
10:38Terus baru pindah ke React.
10:40Pindah ke React.
10:42Sempat ke ini dulu, meta framework dulu.
10:44Ke NuxJS dulu.
10:46Nah kalau bentar baru nyadar nih dari obrolan ini.
10:54Jaman dulu tuh kayaknya nggak terlalu banyak layer framework ya.
10:59Keliatannya.
11:01Satu solusi itu udah ngasih semua.
11:06Ya mungkin kalau XJS aku nggak ngejamanin segilanya.
11:09Cuma kayak misalnya Laravel.
11:11Ya udah di atas PHP.
11:13Cuma semua udah preskriptif gitu lah.
11:16Mungkin kalau yang ke bawah sampai sekarang kan.
11:19Yang ada sampai sekarang pattern kayak gitu angular kan ya.
11:22Cuma kalau di level React, View, Swelt.
11:27Biasanya ada satu layer lagi kan meta framework.
11:33Dari NuxJS lah, Nux, SweltKit.
11:36Terus sebelum lagi ada Astro yang bisa dipakai buat semua.
11:39Nah itu berarti perkembangan baru ya.
11:41Relatif baru.
11:42Atau mungkin jangan-jangan dari dulu udah ada fenomena kayak gitu.
11:45Ada layer-layer framework dan meta framework.
11:49Dulu tuh suka ada perdebatan antara kita mau nyebut React itu library atau framework.
11:54Karena dulu kita biasanya nyebut framework.
11:57Full feature.
11:59Ada service layer-nya, ada model-nya, ada view-nya, bahkan...
12:04Sampai effects-nya segala udah disediakan kan.
12:06Ada client-nya.
12:08Udah ada. Jadi kita nggak bikin kayak...
12:12Jangan dulu ajaksia gitu.
12:14Ajaksia itu udah bawaan dari framework ya.
12:18Masing-masing.
12:19Sampai sekarang mereka menolak disebut framework.
12:23Mereka emang kalau misalnya kita pengen kaku-kaku makna semantiknya ya.
12:29UI library.
12:31Cuma kan karena nggak di standarisasi ya.
12:34Maksudnya orang mau nyebut itu framework.
12:37Terserah.
12:39Makanya akhirnya ada framework dari atas framework kan.
12:43Meta framework.
12:45Omber muda.
12:47Hal itu nggak ada di Angular.
12:49Iya ya. Angular nggak ada ya.
12:52Mungkin mereka juga visioner juga ya Angular.
12:55Karena mereka sadar pada akhirnya orang akan butuh itu ketika develop full feature application gitu.
13:01Masa lo nggak ada HTTP client-nya gitu.
13:04Pada akhirnya kan lo akan nge-patch juga.
13:06Tapi mereka berpikirnya begitu gitu.
13:08Dan target audience-nya itu lain jenisnya.
13:11Lebih korporat lah. Yang membutuh stabilitas.
13:15Tapi kadang ini ya.
13:17Plus minus lah. Kadang orang jadi problematik.
13:20Ketika orang belajar react itu kayak mereka udah masuk ke hutan rimba nih.
13:24Fetchingnya mau pakai apa? Orang udah bingung sendiri.
13:27Karena gilanya banyak banget gitu.
13:29State library.
13:30State library-nya apa?
13:32Templating engine-nya apa?
13:35Kusing ya.
13:37Routing-nya gimana?
13:39Nah cuma di situ.
13:40Pilihannya banyak.
13:41Meta framework.
13:42Meta framework kasih solusi.
13:44Nah udah biar fokus.
13:46Pakai cara gue aja.
13:48Next.js kan nawarin.
13:50Opionated.
13:52Opionated.
13:54Routingnya begini.
13:56Tetap aja state management nggak dikasih.
13:59Maksudnya meta framework ada banyak.
14:02Maksudnya masing-masing milih mau ngasih solusi apa aja.
14:06Misalnya kalau remix kan.
14:08Remix kan meta framework diatas react.
14:10Mereka tuh punya apa sih?
14:12Kayak yang visioner tuh form kan.
14:16Form handler-nya bagus.
14:18Ya tapi.
14:20Routing semua ada.
14:22State management nggak dikasih.
14:24Udah amat soal UI urus sendiri.
14:26Jadi kayaknya lain-lain gitu.
14:27Suka-suka mereka aja.
14:29Betul.
14:30Bawa GraphQL gitu kan.
14:32Buat bikin blog harusnya juga.
14:34Oh gitu jantung.
14:36Ya ini pertama kali mereka ngasih image.
14:38Image apa?
14:40Image processingnya itu.
14:42Itu di contek sama Next.js akhirnya kan.
14:44Itu itu berguna sekali itu.
14:46Cuma jadi berat banget makin banyak portionnya.
14:49Open source maintainer itu kan punya cost.
14:54Jadi mereka nggak bisa ngambil semua.
14:56Kalau ngambil semua kegedean costnya.
14:59Karena ada cost kan untuk maintain itu semua.
15:02Ya begitulah.
15:05Kenapa Anggular banyak dibenci?
15:09Oh harusnya kita nanya sama itu.
15:13Sama kemarin itu sama Jislin.
15:15Anggular.
15:17Enggak.
15:19Kita nggak benci lho.
15:21Siapa yang benci?
15:23Banyak memes katanya.
15:24Banyak memes tentang Anggular.
15:26Anggular itu banyak jadi memes.
15:28Jadi olok-olokan gitu ya.
15:30Nama cerita dikit.
15:32Jadi dulu di Blibli itu kan pakai Anggular JS versi 1 tuh.
15:37Terus.
15:38Sekarang?
15:39Anggular dulu dulu dulu dulu.
15:41Dulu dulu.
15:42Anggular JS versi 1.
15:44Anggularnya itu di treat kayak jQuery gitu lah.
15:46Mereka masih ada timplating di server.
15:48Terus baru Anggular JS nya datang di client gitu.
15:51Di load ya.
15:53Terus ada pikiran buat totally remove yang Java itu.
15:57Java timplating.
15:58Kalianya kan ke full feature framework itu ya.
16:00Yang JavaScript framework.
16:02Nah diriku itu salah satu orang yang POC.
16:05Beberapa framework nya.
16:06Dan.
16:07Honestly.
16:09Gue sebenernya condok ke Anggular versi 2 saat itu.
16:13Kenapa?
16:14Karena.
16:15Saat itu Blibli itu orangnya.
16:17Mostly orang Java gitu.
16:19Lebih deket ya.
16:20Dekat lah dengan OOP gitu.
16:22Class dan lain-lain.
16:24Mereka tau.
16:27Tim intinya.
16:29Blibli itu yang parent company itu udah.
16:32Pake Java sejak lama.
16:33Pake Spring.
16:34Iya.
16:35Dan menurutku Anggularnya.
16:36Dekat ya dengan.
16:37Cocok ya.
16:38Cocok ya.
16:39Ya banyak apa.
16:42Approach nya yang Java banget gitu.
16:44Pake dekorator.
16:46Dependency injection gitu.
16:48Itu di Java udah.
16:50Udah.
16:51Hatam lah istilahnya.
16:52Udah keluar kepala lah ya.
16:53Itu susah buat orang broad end.
16:55Tapi buat orang Java gampang gitu.
16:57Nah diriku berpikir.
16:59Harusnya learning curve nya itu mudahan Anggular versi 2.
17:02Dibanding.
17:03VGS atau VGS.
17:05Karena.
17:06Kayaknya itu lebih mudah dipahami secara konsep gitu.
17:10Karena mereka udah deket gitu.
17:11Mereka udah biasa ngerjain MVC di Java gitu.
17:14Tapi ternyata pas dilebar ke tim gitu ya.
17:19Untuk ngeliat gitu.
17:21Ini yang Anggular, ini yang VGS versi 2 saat itu.
17:25Ternyata mereka lebih condong ke VGS versi 2.
17:29Oh.
17:30Karena dulu Anggular versi 2 itu kayak.
17:35Belajar banyak dari Anggular versi 1.
17:38Versi 1.
17:39Ya.
17:40Seolah-olah kayak kita ngomong.
17:41Direktifnya ya.
17:42Iya.
17:43Kita ngomong bodohnya gitu ya istilahnya.
17:44Semua yang Ang-if.
17:46Ang-ang itu.
17:47V-if.
17:48Itu jalan.
17:49Jalan.
17:50Jadi kayaknya untuk migrasi dari.
17:53Interaktifitinya gitu.
17:54Iya.
17:55Interaktifitinya API.
17:56Enggak, ngomong-ngomongnya gitu loh.
17:57Masih fun.
17:58Iya.
17:59Jadi sama-sama pakai interaktifitinya API kan.
18:01Iya.
18:02Iya.
18:03DSLnya ya.
18:04Jadi secara lerni kalau ternyata timnya lebih mudah pick up ya.
18:08Few.
18:09Few versi 2 dibanding Anggular yang versi 2 itu.
18:13Padahal diriku berharap harusnya ini lebih mudah dipick deh.
18:16Karena secara konsep itu lebih deket ke Java gitu.
18:19Ya, begitulah.
18:20Jadi salah satu konsiderasi saat itu memang learning curve-nya lebih mudah dipick sama teman-teman engineer-nya.
18:27Dengan pengambil ke few.
18:29Nah, cuma itu poin menarik sih.
18:32Mungkin nyambung ke pertanyaan tadi.
18:34Kalau dibenci itu kan subjektif ya.
18:36Maksudnya orang suka nggak suka itu kan subjektif banget.
18:39Ya, mungkin kalau yang latar belakangnya JavaScript banget.
18:43Dari awal misalnya.
18:45Web kan ini ngomongin orang web.
18:47Zaman sekarang mungkin mulai belajarnya pasti ya dari JavaScript dan kawan-kawan kan ya.
18:52Terus lihat Anggular.
18:54Ya, mungkin karena kurang familiar.
18:57Jadi nggak suka.
18:59Bisa aja tuh.
19:00Apa? Ini tebakan aja.
19:02Mungkin banyak kejadian meme.
19:04Salah satunya karena itu.
19:06Sama kalau Anggular...
19:08Selain Anggular 1, ya kalau Anggular JS kan udah beda banget kan ya.
19:12Sama Anggular yang pasca dibeli Google.
19:15Pasti diambil Google.
19:17Enggak, dari awal memang punya Google.
19:19Cuman dia rewrite.
19:20Oh nggak.
19:21Iya, dia rewrite.
19:22Sebelumnya kayaknya pure open source deh.
19:24Abis itu diakuisisi gitu kan ya.
19:26Enggak.
19:27Dari tim internal Google dari awal.
19:29Oh.
19:30Nah, kalau yang sekarang kan preskriptif banget ya kayak strict.
19:34Oh, ya bisa dibilang strict banget lah.
19:37Mungkin beda banget kan ya.
19:39Sama cara pandangnya react.
19:41Jadi mungkin kalau orang yang nggak terbiasa.
19:43Mungkin ya merasa nggak nyaman.
19:46Kayak, ah ribet banget, sulit banget.
19:48Padahal maksudnya itu mempermudah.
19:51Biar nggak harus decision making yang bergantung ke tim lead atau apapun.
19:56Itu kan buat kalau di perusahaan besar berguna banget kan ya.
19:59Soalnya kalau misalnya terlalu apa ya.
20:02Bergantung sama pilihan subjektif tim lead.
20:05Kalau orangnya pergi nggak ada yang bisa pakai.
20:07Atau pada nggak suka, repot.
20:09Itu yang ingin tak bahas ya.
20:12Jadi ketika kita kerja di tim atau di kantor gitu ya.
20:19Sebisa mungkin hilangin hal-hal yang subjektif tadi itu.
20:24Karena, jadi gue nggak milih angular karena gue senang gitu.
20:29Tapi...
20:30Tapi karena cocok sama tim.
20:32Iya.
20:33Let's say yang jadi strong point-nya adalah learning curve.
20:36Ya bukan learning curve-nya diriku, tapi learning curve-nya timnya.
20:40Karena tiap orang kan nge-pick-nya beda-beda.
20:42Makanya kasih dulu ke anak-anak.
20:44Lihat bagaimana mereka bisa nge-pick up itu.
20:48Terus ambil hal-hal objektifnya gitu.
20:51Jadi kayak misalnya mau ngebandingin antara view dan angular.
20:55Jangan, "Oh kayaknya gue lebih senang angular."
20:57"Oh kayaknya gue lebih senang view."
20:59Tapi ambil hal-hal objektifnya.
21:01Misalnya bandingin aja bundle size-nya.
21:03Bandingin aja berapa load time-nya hal-hal yang memang kita bisa measure dengan mudah gitu.
21:10Nah, kayaknya itu lebih ini ya.
21:13Lebih smooth biasanya.
21:15Kalau kita mau nge-propos perubahan-perubahan yang radikal-radikal kayak gitu.
21:19Let's say perubahan framework.
21:21Kalau kita majuinya hal-hal objektifnya dibanding hal-hal subjektifnya gitu.
21:25Karena akan selalu ada tuh.
21:27Pasti misalnya karena gue datangnya dari orang Java, gue akan prefer ke angular dibanding view misalnya gitu.
21:34Itu akan selalu ada.
21:36Tapi kan beda ya.
21:38Maksudnya diriku dengan timnya bisa jadi point of view-nya jadi beda gitu.
21:43Makanya itu juga diriku nggak menuga gitu.
21:46Ternyata hal yang learning curve-nya buat gue lebih muda, ternyata buat tim nggak begitu.
21:50Belum tentu.
21:52Malam ini judulnya kita ganti ya, jadi kita ngobrolin angular.
21:58Jangan sedih Razak ya, jangan sedih ya.
22:05Bukan cuma angular yang dibenciin, Java juga banyak pembencinya sekarang.
22:10Di roasting mulu ya.
22:12Di roasting mulu.
22:14Jadi dua sahabat ini ya.
22:16Satu lagi yang dari sudut pandang objektif itu adalah cost of maintenance itu.
22:22Membalik cost maintenance.
22:24Update dependency itu nggak semudah membalikkan telopot tangan NPM update jadi loh.
22:31Ini tuh ini Mas Ivan.
22:33Kita mesti lihat track record-nya si library tersebut dalam maintain backward compatibility-nya.
22:39Karena ada beberapa framework yang memang mereka punya ini kan, update yang berkala.
22:46Kayak angulan kan update berkala.
22:48Setiap 6 bulan sekali kita akan update major misalnya.
22:52Nah diperhatiin dalam beberapa waktu kebelakang, misalnya 1 atau 2 tahun kebelakang.
22:57Bagaimana mereka menangani breaking-breaking change-nya tuh.
23:00At least kalau kita lihat track record-nya kita bisa rada punya...
23:06Memminimalisir risiko.
23:10Cuma kalau ya kayak dulu kayaknya Ivan pernah bilang deh,
23:15punya semua library apapun yang kita pakai itu faktor ya kayak risiko kedepannya.
23:20Ada kemungkinan, ada kans besar atau kecil nggak tahu bakal ribet.
23:24Kayak kemarin kan kalau yang round-end pada ngikutin yang kasus Gatsby nggak?
23:29Kayak sempet ribut-ribut.
23:30Nggak tahu cuma akhirnya kayaknya udah nggak terlalu masalah.
23:33Kan Gatsby dibeli Netlify. Abis itu ya namanya nggak dimatiin sih.
23:39- Nggak sampai dimatiin ya? - Nggak, belum, nggak tahu.
23:43Di sunset banyak yang kena lay off kan?
23:46- Banyak yang kena lay off. - Lagi pacir klik gini ya.
23:49Mungkin di luar perkara Gatsby mereka harus, si Netlify-nya harus melangsingkan personelnya.
23:55Terus Gatsby-nya tuh kayak beberapa minggu gitu nggak di-update.
24:00- Terus marah-marah? - Tapi ya maksudnya jadi nggak di-update aja.
24:06Terus kayaknya yang sebelumnya jadi maintainer yang in charge ngejalanin projeknya
24:13tuh kayaknya pada di-kena lay off semua atau gimana nggak tahu.
24:16Jadi maksudnya ini bukan kasus yang ekstrim beneran.
24:20- Progresnya tidak berjalan gitu ya? - Bukan se-ekstrim beneran dimatiin.
24:24Cuma jadi kayak orang-orang yang pakai jadi curiga ini terbengkalai atau gimana.
24:28Orang-orang yang tadinya ngerjain kayak udah nggak di situ semua.
24:31Jadi maksudnya kalau kita pilih meta framework entah kecil atau besar
24:36ke depannya bakal ada risiko kayak gitu.
24:38Kecuali kita ngurangin faktor-faktor risiko kayak gitu kayak yang tadi dibilang itu
24:43bikin compiler atau bikin meta framework sendiri yang dikerjain di Tokopedia dengan React.
24:49Misalnya itu kan salah satu cara ngamanin.
24:53Gue nggak bisa bilang sih. Gue nggak bisa bilang semua orang harus bikin meta framework-nya.
24:58- Karena itu penjara-dara banget. - Usahalah.
25:01Bisa jadi nggak. Benefitnya mungkin nggak segede yang dikira.
25:06Kalau nggak salah Tokopedia pernah mau bikin kan.
25:09Pernah lihat dokumentasinya. Udah bikin kan.
25:12Tapi terbengkalai akhirnya ya.
25:14- Enggak. Sekarang malah ada di produksi. - Kok ada?
25:19Sebelum diriku resign soalnya.
25:21Tapi publik? Bisa dipakai sama orang?
25:23- Enggak. Enggak. Enggak. Enggak. - Bukan.
25:26Dulu pernah ada yang typescript, yang generator gitu kita ketik-ketik gitu.
25:32- Ada kan dulu ya? - Ada, ada, ada.
25:35- Kita bikin lagi yang menyerupai itu. - Oh bikin lagi.
25:38- Tapi internal. - Ya. Udah ini lah ya.
25:42Itu adalah kulminasi dari apa yang kita belajar bertahun-tahun lah.
25:47Jadi kayak dikumpulin jadi framework baru lagi.
25:50Kayak kita udah pernah bikin luarin framework sendiri,
25:52tapi pada akhirnya malah adopsi internalnya kesusahan gitu kan.
25:56Jadi ya udah kita bikin spesial buat kita aja gitu.
26:00Jadi ada meta frameworknya sendiri.
26:04Nah kalau React itu problemnya ini nih.
26:08Masing-masing punya gaya masing-masing sendiri-sendiri.
26:11Tidak apa unopinonated. Jadi masing-masing ya terserah gitu, bebas.
26:15Mau struktur foldernya satu file juga bisa gitu kan.
26:19Mau per folder juga bisa gitu.
26:22Jadi terlalu bebas yang kalau angular itu terlalu mengekang gitu ya.
26:27Kalau project personal mah udah amat. Tiba-tiba pengen, tiba-tiba.
26:32Diurus ulang semua dari awal.
26:34Nah cuma kalau kampanye kebayang sih pusing.
26:36Dan dulu pernah denger cerita orang yang apa sih kayak codebase cukup besar.
26:40Terus migrasi. Dulu kan si React itu masih apa?
26:44- Klas-klas base komponennya. - Klas komponen.
26:47- Iya. - Nah terus sebagian yang baru,
26:50ya setelah-setelah kan React udah keluar juga sebenarnya ya.
26:54Setelah 5 tahunan gitu, kan mulai ya sekarang kan hampir semua fungsin komponen.
27:00Jadi kayak masih campur-campur.
27:02Tapi kalau nggak terliti kopasnya ya bisa celaka.
27:06Masih ada disk, apa? Disk-disknya itu loh.
27:09Masih pakai komponen di-mount, masih disk.
27:12Nah kalau misalnya ada, sebenarnya kalau terpisah,
27:15kenungnya terpisah sih, nggak apa-apa ya aman-aman aja.
27:18Cuma kalau ada kebutuhan yang pakai atau extend
27:21atau modifikasi dari kode yang style lama ke style baru,
27:26itu nambah-nambahin kerjaan, ngerepotin.
27:28Terus kalau provider, jadikan semua jadi pakai hukum,
27:32semua use-use gitu.
27:35Jadi lumayan banyak juga yang harus dimodify
27:38kalau codebase-nya besar.
27:41Nah itu kalau diriku biasanya masukin ini ya.
27:45Either itu masukin ke THDEP atau improvement,
27:48tergantung apa yang mau di-achieve.
27:50Misalnya kita tahu nih, classbase dan functional component
27:54ada gap dari bundle size yang dihasilkan nih.
27:59Dan kita misalnya mau ambil, mau measure-nya adalah performance-nya.
28:03Nah jadi ketika kita ngerjain refactoring dari classbase
28:10ke functional, yang mau di-achieve adalah final result-nya
28:14ke bundle size-nya atau ke performance-nya tersebut.
28:17Nah itu gampang tuh nge-execute hal-hal gitu.
28:20Atau memang ke technical depth.
28:23Kalau technical depth biasanya jangan di-execute gede-gedean kan,
28:26pelan-pelan aja gitu.
28:27Misalnya kalau di Tokopedia dulu karena kita punya tim Korea
28:33jadi suka bikin alat-alat yang lucu-lucu,
28:37termasuk kayak deteksi gitu, jadi kita punya dashboard
28:41yang ngedeteksi seberapa banyak jumlah class component
28:43di dalam satu base gitu.
28:46Jadi kita bisa tahu.
28:47Oh tim dev ops-nya lah ya, tim dev ops gitu ya.
28:49Untuk infra gitu, beberapa orang juga buat tim infra,
28:52tim platform, atau tim functional.
28:54Jadi kita tahu tuh project ini masih, misalnya 1% masih punya classbase.
28:59Nah itu kadang bisa dimasukin ke KPI timnya gitu.
29:04Jadi bisa dimesure karena ada angkanya gitu.
29:08Jadi kayak nggak suka-suka aja.
29:11Kayaknya gue lebih suka functional, tapi ada yang bisa di-achieve gitu.
29:15Nah itu biasanya kalau kerja di tim itu lebih menyenangkan
29:18kalau kita ngeliat hasil dari apa yang kita kerjakan.
29:22Jadi kayak ini buat apa sih ganti dari classbase ke functional gitu.
29:27Makanya kadang ada yang repot-repot bikinin alatnya lah,
29:31repot-repot ngukur before-afternya, performance-nya kayak gitu-gitu
29:39biar kerjaannya lebih menyenangkan ketika di-deploy di production.
29:43Dan ke depannya kalau butuh buy-off word,
29:46ijin bikin fitur ini itu, improvement ini itu,
29:49udah ada datanya ya, bukan mau bikin improvement apa,
29:52baru nyari-nyari dulu apa, argumennya apa.
29:55Nah kalau ini kan udah ada, tinggal cari-cari.
29:57Nah ini terbukti kalau pakai ini, speed-nya naik sekian persen.
30:03Ya kadang-kadang nggak selalu ini ya, nggak selalu berbanding lurus.
30:07Oh, nggak sesuai.
30:09Nggak selalu berbanding lurus dengan, tergantung apa yang mau di-achieve.
30:12Misalnya kayak implementasi TypeScript itu bisa jadi nggak berbanding lurus tuh
30:16dengan performance, tapi kayaknya ini ya maintainability-nya misalnya.
30:20Yaudah kita bikinin aja dashboard-nya untuk kompo.
30:23Karena kan adopsi TypeScript bisa incremental ya.
30:26Kita bisa masih LOJS gitu, jadi kita bisa aja bikin satu project tuh
30:30support TypeScript dan support JavaScript.
30:32Tapi misalnya kita punya target akhir tahun kita bisa 80-90% TypeScript.
30:38Yaudah kita bikin dashboard aja ngukur seberapa banyak adopsi TypeScript
30:43di dalam codebase tersebut gitu.
30:46Oh ya pelan-pelan aja, biasanya awal-awal pasti ada yang ini, ini gitu.
30:51Penasaran nih buat, maksudnya kalo di produk-produk kebayang lah ya.
31:00Misalnya kalo mau migrasi atau mau memang maintain produk itu bisa bertahap.
31:06Cuman kalo kita kerjanya client-based atau punya deadline.
31:12Atau misalnya punya sesuatu yang perlu dikejar gitu ya.
31:16Meskipun contohnya startup lah ya, apa justifikasi kita untuk misalnya migrasi framework
31:23atau migrasi codebase, justifikasi ke client atau ke product owner.
31:29Sedangkan migrasi itu tidak menambah feature, tidak menambah apapun gitu.
31:35Maksudnya hasil akhirnya dengan waktu yang digunakan dan cost akan menjadi hal yang sama
31:41yang dengan sebelumnya. Apa justifikasi nya gitu biasanya?
31:44Itu yang tadi yang sebenarnya re-rec kan gak buat semua orang ya,
31:47atau gak buat semua perusahaan atau agensi.
31:51Kalo gak dibutuhnya kenapa kita nyari-nyari justifikasi gitu.
31:55Itu kan berarti kerjaannya nyari-nyari gitu.
31:57Kerjaan yang kita nyari-nyari itu biasanya udah gak bener gitu.
32:00Misalnya kalo kayak yang saya...
32:02Ya betul-betul ekstrim banget, misalnya frameworknya discontinue.
32:05Kalo itu kan udah gak bisa ngapa-ngapain lagi.
32:07Kalo itu ya beda.
32:08Atau udah gak bisa halir siapapun.
32:11Nah apa nih?
32:14Jadi di beberapa company sebelumnya itu ada yang ngukur developer productivity
32:20pake jumlah commit. Apa yang terjadi?
32:23Citing-citing.
32:26Jadi gak beneficial.
32:30Sampai tuh 200...
32:33Udah jadi, kerjaannya udah nyari-nyari mode nya.
32:36Oh, nyari-nyari.
32:38Tapi rewrite itu gak untuk semua orang.
32:42Kalo memang perusahaannya masih aman-aman aja pake WordPress ya.
32:45Kenapa kita rumit-rumitnya nyari pake next.js gitu.
32:48Karena pake WordPress juga masih jalan.
32:51Kita masih bisa maintain dengan baik.
32:53Nah, problemnya misalnya di Tokopedia nih.
32:55WordPress nya di rewrite ke next.js.
32:57Kenapa gak ada developer yang bisa WordPress gitu.
33:00Nah, kalo itu...
33:02Ini make sense kan maksudnya.
33:04Aku masuk akal hiring sama productnya di discontinued.
33:10Pilihannya kan kita hire WordPress developer.
33:13Atau yaudah kita rewrite aja.
33:15Sehingga siapapun developer nya di tim kita bisa maintain.
33:18Nah itu make sense kan.
33:20Tapi kalo kayak WordPress gue, gue rewrite ke next.js.
33:24Tapi gue sebenernya lebih jago WordPress yang apa?
33:27Atau, agensi klien nya emang gak pernah peduli kita pake apa.
33:37Fiturnya jalan kok, fiturnya jalan.
33:39Kenapa mau dirilis gitu ya.
33:41Itu biasanya link-in driven development.
33:46Biar bisa update CV.
33:49Update CV, abis itu rewrite.
33:52Ada waktu belajar Mas Ivan, kalo tujuannya belajar misalnya gue pengen punya pengalaman.
33:57Bagaimana cara memigrasi WordPress ke next.js.
34:01Kan gak masalah tuh kita belajar deployment nya.
34:05Belajar bagaimana porting fitur-fitur di next.js ke...
34:09Fitur-fitur di WordPress ke next.js.
34:12Atau kalo mau WordPress nya dibikin headless kita jadi punya penanggung.
34:16Gimana consume API nya WordPress dengan baik.
34:19Hal-hal kayak gitu kan gak masalah ya.
34:21Tapi kalo ngobrolin profesional term.
34:24Gue sih bilang kayaknya harus seribu kali mikir ya.
34:27Kalo gak ada benefit.
34:29Ya kalo kayak gitu kasusnya belajar.
34:31Mending malah bikin project open source aja gak sih.
34:34Personal, maksudnya di luar tempat kerja.
34:36Itu kan tetep bisa buat link-in, buat portfolio.
34:39Iya, tapi problemnya kadang ini ya kak.
34:42Maksudnya kalo project pribadi itu dirimu gak ngerasain migration dari satu hal ke hal lain.
34:48Kalo iseng beneran bikin dulu di WordPress.
34:51Ya padahal di world experience kadang-kadang dirimu harus maintain legacy application.
34:55Terus bikin incremental improvement disitu.
34:58Incremental improvement bisa jadi dirimu terpaksa maintain legacy.
35:02Atau kita coba rewrite dikit-dikit.
35:05Nah pengalaman itu kan yang mahal ya maksud gue ya.
35:08Nah itu reda susah kalo kita starting project baru.
35:12Jadi kalaupun belajar...
35:14Bikin project baru itu gampang. Maintain dan minahin yang sulit.
35:18Belajarnya belajar migrationnya.
35:21Oke ngomongin migration, nah ini sebenernya topik utama kita nih.
35:26Ini dia.
35:29Jadi mungkin background story dulu ya.
35:32Jadi ada satu projectnya mas Irfan yang namanya Baca Kuran.
35:39Open source juga kan ya.
35:44Jadi awalnya dibikin pake NuxJS.
35:47Itu bener, itu pengalaman profesional pribadi itu artinya.
35:50Oh professional dan pribadi ya.
35:53Kamu ngomongin aja.
35:55Iya iya.
35:58Jadi dari NuxJS meta frameworknya NuxJS.
36:04Kemudian di conversi di Migrasicle.
36:07Bukan Nux itu meta frameworknya Vue.
36:10Vue, sorry.
36:13Bukan NuxJS. NuxJS itu meta framework dari VueJS.
36:18Ada XJS, ada NuxJS, ada NuxJS. Pusing-pusing.
36:23Developer susah cari nama ya.
36:26Tinggal dari Nux jadi U aja Nux.
36:29Bersyukur banget pas Svelte Kit rilis namanya Svelte Kit, oke dari Supper pindah nama apa? Pindah ganti nama jadi Svelte Kit.
36:38Yang pun bersyukur banget kirain bakal namanya Nux.
36:41Dan Nux ada Nux View.
36:44Nux React.
36:46Nux, habis itu ada Nux lagi.
36:49Terus aja.
36:51Nah ini kita pengen gali lebih dalam alasannya kenapa kok pindah dari Nux ke Svelte Kit.
36:57Kan sama-sama meta framework kan ya.
37:00Pertama kenapa dulu tak tulis pake NuxJS karena itu jaman-jamanya diriku profesional masih pake VueJS.
37:09Terus kaya perlu explore other things lah.
37:16Jadi yang di kantor bisa jadi diriku gak ketemu hal-hal yang simple-simple gitu lah.
37:25Karena diriku dateng projectnya udah ada jadi ada banyak hal ya diriku gak tau ceritanya sudah begitu.
37:31Tiba-tiba udah ada aja.
37:33Ya jadi salah satu caranya adalah bikin dari nol sendiri pake framework yang sama yang dipake di kantor.
37:39Jadi itu ceritanya sampe tak maintain bertahun-tahun lah.
37:44Terus akhirnya pindah ke Tokopedia pake ReactJS.
37:49Mulai profesional pake ReactJS tuh bertahun-tahun kan.
37:53Akhirnya kaya merasa mulai ketinggalan banget nih sama perubahannya Vue.
37:58Terus tiba-tiba mereka release gede-gedean yang versi 3 itu masif banget.
38:04Itu kabarnya kaya angular 1 ke angular 2.
38:07Iya. Approachnya banyak yang berbeda lah.
38:10Buat orang-orang yang gak mengikuti terus belajannya dulu Vue 2 itu rada susah untuk kaya.
38:16Kan itu harus ini ya. Masih bisa unlearn semua yang kita ketahui.
38:21Terus belajar dengan approachnya.
38:25Vue 3 itu kadang masih kebawah-bawah gitu loh.
38:28Nah diriku kesusahan untuk catch up hal-hal yang terjadi di Vue JS.
38:33Sementara diriku sudah tidak profesional moden Vue JS.
38:37Nah kondisinya lagi setelah Vue release versi 3, NaxJS tuh ketinggalan tuh.
38:44Terceret-ceret, tersyok-syok gitu.
38:47Ini udah versi 3, udah major berarti ya.
38:51Si NaxJS-nya untuk adopsi Vue 3-nya itu mereka mesti rewrite grown up gitu.
38:58Benar-benar dari engine-nya harus di rewrite sampai ke atas-atasnya.
39:02Terus proses migration-nya jadi rumit kan.
39:06Mereka coba bikin jalan tengah lah.
39:10Biar gak tiba-tiba gede-gedean ke cara pandangnya Nax3.
39:16Karena kan ada orang-orang yang pada akhirnya tersyok-syok gitu.
39:20Diriku salah satu orang yang tersyok-syok.
39:22Dan coba mengikuti dari Nax2, harus adopsi Vue 3, harus adopsi Nax3.
39:29Itu kayak.
39:30- Dua kali naiknya ya? - Iya.
39:34Harus belajar Vue-nya, harus belajar NaxJS-nya.
39:37Sudah begitu diriku punya pengalaman dengan Nax2 kan.
39:41Nax2 itu memang salah satu framework yang menurutku cukup terkenal dengan magic-magic-nya gitu.
39:48Jadi banyak hal ajaib yang bisa terjadi di Nax3S.
39:53Kayak kita bisa pakai sesuatu tanpa harus impor barangnya.
39:58Itu bisa di Nax3S.
40:00Which untuk banyak orang itu membantu ini ya, productivity-nya.
40:05- Dan ada yang mau bingung. - Bingung.
40:08- Sebenarnya kalau posisi kita udah di dalam. - Itu juga sih.
40:12Kalau dapat kode yang bukan kita tulis, itu pusingnya minta ampun.
40:19Kalau kita sudah berada di ekosistem Nax2-nya, itu kita paham kok sebenarnya.
40:25Memang cara kerjanya begitu.
40:27Tapi untuk outsider, orang yang baru belajar, misalnya datang dari yang react yang apa-apa.
40:33Harus jelas runtungannya, belajar caranya Nax3S. Ini kadang-kadang khawatir terus tersesat di jalan.
40:42Kok ini dia bisa pakai sesuatu tapi gak pernah diimpor?
40:46Yang begitu-begitu bikin learning curve-nya tersyok-syok.
40:51Jadi aku udah mencoba rewrite dari yang versi 2 ke versi 3.
40:57Udah, udah coba. Ngikutin path-nya dia, terus coba kosongin semuanya.
41:05Terus mulai create awal, terus masukin kode-kode kita ke kodenya mereka.
41:15Tapi tetap susah banget gitu.
41:19Itu mungkin bukan salah framework-nya, tapi salah diriku juga.
41:23Karena di yang versi 2 itu diriku bikin banyak walk-around.
41:28Jadi akhirnya walk-around itu tidak secara offisial terdokumentasi dengan baik di path migration-nya.
41:35Jadi kesusahan untuk memindahkan dari versi 2 ke versi 3.
41:40Karena projeknya juga bukan projek yang beresiko, gak ada yang akan rugi kalau diriku tulis ulang dari awal.
41:48Tentu mempertimbangkan itu ya, mempertimbangkan ini projek pribadi, gak ada yang akan rugi.
42:00Terus gak ada analitiknya juga, dari diriku gak tau ada yang pakai tokoh.
42:05- Oh saya pemakai, saya pemakai.
42:08- Saya gak berasa ada yang dirubikan dengan proses rewrite ini.
42:14Terus benefit-nya buat diriku sendiri jadi belajar spell kit dengan lebih baik.
42:22Sebelumnya udah gak ada yang type spell kit juga.
42:26- Yang pakai spell udah di mana?
42:28- Sebelumnya udah.
42:29- Sebelum pakai spell kit udah nyoba spell kit.
42:33- Tapi kalau view ke spell lebih enak memang migrasinya, maksudnya pemahamannya.
42:39- Depens ya, soalnya secara sintax banyak yang berbeda.
42:47Jadi banyak hal yang mesti di pelajari ulang memang, dari view ke spell kit.
42:54- Spell.
42:55- Tapi nanya, iya spell, spell kit beda lagi.
42:58- Spell.
42:59- Kalau pengalaman ketemu spell kit itu sebenarnya di tokoh beda udah ada yang satu halaman yang pakai spell.
43:06Homepage-nya dia, homepage yang pervisit.
43:10Jadi kalau kita belum pernah nunjungi halaman tokoh beda, terus kita nunjungi itu yang serve SSN spell.
43:19Tapi begitu kita klik sesuatu atau refresh halaman ini itu udah pindah ke halaman react-nya.
43:25- Oh ya waktu di feature di Chrome Dev Summit 2018 ya.
43:32- Buat ngeplik si performance-nya.
43:36- Tapi itu masih spell versi 2 loh, gak di update tapi ya.
43:40- Pada akhirnya gak ada yang maintain juga karena cuma satu halaman, terus ada fitur.
43:48Fiturnya jadi gak ketinggalan sama fitur yang di halaman react-nya.
43:53Gak tahu akhirnya gimana obrolan dibuang aja, malih pakai react aja gitu ya.
43:58- Udah dari server component juga sekarang kalau misalnya mau DSSR.
44:04- Udah stable emang tuh?
44:06- Ya stable-stable aja sih sebenarnya ya.
44:09Cuma maksudnya sekarang kan udah ada spell kit ya SSR-nya ya.
44:12Jadi kayak approach mereka tuh paling different gitu.
44:15Kayak mereka dulu tuh render manual gitu aja di server.
44:19Kayak react tuh render to string di server lah.
44:24- Jalanin aja sampe jadi HTML.
44:28- Itu pertama ketemu spell.
44:31Jadi secara sintaks sudah pernah ketemu lah.
44:36Terus di Shirebox juga ada tuh satu internal application yang pakai spell.
44:43Tapi pada akhirnya juga gak di maintain karena developer-nya developer react semua.
44:48Jadi di maintain tapi ini kayak liar gitu modingnya.
44:55Ada cerita lancung masa bisa.
44:59Jadi kalau di react itu kan kita biasa offer props ke children.
45:05Terus kalau kita pengen ngubah props tersebut kan kita lempar callback ke atas ya.
45:10Handle chain atau on chain gitu ke atas nanti.
45:13Bagian atas yang ngubah props tersebut kan, biar propsnya di drill ke bawah gitu.
45:18Nah disvel, gak tau ini fitur atau bakat atau gimana ya.
45:23Disvel, some how ada orang yang bisa ngubah children.
45:27Ngubahnya di children.
45:29Jadi secara data flow kan bingung ya maksudnya.
45:32Ini kok propsnya berubah ya?
45:35- Nah cuman salah, misalnya mindset-nya.
45:38- Mindsetnya masih mindset-nya.
45:41- Iya, as is well punya convenience.
45:44Metode sendiri kan dispensi.
45:46- Iya, kalau mau chance flow.
45:48- Seperti kan dengan cara mana kita di react.
45:51- Akak-akak memontir lah ya.
45:53- Kok ini ada yang ubah props di children ya?
45:56"Ajir ini siapa orang ya?"
45:59Itu susah banget dipres.
46:01Gimana cara kita tau komponen mana yang diubah di children?
46:04"Hahaha, susah banget cari, Pak."
46:07Dan some how kan itu bisa bikin ini ya.
46:10Bug yang unintended dan susah nge-debugnya gitu.
46:14Karena secara data flow sebenarnya bisa aja lempar aja callback ke belakang
46:19atau pake event bus atau listener gitu ya.
46:22Biar ini jangan langsung diubah, di-assign gitu loh maksudnya.
46:27- Nah cuman kalau kayak gitu di kerja satu team,
46:31terus tiba-tiba random suka-suka masing-masing nggak.
46:34Maksudnya nggak satu sisi kita, cara kerjanya gimana mah.
46:38Bukan karena react-nya atau swell-nya, tapi kalau misalnya...
46:45- Kesepakatan bersama.
46:47- Akal-akalan sendiri tanpa kesepakatan style-nya atau kayak filosofinya,
46:54ya itulah pokoknya passing data-nya gimana, ngeubah state dimana,
46:58itu mah ke depannya tetap bakal repot.
47:01- Diriku siakin begitu-begitu itu fitur ya, soalnya jalan gitu.
47:05- Fitur, fitur.
47:07- Developer-nya ini developer-react semua ya.
47:10Jadi cara, approach-nya masih approach-react, jadi kebingungan.
47:15Nah, terus selain profesional ketemu di Tokopedia dan Cyrebox,
47:20diriku sempat bantuin PHP ID, bikin beberapa project kecil-kecilan,
47:25itu sengaja pakai, dulu awal-awal tak bikin itu pakai Cyper.
47:29Terus muncul Svelkit, satu project tak migrate itu.
47:33Jadi diriku ngerasain migrasi dari Cyper ke Svelkit-nya.
47:38Nah, di situ kayaknya nemu ininya loh, nemu kliknya gitu sama si Svelkit.
47:43Ah, enak banget nih ngoding di lokalnya, kenceng banget.
47:46Refresya kenceng.
47:48Jadi begitu kemarin dapet kesusahan migrate dari Nox 2 ke Nox 3,
47:55yang kepikiran pertama tuh Svelkit.
47:57- Svelkit.
47:58- Kok dibanding Next.CS gitu.
48:00- Kesempatan real-real.
48:02Pas itu Next.CS lagi ini juga, lagi heboh-hebohnya itu naik ke yang 13 itu.
48:08Eh, orang maju-mundur-maju-mundur gitu kan.
48:10Ini app router apa patch router?
48:13Daripada itu pake yang geletek aja Svelkit.
48:16Jadi gue nggak ikut kebingungan mikirin patch router atau app router,
48:23tapi tetap ngerasain hal yang baru gitu.
48:26Jadi itu pilihan mudah yang terambil.
48:32Nah, kita pengen tahu nih, kan dengar-dengar kabar katanya,
48:36karena berhubung kita bertiga ini belum pernah ada yang nyobain Nox.
48:40Kalau kata Damar nih, auto importnya itu keren.
48:44Tapi kalau buat orang di luar Nox, bisa jadi, ini dari mana ya gitu kan.
48:50Karena udah biasa pake import kan.
48:53Jadi kalau itu memudahkan buat orang yang sudah terbiasa.
48:57Jadi si Nox.CS ini katanya developer experience-nya keren banget gitu.
49:01Apakah benar demikian dari pengalaman Mas Irvan yang mencoba Nox.CS versi sebelumnya ya?
49:10Bukan versi yang terbaru ya.
49:12Compare dengan katakan Svelkit atau Nox gitu.
49:15Bahkan dulu ketika diriku pake Nox.CS versi 2 ya, itu sebenarnya cukup convenient kok.
49:21Tapi ya problemnya kita mesti di situ gitu.
49:24Mesti stay di situ, karena magic-nya itu totalnya magic yang cuma bekerja di Nox.
49:30Itu bukan hal yang bisa diimplementasi di tempat lain gitu.
49:36Jadi memang itu ketika kita kerja pake Nox.CS, kalau mau produktif emang harus nyikuti...
49:44- Stay di satu framework itu ya?
49:46- Opininya si Nox.CS, termasuk teknik-teknik magic-magicnya itu.
49:51Somehow kalau kalian adopsi Nox.CS dan fokus di situ menurutku sih akan sama produktifnya lah.
50:00Sama framework-framework lain gitu.
50:02Terus di belakang layar kan dia mulai ini juga ya, mulai pakai fit juga ya.
50:06- Iya belakangnya fit.
50:08- Menyenangkan.
50:10- Sama aja dengan mengatakan pakai angular, ya udah stay aja di angular pasti produktif juga ya kan?
50:15- Iya.
50:16- Tapi learning curve-nya agak lebih tinggi ya kali ya?
50:19- Coba bentar, angular sama Nox nggak tahu ini subjektif ya?
50:24Jadi aku sebenarnya nggak terlalu bisa ngerti dikit,
50:29cuma bukan power user, pernah megang codebase Nox sekitar satu minggu.
50:36Kuat satu minggu doang.
50:38Jadi kasusnya di tempat kerja dapet legacy code ditulis oleh pihak lain,
50:44maksudnya di luar kita, dan kita nggak punya akses.
50:46Iya punya tiba-tiba dapet code aja,
50:49terus sebagian harus diintegrate ke produk lain yang produk di tempat kerjaku.
50:56Cuma satu timnya kecil, developernya cuma tiga soalnya, kita bertiga nggak ada yang ngerti view.
51:03Cuma kan sebenarnya biasanya bisa dikira-kira ya dari ngebaca, ngejalanin.
51:08Ini susah banget.
51:10Terus akhirnya yang front-end satu doang kebetulan sendirian,
51:13yang lain aja cuma support moral doang,
51:16karena bisa react, maksudnya kalau JavaScript ngerti,
51:21cuma kalau nggak menguasaiin kalau buat bikin UI.
51:24Kebetulan UI-nya harus dibuat baru juga, jadi cuma pakai service-nya.
51:31Apalagi intinya terakhirnya, akhirnya nggak pakai karena itu alesan specific project itu.
51:39Banyak yang harus di-rewrite, akhirnya dapet buy-in view dengan alasan
51:43ini kita semua nggak ada yang bisa, nggak ada yang ngerti, sulit banget dijalanin.
51:47Bakal lebih cepat kalau bikin baru dengan stack lainnya.
51:53Cuma ya dari pengalaman ngeliat codebase nax sekitar seminggu gitu,
51:58kayaknya sama angular mirip-mirip deh.
52:02Soal kemudahan dipelajarin kalau kita dadakan harus mempelajari
52:07existing codebase yang bukan ditulis oleh kita sendiri atau tim kita.
52:11Yang lain teman-teman setuju atau nggak, silahkan coba yang dicat.
52:17Jadi mau compare sama, mana tadi, filekit ya?
52:20Enggak, compare-nya sama angular lah. Yang dianggap sulit juga.
52:25Angular kan emang roommate, cuma mvc, yang penting kita pelajarin mvc-nya,
52:32terus pelajari, ya kan dokumentasinya juga sebenarnya cukup bagus juga,
52:37ya maksudnya tetap take time, cuma cukup jelas juga.
52:42Jadi kelihatannya comparable deh tingkat kerepotan mempelajari codebase angular dan nax 2 sih.
52:50- Sama-sama susah. - Sama-sama susah.
52:53Tapi ketika sudah dikuasai, susah keluarnya.
52:57Jadi kayak di makan masuknya susah, begitu sudah di dalam itu susah keluarnya.
53:03Mau belajar framework lain itu pasti susah tuh, karena semuanya sudah disediakan,
53:07semuanya sudah magic, gitu kan.
53:09- Nah sama itu sih. - Boleh, boleh, boleh.
53:15- Tapi di luar dari framework-nya sendiri ya, di luar dari banyak aturan di framework-nya sendiri
53:21yang menjadikan seseorang podsider kayak kita, itu harus belajar dengan, apa istilahnya,
53:29dengan sungguh-sungguh untuk bisa mengerti framework tersebut.
53:33Di luar hal itu, itu sebenarnya kita mesti maklum juga bahwa bahkan mereka-mereka yang pakai metaframewalk,
53:42yang sudah punya convention yang cukup banyak gitu, jadi berbagai hal,
53:49itu mudah untuk menjadi kacau, sehingga orang-orang yang bahkan mengerti framework itu
53:59bisa kesusahan untuk memahami codebase tersebut.
54:02Itu kita mesti maklum hal itu, bahwa itu bisa terjadi di perusahaan apapun,
54:06di projek apapun, oleh siapapun, gitu.
54:09Diriku sudah ngoding Rack.js sejak di Tokopedia.
54:14Tapi ketika pindah ke cyborg, itu banyak hal yang mesti dipelajari lagi.
54:19Karena ternyata cara render-nya berbeda, banyak hal yang berbeda.
54:23Ketika pindah ke GovTech, sama juga.
54:26Padahal pakai Next.js kan yang sudah metaframewalk.
54:29Padahal ada banyak hal yang mesti dipelajari.
54:32Jadi maksudku bahkan pakai metaframewalk pun, biasanya tiap-tiap company atau tiap-tiap orang
54:38punya opini-nya terhadap patuhya yang bikin outsider itu
54:44mesti memahami konvensi atau opini-opini tersebut,
54:47biar bisa seproduktif kayak kita megang framework yang biasa kita pegang sehari-hari.
54:53Jadi memang mesti dipahami bahwa ketika kita pegang framework orang, bahkan yang samapun,
54:59itu produktivitas kita akan drop.
55:01Menurun dulu, ya. Menurun dulu.
55:03Sampai kita bisa catch up dengan bagaimana mereka bekerja.
55:08Jadi kalau melihat use case-nya yang cuma misalnya 2 minggu pegang project tersebut,
55:15jadi mungkin itu adalah masa-masa untuk memahami konvensi dan opini-opini yang terjadi di bahkan metaframewalk tersebut.
55:23Tapi kalau AI coding chatbot, LLM, dan lain-lain tambah canggih,
55:30mungkin ini kedepannya bisa membantu. Sekarang udah kayak co-pilot atau code dan lain-lain,
55:38kan udah ada feature explain this code.
55:40Asal coding-nya nggak, maksudnya work around-nya dengan aneh-aneh amat.
55:45Justu jadi kacau ya nanti ya.
55:48Banyak tangan yang pegang, bayangin satu codebase, banyak tangan yang pegang,
55:56dan taksain akal-akalan mounted dimana-mana.
56:00Monkey patching.
56:02Ya chatbot-nya suruh explain, coba ini pelajarin seluruh codebase, coba jelasin ke saya ini maksudnya mau ngapain.
56:11Itu yang bikin bot itu susah replace programmer, karena programmernya bikin work around di mana-mana.
56:23Ini nggak ada di dokumentasinya, atau cara satu orang dengan orang lain dalam satu team beda-beda ternyata.
56:28Chatbot-nya bingung, ini pattern-nya kayak apa.
56:32Sama-sama pake redact aja beda, bisa beda ya gitu.
56:36Diasain ke bebe, diasain ke cewek, terus ada warning-nya jangan diilangin yang di tengah-tengah.
56:42Jangan langsung, nanti nggak jalan.
56:45Contohnya, satu codebase state management-nya ada dua, coba gimana sih.
56:52Sainnya tuh, satu dipaksain, bikin satu middle layer state management.
56:57Tapi diriku pernah ngerasain gitu Mas Ivan, itu biasanya kalau kita in the middle of migration.
57:04Dan projeknya gede misalnya, terus kita mau migration, hal-hal lainnya misalnya redact itu.
57:12Kita nggak bisa serta-merta membuang karena kita bahkan belum tahu konteksnya misalnya redact ini, state management kan kadang liar ya.
57:20Bisa di dispatch dari mana aja bentuk string misalnya, susah-susah di-tag-nya gitu.
57:25Nah, caranya adalah yaudah kita install library lain dulu, pelan-pelan kita migrate satu-satu.
57:31Bikin middle layer-nya, terus satu-satu.
57:34Tapi kan itu tujuan akhirnya yang lama bakal diilangin.
57:38Nah, terus yang terjadi Mas Ivan pindah ke tempat lain, projek Mas Ivan.
57:46Yang ngelanjutin bikin state management itu ketiga, supaya kalian nggak tahu yang kedua dan satu itu ngapain.
57:52Bisa jadi, bisa jadi.
57:55Tapi kan itu senenya maintain legacy kan, dan nggak semua orang bisa melakukan hal itu Mas Ivan.
58:01Tidak semua orang punya kesabaran untuk melakukan itu.
58:07Saya rasa sih itu kenapa kita dibayar mahal ya.
58:13Kalau cuma nulis kode, sekarang AI bisa disunuh nulis kode.
58:20Tapi kalau mikirin beginian, cuma manusia ya yang bisa.
58:24Mungkin orang best practice sekarang nyuruh kita install 2 state management dalam satu codebase.
58:29Tapi untuk orang yang sudah punya pengalun bertahun-tahun, mereka tahu bahwa
58:33ini projek mesti tetap jalan di production dan kita harus mulai dengan sekecil apapun.
58:38Ya udah install 2 aja dulu gitu.
58:43- Oke, nah tadi kan dari Nux, terus Mas Irvan di professional kan Next.js, terus ke SpellKit.
58:52Kira-kira selain tadi cepat development build-nya, SpellKit kelebihan dan kekurangannya apa?
58:59Apakah tidak terganggu dengan +.paste.js?
59:04- Itu, itu, itu. Parah banget, parah. - Parah ya.
59:08- Parah itu kok. - Saya juga terganggu dengan hal itu sih.
59:13- Kenapa nggak ada +.paste aja gitu. - Iya.
59:18Parah sekali emang itu.
59:21Itu lagi-lagi adalah pilihan yang diambil tim SpellKit ya.
59:25Yang mana kalau kita mau nyamplung di situ, kita mesti mahmum dengan ini tersebut.
59:31- Ada bloknya ya, ada artikelnya ya. - Iya, buat orang-orang outsider kayak kita
59:35memang sepertinya harus melakukan hal-hal salah dulu gitu.
59:40Biar kita paham bahwa ini mesti diperhatikan gitu.
59:43Jadi kok begitu kayak nambahin sesuatu di + layout atau +.paste gitu lupa.
59:50Kok nggak berubah-berubah itu sampai seharian? Ternyata tanda + itu mempengaruhi.
59:56- Tanda + mempengaruhi. - Tak kira cuma.
1:00:01- Temen-temen XJS yang baru yang app router juga kayak gitu tuh kan ada,
1:00:04nah ini nggak pakai +, cuma kan ada konvensi yang reda ribet, layout.tfx,
1:00:10ada layout, ada template, ada page.
1:00:14Nah itu kalau, jadi ya kan ada hirarkinya tuh.
1:00:17Kalau misalnya urut salah hirarki, ya maksudnya nggak jalan sesuai kemauan kita.
1:00:25- Terin baru ini ya, annoying.
1:00:27- Fun fact diriku tau ini justru di filekit dulu dibanding Next 3 Glass.
1:00:32Jadi diriku sebenarnya sebelumnya ngerjain yang migration dari Ceper ke filekit,
1:00:38terus sudah ketemu tuh yang kenapa dia harus ada layout, ada page gitu-gitu.
1:00:42Kan itu hal baru ya, terus perasaan kok rumit banget ya,
1:00:46satu direktori harus ada beberapa file gitu.
1:00:49Diriku komplain tuh di Twitter soal hal itu kenapa harus begini ya.
1:00:53Ternyata ada yang nyautin, "Mas itu bisa jadi company direction tuh."
1:00:58Karena si Next app router ternyata ada opsi konvensinya sama.
1:01:05Masa lihat, "Ini mirip banget sama filekit."
1:01:08Jadi kayaknya emang direction dari company-nya, dari versalnya biar orang makin familiar dengan router-nya Next CS.
1:01:16Jadi cara ngatur director ini tuh mirip banget sama filekit itu.
1:01:20- Spellkit kan diakuisisi sama Versal kan, jadi ketawa sih.
1:01:26- Iya, tapi kan maksudnya karena kita... - Riserisnya yang di-hire.
1:01:29- Iya, kita lihat kan itu hal yang berbohong. - Oh iya, riserisnya, sorry.
1:01:31Bukan, bukan, iya. Bukan, sorry, salah, salah, salah.
1:01:35Bukan spellkitnya yang diakuisisi tapi riserisnya yang di-hire.
1:01:39- Riserisnya. - Riserisnya.
1:01:40- Riserisnya. - Iya.
1:01:41- Riserisnya. - Iya.
1:01:42- Riserisnya. - Iya.
1:01:43- Riserisnya halus lah. - Berarti...
1:01:44- Riserisnya halus. - Iya.
1:01:46- Iya, berarti timnya Next CS, timnya Versal banyak belajar dari Riseris.
1:01:51Jadi influence-nya kalah. Lebih menang Riseris sekali. Jadi ngikut.
1:01:56- Itu bikin diriku sadar. Jadi mungkin kadang-kadang kita nggak cukup belajar framework-nya doang gitu.
1:02:03Kita mesti dengerin beritanya gitu.
1:02:05- Cuma ini kan... - Itu jadi mesin sekarang.
1:02:08Kalau kita baca isu-nya, itu kan juga sebetulnya C-next up-router itu kan beta udah lumayan lama ya.
1:02:16Dan apa, di GitHub, ya keuntungannya ngikutin apa, project open source, ya kita bisa liat semua diskusinya
1:02:23walaupun panjang banget, ya itu back and forth-nya kayak apa, argumen-argumennya juga.
1:02:29Maksudnya, pas kita udah baca itu semua, pertama pasti capek karena baca panjang banget.
1:02:35Cuma abis itu kita jadi oh ya oke, yang tadinya pas pertama kita mesti ngerjain,
1:02:40kan refleksinya complain ya, "Abang, ribet banget sih kayak gini, nambah-nambahin hal yang harus diafal,
1:02:46dan ini tuh belum tentu bisa di-carry, belum tentu bisa dibawa di teknologi lain."
1:02:52Tapi setelah kita tahu why-nya, kita jadi punya insight kenapa pakai solusi ini
1:03:00buat mecahkan masalah ini, ini, ini, jadi ya menarik juga sih.
1:03:05- Itu reflek pertama aku complain memang, karena diriku kayaknya ketika ketemu itu nggak keingat gitu,
1:03:11kalau spellkit dengan C-next itu payungnya sama sekarang.
1:03:16Tapi ketika ada yang ngikutin itu jadi oh, jadi make sense ya, jadi ketika diriku moding spellkit,
1:03:21diriku tetap bisa bawa nih knowledge yang ada di up-router-nya atau kebalik.
1:03:25Misalnya diriku ternyata lebih duluan moding spellkit, ternyata pas mau catch up di next,
1:03:31yang versi 13-nya, sudah punya pengalaman dengan spellkit-nya.
1:03:35Pada akhirnya kan familiaritinya ya, jadi lebih mudah ininya, belajarnya gitu.
1:03:42Itu kayaknya nggak didapatkan dari dokumentasi, harus ngikutin beritanya.
1:03:49- Harus pengalaman ya, harus pengalaman.
1:03:52- Nah, berhubung kita bicara soal spellkit dan spell juga,
1:03:57Liz Harris juga lagi pindah dari TypeScript ke Vanilla JS.
1:04:06- Ini udah lama sih. - Dan JS Doc.
1:04:09- Udah lama, udah tau. - Udah lama ini.
1:04:11- Udah tau dia. - Iya, tapi panasnya baru kemarin-kemarin
1:04:14gara-gara digosok sama DHH dan teman-teman.
1:04:19- Digosok ngomongin TypeScript dan JS Doc.
1:04:24- Nah, ini apa teman-teman, pada migrasi lagi nggak ini TypeScript ke JS biasa?
1:04:32- Pengalaman dari JavaScript ke TypeScript? Atau sebaiknya?
1:04:37- Atau TypeScript ke JavaScript? - Atau secara arsitektur ya.
1:04:41Jadi, masalahnya TypeScript adalah karena butuh transpilasi, ada proses untuk dibuat
1:04:50dari TypeScript ke JavaScript.
1:04:53Masalahnya adalah, leceh, diriku kasih kasusnya apa ya di Tokopedia ya?
1:04:58Tokopedia itu mono repo, terus consists of tens of services and tens of libraries.
1:05:06Jadi, ketika kita build satu services, kita akan detect depedensi-depedensis,
1:05:13termasuk internal depedensis ya, berarti adalah libraries yang ada di mono repo tersebut.
1:05:18Kenapa? Karena kalau dia depedensis, berarti dia harus dibuild sebelum service tersebut dibuild kan?
1:05:24Karena dia dibutuhkan sama service yang dipakai.
1:05:27Ya, masalahnya adalah kalau librariesnya ditulis pakai TypeScript, itu hal itu dilakukan terus-terusan.
1:05:36Jadi, tiap kali kita build satu services, jadi kita harus transpilasi libraries-librariesnya.
1:05:43Itu mungkin bisa disolok kalau punya kasing strategi yang bagus gitu.
1:05:49Dan most of the cases kadang kasing DCI suka benar-benar salah lah.
1:05:57Dan kalau kita punya hundreds of developer yang coding di satu repo seharian,
1:06:03itu frekuensinya tinggi banget untuk case-nya nggak valid.
1:06:09Jadi, kerjaan untuk nge-transpile TypeScript itu terus-terusan terjadi.
1:06:16Dan saya rasa itu kasus yang mungkin ditemui sama kecerdasan itu.
1:06:22Karena librariesnya mungkin ketika mereka development internal itu kayaknya nggak perlu banget di transpile.
1:06:28Kalau di Tokopedia sih kita kasusnya di offload.
1:06:32Kayak yang tadinya kita mono repo, jadi mono repo kan nggak kenal versi.
1:06:36Dia link ke atas saja, kalau dia belum di transpile ya transpile.
1:06:41Akhirnya ya udah kita publish aja ke library, bentuknya udah transpile kan, udah JavaScript.
1:06:47Tinggal download dari registry aja.
1:06:50Cuma itu kan jadi kayak kita offload tugasnya ke luar gitu ya.
1:06:55Tapi pada akhirnya sebenarnya library-nya akan nge-transpile juga.
1:06:58Cuma nggak dilakukan on the fly yang ketika kita mau nge-build si service-nya.
1:07:04Karena itu nggak make sense gitu, kita mau nge-build service-nya, tapi library yang jarang berubah itu di transpile terus-terusan.
1:07:11Karena cache-nya nggak valid itu.
1:07:14Jadi kalau ngobroli kasusnya Rich Harris, make sense karena kasusnya library.
1:07:20Karena dipakai oleh, di-consume oleh sysvill codebase yang Tok akan di, itu juga kan.
1:07:26Di transpile juga, bakal di-transpile juga.
1:07:29Jadi kayak buat apa gitu. Mungkin ya, mungkin ya.
1:07:35Tapi kalau sebagai developer, apakah perlu pake TypeScript?
1:07:41Atau pake JS Docs aja cukup?
1:07:43Karena diriku banyak modingnya application gitu ya, yang full gitu ya.
1:07:49Client gitu ya, untuk client.
1:07:51Jadi aku masih mikir itu perlu ya, karena banyak intensif mainan data gitu ya.
1:07:56Terus culture team-nya juga biasanya diriku kerja dengan team yang banyak.
1:08:02- Udah terbiasa TypeScript. - Terus yang modingnya.
1:08:05Maksudnya itu salah satu kontrak lah kalau buat gue ya.
1:08:09Kayak TypeScript itu kontrak untuk kita bisa tahu struktur data apa aja yang ada yang mengalir di halaman tersebut.
1:08:17Jadi kalau tanya penting atau nggak, buat gue mungkin masih penting ya.
1:08:21Tapi kalau apakah semua harus pake TypeScript mungkin nggak.
1:08:25Tergantung case by casenya.
1:08:28Jadi kalau hype-hype kayak gini tuh yang harus diperhatikan itu kesamaan-nya, polanya.
1:08:33Oh, spell kit itu library atau framework.
1:08:38Terus yang si David Hennemeyer Hansen itu nggak mau pake TypeScript juga, dia di library juga.
1:08:46Library-nya Ruby on Rails kan. Dua-duanya library gitu.
1:08:49Kalau kita yang pemakai library dan kita yang pakai untuk end-user, ya nggak hampir bisa dibilang tidak ada hubungannya.
1:08:57Jangan tiba-tiba begitu bilang, begitu ngeliat beritanya langsung, "Oh nggak usah pakai TypeScript, pakai JavaScript lagi."
1:09:02- Kadang mesti lihat kondisinya juga sih, kondisi kitanya maksudnya. - Kondisi, iya, iya.
1:09:09Soalnya nggak semua yang bahkan kasurnya cocok itu make sense di kondisi kita.
1:09:16Soalnya kondisinya adalah CI-nya bayarnya udah gila-gilaan, pengen reduce cost.
1:09:22Ya mungkin salah satunya ya reduce aja, compile time-nya itu.
1:09:25Jadi udah nggak usah nulis JavaScript, karena mungkin duitnya itu lebih mahal daripada maintenance costnya nggak bisa jadi gitu ya.
1:09:31Ya itu nggak bisa dibilang, cuma kalau ada kondisi begitu bisa jadi TypeScript jadi nggak make sense lagi.
1:09:37Atau misalnya timnya sendirian dan...
1:09:39Sama learning curve-nya kan tinggi ya, learning curve-nya tinggi, kalau timnya kecil ya buat apa?
1:09:45- Learning curve itu depend. - Nggak terlalu tinggi, nggak terlalu tinggi.
1:09:49- Ini bisa incremental juga. - Bisa incremental dan bisa any.
1:09:55Nah, kalau pakai any itu udah, waktu di Tokopedia kalau pakai any apakah itu udah dianggap sebagai TypeScript atau belum?
1:10:03Bisa, bisa, karena kan kita ngitungnya ininya, extension-nya.
1:10:07Extension ya, selama .ts udah gitu ya, padahal dalamnya JavaScript gitu ya.
1:10:12- Tess ignore, Tess ignore. - Itu proses ya.
1:10:16- Itu proses menurut Mas Rita. - Process ya?
1:10:19- Itu proses, karena yang ditakutkan adalah dengan adopsi TypeScript itu productivity... - Turun.
1:10:26- Turun jauh gitu, kalau turun doang, turun lantai gitu ya. - Aman lah ya, masih bisa.
1:10:32Tapi kalau tiba-tiba turun tinggi gitu, buat mikirin type-nya doang itu udah nggak make sense.
1:10:37Kalau dirimu kesusahan, ngetypingnya udah any aja dulu gitu.
1:10:41Padahal mungkin harganya nggak sebanding dengan waktu yang habiskan gitu.
1:10:45Pada akhirnya orang akan belajar kok dengan sendirinya gitu.
1:10:49Ingat ya, kalau para senior lihat juniornya any jangan dimarahin dulu.
1:10:55- Lihat situasi. - Iya, lihat situasi.
1:10:59Ganti aja tess config-nya, dibikin string.
1:11:03- Harus ada inilah, dibantu lah maksudnya. - Dibantu, dibantu.
1:11:07- Kulturnya tuh ini, collaboration, jangan blaming gitu. - Iya.
1:11:11Sulit loh, maksudnya kalau belajar TypeScript-nya itu mungkin oke lah.
1:11:17Belajar TypeScript terus dipakai di back-end di Node.js itu masih oke.
1:11:21- Ketemu reeks, tengah mati. - Pusing.
1:11:25- Pusing. - Bikin props ada children-nya ya, pusing.
1:11:28- Ini children gimana cara typingnya? - Tipenya, tipen HTML lah, apa?
1:11:33Pusing loh. Jadi semuanya, iya.
1:11:37Jadi ya harap dimaklumi aja. Harus banyak-banyak berempati ya.
1:11:41Di kolaborasi lah, intinya di bagian yang susah.
1:11:45Betul.
1:11:47Prop types aja dibikin objek semua?
1:11:51Objek dan nggak di depan kan intinya kan?
1:11:57Nggak di depan, objek aja udah gitu ya.
1:12:01- Itu kan alias dari any ya, objek. - Iya.
1:12:07Objek isinya apa, nggak tahu.
1:12:09Oke, kita kembali ke Next.js. Nah ini ada pertanyaan dari Damar.
1:12:13Next.js itu populer gara-gara apa ya awalnya?
1:12:15Dia adalah meta framework pertama awal-awal ya, kalau nggak salah ya?
1:12:19Meta framework, iya.
1:12:21Yang salah satu yang pertama dulu kan Next.js sama Gatsby itu yang...
1:12:25Betul. Oh iya, Gatsby, Next.js.
1:12:29Tapi bedanya Next.js ini dibundling sama Versel.
1:12:33Deploy-nya mudah, dipermudah.
1:12:35Dan dia bisa server-side rendering kan, sudah ada langsung SSG.
1:12:39Server-side rendering, iya.
1:12:41- Kalau Gatsby kan berangkat dari... - Static side generation.
1:12:45- Static side generator. - SSG.
1:12:47SSG, dia yang awal-awal.
1:12:49Kita harus percaya, Next.js itu di-boost banget sama Versel.
1:12:53Iyalah, jualannya dia itu.
1:12:55Engga, yang bikin kan emang, yang bikin Versel adalah yang bikin Next.js.
1:13:00Ini emang produknya dia.
1:13:02Kalau hal yang sama gitu ya, Next.js yang bukan Versel.
1:13:06Jadi aku nggak melihat kalau itu akan bisa segede sekarang gitu.
1:13:10Karena kayak semuanya udah di first-class-nya lah istilahnya, Next.js itu first-class-nya.
1:13:16Kita sebelum ada Versel gitu ya, front-end engineer, bagaimana cara dia deploy.
1:13:24Aplikasi yang server-side render dan bisa nge-serve API.
1:13:30Itu nggak kepikiran.
1:13:32Harus belajar server-side language juga kayak PHP.
1:13:37Deploy-nya juga harus deploy-an server-side.
1:13:40- Harus bisa nge-deploy server-side. - Iya.
1:13:43Berapa banyak orang-orang yang bisa nge-deploy ke server-side.
1:13:47Tapi apakah tidak menuju ke vendor login?
1:13:50Ya iyalah. Makanya kan yang pakai Next.js coba tanyain deploy-nya.
1:13:56Dikira muda deploy Next.js di cloud lain.
1:14:00Di kantor sekarang pakai Versel gitu?
1:14:02- Enggak, enggak. - Oh enggak kan?
1:14:04Pai GCP ya.
1:14:06Sebenarnya bisa node-node-f biasa kan, tapi ribet.
1:14:10- Yes. Tapi kan maksudnya... - Tidak optimal.
1:14:13Atau apa ya? Nggak sejati surga ketika kita pakai Excel gitu.
1:14:20- Sulit. - Versel tuh, apa?
1:14:22- Kalau... - Adhiktif karena konfiniens.
1:14:24Jadi kayak cuma dipush ke repo, udah diurus sendiri.
1:14:27Bahkan kayak hal-hal kayak environment config, udah dikasih UI-nya kan.
1:14:35Maksudnya kita kan nggak mungkin nge-push .env ke repo.
1:14:39Nah, terus gimana biar di server-side?
1:14:43Kan kalau misalnya kalau php-side ya kayak harus ngubah-ngubah engine-exe atau apa yang ribet kan.
1:14:50Nah, ini equivalent-nya si Versel udah ngasih UI buat masukin environment config value.
1:14:57Build command-nya apa.
1:14:59- Terus... - Sama kayak kita pakai Firebase deh.
1:15:03Sama kayak Firebase sudah pasti segak gitu.
1:15:06Dan sulit loh sebenarnya nge-deploy Node.js application itu loh.
1:15:11Karena pertama Node.js itu single-trading.
1:15:14Dan scaling-nya itu sulit loh.
1:15:18Saya pernah coba dari menyerah.
1:15:22- Iya. - Gak semudah.
1:15:25Gak semudah men-scale php web server.
1:15:28- Iya. - Makanya sekarang muncul kan?
1:15:31- Silahkan Mas. - Mereka muncul itu kan.
1:15:35Next.js yang bisa di-deploy ke tempat lain.
1:15:39- Oh, ada ya? - Ada, ada.
1:15:42- Ada, coba dicari. - Lucu ya.
1:15:44- Gimana Mas Irfan? Lanjut. - Lucu-lucu.
1:15:46Ya itu maksudnya banyak yang mengira tuh kayak ketika deploy Next.js
1:15:53ke selain Versel itu semudah kayak kita deploy ke Versel.
1:15:57- Jadi ada hal yang mesti di-deploy. - Tapi justru itu selling point-nya.
1:16:03Maksudnya codebase-nya sendiri, Next.js-nya sendiri kan open-source gratis.
1:16:08- Kita tinggal pake. - Betul, betul.
1:16:10Nah, terus yang dijual apa ya udah yang dijual kan layanannya.
1:16:13- Iya. - Hosting.
1:16:15Layanan, hosting, dan kemudian devops-nya kan selain hosting-nya,
1:16:22layanan devops dan infra-nya yang dijual kan sebetulnya.
1:16:26Iya, betul sekali.
1:16:29Ya, begitulah.
1:16:32Nah, ini ada pertanyaan menarik nih mengenai rewrite codebase yang sudah besar ke framework lain,
1:16:39tapi PM tetap butuh fitur baru di framework yang lama.
1:16:43Apakah fitur baru masih rewrite ke framework baru atau tetap ke yang lama?
1:16:48- Codebase baru, fitur baru di framework lama.
1:16:51Ya udah, terus yang baru aja semua.
1:16:54- Ini ilmu mahal ya. - Ilmu mahal.
1:16:59Tidak ada jawabannya, it depends, kan?
1:17:03Ini kalau ilmu mahal, jawabannya it depends.
1:17:06Tergantung, tergantung banyak hal, variable-nya banyak sekali.
1:17:11Udah konsultasi, udah.
1:17:13Tapi ini, ini, ini, kamang sih sebenarnya.
1:17:20Maksudku banyak developer yang kadang berpikirnya ketika rewrite itu harus selalu full rewrite gitu.
1:17:27Padahal kasus nyatanya itu hampir jarang banget kita bisa punya opsi untuk full rewrite satu application.
1:17:35Lagi kayak Tokopedia, maksudnya kita mau full rewrite dari halman homepage sampai checkout sampai order history.
1:17:40Siapa yang mau ngerjain, terus dikerjain berapa lama, nggak make sense gitu.
1:17:44Buat hampir kebanyakan company itu nggak make sense untuk full rewrite gitu.
1:17:49Jadi biasanya jadi muncul strategi rewrite tuh, macem-macem strateginya, bisa, let's say satu halman full.
1:17:58Atau bisa kontennya aja tengah.
1:18:01Bahkan diriku pernah ngeliat ada yang gitu ya.
1:18:05Kayak one on one mentoring gitu ya.
1:18:08Itu kaget sih lucu, lucu.
1:18:10Jadi ada yang pake Next.js gitu, terus mereka mau pindah ke Next.js.
1:18:16Dia benar-benar nunjukin hasilnya di produksinya gitu, Mas Rizal.
1:18:21Jadi nggak omong kosong lah ya.
1:18:24Oke, oke, oke.
1:18:25Benar-benar ada yang melakukan hal itu.
1:18:27Itu dia pake iframe, terus Next.js nya itu ditempel di iframe.
1:18:32Terus kayak header nya itu masih pake Nux.js gitu.
1:18:36Itu asli, diriku baru ngeliat.
1:18:38Absolute.
1:18:40Diriku baru ngeliat ada yang pake cara begitu.
1:18:43Dan itu berhasil di produksi gitu. Berarti kan bisa kepikiran gitu.
1:18:47Itu micro front-end itu.
1:18:49Micro front-end itu, beneran.
1:18:51Tapi diriku aja nggak kepikiran pake.
1:18:54Tapi itu berhasil kan.
1:18:57Dan itu bisa enabling cara dia incremental rewrite itu tadi.
1:19:04Ada cost nya pasti yang harus dibayar.
1:19:08Misalnya performa nya pasti turun tuh ketika proses migration itu.
1:19:12Karena dia jadi punya waktu untuk rewrite satu halaman demi halaman.
1:19:16Sampai pada akhirnya terselesaikan semua.
1:19:18Jadi macam-macam ada yang model seliar itu gitu.
1:19:22Kayak pasang iframe aja di tengahnya.
1:19:24Tempelin tuh aplikasi barunya.
1:19:26Bisa begitu gitu.
1:19:28Ada yang melakukan itu.
1:19:30Ada yang berani melakukan itu ya?
1:19:33Iya di produksi dan company yang menghasilkan duit gitu.
1:19:40Ini bukan mentertawakan ya.
1:19:42Bukan mentertawakan.
1:19:44Tapi itu inovasi kan.
1:19:46Begitu ya.
1:19:48Kepikiran gitu ya.
1:19:50Jadi kalau di satu halaman aja di rewrite.
1:19:54Terus di proxy aja.
1:19:56Kepikirannya gitu ya.
1:19:58Kalau duit di lapangan berarti.
1:20:00Kalo kita masih belajar nih di bootcamp.
1:20:04Atau belajar tutorial.
1:20:06Karena kan kita mikirnya yang jago coding adalah yang punya yang bisa ngebulak-bulikin ray lah.
1:20:12Yang lead code-nya jago.
1:20:14Atau dan lain-lain.
1:20:16Tapi praktiknya di lapangan itu kreativitas.
1:20:20Buat mecahkan masalah yang spesifik banget kan.
1:20:26Masalahnya spesifik, tujuannya spesifik.
1:20:28Ada konstrin waktu dan biaya.
1:20:30Nah ini kan berarti yang diuji adalah kreativitas di akal-akalan montir tadi.
1:20:35Berani ambil risiko aja.
1:20:40Tapi harusnya kan.
1:20:42Tapi kita mau mengacilkan itu ya kak.
1:20:45Gak mau mengacilkan kemampuan untuk lead code tadi.
1:20:48Karena di banyak kasus itu memang sangat-sangat dibutuhkan.
1:20:51Apalagi kalo udah ngobrolin performance tuning dan lain-lain.
1:20:54Jadi tanpa mengacilkan hal itu.
1:20:56Itu memang kadang-kadang di kasus nyata itu kadang kita suruh ngerjain hal-hal yang lucu.
1:21:01Mungkin bukan best practice yang dipahami orang-orang di luar sana.
1:21:06Kerjaan kita ada naikin works aja udah.
1:21:09Kita punya bisanya begini jalan.
1:21:12Ya udah kita kerjain pakai cara ini dulu aja.
1:21:14Nah itu kan bagian dari problem solving kan.
1:21:18Lead code dan lain-lain itu juga melatih kita problem solving.
1:21:21Walaupun dengan case dan cara tentu yang berbeda gitu.
1:21:25Kalo lead code kan lebih ke apa ya logic kan.
1:21:28Kalo ini kan lebih ke praktikalnya yang kayak gimana gitu.
1:21:30Tapi itu sama-sama problem solving gitu.
1:21:32Dan itu yang memang harus dilatih gitu.
1:21:36- Ya itu kalo nanya tadi ya soal rewrite tadi caranya bisa macem-macem.
1:21:41Tapi prinsipnya adalah jangan propose full rewrite in the first place ya.
1:21:49Karena cost-nya sangat gede waktu yang dibutuhkan gede bisa jadi itu gak bisa ditanggung 1 team.
1:21:55Atau bahkan projeknya kadang-kadang kalo full rewrite kan harus stop feature ya.
1:21:59Feature development ya harus ada freeze.
1:22:03- Ya karena resursi yang dipake buat semua.
1:22:06- Iya nah kalo bisa itu jangan diajukan di awal gitu.
1:22:09Jadi sepengalaman ku sih biasanya kalo bisa cari cara biar sebagian dulu.
1:22:16Atau sebagian bisa macem-macem ya entah sebagian komponen atau sebagian halaman.
1:22:21Atau sebagian apapun gitu.
1:22:23Maksudnya kalau bisa jangan ajukan full rewrite dari satu hal ke hal lain di saat pertama gitu.
1:22:32Ajukan dulu separoh rewrite atau satu halaman rewrite sampe dirimu bisa ngajuin full rewrite gitu.
1:22:39- Incrementer.
1:22:42- Ya itu common kok atau biasanya kadang ada yang nyebutnya ini juga ya.
1:22:47POC gitu loh biar battle tested dulu gitu di production.
1:22:51Kita rewrite satu halaman lempar ke production langsung test apple to apple.
1:22:57Kita liat misalnya sebulan apa-apa cukup stable atau engga.
1:23:02Kalo stable bisa ditambah lagi tuh.
1:23:05Itu umum jadi kalo di Tokopedia itu kadang kita pindah satu halaman ke halaman lain.
1:23:10Itu sebenernya ga router push gitu loh.
1:23:15- Ya link biasa.
1:23:18- Kala rev itu kenapa gitu? Karena service nya beda gitu.
1:23:22- Bisa jadi juga pake ini.
1:23:24Kalo saya pernah ada, mirip tetapi pakenya dari sisi load balancer.
1:23:33Jadi kalo request ke halaman X itu lempar ke sudah aplikasi yang baru.
1:23:42Nanti kalo udah jadi, nanti pelan-pelan halaman-halaman itu berubah di load balancer.
1:23:47Jadi dua aplikasi tetep jalan, tetapi ini syaratnya headless ya.
1:23:52Jadi datanya tetep sama, kukisnya sama-sama bisa dibaca.
1:23:58Intinya semua sama untuk sisi simpan-simpanan data dan persisten datanya tetep sama.
1:24:04Jadi cuma UI yang berubah.
1:24:06Saya pake load balancer satu-satu, jadi gantinya di load balancer.
1:24:11Jadi si user ga merasa.
1:24:14- Iya makin lama pindah tuh, pindah satu-satu.
1:24:17- Makin lama sampe habis proksinya.
1:24:19- Sampe habis.
1:24:21- Tapi itu kamen dong, maksudnya ga perlu merasa itu adalah cara curang gitu.
1:24:26Karena diriku pindah dari satu company ke company lain melakukan hal yang sama di beberapa company.
1:24:33Terima kasih taruh di infra di ininya.
1:24:38- Oke, semoga menjawab ya.
1:24:41- Nah ini pertanyaan dari Damar, kalau mau belajar spelt, pengetahuan JS nya apa ga jadi berantakan?
1:24:46Soalnya kan teknikal spelt itu script.
1:24:48Engga sih, justru malah melatih.
1:24:51- Terbasis javascript juga kok.
1:24:53- Cuma diri DSL nya.
1:24:57- Yang beda cuma di syntax markup nya, ya standard lah kayak misalnya.
1:25:03Apalah Laravel ada blade ya, atau ada mustache atau apa.
1:25:09Jadi kayak buat ngelup, ada syntax nya sendiri, age, buat kondisional, if.
1:25:16Cuma kalau, jadi spelt itu kan dibagi dua markup nya, markup kayak, ya kayak HTML.
1:25:21Sebenernya apa, syntax nya sekian persen hampir mirip banget sama HTML.
1:25:27Cuma ya itu ada khusus sampling language nya buat ngeprint value, buat ngelup, buat kondisional if, markup nya itu.
1:25:35Terus script nya, javascript atau typescript nya bisa sendiri di dalam text script.
1:25:40Kayak ada helper nya sih, ada helper yang reactive value nya itu dollar sign.
1:25:48Di luar itu 99 persen nulis javascript biasa sih.
1:25:53- Nulis javascript biasa.
1:25:55Apalagi library nya pun vanilla ya.
1:25:58- Kadang-kadang itu jadi ininya, sandungannya.
1:26:01- Itu yang, kalau bisa Rie, ya malah. Rie kan ngobrol apapun harus pake state ya.
1:26:08Nah ini gak ada malah.
1:26:10- Itu yang kadang diriku gak mau, ini ya, gak mau meremehkan gitu.
1:26:14Karena semuda apapun framework yang kata orang spelt itu muda, terus speltkit itu cukup muda.
1:26:20Pada akhirnya ketika dirimu belajar satu hal, tetep ada hal yang mesti dipelajari dengan caranya dia.
1:26:27Jadi bahkan orang Rie kalau masuk speltkit gak bisa ujuk-ujuk gitu.
1:26:35Tetep aja dirimu akan kebingungan gitu, misalnya looping gimana pun sebaliknya.
1:26:40Orang speltkit, misalnya orang speltit pindah ke Rie.
1:26:44Pasti ada hal-hal yang kita, oh kok begini ya di Rie, oh kok begini di speltit.
1:26:51Maksudku itu proses onboarding gitu loh. Pada akhirnya kayak let's say diriku ngerjain satu project ya.
1:26:59Mungkin satu, dua, tiga halaman diriku akan kesusahan gitu ya.
1:27:02Tapi empat, lima, enam halaman diriku mulai lancar tuh.
1:27:05Karena onboardingnya di halaman-halaman yang awal tadi gitu.
1:27:08Maksudnya apa ya, kayak perspektif sih, kayak apa ya, filosofinya ya. - Filosofinya dipelajari gimana?
1:27:21- Cara svelte mentret rendering UI, meng-update state, dll. Sama cara react rendering UI, update state dll.
1:27:29Itu kan lain. Nah cuma kalau kita masih bawa cara pikir framework A ke framework B,
1:27:35ya jelas pusing. Tapi kita belum punya cukup pengalaman kerja di framework B.
1:27:41Jadi mindset kita masih kosong, otomatis refleks mungkin kebawa pakai framework-framework lain.
1:27:47Nah mungkin tadi setelah beberapa halaman, nama-nama kepala kita, ya pikiran kita keisi sama mindset si framework baru itu kan.
1:27:56- Problemnya kadang kita gak punya waktu sih kak. Problemnya kadang kita gak punya waktu.
1:28:00Maksudnya, kayak biasanya kasusku ya, diriku mau rewrite.
1:28:05Gue gak merasa gue punya cukup waktu untuk baca dokumentasinya svelte di awal.
1:28:12Jadi yang kalau bukan ya udah, babat aja. Gue merem dulu, gue migrate dengan sebisa gue.
1:28:18Kalau gue kebingungan, ini kok kaya ternyata salah memahami reactivity-nya.
1:28:23Misalnya gitu. Jadi modelnya patching gitu loh. Tempat mana yang kita kebingungan baru kita baca.
1:28:29Jadi cara belajarnya mundur memang. Kita kayak dengan pemahaman kita dulu, kalau kita kebingungan, baca.
1:28:36Misalnya diriku kebingungan gimana untuk passing props ke dalam children, terus gimana cara nangkep di children-nya.
1:28:43Kalau biasanya kan jelas-jelas di function ya, ada argumennya.
1:28:46Kalau di react cukup clear lah, argumennya jelas-jelas aja di functionnya.
1:28:51Kalau svelte ternyata ditambahin export doang, jadi props.
1:28:55Itu kan hal yang gue nggak bisa catch up di awal gitu.
1:28:59Yang gue lakukan ya, gue saat kebingungan akan baca.
1:29:03Tapi gue nggak punya waktu untuk baca itu di depan.
1:29:05Jadi kalau gue kadang memang rada barbar ya.
1:29:08Udah nyemblung aja dulu, kalau kebingungan, mundur.
1:29:11Kalau gue kebingungan, kalau pake react, bingung sudah sampai tingkat tinggi,
1:29:19udahlah dangerous, set it at emel dulu, trus ubahnya pake jQuery.
1:29:25Itu legendaris, itu legendaris.
1:29:29Itu kan jenis jQuery.
1:29:32Itu jalan kan.
1:29:34Sama sih, kayak jQuery.
1:29:37Apa pun saksah aja kan.
1:29:40Kita boleh kasih trophy nggak, masa susah?
1:29:43Boleh, gue kasi trophy.
1:29:46- Kasi trophy buat Mas Rizab. - Oh, kasih trophy.
1:29:49- Bila seberung, kalau benar sambilnya. - Siap, siap.
1:29:54- Ini ada pertanyaan lagi nih. - Bukan kepikiran ya.
1:29:58Di 2023 masih perlu belajar react atau turunan frameworknya saja?
1:30:03Belajar react dulu, jangan belajar langsung komita frameworknya ya.
1:30:06Bahaya.
1:30:07- Kalau yang benar. - Belajar JavaScript dulu.
1:30:10- Belajar HTML dulu. - Kali menit.
1:30:13Gini sih, Mas Rizab.
1:30:16Ini yang selalu omongin ke hampir semua yang one-on-one denganku.
1:30:20Ya.
1:30:22Cara-cara belajar begitu biasanya kalau kita punya orang yang bisa ngasih unjuk.
1:30:26Atau bisa ngasih unjuk gininya, Mas Rizab.
1:30:29- Kurikulum atau kayak... - Roadmap-nya.
1:30:32Masa ada banyak orang-orang kayak gue gitu, nggak.
1:30:37Nggak punya waktu untuk memperhatikan semua hal.
1:30:41Jadi kalau melarang orang-orang belajar Next.js sebelum belajar react.js,
1:30:46itu menurutku jadi kayak gatekeeping gitu loh.
1:30:49Karena bisa jadi cara tercepat untuk belajar react saat ini, hari ini.
1:30:53Mungkin lewat Next.js gitu.
1:30:55- Karena itu langsung bisa deploy. - Langsung bisa deploy.
1:30:59- Bisa deploy dan everything kayaknya... - Di dokumentasi juga diarahkan ke Next kan sekarang.
1:31:05Nah iya, makanya kalau orang tanya harus belajar react.js dulu atau Next.js dulu,
1:31:11gue sih ambil cara yang convenient aja sih.
1:31:13Yang nggak boleh lupa adalah jangan takut mundur gitu kalau maksudnya kesusahan di pengajalan.
1:31:19Karena bisa jadi yang dirimu temui itu bisa jadi bukan masalahnya Next.js tapi masalahnya react.js.
1:31:24Kenapa itu bisa dirimu temui? Karena dirimu lonsap belajannya.
1:31:29- Nggak belajar react.js. - Dan bahkan mungkin bukan masalah react.js tapi masalah JS.
1:31:34- That's it. Sama kayak dispel. - Masalah browser.
1:31:37Bisa jadi, tapi kan maksudnya mental model bahwa kita nggak malu untuk drop.
1:31:43- Mundur gitu, belajarnya mundur gitu ya. - Belajar underlying technology.
1:31:47Jadi mungkin bukan perkara mana duluan yang dipelajarin tapi kita harus paham layer-layernya.
1:31:54Maksudnya itu pas kita ngerjain Next.js nih sebetulnya under the hood dibawahnya tuh ada react.
1:32:01Pas kita nulis react, component react misalnya TSX itu dibawahnya under the hood.
1:32:06Itu kan TSX atau JSX-nya bakal di compile, bakal di transpile jadi JavaScript.
1:32:13Berarti kita harus tahu JavaScript. JavaScript dijalani oleh JS engine di browser atau di environment lain.
1:32:21Berarti kita harus tahu tentang itu. Berarti kesadaran bahwa ada banyak lapisan hal yang dipelajarin kali ya.
1:32:28Itu lebih penting dibanding mana duluan.
1:32:31- Di Riku dulu, di react ya belajar ya karena dari view gitu ke react. - Dari view.
1:32:36Jadi ku berasumsi kalau loopingnya react yang pakai .map itu, itu react.
1:32:41- Jadi di Riku selalu nyari gimana cara loopingnya react. - Bukan JavaScript gitu ya.
1:32:44Padahal kita capa script kan. Jadi sebenarnya kayak kita bisa pakai filter atau apapun gitu ya.
1:32:49Yang looping pokoknya bisa pakai for, bisa pakai apapun yang ketuknya looping.
1:32:53- For each juga bisa gitu kan bebasin. - Iya maksudnya ketika kita...
1:32:58- Ketika ada returnnya gitu kan. - Iya. Kita jadi make sense gitu.
1:33:02- Bukan murni JavaScript, itu prototype. - Iya, iya.
1:33:06- Iya kan? Map for each itu prototype semua. - Yes.
1:33:11- Yang diadopsi. Jadi core.
1:33:15- Berarti lebih ke apa ya, kita sadar bahwa kita belum belajar fundamentalnya.
1:33:23Sehingga kalau ada kesulitan, kita harus berkuat fundamentalnya.
1:33:26Jangan hanya merasa "Wah belajar next.js", "Gak mau ah belajar react", "Gak mau ah belajar HTML" gitu ya.
1:33:32- Tapi nyuruh orang belajar fundamental di awal, itu bisa jadi gak... - Gak efektif buat mereka ya.
1:33:38Kecuali kuliah atau apa ya, kalau kuliah kan ada semester satu ya kita kan harus ikut matanya.
1:33:47Itu kan sudah ada kurikulum.
1:33:49- Sudah ada kurikulum, kalau sudah kurikulum mungkin step by step. - Untuk belajar sendiri, di jemput malas sih pasti.
1:33:53Apa ya, karena mungkin gak konkret ya, kalau kita baru banget belajar, belum kebayang dan gak jadi apa-apa.
1:33:59Maksudnya beca teori, hasilnya kayak gak jelas, hello world doang, malas kan pasti.
1:34:06- Iya bukan pasti sih, kemungkinan. - Belajar untuk ngajarin orang.
1:34:09Itu juga biasanya dirimu harus belajar dengan comprehensive itu.
1:34:13- Jadi jangan yang skip modelnya. - Oh iya kan.
1:34:15- Oh iya benar, itu justru juga belajar. - Sepertinya kayak Mas Trinta nih.
1:34:19Dia belajarnya untuk ngajarin orang kan, itu gak boleh model yang kayak diriku belajar lupain semua.
1:34:26Udah nyemplung dulu, nanti orang yang mau diajarin kebimbungan juga.
1:34:31- Yah itu bahaya sih. - Jadi kayaknya disesuaikan aja sih sama kebutuhannya, kondisinya,
1:34:37atau dengan kontennya si orang yang ingin belajar.
1:34:41Oke, oke, mantap. Ini ada satu lagi nih.
1:34:45View 3 menurut temen-temen gimana? Mas Irvan, ada opini tentang view 3 dibandingkan view 2?
1:34:50- Gak, oh gak ngikutin ya view 3? - Iya pakai.
1:34:54- Katanya orang sih lebih dekat ya, lebih dekat ke rakyat. - Lebih dekat ke rakyat.
1:34:59Tapi karena diriku gak in touch langsung, jadi gak bisa banyak komentar lah.
1:35:07- Tapi fitnya luar biasa, luar biasa. - Fitnya luar biasa, dipakai di mana-mana sekarang.
1:35:12- Langsung wuss wuss wuss. Redwood aja sekarang katanya. - Tidak menyakitkan secara ekosistem sih sebenarnya.
1:35:17Tidak tahu pakai fit, kan tadi pakai webpack, akhirnya release selanjutnya pakai fit kalorimix, gak tahu ya pakai apa kalorimix.
1:35:29- Belum liat sih. - Kalo Next.js itu masih pakai webpack ya.
1:35:33- Gabung sama, campur sama SWC itu ya. - Mereka bakal pakai turbo pack nanti, turbo pack.
1:35:38- Mereka kan bikin sendiri ya. - Oh iya, cuma sekarang masih eksperimental.
1:35:42- Sama juga yang bikin. - Oh iya, si Marcel tuh gila ya.
1:35:47- Yang ngambil orang webpack. - Tapi ngobrolin soal fit ya.
1:35:54Sebenarnya revolutionera yang fit itu karena secara ekosistem gitu.
1:35:59- Karena bowser juga udah support es modul. - Maksudku sebelum ada yang fit itu yang dibikin si Evan,
1:36:07itu kayak kita hampir gak pernah berpikir untuk menggantikan webpack, karena yang susah dari webpack itu secara ekosistem.
1:36:15Kayak besar banget gitu, kayak hampir semua plugin ada disitu, orang banyak contribute disitu, bisa melakukan macem-macem.
1:36:24Hal itu kan yang bikin orang maju-mundur ya untuk replace webpack terhadap sesuatu yang lain.
1:36:30Makanya kan sebenarnya roll up nya udah dari dulu ya, tapi tetep gak bisa ngelewatin bagaimana webpack diadopsi gitu.
1:36:41Nah, liat hari ini diadopsi oleh banyak framework secara ofisial gitu, itu gak menyangka sih.
1:36:49Maksudnya secara ekosistem kok bisa sebesar itu ya, jadi pinternya itu bisa pintar ngebangun ekosistemnya gitu.
1:36:56Secara teknologi jago lah ya, udah terbukti lah. Tapi maksudnya secara ekosistem kok bisa jadi?
1:37:03- Kan ada banyak... - Dan bisa menembus batas ya?
1:37:05Iya, ada banyak teknologi yang...
1:37:07Gitu gak sih? Sekali meluncur, kan tadinya berat di dorong biar diadopsi project-project besar.
1:37:16Sekali satu-dua, satu-dua project besar adopsi, yaudah seling, abis itu blending aja.
1:37:22Ya, diriku bilang maksudnya ada banyak teknologi yang dibikin orang pinter dan secara teknik bagus itu ya.
1:37:29Tapi ngebangun ekosistemnya susah, gak semua orang bisa gitu.
1:37:33Nah, Evan kayak bisa kombinasi itu, makanya kayaknya fit bisa jadi lebih revolusi dari dunia itu sendiri.
1:37:51Oh, udah sambil lah.
1:37:53Iya, luar biasa ya.
1:37:57Ada pertanyaan lagi, belum terjawab? Oh, banyak.
1:38:01Sebagai pengguna framework yang unopinionate kayaknya.
1:38:06Karena kan teman-teman pakai kode convention prinsip seperti clean code, arsitektur misalkan.
1:38:12Banyak ya, banyak. Tergantung perusahaan juga ya. Tergantung kesepakatan ya.
1:38:16Clean code ini yang dimasuk, clean code-nya ini kan ya?
1:38:19Arsitektur?
1:38:21Iya gak sih maksudnya?
1:38:26Mungkin, mungkin. Coba, Farizal coba.
1:38:30Maksudnya clean code itu apa? Soalnya ada beberapa ini ya.
1:38:34Ada bukunya, ada arsitekturnya.
1:38:42Ini emang ini ya, maksudnya Mas Riza, jadi clean code ini banyak diadopsi sama backend sebenarnya.
1:38:52Nah, satu pengunggulannya adalah adopsinya bisa beda-beda tuh rada beda antara satu dengan lain-lain.
1:39:00Tapi mereka punya benang merah yang membuat ketika kita pindah dari satu project ke project lain kayak kita punya satu benang merah yang sama.
1:39:09Nah, problem different, emang kadang opini-nya terlalu tinggi yang bikin kadang benang merahnya hilang gitu loh.
1:39:17Jadi ketika kita pindah dari satu project ke project lain, itu kayak it's totally different climate gitu ya.
1:39:26Semacam style guide mungkin, bukan style guide ya, bukan style guide UI, cuma maksudnya coding style guide kali ya.
1:39:36Tapi diriku cukup pragmatis kalau di hari-hari gitu ya, di kerjaan cari hari.
1:39:45Jadi diriku merasa daripada kita capek-capek, ini opini ya, jadi jangan dianggap ini adalah hal yang benar gitu.
1:39:54Diriku merasa daripada kita capek-capek mencoba adopsi clean arsitektur seperti yang sudah dijelaskan sama Pak Robert Martin bertahun-tahun yang lalu gitu ya.
1:40:05Jadi aku merasa kayaknya lebih fit kalau yaudah kita pindah-pindah aja sampai convenient buat dirimu dan timnya gitu.
1:40:15Jadi kayak salah satu yang dijelaskan sama clean arsitektur kan mecah-mecah file yang itu ya, mana yang use case, mana yang domain repository dan sebagainya gitu.
1:40:29Nah maksudku, emang harus banget kita capek-capek gitu ya, nggak semua orang convenient gitu loh maksudnya dengan pattern yang bahkan sudah dijelaskan secara teori di buku bertahun-tahun yang lalu.
1:40:43Atau kita juga nggak yakin nggak, apakah ini masih makes sense nggak buat hari ini.
1:40:49Maksudku kadang-kadang ya kalau ada gitu tuh jangan jadi kultus yang kita harus ikutin mentah-mentah gitu ya.
1:40:57Maksudnya kalau itu nggak nyaman, kenapa harus diikutin gitu ya.
1:41:02Kalau memang itu works dan nyaman buat timnya, buatku nggak ada masalah kalau mau ikutin pelakan-pelakan apa yang ada di bukunya.
1:41:12Tapi kalau nggak nyaman, pindah-pindahin aja sih. Sampai timnya ngerasa kayaknya kita naruh file berdekatan dengan ininya kayaknya lebih oke deh buat timnya gitu. Kenapa nggak gitu ya.
1:41:25- Oh iya berarti semacam cherry pick itu nggak sih? Manuali cherry pick tanda kutip ya maksudnya berarti lead-nya atau siapapun lah yang di tim itu,
1:41:37pilih hal-hal apa aja yang cukup penting buat di-enforce. Kayak misalnya yang file-file structure kan nggak mungkin ya lain-lain.
1:41:45Maksudnya gimana pun walaupun nggak ngikut prinsip apa yang strict, ya minimal folder dan file-nya kayak gimana, komponennya taro mana, atau utility-nya taro mana,
1:41:57itu kan kayaknya bisa dibilang harus ada kesepakatan. Yaitu satu contoh yang paling ekstrim. Mungkin berarti pilih-pilih aja kali ya hal yang dirasa perlu.
1:42:07Nah kalau misalnya nggak keburu-murus yang lain ya udah kayak bisnis gitu. - Sebenernya praktiknya semudah. Kalau di front-end ya.
1:42:15Praktik clean architectur semudah kayak sebenarnya kita selalu bikin komponen atau module base gitu loh yang berdekatan-berdekatan gitu.
1:42:24Misalnya file-file yang bervariasi tapi sebenarnya beririsan dengan module tersebut apakah mau dijadikan satu module apa di tengah gitu.
1:42:35Nah kalau clean architectur kan macanya based on domain gitu ya. Domain terus dia punya repository, punya use case, punya lain-lain, tapi domain-nya dibungkus.
1:42:45Nah kalau di front-end, gue rasa sih itu kayak modulnya gitu ya maksudnya. Let's say modulnya transaction atau checkout ya udah kumpulin aja di situ file-nya.
1:42:55Tapi kalau timnya nggak merasa nyaman dengan cara begitu ya, gue sih nggak merasa itu harus diikutin gitu maksudnya.
1:43:05Intinya kita mengambil intinya ya, tujuan apa yang diterapkan oleh clean code itu kan adalah untuk membantu dinamisasi tim dan keharmonisan tim dalam membaca dan membangun dan maintain code itu.
1:43:24Jadi itu sih tujuan utamanya. Jadi kalau misalnya ada sesuatu yang tim nggak nyaman dengan beberapa bagian, ya nggak perlu diadopsi, pakai lah.
1:43:41Ada komen yang mungkin make sense nih Mas Irvan. Jadi clean architectur itu sumbernya dari DDD, Domain Development. Ini kadang-kadang nempelnya ke kultur atau manajemen si perusahaannya sendiri.
1:43:56Perusahaannya itu mencah timnya based on domain atau nggak gitu. Misalnya front-end-nya sendiri yang ngerjain semua domain. Terus di pencah-pencah domainnya make sense nggak gitu ya.
1:44:07Itu kayak, kayak nambahin burden aja gitu. Tapi kalau timnya pesanya based on domain, itu jadi make sense tuh. Biar gue nggak perlu lihat file-file lo karena gue nggak pernah ngurusin juga urusan lo gitu.
1:44:22Jadi ya udah kita spread folder aja. Itu make sense menurut gue. Tapi kan jadi ngeliat situasi struktur timnya ya maksudnya. Jadi kayak clean architectur itu bagus ketika kondisinya memang terpenuhi gitu.
1:44:36Tapi kalau kita menganggap itu adalah hal yang seharusnya kita implementasi di semua project kita, itu mungkin nggak ya kalau menurut gue ya.
1:44:44Kalau saya masih di DDD. Bucket Development. Kalo ada bug baru dibenerin, baru dikerjain. Kalo nggak ya udah jangan aja.
1:44:57Intinya sebenernya kalau mulai project ya jangan. Mulai dari yang simple aja sampai ketemu masalah baru mikirin. Ini kira-kira gimana nih folder-nya mau dipisahin atau nggak.
1:45:07Jangan tiba-tiba pakai clean architectur baru sendiri 2 orang gitu ya. Setengah mati nanti. - Ribet sendiri.
1:45:13- Ribet sendiri nanti. Jadi ya disesuaikan aja sama kultur timnya, sama ukuran timnya gitu. - Tapi ada satu yang perlu saya ini ya. Kalau sudah mulai projectnya sudah mulai lebih matang dan timnya sudah mulai terbentuk,
1:45:31perlu dibuat standarisasi. Jadi supaya ada tim yang baru masuk bisa mengikuti standar, dan standar itu tetap didokumentasikan. - Padahal ini lagi support convention ya.
1:45:44- Itu kan yang di support convention kan. - Betul. - Sederhananya ini sebenarnya kesepakatan yang disepakatin bersama-sama gitu.
1:45:51Kalau semua tim sudah setakat, kita ngerjainnya begini. Ya udah secara tidak langsung, tetap didokumentasikan. Itu sebenarnya ya udah convention dari tim tersebut gitu.
1:46:04Para kerjaannya begitu. Plusnya adalah tidak didokumentasikan aja biar nggak lari-larian lagi tuh. - Betul.
1:46:11- Iya, saya barusan ngerjain CSS, saya bikin font saya sendiri, terus kena marah. Kan sudah ada CSS variable. Ya siap.
1:46:22- Disinilah pentingnya code review ya. Karena kadang-kadang nggak aware kan. Oh udah ada ini ya fungsinya ya, saya nggak tahu.
1:46:31- Kenapa didefine sendiri? Oh iya nggak ada ya? Terus bikin sendiri color-nya apa? Kan sudah ada mixinnya, kenapa nggak pakai? Oh iya sudah ada ya, tinggal pakai. Siap.
1:46:43- Gitu ke depan bisa bikin bencana semua important-important-important karena saling mau meng-overwrite.
1:46:53Itu ketahuan orang-orang lama tuh kalau banyak pakai important tuh. Aku masih pakai bahwa masih banyak.
1:47:01- Yang udah pakai Tailwind masih suka kata override-overwrite.
1:47:15Soalnya yang ngedesign nggak ngikutin aturan yang kita buat gitu loh. Jadi sukanya dia bikin dia melayang-layang kemana-mana ya udah.
1:47:26- Tiba-tiba ada 6 pixel.
1:47:31- Ngomongin designer.
1:47:34- Belum lagi kira tiba-tiba ada, ini permintaan klien iklannya harus gini ukurannya, hai lo.
1:47:44Pusing-pusing deh. Nggak bisa kalau nggak duit nggak masuk gimana. Mau nggak di gaji.
1:47:51Itu nggak ada pilihan itu. Mau nggak mau ya walaupun iklannya pakai gift gitu ya. Harus diterima ya.
1:48:00Oke. Wah seru sekali ya kita tidak, terasa sudah hampir 2 jam.
1:48:05Biasanya sejam udah ya.
1:48:13Ada yang nanya Astro. Astro nanti kita bikin topik sendiri lah ya.
1:48:17Sudah hampir 2 jam. Jadi kita masuk ke penghujung acara. Terima kasih banyak ya buat Mas Ivan. Insight-nya luar biasa menarik ya.
1:48:28- Ada pesan-pesan nggak dari Mas Ivan? - Pengalaman yang luar biasa.
1:48:33- Atau selfa? Bebas? Apapun?
1:48:36- Apa ya?
1:48:39- Jangan lupa kalau ada topik bisa kirimkan ke sana.in. Ini salah satu produknya Mas Irvan.
1:48:46- Ini yang baru ya. - Yang pakai teman-teman sendiri.
1:48:49- Eh jangan salah loh kalau kalian buka website-nya Mas Irvan ke bagian About itu project open source-nya banyak sekali.
1:48:59Jadi bisa dilihat kodenya. Luar biasa.
1:49:03- Tiap yang belajar framework baru bikin project baru ya.
1:49:08- Itu privilege kan? - Gak semua orang bisa bikin di situ kan?
1:49:12- Bebas. - Betul.
1:49:14- Itu topsters-nya kok. Stretch. - Iya ya.
1:49:17- Stretch ini ya. - Ya malu lah. Masih cukup bikin chassis-nya.
1:49:20- Nggak tapi yang main nggak.
1:49:24- Kena flex kali. Karena di dua baris.
1:49:29- Oh iya karena URL-nya. - Iya dua baris.
1:49:33- Band-nya dua baris. - Panjang.
1:49:37- Makan aku, maafkan.
1:49:39- Santai. Jadi bisa langsung ke website-nya. Bisa dipelajari juga.
1:49:46Website-nya juga sangat ini ya. Best practice ya. Ada CI-nya, ada speed-nya.
1:49:51- Sudah mau hard cover face. Sudah mau hard cover face. Contribute aja tuh.
1:49:56- Liatan tuh ada LCP-nya, ada CLS-nya tuh. Diitung semuanya ya. Mantap.
1:50:05- Bebas sekali bikinnya ya. - Implementasi dari apa yang dipelajari itu.
1:50:09- Guys. Oke. Saatnya implementasi ya untuk itu ya.
1:50:14Bikin project-project sendiri. Bikin block-nya dipeperbagus gitu ya.
1:50:17Oke kalau gitu. Ada lagi yang mau disampaikan sebelum kita...
1:50:22- Apa ya? Itu kalau nggak punya kesempatan untuk nyobain framework yang lucu-lucu di kantor.
1:50:33Itu bisa dikerjain di open source. Kalau bisa bikin satu project yang selesai.
1:50:38Jadi jangan project yang makrak. Karena selain kita bisa pamer code, kita bisa pamer result-nya gitu.
1:50:46Dan akan tidak backfire kalau ditaro di CV gitu. Karena kalau taro kerjaan yang separoh jadi itu...
1:50:55- Mengerikan di CV. - Kok nggak selesai gitu. Wah ini ada yellow flag ya.
1:51:03- Ada, ada, ada. - Ada nggak yang di CV-nya taro localhost 3000 gitu.
1:51:09- Ya itu kan ini ya. Kamen ya buat kita ya. Kan kita bikin project belum selesai.
1:51:17- Bikin lagi, bikin lagi. - Ditinggal, lupa.
1:51:20- Maksudnya yang pedih-pedih kita jangan ditaro di CV lah. - Iya jangan taro CV.
1:51:23Terus kalau di kerjaan sehari-hari jangan disamain kayak ngerjain di project gitu.
1:51:29Kalau di project ya dirimu bisa rewrite satu application gede-gede.
1:51:33Tapi kalau di kerjaan sehari-hari ya itu jadi pilihan terakhir lah.
1:51:38- Pilihan ke 1000 sebelum dirimu cobain banyak... - Praktikal. Praktikal ajalah ya.
1:51:43Kalau mau nyobain framework-framework baru.
1:51:47Ada banyak tekniknya kayak tadi satu halaman atau satu komponen atau lain-lain.
1:51:51Dan sampai dirimu bisa confidence untuk deliver ke page-page lainnya gitu.
1:51:57Terus apalagi ya soal framework ya.
1:51:59Ya kalau belajar sih jangan ini lah jangan ngasih gatekeeping gitu.
1:52:04Maksudnya belajar apa aja gitu, belajar apa aja.
1:52:07Jangan dengerin kata orang belajar harus ini dulu itu dulu belajar aja gitu.
1:52:12Kalau dirimu ko susahan jangan malu untuk belajar hal-hal yang underlyingnya dibawahnya gitu.
1:52:18Itu aja kayaknya. Thank you-thank you buat waktu nya.
1:52:22Terima kasih banyak buat Mas Itpan.
1:52:24Terima kasih.
1:52:25Mudah-mudahan nanti kita bisa undang-undang lagi lain waktu.
1:52:28Semoga kita bisa ketemu lagi nih.
1:52:31Kita ketemu lagi di berbagai acara-acara offline.
1:52:36Acara-acara offline.
1:52:38Oke kalau gitu terima kasih juga buat teman-teman semua yang sudah hadir.
1:52:42Ada Mas Budi tuh, bantuin jawab tuh.
1:52:44Kayaknya kududung-dung lagi nih kapan gak panjang bahas clean architecture sama best practice ini.
1:52:52Sama ini, sama Imre.
1:52:54Kalau sama Imre harus rekaman gak bisa lah.
1:53:03Harus rekaman iya.
1:53:04Beda timezone, beda timezone.
1:53:06Sama harus banyak dekat nanti.
1:53:10Sama harus banyak dekat.
1:53:14Oke deh kalau gitu.
1:53:19Terima kasih buat semuanya yang sudah hadir, yang sudah menemani diskusi kita.
1:53:22Seru banget malam hari ini.
1:53:24Selamat malam, sampai jumpa minggu depan. Bye-bye.
1:53:28Thank you, bye.
Suka episode ini?
Langganan untuk update episode terbaru setiap Selasa malam!
Episode Terkait
26 Jun 2024
Ngobrolin Layout Email - Ngobrolin WEB
Yuk mari kita diskusi dan ngobrol ngalor-ngidul tentang dunia web. Agar tetap up-to-date dengan teknologi web terkini. ...
8 Okt 2024
Ngobrolin Deno - Ngobrolin WEB
Yuk mari kita diskusi dan ngobrol ngalor-ngidul tentang dunia web. Agar tetap up-to-date dengan teknologi web terkini. ...
3 Feb 2026
Computational Thinking - Ngobrolin WEB
🗣️🕸️ Selasa malam waktunya #NgobrolinWEB! Malam ini kita akan belajar computational thinking. Salah satu kemampuan ya...