Ngobrolin WEB edisi Offline Surabaya
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://ksana.in/ngobrolinweb ----------------------------------------------------------------------------------- Bergabung menjadi anggota elit di kanal ini: https://www.youtube.com/channel/UCHhAlFGFCGgIusQkQIqJLYw/join Donasi dapat meningkatkan kualitas kanal ini: 💰 https://karyakarsa.com/rizafahmi/tip 💸 https://saw Kunjungi https://ngobrol.in untuk catatan, tautan dan informasi topik lainnya.
Ringkasan Episode
Bantu KoreksiEpisode ini adalah sesi tanya jawab Ngobrolin Web versi offline yang diadakan di Surabaya. Pembahasan mencakup berbagai topik teknis seputar pengembangan web, mulai dari perbedaan penggunaan RUM (Real User Monitoring) dan Google Analytics, tantangan menggunakan AI untuk front-end development, keunggulan Tailwind CSS untuk developer yang tidak terlalu mahir CSS, optimasi performa web dengan banyak third-party libraries, hingga perdebatan tentang penggunaan ORM seperti Prisma dan Sequelize dibandingkan SQL raw. Episode ini juga membahas tentang browser automation, web scraping, dan cara kerja spesifikasi teknis web antar browser modern.
Poin-poin Utama
- •RUM (Real User Monitoring) seperti New Relic digunakan untuk memantau error dan performance metrics termasuk Core Web Vitals, sedangkan Google Analytics lebih fokus pada user behavior, device usage, dan traffic analysis
- •AI tools seperti v0.dev dapat membantu generate komponen front-end, namun developer tetap perlu memahami prinsip-prinsip front-end seperti validasi form, state management, dan event handler untuk prompting yang efektif
- •Tailwind CSS sangat membantu back-end developer yang kurang mahir CSS karena menyediakan utility classes yang konsisten, dengan custom config untuk design tokens yang bisa digunakan lintas project
- •Untuk mengoptimalkan performa dengan banyak third-party scripts, gunakan konsep critical rendering path dan defer loading script yang tidak diperlukan di awal (below the fold) menggunakan intersection observer
- •ORM seperti Prisma dan Sequelize menawarkan developer experience yang baik dengan TypeScript definitions, namun dapat menghasilkan query yang kurang optimal untuk use case kompleks, sehingga perlu trade-off antara kemudahan dan performa
- •Browser automation tidak hanya untuk testing, tetapi juga dapat digunakan untuk scraping data dan otomasi tugas-tugas repetitif, selama dilakukan dengan etika dan menghormati rate limit dari website
- •Spesifikasi teknis web (HTML, CSS, JavaScript API) dibuat oleh konsorsium yang terdiri dari perusahaan browser dan komunitas, dengan Web Platform Tests (webpt.fyi) digunakan untuk memastikan konsistensi implementasi antar browser
0:00Oke, halo teman-teman semuanya, ketemu lagi di tan, meskipun hari ini, bukan selasa malam, tapi kita sempatkan untuk ngobrolin lagi.
0:16Di sini ada yang suka nonton gak sih, penasaran, berapa orang suka nonton?
0:22Banyak loh, terima kasih ya.
0:27Jadi, buat teman-teman yang mungkin belum familiar, kita tuh biasanya live setiap selasa malam, jam 8 waktu misio badan, kita ngobrolin segala hal tentang web, alasannya kenapa?
0:41Karena salah satunya adalah, kita sering bingung kalau diminta untuk jadi pemijara seperti ini, mau ngobrolin nombor apa?
0:50Karena web itu kan besarnya, ada tadi web UI, CSS, ada ML, ada JavaScript dengan berbagai framework-nya, ada back-end juga, ada apa lagi ya?
1:00Ada accessibility, ada performance, banyak sekali, security, jadi karena kita bingung akhirnya kita bilang, akhirnya ada AI.
1:10Web AI ya, dan karena kita bingung akhirnya kita coba ngobrolin aja seminggu sekali, akhirnya yaudah kita live.
1:20Jadi kalau teman-teman yang belum join, bisa selasa depan join di youtube saya, youtube.blogspot.com/zapahni, silahkan subscribe aja biar ada notifikasinya.
1:33Oke, jadi ini adalah edisi kedua dari ngobrolin web versi offline, yang biasanya kita live streaming, sekarang kita offline khusus untuk menghadiri teman-teman di Surabaya.
1:48Sebelumnya kita edisi pertama itu di Bogor ya, sekarang di Surabaya, jadi kita akan mencoba menjawab pertanyaan-pertanyaan yang sudah teman-teman sampaikan melalui slibro.
2:03Dan kalau sudah ada pertanyaan yang sama, tinggal di input aja biar main nampas.
2:09Oke, kita mulai, oh nggak kelihatan disini, kita mau jauh ke mana dulu?
2:16Kapan kita menggunakan ROM atau Real User Monitoring/Google Analytics?
2:44Ini saya sering menggunakan ROM, kalau di projek-projek saya banyak menggunakan dari New Relic, saya menggunakan ROM ini untuk mendeteksi adanya portal error,
3:02error-error yang lain dari Sunpage Load, dan juga dari World Performance atau Core Web Vitals, bisa di-setting juga di New Relic.
3:16Sedangkan kalau dari sisi Google Analytics, biasanya saya mendeteksi device apa yang digunakan kebanyakan oleh user, juga bounce rate, dan kemudian page apa yang paling sering di-visit,
3:34dan juga part-nya mereka, user joining-nya mereka, kadang bisa dideteksi dari, kalau misalnya web-nya ada transasional, di-detek dari, minta jaringnya si itu ya Aida?
3:51Minta jaring, minta jaringnya.
3:54Terus kemudian kalau dari Google Analytics biasa mengecek traffic, base, atau user behavior lah.
4:06Kalau dari New Relic lebih ke arah technical data yang perlu saya dapatkan, seperti yang saya sudah sebut tadi, performance.
4:16Saya ingin bertanya tentang web-pre, mohon maaf kalau web-pre kita belum ada yang mampu menjawab, tapi ini ide yang bagus,
4:36balik banget. Ini kita ambil dulu, nanti kita bisa cari nara sumber yang lebih kompeten ya, untuk topic web-pre, nanti mudah-mudahan bisa dibahas di Google,
4:49nanti ada kemudian yang sesi hari Selasa malamnya. Nanti lagi port aja, nanti kita dapat nanti ya.
5:07Saya ingin berbicara dengan N, cari port N, apa-apa, tidak ada lagi.
5:19Kalau vzroot, kita kasih portnya kata-kata ya, coba aja vzroot, misalnya kita minta buat login port,
5:36vzroot bisa tuh langsung buatin semua. Tapi ya itu tadi, ada hal-hal yang perlu diperhatikan, tetap perlu front-end atau full-stack sih.
5:46Jadi secara komponen, emang akan di generate input, button, jadi kalau dari segi, mungkin lebih ke visual desainnya, kita males,
5:56bahkan aku punya yang front-end-nya, males pikir sisi visualnya, tapi fungsionalitas front-end itu kan bukan cuma tampilan visual, tapi banyak faktor fungsionalitas.
6:09Misalnya input, ada validasinya required atau enggak, terus misalnya validasinya formatnya harus seperti apa, terus kalau misalnya input itu error,
Lihat transkrip lengkap
6:20itu kan berkaitan dengan state form-nya sendiri, misalnya biar di-submit aja, terus nanti dibalikin error, atau jangan biarkan user men-submit form itu,
6:32misalnya button-nya tetap disable sampai semua validasinya sudah betul. Kan sebetulnya banyak faktor-faktor non-visual dari suatu UI front-end,
6:44jadi walaupun, ya bisa prompting, itu kan bisa ditambah dengan prompting tadi, misalnya pakai code chat, misalnya pakai Gemini di IDX atau Popilot dan lain-lain,
6:54tapi kita tetap harus tahu prompting hal-hal apa yang perlu diperhatikan dari suatu UI.
7:02Jadi kalau males lurusin front-end itu, ya tetap minimal enggak males prompting dengan teknik-teknik atau prinsip-prinsip front-end yang ada.
7:12Vigma sudah bisa AI, tinggal prompting, ya potila AI.
7:20Alternatif lain mungkin kalau nanti front-end bisa hire developer yang males suka front-end, ya? Ini dia negasi, ya?
7:30Saya back-end, murni, saya nggak suka front-end.
7:39- Panggilin Haider. - Haider, jangan jadi lagu.
7:43- Solution lain, saya suka Terwin. - Oh.
7:49- Siapa sinyalah Terwin? - Lu.
7:52Mantap, kita sahabat.
7:57Ya, saya pakai Terwin dan saya suka pakai Terwin dan saya support Terwin karena dari sisi build tools-nya,
8:07kalau pakai Terwin itu saya build utility-utility atau CSS yang tak terbatai.
8:15- Bagaimana bisa muncul? - Oh gitu, mantap.
8:19Utility-utility yang nggak dibutuhkan juga bisa di-remove dari Terwin-nya.
8:25Jadi saya back-end dan saya pakai full dengan Terwin.
8:31Jadi terpantung, oh iya, dari sisi Figma atau kalau dari Figma saya generate code-out V0 juga,
8:40dia bisa generate-nya pakai Terwin, ya?
8:42- Bisa. Terwin, ya. - Ya, Terwin, ya.
8:44- Dan Next. - Atau React.
8:46Jadi, ya, ke depannya, sebagainya. Mempermudahin saya, ya.
8:50Jadi front-end itu bukan cuma visual, cara pedingat, emang kalau Terwin sih, ya, Terwin itu sangat mempermudah.
9:00Tapi ya itu fungsionalitas, kapan suatu komponen perlu di-load, kapan nggak.
9:06Terus action-action-nya, misalnya event listener-nya, on-input gimana, on-click gimana, event handler-nya apa.
9:15Terus biasanya ada state-state-nya, UI-state-nya gimana.
9:19Nah, itu perlu dipikirin atau prompting atau delegasi ke developer lain.
9:26Seperti informasi juga, saya juga back-end dan pada saat itu saya disusah jepaskrim.
9:35Tapi waktu itu jamannya diquery ya, jepaskrim vanilla diquery.
9:40Terus sekarang kerjaannya jepaskrim.
9:42Gimana dong? Jadi karma, ya.
9:46Jadi kalau gak susah, ya itu, satu delegasi, kedua, kenapa?
9:56Kalo gak suka dia, mungkin ada sesuatu yang problem.
10:00Ya, karena jepaskrimnya saya suka.
10:05Tapi kalau CSS-nya itu, iya, mungkin bukan.
10:08Skin issue, ya.
10:10Yang itu.
10:19Apalagi menurut saya, terumahnya adalah dapet desainernya itu bukan desainer web.
10:26Jadi dapet desainernya itu desainer yang khusus untuk grafik banner yang di...
10:32Grafik desainer ya?
10:34Ya, grafik desainer.
10:35Kasihnya PNG gitu ya?
10:37Kalo foto Shopeye.
10:40Tapi ya itu motot gitu, maunya lengkungannya itu seperti itu.
10:44Oh iya, bahkan ini harus absolu gitu ya?
10:46Iya.
10:48Jadi hidup saya tuh habis aja, geser-geser satu mixer, satu mixer.
10:53Akhirnya ya, akhirnya position absolu semua saya.
10:59Itu important?
11:00Important.
11:03Itu akhirnya, karena saya udah terlalu cekin, ini gimana sih momen kita bisa persis disitu?
11:11Itu balik lagi, antara grafik desainernya yang salah, apasanya yang skill issue saya tak tahu.
11:18Makanya jadi terlalu banget dengan CSS-nya, sudah lah saya tinggalkan saja.
11:23Dan saya berali ke back-end dan jawab masing-masing.
11:26Jadi sekarang coba kita jadi pelan-pelan, kita tahu semakin lama semakin cinta, nanti kita jadi front-end melayang.
11:35Kalo saya sekarang, justru kalo di Tailwind gak bisa, mati setengah desainernya.
11:40Desainernya yang selalu belajar Tailwind.
11:46Desainernya belajar Tailwind, ini loh, ini loh, positioning dan layout itu seperti yang ada di Tailwind.
11:51Dan ikutin itu.
11:55Kalo buat anak non-end juga bisa manfaatin Tailwind buat menginakan temen-temen ke back-end dan full stack kalian.
12:06Caranya, Tailwind kan bisa custom config to custom token, custom config.
12:11Gimana caranya, tag token sama desainer grafisnya, token.
12:14Paksain harus pake yang namanya desain token sekalian mengidotasi biar gak kayak desainernya yang tadi.
12:20Terus kalau misalnya kalo di halaman A fontnya kurang 14, di halaman B tiba-tiba item yang harusnya sama tiba-tiba beda dikit.
12:40Kita ngomong edukasi aja, mungkin lalu mungkin gak, cuma biasanya kalo timnya gak toksiksian, kan lebih kebaikan juga.
12:51Jadi kita enforce yang namanya desain token, desain token itu bisa dimasukkan ke custom Tailwind config.
12:57Custom Tailwind config itu bisa dipakai dari berbagai project apapun, Vanilla JavaScript, Power React.
13:05Itu kan mempermudah teman stream kita untuk menggunakan yang gak bisa CSS.
13:11Ya udah gak usah banyak mikir, pake yang udah ada.
13:14Terus kan udah terbantu juga dengan di Viscode juga ada perang Intel Wind-nya ya.
13:19Jadi udah ada auto-fill dengan semua settingan token yang sudah kita bukut.
13:25Pertanyaan berikutnya, bagaimana cara memoptimalkan performa aplikasi web modern dengan banyak perparti libraries?
13:37Ini perhubunganan corporate portal.
13:40Biasanya begini ceritanya, webnya sudah saya atau sudah kita develop dengan sangat indah, cepat dan bagus.
13:47Tetapi dirusak oleh tim marketing dengan GTA.
13:51Ada yang pernah relate, GTN kita tambahin.
13:56Terus tim marketing semana-mana menambahkan koden dari mana pun yang mereka mau.
14:02Ceplokin, terus deploy, terus akhirnya website jadi rusak.
14:07Itu paling selim.
14:09Yang biasa yang disalahin, kita.
14:13Terus kita dianakan sana.
14:15Ini kalau kita matikan GTN cepat kok.
14:19Tapi kita kembali.
14:21Memoptimalkan performa aplikasi web modern dengan banyak perparti di perangkat dan spesifikasi rendah.
14:27Oke.
14:31Yang pertama kita harus saat kalian bisa baca yang namanya critical rendering path.
14:39Ada satu bacaan, nanti kalian bisa cari di Google.
14:45Udah lama banget, itu dari Google, dari web.dev.
14:49Critical rendering path.
14:51Jadi kalian mau ngerti bagaimana saat browser melakukan initial page load dan melakukan rendering.
14:58Ada random blocker, ada random block seperti CSS, On, itu random blocking.
15:08Artinya jika value itu belum didapatkan, maka process rendering stop sampai value itu selesai didapat.
15:16Dan ada cara untuk optimalisasi.
15:19Nah kembali ke third party.
15:21Kita harus memiliki mana third party yang dibutuhkan di awal rendering dan mana third party yang tidak perlu di awal.
15:31Jadi semua third party yang tidak butuh di awal page load, di-defer aja ke belakang.
15:41Artinya setelah page load selesai, dia baru random.
15:44Contohnya adalah command system.
15:50Jika kalian punya, anggap aja pada situs berita.
15:56Lalu kemudian ada command system.
15:58Command system-nya zaman dulu itu sempat ada yang namanya Discuss.
16:04Kalau kita pikirkan, command system itu kan ada di bawah banget ya di article.
16:09Arti kalau bahasa text-nya below the fold.
16:13Dan tidak perlu di-render paling awal.
16:16Terakhir-terakhir aja ya?
16:17Terakhir, itu udah.
16:19Jadi strateginya adalah bisa menggunakan intersection observer.
16:25Jika user-nya scroll sampai mungkin 200 pixel sebelum element itu muncul, baru CSS-nya di-load.
16:34Contohnya seperti itu.
16:36Itu untuk command.
16:38Ada mungkin ya paling sering ads lah ya, paling susah ads.
16:41Kalau CSS sudah muncul di awal-awal ya harus tetap harus di, misalnya header bidding lah contohnya.
16:48Itu memang harus di-load di awal.
16:50Namun, kembali lagi ke si percakapan kalian dengan si client atau stakeholder.
16:58Mereka bilang-bilang mana yang butuh di awal, mana yang butuh di akhir.
17:02Dan mana yang benar-benar butuh benar-benar di awal banget.
17:06Jadi ngomongnya soal kalau di bahasa saya itu, diet.
17:12Jadi wealth-nya diet.
17:15Mana yang benar-benar buruk.
17:17Bahkan fault, fault itu gak semua butuh di awal.
17:21Fault itu ada yang bisa di-swap, ada yang bisa di-mundurin.
17:27Gak semua butuh di awal.
17:29CSS juga gak semua butuh di awal.
17:31CSS itu bisa asynchronous load, bisa ditunda.
17:36CSS itu bisa ditunda.
17:38Jadi hanya butuh yang above the fault aja yang kalian, atau critical CSS bahasa kerennya.
17:44Critical CSS-nya aja di-load di atas, sisanya ditunda.
17:48Sehingga ujung-ujungnya core web-writer-nya kalian bagus, score-nya.
17:53Artinya, LCP-nya, Large Spontane Full-Penya bisa bagus.
17:58Terus kemudian kalian harus bisa memahami yang mana supaya dia terjadi layout shift.
18:05Dan memahami bagaimana supaya saya score yang mana yang perlu di-load atau tidak.
18:10Sehingga tetap memperhatikan INP-nya.
18:13Jadi semoga menjawabnya untuk soal tepati.
18:16Kalian nama-nama aja.
18:18Cukup-cukup.
18:20Terima kasih.
18:22Oke.
18:24Banyak orang yang belum tahu ya dynamic import itu udah bisa di JavaScript Vanilla.
18:29Jadi kalau kita pakai framework seperti React atau Svelte atau Vue kan.
18:33Memang sudah bisa import dynamically untuk lazy loading tadi.
18:37Tapi sebetulnya itu fitur yang sudah masuk standar ES6 kalau gak salah.
18:42Ya dari 2020-2021.
18:45Jadi apapun teknologi yang digunakan.
18:48Ya bisa menggunakan lazy load seperti yang tadi disebut Divan.
18:53Oke.
18:55Pertanyaan berikutnya.
18:57Bagaimana?
18:58Eh udah kena.
18:59Tips.
19:01Apa rodent gods menggunakan core M seperti Krisma atau Sycolas dengan query data list secara langsung?
19:09Yang pertama, pro-nya adalah kemudahan mudah.
19:15Temen-temen diberikan API untuk lebar query, database, join dan operasi-operasi line and insert, update, dll.
19:26Itu kemudahan yang di dapat.
19:28Developer experience-nya enak gitu.
19:31Cause-nya adalah belum tentu semua. Kan si ORM ini adalah translator ya. Translator ke database.
19:39Ngomong ke database, ke SQL.
19:41Line joins-nya kan.
19:44Structure, query, and joins.
19:46Nah, kalau yang misalkan kita udah mulai kompleks aplikasinya atau query-nya udah mulai kompleks, joins sana, joins sini.
19:55Bisa jadi query yang dihasilkan oleh ORM ini bisa jadi kurang optimal.
20:04Kurang efektif, kurang optimal.
20:06Karena mungkin dia select-nya select bintang misalkan.
20:10Join-nya juga mungkin full join.
20:13Ya, ini import-bole aja gitu kan.
20:16Jadi kurang optimal.
20:17Dan itu yang bukan, menggunakan ORM itu tidak sepenuhnya salah.
20:22Tapi ada case-paster.
20:25Kalau misalnya kok ini lambat ya?
20:26Kita kan bisa lihat log-nya, misalkan ada print query-nya.
20:29Nah, dari itu kita bisa optimize.
20:31Atau kalau di RDBMS itu biasanya ada explain.
20:36Explain, query, query kita paste aja.
20:38Terus kita lihat tuh apa yang terjadi.
20:40Dan dari situ kayak debug lah.
20:42Ada bottleneck dimana.
20:44Nah, ini yang diperbaiki.
20:46Mungkin itu bisa kita copy paste ke, saya yakin semua ORM ada execution langsung STL role kan.
20:54Jadi kita bisa ambil si query yang sudah dioptimize.
20:59Bisa tanyakan AI juga, tolong optimize gitu ya.
21:02Hasilnya udah bagus.
21:03Kita coba dilarangin di database.
21:06Yang ada di database production ya, di database development.
21:09Tidakan antara query yang pertama berapa mili detik millisecond.
21:16Query yang optimize berapa millisecond.
21:18Ada perubahannya enggak?
21:19Kalau ada copy paste, jalankan query-nya secara raw di ORM juga.
21:25Di frontend, ada tailwind buat orang-orang yang nggak bisa atau males tulis CSS.
21:39Tapi kan sebetulnya ya overall positif ya.
21:45Jadi ya itu kayak kebalikannya tailwind lah.
21:48Dengan adanya Prisma atau Syqlize, kalau misalnya gue nggak bisa, nggak bisa paste command langsung.
21:55Minimal bisa prototyping.
21:57Atau bisa bikin aplikasi truth simple, ya bisa lah langsung cepat.
22:01Langsung ada type script definition-nya.
22:03Cus, tinggal pakai AI auto-optim, udah kelar.
22:08Cuma kan itu tadi kalau use case-nya udah mulai rumir.
22:12Terus performance concern, ya itu harus consult sama yang memang paham.
22:18Dan itu kayaknya use case AI yang bagus deh buat bikin contoh-contoh SPL-nya.
22:23Terus bikin perbandingannya.
22:25Terus suruh ngelog berapa detik compare masing-masing.
22:29Itu kan kita bisa minta tolong AI juga.
22:32Kalau dari saya cost and cost kembali dalam konteks kemudahan berbanding dengan kompleksitas.
22:41Jadi dengan menggunakan ORM, kemudahan yang didapatkan.
22:46Tapi di dalamnya kompleks yang tinggi.
22:50Jadi, ORM itu sebenarnya abstraction.
22:53Satu layer ini adalah SKL query yang kalian lakukan.
22:57Ada abstraction layer-nya.
22:59Jadi, semakin banyak abstraction, semakin kompleks mengaturnya.
23:03Bagaimana caching-nya, bagaimana optimized query-nya.
23:07Semakin banyak abstraction, semakin kompleks untuk mengaturnya.
23:15Jadi, ada trade-off-nya di situ.
23:17Kalau dalam membangun sebuah aplikasi, kalian kalau mengaktif dengan trade-off itu ya silahkan melakukan strategi-nya.
23:30Seperti kalian sudah sepakat di bersama.
23:35Seperti saya tadi dengan Tailwind dan CSS.
23:38Sebenarnya Tailwind itu adalah abstraction dengan CSS murdi.
23:41Yang CSS netik.
23:43Sebenarnya kalau saya ketemu salah satu dari kalian yang benar-benar menjarik oleh CSS.
23:49Pasti tidak setuju dengan saya katakan saya suka Tailwind.
23:53Tapi dengan trade-off yang tadi saya katakan.
23:57Jika daripada saya menuliskan CSS yang berantakan dan tidak optimal.
24:08Dan jilinya rendering-nya jadi kacau.
24:11Atau maintain ability-nya jadi susah.
24:13Mending saya pakai Tailwind contohnya.
24:16Tetapi bagi sebagian orang yang benar-benar jago CSS.
24:19Justru itu Tailwind pakai Tailwind itu bloated.
24:21Itu adalah perbandingan.
24:23Jadi ada kemudahan dan kompleksitas.
24:26Saya suka pakai SQL.
24:28Saya langsung query performance.
24:33Karena saya sudah paham hal tersebut.
24:36Maka pakai ORM bagi saya justru mengganggu.
24:40Karena apa yang mau saya lakukan harus memikirkan bagaimana calanya ORM itu mendapatkan data.
24:46Jadi saya desain untuk tidak menggunakan ORM.
24:50Dan itu kembali lagi trade-off yang kalian sepakati bersama saat kalian membangun aplikasi dengan tim-nya kalian.
24:58Mana yang kalian gunakan dan mana yang tidak digunakan.
25:01Dan kembali ke tim-nya.
25:05Sedikit tambahan.
25:07Saya tidak tahu di JavaScript, ORM dan JavaScript.
25:09Ada tipe ORM yang eager routing, ada yang lazy routing.
25:13Jadi kalau yang eager routing itu misalkan kita punya relasi antara artikel dan komen.
25:21Ketika kita query misalkan comment.getall itu komen-komennya ikut juga sudah ada di arainya.
25:31Jadi dia kayak query dua kali, query table article dan table comment.
25:37Tapi itu yang eager routing.
25:39Eager routing itu kayak belong semua. Ada itu butuh.
25:44Kita cuma butuh artikel doang.
25:46Ada yang tipe-nya lazy routing.
25:50Jadi kalau kita tidak mendefinisikan bahwa kita butuh galop semua, maka dia akan load satu table aja.
25:57Jadi teman-teman mungkin bisa cari. Mungkin ada aussie-nya.
25:59Saya tidak tahu karena belum pengalaman pengendangkan juga terlalu dalam.
26:04Mungkin ada aussie-nya untuk eager routing dan lazy routing itu juga salah satu solusi.
26:08Saya jadi keringat salah satunya kayak REST-MPI versus GraphQL.
26:13Di mana REST-MPI kita tanya satu.
26:17Satu objek ini terus isinya semua satu abrak-abrak dikirim.
26:21Ini kalau artikel dari title, badinya, segala macam.
26:25Terus komen-nya dikirim semua. Terus sekaligus.
26:27Jadi kita bangkat.
26:30Tapi saat batch load mungkin tidak butuh komen.
26:33Tapi di REST-MPI tidak bisa karena sudah dikirim satu abrak-abrak.
26:37Sedangkan GraphQL adalah abstraction lagi, sama-sama dengan REST-MPI.
26:42Yang bisa kita waiting.
26:45Yang mana yang mau kita customize.
26:48Mana field yang kita mau dapet.
26:50Tapi untuk buat GraphQL, bukannya itu beda.
26:54Teknologi, stack-nya lagi, server-nya lagi.
26:57Ada write-off juga di sana.
27:00Sehingga, biar kembali lagi.
27:02Kalian itu diserahkan ke kalian untuk menghasilkan.
27:07Disitulah letak seni.
27:10Dan web developer itu pekerja seni.
27:13Bukan pekerjaan.
27:15Jawabannya umumnya adalah, kalau ditanya nanti gitu, jawabannya adalah it depends.
27:21Kalau ada masalah-masalah seperti ini, kita tidak bisa digantikan dengan AI.
27:27Kita tidak bisa digantikan dengan Tailwave, Debit, Prisma.
27:32Pertanyaan berikutnya.
27:35Bagaimana cara optimize face API Python dan deployment agak lebih cepat.
27:42Rewrite keras.
27:45Tapi face API ini sudah ada framework Python yang paling cepat saat ini.
27:55Kenapa perlu dioptimase lagi ya?
27:58Saya bukan pengguna ya, jadi tidak tahu ya.
28:00Cuma tahu sedikit-sedikit saja.
28:02Ada masalah apa yang menyebabkan si face API ini jadi lambat?
28:05Saya tidak tahu.
28:06Karena setahu saya, banyak pengguna Python justru menggunakan face API.
28:10Salah satunya karena fast, cepat.
28:13Kalau sudah tidak cepat, mungkin ada sedikit yang senang.
28:16Apa salah nama?
28:20Mungkin dia slow.
28:24Kita tidak bisa dioptimase sekarang ini karena kita bukan pengguna Python.
28:28Kalau deployment juga indipensi juga ya.
28:32Deploy-nya di mana, metode-nya seperti apa, apakah menggunakan Docker, Kubernetes, dan lain-lain.
28:39Browser automation.
28:43Tuduhannya kan untuk testing.
28:45Tapi bagaimana jika automation browser itu digunakan untuk stranding?
28:50Boleh, boleh.
28:51Browser automation, use case-nya banyak ya.
28:55Tidak cuma untuk testing ya.
28:57Bisa buat macam-macam.
28:59Kalau saya boleh katakan, browser automation ini buat orang malas seperti saya.
29:05Saya developer malas.
29:07Jadi apa yang bisa saya automate, saya pakai browser automation.
29:12Kalau di bahasa Inggris ini sebenarnya lazy.
29:15Lazy.
29:16Tapi bukan malas kan.
29:18Malas itu apa?
29:20Contohnya, misalnya kalau ada kita sebelum deploy selalu nge-test dulu dari awal sampai akhir untuk make sure aplikasi intern berjalan dengan benar-benar.
29:30Atau setelah kita refaktor.
29:32Browser automation bisa digunakan begitu.
29:36Bisa juga buat scraping data.
29:38Contohnya, kalau misalnya saya mau, salah satu case, saya mau ngumpulin artikel yang ingin saya baca setiap hari.
29:48Saya biasanya pakai kompetir, set up set up.
29:52Dan dia jalan ke situs-situs berita yang saya suka.
29:56Dan ambil taggingan berdasarkan tag.
29:59Saya ambil beritanya, saya ambil artikelnya, saya kumpulkan ke satu tempat.
30:04Dan saya summarize pakai AI untuk saya tahu berita apa yang berjadik di hari itu.
30:09Itu bisa.
30:11Dan bisa saja, karena saya automate, bukan untuk, kan ujungnya kalau yang salah adalah mengambil dan atau hitus.
30:24Ya bukan haknya ya.
30:25Atau misalnya tools itu adalah hanya sebuah tools.
30:29Mau dipakai hal yang baik, mau dipakai tidak hal yang baik, persalahan lah.
30:34Jadi sama seperti misal itu adalah tools.
30:39Browser automation adalah tools.
30:42Scrapping, tidak apa-apa sebenarnya, dengan tujuannya.
30:48Jadi gampangnya cara kita mikir browser automation.
30:52Apapun yang bisa kita atau user biasa lakukan dengan browser, ya bisa dilakukan oleh browser automation.
30:59Tapi memudahkan karena di delegasikan ke sistem atau program yang kita buat.
31:06Kita sebagai user kan bisa-bisa saja kita cari info, kita refresh atau kita buka banyak halaman.
31:12Itu kan behavior normal.
31:13Kalau memang datanya tersedia secara public, ya boleh-boleh saja.
31:17Tapi misalnya kita membuka halaman website dengan refresh yang tidak wajar atau dengan frekuensi yang tidak wajar.
31:25Ya itu dianggap salah oleh si pemilik website, bakal terkena rate limit.
31:30Misalnya itu kan tanggung jawabnya yang bikin website untuk menge-enforce itu dan behavior.
31:36Atau hasil yang kita terima baik kita membuka sebagai user biasa secara manual, maupun pakai browser automation kan sama saja.
31:43Atau misalnya kita berusaha mengakses resource yang kita tidak punya hak untuk akses.
31:48Ya kan bakal ada error not authorized juga, jadi nggak masalah.
31:54Oke, pertanyaan berikutnya, bagaimana Chrome Lin dalam inklopitas ATML dan dapat kolomerasi dengan browser lain?
32:01Lalu bagaimana cara dianggap konsumsi ATML dan VPI?
32:05Ini internal browser ya, yang sama browser gitu ya.
32:09Chrome, Timebox, Safari, dan sama-sama.
32:14With 3GC ya?
32:16Intro, bukan. With all this.
32:20Jadi sebetulnya semua teknologi web, ATML, CSS, terus JavaScript, tapi yang web API, jadi JavaScript yang berjalan di browser.
32:30Itu bukan milik satu perusahaan manapun, baik itu Chrome, atau Apple, atau Firefox, atau siapapun.
32:38Jadi itu berdasarkan sebuah spesifikasi teknis.
32:43Nah, yang bikin spesifikasi teknis itu konsorsium.
32:47Konsorsium itu ya anggota-anggotanya adalah orang-orang dari browser-browser tersebut.
32:53Terus bisa juga terbuka untuk komunitas atau misalnya expert di luar perusahaan browser tersebut.
33:04Jadi nggak harus semua yang di konsorsium itu kerja untuk Google atau Apple dan lain-lain.
33:09Jadi itu ditentukan bersama jauh banyak.
33:12Nah, berdasarkan spesifikasi teknis itu, masing-masing mengimplementasikan di browser-nya.
33:19Kayak misalnya kalau Chrome itu kan dari Chromium ya.
33:21Nah, mereka menafsirkan spesifikasi teknis, misalnya HTML kalau button itu harus dirender seperti apa, cara kerjanya gimana.
33:30Nah, implementasinya, kayak codingan benerannya, codingan dalam bahasa C++,
33:36ya diserahkan pada masing-masing. Misalnya kalau orang Chrome bikinnya engine Chromium.
33:42Terus Apple juga punya WebKit, Firefox, Spiderman, Gekko.
33:50Jadi itu interpretasi mereka masing-masing.
33:54Terus kalau yang pertanyaan kedua, "Eh, nggak keren-keren sih HTML dengan apa?"
33:59Maksudnya, konsistensi rendering HTML antar satu browser ke satu browser lainnya, yang tadi ya.
34:07Pertanyaan kedua ya?
34:09Konsistensi HTML di-render antar satu browser ke satu browser lainnya.
34:15Ya, tadi spesifikasi.
34:17Jadi sebelum sebuah type HTML misalnya diimplementasi di satu browser atau di banyak browser,
34:24itu yang propose, yang mengajukan itu wajib menulis dokumen namanya spesifikasi atau seperti requirement.
34:33Ini adalah type marking, tujuannya untuk supaya ada rolling text dibawah atau gimana.
34:42Cara kerjanya seperti ini, seperti ini, implementasinya nggak ditulis.
34:46Jadi masing-masing browser, baik itu Firefox, Chromium, WebKit dll.
34:53Melakukan implementasi masing-masing.
34:55Begitu juga dengan JavaScript.
34:56Jadi masing-masing browser itu JavaScript-nya, implementasi JavaScript ini bisa beda-beda.
35:02Makanya kalau teman-teman yang berada di backend, di backend itu ada Node.js yang menggunakan engine yang crow namanya V8 atau EA.
35:12Kemudian muncul Deno juga menggunakan VA.
35:16Kemudian muncul Boon yang menggunakan JavaScript or yang ada di WebKit atau Safari.
35:24Kok bisa lebih cepat Boon?
35:25Bisa lebih cepat Boon.
35:30Bisa lebih cepat karena itu, implementasi JavaScript-nya di Safari itu berbeda.
35:36Makanya, kenapa cepatannya yang ini daripada, karena engine-nya beda.
35:40Bisa kaya mobil aja lah, mobil yang engine-nya ini sama yang ini diadu, ya mungkin ada satu lebih cepat, yang satu lebih tanggung misalkan.
35:48Yang gampang rusak atau minggu.
35:50Jadi spesifikasinya, requirement-nya sama, tapi hasil berbeda-beda.
35:56Terus antar, sekarang sudah ada inisiatif yang namanya Interop.
36:01Pahit-pahit.
36:03Interop itu inisiatif buat men-streamline-kan, jadi kan spesifikasi makin lama makin banyak, makin rumit case-nya banyak.
36:13Nah gimana, padahal masing-masing browser tadi gue dengannya juga beda.
36:17Gimana nyamain, pakai test driven, sebenarnya test driven development sih.
36:23Jadi ada yang namanya web platform test, kalau misalnya tertarik bisa buka webpt.fyi.
36:30Nah itu ada test case, banyak banget, ratusan bahkan dibuat.
36:34Tadi sempat ditunjukin juga ya sama Ivan, yang ada Chrome, Firefox, Safari.
36:40Jadi semua spesifikasi tersebut dibuat, test case-nya, assertion-nya, detail banget.
36:46Bahkan sesimpel media query, misalnya di resize, jadinya gimana.
36:50Jadi itu semua murni HTML, CSS, JavaScript.
36:54Nah gimana cara memastikan masing-masing browser, behavior-nya konsisten, ya pakai test case itu.
37:01Jadi mereka yang diluningkan bukan implementasi kode-kode browser masing-masing, tapi test case itu.
37:09Test-nya behavior-nya begini ya, jadi kalau misalnya udah passing, berarti konsisten.
37:16Oke, berhubung, waktunya sudah habis, kita tutup aja.
37:20Maaf-maaf tidak bisa menjawab semua pertanyaan, temen-temen mungkin masih banyak.
37:24Nanti kita akan ambil ini dan mudah-mudahan nanti kita akan jawab di silisi online kita.
37:30Jadi dari kita bertiga pangin, sampai bertemu lagi di hari Selasa malam.
37:36Waktunya kita berbualin web.
37:40Terima kasih semua.
Suka episode ini?
Langganan untuk update episode terbaru setiap Selasa malam!
Episode Terkait
3 Des 2024
Persiapan DevFest Surabaya - Ngobrolin WEB
Tim Ngobrolin WEB bakal hadir di DevFest Surabaya! Teman-teman yang domisili Surabaya dan sekitarnya boleh yuk ikutan ha...
11 Feb 2026
Library Animasi - Ngobrolin WEB
🗣️🕸️ Selasa malam waktunya #NgobrolinWEB! Malam ini kita akan belajar tentang pustaka animasi untuk aplikasi web seper...
23 Sep 2025
Toolkit Modern - Ngobrolin WEB
🗣️🕸️ Selasa malam waktunya #ngobrolinWEB! Malam ini akan membahas tentang alat bantu modern seperti vitest, unjs, roll...