OldSchoolFrontFrame/
│
├── framework/ # Core library — read-only for app developers
│ ├── app/
│ │ └── init.js # App bootstrap: initApp()
│ ├── component/
│ │ └── component.js # Component() class
│ ├── config/
│ │ └── config.js # JSON/YAML config loader
│ ├── core/
│ │ ├── reactivity.js # Proxy-based reactive state (97 lines)
│ │ ├── binder.js # DOM binding engine
│ │ └── events.js # data-* event handler attachment
│ ├── loader/
│ │ └── loader.js # Module loader with CSS scoping
│ ├── module/
│ │ ├── module.js # defineModule()
│ │ └── SERVICES.md # Services layer convention guide
│ ├── router/
│ │ └── router.js # Hash-based router
│ ├── store/
│ │ └── store.js # Global store
│ └── module.js # Re-export alias
│
├── example/ # Interactive demo app (10 modules)
│ ├── app.js # App bootstrap with routes
│ ├── index.html # Shell HTML with sidebar nav
│ ├── config.yaml # Example YAML config
│ ├── components/ # Shared components (e.g. auth)
│ └── modules/ # One folder per route
│ ├── home/
│ ├── bindings/
│ ├── listas/
│ ├── eventos/
│ ├── rutas/
│ ├── store/
│ ├── servicios/
│ ├── componentes/
│ ├── perfil/
│ └── auth/
│
├── cli/
│ └── ols.js # Scaffolding CLI
│
├── project/ # Starter template (output of CLI)
│
├── Dockerfile
├── docker-compose.yml
├── nginx.conf
│
└── docs/
├── README.md
├── PHILOSOPHY.md
├── CONTRIBUTING.md
└── CODE_OF_CONDUCT.md
When building your own app, follow this layout:
myapp/
├── framework/ # OLS core (don't edit)
├── modules/ # One subfolder per route
│ └── <name>/
│ ├── <name>.html # Template
│ ├── <name>.js # defineModule() call
│ ├── <name>.css # Scoped styles (optional)
│ ├── services/ # API/data functions (optional)
│ │ └── <name>.service.js
│ └── components/ # Local reusable UI (optional)
├── components/ # Global reusable components
├── config/ # app.json or app.yaml
├── app.js # initApp() entry point
└── index.html # Shell HTML
| Item |
Rule |
| Module folder |
Lowercase, no spaces: clientes, user-profile
|
| Module files |
Must match folder name: clientes.html, clientes.js
|
| Service files |
<name>.service.js inside services/
|
Route key in initApp
|
Matches the module folder name |
| CSS selector scope |
Automatically scoped to module root |
Framework vs App separation
-
framework/ contains library code only. Do not add app logic here.
-
example/ and modules/ contain your application.
- When upgrading OLS, you only replace the
framework/ folder.
| File |
Lines |
core/reactivity.js |
97 |
core/binder.js |
~180 |
core/events.js |
~90 |
router/router.js |
~120 |
store/store.js |
~80 |
module/module.js |
~70 |
loader/loader.js |
~110 |
component/component.js |
~120 |
app/init.js |
~70 |
| Total |
~939 |