Skip to content

Instantly share code, notes, and snippets.

@sebs

sebs/monorepos-lerna.md

Last active April 18, 2019 20:53
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save sebs/1ab00e2f78243dbce82eb77f698d34ff to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save sebs/1ab00e2f78243dbce82eb77f698d34ff to your computer and use it in GitHub Desktop.
Download ZIP
Raw
monorepos-lerna.md

managing webcomponents (or anything else) with monorepos using lerna.js

IRL Observations

  • Company repos are a mess
  • Lots of projects, nothing builds, nothing fits in each other
  • When using package managers module(a)->uses->module(b) is a prime usecase
  • this is slow without tooling
  • one way to improve on that is to combine multiple dependants into one repository and manage it with lerna.js

Challenge

Provide one repository with all tools and self built modules to provide everything needed to roll out a bunch of single page applications based on a custom set of UI components These componentsa get their data from a set of services described by swagger.json files.

Fair Share of Warning

  • You might want to check if you have the funds for such a big project.
  • Make sure you dont check too many of those browsers in the "browser" matrix
  • Try an engineering approach, not a try and error one. Make sure build and test scales
  • Have the resources availabe: Development Machines, Build Servers, Shipping Infrastructure, Time
  • You have to do all 3 types of testing: unit, integration and system

Elements

  • SPAs are shipped as package of HTML with asset files and served via https
  • Dependencies (modules) are managed with a package manager
  • WebComponents can be built from various dependencies (using the import keyword)

The Price of Testing

Security > Load/Stress > Platform > Integration > Unit Test Cost

  • This is not linear
  • Web component tests are mostly Integration Tests (headless chrome)
  • build js components as es6 to use in web components
  • RFCs and Webstandards matter. Validate this completely
  • Be smart about your pipeline
  • Buy CPU Time, not cores

Using APIs

  • do not waste your time writing clients (if possible) - use a generator
  • version them with semVer
  • Your SPA code does only use the generated clients
  • each new API version gets a new api client
  • publish them to your package manager

components

In Javascript Land, components get published to npm in a fixed format and the infrastructure is so far pretty reliable. So a option might be a private organization at npmjs.org, or a self hosted clone in form of a local proxy-like verdaccio setup.

  • npm version & npm publish can be very useful tools
  • know your package manager
  • verdaccio can be set up locally
  • npm as backend serves other components
  • most new JS component frameworks assume npm - see package.json
  • self-contains everything needed for test and build
  • usable w.o. any limittions by other parts of the org or other repos
  • be strict, automated lint everything (test before lint to stay sane)

generators

  • scaffolding is not to be done by a manual job
  • test the scaffolded code
  • generators are part of the repo
  • ci and release setup
  • npm install && npm build && npm test
  • generators are just a job
  • make it easy to extract components

element catalogue

  • shows more

Deployment

  • deploy every pushed branch
  • deploy every tag
  • keep all assets of all deploys, log this
  • maybe decouple deployment from CI
  • deployment notices
  • automatic cleanup (end of work week) - keeps the AWS bill tiny
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment