Distributing UI Librariesin a post-Web-Component world

Rachael L MooreSr UI EngineerOpenTable morewry

OpenTable Tech TalksCurrent Web Developmentat OpenTable

Tues Feb 2, 2016

Application Built With UI Components

Application Built With UI Components

Application Built With UI Components

Application Built With UI Components

Application Built With UI Components

Application Built With UI Components

Application

Distributing UI Components to an Application

ApplicationUIComponents

Application

Distributing UI Components to an Application

ApplicationUIComponents

Application

Distributing UI Components to an Application

ApplicationUIComponents

Bower & npm

Package Manager Diagram

UserRequest

PackageManager

ComponentPackages

Package Manager Diagram

UserRequest

PackageManager

ComponentPackages

Package Manager Diagram

UserRequest

PackageManager

ComponentPackages

Package Manager Diagram

UserRequest

PackageManager

ComponentPackages

Package Manager Diagram

UserRequest

PackageManager

ComponentPackages

Package Manager Diagram

UserRequest

PackageManager

ComponentPackages

> pkgmgr install a-gui

Package Manager Example

> pkgmgr install a-gui

pkgmgr not-cached //ot/a-gui#^0.2.0pkgmgr resolve //ot/a-gui#^0.2.0pkgmgr install a-gui#0.2.1

> pkgmgr install a-gui

Package Manager Example

> pkgmgr install a-gui

pkgmgr not-cached //ot/a-gui#^0.2.0pkgmgr resolve //ot/a-gui#^0.2.0pkgmgr install a-gui#0.2.1

pkgmgr not-cached //ot/b-gui#^0.3.0pkgmgr fetch //ot/b-gui#^0.3.0pkgmgr resolve //ot/b-gui#^0.3.0pkgmgr install b-gui#0.3.12

> pkgmgr install a-gui

Package Manager Example

Package Managers

Registry

File Repository

Package Format (e.g. manifest)

Source

Semantic Versioning

major minor patch

x.y.z

Source

newer

older

Patch Release

Interoperable fixes

Bug fixes

Minor cleanup

Some refactors

<a-gui color="blue"></a-gui>

User's Code

git commit -m "(fix) color not blue in IE10"

Minor releases

Backward compatible

New optional functionality

No user changes required

<a-gui color="blue"> </a-gui>

<a-gui color="blue" size="large"> </a-gui>

User's Code

git commit -m "(feat) add size option"

<a-gui color="blue"> </a-gui>

<a-gui bg-color="blue"> </a-gui>

Major releases

Breaking changes

Complete rewrite with new public API

Manual changes required by user

User's Code

git commit -m "(api) color -> bg-color"

Version Conflict Resolution

Version ranges

Get latest only if compatible with current

Share compatible dependencies

Version Locking

"Broken" is not only APIs

Bugs may exist in functionality

Glitches when used together

> npm install

# get latest# create lock file

Example Lock FileExample Lock File

> npm install

# get latest# create lock file

Example Lock File

{  "name": "A",  "version": "1.1.0",  "dependencies": {    "B": {      "version": "1.0.1",      "from": "B@^1.0.0",      "resolved": "B1.0.1"    },    "C": {      "version": "2.5.3",      "from": "C@^2.4.0",      "resolved": "c2.5.3"    ...

Example Lock File Source

> npm install

# get latest# create lock file

> npm install

# skip latest# refer to lock file

> npm install

# get latest# create lock file

Example Lock File

{  "name": "A",  "version": "1.1.0",  "dependencies": {    "B": {      "version": "1.0.1",      "from": "B@^1.0.0",      "resolved": "B1.0.1"    },    "C": {      "version": "2.5.3",      "from": "C@^2.4.0",      "resolved": "c2.5.3"    ...

Example Lock File Source

> npm install

# get latest# create lock file

> npm install

# skip latest# refer to lock file

> npm install

# get latest# create lock file

Example Lock FileExample Lock File

> npm install

# get latest# create lock file

> npm install

# skip latest# refer to lock file

> npm install

# get latest

> npm install

# get latest# create lock file

> npm install

# skip latest# refer to lock file

> npm install

# get latest# create lock file

Example Lock FileExample Lock File

Bundlers

Browserify & webpack

Transforms code

Concatenates code

Produces a bundle file

Source

Hybrids

Duo & jspm

Has package manager functionality

Also has bundler functionality

Source

Bootstrap UI Framework

Polymer UI Component Library

UI Component Definition

style script

text

markupimages

UI Component Definition

<a-gui>

require(["lodash1"], function(lodash) { // code });

require(["lodash2"], function(lodash) { // code });

<html> <body> <a-gui> </a-gui> </body></html>

HTML - global scoped - JavaScript

node_modules

accordion

jquery

modal

jquery

bower_components

jquery

accordion

modal

Bower - flat nested - npm

UI ComponentDistribution practices

Bower

Flat dependency tree

No version locking

Fewer third party tools?

Public Github Repo and Tags

Public Github Repo and Tags

Private Github Repo

"dependencies": { "a-gui":  "git+https://?:x-oath-basic@github.com/?/a-gui.git#^1.0.0"}

token in bower.json URI

> git config --global url."https://github".insteadOf git://github

[url "https://github"] insteadOf = git://github

git config / token in .netrcSource

> git config --global url."https://github".insteadOf git://github

[url "https://github"] insteadOf = git://github

> touch ~/.netrc && vim ~/.netrc

machine github.com login ? password ?

> git config --global url."https://github".insteadOf git://github

[url "https://github"] insteadOf = git://github

git config / token in .netrcSource

Custom registry

Custom file repository

.bowerrc config

Custom resolver

Requires hosting

Private Bower

Private Bower Registry

UserInstall

PrivateRegistry

PublicRegistry

Private Bower Registry

UserInstall

PrivateRegistry

PublicRegistry

Private Bower Registry

UserInstall

PrivateRegistry

PublicRegistry

Private Bower Registry

UserInstall

PrivateRegistry

PublicRegistry

Private Bower Registry

UserInstall

PrivateRegistry

PublicRegistry

{ "registry" : "http://bower.ot.com"}

{ "registry" : "http://artifactory.ot.com", "resolvers": [ "bower-art-resolver" ]}

Private Bower - Hacklone

Private Bower - Artifactory

Distributed SourceDeveloper Source

{ "name": "a-gui", "dependencies": {  "b-gui": "^0.2.0" }}

{ "name": "b-gui", "dependencies": {  "c-gui": "^0.2.0" }}

/* a-gui dist concats: a-gui b-gui c-gui */

<a-gui> & <b-gui> - bower.json built JS - <a-gui>

Distributed SourceDeveloper Source

Tasks, Presets, or Recipes

{ "name": "risky", "version": "0.0.0", "dependencies": {  "my-comp": "^5.0.0",  "also-this": "^0.3.0" }}

{ "name": "safe", "version": "0.0.0", "dependencies": {  "my-comp": "^4.0.0",  "also-this": "^0.2.0" }}

safe-bundle.js - default versions behind toggle - risky-bundle.js

Feature Branches & Pre-Releases

v1.0.0

master

feature

Feature Branches & Pre-Releases

v1.0.0

master

feature

Feature Branches & Pre-Releases

v1.0.0

master

feature

Feature Branches & Pre-Releases

v1.0.1v1.0.0

master

feature

Feature Branches & Pre-Releases

v1.0.1v1.0.0

v1.1.0-rc

master

feature

Feature Branches & Pre-Releases

v1.0.1v1.0.0

v1.1.0-rc

v1.1.0

master

Best Practices

Make independent components

Choose a package manager

Follow a versioning scheme

Avoid disrupting existing uses

Choose a package format

Set up a private registry

Set up a private file repository

Offer optional tasks or recipes

Use feature branches

Make pre-releases

Document!

OpenTable is hiring!

We’re hiring!Visit our careers page atopentable.com/careers/

We’re hiring!Visit our careers page atopentable.com/careers/