102 lines
2.6 KiB
Markdown
102 lines
2.6 KiB
Markdown
|
# BOC Frontend Refactor Proposal
|
||
|
|
|
||
|
|
## Problem
|
||
|
|
12 HTML-filer (dashboard.html, crm.html, sales.html, ...) var och en med ~80 rader identisk sidebar-kod. En ändring = 12 filer att uppdatera. Risk för divergens.
|
||
|
|
|
||
|
|
## Alternativ
|
||
|
|
|
||
|
|
### A. Vanilla JS Component System (Rekommenderas)
|
||
|
|
Ett enda HTML-skelett, JavaScript laddar modul-innehåll dynamiskt.
|
||
|
|
|
||
|
|
```
|
||
|
|
web/
|
||
|
|
index.html # Single shell: sidebar + main container
|
||
|
|
assets/
|
||
|
|
boc.js # Router + auth + API
|
||
|
|
components.js # Sidebar, Header, KPI cards, Tables
|
||
|
|
modules/
|
||
|
|
dashboard.js # Dashboard-specific rendering
|
||
|
|
crm.js # CRM module
|
||
|
|
sales.js # Sales module
|
||
|
|
...
|
||
|
|
```
|
||
|
|
|
||
|
|
**Fördelar:**
|
||
|
|
- En sidebar, en källa till sanning
|
||
|
|
- Ingen build step (vanilla JS)
|
||
|
|
- Fungerar med nuvarande nginx static hosting
|
||
|
|
- ~2h att implementera
|
||
|
|
|
||
|
|
**Nackdelar:**
|
||
|
|
- Ingen type safety
|
||
|
|
- Manuell DOM-hantering
|
||
|
|
|
||
|
|
### B. HTMX + Go Templates
|
||
|
|
Go backend servar HTML fragments. HTMX swappar innehåll.
|
||
|
|
|
||
|
|
```
|
||
|
|
backend/templates/
|
||
|
|
layout.html # Shell med sidebar
|
||
|
|
dashboard.html # Fragment
|
||
|
|
crm/
|
||
|
|
list.html
|
||
|
|
detail.html
|
||
|
|
```
|
||
|
|
|
||
|
|
**Fördelar:**
|
||
|
|
- Server-side rendering, SEO-vänligt
|
||
|
|
- Minimal JS
|
||
|
|
- Go standard library
|
||
|
|
|
||
|
|
**Nackdelar:**
|
||
|
|
- Kräver template engine i backend
|
||
|
|
- Mindre interaktivt utan extra JS
|
||
|
|
|
||
|
|
### C. Lit/Web Components (Modern vanilla)
|
||
|
|
Web standard, inget framework. Lit ger reaktivitet.
|
||
|
|
|
||
|
|
**Fördelar:**
|
||
|
|
- Web standard, inget build step med import maps
|
||
|
|
- Reaktiva komponenter
|
||
|
|
- Framtidssäkert
|
||
|
|
|
||
|
|
**Nackdelar:**
|
||
|
|
- Learning curve
|
||
|
|
- ~4h att implementera
|
||
|
|
|
||
|
|
### D. Full SPA (React/Vue/Svelte)
|
||
|
|
**AVVISAS** — För tungt för adminplattform. Byggsteg, bundle size, komplexitet.
|
||
|
|
|
||
|
|
## Rekommendation: Alternativ A (Vanilla JS Router)
|
||
|
|
|
||
|
|
Snabbast att implementera, lättast att underhålla, matchar nuvarande arkitektur.
|
||
|
|
|
||
|
|
### Implementation (estimerad 2-3h):
|
||
|
|
1. `index.html` — shell med sidebar + `<main id="app">`
|
||
|
|
2. `assets/router.js` — hash-based routing (`#/crm`, `#/sales`)
|
||
|
|
3. `assets/components.js` — `renderSidebar()`, `renderKpiGrid()`, `renderTable()`
|
||
|
|
4. `assets/modules/*.js` — en fil per modul, exporterar `render()`
|
||
|
|
5. Sidebar-markup i ett JSON-objekt, renderas dynamiskt
|
||
|
|
|
||
|
|
### Exempel:
|
||
|
|
```js
|
||
|
|
// router.js
|
||
|
|
const routes = {
|
||
|
|
'/': () => import('./modules/dashboard.js'),
|
||
|
|
'/crm': () => import('./modules/crm.js'),
|
||
|
|
'/sales': () => import('./modules/sales.js'),
|
||
|
|
// ...
|
||
|
|
};
|
||
|
|
|
||
|
|
window.addEventListener('hashchange', () => {
|
||
|
|
const path = location.hash.slice(1) || '/';
|
||
|
|
routes[path]().then(m => m.render(document.getElementById('app')));
|
||
|
|
});
|
||
|
|
```
|
||
|
|
|
||
|
|
### Migration path:
|
||
|
|
1. Skapa shell + router
|
||
|
|
2. Konvertera en modul (dashboard) som proof-of-concept
|
||
|
|
3. Konvertera resten en i taget
|
||
|
|
4. Ta bort gamla HTML-filer
|