Patterns.dev

• Materi online gratis yang membahas pola perancangan aplikasi web dan optimasi performa, menyediakan konten pembelajaran yang berfokus pada JavaScript dan framework modern
• Merangkum secara sistematis pola desain, rendering, loading, dan teknik peningkatan performa yang dikhususkan untuk Vanilla JavaScript, React, Vue
• Mendukung lingkungan praktik CodeSandbox dengan contoh-contoh berorientasi praktik seperti penggunaan ulang kode, manajemen state, strategi rendering, optimasi bundle
• Pola desain bukan aturan, melainkan alat referensi, disajikan sebagai cara untuk membantu menyelesaikan masalah yang berulang dan memahami kesamaan dalam kode
• Mencakup sintaks ES2017+ terbaru dan implementasi berbasis React Hooks, dengan fokus pada skalabilitas struktural dan peningkatan performa aplikasi web skala besar

---

Gambaran Umum

• Patterns.dev adalah sumber daya online gratis untuk meningkatkan arsitektur aplikasi web, dengan fokus pada pola desain, rendering, dan performa
• Menjelaskan tujuan dan cara penggunaan tiap pola beserta contoh implementasi di lingkungan Vanilla JavaScript, React, Vue.js
• Menyediakan unduhan eBook atau PDF serta fitur baca online

Pola JavaScript

• Menyediakan kumpulan pola yang berfokus pada JavaScript dasar dan Node.js
  • Mencakup pola desain tradisional seperti Singleton, Proxy, Prototype, Observer, Module, Mixin, Mediator, Flyweight, Factory, dan lainnya
• Memuat banyak pola optimasi performa dan loading
  • Dynamic Import, Route-based Splitting, Tree Shaking, Prefetch, Preload, PRPL, optimasi third-party, dan lainnya
• Memanfaatkan fitur browser terbaru seperti animasi perpindahan halaman dengan View Transitions API, virtualisasi daftar, kompresi kode, dan lainnya

Pola React

• Menyediakan pola struktural dan strategi rendering berbasis React dan Next.js
  • Mencakup pola komposisi seperti Container/Presentational, HOC, Render Props, Hooks, Compound, dan lainnya
• Perbandingan metode rendering
  • Client-side, Server-side, Static, Incremental Static Generation, Progressive Hydration, Streaming SSR, dan lainnya
• Menyediakan panduan terkait React Server Components dan optimasi Next.js Core Web Vitals
• Dokumen React Stack Patterns (2025/2026) membahas stack teknologi terbaru seperti framework, build tool, routing, manajemen state, integrasi AI, dan lainnya

Pola Vue

• Pola khusus Vue.js yang berfokus pada struktur komponen dan manajemen state
  • Components, Async Components, Composables, Container/Presentational, Data Provider, Dynamic Components, dan lainnya
• Menyajikan struktur kode modern dengan memanfaatkan sintaks Composition API dan <script setup>
• Mencakup pola tingkat lanjut seperti Provide/Inject, Renderless Components, Render Functions, dan lainnya

Filosofi Penerapan Pola

• Patterns.dev memposisikan pola sebagai alat referensi, bukan aturan baku
  • Menyediakan solusi umum untuk menyelesaikan masalah yang berulang, tetapi tidak memaksakan penerapannya di semua situasi
• Tujuan pola desain adalah menyampaikan kesamaan dalam masalah kode agar lebih mudah dipahami manusia
• Menekankan pentingnya pola yang spesifik pada bahasa atau framework, serta menghadirkan pendekatan modern yang melampaui pola GoF tradisional

Dukungan Belajar dan Praktik

• Melalui contoh praktik CodeSandbox, implementasi nyata tiap pola dapat dilihat secara langsung
• Menyediakan metode belajar yang membantu pemahaman konsep lewat materi animasi visual
• Menunjukkan cara meningkatkan efisiensi loading kode dan pengalaman pengguna melalui pola performa web

Ringkasan Fitur Utama

• Implementasi berbasis sintaks ES2017+ yang dioptimalkan untuk lingkungan JavaScript modern
• Berfokus pada optimasi untuk developer React dan peningkatan performa web
• Menekankan kepraktisan dibanding kompleksitas melalui interpretasi modern atas pola desain
• Menyediakan panduan praktis untuk skalabilitas dan peningkatan performa aplikasi web skala besar

[GN⁺]

Komentar Hacker News

• Saat dulu mengembangkan aplikasi enterprise .NET di tempat kerja lama, design pattern benar-benar berguna
  Karena banyak tim memakai pattern yang sama, kode terasa familier dan proyek baru juga punya struktur yang konsisten
  Tapi sekarang saya menangani aplikasi JS berusia lebih dari 10 tahun, dan justru terasa merugikan karena penyalahgunaan getter/setter ala Java EE dan struktur factory yang rumit
  Jika pattern dipakai berlebihan tanpa memahami alasannya, hasilnya bisa jauh lebih buruk daripada kode yang sederhana dan mudah dibaca (teringat prinsip YAGNI)

  • Saya menganggap pattern itu bukan sesuatu yang ‘dibuat’, melainkan ‘ditemukan’
    Sebagai developer, pada akhirnya kita akan secara alami memikirkan struktur seperti Adapter, Builder, Iterator
    Nilai sebenarnya dari design pattern adalah memberi bahasa bersama pada pattern yang ditemukan ini agar kita bisa berkomunikasi dengan lebih mudah
  • Banyak pattern hanya bermakna dalam bahasa yang penuh batasan seperti C# atau Java
    Dalam bahasa yang sederhana seperti C, Go, atau JavaScript, masalah yang sama bisa diselesaikan dengan jauh lebih simpel
  • Saya sering melihat developer dari lingkungan enterprise mencoba memaksakan pattern OOP yang sama ke JS
    Itu tidak selaras dengan filosofi bahasanya
  • Saya juga pernah menerapkan pattern dengan niat baik lalu menciptakan mimpi buruk pemeliharaan
    Awalnya terlihat rapi, tapi lama-lama logika tersebar ke mana-mana, dan saat ada kebutuhan baru pattern itu mudah rusak
    Pada akhirnya saya malah merindukan switch yang sederhana
  • Di antara orang-orang yang bilang pattern tidak berguna, sering kali ada yang belum punya pengalaman dengan sistem skala besar
    Rasanya seperti perbedaan sudut pandang antara orang yang hanya membangun aplikasi kecil dan orang yang membangun gedung pencakar langit

• Dulu ada Yahoo Design Pattern Library
  Fokusnya pada pattern UX, dan merangkum dengan baik berbagai contoh untuk mendorong perilaku pengguna, misalnya pemberian rating
  Tautan asli / Web Archive

  • Ada proyek open source serupa bernama The Component Gallery
    Ini adalah repositori yang mengumpulkan komponen UI dari lebih dari 90 design system, dan juga bagus untuk mempelajari panduan a11y/ARIA
    component.gallery
  • Istilah seperti “accordion” dan “carousel” menjadi terstandarisasi berkat library ini
    Bahasa bersama meningkatkan produktivitas
  • Rasanya membawa kembali nostalgia web lama
  • YUI juga terasa jauh melampaui zamannya saat itu
  • Engineering Yahoo benar-benar hebat, jadi sangat disayangkan mereka runtuh karena kegagalan manajemen

• Ini kumpulan materi yang bagus, jadi saya menambahkannya ke bookmark
  Saya juga membagikan beberapa situs serupa

  • deviq.com — Domain-driven design, design patterns, antipatterns
  • refactoring.guru — Refactoring dan design pattern
  • Standard Patterns in Choice-Based Games
  • Perlu hati-hati karena sering kali orang membuang waktu dengan mencoba memaksa masalah agar cocok ke pattern
  • component.gallery juga merupakan meta-resource yang bagus untuk membuat komponen UI
  • java-design-patterns.com juga layak dijadikan referensi
  • Microsoft Cloud Design Patterns juga tersusun dengan baik
  • Portland Pattern Repository adalah situs aslinya
    Katanya Ward Cunningham membuat wiki untuk tujuan ini c2.com/ppr

• Semakin panjang pengalaman kerja, semakin kecil ketergantungan pada design pattern
  Junior sering berpikir mempelajari pattern adalah jalan pintas karier, tetapi justru sering menambah kompleksitas
  Yang benar-benar penting adalah memahami inti masalah dan struktur data
  Misalnya, saat mencari item yang sama di dua array, pattern sederhana seperti memakai HashMap untuk menurunkan kompleksitas menjadi O(n) jauh lebih berguna
  Hal seperti ini bahkan tidak punya nama, tapi merupakan pattern inti yang dipakai setiap hari di dunia kerja
  Pada akhirnya yang penting adalah prinsip dan konteks, bukan bentuk ala buku teks

  • Pattern punya nilai sebagai bahasa bersama
    Kalau seseorang bilang “saya membuat singleton”, kita langsung paham
    Tapi mempercayai alat secara membabi buta tetaplah masalah
  • Pemanfaatan HashMap yang disebut di atas dalam dunia DB disebut hash join
    Itu juga bisa dilihat di query planner Postgres
  • Tidak perlu malu memakai istilah seperti “factory”
    Hanya saja saat memberi nama pada kode, sebaiknya gunakan nama yang deskriptif
  • Optimasi dengan HashMap juga bisa dilihat sebagai salah satu bentuk dynamic programming
    Bagus untuk dipelajari saat latihan Leetcode
  • Yang lebih penting daripada design pattern itu sendiri adalah pattern dalam cara menerapkan pattern
    Ada buku yang membahas bukan hanya pattern teknis tetapi juga pattern organisasi, yaitu
    Organisational Patterns (James Coplien, Neil Harrison)
    Tautan ringkasan

• Saat kuliah, saya kebetulan pernah mengambil kelas pattern yang diajar langsung oleh Ralph Johnson,
  dan itu termasuk salah satu kelas paling berguna dalam hidup saya
  Wiki Ralph Johnson

• Ada ungkapan, “Design Patterns are a sign of missing language features”
  Artinya, kalau suatu bahasa cukup ekspresif, mungkin pattern itu tidak akan dibutuhkan
  Materi terkait: C2 Wiki, makalah Norvig, artikel Medium

• Situs ini adalah kumpulan tutorial yang rapi, tetapi sayangnya tidak menunjukkan struktur hubungan hierarkis antarpattern seperti 『A Pattern Language』 karya Christopher Alexander
  Pattern pada dasarnya mendapat makna dari relasi atas–bawah seperti itu, tetapi konteks tersebut sering hilang dalam buku teknis
  Akan lebih baik kalau juga dijelaskan dengan lebih jelas masalah apa yang diselesaikan oleh tiap pattern

  • Kalau melihat contoh dari 『A Pattern Language』, tiap pattern terhubung secara organik dengan pattern lain
    Misalnya, “Short Passages” terhubung dengan “Flow Through Rooms”, “Building Thoroughfare”, dan lainnya
    Struktur seperti inilah kekuatan sebenarnya dari pattern language

• Jika pattern disalahgunakan, hasilnya menjadi kode yang lambat dan sulit dirawat

  • Pattern paling efektif saat ditemukan secara alami dalam proses pemecahan masalah
    Kalau mencoba menyelesaikan masalah yang bahkan belum ada sejak awal, kompleksitas hanya akan bertambah
  • Pada akhirnya, pattern hanya benar-benar bersinar jika dipakai dengan tepat

• Dari sudut pandang POSD (Principles of Software Design), pattern yang berguna antara lain

  • Module Pattern
  • Factory Pattern (factory functions)
  • Mediator/Middleware Pattern (dalam bentuk function pipeline)
  • Hooks Pattern
  • Container/Presentational Pattern
    Sebaliknya, Singleton, Mixin, Observer, dan sejenisnya perlu diwaspadai karena bisa memicu peningkatan kompleksitas atau ketergantungan pada state global
  • Ada komentar yang menanyakan apa itu POSD

• Situs ini lebih menonjolkan keluasan daripada kedalaman, jadi terasa seperti tahun 2017
  Yang benar-benar penting adalah menguasai dasar-dasar menangani immutable data
  Latihan menulis kode hanya dengan method array tanpa for sangat membantu

  • Saya pernah memakai ClojureScript, dan itu bagus untuk menangani data immutable
    Di JS, Object.freeze punya keterbatasan, dan pendekatan yang mengembalikan objek baru seperti ramdajs lebih realistis
    Berkat sintaks modern JS, kini hanya sebagian fungsi ramdajs yang masih terasa berguna
  • Setelah membaca ini, saya jadi ingin mencoba mendokumentasikan pattern saya sendiri