A three-part talk that describes a unified filesystem pattern spanning from a single-file library to an entire app.
Tutorial
| time | section | notes |
|---|---|---|
| 00:00 | Introduction | |
| 01:13 | Some design goals | The folder is the cosmos |
| 03:15 | Part 1: libraries | OLSKString |
| 05:25 | Library examples | |
| 08:02 | Complex library | Zero Data Wrap |
| 09:57 | Part 2: components | Build and run my apps on your machine, [[System A (TBA)]], [[System B (TBA)]] |
| 10:43 | System A: simple | OLSKLanding |
| 13:08 | System A: complex | OLSKAppFeatureList |
| 14:48 | System B: simple | OLSKPlaceholder |
| 15:32 | System B: complex | OLSKInstall |
| 17:13 | Part 3: apps | Hyperdraft |
| 19:40 | .env | |
| 20:41 | rollup-config.js | |
| 21:29 | os-app | |
| 21:54 | Prefixes | |
| 23:42 | _shared | |
| 24:26 | Excluded folders | |
| 25:40 | Just folders | |
| 25:59 | controller.js | |
| 28:13 | submodules | |
| 28:35 | Comparing apps | Joybox |
| 29:38 | Productivity | Measure ability to make updates to older projects |
Some design goals
The folder is the cosmos and very modular. Generally organize files however you prefer and name them what you want, except for some conventions that hopefully will become customizable. Avoid sorting by type.
Decouple the folder structure from app logic. Avoid creating directories that correlate to public URL paths.
All projects share a consistent logic. If you understand one, you understand them all.
Part 1: libraries
Think of it as a list of functions specified in main.js, with corresponding logic test suites for each function in main-tests.js. No build system is required to run. Simply test with olsk-spec.
Part 2: components
Rather than abstract code, these are visual interfaces specified in HTML via templating language. EJS templates are in main.ejs, Svelte templates are in main.svelte. Interface test suites are specified by the pattern ui-test-* and can be run with olsk-spec-ui.
System A requires no build or compile and can be tested after starting olsk-express. System B requires the additional olsk-rollup-watch. See Build and run my apps on your machine for description of the two systems.
Part 3: apps
rollup-config.js passes variables in .env from Node.js to JavaScript.
controller.js defines the public URL path and language codes.
os-app is simply a combination of libraries and components. Subfolders can be named anything, but I use prefixes as a personal preference for tidiness: open-* means public-facing; sub-* is one way to organize submodules; machines access the contents of tech-*.
__* is a convention to exclude from the version control system.
Part of Project workflow.