Ngobrolin Design Pattern - Ngobrolin WEB

1:48Bentar lagi lebaran

1:49Mungkin ada yang udah mulai mudik ya

1:51Ada yang mulai mudik

1:52Kalau ada yang mulai mudik atau minggu depannya mudik

1:56Lancar-lancar di jalan, hati-hati di jalan

1:59Semoga sampai tujuan dan kembali lagi ke

2:04Kalau yang mudik kan balik lagi kan ya

2:07Gak apa-apa kalau gak balik juga gak apa-apa

2:11Silahkan pilihan masing-masing

2:14Oh iya download aja dulu offline

2:19Bisa gak sih Youtube download offline

2:21Bisa gak ya

2:22Bisa

2:23Kalau Netflix bisa kan

2:24Oh iya bisa bisa

2:25Youtube bisa download offline

2:26Youtube bisa download

2:28Downloadnya yang kecil aja kan

2:29Buat cuma dengerin doang kan

2:30Eh boleh sih

2:31Kalau ada visualnya juga gak apa-apa

2:33Iya

2:34Yang penting jangan sambil nyetir

2:35Lihat visualnya

2:38Iya jangan sambil nyetir

2:40Dengerin aja dengerin

2:42Iya dengerin aja

2:43Kita berusaha sebisa mungkin untuk itu ya

2:45Bisa dikonsumsi hanya dengan mendengarkan ya

2:48Mungkin ada beberapa visual tapi

2:52Cukup lah ya untuk mendengarin ya

2:56Oke malam ini

2:58Sesuai dengan permintaan yang ada di

3:04Apa

3:05Di github discussion

3:07Di sini

3:09Sanaline/ngobrolinweb

3:11Itu kita mau bahas

3:13Tentang design pattern

3:15Ini adalah

3:17Topik permintaan dari

3:20Mas Azam Aziz

3:22Mudah-mudahan nonton ya

3:23Kalau gak

3:24Kalau gak nonton

3:25Mungkin nanti nonton replaynya ya

3:27Nah kalau misalkan abis

3:29Habis dari live ini

3:31Kita mau diskusi lagi di sini

3:32Misalkan kayak tadi ya

3:34Barusan saya ngobrol sama Ivan juga

3:36MVC itu termasuk design pattern

3:39Sementara dari

3:43Beberapa referensi yang kita

3:46Kumpulin

3:48Gak ada itu MVC

3:49Jadi sebenarnya

3:51Definisinya sendiri pun

3:53Masih

3:54Belum jelas ya

3:57Mungkin sudah jelas

3:59Di luar sana

4:00Di luar sana

4:01Kita nya aja yang belum

4:02Nah maksudnya

4:04Mubah yang kayak

4:05Singleton dan lain-lain

4:07Itu kan abstrak banget ya

4:08Di system apapun

4:10Pasti ada

4:11Nah sedangkan kalau MVC kan

4:13Kayak aplikasi web

4:14Aplikasi setif

4:16Ya maksudnya

4:17Udah lebih spesifik

4:18Nah padahal kayak yang

4:19Di pattern strutif itu

4:21Ada yang lebih spesifik lagi

4:22Buat kayak jokot

4:24Kayaknya apa ya

4:25Design pattern itu kayak

4:26Arturilater yang kayak istilah

4:28Yang terhubung

4:29Yang dipakai apapun itu

4:31Jadi kayak gak

4:32Gak selalu sutara dan

4:34Bisa aja kayak

4:35Yang satu orang bayangin

4:38Tapi kita gak perlu bayangin

4:39Design pattern itu

4:40Sebagai ini, ini, ini

4:41Kalau di telepon lain

4:43Jadi kayak yang beda

4:45Kayak bisa bayangin

4:46Itu sebagian yang beda juga

4:47Maksudnya

4:49Yang pattern apa aja

4:51Yang sama team MVC itu

4:54Ya mungkin kalau orangnya

4:55Yang gak aplikasi web

4:57Yang terlalu spesifik

4:58Yang semakin spesifik

5:00Hmm

5:06MVC ini terkenal karena

5:09Ini ya, karena di PHP

5:11Dipakai sama

5:13Spring

5:15No

5:16Sebelumnya Spring

5:18Spring?

5:19Eh, Spring

5:20Iya, Spring Framework sama

5:22Zen, Zen, Zen

5:23Oh, Zen Framework

5:25Zen Framework kan pakai MVC ya

5:27Iya

5:29Padahal sebenarnya

5:31MVC sudah lahir

5:33Di jamannya Smalltalk

5:35Bahasa yang

5:37Kita sendiri gak ngalamin ya

5:38Eh, gak tau ada yang ngalamin gak Smalltalk

5:40Smalltalk ini

5:42Salah satu

5:45Bahasa

5:49Apa ya

5:50Bahasa yang menjadi referensi

5:51Bahasa, bisa dibilang bahasa

5:53Pioneer lah

5:54Bahasa pertama yang mengadopsi

5:55Object Oriented Programming

5:57Oh

5:59Bukannya si

6:00Smalltalk

6:01Bukan

6:02C++

6:03C++ kan Object

6:05Kalau si kan gak ya

6:07Iya, tapi yang pertama

6:09Yang pertama itu Smalltalk

6:11Nah, yang menciptakan adalah

6:14Ini

6:15Yang juga cukup berperan untuk

6:17Beberapa

6:19Beberapa

6:21Teknologi ya

6:23Salah satunya Apple ya

6:25Mouse juga

6:27Mouse, ya mouse

6:29Apa

6:31Gui, desain gui

6:33Ya, desain

6:35Kalau ini gak tau, beneran Serog ini bukan

6:37Bener gak sih Serog photocopy

6:39Ya, mungkin

6:41Mungkin

6:43Ya, jadi apa

6:45Mac ya, Mac OS

6:47Yang awal-awal sama Windows yang awal-awal itu

6:49Terinspirasi dari OS yang

6:51Mereka kembangkan di

6:53Center ini

6:55Jadi

7:01Nah, ini yang kita kaget, ini termasuk

7:03MVC termasuk software

7:05Desain Pattern, apalagi yang ada

7:07MVC, ada MVP

7:09Ada

7:11MVP, kalau ada yang tau

7:13MTV, MTV

7:15MTV

7:17Model, template, view

7:19Di Django itu pakai MTV dia

7:21Anak nongkrong

7:23Ada lagi gak ya

7:31Nah, ini dia disini ada tuh

7:33Builder

7:35Abstract Factory, Dependency Injection

7:37Factory Method, itu ada

7:49Dan lain-lain

7:51Karena ada dikategorikan itu kayak

7:53Creational Pattern, Behavior Pattern

7:55Structural Pattern

7:57Itu macem-macem

7:59Tapi MVC-nya sendiri berada dimana

8:01Konkerensi Pattern juga ada

8:03Nah, ini kan kita bakal

8:07Kalau menurut gue ya

8:09MVC itu jatuhnya di

8:11Structural Pattern

8:13Atau Behavior, gak tau ya

8:15Arsitekural Pattern

8:17Walaah

8:19Iya, Arsitektur kan

8:21Tadi kita udah ngomongin ini kan Arsitektur

8:23Tapi ada gak disini Arsitektural Pattern

8:25Gak ada

8:31Gak ada

8:33Oke, kalau gitu

8:35Kita bahas tentang

8:37Desain Pattern menurut

8:39Ya, definisi dulu ya, menurut

8:41Refactoring Guru

8:43Nah, ini source yang bagus banget ya

8:45Ya, saya penjelasannya

8:47Sama kayak spesifikannya

8:49Nah, disini juga ada

8:55Front-end

8:57Beda gak sih, antara Front-end

8:59Back-end

9:01Ada Domain Design Driven

9:03Domain Design Driven

9:05DDD

9:07Dan lain-lain

9:09Itu beda lagi ya

9:11Front-end kan ya, waktu itu kita udah sempat

9:13Bahas kan, itu lebih ke

9:15Rendering ya, Rendering Method ya

9:17Yang

9:19Rendering Method yang kayak itu ya

9:21Penamanya Static Site Generate

9:23SSG

9:25Client Site

9:27Rendering

9:29Rendering Method ya, oh beda

9:31GUL ya

9:33GUL

9:35Siapa yang GUL?

9:37Indonesia kayaknya

9:41Ya, oke

9:43Jadi kita coba ambil definisi

9:45Dari Design Pattern

9:47Dua referensi kita ada

9:51Di Refactoring Guru

9:53Sama di Patterns.dev

9:55Kalau Patterns.dev ini

9:57Adalah

9:59Yang bikin

10:01Itu salah satunya

10:03Adi Osmani

10:05Dia terkenal

10:07Di dunia web ya, jadi mungkin untuk Front-end

10:09Kayaknya lebih cenderung

10:11Ke arah Patterns.dev, tapi kalau

10:13Refactoring Guru ini lebih Generic atau

10:15Untuk Back-end kali ya, mungkin ya

10:17Enggak sih, lebih ke konsep sih

10:19Konsep

10:21Fundamental

10:23Kayaknya suaranya

10:27Enggak kedengeran

10:29Mungkin deketin mic-nya

10:31Kecil banget

10:33Dan pecah suaranya

10:37Pake apa sih?

10:39Ada apa sih?

10:41Ada mic

10:43Lapel, mic lapel

10:45Oh, keren

10:47Oh iya, gara-gara noisnya

10:51Terlalu sedih

10:53Lagi nonton bareng

10:57Ngeri, ngeri, ngeri

10:59Oke, lanjut

11:01Oke, jadi

11:03Design Pattern ini adalah

11:05Apa ya

11:07Pattern ya, pola yang sering ditemukan

11:09Dalam mendesain software

11:11Atau bentuk dari

11:13Software design gitu ya

11:15Kurang lebih kayak Blueprint lah

11:17Kalau di

11:19Arsitektur

11:21Bangunan

11:23Gitu ya, ada Blueprint kan, sebelum kita bikin

11:25Bangunan kan, kita harus bikin

11:27Desainnya dulu

11:29Blueprint-nya dan lain-lain

11:31Terus

11:33Meskipun demikian kita

11:35Nggak bisa cuma cari pattern yang

11:37Cocok, terus

11:39Kopi, langsung

11:41Masukin ke

11:43Software atau ke aplikasi kita

11:45Nah itu kata kuncinya di kalimat

11:47Kedua tuh bukan tentang kodenya

11:49Tapi konsep untuk membecahkan suatu

11:51Masalah

11:53Ya, oh iya, ada yang track lagi

11:55Kalau di React

11:59Pernah pakai Smart Dump Pattern, oh iya

12:01Ada pattern juga ya, masing-masing banyak pattern ya

12:03Pattern tuh ada di mana-mana

12:05Ya kalau React kan, kayak presentation component

12:07Oh

12:09Terus Flux

12:11Arsitektur juga termasuk pattern kan

12:13Apa lagi itu Flux

12:15Arsitektur

12:17Yang itu, yang dipakai

12:19Redux, yang ada action

12:21Ada

12:23Reducer

12:25Nah, lain-lain, nah itu kan

12:27Flux Arsitektur

12:29Yang namanya Flux

12:31Ya, kalau kerja sendiri

12:33Nggak ada pattern-pattern, nggak ada

12:35Bebas, kobo ya

12:37YOLO

12:39Tapi nggak

12:41Tidak

12:43Sepenuhnya salah kalau

12:45Kita, kalau kita

12:47Punya, apa ya

12:49Disiplin diri sendiri ya

12:51Dipakai aja, siapa tahu

12:53Tergantung, besarnya ukuran

12:55Yang mau dibangun sih, kalau misalnya

12:57Projeknya terlalu

12:59Cuma kecil-kecilan aja pakai

13:01Desain pattern yang

13:03Adapter-adapter

13:05Adapter, iya

13:07Terlalu

13:09Terlalu over engineer

13:11Betul

13:13Kalau mungkin akan

13:15Relate, kalau kita bikin library kali ya

13:17Misalkan kita bikin library untuk

13:19Database

13:21Database-nya bisa SQLite, bisa

13:23MySQL, bisa Postgres

13:25Nah, itu ada adapter-nya kan

13:27Gitu

13:29Di web framework juga banyak kan

13:31Kayak ASURO, kayak SWELTED

13:33Nyasuhai target deployment-nya kan

13:35Iya, betul

13:37Legacy code nggak ada pattern

13:41Ada, cuman kita nggak tahu aja namanya

13:43Siapa tahu ada

13:45Ada-ada

13:47Selalu ada kok dari awal

13:49Buktinya yang tadi kita sebutkan ya

13:51MVC

13:53Nih, lihat nih MVC nih

13:55Object Authentic, pattern nggak sih?

13:57Pattern?

13:59Iya

14:01Iya

14:03MVC

14:05Itu Smalltalk

14:07Diawali dari Smalltalk

14:09Smalltalk itu bahasa tahun berapa itu?

14:11Lihat nih

14:1380-an ya, itu ada 80-nya

14:15Itu artinya tahun ya

14:17Nggak tahu

14:19Iya, yang 79-an, 79-nya

14:21Oh iya

14:23Created in 1970-an

14:25Kurang legacy apa ini?

14:27Udah ada MVC mereka

14:29Maksudnya

14:31Ada, tapi mungkin kita nggak tahu aja

14:33Nggak ngeh

14:35Nah, ini juga salah satu yang menjadi

14:37Diskusi kita beberapa hari yang lalu

14:39Kok perasaan

14:41Di kerjaan nggak ketemu ya

14:43Kita nggak perlu pattern-pattern gini ya

14:45Kalo sampai sekarang, jujur

14:47Di group WhatsApp sih

14:49Kita bahas bahwa

14:51Jujur gue kalau harus jelasin design pattern itu apa

14:53Beneran nggak tahu, karena selama ini

14:55Cuma ngerti factory sama singleton

14:57Nah, kebetulan

14:59Interview kerja nggak ditanya

15:01Dan sepanjang kerja pun, ya nggak pernah

15:03Harus ngejelasin design pattern itu sendiri apa

15:05Tapi, ya nggak tahu ya

15:07Bisa aja kan prakteknya sebetulnya udah

15:09Ketemu dan nerapin

15:11Tanpa paham itu namanya design pattern

15:13Yang namanya ini-ini, prinsipnya ini-ini

15:17Walaupun ngebahas arsitektur, misalnya itu kerjaan

15:19Kan bakal langsung dibahas kan

15:21Maksudnya bagian-bagiannya apa aja, ini tanggung jawabnya apa

15:23Pola alurnya kayak gimana

15:25Itu kan

15:27Kayak kita bisa ngejalankan itu semua

15:29Tanpa tahu teorinya design pattern

15:31Tahuin namanya dia

15:33Betul

15:35Jadi, lebih ke ini ya

15:39Lebih ke kayak

15:41Kayak kumpulan

15:43Kayak jurus-jurus kali ya

15:45Kalau kita belajar

15:47Belah diri gitu, kayak jurus-jurus kan

15:49Ini jurus ini

15:51Kalau mau nangkis itu kayak gini

15:53Tapi kan, begitu

15:55Misalkan kita belum

15:57Paham atau belum mahir

15:59Pas berantem, ya

16:01Lari aja, nggak pakai jurus

16:03Atau pakai jurus yang

16:05Tidak diajarkan sebelumnya gitu kan

16:07Nah itu nggak ada pattern kan

16:09Atau mungkin kalau pengalamannya banyak

16:11Dia tahu cara nangkis yang betul

16:13Yang nggak tahu teorinya itu adalah jurus

16:15Blablabla yang harus dipakai kalau blablabla

16:17Ya balik ke definisi yang

16:19Di layar itu konsep untuk

16:21Mempecahkan suatu masalah

16:23Kalau level yang paling praktikal

16:25Ya mungkin design pattern itu kita harus tahu

16:27Biar kalau kebetulan interview

16:29Terjalan ditanya bisa jawab

16:31Ya ya ya

16:33Kalau ada interview

16:35Bisa jawab ya, untuk lulus

16:37Interview ya

16:39Ya lebih ke

16:41Kayak apa ya

16:43Design pattern itu ya

16:45Kalau misalkan kita tadi ya

16:47Latihan gitu

16:49Mungkin kita akan belajar jurus-jurus itu

16:51Tapi pada saat prakteknya kan belum tentu kan

16:53Semuanya dibutuhkan gitu kan

16:55Nah tujuan kita

16:57Menerapkan ini atau

16:59Melatih atau mempelajari ini adalah

17:01Nanti pada saat kita ketemu

17:03Di project kita udah tahu

17:05Oh ini cocoknya pakai ini gitu

17:07Jadi secara natural keluar

17:09Atau

17:11Kalau ketemu masalah baru

17:13Oh ya itu bisa

17:15Atau kita harus ngadepin masalah baru

17:17Biar

17:19Oh jangan kayak gini

17:21Bagusan lebih cocok pakai pattern itu

17:23Kalau jenis masalahnya

17:25Seperti ini

17:27Nah ini analoginya disini

17:29Resep ya, resep masakan

17:31Resep masakan

17:33Stepnya jelas, tujuannya ada

17:37Oh apanya

17:39Algoritma itu resepnya

17:41Jadi itu

17:43Penterapan, implementasi

17:45Cuma blueprint itu apa sih

17:47Cetak biru yang tadi

17:49Yang di awal Mas Chrisa bilang itu

17:51Kalau mau bikin bangunan blueprint

17:53Blueprint itu mungkin kayak yang gambar-gambar

17:55Gitu kan ya, gambar arsitektur

17:57Gitu kan

17:59Oh kita bisa melihat hasilnya

18:01Seperti apa dan fitur-fiturnya apa

18:03Tapi cara nerapenya

18:05Cara membangunnya

18:07Kayak mungkin naruh batanya gimana

18:09Semain dan lain-lainnya mungkin ya

18:11Itu nggak di jelasin disitu

18:13Terserah yang

18:15Membangun

18:17Jadi pattern itu ada

18:23Tujuan

18:25Dan motivasi

18:27Strukturnya seperti apa

18:29Ini dari ini ya

18:31Artikel ini ya

18:33Mengandung ini

18:35Oke

18:39Istori nggak usah ya

18:43Kenapa saya harus belajar pattern

18:45Itu tadi

18:47Kalau uang cara ditanya

18:49The truth is

18:51That you might manage to work as

18:53Programmer for many years without knowing

18:55About a single pattern

18:57A lot of people do just that

18:59Even in that case

19:01You might be implementing

19:03Signed pattern

19:05Karena itu

19:09Kalau kita ketemu

19:11Pola itu berulang-ulang

19:13Terus kita ekstrak pola itu secara tidak

19:15Langsung akan menjadi sebuah

19:17Pattern kan, based practice

19:19Design pattern dan lain-lain

19:21Bahkan kita bisa menciptakan

19:25Pattern kita sendiri

19:27Siapa tahu gitu kan

19:29Siapa tahu di luar sudah ada

19:31Walaupun kayaknya semua sudah ada

19:33Tapi ada kasus-kasus tertentu

19:35Yang mungkin unik

19:37Yang belum dijelaskan

19:39Di design pattern

19:41Di buku atau di mana

19:43Bisa aja jadi design pattern kita sendiri

19:45Tapi itu dua poin keuntungannya

19:49Jadi yang pertama adalah

19:51Yang gue takut sih memperluaskan

19:53Problem solving

19:55Kita itu

19:57Orientated design

19:59It teaches you how to solve all sorts of problems

20:01Jadi kita punya pandangan yang luas

20:03Di luar sekadar masalah-masalah

20:05Atau kode-kode yang kita temuin

20:07Pas kita lagi kerja kan

20:09Terus yang kedua tuh common language

20:11Nah common language juga penting

20:15Karena

20:17Untuk berkomunikasi dengan

20:19Rakan kerja dengan

20:21Mungkin

20:23Client kita nggak bahas ini ya

20:25Pokoknya dengan rakan kerja

20:27Itu kita butuh kayak gini

20:29Kadang-kadang butuh kayak gini

20:31Karena kita menjelaskan itu maksudnya apa sih

20:33Kalau kita langsung bilang mungkin

20:35Oh kita pakai

20:37Adapter aja

20:39Lebih cepat dimengerti

20:41Daripada harus kita menjelaskan satu persatu

20:43Next, criticism

20:47Criticism

20:49Nggak perlu dibahas ya

20:51Inefficient solution

20:53Inefficient use

20:55Kadang-kadang kita suka pakai

20:57Karena kita suka

20:59Atau kita menguasai suatu pattern ya

21:01Mungkin ada pattern yang we hype up gitu

21:03Jadi semua masalah

21:05Suruh pakai pattern itu

21:07Iya itu juga

21:09Nggak boleh ya, jadi lebih ke

21:11Disesuaikan dengan

21:13Kebutuhan aja

21:15It depends ya, balik lagi it depends ya

21:17Atau itu tadi jadi terlalu kaku

21:19Karena mikir pattern-pattern yang udah ada

21:21Jadi semua masalah harus dimasukin ke

21:23Salah satu pattern itu

21:25Betul, betul

21:27Ya jangan, apapun yang terlalu

21:29Digmatis nyebar

21:31Nah pola dari

21:33Pattern ini

21:35Eh pola apa

21:37Klasifikasi

21:39Kategori, pattern-pattern itu ada

21:41Tiga kalau disini ya

21:43Ada creational, ada structural, dan behavior

21:45Tadi kita sempat lihat juga ada

21:47Arsitektural, ada

21:49Eh apa tadi

21:51Konkaren ya, konkarensi

21:53Ada macem-macem ya

21:55Jadi disini hanya dibahas 3

21:57Creational

21:59Yang berhubungan dengan membuat

22:01Sesuatu

22:03Object creation

22:05Ini udah ngomongin objek ya

22:07OP dong

22:09Terus

22:11Yang structural itu adalah

22:13Object end class

22:15Structural itu mungkin

22:17Overlap sama

22:19Arsitektural kali ya, structural

22:21Termasuk ya, structural

22:23Struktur folder, struktur

22:25Gitu ya

22:27Termasuk data flow

22:29Berarti isi next.js

22:31Ada behavior

22:33Berarti behavioral kali ya

22:35Routingnya

22:39Routingnya next.js itu kayak structural

22:41Pattern juga berarti ya, folder structure

22:43Ya nggak sih

22:45Eh bisa behavioral

22:47Bukan sih, karena

22:49Effective communication and assignment of

22:51Responsibilities

22:53Bisa

22:55Bisa, kita lihat aja salah satu

22:57Ini kan

22:59Structural itu termasuk

23:01Adapter, bridge

23:03Apa lagi ya

23:05Composite, dekorator

23:07Dekorator ini kan

23:09Lumayan sering kita pake juga ya, nggak sering sih

23:11Lumayan sering kita dengar kan

23:13Proxy

23:15Cuma nggak pernah pakai

23:17Proxy

23:19Single tone itu single tone

23:23Single tone, kalau yang

23:25Creational, yang bikin-bikin

23:27Factory method, kalau misalkan

23:29Bikin testing biasanya itu ada

23:31Factory kan, kita bikin otomatis untuk

23:33Data

23:35Dummy dan lain-lain untuk membuat data

23:37Jadi kan

23:39Misalkan apa ya, kita mau testing

23:41Apakah data yang di entry itu beneran

23:43Masuk dan kelihatan di layar atau nggak gitu

23:45Nah kadang-kadang kalau kita mau

23:47Masukin data dalam jumlah besar

23:49Dalam jumlah banyak, kita bikin factory-nya dulu

23:51Jadi nanti dia akan otomatis, misalkan

23:53Saya mau 10

23:55User baru, nah apakah 10 user

23:57Baru ini akan muncul di halaman index

23:59Misalkan, nah itu

24:01Kadang-kadang pakai factory namanya

24:03Terus ada

24:05Prototype, prototype ini JavaScript bukan

24:07Bukan ya

24:09Ya apapun yang OOP

24:11Beda

24:13Ada Singleton

24:15Singleton ini lumayan

24:17Terkenal ya

24:19Karena dia, kalau kita bikin

24:21Object biasanya

24:23Ketika kita inisiasi

24:25Kalau Object itu bisa kita inisiasi banyak

24:27Berkali-kali kan

24:29Kalau ini sepertinya dia hanya

24:31Satu instant aja

24:35Jadi ketika kita bikin instance baru

24:37Dia akan merujuk ke instance yang satu aja

24:39Jadi nggak banyak-banyak

24:41Tetap satu, tujuannya apa

24:43Ada nggak disini

24:45Oh ini problemnya ya

24:49Problem yang mau disolve

24:51Ensure that

24:53A class has just a single instance

24:55Yang kedua, provide global access point

25:01To the instance

25:03Solusinya adalah

25:05Selanjang runtime cuma ada satu instance itu

25:07Biar nggak ketimpa-timpa

25:09Unexpected dari file ini

25:11Ubah suatu

25:13Kaya property-nya

25:15Jangan sampai ada kayak gitu

25:17Singleton

25:21Contohnya lucu gitu dengan Men

25:23Itu di atas

25:27Itu atasnya

25:29Real-world analogy yang bukan contoh

25:31Oh iya iya iya

25:33Gue pernah ngeliat interview

25:35Gara-gara salah jelasin singleton

25:37Ditolak deh

25:41Singleton

25:45Berarti

25:47Yang kita bahas disini

25:49Kebanyakan berhubungan dengan OOP ya

25:51Ini OOP sekali ya

25:53Instance dan lain-lain

25:55Kayaknya OOP itu bukan

25:57Semua itu

25:59Filosofi

26:01Di filosofi atau approach

26:03Kayaknya wikinya smalltalk

26:05Tadi juga apa ya

26:07Ada design patterns itu ya

26:09Karena smalltalk itu salah satu implementer pertama

26:11Prinsip OOP deh

26:13Jadi emang object-oriented

26:15Fokus banget ya

26:17Cara-cara

26:19Pattern-pattern ini

26:21Berarti

26:23Kalau misalkan di fungsional

26:25Ada design pattern

26:27Beda lagi gitu ya

26:29Ya fungsional kan

26:31Bisa

26:33Tapi kalau misalkan kayak ini kan

26:35Instance kan nggak ada di fungsion

26:37Berarti nggak bisa

26:39Dipakai

26:41Maksudnya

26:43Kayak kelihatannya ini lebih oriented

26:45Lebih condong ke OOP karena

26:47Smalltalk pun pionernya

26:49Tapi ya

26:51Kalau di luar OOP tetap bisa pakai

26:53Cuma ya nggak terlalu banyak

26:55Yang lain-lain

26:57Adapter misalkan

26:59Adapter-an dipakai di mana-mana termasuk di fungsional

27:01Atau di paradigma yang lain kan

27:03Kalau kita pikir-pikir

27:05Model view controller nggak mesti OOP kan ya

27:07Enggak-enggak

27:09Funksional juga bisa kan

27:11Funksional yang khusus untuk model

27:13Funksional yang khusus untuk view

27:15Sama funksional khusus controller

27:17Ya apa ya

27:19Phoenix kan yang

27:21Dari Elixir juga funksional programming

27:23Tapi dia MVC

27:25MVC itu tidak

27:27Berpengaruh ke

27:29Pertanyaan yang satu aplikasi

27:31Bisa nggak nyampur-nyampur

27:33Ada single tone-nya

27:35Ada

27:37Ada

27:39Factory method-nya

27:41Ada adapter-nya bisa nggak sih

27:43Bisa aja

27:45Tergantung

27:47Modul yang mana ya

27:49Tergantung situasi

27:51Kalau bagian dan fungsionalitas yang sama

27:55Pakai pattern yang berbeda ya

27:57Posisi sama-sama komponen UI gitu

27:59Pattern-nya

28:01Campur-campur mungkin agak bingung ya

28:03Tapi kalau emang

28:05Bagian-bagian yang dikasih sama Asus

28:07Dikasih sama Asus

28:09Yey

28:11Ada kejadian apa-kejadian apa

28:13Hehehe

28:15Oke

28:17Iya

28:19Sebenernya sah-sah aja nggak ada masalah

28:21Misalkan apalagi ya

28:23Kayak tadi single tone

28:25Terus ada factory method

28:27Provide interface

28:29For creating objects ya

28:31Banyak banget interface-nya ini

28:33Terus misalkan

28:35Ya

28:37Misalkan apalagi ya

28:39Change of responsibility ini

28:41Chaining method bukan?

28:43Bukan ya

28:45Ada hubungan sama chaining method nggak?

28:47Dulu yang pernah

28:49Mas Rizal jelasin kayak actor kelas itu

28:51Design pattern juga nggak sih?

28:53Actor

28:55Actor model

28:57Actor model itu design pattern

28:59Tapi yang berhubungan dengan

29:01Di Wikipedia tadi

29:03Ini

29:05Tadi kan ada

29:07Creational

29:09Structural

29:11Behavior

29:13Ada konkurrensi

29:15Ada konkurrensi

29:17Iya

29:19Tapi disini nggak ada

29:21Bukan yang tadi ya

29:23Bukan

29:25Bukan actor model ya

29:27Bukan

29:29Ini problemnya apa

29:31Problemnya adalah

29:33Change of responsibility

29:35Restrict access to the system

29:37So only authenticated user

29:39Can create orders

29:41Step by step

29:45Step 2 bergantung pada step 1

29:47Step 3 bergantung pada step 2

29:49Itu yang problemnya

29:51Harus disolve

29:53Sebenarnya problem umum kan

29:55Yang mungkin kita sudah pernah solving

29:57Tapi kita nggak pakai ini

29:59Dan ternyata secara tidak

30:01Langsung kita buat ini sebenarnya

30:03Kita pakai itu

30:05Cuma kita nggak tahu itu namanya apa

30:07Betul

30:09Betul

30:11Sebenarnya ya

30:13Middleware aja kayak gini kan

30:15Benar nggak

30:19Dari request ke response

30:21Middleware-nya ada autentikasi

30:23Ada otorisasi

30:25Ada nambahin session

30:27Apa segala macam baru ke response kan

30:29Iya

30:31Iya

30:33Dan kalau middleware kan biasanya

30:35Di balik

30:37Ya abc

30:39Nah pas ke response cba

30:41Iya betul

30:43Real world analogy

30:45I need tech support press one if

30:47Blablabla

30:49Gimana maksudnya

30:53You try to boot all of them

30:59To see whether hardware is supported

31:01Windows detected and enable

31:03Hardware automatically

31:07Sebenarnya pattern ini kayak

31:09Booting operating system

31:11Checking satu-satunya

31:13Di cek satu-satunya

31:15Kita kalau jaman dulu masih ada

31:17Ya yang Linux itu ya

31:19Satu-satunya

31:21Check hardware ini

31:23Satu-satunya

31:25Strukturnya juga ini

31:29Didesign pakai

31:31Class diagram ya

31:33Ada yang belajar nggak

31:35Di class diagram

31:37Ini class diagram

31:39Shadow code nya

31:41Inheritance

31:43Nah ini

31:45Kalau kita pencet F1

31:51Buttonnya jadi gerai scale

31:53Bacanya

31:55Salah ya

31:57For example dialog class

31:59Which render the main windows

32:01Of the app would be the

32:03Of the object tree

32:05The dialog contents panel

32:07Oh kalau misalkan kita bikin

32:09Ini desktop app ya

32:11Terus ada panel setting

32:13Ada panel color, ada button

32:15Pakai interface

32:19Dan class

32:21Bahasanya apa nih? Oh prototype ya

32:23Shadow code

32:31Itu adalah

32:33Tadi jantannya apa?

32:35Ada satu lagi

32:37Yang menarik

32:39Yang state machine

32:41Ada kayak disini

32:43Nah ini state

32:45Ya state machine

32:47Nah ini juga sering ya

32:49Apalagi yang pakai

32:53Yang semenjak

32:57Abis redux kan banyak yang pakai

32:59State machine ya

33:01Status status

33:07Jadi kayak jalan pakai

33:09Conditional state

33:11Per request

33:13Finish state machine

33:15Nah ini dia

33:17Itu kayaknya kalau kita nge-tweet itu dulu

33:21David K. Piano itu bakal

33:23Yang bikin apa sih?

33:25X state

33:29Ya

33:31Pernah bahas

33:33The main idea is that

33:35At any given moment there is a finite

33:37Number of state which a program can be

33:39Can be in

33:41Within any unique state the program behave differently

33:43And the program

33:45Can be switched from one state to another

33:47Instantaneously misalkan kita bikin

33:49Game, game itu kan ada berapa

33:51State ada awalnya loading page

33:53Loading state

33:55Kemudian start

33:57Game loop kan

33:59Terus sampai game over

34:01Itu kan state-state nya ya

34:03Jadi apa program kita

34:05Di definisikan berdasarkan state disitu

34:07Dari gambar ini

34:09A bisa ke B, tapi A itu gak bisa

34:11Ke E, jadi kalau mau ke E

34:13Harus lewat B, harus ke B dulu

34:15Ya state nya

34:17Ada istilahnya apa

34:19Impossible state ya

34:21Ada state yang tidak bisa langsung

34:23Menuju kesana gitu

34:25Jadi ini ngaruh banget kalau

34:27Itu kan kasusnya UI nya

34:29Masing-masing juga beda kan

34:31Ini mungkin kalau contoh

34:33Nah itu tuh ada contoh yang bagus tuh

34:35Dokumen klas, dokumen bisa draft, moderation, publish

34:37Nah ya, kebayang kan

34:39Nah itu kan mungkin field-field yang aktif

34:41Atau button nya yang mana yang didisable

34:43Itu kan juga pasti bergantung sama state kan

34:45Saya yakin temen-temen sering

34:49Mengerjakan ini

34:51Kalau misalkan di database itu ada status

34:53Tapi gak tau kan

34:55Ini ternyata state kan

34:57Atau gak ngeh gitu, bukan gak tau sih

34:59Mungkin akhir-akhir ini aja taunya

35:01Perasaan dari dulu juga

35:03Kalau kita bikin block engine kah

35:05CMS kah apa

35:07Pasti ada begini, ada status

35:09Semua pasti ada status kan

35:11Contohnya user-user

35:13User tuh baru publish

35:15Masih untuk email nya belum aktif

35:17Dia harus klik email nya

35:19Validasi verifikasi

35:21Terus aktif, terus inaktif

35:23Lagi login

35:25Lagi login terakhirnya kapan

35:27Iya kan

35:29Kalau UI ya

35:31Mungkin form misalnya register user

35:33Apakah field nya udah valid semua

35:35Atau udah nyentang

35:37Apa itu saya bersedia blablabla

35:39Sudah membaca

35:41Terms and conditions yang mana sebenernya gak

35:43Bisa dibaca juga

35:45Itu kan juga state kan

35:47Kalau udah memenuhi syarat semua

35:49Di tombol submit nya

35:51Baru bisa di pencet

35:53Kalau udah di pencet piring data

35:55Ternyata dibalikin result nya error

35:57Ada field yang harus dibikulin

35:59Mungkin lain lagi

36:01UI

36:03Itu state

36:05State itu adalah behavior ya

36:07Behavior

36:09Comment

36:11Tadi ada observer juga

36:15Observer juga

36:17Sering kita pakai

36:19Oh comment ini

36:21Kayak CQRS bukan sih

36:23Ada yang tau CQRS gak

36:25Cater juga ternyata

36:27Comment query

36:31Responsible segregation

36:33Baru pertama kali

36:35Dengar

36:37Oh baru pertama ya

36:39Jadi ini

36:41Sistem arsitektur

36:43Sebentar, contohnya apa ya

36:45Jadi

36:47Ketika ada

36:49Perintah itu

36:51Dia cuma kirim comment aja

36:53Gak langsung dikerjain

36:55Jadi comment itu bisa

36:57Disimpan dan bisa

36:59Di reply

37:01Bisa di reply kayak ada itu

37:03Jadi kita bisa tau tahapan-tahapan

37:05Si user melakukan apa itu

37:07Dari CQRS ini

37:09Bener gak sih

37:13Gak ada contohnya ya

37:15Ini mirip sekali sama ini

37:19Nah ini

37:27Kurang lebih kayak gini sih

37:29Jadi ada save comment

37:35Kemudian nanti

37:37Si save comment ini akan melakukan apa

37:39Apa lagi yang menarik

37:41Itu tadi

37:43Observer

37:45Kita sering pakai

37:47Semua yang bahasannya

37:49Di belakangnya ada Observer

37:51Interaction Observer

37:53Mutation Observer

37:55Ini pasti ini ya

37:57Ah iyalah

37:59Patternya ini, jadi apa

38:01State apa yang terjadi

38:03Dia ngeobserve

38:05Sebuah

38:07Object, elemen

38:09Dan mengobserve itu

38:11Dan jika ada event terjadi

38:13Akhirnya akan ketrigger

38:15Terjadi ketrigger

38:17Dispatch event

38:19Kayak PubSap juga gak sih

38:23Publisher subscriber

38:25Sama ya

38:27Mereka pasti tau ya

38:31Iya, PubSap pasti tau

38:33Tapi gak tau kan kalau ternyata masuk ke

38:35Sini Observer kan

38:37Itu sih selalu

38:39Itu kan bahasa di atas event subscriber kan

38:41Iya bener

38:43Kita subscribe ke satu event

38:45Sama aja kayak subscribe ke YouTube

38:47Ketika ada video baru kita dapat notifikasi

38:49Kurang lebih kayak gitu kan

38:51Kalau kayak

38:53Bahas

38:55Ria ini juga sih gak sih

38:57Kayak ada behaviornya kayak gini juga

38:59Kayak event listener gitu

39:01Atau beda ya, kalau Ria itu

39:03Systemnya, cycle nya

39:05Ngereload ya

39:07Kalau state berubah dia ngereload kan

39:09Di belakang layar

39:11Di virtual domnya ya

39:13Berarti kan dia

39:15Ngeobserve state

39:17Bener gak sih

39:19Betul

39:21Tapi dia punya

39:23Coop itu ada

39:25Dependensi

39:27Ada kayak element yang terakhir itu

39:29Kalau lupa masukin

39:31Bisa ngetrigger

39:33Terus

39:35Karena jadi apa yang di watch

39:37Jadi kayak variable apa yang berubah

39:39Nah kalau itu berubah

39:41Dia bikin keopulasi lagi

39:43Keseluruhan virtual dom

39:45Nah apakah itu masuk

39:47Observer, gak tau

39:49Kita gak tau, oke

39:51Nah sekarang kita coba

39:53Masuk ke patterns.tiff ya

39:55Ini juga salah satu web

39:57Yang jadi referensi

39:59Dan

40:01Bagus banget, gitu ya

40:03Tapi yang bikin ini lebih deket

40:05Cenderung ke JavaScript ya, karena

40:07Memang dia orang web banget ya

40:09Pattern focus on plane

40:11JavaScript and Node.js

40:13Kalau ini, kayaknya bahasanya

40:15Lebih ke Java

40:17Atau Google ya

40:19Iya, put example coba kita lihat

40:21Yang ini

40:29Banyak, iya bisa

40:31Gak ada masalah

40:33Wuh, kayak gini kan

40:35Udah bisa diterapkan di TypeScript ya

40:37Tapi specific TypeScript dia ya

40:39Gak ada JavaScript ya

40:41Hanya TypeScript ya

40:43Tuh

40:45Gak, ada interface kan

40:51Kalau JavaScriptnya gak ada interface

40:53Salah satunya

40:55Iya

40:57Nah, ada bukunya nih

40:59Kalau temen-temen mau baca gitu ya

41:01Ada bukunya

41:03Bukunnya gratis ya

41:05Bukunnya gratis ya

41:07Nah, ini

41:09Mas Adi Osmani

41:11Yang jatuhnya web

41:13Di Chrome ya

41:15Kita bisa dikenalin gak sama mas Robert

41:17Adi Osmani

41:19Coba tanya aja ntar

41:21Ngomongin soal like house

41:23Page speed inside

41:25Boleh, boleh

41:27More like Corvoid Vital kali ya

41:29Ya, oh disini ada

41:31Introduction juga ya, kalau kita lihat disini

41:33Introductionnya apa

41:35Nggak ada ya

41:45Tuh, hampir-hampir sama ya

41:49Ada comment pattern, ada factory pattern

41:51Kita lihat comment tadi bener gak

41:53The couple object

41:55That execute certain task from

41:57The object that calls the method

41:59Execute certain task from the object

42:01We have

42:03Online food delivery platform

42:05User can place track and cancel orders

42:07Oke, ini ada

42:09Order manager, ada place order

42:11Ada track order sama cancel

42:13Order

42:15On the order manager class

42:17We have access place order, ya yang tadi kan

42:19It will be

42:21Totally valid JavaScript to just

42:23Use this method directly

42:25Bisa langsung

42:27Ini instance dulu

42:29Instancenya langsung

42:31However, the downside to invoke this method

42:33Directly on the manager instance

42:35It could happen

42:37That we decide to rename certain

42:39Method later on

42:41Or the functionality on the method changes

42:43Say

42:45That instead of calling place order

42:47We no rename at

42:49Order

42:51This would mean that we would

42:53Have to make sure

42:55That we don't call place order

42:57Method

42:59Anywhere in our code base which

43:01Could be very tricky in last

43:03Application, instead we want

43:05To decouple the methods from

43:07Manager object

43:09Semifunctional, maksudnya kayak

43:11Methodnya itu gak ditempelin ke

43:15Gak di-associate very quickly

43:17Gak jadi method

43:19Ya, jadi

43:21Fungsi yang terpisah gitu ya

43:23Contohnya ini

43:25Jadi kita bikinin satu

43:27Method

43:29Buat nyalainin function kan

43:31Buat nyalainin function external

43:33Jadi kayak bikin semacam reusable modular

43:35Function di luar itu kali ya

43:37Baru kemudian kita bikin

43:39Class atau

43:41Bikin fungsi-fungsi yang berguna

43:43Sebenernya gak harus functional ya

43:45Berarti bikin class lain

43:47Tapi untuk placing

43:49Class berupa komando, command

43:51Untuk placing order

43:53Ini fungsi aja disini

43:55Oh ya, ini ada class command ya

43:57Class command terus execute

43:59New command

44:01Jadi initiate

44:03Comment

44:05Buat dimasukin ke

44:07Order manager tadi

44:09Jadi order manager ini

44:11Hanya punya satu method yaitu

44:13Execute apa yang mau dia execute

44:15Comment-comment nya ada disini

44:17Jadi in case misalkan tadi

44:19Ada perubahan

44:21Nama

44:23Dan lain-lain itu jadi lebih mudah

44:25Itu ya

44:27Si class order manager nya sendiri

44:29Gak ngurus, gak concern sama

44:31Placing order nya

44:33Kalau di contoh itu dia cuma nampung

44:35Orderannya apa aja

44:37Abstraction

44:39Abstraction ya

44:41Ini singleton yang tadi

44:43Jadi ketika

44:45Class udah ada instance nya

44:47Dia hanya tinggal get instance aja

44:49Hanya punya satu

44:51Karena mungkin kebutuhannya ya

44:55Counter nya cuma satu

44:57Di satu halaman itu cuma satu, gak bisa banyak

44:59Salah satunya

45:01Nah, seperti itu

45:03Misalkan tadi apa lagi, ada proxy

45:05Prototype, prototype ini apa?

45:09To share properties among many objects

45:11Of the same type

45:13Constructors contain name property

45:19And class itself contains a bar property

45:21When using ES6

45:25Kemudian

45:35Observer

45:37Ada module

45:39Module patternnya modular ya

45:41Kan ini udah sangat umum ya

45:43Kalau bikin

45:45Nulis kode ya, kalau bisa yang modular

45:47Salah satunya dipesah

45:49Menjadi module-module kecil

45:51Tinggal import, iya kan?

45:53Ini gak ada importnya

45:55Ini export ya

46:05Nanti bisa di import

46:07Ini modular kan

46:09Sehari-hari kita

46:11Udah melakukan itu, cuman ya kita gak tahu itu

46:13Ya itu adalah pola sendiri

46:15Walaupun kita gak tahu nyamanya ya

46:17Mixin, mixin juga sering kan

46:19Middleware yang tadi

46:21Mixin ini buat

46:23CSS

46:25Ini salah satunya

46:27CSS buat SAS

46:29Tapi disini bukan

46:31Ya kan bisa diterapin buat apa aja

46:33Yang lain

46:35Object that we can use in order

46:39To add reusability functionality

46:41To another object or class without using inheritance

46:43Jadi gak harus nge-extend

46:47Class lain untuk nge-inherit

46:49Tapi untuk langsung

46:51Kayak langsung nge-inject functionality-nya ya

46:53Ya, jadi misalkan disini

46:55Kita punya ini

46:57Class dog dengan name

46:59Terus basic dog

47:01That we create doesn't have any property

47:03But a name property

47:05Dog should able do more than just a name

47:07It should be able to bar

47:09Jadi kita bikin sebuah fungsi

47:11Yang namanya dog functionality

47:15Kemudian

47:17Ini

47:19Dimixin, mixing itu apa ya

47:21Kayak dicampur gitu ya, dicampur

47:23Sekelompok

47:25Functionality di-inject

47:27Kayak dimasukin ke dalam suatu

47:29Ya, ini

47:31Ini caranya dengan gini

47:33Jadi dog functionality ini

47:35Dimasukin ke dalam

47:37Class dog

47:39Kalau misalkan nanti ada class cat

47:41Cat bisa bark ga?

47:43Ya gak bisa

47:45Kucing bisa menggonggong

47:47Berarti ini kurang generik ya

47:53Mungkin apa ya

47:55Nama itu aja dog functionality

47:57Ya, berarti

47:59Buat siapapun yang membutuhkan dog functionality

48:01Dulu kan ada mixing dog shadow

48:07Ini kan kayak

48:09Masih ribet ya

48:11Dog shadow itu kayak masih banyak yang

48:13Specifik property, pokoknya ya

48:15Sekelompok fungsionalitas itu

48:17Di-inject, siapapun yang

48:19Membutuhkan apa maksudnya

48:21Selektor apapun

48:23Yang butuh

48:25Tetap setiap shadow

48:27Ya, jadi ketika kita

48:29Udah bikin seperti ini

48:31Secara otomatis

48:33Setiap instance dari dog

48:35Itu dia punya name

48:37Punya fungsi bark dan play

48:39Dan walk tail

48:41Kira-kira kayak gitu

48:43Nah, ini lebih di

48:45Generalisasi

48:47Jadi animal functionality

48:49Bukan hanya dog, bisa walk dan

48:51Bisa sleep

48:53Ini bisa kita masukkan

48:55Ke fungsinality

48:57Si dog ini

48:59Jadi yang tadi ada bark, walk tail dan play

49:01Ditambahkan walk dan sleep

49:03Wait, kok bisa pakai

49:07Super.walk ini dari

49:09Gimana ceritanya

49:11Dari si

49:13Bapaknya

49:15Kan ini nanti bakal di-assign ke

49:17Dari sini ya

49:19Di-assign ke

49:21Prototype

49:23Ke kelas

49:25Yang mana itu ya

49:27Design dulu, abis itu

49:31Design lagi ke dog prototype

49:33Ya, ya, ya

49:35Itu kayak setara

49:37Inferil

49:39Tapi nggak mikir

49:41In terms of class, tapi in terms of

49:43Functionality-nya

49:45Yes

49:47Ada

49:49Apa lagi yang menarik

49:51Discourage

49:57Discourage the use of machine

49:59Gunakan higher

50:03Order component instead

50:05Ya, karena memang react itu kan dia sangat

50:07Lumayan

50:09Akibatnya ke fungsinality kan ya

50:11Jadi dia lebih memilih

50:13Menggunakan function

50:15Yang apa, pattern-pattern

50:17Functional dibandingkan pattern-pattern

50:19Object

50:21Orientate

50:23Oke

50:27Machine udah, middleware tadi

50:29Kurang lebih udah ya

50:31Lagi factory juga udah, animating

50:33View transition

50:35Ini beda ya

50:37Ini apa nih

50:39Udah beda-beda ya

50:41Static input, dynamic input

50:43Lebih ke front-end ya

50:47Ya, lebih ke front-end

50:49Goal, nggak ya

50:51Ini design-pattern plus campur-campur

50:53Yang

50:55Wah, kagum

50:57Oh nggak, nggak goal

50:59Tapi masih menang kan

51:01Oke, sekarang kita balik lagi

51:03Kesini ya

51:05Pertanyaan ya

51:07Kita jawab pertanyaan aja ya

51:09Secara ideal, design-pattern ini

51:11Tentukan berdasaran apa

51:13Berdasarkan what

51:15Behavioral, structural

51:17Tadi kan

51:19Bukan, tadi, ada jawabannya tadi

51:21Di itu, di structure

51:23Guru

51:25Di mana, disini, yang disini?

51:27Di paling awal

51:29Di design-pattern

51:31Maksudnya

51:33Di alamat pertama

51:35Turun ke bawah sedikit

51:37Berdasarkan

51:39Intent dan motivation-nya

51:41Tujuannya apa

51:43Dan

51:45Problem apa yang

51:47Di-solve

51:49Dan pakailah pattern yang

51:51Sesuai

51:53Jadi

51:55Berdasarkan

51:57Misalkan nih, contohnya

51:59Mau bikin sistem payment gateway

52:01Apakah cocok kalau kita pakai design-pattern berbasis service?

52:03Pertama

52:07Payment gateway yang mau dibikin, ada banyak nggak?

52:09Iya, misalkan kita mau

52:11Ada banyak, kalau satu aja

52:13Atau ada banyak

52:15Iya, kalau misalkan kita mau

52:17Connect payment gateway-nya ke mid-trans

52:19Terus ke mana tuh

52:21Ke mana lagi ya

52:23Ke

52:25Bitcoin

52:27Bitcoin, ya Bitcoin, atau

52:29Apa itu?

52:31Nah, pokoknya payment gateway lain gitu ya

52:33Ada banyak gitu pilihannya

52:35Nah, itu kita bisa pakai adapter

52:37Jadi bisa ganti-ganti

52:39Kalau misalkan cuma satu

52:41Singleton aja singleton ya

52:43Cuma satu ya, udah

52:45Satu aja

52:47Jadi

52:49Dan pattern ini

52:51Nggak harus diterapkan

52:53Ketika awal project

52:55Bisa aja di tengah-tengah

52:57Atau lebih seringnya malah begitu kan

52:59Awal-awal mungkin karena terlalu simpel ya udah

53:01Nggak usah mikirin

53:03Terlalu mikirin

53:05Tentang design pattern dan lain-lain

53:07Dan kayaknya di bagian-bagian

53:09Desap-desap bagiannya bisa pakai

53:11Macam-macam design pattern kan, kayak misalnya tadi

53:13Apa tuh, chain of responsibility

53:15Pasti at some point, pasti ada kan

53:17Yang handler satu per satu

53:19Proses kayak apa payment gateway

53:21Ngecek credential user lah

53:23Dan lain-lain, pasti kan aja

53:25Kecuali

53:27Kalau mau bangun dari awal

53:29Sudah tau project-nya gede nih

53:31Kayak

53:33Project besar dah, yang apa sih project yang gede itu

53:35Kayak Cortex misalnya

53:37Mungkin sudah bikin asistektur

53:39Diagramnya dan

53:41Setiap modul-modulnya itu sudah

53:43Sudah ada gambaran mau ngapain

53:45Dan apa yang akan terjadi

53:47Dan setiap modul mungkin ada design patternnya sendiri

53:49Dan bagaimana mengkonektikan antar modul

53:51Punya patternnya sendiri

53:53Dan itu yang ngedeside ya

53:55Biasanya, sistem arkitek ya

53:57Sistem arkitek ya

53:59Betul

54:01Jadi

54:03Kembali lagi ya, tergantung kepada

54:05Scope

54:07Dari project-nya

54:09Team-nya

54:11Yang kayak misalkan micro service monolitik itu

54:13Itu pekan juga enggak?

54:15Arkitektur itu ya

54:17Arkitektur ya

54:19Seandainya kalau cuma mau bangun

54:21Company profile yang cuma 5 halaman

54:23Ya udah, static site generator

54:25Aja udah

54:275 halaman tidak berubah sama XML aja

54:33Tidak usah SSG juga

54:35HTML aja udah, HTML SSG

54:37Doang cukup gitu kan

54:39Oke

54:41Mudah-mudahan jawab ya

54:43Waktu memilih

54:45Ini juga bingung ya, ini design pattern

54:47Kita jarang sekali, tapi ya nggak apa-apa

54:49Kebanyakan company besar itu

54:51Pake design pattern seperti apa?

54:53Maksudnya design pattern apa?

54:55Biasanya nggak tahu

54:59Tapi pasti lebih dari satu nggak sih

55:01Kalau dilihat dari itu ya

55:03Contoh-contoh tadi

55:05Masa sih seluruh codenya Google atau Meta

55:07Cuma pakai factory

55:09Cuma pakai adapter

55:11Pasti kombinasi macem-macem

55:13Pertama, saya jawab dulu

55:15Perusahaan besar itu nggak pakai

55:17Satu aplikasi doang

55:19Mereka punya ratusan aplikasi

55:21Yang mereka gunakan

55:23Ada aplikasi HR, aplikasi

55:25Marketing

55:27Ada marketing CRM

55:29Terus kemudian ada

55:31Macem-macem ya kan

55:33Jadi tergantung setiap

55:35Aplikasi atau setiap solver

55:37Yang mereka gunakan punya partner sendiri

55:39Ya contohnya operating system

55:41Jangan kan

55:43Setiap

55:45Aplikasi punya sendiri

55:47Satu halaman ini aja

55:49Bisa aja mereka

55:51Menggunakan bahkan framework

55:53Yang berbeda

55:55Dalam satu aplikasi

55:57Terus ada banyak juga

55:59Bagian-bagiannya

56:01Bisa aja lebih dari satu design pattern

56:03Lagi-lagi berdasarkan deskripsi tadi

56:05Bisa aja ada factory

56:07Untuk UI komponennya

56:09Tapi ada chain of

56:11Apa tadi yang buat

56:13Chain of responsibility

56:15Yang buat

56:17Bisa nge-check user

56:19Kalau udah, maksudnya dia

56:21Admin atau bukan

56:23Di repo ini bisa ngapusin

56:25Komentar atau engga

56:27Ya kan pokoknya pasti ada

56:29Turut-turutannya kan

56:31Ya betul-betul

56:33Dan bisa

56:35Apa ya, bisa

56:37Dicampur-campur juga

56:39Bisa macam-macam ya, bisa dicampur-campur, bisa digabungin

56:41Bahkan di satu modul pun bisa

56:45Menggunakan lebih dari satu

56:47Pattern kan, tergantung

56:49Apa yang mau dicapai tadi

56:51Yang intinya adalah intent tadi ya

56:53Observe untuk ada notifikasi baru

56:55Atau engga misalnya, ya kalau

56:57Di satu aplikasi yang sebesar ini

56:59Pasti banyak kan pattern yang dipakai

57:01Betul, betul

57:03Jadi, kita gak bisa

57:05Apa ya, gak bisa menjenderalisir

57:07Oh kalau perusahaan gede itu pakenya yang ini

57:09Perusahaan yang menengah

57:11Kebawa pakenya ini, gak bisa

57:13Jadi, memang

57:15Tergantung kebutuhan, tergantung

57:17Jenis aplikasinya, tergantung fiturnya

57:19Banyak ya, it depends-nya

57:21Banyak

57:23Jadi, kita gak bisa

57:25Tau ya, kecuali kita tanya

57:27Tapi mungkin kalau ngomongin

57:31Architectural atau structural

57:33Kayak MVC gitu ya, mungkin lebih

57:35Dimasukakan dalam satu aplikasi

57:37Satu approach

57:39Tapi kalau yang contoh-contoh pattern tadi

57:41Bisa dicampur kan

57:43Betul

57:45Kalau web

57:47Salah satu yang paling

57:49Banyak dipakai MVC kan

57:51Kalau web ya

57:53Mungkin kalau aplikasinya

57:55Kayak Android atau IOS

57:57Itu mereka kadang-kadang punya

57:59Pattern masing-masing

58:01Ada MVVM

58:03Ada viper lah, ada macem-macem

58:05Jadi, mungkin itu

58:07Bisa ditanyakan

58:09Pada saat interview

58:11Atau pada saat kuliah

58:13Oh iya, betul

58:15Compose

58:17Itu pattern ya?

58:19Kayaknya sih pattern

58:21Biasanya

58:23Gak tau, saya pernah lihat juga

58:25Kalau misalkan loongan, misalkan familiar with IOS

58:27Or Android, terus ada MVVM

58:29Ada apa gitu

58:31Familiar with MVVM pattern

58:33Nah itu bisa dilihat di

58:35Loongan pekerjaan

58:37Kalau yang sifatnya itu structural ya

58:39Structural ya

58:41Maybe

58:43Maybe

58:45Itu interactnya tuh tips

58:47Tips

58:49Yang mau memahami design pattern

58:51Seperti apa

58:53Diluar komunikasi ke senior dan baca

58:55Dokumentasi projek

58:57Sering-sering nge-freelance

59:01Sering-sering pindah company

59:03Jadi pindah aplikasi yang dipacar

59:05Sering-sering nge-code-in open source

59:09Itu jadi jago prakteknya

59:11Tapi kan

59:13Tidak tentu tahu itu nama design

59:15Patternnya apa ya

59:17Bisa juga, sudah praktek

59:19Terus kembali lagi ke teorinya

59:21Ada open source

59:25Setiap kali coding, nanya maintainernya

59:27Ini betul patternnya ga sih?

59:29Annoying sih

59:31Tapi kita jadi tau

59:33Kalau latihannya gimana ya?

59:35Maksudnya

59:37Apakah kita, disini kan memang jelas ya

59:39Ada contoh code nya kan ya

59:41Terus

59:43Supaya bisa kita melatih itu

59:45Gimana ya?

59:47Baca ya

59:49Kita coding biasa, pas kita lagi bikin sesuatu

59:51Kita coba matchingin

59:53Kita nebak dulu, ini singleton bukan sih

59:55Kita tanya atau

59:57Team lead atau maintainer

59:59Kalau open source atau apalah

1:00:01Ga tau, ini gue juga belum pernah

1:00:03Ini teori doang

1:00:05Karena kalau mulai dari singleton

1:00:07Kita suruh coding singleton doang

1:00:09Gak bisa ya

1:00:11Kita disediakan dulu, baru kita mikir

1:00:13Oh mungkin ini singleton nih

1:00:15Tapi kan kita butuh di confirm ya

1:00:17Ya mungkin tanya ke AI kali ya

1:00:19Apakah betul ini contoh

1:00:21Codo dari desain pattern singleton

1:00:23Iya

1:00:25Benar juga

1:00:27Kalau kita misalkan kita

1:00:29Kita ambil salah satu dari sini

1:00:31Terus kita bikin sesuatu

1:00:33Kayaknya kebalik ya

1:00:35Jadi apa solusi yang mencari masalah

1:00:37Yang mencari solusi

1:00:39Iya betul

1:00:41Agak

1:00:43Agak triki dua ya

1:00:45Cari-cari masalah dia

1:00:49Masalahnya ga ada

1:00:51Kan masalahnya ga ada, kita mau belajar aja gitu

1:00:53Iya kan

1:00:55Ya harus sering mungkin ini ya

1:00:59Ada ini juga itu

1:01:01Ada perumpamannya, kayak baju

1:01:03Sebenarnya

1:01:05Bukan baju yang

1:01:07Sorry

1:01:09Bukan kita yang menyesuaikan ke ukuran baju

1:01:11Tetapi baju lah yang menyesuaikan ke ukuran kita

1:01:13Lebih sering

1:01:21Mungkin salah satu tipsnya adalah

1:01:23Sering-sering baca kode ya

1:01:25Kita bisa

1:01:31Belajar teorinya dulu

1:01:33Tujuannya apa

1:01:35Ini menolong masalah apa

1:01:37Jadi ketika kita loading beneran

1:01:39Bukan cuman latihan

1:01:41Ternyata ini cocok buat

1:01:43Dipakai singleton nih

1:01:45Kita tau, ya pasti kayak gitu sih

1:01:47Sering-sering baca kode sama sering-sering nulis kode

1:01:51Itulah standar ya

1:01:53Tips dia

1:01:55Kalau non-conventionalnya

1:01:57Dokumentasi dari refactoring guru itu

1:01:59Misalnya masukin ke LLM

1:02:01Misalnya jembenai atau apalah

1:02:03Terus setiap kita coding

1:02:05Kita jelasin aja

1:02:07Masalahnya ini saya menyelesaikan dengan

1:02:09Patter singleton

1:02:11Contoh kode ini

1:02:13Betul atau enggak

1:02:15Biar kita serahkan

1:02:17Perkembangan skill kita pada LLM

1:02:19Dia ngejawab

1:02:21Oh bukan, atau kita nanya apakah

1:02:23Ada pattern lain yang sebaiknya kita pakai

1:02:25Gak tau, ini yang

1:02:27Experimental, solusinya

1:02:29Pasti gitu

1:02:31Benar-benar

1:02:35Tanyaan dari penonton tuh

1:02:41Gimana caranya biar CQRS

1:02:45Sama Event Sourcing bisa jalan badangan tanpa sistem

1:02:47Jadi ribet

1:02:49Kita CQRS aja nggak tau

1:02:51Masih nebak-nebak

1:02:53Itu yang tadi nasi desa bilang kan

1:02:55Yang di awal baru

1:02:57Tapi jadi nggak tau

1:02:59Iya, cuman ya

1:03:01Prakteknya gimana nggak tau

1:03:03Kenapa harus

1:03:05Pakai dua-duanya

1:03:07Nggak bisa salah satu

1:03:09Karena ketika sebuah sistem

1:03:11Menjalankan satu

1:03:13Atau lebih dari satu

1:03:15Apa ya, arsitektur

1:03:17Atau pattern

1:03:19Pasti akan jadi kompleks

1:03:21Ujung-ujungnya ribet

1:03:25Event Sourcing ya

1:03:27Event Sourcing itu apa

1:03:29Design Pattern juga nih katanya

1:03:33Menurut Gemini

1:03:37Design Pattern

1:03:39Where changes to an application state

1:03:41Are stored as a sequence of immutable events

1:03:45Nah, tadi yang saya jelaskan itu

1:03:47Maksudnya

1:03:49Yang mana?

1:03:51Yang tadi kayak CQRS

1:03:53Jadi CQRS itu

1:03:55Yang sepengetauan saya

1:03:57Ternyata salah ya

1:03:59Itu dia

1:04:01Perubahan state

1:04:03Itu disimpan

1:04:05Ke event-event

1:04:07Jadi dia nyimpan event aja

1:04:09Misalkan insert data, update data

1:04:11Delete data, gitu

1:04:13Dia nyimpenya

1:04:15Dalam bentuk event

1:04:17Comment ya, state

1:04:19Terus nanti baru dijalankan

1:04:21Ceritanya

1:04:23Berarti kayak

1:04:25Queuing dong ya

1:04:27Kurang lebih

1:04:29Kayak

1:04:31Queuing, jadi sudah di queue

1:04:33Nanti baru dijalankan satu-satu

1:04:35Ke service yang perlu menjalankan

1:04:37Yang bisa menjalankan comment itu

1:04:39Betul

1:04:41Message queue, message queue ceritanya

1:04:43Yes, kurang lebih

1:04:45Ini ada

1:04:49Dari Stack Overflow

1:04:51Yang sudah jarang dibuka

1:04:53Semenjak ada

1:04:55Ada chatbot

1:04:57CQRS

1:04:59Creation of two object

1:05:01Where there was previously only one

1:05:03Bukan? Salah kan?

1:05:07Apa ini? Kok nggak ngerti?

1:05:13Nggak ngerti

1:05:17Typically this means that each of

1:05:19The object will use different representation

1:05:21Of data

1:05:23Tergantung purpose-nya

1:05:25Commonly used here, write model

1:05:27Read model, jadi kalau misalkan

1:05:29Ada, kalau misalkan kita pakai MVC kan

1:05:31Model VA Controller

1:05:33Itu mau delete, mau update, mau itu kan

1:05:35Satu model itu, kalau ini dia write

1:05:37Berbeda, read-nya berbeda, jadi dipisah

1:05:39Kayaknya ya

1:05:41The key benefit here

1:05:43Is that you can tune the data

1:05:45Structure for your read

1:05:47Use case and your write

1:05:49Use case independently

1:05:51Jadi kan ada beberapa database yang

1:05:53Cepet untuk read

1:05:55Tapi lambat untuk write, begitu juga sebaliknya

1:05:57Mungkin ini yang bisa jadi solusi, mungkin ya

1:05:59Kalau event sourcing

1:06:01Yang tadi

1:06:03Yang tadi sudah disempat saya ilaskan barusan

1:06:05Dia

1:06:07Apa nih?

1:06:09Kok nggak ada?

1:06:15The system by replaying

1:06:17That series of events, jadi kayak queuing

1:06:19Jadi si comment-nya itu

1:06:21Bisa di queuing

1:06:23Oh berarti emang

1:06:31Pasangan ya?

1:06:43Nah ini pertanyaannya adalah

1:06:45Ribetnya dimana?

1:06:49Kita nggak tahu soalnya

1:06:51Apa yang bikin ribet gitu

1:06:53Karena kita nggak pernah pakai

1:06:55Sample-nya mungkin saya pernah pakai

1:06:57Ya kan bener ya, kalau kayak

1:06:59Itu tadi ada contohnya

1:07:01Nah bener kan

1:07:07Kalau kita

1:07:09Untuk read queries itu pakai yang cepat

1:07:11Seperti redis

1:07:13Kalau yang write-nya cepat itu pakai

1:07:15MySQL atau MongoDB

1:07:17Misalkan

1:07:19Itu CQRS

1:07:21Event sourcing itu yang Pub/Sub seperti MQ

1:07:23Ya event sourcing ya

1:07:25Kalau digabung

1:07:29Ketika ada

1:07:37Event untuk menyimpan data

1:07:39Dia akan simpan di

1:07:41MySQL

1:07:43Kalau ada kebutuhan

1:07:45Untuk read, dia akan

1:07:47Mengarah ke read model gitu ya

1:07:49Berarti event sourcing

1:07:51Ini lebih ke source-nya ya

1:07:53Database-nya yang mana ya

1:07:55CQRS ini lebih ke

1:07:57Memilah

1:07:59Ini model untuk read

1:08:01Ini model untuk write gitu ya

1:08:09Kalau event sourcing

1:08:11Lebih ke Pub/Sub

1:08:13Nah tapi kan ini contoh doang ya

1:08:15Contoh doang

1:08:17Contoh doang, iya

1:08:19Sepertinya kita tidak bisa menjawab

1:08:25Secara utuh ya

1:08:27Harus itu dulu

1:08:29Harus konsultasi dulu

1:08:31Harus interview dulu

1:08:33Ini CQRS-nya dipakai

1:08:35Buat apa, event sourcingnya

1:08:37Di level system kan

1:08:39Iya, kita nggak bisa

1:08:41Pertanyaan sangat

1:08:43Spesifik dan kita nggak tahu konteksnya

1:08:45Kita juga nggak ngerti CQRS sama event sourcing

1:08:47Baru teori doang

1:08:49Ini juga belum ngerti sepenuhnya

1:08:51Jadi belum bisa menjawab ya

1:08:53Oke, ada pertanyaan menarik lagi

1:08:57Iya

1:08:59Kalau di front-end tadi kita

1:09:01Udah bahas ya di patterns.dev

1:09:03Teman-teman bisa langsung ke patterns.dev aja

1:09:05Ini ada

1:09:07Pola-pola yang berhubungan dengan

1:09:09Back-end

1:09:11Ya, back-end yang ini kurang lebih ya

1:09:13Karena dia kan bahasnya JavaScript

1:09:15Dan Node.js ya

1:09:17Yang front-end juga ada

1:09:19Misalkan ketris checking

1:09:21Road-based splitting

1:09:23Bundle splitting

1:09:25Preface preload

1:09:27Kayaknya ada lagi deh

1:09:29Ada ya

1:09:31Udah segitu aja ya, oke

1:09:33Itu yang lengkap banget ada di bukunya

1:09:35Oh iya, bukunya ya

1:09:37MVC

1:09:41Di front-end juga ada yang MVC

1:09:43Ada dulu namanya Ember.js

1:09:45Itu dia pakai MVC, tapi udah

1:09:47Sudah tidak begitu

1:09:49Terdengar lagi sekarang

1:09:51Masih di-maintain nggak sih?

1:09:55Coba aja lihat

1:09:57Ember.js

1:10:01Malah dia lebih duluan

1:10:03Malah kalah sama Angular

1:10:11Angular aja masih

1:10:13Masih

1:10:15Kedengeran gitu

1:10:17Masih 4 hari yang lalu

1:10:19Ya, ini

1:10:23Dia pakai MVC

1:10:25Setau saya, dan ini front-end

1:10:27Design pattern sama design

1:10:29Arsitektur sepertinya beda

1:10:31Iya, beda

1:10:33Yang satu pola

1:10:35Yang satu arsitektur

1:10:37Tadi ini udah kita bahas ya

1:10:41Smartdom pattern

1:10:45Ada Smartdom component

1:10:47Ada presentation

1:10:49Container

1:10:51Container, iya betul

1:10:53Dia dulu pakai container yang

1:10:55Yang ada state, dia itu container

1:10:57Yang

1:10:59Cuma view doang itu

1:11:01Dump component ya

1:11:03Terus

1:11:07Apa nih

1:11:09Bahas security hole di Next.js

1:11:11Yang kemarin ya

1:11:13Baru kita bahas tentang security ya

1:11:15Tiba-tiba ada security hole

1:11:17Critical nya 9.1

1:11:19Belum 10 sih

1:11:21Belum 0 day

1:11:25Wah ada event apa tuh

1:11:27Kita mau dong Papsap

1:11:29Kalau ada GUL

1:11:33Kayaknya kejadian yang hampir GUL

1:11:35Atau kebobolan

1:11:37Masih 1-0

1:11:47Masih 1-0

1:11:49Mantap

1:11:55Oke

1:11:57Next

1:11:59Kita bahas

1:12:01Kita ga gitu ngerti sih ya

1:12:03Problem utamanya apa?

1:12:05Ada yang tau ga sih, tail dare nya

1:12:07Authentication kayaknya ya

1:12:09Oh, oke

1:12:13Bisa di bypass

1:12:15Oh wow

1:12:17Pakai

1:12:19Custom header

1:12:21Yang bikin heboh adalah

1:12:23Di Cloudflare

1:12:25CEO nya Cloudflare bilang

1:12:27Ya gausah pake Fairsell, pake Cloudflare aja sih

1:12:29Kita sudah patch header itu

1:12:31Terus dibalas lagi

1:12:33Sama CEO nya si Fairsell

1:12:35Iya

1:12:37Kalau udah patch kenapa ga di pull request ya

1:12:39Bukan

1:12:41Di block

1:12:43Custom header itu di block

1:12:45Cuma kalau custom header itu di block

1:12:47Ada yang ga bisa working

1:12:49Kayak super base kayaknya

1:12:51Atau ada base tertentu yang menggunakan

1:12:53Menggunakan

1:12:55Custom header itu

1:12:57Hmm

1:12:59Ya

1:13:01Kompleks

1:13:03Ya, drama lah ya

1:13:05Kompleks juga sih

1:13:07Masalahnya

1:13:09Bug nya terjadi karena logic

1:13:11Jadi logic bug bukan karena

1:13:13Bukan karena

1:13:15Bug ke goblokan

1:13:17Bukan goblok

1:13:19Bukan goblok Mak

1:13:21Ini berarti karena kompleksitas

1:13:23Maksudnya kompleksitas kebutuhan ya

1:13:25Ya, pure complexity logic

1:13:27Mak

1:13:29Hmm

1:13:31Oke

1:13:33Kemarin saya tanya-tanya AI

1:13:35Tentang SSR, dia bilang kalau SPA

1:13:37Juga bisa SSR menggunakan

1:13:39VT

1:13:41SPA, React, Vue

1:13:43Juga bisa SSR, bisa

1:13:45VT ada server nya kan

1:13:47Ada plugin nya, tapi engga

1:13:49Bukan by default

1:13:51Harus di install dulu

1:13:53Hit server ya

1:13:57Iya, bisa-bisa

1:14:01Dari dulu juga bisa

1:14:05Yang CSR juga kita bungkus pakai express

1:14:07Bisa jadi SSR kok

1:14:09Sebenernya

1:14:11Bisa-bisa aja

1:14:13Misal di aplikasi kita hanya butuh sebagian

1:14:15Membutuhkan SEO, apakah mending pakai VT

1:14:17Atau langsung Next.js VT

1:14:19Jangan

1:14:21Jangan apa-apa Next.js dulu

1:14:23Ya, misal di aplikasi kita hanya butuh

1:14:25Sebagian yang membutuhkan SEO

1:14:27Saya lebih mending

1:14:35Aplikasi yang hanya untuk

1:14:37Frontend yang untuk SEO sesingin

1:14:39Pakain WordPress aja

1:14:41Aplikasi internal bikin lah pakai

1:14:43Next.js atau pakai

1:14:45Content, aplikasi-aplikasi

1:14:49Dipisahkan aja

1:14:51Jangan, kalau jawaban gue lain

1:14:55Butuh fitur-fiturnya Next.js engga

1:14:57Butuh build and whistle nya

1:14:59Next.js engga, kayak yang otomatis

1:15:01Handphone optimization

1:15:03Image optimization

1:15:05Routing nya

1:15:07Routing nya banyak

1:15:09Denerbit atau engga, pokoknya

1:15:11Fitur yang apa

1:15:13Itu kan mempermudah hal-hal kompleks ya

1:15:15Kalau misalnya website nya besar dan emang butuh

1:15:17Itu semua ya udah pakai aja

1:15:19Tapi kalau engga terlalu butuh

1:15:21Kalau namanya dikit ya udah

1:15:23Web sama

1:15:25Router-router yang sebetul-sebetul

1:15:27Sekarang kan banyak-banyak kan

1:15:29Alternatif lain mungkin

1:15:31Astro bisa jadi pilihan juga karena

1:15:33Astro bisa kita set kan, oh saya mau

1:15:35Ini client saya render, oh saya mau server saya render

1:15:37Oh saya mau, by default engga perlu

1:15:39JavaScript, terus misalkan di bagian bawahnya ya

1:15:41Island, Citilator gitu-gitu

1:15:43Kayaknya bisa juga, gitu

1:15:45Jadi kalau misalkan mau jadi satu aplikasi, engga mau

1:15:47Dipisah, aplikasi nya tetep sama

1:15:49Framework nya tetep sama, ya bisa pakai

1:15:51Astro, karena Astro juga bisa pakai

1:15:53Vue, bisa pakai React, mau

1:15:55Gak suka Vue atau React, bisa pakai

1:15:57Svelte gitu kan, jadi

1:15:59Cukup flexible lah ya

1:16:01Kalau yang simple banget

1:16:03Malah Vite sama React Router

1:16:05Udah jalan ya

1:16:07Kalau misalnya simple banget

1:16:09Dan engga pengen pakai Framework ya, kasusnya

1:16:11Gak butuh rasa, engga butuh sama

1:16:13Offeringnya reksial, Astro

1:16:15Ya setiap

1:16:17State internal nya React aja

1:16:19Misalnya cuma butuh itu ya Vite dan React

1:16:21Router, udah cukup ya

1:16:23Yes

1:16:25Pertanyaan berikutnya, baru tau

1:16:29Ternyata engga cuma back-end API doang

1:16:31Yang bisa di blockir, sekarang gambar pun

1:16:33Bisa, ah namanya Corp

1:16:37Oh, Corp ya

1:16:39Kalau dulu Corp, sekarang namanya Corp

1:16:41Gitu ya, kepanilannya apa?

1:16:43Ya itu buat gambar mungkin, ya coba aja

1:16:45Picture ya, cross origin

1:16:47Cross origin, resource, picture gitu

1:16:49Bener ini, origin

1:16:53Resource

1:16:55Picture

1:16:57Policy

1:16:59Adanya resource policy

1:17:01Kalau dulu kan

1:17:05Kita sering pake htaccess

1:17:07No, ini hotlinking

1:17:09Kalau di hotlinking image kita

1:17:11Dibikin no hotlinking

1:17:13Ini adanya

1:17:15Corp

1:17:17Cross origin resource policy

1:17:19Oh ada nih resource ya bentar

1:17:21Ada co-op

1:17:23Corp course

1:17:25Coba buka deh hit nya

1:17:27Banyak banget

1:17:33Snigel

1:17:35Kayaknya bisa

1:17:37Pembahasan sendiri deh course ini segala macem

1:17:39Dan brossel integrity

1:17:41Nanti kita bahas sendiri deh ini

1:17:43Brossel integrity, course

1:17:45Terus kemudian

1:17:47Corp

1:17:49Langsung aja kita tulis

1:17:53Wah

1:17:55Sign in dulu ya, oke

1:17:57Saya klik aja disini

1:18:03Ya, jadi

1:18:05Ada banyak ya, ada course

1:18:07Yang biasa kita kena tuh

1:18:09Kalau main-main api

1:18:11Ada co-op, ada co-ep

1:18:13Apa nih, kita pengen tahu aja

1:18:15Nah ini dia

1:18:17Kalau kita

1:18:19Mau loading

1:18:21Ads, font, video, image

1:18:23Maps, dan payment solution

1:18:25Content security policy

1:18:27Berarti ya

1:18:29Source, font, script

1:18:31Betul

1:18:33Berarti

1:18:37Course origin, embedded

1:18:39Policy, course origin

1:18:41Opener, policy

1:18:43Makanya semua terkait header ya

1:18:45Iya

1:18:47Jadi ada yang boleh ditampilkan

1:18:49Ada yang gak boleh, itu diatur disini ya

1:18:51Biasanya harusnya, yang paling

1:18:53Yang paling aman kan same origin ya

1:18:59Window opener

1:19:01Ini bisa kita bahas

1:19:03Nanti

1:19:05Jadi material sendiri

1:19:07New discussion

1:19:09Browser security lah bahasanya

1:19:11Browser

1:19:13Security

1:19:15Ya

1:19:17Policy ya

1:19:19Oke, ada macem-macem

1:19:21Nanti juga sekalian kita sambungin ke itu

1:19:23Ke

1:19:25Content security policy

1:19:27Ya

1:19:29Apa lagi ya

1:19:31Ya udah policy kan chat-nya

1:19:33Yes

1:19:35Strict transport

1:19:37Strict transport

1:19:39Yes

1:19:41Yes, protection header banyak

1:19:43Oke, ada lagi yang mau ditanyakan

1:19:49Gak ada ya

1:19:53Sudah berapa score-nya

1:19:55Masih 1-0

1:19:57Indonesia bakal lulus gak

1:20:03Masih ada kemungkinan lulus

1:20:05Pilar dunia

1:20:07Masih kalau menang ya, bener gak

1:20:09Iya, ini masih

1:20:11Keringkat ke-4

1:20:13Kalau keringkat 3 atau 4 itu

1:20:15Ada 1-2 lagi playoff

1:20:17Berarti masih ada harapan

1:20:21Masih, cuma

1:20:23Terus ya

1:20:25Mungkin gak

1:20:27Minimal lulus ke

1:20:29Round selanjutnya

1:20:31Oh, jadi

1:20:33Kalo misalkan peringkat 2 atau peringkat 3

1:20:35Terbaik, nanti dia akan

1:20:37Tanding lagi sama lawan yang lain

1:20:39Nanti baru bisa masuk gitu ya

1:20:411-2, 1-2 itu

1:20:43Langsung lulus ke babak pinjisi

1:20:45Yang ke dunia, 3 dan 4-nya

1:20:47Diadu lagi sama 3 dan 4 yang lain

1:20:49Oh, iya iya iya

1:20:51Oke

1:20:53Oke, kalau gitu untuk malam ini

1:20:57Cukup?

1:20:59Cukup ya

1:21:01Kalo misalkan

1:21:03Ada yang kurang

1:21:05Kita minggu depan liburkan ya

1:21:07Minggu depan kita libur

1:21:09Sementara, lebaran dulu lah

1:21:11Kalo nanti misalkan

1:21:15Oh, mau dibahas

1:21:17Sekarang?

1:21:193 menit aja

1:21:21Boleh, siap siap siap

1:21:23Kalo temen-temen nanti

1:21:25Ada yang mau dibahas lebih lanjut tentang design pattern

1:21:27Bisa langsung kesini ya

1:21:29Nanyain lagi, nanti kita jawab lagi

1:21:31Karena kita pun

1:21:33Gak belajar gimana-gimana

1:21:35Tentang design pattern sebenernya

1:21:37Jadi kita juga agak-agak bingung juga

1:21:39Mau bahas apa

1:21:41Dari sisi mananya

1:21:43Oke

1:21:45Kalau kita anggap itu selesai, berarti

1:21:47Kita berdasarkan

1:21:49Bedah situs mau

1:21:51Yuk, bedah situs

1:21:53Bedah situs, oke

1:21:55Bedah situs baru ada satu

1:21:57Yang tadi

1:21:59Iya

1:22:01Yang tadi

1:22:03Boleh, boleh, boleh

1:22:05Bedah situs ya

1:22:07Kalo temen-temen ada

1:22:13Ada website yang mau di bedah

1:22:15Baik itu secara performance

1:22:17Apa lagi ya

1:22:19Aspeknya apa? Security, performance

1:22:21Maksudnya dari course ya

1:22:23Security policy, content security policy

1:22:25Dari browser security

1:22:27Mungkin desainnya

1:22:31Minta di apa

1:22:33SEO-nya

1:22:35Apa lagi

1:22:39Ya performance yang ukuran

1:22:41Blocking ke apa segala macem

1:22:43Ya itu performance yang masuk performance

1:22:45Best practice, best practice

1:22:47Kodenya mau dikomentarin

1:22:49Boleh, silahkan ya

1:22:51Silahkan

1:22:53Tulis aja disini

1:22:55Website-nya, ini contohnya

1:22:57Saya seng-seng bikin

1:22:59Website buat ngobrolin web

1:23:01Jadi kalo

1:23:03Kalo temen-temen punya website

1:23:05Pribadi atau project yang mau

1:23:07Di bedah

1:23:09Nanti kita dahulukan

1:23:11Yang temen-temen dulu ya

1:23:13Ini cadangan aja

1:23:15Oke, berarti

1:23:17Ini episode 2 minggu lagi ya

1:23:19Untuk pedas titus ya

1:23:21Oh ini ada gak?

1:23:23Share github-nya, baru join

1:23:25Ada di kesana.in/ngobrolinweb

1:23:27Langsung aja

1:23:29Ini kita kasih

1:23:31Shortener-nya

1:23:33Atau github.com/ngobrolin

1:23:39Sama

1:23:41Oke, cukup

1:23:45Cukup ya

1:23:47Cukup

1:23:49Oke, kalo gitu

1:23:51Terima kasih banyak buat temen-temen semuanya

1:23:53Yang sudah meramaikan

1:23:55Sambil nonton bola

1:23:57Kita ketemu lagi

1:24:012 minggu lagi

1:24:03Karena minggu depan

1:24:05Lebaran, jadi sekalian aja

1:24:07Buat temen-temen yang merayakan

1:24:11Selamat lebaran

1:24:13Yang mudik juga hati-hati di jalan

1:24:15Selama sampai tujuan

1:24:17Itu aja buat malam ini

1:24:19Terima kasih banyak semuanya

1:24:21Selamat malam, bye bye