Project Structure - cynchro/OldSchoolFrontFrame GitHub Wiki

Project Structure

Repository layout

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

App folder conventions

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

Naming rules

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.

Framework size

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
⚠️ **GitHub.com Fallback** ⚠️