Panduan SPA — bootstrap NXDOM
Urutan dokumentasi membangun Single Page Application:
index.html, App.js, nxdom.js, modul di
templates/. Setiap bab punya halaman sendiri; ikuti nomor di bawah
(selaras README proyek contoh).
Daftar isi
- 1. Memulai
- 2. Konfigurasi (
App.js) - 3. Rute terdaftar
- 4. Navigasi & refresh
- 5. Worker & PWA
- 6. Referensi
- Cheat sheet alur
1. Memulai
| Topik | Halaman |
|---|---|
| Diagram bootstrap, struktur folder | Ringkasan alur |
<base>, #main, memuat nxdom.js |
Entry: index.html |
| Prasyarat server, Apache, PHP CLI | Menjalankan lokal |
2. Konfigurasi (App.js)
Satu pemanggilan new NX.Tatiye({ … }).run() — detail di
Inisiasi: App.js.
| Opsi | Anchor |
|---|---|
url, urlApi, containerId |
Wajib disesuaikan |
config.js → endpoint |
config.js & NEXA |
endpoint di App.js |
Endpoint multi-API |
route, onRoute, meta |
Route di App.js |
Spinner, debugRouteErrors |
Spinner · Debug route |
3. Rute terdaftar
Mulai mode manual (eksplisit di App.js); tambah
autoload bila tidak ingin menulis setiap nama rute.
- Mode manual —
route: ["beranda", "about"]→templates/.js - Mode autoload — token
"autoload", file + tautan - Autoload + URL bertingkat —
nav.subRoute - Pemetaan route → modul
- Sub-route dinamis
4. Navigasi & refresh
Navigasi & refresh — perbandingan load / refresh / partial.
NX.loadNX.Refresh.partial— mode html / render / updateonRoute& meta- Objek global & event
- Navigasi tautan SPA
5. Worker & PWA
- SPA vs PWA — lapisan SPA, worker, installable
webWorkerserviceWorker·sw.jspwa· manifest- IndexedDB & cache lokal
6. Referensi
Komponen UI (form, modal, grid, …): sidebar Komponen UI. Backend PHP: bagian Backend.
Cheat sheet alur
- Browser memuat
index.html→ shell#main+ nav. App.jsmengimpornxdom.js→NX/NEXA.new NX.Tatiye({ … }).run()→NexaPage→registerAllRoutes().- Manual: tiap string di
route[]→import templates/.js. - Autoload: token
"autoload"→ modul dimuat saat URL dibuka. - Navigasi → handler isi
containerId→onRoute→ meta head. - Opsional:
webWorker,serviceWorker,pwa.