A simple syntax for organizing code across all my projects (libraries, components, and apps).
These examples use JavaScript but the principles can be applied to other languages.
Tutorial
| time | section | notes |
|---|---|---|
| 00:00 | Intro | Distinction between libraries, components, and apps in Universal project folder structure |
| 00:58 | Focus | |
| 01:36 | Syntax | [[fiddle (tba)]] |
| 05:20 | Part 1: libraries | OLSKString |
| 07:36 | Complex library | Zero Data Wrap |
| 09:20 | Part 2: components | OLSKInstall |
| 10:05 | Lifecycle | |
| 11:17 | Value | |
| 11:41 | Interface | [[terminate as soon as possible (tba)]] |
| 12:40 | Control | [[expose api (tba)]] |
| 13:50 | Complex component | OLSKCatalog |
| 15:23 | Setup | |
| 16:19 | Value setters | |
| 17:33 | Data | |
| 18:22 | Message | |
| 19:25 | Part 3: apps | Hyperdraft |
| 23:03 | Comparing apps | Joybox |
| 25:31 | Recap |
Design
Flat organization of code, virtually no nesting.
Everything is technically a list of functions.
Organize code through simple syntax.
Libraries
Lists of functions with globally unique signatures, roughly ordered by when they are invoked.
Components
Only [[System B]] has JavaScript events. Segment event-based functions to aid organization:
- Value
- Manage state.
- Data
- Calculate state.
- Interface
- Receive interface events and trigger Control functions.
- Control
- Encapsulate domain-specific logic.
- Message
- Handle callbacks from other components.
- React
- Rarely used, for updating the interface where [[System B]] does not automatically handle it.
- Setup
- Initialize state and interface.
- Lifecycle
- Receive loading events from other systems and trigger Setup functions. Similar to
viewDidLoadon iOS.
Part of Project workflow.