Please enable JavaScript.

Coggle requires JavaScript to display documents.

FRONTEND, SSR - Coggle Diagram

- - - - Biome
        
        Tools Js yang menggabungkan beberapa fungsi
      - Prettier
        
        Code formater yang otomatis merapikan code agar mudah dibaca
      - ESLint
        
        Untuk mendeteksi masalah, potensi bug, dan gaya penulisan code
      - Tools yang membantu membuat kode lebih rapi,konsisten dan bebas dari kesalahan
  - - - Menggabungkan berbagai file/module dalam sebuah proyek menjadi file siap dijalankan
      - Vite
        
        Membuat aplikasi web modern dengan cepat
      - SWC
        
        Compiler JS yang sangat cepat
      - Rollup
        
        Menggabungkan file/module
      - esbuild
        
        Bundler dan compiler yang sangat cepat
      - Rolldown
        
        Module bundler yang dibuat dengan rust
      - Parcel
        
        Build tool untuk proyek web
    - - Auth Strategies
        
        Verifikasi identitas user
  - - - Menguji sesuatu untuk memastikan bahwa ia bekerja sesuai yang diharapkan
      - Vitest
        
        Testing framework untuk JavaScript
      - Playwright
        
        Framework untuk end-to-end (E2E) testing aplikasi web
      - Cypress
        
        Framework untuk testing aplikasi web
      - Jest
        
        JavaScript/TypeScript testing framework
    - - Web APIs
        
        API yang disediakan oleh browser supaya JavaScript bisa berinteraksi dengan fitur browser atau perangkat.
    - - Web Security
        
        Praktik untuk melindungi aplikasi web, API, user, dan data dari akses atau tindakan yang tidak sah.
        
        CORS
        
        Mekanisme keamanan browser yang menentukan apakah sebuah web page dari origin tertentu boleh mengakses resource dari origin lain.
        
        HTTPS
        
        Adalah versi aman dari HTTP
        
        CSP
        
        Menentukan resource mana yang boleh dijalankan atau dimuat oleh browser.
        
        OWASP Risk
        
        Risiko keamanan aplikasi web yang paling umum dan berdampak besar
  - - - React
        
        Next js
        
        Membangun aplikasi web full-stack.
        
        Tanstack start
        
        Framework full-stack untuk React dari ekosistem TanStack
        
        Astro
        
        Fokus pada pembuatan website yang cepat
        
        React-router
        
        Library untuk menangani routing/navigation di aplikasi React
      - Angular
      - Vue.js
        
        Nuxt.js
        
        Framework full-stack untuk Vue.js
      - SvelteKit
        
        Svelte
  - - - Astro
        
        Next.js
        
        Vuepress
        
        Dibuat untuk dokumentasi dan website berbasis konten.
        
        Eleventy
        
        Fokus pada pembuatan website yang sederhana, cepat, dan content-focused.
        
        Nuxt.js
    - - Type checkers
        
        Tools yang memeriksa apakah penggunaan tipe data dalam kode sudah benar sebelum program dijalankan.
  - - - Deployment
        
        Proses menempatkan aplikasi atau sistem yang sudah dikembangkan ke lingkungan yang bisa digunakan oleh pengguna
        
        GitHub Pages
        
        Vercel
        
        Netlify
        
        CloudFlare
        
        Railway
        
        Render
    - - Web Components
        
        Kumpulan teknologi standar web yang memungkinkan kita membuat komponen UI yang reusable dan encapsulated
        
        HTML Templates
        
        Custom Elements
        
        Shadow DOM
      - GraphQL
        
        Bahasa query untuk API sekaligus runtime yang memungkinkan client meminta hanya data yang dibutuhkan
        
        Apollo
        
        Kumpulan tools untuk membangun aplikasi menggunakan GraphQL
        
        Relay Modern
        
        Client framework untuk GraphQL, mirip dengan Apollo Client.
    - - Accessibility
        
        Kemampuan sebuah website, aplikasi, atau produk digital untuk digunakan oleh semua orang
      - PWAs
        
        PWA (Progressive Web App), PWA adalah website yang dibuat agar terasa seperti aplikasi native
      - Mobile Apps
        
        Aplikasi yang dibuat khusus untuk digunakan di perangkat mobile seperti smartphone dan tablet.
        
        React Notive
        
        Flutter
        
        Ionic
      - Dekstop Apps
        
        Aplikasi yang dibuat untuk berjalan di komputer/laptop, seperti Windows, macOS, atau Linux
        
        Electron
        
        Touri
        
        Flutter
  - - - Sekumpulan standar, komponen, dan panduan desain yang digunakan secara konsisten untuk membangun produk digital
    - - Seberapa baik design system membantu produk bekerja cepat, efisien, dan tetap responsif, baik dari sisi desain maupun implementasi.
      - DevTools Usage
      - Service Workers
      - Chace-Control
      - Lighthouse
      - Streamed Response
- - - - Claude code
        
        Membantu coding langsung dari terminal
      - Cursor
        
        Code editor berbasis AI
      - Copilot
        
        Asisten AI untuk coding
      - Antigravity
        
        Platform/pengembang ide berbasis AI
  - - - Merencanakan dan meelakukan beberapa langkah untuk meneyelesaikan tugas
    - - Memungkinkan AI terhubung dengan tools,aplikasi,sumber data eksternal
    - - Kemampuan/keahlian khusus yang dimiliki AI
  - - - Gemini
        
        AI dari Google
      - OpenAI
        
        Perusahaan riset dan teknologi AI
      - Antropic
        
        AI dengan fokus pada AI yang aman,dapat diandalkan,dan mudah diarahkan
- - - - Version control
        
        Git
        
        Sistem kontrol versi untuk melacak perubahan kode selama proses pengembangan
    - - Sebagai algoritma interaksi web
    - - Sebagai desain sebuah web
    - - Sebagai kerangka sebuah web
    - - VCS Hosting
        
        GItlab
        
        Tempat untuk menyimpan repository git dan bekerja sama dengan tim
        
        Github
        
        Platform online berbasis git
      - Package manager
        
        yarn
        
        Package manager untuk JS untuk menginstal dan mengelola library
        
        npm
        
        Package manager untuk JS/Node.js untuk memasang,menghapus,mengelola package
        
        pnpm
        
        Sama seperti npm, namun cara menyimpan package lebih hemat ruang dan lebih cepat
        
        bun
        
        Runtime JS modern, menjadi alternatif cepat untuk Node.js + npm
  - - - Kerangka kerja/template web dan aplikasi
    - - React
        
        Library Js untuk membuat UI web dan aplikasi
    - - CSS Franework
        
        Framework untuk CSS
        
        Tailwind
        
        CSS Framework untuk membuat tampilan website
    - - Angular
        
        Framework JS untuk membuat aplikasi web
    - - Svelte
        
        Framework untuk membuat tampilan web
    - - Solid JS
        
        Framework Js untuk membuat Ui yang interaktif
    - - Vue.js
        
        digunakan untuk membangun antarmuka pengguna (User Interface/UI) dan aplikasi web interaktif