Ngobrolin WASM - Ngobrolin WEB

2:48Tapi pakai yang udah jadi, binary-nya, dicoba di web, dijalankan di web gitu.

2:53Tapi kalau mulai dari awal, di kompilasi itu belum.

2:57Mudah-mudahan nanti ada waktu, jadi kita bisa sharing-sharing lagi.

3:01Oke, jadi apa itu WASM?

3:05Mungkin kita mulai dari apa ya, assembly-nya sendiri. Apa itu assembly?

3:11Mungkin ada teman-teman di sini yang belajarnya otoridak seperti Eka ya.

3:15Yang tidak mendapatkan topik tentang assembly. / Nggak ngerti sama sekali apa itu. / Nggak ngerti sama sekali itu apa itu assembly gitu kan.

3:21Sampai baca ini ya, barusan waktu itu maksudnya pas liat WASM-WASM,

3:28baca artikel, ya baru tahu pas baca artikel itu.

3:31Tapi sebelum, kalau cuma belajar HTML, CSS, JavaScript, bahkan konsep-konsep programan yang umum,

3:40kan itu sebetulnya udah masuk high-level language ya.

3:43Jadi ya, sebelumnya sama sekali nggak ada konsep tentang assembly atau apa, binary.

3:50Binary, ya.

3:52Ada teman-teman dulu di kuliah, dapat nggak? / Dapat assembly itu, tapi saya nggak mau sebut umur,

3:59tapi waktu awal-awal itu belajar algoritma dan pemograman, terus kemudian sebelum masuk ke paskal,

4:09kita tuh ada dikasih assembly, bukan assembly, assembly.

4:16Ini saya masih ingat tuh sinteksnya call, goto, if else, ya.

4:22Semua sebanyak, ya ada.

4:26Bacanya itu kayak kita tuh menaruh, bener-bener kalau kayak simple-nya aja ya di PHP,

4:36kalau kita mau menambahkan sebuah bilangan, kita tuh cuma tinggal variable a ditambah dengan 1 tambah 1.

4:44Kalau kita di assembly tuh saya masih ingat tuh saya harus allocate memori, allocate address-nya,

4:56terus kemudian taruh value-nya, terus kemudian waktu saya mau jumlahkan itu,

5:02saya allocate dulu, terus ngambil dari address yang mana tadi,

5:06terus tambahkan baru nanti safe ulang di alokasi memori yang baru.

5:14Lebih tepatnya sebenar-benar step-by-step gitu, step-by-step.

5:20Jadi singkatnya assembly itu adalah bahasa yang paling low-level sebelum bahasa mesin 0.1.0.1.

5:28Dan dia bahasanya primitif, fiturnya sedikit, mungkin cuma ada tambah operasi matematika saja pun

5:35cuma ada beberapa gitu, nggak semua.

5:37Kalau kita mau kali, mau bagi itu kayaknya harus manual pake tambah, pake operasi yang lain.

5:41Jadi nggak. / Jangan bahas lagi soal floating point.

5:45Bisa pecah kepala soal floating point di assembly.

5:49Iya, jadi ya gitu lah kira-kira. Apa ini? / Ini kan. / Oh iya, bentuknya seperti ini.

5:55Jadi kita hanya bisa memindah-mindahkan variable, kemudian isinya itu cuma bisa ditambah.

6:06Kalau kita mau kali itu ya tambah, berapa kali gitu kan ditambah-tambah terus.

6:10Tapi di sini waktu saya belajar ini itu adalah dasar bagaimana memahami algoritma.

6:15Oh gitu? / Jadi benar-benar kayak mengerti algoritma itu dari sini saya tuh.

6:21Kan ada bahasa, / Perbedaannya gimana? / Belajar Alpro kan ada ibaratnya apa itu bahasa yang kayak bukan...

6:29Seudocode? / Seudocode, nah jadi Seudocode itu kan non-programming language. / Lenggut agnostik.

6:39Lenggut agnostik. / Iya, betul. Jadi dari Seudocode kita belajarnya ke assembly dan Pascal.

6:47Oh iya, unik juga ya. / Tapi sederhana banget, cuma kayak tambah-tambah kurang-kurang.

6:54Pokoknya mengerti dulu bagaimana alokasi di memory, baru saya ke Pascal.

6:59Jadi kalau teman-teman biasanya tahu low-level language itu C, C++ gitu ya, apa lagi?

7:05Pascal tadi ya, sudah disibutkan itu ini lebih low-level lagi.

7:11Lebih low-level daripada C dan C++. / C aja ada banyak loh. / Iya, dan betul.

7:19Dan si assembly ini, dia bergantung kepada jenis arsitektur prosesor.

7:29Kalau prosesornya, ya CPU. / Karena dia komunikasi langsung sama hardware ya? / Dengan mesin.

7:37Sama hardwarenya. / Dan bahkan konsep low-level language aja,

7:41maksudnya dulu-dulu pas pertama kali ya baca-baca artikel tentang web assembly atau semacamnya kan,

7:47suka nemu istilah low-level language.

7:50Nah, ini kan kalau nggak belajar dari awal, ini mungkin agak rancu kan.

7:56Low-level itu apakah maksudnya jelek atau sederhana atau gimana kan, padahal maksudnya bukan itu.

8:03Di sini yang dimaksud low itu kayak closer to the metal atau makin dekat dengan hardware itu dianggap low-level.

8:11Jadi abstraksi dari computer instruction set architecture atau komando-komando untuk mesin itu tidak banyak abstraksinya.

8:24Jadi sedekat mungkin dengan mesin itu disebut low-level. / Low-level.

8:30Semakin low-level bahasanya, semakin sulit kita pahami ya.

8:35Karena dekat dengan mesin, jauh dengan manusia kan.

8:39Itu kan kayak tadi tuh yang ada perbandingan assembly versus PHP atau JavaScript.

8:44Kalau tadi assembly language, apa sih mau menambahkan value variable A dan variable B aja kayak ribet banget kan?

8:53Harus move to, harus store variable value dimana, terus store dimana, terus ditambahin store dimana.

9:00Sedangkan kalau kita pakai PHP sama JavaScript, secara konsep walaupun syntaxnya bisa macem-macem, secara konsep kan dekat dengan bahasa manusia.

9:08Misalnya X sama dengan A tambah B itu kan kayak kita ngomong sama orang, sedangkan assembly kita ngomong sama mesin.

9:16Semakin rendah level bahasa pomograman, performanya semakin tinggi tapi semakin sulit dipahami manusia.

9:26Semakin tinggi level pomograman, semakin mudah dipahami manusia, tapi secara performance semakin jauh lah dari mesin.

9:33Karena dia harus melewati, mungkin kayak di-company kali ya, kayak semacam diterjemahkan di berbagai abstraction layer dan bahkan ini layer-layernya pun banyak nih.

9:46Kalau yang paling low itu machine code cuma 0 sama 1, 2. Kayaknya ini nggak realistis ya, expect manusia kita buat nulis ini langsung.

9:58Cuma berarti, cuma tetap ada ini bagian dari layer-nya. Lalu atasnya sedikit baru assembly language.

10:06Higher level dibanding ini, tapi masih dianggap low level language. Bahkan C pun yang selama ini.

10:16Selama ini aku nganggep sih sebagai low level language kan, tapi ternyata ini mid-level language.

10:22Oh, high level. Sudah lebih tinggi. Maksudnya C itu sudah lebih tinggi ya, sudah mid-level betul-betul.

10:29Menyebar tadi antara...

10:31High level kan.

10:32Jadi dia mungkin...

10:34Ada alok-alok memori, gue masih ingat tuh. Dia ada kodenya alok memori.

10:38Ya, memorinya harus kita benar-benar manage sendiri, nggak ada gearbase collector, jadi harus di-manage manual.

10:45Itu peringkat paling atas, maksudnya peringkat paling tinggi dari kelompok low level programming language ya.

10:53Yang menyebatkan dengan tingkat-tingkatnya atasnya C++ dan lain-lain.

10:59Betul. Belum lagi kita ngomongin tentang, ya, tentang ada bahasa yang menggunakan virtual machine seperti Java Virtual Machine,

11:09Erlang Virtual Machine, dan lain-lain. Ada juga yang interpreter, ada yang compile, gitu kan.

11:14Dan biasanya kalau...

11:18Biasanya si bahasa-bahasa yang high level itu dia bisa...

11:25Tujuan akhirnya itu bisa ke antara ke assembly atau ke C.

11:31Jadi kayak Python itu kan dia sebenarnya layer di atasnya C.

11:35PSP juga layer di atasnya dulu ada mod-mod itu kan C juga kan. Apa? Apache dan lain-lain kan.

11:43Jadi bahasa yang high level itu biasanya dia berdiri di atas bahasa-bahasa low level atau bahasa yang middle level.

11:51Nah, kalau V8 itu punya JavaScript runner, JavaScript interpreter itu pakai C++... C++ kan ya?

12:01Eh, pakai apa sih? C++ kan.

12:04Berarti kan dari JavaScript C++ dan C.

12:09C++ dan C itu sebenarnya kurang lebih satu level ya, menghasilkan binary yang sama.

12:17Karena C++ itu cuma nambahin OOP aja, Object Oriented Programming di bahasa C.

12:22Kalau C itu kan prosedural ya, kalau nggak salah ya, prosedural language.

12:27Jadi dia lumayan primitif, primitif. Bukan fungsional tapi prosedural.

12:34Berarti C++ itu buat memudahkan developer-nya, biar nulisnya enak gitu kan.

12:39Sebenarnya itu adalah bahasa yang sama kayak C, cuma dengan DX yang lebih baik berarti ya.

12:46Ya maksudnya lebih friendly lah, OOP kan. Enak maksudnya bisa bikin class dan lain-lain.

12:51Sama juga dengan kalau teman-teman ada yang tahu Objective C itu juga versi Object Oriented C yang dikembangkan oleh Apple.

13:02Yang akhirnya menjadi Swift sekarang.

13:05Dulu kan kalau mau bikin iOS app, Objective C.

13:09Objective C, C itu banyak ya. Ada Borlan C. Jadi tergantung kompilernya.

13:14Borlan C, ada Turbo C, Delphi. Delphi itu Borlan ya.

13:20Ada GCC kalau sekarang ya, GCC.

13:25GCC kan dari C ini kan. Dari Linux ya.

13:29Terus bukan. GCC? Unix?

13:33Kan, apa itu namanya, yang temannya Unix dan plus apa, terus jadi Linux.

13:41Apa itu? Unix dan?

13:43Ya itu kompilernya lah intinya, bukan-bukan.

13:46Oh bukan.

13:48Ya, ada Borlan, ada banyak ya.

13:54Karena ini semua sendiri, diatasnya ada yang itu library-library yang dibuat untuk supaya bisa jadi operating system.

14:03Maksudnya function-function, API-API, tambahan.

14:07Dan hampir semua OS bisa dibilang menggunakan bahasa pemograman C atau C++ ya.

14:13Termasuk juga V8 yang digunakan oleh JavaScript, salah satu runtimenya JavaScript.

14:19Nah istilah assembly muncul dari situ.

14:22Jadi ini adalah versi paling dekat ke mesin, dalam tanda kutip, untuk bisa diakses oleh web.

14:31Jadi dia formatnya binary, yang bisa dijalankan di web tanpa mengganggu thread utama dari web tersebut.

14:40Karena kan kalau web itu kan, JavaScript itu jalan di single thread ya.

14:44Ketika misalkan kita loading something, si web assembly ini berada di thread yang terpisah.

14:51Pasti UI-nya tidak terganggu.

14:54Dengan demikian, berarti ibaratnya web assembly ini adalah assembly yang berjalan diatas web,

15:02tetapi langsung bisa mengakses low level.

15:06Ya, low level itu tadi.

15:09Low level-nya, ini tergantung ya.

15:12Ya, mungkin kalau saya bisa simpulkan sedikit, assembly itu diambil gara-gara apa ya,

15:21jadi hampir semua bahasa terbuka untuk menargetkan web assembly sebagai target kompilasi.

15:30Kira-kira seperti itu. Makanya disebut sebagai assembly.

15:33Atau itu konsep yang sudah dipakai sebelumnya kelihatannya ya.

15:36Memang.

15:46Yang ini?

15:57Terus pola itu dipakai untuk JavaScript, dipasangkan dengan web assembly. Terus ada penjelasan lebih detailnya lagi.

16:07Scroll ke bawah.

16:12Bawah lagi.

16:16Nah, ini juga harus kita bahas nih. Nanti ya.

16:19Nah, nanti aja. Nah, konsepnya ini low level, assembly like language, blablabla.

16:26And provide language such as blablabla.

16:30Jadi, kelihatannya pakai konsep yang udah ada, assembly untuk menjembatani.

16:37Nah, ini kan berarti web assembly dibuat untuk menjembatani.

16:43Terus didesain untuk berjalan bersama JavaScript.

16:47Nah, yang tadi dibahas masa bisa skill-less kan.

16:52Jadi, JavaScript-nya jalan di main thread browser.

16:57Sementara web assembly-nya jalan sendiri, dia punya thread sendiri berarti ya.

17:03Gak mengganggu rendering, misalnya rendering UI yang biasa kita bahas soal performance.

17:09Misalnya untuk user interaction atau nge-click input, itu kan semua di handle main thread.

17:15Nah, ini berarti operasinya berjalan terpisahkan ya.

17:20Oh, iya. Ada petasan.

17:23Iya, ini pada petasan.

17:25Oh, lagi ada cara ya.

17:26Oke, ini yang menarik ya. Ada near native performance.

17:30Jadi, performance-nya luar biasa kencang.

17:34Dan bahasa yang bisa dikompilasi ke web assembly.

17:41Dimulai dari C++ dan Rust, dan kemudian belakangan muncul bahasa-bahasa dynamic dan high level

17:50seperti Java, Kotlin, Dart, Golang, dan lain-lain.

17:54Nanti juga kita akan bahas.

17:56Dan kalau mau disederhanakan, ini gak tahu bener atau salah ya.

18:01Kalau mau disederhanakan, seolah-olah kita bisa punya back-end tapi di browser.

18:04Kira-kira kayak gitu lah web assembly.

18:06Oh, menarik.

18:07Maksudnya cara lihat kayak gitu.

18:11Seolah-olah. Kenapa? Karena kalau dulu misalkan kita mau bikin seperti Figma lah.

18:18Figma adalah salah satu pengguna yang menggunakan assembly kan.

18:24Misalkan dulu Figma kan gak mungkin di web.

18:28Harus di desktop, aplikasi desktop kan.

18:31Nah sekarang dengan mudahnya di client, seolah-olah kita punya mesin engine-nya itu gak perlu di server.

18:41Jadi misalkan kalau yang saya contohkan waktu demo kemarin itu

18:45misalkan saya mau bikin aplikasi converter video.

18:49Kalau yang versi client server kan videonya kita upload ke server.

18:55Setelah di upload, di process, di konversi, kemudian hasil konversi videonya balik lagi ke client baru bisa di play kan.

19:02Baru bisa di download atau di running.

19:05Oh, berarti masih bisa mengcompile itu ya FFmpeg ya?

19:07FFmpeg, iya.

19:09Nah, FFmpeg itu bisa ditaro di browser sehingga gak ada tuh process upload ke server dulu.

19:19Jadi prosesnya semua dijalankan di sisi client.

19:22Jadi seolah-olah back-end yang konversi itu dipindahin ke client gitu, ke browser.

19:27Dan ada keunggulan, ada keunggulan lebih bagus lagi karena dia apa itu tadi closer to the metal lah.

19:35Maksudnya near native performance, performanya lebih baik ya.

19:38Kan sebelumnya nih kalau buat ya bisa dibilang akal-akalan atau maksudnya feature yang powerful kayak gitu kan.

19:46Sebelumnya orang suka nyoba ngelik itu dilakukan di service worker.

19:51Server, ya atau service worker.

19:54Terpisah, maksudnya dia suruh kerja sendiri.

19:57Pas udah selesai dibalikin semacam broadcast message ke main thread.

20:03Nah, tapi kan kalau cuma fetch data atau apa yang ringan, ya itu kan bisa di handle oleh service worker yang punya kesama.

20:12Ya bisa dibilang punya kesamaan dalam hal kita bisa nyuruh, kayak dari browser, bisa nyuruh suatu pekerjaan diproses di tempat lain.

20:21Untuk membebaskan main thread kesamanya itu.

20:24Tapi kan kalau, apa, untuk operasi yang berat atau butuh bahasa-bahasa yang seperti C atau C++,

20:32atau butuh performa yang bagus punya yang hal-hal yang kompleks dan berat, ya itu kayak Figma, Photoshop, dll.

20:38Nah, berarti itu kan kalau di service worker tetap aja bakal lambat dan kurang optimal, ya.

20:44Berarti di sini web assembly bisa jadi apa, bisa jadi solusi.

20:50Kelebihannya lagi, ketika file wasmnya sudah berhasil didownload di tahap awal, itu bahkan internet putus pun nggak masalah.

21:01Jadi kalau misalkan tadi client server...

21:03Ya karena servernya di situ, di browser.

21:05Betul. Kalau misalkan tadi client server ketika kita upload, misalkan baru 50% tiba-tiba internet putus,

21:11harus ulang lagi kan uploadnya kan.

21:14Begitu juga pas pada saat proses tiba-tiba internet mati nggak bisa download gitu.

21:18Tapi kalau web assembly ini, ketika di awal dia sudah loading, sudah selesai, itu internet putus, internet mati bisa dijalan secara offline.

21:27Nah, kelebihan yang lain adalah yang kepikiran, misalkan ada data yang sifatnya credential,

21:33yang tidak boleh di-upload ke server.

21:37Ya misalkan data KTP dan lain-lain, itu bisa menggunakan solusi web assembly-nya juga.

21:43Karena datanya nggak bakal lari kemana-mana di client aja.

21:46Cuman melihat kekurangannya adalah performa dari aplikasi kita itu sangat tergantung kepada mesin si user-nya.

21:57Kalau mesin user-nya kentang gitu ya, berarti jalannya lambat.

22:02Kalau dia cepat ya berarti.

22:04Another case yang saya pernah kerjakan dulu, itu menjalankan TensorFlow Lite.

22:15Jadi TensorFlow-nya di-compile, modelnya di-compile jadi web assembly.

22:20Terus kemudian supaya bisa real-time yang kayak di bandara itu kan.

22:26Tapi pakai web ya, kalau di bandara kan biasanya nggak tahu pakai apa, kayaknya pakai aplikasi.

22:30Kalau kita cuma tinggal monitor, terus kemudian bisa ngedetek suhu maybe, atau ngedetek wajah, face detection.

22:39Itu aplikasinya jalan di browser, bisa.

22:44Ini nggak perlu send ke server, terus detect, terus balik.

22:50Itu kan kelamaan gitu ya, kelamaan.

22:52Prosesnya lama, memakan waktu yang lama dan server-nya juga, kita harus maintain server-nya kan.

23:00Harus scaling server-nya, kalau user-nya udah banyak ya udah, kita harus gedein server-nya kan.

23:05Kalau ini kita bisa cheating dengan cara yang memanfaatkan mesin-mesin si client.

23:10Atau sejalan dengan ide-nya Ivan tadi juga, sekarang kan ada tuh yang baru muncul.

23:16Kita bakal bicarain sih tentang ini, last continuous model lama yang punya Facebook, Meta.

23:23Itu bisa jalankan dengan itu kan, di lokal kan, lama dan CPP.

23:28Itu kalau kita kompilasi ke web assembly, itu bisa langsung jalan di browser.

23:33Nggak perlu kayak check GPT kan, dia ke server dulu kan.

23:36Kalau ini jalannya di lokal lagi.

23:38Kita kalau misalnya punya chatbot yang untuk meindikan si client kita.

23:44Self-hostage itu tempatnya client.

23:46Self-hostage, data-nya nggak, dan data-nya tidak perlu ke server.

23:51Jadi kalau misalkan ada perusahaan-perusahaan yang curiga, "Wah data kita dipakai buat trending berikutnya nih."

23:56Atau dipakai di spying gitu kan, nah ini bisa jalan di lokal.

24:02Nah ini itu sih relevan banget, terutama di luar kan kayak privacy concern udah makin strictly regulated ya.

24:11Apa, regulasi atau hukum tentang privacy data kita disimpan di server yang di wilayah mana.

24:18Terus kayak apa, user berhak tahu data yang disimpan itu apa aja.

24:23Itu kan makin lama, makin ketat.

24:25Nah ini bisa jadi salah satu solusi.

24:28Jadi kalau tanya data-nya di mana ya, data-mu sendiri ya di mesin.

24:33Masing-masing.

24:35Masing-masing user data-nya ya di mesin mereka masing-masing.

24:41Ya, jadi walaupun si web assembly ini kayak dicanangkan atau digadangkan oleh Google,

24:47tapi sebenarnya kalau melihat sejarah, awalnya itu adalah sm.js.

24:54Itu keluarannya Mozilla awalnya.

24:58Kayaknya banyak ya kalau dari dulu awalnya dari Mozilla, malah waktu apa, terus berevolusi,

25:07terus tiba-tiba identik dengan Google atau Chrome, Chromium.

25:12Ya, Chromium, ini kan salah satunya.

25:14Was the first browser to support sm.js?

25:18Firefox berdua itu tahun berapa coba, ya ampun.

25:21It is under the name Odin Monkey, Chrome edit sm.js support in version 61.

25:29Jadi ya udah lumayan lama sebenarnya.

25:32Dulu saya ingat banget waktu Firefox, apa sm.js jalan di Firefox itu demo-nya itu Quake ya,

25:38kalau gak salah ya, game Quake bisa dijalankan di browser.

25:41Nah itu dulu, nah baru kemudian.

25:44Waduh 2013, udah 10 tahun lalu dong.

25:4710 tahun yang lalu, kita ketinggalan, kita ketinggalan gak juga sih.

25:52Nah itu dia cerita singkat tentang asalmu, asal kenapa dipakai istilah assembly dan apa itu web assembly.

26:02Jadi web assembly performa bagus, near native performance, terus flexible dalam artian

26:11kita bisa menggunakan bahasa apapun di luar JavaScript yang nantinya akan ditandemkan dengan JavaScript.

26:18Itu sisi menariknya dari web assembly.

26:21Dan dengan adanya opsi web assembly ini bisa banyak perubahan,

26:27kalau saya sebut perubahan pragmatik, perubahan business model dan lain-lain.

26:31Contohnya kalau misalkan sekarang ya ada Photoshop.

26:38Photoshop sekarang sudah bisa jalan di web kan.

26:45Kalau dulu kan Photoshop itu aplikasi desktop,

26:48kemudian kalau kita mau beli, kita harus beli, kemudian kita dapat serial number kan.

26:57Terus kita install lah gitu kan, kira-kira kayak gitu ya, dikasih CD kalau zaman dulu ya.

27:01Kalau sekarang mungkin tinggal download.

27:03Nah, si Photoshop ini business modelnya agak berubah sekarang.

27:08Dia pakai sistem subscription.

27:11Karena yang lama-kelamaan serial number ya kan.

27:14Kalau dulu, kalau di jobnya sih yang nge-train rental CD bajakan.

27:19Sudah bajakan di rental gitu ya.

27:22Serial numbernya ditulis aja di sleeve-nya atau pas.

27:27Nah, pertamanya gitu.

27:28Terus kan lama-lama ketahuan ya, nggak business gampang itu.

27:31Kan ada keygain. Ada keygain dan biasanya pas buka keygain itu ada musiknya gitu.

27:37Music MIDI gitu ya, music MIDI.

27:40Itu khas banget.

27:41Dan biasanya kadang malah artinya juga ASCII art sambil generate keygain.

27:45Jadi ya, maksudnya Adobe sender juga lah.

27:49Gue sekarang takut banget loh buka keygain.

27:51Gue kalau buka keygain tuh bukanya di virtual machine.

27:55Kalau dulu cuek ya.

27:57Oh, cuek. Orang windows-nya juga sama.

28:01Bajakan juga.

28:02Daripada kena virus brontox.

28:04Enggak.

28:05Dulu kenapa bajakan? Karena kita mau beli yang asli nggak bisa.

28:09Nggak ada akses kesana. Nggak ada yang jual.

28:12Nggak ada yang jual juga.

28:13Nggak ada yang jual.

28:14Apalagi itu.

28:15Mencari pemenaran.

28:16Itu lah jaman dulu.

28:17Padahal bisa Linux ya.

28:19Padahal bisa Linux.

28:20Jim.

28:21Jim.

28:22Anyway, jadi dengan adanya WebAssembly ini, Photoshop bisa dibuka di web.

28:28Dan dia bisa mengubah bisnis modelnya.

28:31Dan menariknya, Photoshop ini tidak menulis ulang apa yang sudah dilakukan selama berpuluh-puluh tahun dengan Photoshop desktop-nya.

28:38Dia pakai codebase yang hampir sama dikompilasi ke WebAssembly.

28:45Ya, bayangin berapa lama dan berapa model yang harus dikeluarin kalau rewrite semua dari awal.

28:51Sedikit side story.

28:54Pas saya ke Bangalore, pesawatnya yang sudah di-schedule itu.

29:00Saat sudah setelah di-schedule dan pagi-pagi berangkat, di sebelah saya itu adalah engineernya Adobe Illustrator.

29:13Dia lagi mau ke Bangalore juga? Iya, dia baru pulang honeymoon di Bali ceritanya.

29:22Dan dia sedang mau pulang ke Bangalore, mau lanjut kerja dan dia itu engineer Illustrator.

29:30Projek yang sedang dia kerjakan adalah meng-conversi Illustrator application ke web.

29:39Dan WebAssembly, dia cerita ya semuanya WebAssembly, ada modul-modulnya.

29:47Jadi intinya dia ambil tiket itu kerjanya modul-modul tertentu jadi WebAssembly modulnya.

29:53Jadi kayak WebAssembly kecil-kecil banyak, jadi tergantung yang mana, tools yang mana gitu.

30:00Di refactor aja ya, tetap ada butuh apa ya?

30:03Oh banyak, komplikasinya banyak, komplikasinya banyak. Gak semudah yang kita bayangkan.

30:09Gak semudah itu, komandan. Gak semudah itu, komandan.

30:12Gak semudah itu, komandan.

30:15Masih banyak, tapi core, tapi core codenya misalnya gini, algoritm.

30:22Contoh ya, kalau mau pakai pen atau apa yang mengubah pixel apa, kan core-nya algoritmnya sama.

30:29Namun saat mau di-convert ke WebAssembly, ada parameter-parameter yang perlu diubah.

30:39Dan setelah waktu diubah, parameternya gak kompatibel.

30:43Jadi dia harus rewrite sebagian, kayak gitu lah.

30:46Gak semudah itu sih.

30:48Tapi ya itulah, dan proyeknya lama loh, setahun juga proyeknya.

30:54Iya, tapi yang sisi menarik dari cerita tersebut adalah, dia tetap bekerja dengan bahasa yang dia kuasai, kan?

31:07Dia gak perlu belajar bahasa baru, atau dia gak perlu digantikan oleh developer front-end JavaScript yang harus menulis ulang si Hadoop.

31:14Oh dia C++ Hardcoder.

31:18Iya, maksudnya itu.

31:20Gak mengerti JavaScript sama sekali.

31:23Jadi orang-orang yang sudah ekspertis di sana, sudah biasa mengerjakan Adobe, Photoshop, Illustrator dan lain-lain, dia tetap ada kerjaan.

31:36Bukan tergantikan oleh front-end.

31:39Bukan tergantikan juga.

31:41Ya.

31:53Langsung di lay-off gitu ya.

32:03Berapa kali lipat programmer baru kan buat ngulis JavaScript front-end, dan ya itu dari segi waktu, dari segi biaya, kayak itu gak realistis sama sekali.

32:14Ya, jadi ya itulah kelebihan.

32:17Jadi kalau misalkan teman-teman punya software yang dulu jalan di desktop, yang masih digunakan, atau bahkan mungkin jalan di DOS gitu ya, yang udah gak ada lagi DOS juga, gak ada, yang ada emulatornya aja.

32:31Ya, bisa mungkin jadi konsiderasi buat di kombilasi ke WebAssembly, terus bisa jadi aplikasi web.

32:39Nah, terus kalau teman-teman nonton yang episode featuring Mas Thomas Steiner waktu itu, yang bahas legu app itu kan kasusnya juga sama kayak yang Photoshop ini.

32:54Mereka udah punya aplikasi native, ya C++ juga, ya itu kayak di-porting dan di-adjust untuk web dengan WebAssembly juga.

33:04Jadi kasusnya sama, kelihatannya penggunaan yang paling umum kayak gitu ya, untuk aplikasi kompleks, yang mostnya tergelong kompleksan, yang selama ini udah ada existing codebase di native, terus di kodenya pakai C++. Nah, butuh di-adjust untuk dijalani di web. Nah, itu use case yang paling umum kita lihat sekarang.

33:27Betul, kecuali Figma. Figma itu dari awal sudah WebAssembly dan C++.

33:32- Jadi dari awal mereka memang sudah targetnya. - Oh, karena dia tergelong baru ya?

33:36Ya, tergelong baru dan targetnya memang Web sih.

33:38Abis itu Figma dibeli Adobe dan sekarang Adobe sudah ada versi webnya. Jangan-jangan mereka belajar dari Figma. "Eh, ajarin WebAssembly dong."

33:50- Ya kan kalau perusahaan aksesisi itu kan buat dapetin programmer-nya? - Iya, betul.

33:56Buat dapetin tim developer-nya.

33:58Dari pada mereka reset lagi dari awal kan mending mereka manfaatkan.

34:02Yang udah proven.

34:04Betul, yang udah punya pengalaman.

34:11Dan kenapa WebAssembly muncul di I/O Extended? Karena dengan adanya ini proposal GearBase Collector yang sudah didukung oleh WebAssembly,

34:28bahasa-bahasa yang tadinya belum terlalu optimal di kompilasi ke WebAssembly sekarang sudah bisa.

34:36Bisa jalan.

34:38Iya, kalau dulu kan yang paling, mungkin udah banyak bahasa yang menargetkan WebAssembly tapi tidak optimal.

34:44Yang paling optimal itu CC++ dan Rust karena mereka tidak menggunakan GearBase Collector.

34:48Nah, dengan adanya proposal ini, bahasa-bahasa yang menggunakan GearBase Collector seperti Go, Kotlin, Java, Swift dan lain-lain sudah mulai bisa.

35:03Ini yang bikin excited, salah satunya kita bisa jalanin Swift, bahasa pemrograman yang tadinya eksklusif di Apple Ecosystem.

35:13Apa? Apple?

35:15Iya, sekarang sudah bisa jalan di web.

35:17Wow.

35:19Input number, 80.

35:21FishBus ditambah sama...

35:25Apa nih? Alphibonacci.

35:31By the way, gue mau demo-in sesuatu yang keren juga nih.

35:34Boleh dong.

35:36Pertama, gue pindahin dulu ke sini.

35:40Terus, present.

35:43Share.

35:47Ya, enter sekalian aja biar lebih gampang.

35:49Sudah. Jadi WordPress juga sudah ada WebAssembly-nya namanya WordPress Playground.

36:01Jadi, kan kalau jalanin WordPress itu kan biasanya kan butuh local server.

36:07XAMPP.

36:09Web Server, jaman dulu XAMPP gitu ya.

36:13Pertama kali lagi recoding pasti itu.

36:17Butuh MySQL, terus butuh PHP, Runtime, ya.

36:24Kalau sekarang kita nggak perlu, jadi contohnya ini ya, ini Playground-nya kita tinggal klik.

36:32Maka ini sudah jalan di browser dengan PHP 8.0, preparing WordPress.

36:38Ini sudah WebAssembly ceritanya.

36:40Dan kenapa dia rusak saya tidak tahu.

36:43Ada server-nya berarti?

36:45Tetap ada server-nya.

36:47Gak ada, nggak pakai server.

36:49Di lokal semua ya.

36:51Mungkin gue bisa rubah, mungkin ada masalah.

36:54Ya, maksudnya server-nya ya di browser itu berarti kan ya.

36:56Di browser lah, di browser.

36:58Itu tadi yang saya jelaskan, back-end-nya itu masuk ke browser.

37:02Jadi cocok banget ini.

37:05Kalau misalnya kita mau ngetes atau mau demo-in, mau ngetes plugin.

37:09Plugin, ya.

37:11Itu nggak perlu install-install, nggak perlu ribet-ribet ya.

37:14Nggak perlu takut rusak ya.

37:16Kalau rusak ya tinggal refresh, ulang semua gitu ya.

37:19Oke, teknologinya apa teman-teman?

37:22Nah, pertama dia pakai PHP Wasm.

37:25Jadi PHP pun sudah bisa jalan di WebAssembly.

37:29Ini namanya PHP Wasm.

37:32Jadi bisa pakai ini.

37:35Gue belum ngulik banyak, tetapi...

37:39konsepnya kita bisa membundling aplikasi kita dan menjalankan pakai PHP Wasm ini.

37:49Untuk menjalankan kode PHP kita di atas browser.

37:53That's it.

37:55Itu simple-nya, ya.

37:57Tentunya ada limitasi-limitasi karena pertama...

38:01limitasi yang utama itu dia jalannya di virtual file system.

38:07Jadi punya kontainer sendiri.

38:11Jadi nggak bisa akses file system dari si...

38:15Jadi nggak bisa meminta kita akses local file system.

38:18Nah, itu bahasanya.

38:20Oke.

38:22Saya sering banget pakai namanya WordPress Playground.

38:26Itu namanya WP Now, ya.

38:28Jadi kalau misalnya saya mau ngetes plugin, mau ngerjain sesuatu.

38:34Terutama menjalankan plugin di CI.

38:39Kan kalau install server-nya sampai Nginx kan kegedean, ya.

38:44Saya sudah pakai WP Now.

38:48Cara pakainya simple banget.

38:51Tinggal pakai npm install global.

38:53Contoh saya punya WP Package.

38:55Oh, itu bisa diinstall jadi global package, ya?

38:58Ya, betul.

39:00Saya punya plugin namanya WP Passkey, ya kan.

39:05Terus kemudian saya cukup tinggal WP Start Now.

39:10WP-Now Start.

39:14PHP-nya kebetulan karena plugin saya harus pakai 81.

39:17Saya pakai 81.

39:18Kalau nggak dia by default 80.

39:20Saya jalankan.

39:22And...

39:24Tadah, dia sudah langsung jalan.

39:26Tanpa perlu install bla-bla-bla.

39:28Tidak perlu pakai was...

39:31XMPP.

39:32Server?

39:33Server-nya nggak ada.

39:35Dia langsung di browser.

39:37Database-nya pakai SQLite.

39:41Mantap.

39:43Plugin yang saya buat tadi.

39:45Karena saya jalankan di dalam folder plugin.

39:48Foldernya plugin saya, passkey.

39:51Dia otomatis install passkey-nya saya sudah deactivated.

39:54Saya nggak ngapa-ngapa ini.

39:55Ini baru fresh install ini ceritanya.

39:57Dan tentunya ininya jalan seperti biasa.

40:01Saya register passkey saya.

40:03Sorry.

40:06Continue.

40:08Dan install passkey.

40:10Seperti biasa sudah terinstall.

40:13Saya lockout.

40:16Dan saya pakai passkey untuk login.

40:21And...

40:23Tadah, selesai.

40:25Jadi...

40:27Development WordPress-nya sekarang itu sudah canggih.

40:31Sudah simple.

40:33Saya nggak perlu ngapa-ngapain.

40:34Udah, tinggal...

40:35Localhost saya udah jalan.

40:37Cukup install.

40:39Jadi pakai...

40:40Enak banget.

40:41Dan itu teknologinya sama seperti...

40:44Kalau yang tadi kan ini...

40:46Jalan di dalam browser.

40:47Kalau itu ini jalannya pakai PHP.

40:49Di localhost.

40:50PHP Wasm.

40:52Dia tetap pakai PHP Wasm.

40:54Di browser.

40:55Jadi kalau kita mau develop WordPress plugin...

41:02Dan terus bikin codec atau tutorial...

41:05Atau semacamnya.

41:06Udah, pakai itu kayak solusi banget ya.

41:10Men-streamline setup-nya juga kan.

41:13Soalnya kalau misalnya...

41:15Apalah, it works on my machine gitu.

41:17Masing-masing versi apasihnya.

41:21Atau lain-lain ya kan.

41:22Kalau ini kan, kalau untuk apa?

41:24Kalau untuk sample atau demo, tutorial, code lab...

41:27Atau developing kan bisa...

41:31Ya itu tadi misalnya suruh jalanin pakai PHP 8.1.

41:35Sisanya, setting-nya semua sama.

41:38Oke, betul-betul.

41:40Sedikit ralat, sorry tadi.

41:42Saya mau sharing screen lagi.

41:44Sedikit ralat yang tadi saya katakan.

41:45Kalau yang tadi WP...

41:48Cukup di-share screen.

41:49Kalau yang tadi WP Playground...

41:52Itu jalan di atas browser.

41:55Tetap pakai PHP Wasm.

41:57Kalau yang tadi yang localhost, dia jalan di Node.js.

42:00Node.js.

42:02Di Node.js dia jalan di Node.js.

42:05Yes, di Node.js.

42:07Tetapi Wasm.

42:09Tetapi Wasm.

42:10Jadi bisa jalan di browser dan juga di Node.js.

42:14Jadi yang WP Now tadi...

42:17WP Now yang saya pakai tadi itu jalan di Node.js.

42:20Jadi kalau jalan di Node.js...

42:23Bisa pakai...

42:25Tentu bisa access file system seperti biasa.

42:29Karena dia di atas layer Node.js.

42:32Kalau di atas layernya browser...

42:35Beda lagi permission-permissionnya.

42:38Menarik.

42:40Jadi kalau di-refresh, nggak ilang.

42:42Yes.

42:44- Ngomongin Node.js. - Nggak reboot baru.

42:47Nggak reboot. Apa?

42:49Nggak reload baru juga ya.

42:51Yes.

42:52StackBits juga...

42:54Apa?

42:56Membuat sebuah teknologi namanya Web Containers.

42:59- Ini juga... - Nah, kita bahas ini...

43:01Di salah satu atas itu pertama ya.

43:03Apa kita bisa bahas?

43:05Tapi kita bahas VidCon, kayaknya ya.

43:07Kalau nggak salah.

43:08Ya, betul.

43:09Jadi mereka ngisi di VidCon.

43:11Jadi...

43:13Mereka announce ini.

43:15Mereka announce ini di 2021 ya.

43:17Kalau nggak salah.

43:19Ya, 2021.

43:21Jadi mereka menggunakan teknologi...

43:24Itu juga, WebAssembly juga.

43:26Nah, Web Containers ini apa?

43:28Jadi kita bisa punya...

43:31Environment Node.js...

43:34Dalam waktu singkat...

43:36Online...

43:38Dengan satu klik aja.

43:40Terus sudah ada VS Code-nya di sana.

43:42Jadi nggak kayak...

43:44Nggak kayak code sandbox kan.

43:46Kita install NPM-nya kan harus lewat itu ya.

43:48Harus lewat yang disebelah kiri itu.

43:50Lagin-lagin gitu ya.

43:52Kalau ini dia udah NPM install aja.

43:54Jadi udah kayak OS.

43:56Ada di dalam browser.

43:58Gitu ya.

44:00Dan itu jalannya di client ya.

44:02Client-side.

44:03Itu jalannya di client.

44:05Disinformer are not running on remote servers.

44:07Kalau...

44:09Kalau nggak salah mereka pakai server kan.

44:12Ada Docker di server.

44:14Kita jalanin di browser.

44:16Ngirim data, balik lagi.

44:18Terus-terus kan.

44:20Kalau ini, Fully di client.

44:22Kita coba jalanin...

44:24Jadi performanya lebih bagus juga ya.

44:26Kita lihat seberapa cepat atau seberapa lambat.

44:28Oh ya.

44:30WebAssembly itu...

44:32Jalannya di atas JavaScript ya.

44:34Meskipun bahasanya Web ya.

44:36Jadi tetap bisa jalan di Node.js.

44:38Nah ini adalah...

44:40Node.js environment.

44:42Iya.

44:44Ini kalau kita lihat slash.

44:46Ya, seperti...

44:48Walaupun mungkin...

44:50Kalau kita mau upload kesana...

44:52Mungkin nggak bisa ya.

44:54Karena ada samebox dan lain-lain.

44:56Tetap seperti yang saya bilang tadi.

44:58Dia pakai virtual file system.

45:00Kalau kita mau copy...

45:02Make dir...

45:04Cuma sedikit ya.

45:06Nggak semuanya gitu.

45:08Nggak full.

45:10Nggak full OS.

45:12Tapi kita bisa npm install.

45:14Cukup representatif lah.

45:16Maksudnya resembling...

45:18Local environment kita kan.

45:20Ya betul.

45:22Express misalkan.

45:24Ya udah dia npm install aja.

45:26Di OS atau seperti di localhost kita.

45:28Kayak kita di command line...

45:30Di terminal kita sendiri kan.

45:32Ngeteknya kayak gitu. Yang muncul yang terjadi kayak gitu.

45:34Itu github juga pakai ini kan.

45:36Github.dev.

45:38Dia pakai linux apa sih ini? Coba.

45:40Lsb_release.

45:42Lsb_release.

45:44Lsb_release.

45:46Lsb_release.

45:48Lsb_release.

45:50Nggak ada.

45:52Nggak ada.

45:54Pake apa ini?

45:56Pake ini bisa nggak ya? APT.

45:58Sudo.

46:02Bisa nggak ya? Nggak bisa kayaknya.

46:04Oh nggak bisa. DSA apa ini?

46:06JavaScript Shell.

46:08Iya. Iya bener.

46:10Saya penasaran sama...

46:12WebAssembly-nya yang dipakai apa?

46:14Kita bisa cek di sini ya.

46:16Di inspect element ya.

46:18Ini ada wasm.

46:20Oh harus refresh nggak?

46:22Refresh.

46:24Oh nggak bisa refresh.

46:26Kontrolnya.

46:28Di capture kita punya key binding.

46:32Oh iya key binding-nya.

46:34Sama aplikasi.

46:36Ini file wasm-nya.

46:44Ini extensionnya dot wasm ini.

46:46Itu adalah binary.

46:48Kalau temen-temen download, lihat isinya ya.

46:50Isinya binary text gitu.

46:52C01.01 gitu.

46:54Nggak jelas.

46:56Bahasa wasm sendiri.

46:58Jadi kayak assembly-lah.

47:00Kayak assembly.

47:02Bukan bahasa machine-nya.

47:04Yang bisa...

47:06Transpile itu browser ya berarti?

47:08Browser atau implement semacamnya.

47:10Ya itu sih...

47:12Web...

47:14Kalau itu yang...

47:16Yang bisa mobile untuk bisa call

47:18Wasm itu ya si asm.js tadi.

47:22Yes asm.js yang sudah ditanamkan

47:24di browser sekarang ya.

47:26Wasm oniguruma.

47:28Kok kedai Onig?

47:30Itu kenapa silahkanan

47:32kedai Onig.

47:34Onig wasm.

47:36Oniguruma in wasm. Apa ini Oniguruma?

47:42Kayak bukan itu deh.

47:44Kayaknya bukan.

47:46Ya anyway.

47:50Jadi sekarang kita sudah

47:52sudah bisa punya seolah-olah

47:54di lokal tapi di web.

47:56Ini lokal.

47:58Ini juga VSCode.

48:00Ada nggak extension-extension

48:02yang kita...

48:04Bisa ya?

48:06Mana?

48:08Enggak ya.

48:10Github juga punya

48:12persis kayak gini.

48:14Setara serupa pakai webpaint

48:16pakai container juga.

48:18Dan kita bisa punya

48:20hampir semua yang jalan di VSCode.

48:22Kalau Github kayaknya yang

48:24Github itu bukan...

48:26Client server dia.

48:28Belum pakai wasm.

48:30Oh nggak pakai wasm ya?

48:32Belum kayaknya.

48:34Kan Github ada dua soalnya

48:36github.dev, ada yang

48:38Codespace.

48:40Kayaknya dia masih pakai teknologi docker

48:42di sisi server. Kayaknya ya.

48:44Koreksi kalau salah.

48:48Seperti tadi

48:50baik itu

48:52stackbleach

48:54ataupun tadi WordPress.

48:56Kalau teman-teman misalkan mau jalanin workshop

48:58itu udah enak banget.

49:00Apa yang perlu diinstall nih?

49:02Yaudah tinggal klik, jalan semuanya.

49:04Buka browser.

49:06Yang penting brosernya mendukung

49:08wasm yang sekarang semua browser

49:10modern sudah dukung.

49:12Yaudah tinggal kita kasih link.

49:14Tinggal diklik dari web.

49:16Selama brosernya sudah dukung

49:18dia sudah bisa ikutin

49:20workshop kita.

49:22Semakin gampang sekarang.

49:24Dan semakin gampang juga

49:28maksudnya kalau dulu kan

49:30misalkan kita mau siapin

49:32kayak environment seperti itu

49:34kita harus bikin di server

49:36mana gitu kan.

49:38Kan ada service seperti clock9nya

49:40AWS atau workspace

49:42di GCP.

49:44Itu kan browser

49:46code editor yang ada di

49:48IDX kan baru, yang sebelum itu ya

49:50workspace ya kalau gak salah ya namanya.

49:52Itu kita harus

49:54workspace betul workspace.

49:56Kita harus diayain server

49:58harus bikin server kan, harus berbayar.

50:00Kalau ini kan di lokal ya, ini gak tahu nih

50:02stackbleach ini berbayar atau enggak.

50:04Gue lupa matiin

50:06gcloud workspace

50:08terus kan ada ya biayanya.

50:10Itu paling

50:12bikin parno tuh sama GitHub

50:14juga gitu kan.

50:16Ada free tiernya sih.

50:18Kalau kita code spaces gak aktif

50:2020 menit dia sat down.

50:22Oh ya bagus ya.

50:24Nah ini ada yang menarik

50:28juga tadi ngomongin soal

50:30Adobe dan ternyata Adobe juga

50:32memanfaatkan machine learning ya.

50:34TensorFlow.js

50:36Sebenernya mirip kayak yang dibahas

50:38Ivan di awal banget tadi.

50:40Sebenernya itu mirip

50:42cuma mereka pakainya Adobe

50:44Photoshop untuk object detection.

50:46Nah jadi apa

50:48membantu

50:50itu mereka di dalam browser

50:52untuk object selection sorry

50:54object selection tool.

50:56Pakainya TensorFlow.js

50:58Nah cuma intinya sih

51:00tadi udah baca nih

51:02artikel ini sekilas kayaknya

51:04si TensorFlow.js

51:06juga kan jalannya di browser. Sedangkan

51:08si Photoshopnya ada

51:10Wasm juga. Jadi sebelumnya

51:12kayak gak play nice

51:14with each other gitu loh kayak gak bisa.

51:16Kayak gak compatible. Buat jalan barengnya

51:18tuh sulit. Nah terus

51:20mereka bisa cari cara

51:22biar Wasmnya

51:24kode core

51:26Photoshop yang

51:28dari Wasm bisa

51:30berkomunikasi dengan TensorFlow.js

51:32yang jalan di browser.

51:34Cuma detailnya sebetulnya

51:36apa tadi karena baca sekilas

51:38yang belum terlalu

51:40paham. Coba ayo kita baca sama-sama.

51:42Ini ini. To tackle this

51:44challenge, first Google and Adobe

51:46collaborated to bring proxying API

51:48to MScripten.

51:50Then they use toolchain to compile

51:52with assembly that is LLVM.

51:54Berarti ada

51:56compiler lagi.

51:58Ada proxying.

52:00Bukan, bukan ada

52:02proxy. Middleman.

52:04Ada middleman, proxy.

52:06Ya, jadi

52:08karena TensorFlow.jsnya tidak jalan

52:10di Wasm kan?

52:12Sementara si

52:14Photoshopnya jalan di Wasm.

52:16Jadi dari

52:18JavaScript, contact ke

52:20TensorFlow.js, balik ke

52:22JavaScript baru dilempar ke

52:24Photoshop, Wasm.

52:26Jadi jalannya dua kali.

52:28Tapi jadi ide yang menarik

52:32juga ya, kalau yang

52:34si TensorFlow

52:36sudah bisa dikompilasi ke Wasm

52:38seperti yang tadi saya juga contohkan.

52:40Misalkan

52:42LLM model seperti

52:44lama, bisa

52:46jalan di browser.

52:48Yang menarik adalah

52:50kalau misalkan teman-teman pakai

52:52chat-gpt, chat-gpt kalau nggak ada internet nggak jalan kan?

52:54Karena dia di server kan?

52:56Kalau ini bisa gitu.

52:58Karena jalannya di browser selama udah

53:00download, samalah kayak jaman

53:02dulu kita

53:04mau buka file Flash.

53:06Download dulu ya.

53:08loading dulu.

53:10Setelah selesai udah nggak perlu koneksi

53:12internet pun bisa.

53:14Kecuali di file

53:16atau di aplikasi kita membutuhkan

53:18koneksi internet. Misalkan kita save dalam

53:20tiap 5 detik kita save file.

53:22Kita save data lah.

53:24Dia save data ke server.

53:26Kita bisa-bisa

53:28lebih bikin rich application kayak

53:30PWA gitu ya.

53:32Ada web assembly-nya juga.

53:34Kayak Vigma lah ya.

53:36PWA juga kan.

53:38Betul.

53:40Web assembly ini bisa

53:42next step lagi.

53:44Kalau PWA kita udah pakai service worker,

53:46udah di caching, udah bisa

53:48offline.

53:50Apa lagi yang belum? Mungkin ada

53:52proses. Kalau misalkan offline mode nih.

53:54Tapi ada sesuatu yang diproses di server.

53:56Ya nggak bisa. Kan harus koneksi.

53:58Walaupun tidak

54:00404 atau tidak 500.

54:02Karena servernya

54:04mati atau koneksi

54:06mati.

54:08Bikin CapCut

54:10tapi pakai PWA

54:12contohnya.

54:14CapCutnya ada di browser?

54:16Ada ya. Tapi PWA

54:18nggak.

54:20Lagi di jalan

54:22pakai CapCut tapi

54:24browser.

54:26Contohnya.

54:28CapCut itu ada.

54:30Versi webnya. Cuman saya belum pernah login.

54:32Karena nggak punya account.

54:34Biasanya pakainya di Windows.

54:36Edit video online.

54:38Oh bisa.

54:40Udah duluan deh.

54:42Tapi kalau belum. Maksudnya kalau dia

54:44belum pakai kayak Wasm atau

54:46semacamnya lah. Misalnya service worker

54:48buat handle pas offline.

54:50Ini semua langsung ke server ya.

54:52Kalau misalnya kita edit video

54:54koneksinya jelek ya putus.

54:56Udah kan ilang kan.

54:58Kita bisa set on offline kan di sini.

55:00Gimana caranya? Ah gue lupa.

55:02Ada di deftol untuk buat offline.

55:04Di sini.

55:06Ini.

55:08Click aja.

55:10Coba.

55:12Ini udah offline.

55:14Terus kita buat text ya.

55:16Kalau refresh mati kali ya.

55:18Ininya mati.

55:20Oh iya kan. Nah kalau itu kan

55:22harus nge-fetch templatenya kan.

55:24Mungkin ininya tetap aman. Nggak mati kan.

55:26Yang di sini nggak masalah kan.

55:28Gitu.

55:30Mayan.

55:32Oke.

55:34Nah.

55:38Buat teman-teman yang

55:40penasaran mau lihat

55:42contoh lain. Saya sempat buat

55:44contoh kode juga.

55:46Contohnya yang tadi saya ceritakan.

55:48Di media kalau di server.

55:50Ini dia bisa konversi ke server.

55:52Prosesnya berada di server.

55:54FFmpegnya ya.

55:56Contohnya disini misalkan.

55:58Loh kok ada foto Ivan.

56:00Loh.

56:02Oh nggak kelihatan. Ya. Ini saya

56:04upload file mp4. Nanti dia

56:06di konversi menjadi file

56:08webm.

56:10Itu server biasa ya?

56:16Ini server. Ini server.

56:18Ya.

56:20Ya. Pakai express.

56:22Terus FFmpegnya jalan di server.

56:24Tapi kalau yang

56:26klien. Nah ini

56:28murni jalan di klien.

56:30Jadi saya

56:32dengan file yang sama.

56:34Memang mungkin jalannya agak lebih lambat.

56:36Tergantung si apa?

56:38Tergantung kecepatan dari

56:40mesin kita.

56:42Tapi di konsol ini kelihatan.

56:44Tidak hanya jalan di sisi

56:46klien. Lokal.

56:48Lokal. Dan ini ketika dia

56:50lagi jalan tiba-tiba internet mati.

56:52Ya udah mati aja. Gak apa-apa. Ini

56:54offline.

56:56Nah itu emang lagi mati.

56:58Iya. Udah ada cache-nya ternyata ya.

57:00Tapi tetap jalan.

57:02Ya. Hasilnya memang agak lebih

57:04lama.

57:06Nah. 31 detik. Tadi 5 detik

57:08jauh ya. Karena kan memang

57:10server diperuntukan untuk melakukan

57:12proses-proses yang berat itu ya.

57:14Tapi ini

57:16murni jalan di sisi

57:18klien.

57:20Kalau mau lihat kodenya bisa ke github.

57:22Bisa dilihat-lihat.

57:24Contohnya.

57:26Nah. Si FFmpeg-nya itu

57:28programnya itu sebetulnya

57:30dari apa? Program

57:32binary ya. Kayak download dari

57:34itu. Binary. Download dari

57:36ini.

57:38Saya download ini. FFmpeg

57:40core.wasm.

57:42Jadi. Dikodenya

57:44sendiri.

57:46Bukan.

57:48Ini yang server. Yang klien

57:50ada di sini.

57:52Djs.

57:54Kemudian klien.js. Nah ini.

57:56Pertama.

57:58Kita import dari

58:00FFmpeg Global.

58:02Apa namanya?

58:04Fungsi create FFmpeg sama

58:06fetch file.

58:08FFmpeg gue bilang itu dari mana

58:10datangnya? Datangnya dari

58:12index.html.

58:14Klien.html.

58:16File wasm ya?

58:18Belum.

58:20Ini. Dari sini.

58:22Ada sebuah

58:24file namanya. Jadi ada javascriptnya ya?

58:26Ada yang udah bikin porting

58:28javascriptnya. Iya. Ambil

58:30dari ini.

58:32FFmpeg.wasm.

58:34Ada satu project namanya

58:36FFmpeg.wasm.

58:38Download disini.

58:40Ini yang udah dikompilasi.

58:42Jadi udah saya.

58:44Seperti yang tadi kita

58:46bicara kan di awal. Saya cuman menggunakan.

58:48Tidak melakukan kompilasi.

58:50Ini udah dikompilasi. Karena FFmpeg

58:52awalnya kan bahasanya. Bahasa low level ya.

58:54Si objektif si.

58:56Nah. Iya. Berarti itu kan

58:58FFmpeg yang versisi

59:00sampai jadi wasm gitu.

59:02Itu berarti ada yang harus bikin dulu. Yang bikin.

59:04Iya. Si project ini yang bikinin.

59:06Kayak si engineer yang

59:08apa? Si Illustrator tadi.

59:10Betul. Iya.

59:12Jadi ini udah jadi. Maksudnya importnya tetep

59:14gak seberat kalau harus

59:16tulis tulang dari awal. Kayak cuman dia

59:18meng-adjust aja.

59:20Ya. Gak aja sih. Cuman maksudnya

59:22apa? Gak dari 0 lah. Minimalnya.

59:24Sudah ada NPM nya juga. Kalau mau pakai

59:26NPM. Karena saya pakai manual.

59:28Pakai vanilla. Jadi saya pakai gini aja.

59:30Ya.

59:32Gak di import gitu. Terus nanti

59:34di client JS nya udah ada

59:36global variable namanya

59:38FFmpeg.

59:40Itu kan. Terus kita ambil

59:42dua fungsi. Yaitu

59:44create FFmpeg sama face file.

59:46Terus kita bikin instance nya.

59:48Saya taro

59:50FFmpeg core nya disini karena cukup besar.

59:52Jadi biar di satu server aja.

59:54Terus ini karena vanilla

59:56ya harus di displeinan.

59:58Di main-mainin lah ya.

1:00:00Intinya

1:00:02ada disini. Pada saat kita

1:00:04klik convert. Nah ini

1:00:06yang kita lakukan adalah

1:00:08ambil file nya.

1:00:10Terus dirite file dengan

1:00:12FFmpeg.fs.

1:00:14Terus ini dirun dengan

1:00:16berbagai flag.

1:00:18Itulah yang akan FFmpeg.

1:00:20Inilah yang sebenarnya

1:00:22dia sebenarnya manggil JavaScript.

1:00:24Tapi itu bridge ke Wasm.

1:00:26Betul. Dia manggil

1:00:28binary file.

1:00:30Ini adalah instance dari

1:00:32yang kita buat di atas. Nah ini yang dia

1:00:34interface untuk ke

1:00:36FFmpeg yang di sisi server.

1:00:38Yang kita sudah taro di browser juga.

1:00:40Terus kita bisa

1:00:42run seperti biasa dengan

1:00:44berbagai flag nya. Sampai akhirnya

1:00:46jadi output nya adalah

1:00:48download.webm.

1:00:50Terus dari download.webm

1:00:52ini kita read

1:00:54untuk dapatkan datanya.

1:00:56Kita taro di video

1:00:58tag dengan

1:01:00url create object yang

1:01:02sudah kita bahas di beberapa episode yang lalu.

1:01:04Data buffer

1:01:06isinya adalah si video

1:01:08tadi, tipenya webm.

1:01:10Stream ya.

1:01:12Akhirnya

1:01:14jadilah ini.

1:01:16Nah ini menarikkan

1:01:20kalau dilihat kode ini.

1:01:22Ini kan semua JavaScript ya.

1:01:24Web developer biasa

1:01:26yang gak usah ngerti

1:01:28itu semua tadi gak usah ngerti C++

1:01:30atau apapun. Ini kan

1:01:32nulisnya kayak JavaScript biasa aja.

1:01:34Kalau kita sehari-hari

1:01:36kita sehari-hari kerja

1:01:38pakai bahasa-bahasa web

1:01:40ini kan udah pasti bisa

1:01:42langsung, pasti langsung bisa

1:01:44tanpa harus mempelajari

1:01:46hal-hal tambahan. Nah tapi

1:01:48ini dengan syarat udah

1:01:50ada orang lain kayak

1:01:52di kasus ini kan pakai readymade

1:01:54ffmpeg wasm tadi

1:01:56berarti tetep perlu

1:01:58pihak lain atau orang lain

1:02:00atau mungkin teman kerja

1:02:02yang mengkontet

1:02:04yang ngerjain ini dulu kan

1:02:06yang bikin ini dulu.

1:02:08Kerja beratnya sebenarnya disini.

1:02:10Itu tadi kan tinggal konsum

1:02:12udah tinggal nulis-nulis.

1:02:14Nah terus

1:02:16berarti pertanyaan selanjutnya, kalau kita

1:02:18pengen kita sebagai web developer

1:02:20pengen bikin ini nih

1:02:22si apa, kayak

1:02:24ffmpeg wasm atau kayak si

1:02:26itu Adobe engineer tadi, berarti

1:02:28kita wajib harus

1:02:30bisa bahasa low-level yang mau

1:02:32di interface ini kan.

1:02:34Ya, nggak low-level sih

1:02:36tapi cukup ngerti

1:02:38kayak si RAS

1:02:40terus pakai M scripten

1:02:42untuk ngumpile.

1:02:44Ya betul. Jadi nggak

1:02:46terlalu low-level juga. Contohnya

1:02:48misalkan goleng, goleng itu udah bisa

1:02:50secara netif dikompilasi ke wasm.

1:02:52Jadi dengan

1:02:54flagter tentu langsung bisa.

1:02:56Kita masih harus pakai M scripten kali ya?

1:02:58Enggak, goleng udah

1:03:00nggak perlu.

1:03:02Udah punya sendiri.

1:03:04Nah, nih, pakai ini nih.

1:03:06Go architecture sama dengan wasm.

1:03:08Iya.

1:03:10Tapi sebenarnya didalamnya itu

1:03:12sudah pakai M scripten kali?

1:03:14Mungkin juga, kalau itu saya nggak tahu.

1:03:16Yang dia wasm begitu dikompilasi.

1:03:18Kita kayaknya harus bikin kayak sepuluh ini.

1:03:20Wasm ini penyakit banget ya.

1:03:22Arkitekturnya langsung wasm ya.

1:03:24Oh iya, iya.

1:03:26Gue pernah inget tuh apa kemarin ya.

1:03:28Bisa pakai.

1:03:30Kenapa nggak kelihatan ya?

1:03:32Saya lihat disini.

1:03:34Apa ya kemarin?

1:03:36Ini bisa

1:03:38flagnya wasm gitu tinggal.

1:03:40Jadi udah langsung jadi dot wasm.

1:03:42Kayak Python juga bisa.

1:03:44Nah ini nih, kayak gini nih.

1:03:46Go os.js

1:03:48Go architecture wasm.

1:03:50Go build min.o. Apa file-nya wasm?

1:03:52That's it.

1:03:54Kita define entry point.

1:03:56Kita menggunakan go.

1:03:58Maksudnya ada wasm nggak sih?

1:04:00Sudah ada goleng nggak?

1:04:02Oh nggak ada.

1:04:04Sudah install goleng?

1:04:06Nggak.

1:04:08Gue pengen juga hasil akhirnya

1:04:10json.wasm plus

1:04:12csfile-nya atau nggak?

1:04:14Enggak, wasm aja.

1:04:16Just csfile-nya siapa yang buat?

1:04:18Ya kita bikin

1:04:20sendiri, terakhir mose.

1:04:22Tadi kan ada ffmpeg.min.js

1:04:24Oh itu udah dibikinin.

1:04:26Kalau itu

1:04:28ini kita harus bikin sendiri.

1:04:30Bikin sendiri, kita load.

1:04:32Kayak yang contoh

1:04:342018 dulu.

1:04:36Yang di Google

1:04:38Chrome Dev Summit

1:04:40Extended di Tokopedia

1:04:42yang saya contohin ada

1:04:44cara ngelod file wasm

1:04:46di JavaScript.

1:04:48Ini kayaknya ada di sini.

1:04:50Jadi ada file itu.

1:04:52Tapi itu nggak banyak.

1:04:54Itu programatik aja.

1:04:56Kayak semacam import

1:04:58dan define output.

1:05:00Import export.

1:05:02Ini kan ada ffmpeg.cor.js

1:05:04ffmpeg.cor.wasm kan.

1:05:06Ini tujuannya adalah untuk

1:05:08ini dia, ini dia.

1:05:10Nggak kelihatan.

1:05:12Ada nggak ininya?

1:05:14Load.

1:05:16Eh, salah kan?

1:05:18Eh, nggak kelihatan.

1:05:20Kok nggak bisa kelihatan ya?

1:05:24Gak bisa kelihatan.

1:05:26Berat nih, berat.

1:05:28Kok nggak ada?

1:05:30Nah ini ada build tool-nya

1:05:32nggak buat bikin si

1:05:34cor.js, ffmpeg.cor.js

1:05:36dari wasm sampai jadi ffmpeg.cor.js.

1:05:38Itu yang Ivan pengen tahu.

1:05:40Itu yang Ivan pengen tahu.

1:05:42Kalau sudah punya wasm,

1:05:44mau panggil gimana caranya?

1:05:46Iya, bener.

1:05:48Kayaknya gua pernah buat deh.

1:05:52Gua lupa sendiri.

1:05:54Selain golenc,

1:05:56zik juga ada.

1:05:58Wasm itu juga udah secara native

1:06:00di support.

1:06:02Seperti tadi, tinggal pake flag aja.

1:06:06Ini juga basal low level ya.

1:06:08Wah, dia harus pake ini ya.

1:06:10Nah, ini kayak gini sebenarnya.

1:06:12Eh, nggak ya?

1:06:14Run it through JS. Nah, ini.

1:06:16Iya, itu ada interface WebAssembly.

1:06:18Jadi kayak ada

1:06:20constructor-nya gitu kan?

1:06:22Iya, jadi harus

1:06:24dilod dulu.

1:06:26Modul WebAssembly.

1:06:28Dulu contohin juga kayak gini.

1:06:30Pake C++. Saya contohin

1:06:32jalanin Fibonacci, bikin

1:06:34Fibonacci-nya DC.

1:06:36Terus abis itu dikompilasi,

1:06:38di JavaScript-nya pakai

1:06:40file system, fs.something.

1:06:42Read file.

1:06:44Ini kan

1:06:46nama file-nya xyz nih.

1:06:48Jadi dia read file dulu, abis itu

1:06:50dijadikan instance. Instance-nya udah bisa

1:06:52dipakai, diexport aja.

1:06:54Eksport jadi JavaScript

1:06:56yang kayak tadi tuh? Jadi JavaScript.

1:06:58Iya, jadi ini adalah interface-nya.

1:07:00Atau API-nya ya.

1:07:02Bridge-ing, jembatan.

1:07:04Nah, untuk zig-nya sendiri

1:07:06pada saat build-nya tinggal

1:07:08di target arsitektur-nya aja sama seperti

1:07:10goleng tadi.

1:07:12Begitu.

1:07:16Berarti flow-nya misalnya

1:07:18kita punya program

1:07:20atau binary yang masih pakai

1:07:22bahasa flow atau

1:07:24mid-level kayak C++.

1:07:26Misalnya anggap aja lah kita

1:07:28semacam Photoshop atau Lego.

1:07:30Perusahaan kita

1:07:32atau tempat kerja kita punya

1:07:34produk, punya software kayak gitu.

1:07:36Terus pengen deporting ke web.

1:07:38Terus kita ngusulin, pakai wasm aja.

1:07:40Nah, berarti kan langkah pertama

1:07:42itu harus diadaptasi

1:07:44ke wasm dulu ya.

1:07:46Si program original itu

1:07:48C++-nya harus

1:07:50dibikin jadi wasm.

1:07:52Harus bisa dikompilasi jadi wasm.

1:07:54Itu tugasnya

1:07:56developer yang paham

1:07:58ini malah paham C++

1:08:00atau Rust atau

1:08:02bahasa yang, bahasa original-nya

1:08:04kan, web bisa ngeporting

1:08:06ke wasm. Kalau web developer biasa

1:08:08tiba-tiba suruh ngeporting si

1:08:10software C++ ke

1:08:12wasm, ya

1:08:14bisa tapi harus belajar

1:08:16bahasa awalnya dulu kan.

1:08:18Berarti langkah pertama itu satu.

1:08:20Habis itu,

1:08:22di situ baru web developer bisa

1:08:24proses selanjutnya itu tadi kan tinggal

1:08:26instantiate apa?

1:08:28Tinggal bikin new web assembly

1:08:30blablabla aja. Jadi

1:08:32script.js. Nah

1:08:34dari script.js ya udah. Tadi kan berarti

1:08:36udah tinggal di nulis apa?

1:08:38Nulis kode buat execute

1:08:40kayak yang di contoh ff

1:08:42mpeg yang JS tadi itu kan.

1:08:44Betul. Dan

1:08:46ada beberapa library lain selain

1:08:48ff mpeg yang sudah

1:08:50tersedia di

1:08:52format web assembly.

1:08:54Yang pertama adalah

1:08:56skelight. Jadi kita

1:08:58udah bisa punya database

1:09:00di browser yang database

1:09:02nya beneran bukan index db bukan

1:09:04local storage.

1:09:06yang tadi pakai

1:09:08wordpress wasm

1:09:10pakai skelight juga.

1:09:12Pakai skelight juga.

1:09:14Jadi skelight bisa

1:09:16langsung dari JavaScript bisa langsung kita

1:09:18tembak ke skelight yang ada di browser.

1:09:20Ff mpeg tadi udah dibahas

1:09:22kemudian usb ini apa?

1:09:24Framework 3d computer graphic.

1:09:283d graphic.

1:09:30Oh si ini Autodesk itu

1:09:32berarti Autocad ya. Autocad pakai ini

1:09:34kayaknya.

1:09:36Autocad pakai ini.

1:09:38Ada kan fastkit, skia

1:09:40engine chrome and android.

1:09:42Ini untuk apa sih gaming ya?

1:09:44Bukan kompleks. Iya kan

1:09:46kayaknya dipakai buat game ya.

1:09:48Kompleks rendering, text shipping,

1:09:50fastkit. Ini apa?

1:09:52Kita liat aja.

1:09:54Skia. Skia itu apa?

1:09:56Canvas lah ya. Canvas ya. Buat

1:09:582d atau 3d ya.

1:10:00Ada tensorflow.js juga yang

1:10:02ternyata sudah

1:10:04menyediakan.

1:10:06Yang tadi ya.

1:10:08Ff wasm.

1:10:10Ada open cv. Ini

1:10:12library yang cukup

1:10:14keren di python. Bukan buat bikin cv ya.

1:10:16Bukan buat bikin cv ngelamar perjalanan.

1:10:18Cv itu computer vision.

1:10:20Jadi bisa mendeteksi objek.

1:10:22Wajah manusia, objek.

1:10:24Biasanya jalan

1:10:26by default. Kayaknya native-nya

1:10:28jalannya di python deh.

1:10:30Ini library yang cukup terkenal

1:10:32di python. Betul.

1:10:34Dan mereka sekarang sudah ada

1:10:36versi wasmnya. Jadi bisa langsung dipakai.

1:10:38Dan terakhir yang cukup

1:10:40menarik juga adalah ini.

1:10:42Game engine yang namanya kokos.

1:10:44Ini mereka sudah

1:10:46mulai mendukung, membuka

1:10:48dukungan ke

1:10:50teknologi web.

1:10:52Kalau unity bikin wasm

1:10:54juga bisa dong? Bisa.

1:10:56Jadi ya seperti tadi ya. Contohnya si

1:10:58Adopt tadi. Katakanlah kita

1:11:00punya game

1:11:02house. Kayak software house

1:11:04tapi buat game gitu ya.

1:11:06Terus tiba-tiba kita bilang, bisnisnya

1:11:08mengharuskan kita untuk menyasar

1:11:10platform web. Karena

1:11:12wah ini kayaknya kurang nih di android sama ios.

1:11:14Kita harus punya game yang

1:11:16berbasis web gitu.

1:11:18Ya udah. Konversi aja.

1:11:20Atau mereka bahkan sudah menyediakan frameworknya.

1:11:22Dan sudah connect juga

1:11:24ke web GPU.

1:11:26Yang belum kita sempet kita bahas.

1:11:28Jadi

1:11:30Singkatnya web GPU itu adalah

1:11:32Terpisah itu kudu web GPU.

1:11:34Iya. Jadi si

1:11:36browser sekarang sudah bisa mengakses

1:11:38secara langsung hardware

1:11:40GPU atau vega card ya.

1:11:42Nah istilah kerennya ya.

1:11:44Jadi 3G engine pun sudah

1:11:46bisa jalan di web. Dengan kecepatan

1:11:48yang menyetari

1:11:50native

1:11:52desktop.

1:11:54Dan karena dia

1:11:56tandem sama wasm

1:11:58jadi nggak terbatas ke

1:12:00rendering thread dari browser ya.

1:12:02Yang 60 frames per second.

1:12:0460 frames per second ya.

1:12:06Jadi

1:12:08game-game yang bahkan

1:12:10web GPU pun game-game seperti

1:12:12Doom

1:12:14Quake

1:12:16Counter Strike. Kita pernah

1:12:18lihatin ya. Itu juga sudah bisa

1:12:20jalan di browser. Dengan mungkin

1:12:22fps-nya tidak terlalu tinggi. Tapi ya bisa

1:12:24lah gitu. Nah dengan adanya web GPU ya

1:12:26lebih mantap lagi.

1:12:28Gitu.

1:12:30Oke.

1:12:34Dengan adanya wasm ini

1:12:36jadi pengen bahas nanti ke depan-depannya

1:12:38itu kayak

1:12:40bagaimana bisa mengurangi polusi

1:12:42dengan teknologi web.

1:12:44Iya.

1:12:46Gak perlu pakai server ya.

1:12:48Biar kerja processing-nya lebih

1:12:50sedikit.

1:12:52Gak perlu dimana-mana ada

1:12:54PC atau

1:12:56yang gede di belakang sebuah layar

1:12:58atau restoran.

1:13:00Semuanya via web saja.

1:13:02Yes.

1:13:04Oke.

1:13:06Ini yang tadi ya? Yang kita bahas tadi ya?

1:13:08Ya.

1:13:10Kita bahas. Tapi ini kalau

1:13:12teman-teman ingin belajar lebih dalam

1:13:14web assembly API

1:13:16yang sudah ada di browser. Apa aja

1:13:18gak cuma manggil doang loh.

1:13:20Ternyata ada

1:13:22macem-macem ya.

1:13:24Terus gue baru buka ini terus bingung ini

1:13:26apalagi low-level.

1:13:28Dia bisa access low-level memory.

1:13:30Dia bisa

1:13:32ini streaming kan. Kalau kita mau

1:13:34streaming. Jadi gak perlu

1:13:36file wasm-nya itu

1:13:38gak perlu. Perlu dikonsumsi

1:13:40wasm-nya.

1:13:42Terus bisa

1:13:44bisa fetch juga

1:13:46pakai fetch ya.

1:13:48Nah kalau itu kan kayak nge-download

1:13:50nyambil file-nya semua. Baru di

1:13:52process.

1:13:54Di export.

1:13:56Terus bisa

1:13:58buat teman-teman yang penasaran bentuk wasm

1:14:00gimana ini dia.

1:14:02Bisa aja kita tulis sendiri. Sama aja kayak

1:14:04assembly dulu ya. Bisa aja kita tulis sendiri.

1:14:06Tapi ribet.

1:14:08Kayak assembly tadi kan.

1:14:12Move to mana.

1:14:14Nah ini bisa dilihat juga ya

1:14:20di debugger ya.

1:14:22Bentuknya. DevTool yang baru

1:14:26sudah mulai lebih

1:14:28lebih apa namanya?

1:14:30Bisa nge-debug wasm loh.

1:14:32Ntar kita bahas lah kapan.

1:14:34DevTool-DevTool yang

1:14:36akhir-akhir ini.

1:14:38Ya lihat aja videonya Jessalinda.

1:14:40Masalahnya kita belum

1:14:42nge-operate sampai sejauh itu harus butuh

1:14:44debug

1:14:46sampai assembly sih ya.

1:14:48Belum ada codenya.

1:14:50Belum ada codenya.

1:14:52Tapi kan tadi

1:14:54ada starting code yang bagus sih. Tadi

1:14:56yang contoh-contoh library yang udah

1:14:58ada wasmnya.

1:15:00Ya udah kan kita coba consume itu aja dulu.

1:15:02Betul.

1:15:04Ya itu kan buat test aja.

1:15:06Jadi kita dari perspektif

1:15:08developer nggak usah belajar

1:15:10bahasa lain yang sulit-sulit tamat

1:15:12dulu lah. Coba

1:15:14ngejalanin ini pakai

1:15:16API JavaScript yang ada di halaman

1:15:18MDN. Itu tadi di

1:15:20test satu persatu coba sambil

1:15:22di-

1:15:24sambil di-check di DevTools.

1:15:26Ya potenya starting point yang bagus

1:15:28buat belajar dari nol ya.

1:15:30Ya jadi kita sebagai

1:15:32developer front-end

1:15:34atau JavaScript itu

1:15:36yang bisa kita lakukan adalah belajar

1:15:38cara mengkonsumsi si WebAssembly.

1:15:40Karena kalau kita harus belajar

1:15:42bahasa levelnya ya silahkan aja

1:15:44tapi itu jalannya cukup panjang ya.

1:15:46Harus mengetahui bahasanya dulu.

1:15:48Belajar misalkan temen-temen

1:15:50mau belajar RAS ya. Belajar RAS-nya dulu.

1:15:52Belajar semuanya udah bisa bikin aplikasinya

1:15:54baru-baru dibuat versi WebAssemblynya.

1:15:56Jadi lumayan ribet ya.

1:15:58Cuman kalau mau kompilasi

1:16:00misalkan temen-temen tahu ada satu

1:16:02atau diminta

1:16:04klien untuk konversi

1:16:06aplikasi jadul yang

1:16:08sudah legacy ke

1:16:10WebAssembly mungkin bisa coba

1:16:12beberapa tools. Kalau misalkan C namanya

1:16:14ada M-scripten.

1:16:16M-scripten.

1:16:18Nah ini

1:16:20bisa melakukan kompilasi

1:16:22dari C atau C++

1:16:24ke WebAssembly.

1:16:26Ke Wasm. Kecuali

1:16:28kalau tadi kayak cerita Ivan

1:16:30dari cerita Adobe

1:16:32Engineer tadi, kalau ada yang nggak

1:16:34kompatibel ya kita harus belajar

1:16:36C++-nya buat

1:16:38ke cek bagian-bagian mana

1:16:40yang nggak kompatibel. Tapi itu kan

1:16:42tergantung kompleksitas aplikasinya ya.

1:16:44Kalau Adobe ya rumit

1:16:46banget kan. Tapi kalau cuma apalah

1:16:48FizzBuzz atau

1:16:50FizzBuzz kali ya.

1:16:52Nggak bakal serumit. Kalau misalkan

1:16:54POS, tadinya jalan

1:16:56di DOS

1:16:58gitu kan.

1:17:00Mau di konversi ya mungkin butuh

1:17:02beberapa

1:17:04tapi kan setidaknya engine utamanya

1:17:06mungkin form-nya harus di konversi ya

1:17:08pakai web kan. Tapi pada saat

1:17:10di-save mungkin di-save-nya ke mana

1:17:12misalkan ke VoxPro gitu kan.

1:17:14Ya itu bisa, mungkin bisa

1:17:16masih bisa di-conversi ke

1:17:18web assembly gitu.

1:17:20Tapi kalau misalkan temen-temen udah pakai yang bahasa

1:17:22yang udah modern seperti Zic atau

1:17:24Golang ya bisa langsung aja nggak perlu

1:17:26pakai MScripten ini.

1:17:28Gitu. Udah langsung pakai

1:17:30arsitektur Fleck aja.

1:17:32Pada sudah mulai bikin ini deh

1:17:34membuat Wasm itu sebagai

1:17:36arsitektur gitu.

1:17:38Nambahin gitu. Betul.

1:17:40Jadi saya sempat mention

1:17:42juga pada saat... Jadi nggak cuma 64 bit

1:17:44lagi, 32 bit atau

1:17:46ARM

1:17:48tapi juga ada WebAssembly.

1:17:50Jadi standar

1:17:52arsitektur yang baru.

1:17:54Jadi WebAssembly ini

1:17:56adalah target kompilasi yang baru

1:17:58buat bahasa

1:18:00atau platform.

1:18:02Kalau dulu kan kita target kompilasinya

1:18:0464 bit, 32 bit.

1:18:06Ada

1:18:08target kompilasi lain.

1:18:10Nah target kompilasi yang

1:18:12baru adalah Wasm.

1:18:14Kurang lebih

1:18:16sederhananya seperti itu.

1:18:18Jadi ada tools yang udah

1:18:20by default ada atau bahasa-bahasa

1:18:22yang mungkin yang jadul seperti CC++

1:18:24itu dia...

1:18:26Ada yang bikinin tools seperti MScripten

1:18:28ini untuk mengkompilasi

1:18:30bahasa dia menjadi

1:18:32Wasm. Gitu.

1:18:34Oke.

1:18:36Ada lagi yang mau disampaikan sebelum mudahan?

1:18:38Mungkin kalau

1:18:40mau belajar

1:18:42resource yang paling oke sih

1:18:44WebDev tadi, WebDev

1:18:46/WebAssembly ya.

1:18:48Walaupun terlalu banyak

1:18:50cukup lengkap ya capupannya.

1:18:52Di sini kita belajar MScripten juga

1:18:54ternyata ya.

1:18:56Introduction.

1:18:58Ada link-link ke resource yang bisa dicek sendiri.

1:19:00Jadi

1:19:02starting pointnya dari situ.

1:19:04Jadi ini belajar gimana

1:19:08cara compare CC++ ke...

1:19:10Dan itu sebenarnya banyak banget sih

1:19:12MScripten sendiri kan sebetulnya

1:19:14kalau mau deep dive, wah udah

1:19:16panjang banget. Terus itu kayak

1:19:18coding with WebAssembly

1:19:20ya ini pointer-pointer doang

1:19:22hal-hal pentingnya lah, kisi-kisinya.

1:19:24Nah ini tadi yang

1:19:26dibasivan juga ya.

1:19:28Dibaging.

1:19:30Dan masih banyak lagi.

1:19:32Sampai ke WebAssembly

1:19:34dan practice.

1:19:36Nah kapan-kapan

1:19:38kalau udah belajar kita kayaknya

1:19:40sekian bulan lagi

1:19:42perlu bikin revisiting

1:19:44Wasm atau semacamnya deh.

1:19:46Betul. Harus ada project nih.

1:19:48Kita bikin project apa ya pake Wasm ya?

1:19:50Teman-teman mungkin ada ide?

1:19:54Jpt custom.

1:19:56Jadi kayak chat jpt

1:19:58tapi untuk internal, misalnya internal

1:20:00tim kita atau apalah perusahaan kita.

1:20:02Tapi jalannya di lokal semua.

1:20:04Gak tahu apa.

1:20:06Itu terlalu optimis, yang simple-simple

1:20:08dulu aja.

1:20:10Konversi.

1:20:12Ya pake yang udah ada aja kayak cuma ditambahin

1:20:14training data. Gak tahu ya itu

1:20:16kan use case yang cukup umum ya. Mungkin

1:20:18udah ada yang bikin.

1:20:20Jadi kita harus undang dulu

1:20:22yang

1:20:24GDE machine learning sudah apa ya?

1:20:26Ester.

1:20:28Ester. Nah.

1:20:30Boleh, boleh, boleh.

1:20:32Oh ini aja

1:20:34apa?

1:20:36Episod-episod

1:20:38ngobrolin web yang ada

1:20:40di YouTube kan formatnya video.

1:20:42Kita konversi jadi formatnya

1:20:44audio. Jadi bisa

1:20:46dinikmati di Spotify,

1:20:48Apple Podcast,

1:20:50terus bikinin transcriptnya.

1:20:52Tapi transcriptnya udah rapih gitu

1:20:54pake tanda baca.

1:20:56Nah itu susah. Gak mungkin.

1:20:58Itu pake tensile flash JS

1:21:00bisa. Kalo pake

1:21:02OpenAI bisa.

1:21:04OpenAI bisa.

1:21:06Pake OpenAI bisa.

1:21:08Ininya kita kan intonasi

1:21:10dan kita kan banyak pake slang-language

1:21:12juga ya.

1:21:14Kita kalimatnya belum, ya namanya

1:21:18orang ngobrol informal ya. Kan

1:21:20gak kayak pindah.

1:21:22Kalo pindah tuh kan satu kalimat,

1:21:24maksudnya jelas titik komonnya jelas,

1:21:26kalimatnya juga jelas, struktur

1:21:28kalimatnya. Nah kalo ini kan

1:21:30ragam bahasa

1:21:32informal dan orang ngobrol.

1:21:34Ya pasti suatu hari

1:21:36bisa sih. Pasti bakal ada AI-nya.

1:21:38Cuma sekarang belum.

1:21:40Di OpenAI ada namanya Whisper.

1:21:42Itu open source.

1:21:44Jadi kalo mau ngulik bisa. Tapi itu ya

1:21:46masih client server belum Wasm ya.

1:21:48Itu cukup akurat katanya.

1:21:50Nah berarti harus ada yang nge-porting.

1:21:52Harus ada yang nge-porting ke Wasm.

1:21:54Ya intinya sebenernya

1:21:56kalo pengen belajar,

1:21:58ya harus ngulik, harus bikin

1:22:00sesuatu. Kalo cuman belajar kayak gini-gini aja

1:22:02ya kurang ya.

1:22:04Kurang gimana gitu.

1:22:06Pasti kayak hal-hal yang

1:22:08edge case-nya gak ketemu.

1:22:10Kita harus bikin

1:22:12sesuatu yang belajar, tapi

1:22:14bisa jadi topik selanjutnya untuk IOX

1:22:16atau DevFace selanjutnya.

1:22:18Projek kecil.

1:22:20Oke kalo gitu.

1:22:26Untuk malam hari ini,

1:22:28topik tentang Wasm-nya kita tutup dulu.

1:22:30Mudah-mudahan kedepannya kalo

1:22:32ada temen-temen yang udah nyoba.

1:22:34Atau ada narasumber yang udah nyoba juga.

1:22:36Bisa lapor-lapor di kita.

1:22:38Jadi kita bisa menambah

1:22:42ini juga. Karena kita sendiri jujur

1:22:44ya hanya pakai aja.

1:22:46Belum umpilasi dari awal.

1:22:48Jadi kalo misalkan temen-temen ada yang pengalaman

1:22:52"Oh saya pernah nih bikin ini disini,

1:22:54buat client ini." Boleh. Nanti kita undang,

1:22:56kita tanya lebih lanjut ya.

1:22:58Untuk episode teori Wasm-nya

1:23:00udah selesai. Terima kasih banyak.

1:23:02Introduction to Wasm.

1:23:04Kita ketemu lagi selasa depan

1:23:08dengan topik yang berbeda.

1:23:10Jangan lupa kalo temen-temen punya topik,

1:23:12boleh silahkan langsung ke bit.ly/ngobrolinweb.

1:23:14Kita tunggu topik-topiknya disana.

1:23:16Sampai ketemu selasa depan.

1:23:20Selamat malam. Bye-bye.

1:23:22Bye.