Why Lerna in Advertorial

 How do you share front-end components across various projects within an organisation?

One Option:

A repo for each components

An example

// inside the super-button NPM package + repo
import SuperText from 'super-text'
const SuperButton = props => (
  <button>
    <SuperText value="Click me!" />
  </button>
)
export default SuperButton


// inside the super-text NPM package + repo
const SuperText = props => (
  <span>
    {props.value}
  </span>
)
export default SuperText

Setup Process

  • Testing
  • Linting
  • Build process
  • Publish process
  • Continuous Integration
  • ......

 Add new Feature Process

  • Make changes to each repo

  • Update tests

  • Update the versions

  • Get them code reviewed
  • Publish the packages
  • Update Super Application to use them
  • Send out PR
  • Wait for PR approval
  • .......

 

But wait

Requirements change slightly！！！

Lerna to the rescue

 What is Lerna?

Lerna is a tool that optimizes the workflow around managing multi-package repositories with git and npm."

What is monorepos?

monorepos also called multi-package repos

one repository with all packages

babel-6.2.0/
  packages/
    babel-core/
    babel-cli/
    babel-plugin-syntax-flow/
    babel-.../

What does a Lerna repo look like

Why monorepos?

Pros

  1. Single release process
  2. Cross-package changes are easier
  3. Single place to report issues
  4. Development setup
  5. Cross-package tests are easier
  6. Reduce space for duplicated dependencies

Cons

  1. Codebase looks more intimidating
  2.  Repo is bigger in size

Who use Lerna?

What can Lerna do

  • Lerna Run

One Useful Command

  • Lerna Bootstrap
  • Lerna Publish

Two Primary Commands

Lerna Bootstrap

  1. Installs all external dependencies
  2. Links all of your sub-packages together

 

 

Lerna Publish

  1. Publishes all packages to npm
  2. Does some other magic to update git tags

All the magic about Publish

  • Find packages need to be published.
  • Increment `version` in lerna.json
  • Update the package.json of all updated packages to their new versions.
  • Update all dependencies of the updated packages with the new versions.
  • Create a new git commit and tag for the new version.
  • Publish updated packages to npm.

Lerna Changelog

<type>[optional scope]: <description>

type could be： feat, bug, BREAKING CHANGE

git commit -m "feat: Add interface for plugin in rui-advertorial"

How it works

  • Fixed/Locked mode (default)
  • Independent mode

Lerna in Advertorial

advertorial/
    packages/
       tracker/
           package.json
       advertorial/
           package.json
       targeter/  
           package.json

What are the benefits?

  • Single setup for all packages
  • Single release process
  • One pipeline for all packages
  • Cross-package features are easier to manage
  • Reduce the time and space requirements 

When to use Lerna?

  1. Project which is not too big
  2. Project contains multiple plugins or modules 
  3. Trust among teams

 

Thanks

Made with Slides.com