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
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://?:[email protected]/?/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/