Probable Spoon

8bit diagrams

Monorepo gluing all application parts, specific or reusable, each in it's own repository, imported with Git Submodules.

• Composition: Encourage package based development. The application is the sum of it's parts.
• 🚀 High-order CI: Entry point for production deployment. Individual package changes should only trigger development env deployments.
• 🔒 Private: Lerna links all packages locally, indifferent of published or repository visibility state.
• ♻️ Disposable: Monorepo removal should not bring structural changes to the application. It only automates maintenance tasks, like "npm link" calls, and keeps the packages glued.

Table of contents

• Tools
• Development
• Components
• Random tips
• Changelog

Tools

• 🐉 Lerna: Run scripts across multiple packages and automatic linking for fast local development.
• 🐙 Git Submodules: Allow each component it's own code, scripts, issues, history etc. Can easily point to different commits and (re)deploy.

Development

• Clone repo with all submodules

git clone --recurse-submodules [email protected]:asd-xiv/probable-spoon.mono.git

• Link all submodules/packages defined in lerna.json and start Webpack dev server

# "start": "lerna bootstrap && cd ./main.webapp && npm run start"
npm run start

• Build and watch all submodules

# "build:deps:watch": "lerna bootstrap && lerna run --scope '@asd14/*' --parallel build:watch",
npm run build:deps:watch

• Add git submodule

git submodule add <remote_url> <destination_folder>

• Remove git submodule

# Remove submodule entry from .git/config
git submodule deinit -f -- path/to/submodule

# Remove the submodule folder from main project's .git/modules
rm -rf .git/modules/path/to/submodule

# Remove entry in .gitmodules and remove submodule folder
git rm -f a/submodule

Components

Specific:

• [ui] main.webapp: React frontend
• [api] main.api-auth: Authentication & Authorization
• [api] main.api-diagrams: Diagrams and Models

Reusable:

• [core] @asd14/eslint-config: ESLint rules
• [core] @asd14/m: Point free style, functional Javascript library
• [ui] @asd14/react-hooks: Custom reusable React Hooks
• [ui] @asd14/gruvbox-ui: Gruvbox React UI components

Random tips

• Naming conventions that work
• Hierarchical Model-View-Controller
• Better repeat yourself than a wrong abstraction.
• Don't fix imaginary future problem.
• Extract code in libraries and unit test. App = library1 + library2 + component1 + ... + componentN
• Mocking takes time to setup and keep in sync. Don't mock, E2E test.

Changelog

See the releases section for details.