Distributing UI Libraries: in a post Web-Component world

Distributing UI Libraries
in a post-Web-Component world
Rachael L Moore
Sr UI Engineer
OpenTable
morewry
OpenTable Tech Talks
Current Web Development
at OpenTable
Tues Feb 2, 2016

Application Built With UI Components

Application
Distributing UI Components to an Application
Application
UI
Components

Package Manager Diagram
User
Request
Package
Manager
Component
Packages

> pkgmgr install a-gui
Package Manager Example

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

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

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>
<a-gui color="blue"
size="large">
</a-gui>
User's Code
git commit -m "(feat) add size option"

</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
> npm install
# get latest
# create lock file

> npm install
# get latest
# create lock file
> npm install
# skip latest
> npm install
# get latest
> npm install
# get latest
# create lock file
> npm install
# skip latest
> npm install
# get latest
# create 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

UI Component Definition
style
script
text
markup
images

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 Component
Distribution practices

Bower
Flat dependency tree
No version locking
Fewer third party tools?

"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

> touch ~/.netrc && vim ~/.netrc
machine github.com
login ?
password ?
git config / token in .netrcSource

Custom registry
Custom file repository
.bowerrc config
Custom resolver
Requires hosting
Private Bower

Private Bower Registry
User
Install
Private
Registry
Public
Registry

{
"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>

{
"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
v1.0.0
master

feature
v1.0.1v1.0.0
master

feature
v1.0.1v1.0.0
v1.1.0-rc
master

feature
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 at
opentable.com/careers/
We’re hiring!
Visit our careers page at
opentable.com/careers/

Distributing UI Libraries: in a post Web-Component world

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (8)

Similar to Distributing UI Libraries: in a post Web-Component world

Similar to Distributing UI Libraries: in a post Web-Component world (20)

Recently uploaded

Recently uploaded (20)

Distributing UI Libraries: in a post Web-Component world