distributing ui libraries: in a post web-component world
TRANSCRIPT
![Page 1: Distributing UI Libraries: in a post Web-Component world](https://reader034.vdocument.in/reader034/viewer/2022042723/5872b37d1a28ab523c8b6047/html5/thumbnails/1.jpg)
Distributing UI Librariesin a post-Web-Component world
Rachael L MooreSr UI EngineerOpenTable morewry
OpenTable Tech TalksCurrent Web Developmentat OpenTable
Tues Feb 2, 2016
![Page 2: Distributing UI Libraries: in a post Web-Component world](https://reader034.vdocument.in/reader034/viewer/2022042723/5872b37d1a28ab523c8b6047/html5/thumbnails/2.jpg)
Application Built With UI Components
![Page 3: Distributing UI Libraries: in a post Web-Component world](https://reader034.vdocument.in/reader034/viewer/2022042723/5872b37d1a28ab523c8b6047/html5/thumbnails/3.jpg)
Application Built With UI Components
![Page 4: Distributing UI Libraries: in a post Web-Component world](https://reader034.vdocument.in/reader034/viewer/2022042723/5872b37d1a28ab523c8b6047/html5/thumbnails/4.jpg)
Application Built With UI Components
![Page 5: Distributing UI Libraries: in a post Web-Component world](https://reader034.vdocument.in/reader034/viewer/2022042723/5872b37d1a28ab523c8b6047/html5/thumbnails/5.jpg)
Application Built With UI Components
![Page 6: Distributing UI Libraries: in a post Web-Component world](https://reader034.vdocument.in/reader034/viewer/2022042723/5872b37d1a28ab523c8b6047/html5/thumbnails/6.jpg)
Application Built With UI Components
![Page 7: Distributing UI Libraries: in a post Web-Component world](https://reader034.vdocument.in/reader034/viewer/2022042723/5872b37d1a28ab523c8b6047/html5/thumbnails/7.jpg)
Application Built With UI Components
![Page 8: Distributing UI Libraries: in a post Web-Component world](https://reader034.vdocument.in/reader034/viewer/2022042723/5872b37d1a28ab523c8b6047/html5/thumbnails/8.jpg)
Application
Distributing UI Components to an Application
ApplicationUIComponents
![Page 9: Distributing UI Libraries: in a post Web-Component world](https://reader034.vdocument.in/reader034/viewer/2022042723/5872b37d1a28ab523c8b6047/html5/thumbnails/9.jpg)
Application
Distributing UI Components to an Application
ApplicationUIComponents
![Page 10: Distributing UI Libraries: in a post Web-Component world](https://reader034.vdocument.in/reader034/viewer/2022042723/5872b37d1a28ab523c8b6047/html5/thumbnails/10.jpg)
Application
Distributing UI Components to an Application
ApplicationUIComponents
![Page 12: Distributing UI Libraries: in a post Web-Component world](https://reader034.vdocument.in/reader034/viewer/2022042723/5872b37d1a28ab523c8b6047/html5/thumbnails/12.jpg)
Package Manager Diagram
UserRequest
PackageManager
ComponentPackages
![Page 13: Distributing UI Libraries: in a post Web-Component world](https://reader034.vdocument.in/reader034/viewer/2022042723/5872b37d1a28ab523c8b6047/html5/thumbnails/13.jpg)
Package Manager Diagram
UserRequest
PackageManager
ComponentPackages
![Page 14: Distributing UI Libraries: in a post Web-Component world](https://reader034.vdocument.in/reader034/viewer/2022042723/5872b37d1a28ab523c8b6047/html5/thumbnails/14.jpg)
Package Manager Diagram
UserRequest
PackageManager
ComponentPackages
![Page 15: Distributing UI Libraries: in a post Web-Component world](https://reader034.vdocument.in/reader034/viewer/2022042723/5872b37d1a28ab523c8b6047/html5/thumbnails/15.jpg)
Package Manager Diagram
UserRequest
PackageManager
ComponentPackages
![Page 16: Distributing UI Libraries: in a post Web-Component world](https://reader034.vdocument.in/reader034/viewer/2022042723/5872b37d1a28ab523c8b6047/html5/thumbnails/16.jpg)
Package Manager Diagram
UserRequest
PackageManager
ComponentPackages
![Page 17: Distributing UI Libraries: in a post Web-Component world](https://reader034.vdocument.in/reader034/viewer/2022042723/5872b37d1a28ab523c8b6047/html5/thumbnails/17.jpg)
Package Manager Diagram
UserRequest
PackageManager
ComponentPackages
![Page 18: Distributing UI Libraries: in a post Web-Component world](https://reader034.vdocument.in/reader034/viewer/2022042723/5872b37d1a28ab523c8b6047/html5/thumbnails/18.jpg)
> pkgmgr install a-gui
Package Manager Example
![Page 19: Distributing UI Libraries: in a post Web-Component world](https://reader034.vdocument.in/reader034/viewer/2022042723/5872b37d1a28ab523c8b6047/html5/thumbnails/19.jpg)
> 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
![Page 20: Distributing UI Libraries: in a post Web-Component world](https://reader034.vdocument.in/reader034/viewer/2022042723/5872b37d1a28ab523c8b6047/html5/thumbnails/20.jpg)
> 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
![Page 21: Distributing UI Libraries: in a post Web-Component world](https://reader034.vdocument.in/reader034/viewer/2022042723/5872b37d1a28ab523c8b6047/html5/thumbnails/21.jpg)
Package Managers
Registry
File Repository
Package Format (e.g. manifest)
Source
![Page 22: Distributing UI Libraries: in a post Web-Component world](https://reader034.vdocument.in/reader034/viewer/2022042723/5872b37d1a28ab523c8b6047/html5/thumbnails/22.jpg)
Semantic Versioning
major minor patch
x.y.z
Source
newer
older
![Page 23: Distributing UI Libraries: in a post Web-Component world](https://reader034.vdocument.in/reader034/viewer/2022042723/5872b37d1a28ab523c8b6047/html5/thumbnails/23.jpg)
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"
![Page 24: Distributing UI Libraries: in a post Web-Component world](https://reader034.vdocument.in/reader034/viewer/2022042723/5872b37d1a28ab523c8b6047/html5/thumbnails/24.jpg)
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"
![Page 25: Distributing UI Libraries: in a post Web-Component world](https://reader034.vdocument.in/reader034/viewer/2022042723/5872b37d1a28ab523c8b6047/html5/thumbnails/25.jpg)
<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"
![Page 26: Distributing UI Libraries: in a post Web-Component world](https://reader034.vdocument.in/reader034/viewer/2022042723/5872b37d1a28ab523c8b6047/html5/thumbnails/26.jpg)
Version Conflict Resolution
Version ranges
Get latest only if compatible with current
Share compatible dependencies
![Page 27: Distributing UI Libraries: in a post Web-Component world](https://reader034.vdocument.in/reader034/viewer/2022042723/5872b37d1a28ab523c8b6047/html5/thumbnails/27.jpg)
Version Locking
"Broken" is not only APIs
Bugs may exist in functionality
Glitches when used together
![Page 28: Distributing UI Libraries: in a post Web-Component world](https://reader034.vdocument.in/reader034/viewer/2022042723/5872b37d1a28ab523c8b6047/html5/thumbnails/28.jpg)
> npm install
# get latest# create lock file
Example Lock FileExample Lock File
![Page 29: Distributing UI Libraries: in a post Web-Component world](https://reader034.vdocument.in/reader034/viewer/2022042723/5872b37d1a28ab523c8b6047/html5/thumbnails/29.jpg)
> 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
![Page 30: Distributing UI Libraries: in a post Web-Component world](https://reader034.vdocument.in/reader034/viewer/2022042723/5872b37d1a28ab523c8b6047/html5/thumbnails/30.jpg)
> 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
![Page 31: Distributing UI Libraries: in a post Web-Component world](https://reader034.vdocument.in/reader034/viewer/2022042723/5872b37d1a28ab523c8b6047/html5/thumbnails/31.jpg)
> 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
![Page 32: Distributing UI Libraries: in a post Web-Component world](https://reader034.vdocument.in/reader034/viewer/2022042723/5872b37d1a28ab523c8b6047/html5/thumbnails/32.jpg)
> 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
![Page 33: Distributing UI Libraries: in a post Web-Component world](https://reader034.vdocument.in/reader034/viewer/2022042723/5872b37d1a28ab523c8b6047/html5/thumbnails/33.jpg)
Bundlers
Browserify & webpack
Transforms code
Concatenates code
Produces a bundle file
Source
![Page 34: Distributing UI Libraries: in a post Web-Component world](https://reader034.vdocument.in/reader034/viewer/2022042723/5872b37d1a28ab523c8b6047/html5/thumbnails/34.jpg)
Hybrids
Duo & jspm
Has package manager functionality
Also has bundler functionality
Source
![Page 35: Distributing UI Libraries: in a post Web-Component world](https://reader034.vdocument.in/reader034/viewer/2022042723/5872b37d1a28ab523c8b6047/html5/thumbnails/35.jpg)
Bootstrap UI Framework
![Page 36: Distributing UI Libraries: in a post Web-Component world](https://reader034.vdocument.in/reader034/viewer/2022042723/5872b37d1a28ab523c8b6047/html5/thumbnails/36.jpg)
Polymer UI Component Library
![Page 37: Distributing UI Libraries: in a post Web-Component world](https://reader034.vdocument.in/reader034/viewer/2022042723/5872b37d1a28ab523c8b6047/html5/thumbnails/37.jpg)
UI Component Definition
style script
text
markupimages
![Page 38: Distributing UI Libraries: in a post Web-Component world](https://reader034.vdocument.in/reader034/viewer/2022042723/5872b37d1a28ab523c8b6047/html5/thumbnails/38.jpg)
UI Component Definition
<a-gui>
![Page 39: Distributing UI Libraries: in a post Web-Component world](https://reader034.vdocument.in/reader034/viewer/2022042723/5872b37d1a28ab523c8b6047/html5/thumbnails/39.jpg)
require(["lodash1"], function(lodash) { // code });
require(["lodash2"], function(lodash) { // code });
<html> <body> <a-gui> </a-gui> </body></html>
HTML - global scoped - JavaScript
![Page 40: Distributing UI Libraries: in a post Web-Component world](https://reader034.vdocument.in/reader034/viewer/2022042723/5872b37d1a28ab523c8b6047/html5/thumbnails/40.jpg)
node_modules
accordion
jquery
modal
jquery
bower_components
jquery
accordion
modal
Bower - flat nested - npm
![Page 41: Distributing UI Libraries: in a post Web-Component world](https://reader034.vdocument.in/reader034/viewer/2022042723/5872b37d1a28ab523c8b6047/html5/thumbnails/41.jpg)
UI ComponentDistribution practices
![Page 42: Distributing UI Libraries: in a post Web-Component world](https://reader034.vdocument.in/reader034/viewer/2022042723/5872b37d1a28ab523c8b6047/html5/thumbnails/42.jpg)
Bower
Flat dependency tree
No version locking
Fewer third party tools?
![Page 43: Distributing UI Libraries: in a post Web-Component world](https://reader034.vdocument.in/reader034/viewer/2022042723/5872b37d1a28ab523c8b6047/html5/thumbnails/43.jpg)
Public Github Repo and Tags
![Page 44: Distributing UI Libraries: in a post Web-Component world](https://reader034.vdocument.in/reader034/viewer/2022042723/5872b37d1a28ab523c8b6047/html5/thumbnails/44.jpg)
Public Github Repo and Tags
![Page 45: Distributing UI Libraries: in a post Web-Component world](https://reader034.vdocument.in/reader034/viewer/2022042723/5872b37d1a28ab523c8b6047/html5/thumbnails/45.jpg)
Private Github Repo
![Page 46: Distributing UI Libraries: in a post Web-Component world](https://reader034.vdocument.in/reader034/viewer/2022042723/5872b37d1a28ab523c8b6047/html5/thumbnails/46.jpg)
"dependencies": { "a-gui": "git+https://?:[email protected]/?/a-gui.git#^1.0.0"}
token in bower.json URI
![Page 47: Distributing UI Libraries: in a post Web-Component world](https://reader034.vdocument.in/reader034/viewer/2022042723/5872b37d1a28ab523c8b6047/html5/thumbnails/47.jpg)
> git config --global url."https://github".insteadOf git://github
[url "https://github"] insteadOf = git://github
git config / token in .netrcSource
![Page 48: Distributing UI Libraries: in a post Web-Component world](https://reader034.vdocument.in/reader034/viewer/2022042723/5872b37d1a28ab523c8b6047/html5/thumbnails/48.jpg)
> 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
![Page 49: Distributing UI Libraries: in a post Web-Component world](https://reader034.vdocument.in/reader034/viewer/2022042723/5872b37d1a28ab523c8b6047/html5/thumbnails/49.jpg)
Custom registry
Custom file repository
.bowerrc config
Custom resolver
Requires hosting
Private Bower
![Page 50: Distributing UI Libraries: in a post Web-Component world](https://reader034.vdocument.in/reader034/viewer/2022042723/5872b37d1a28ab523c8b6047/html5/thumbnails/50.jpg)
Private Bower Registry
UserInstall
PrivateRegistry
PublicRegistry
![Page 51: Distributing UI Libraries: in a post Web-Component world](https://reader034.vdocument.in/reader034/viewer/2022042723/5872b37d1a28ab523c8b6047/html5/thumbnails/51.jpg)
Private Bower Registry
UserInstall
PrivateRegistry
PublicRegistry
![Page 52: Distributing UI Libraries: in a post Web-Component world](https://reader034.vdocument.in/reader034/viewer/2022042723/5872b37d1a28ab523c8b6047/html5/thumbnails/52.jpg)
Private Bower Registry
UserInstall
PrivateRegistry
PublicRegistry
![Page 53: Distributing UI Libraries: in a post Web-Component world](https://reader034.vdocument.in/reader034/viewer/2022042723/5872b37d1a28ab523c8b6047/html5/thumbnails/53.jpg)
Private Bower Registry
UserInstall
PrivateRegistry
PublicRegistry
![Page 54: Distributing UI Libraries: in a post Web-Component world](https://reader034.vdocument.in/reader034/viewer/2022042723/5872b37d1a28ab523c8b6047/html5/thumbnails/54.jpg)
Private Bower Registry
UserInstall
PrivateRegistry
PublicRegistry
![Page 55: Distributing UI Libraries: in a post Web-Component world](https://reader034.vdocument.in/reader034/viewer/2022042723/5872b37d1a28ab523c8b6047/html5/thumbnails/55.jpg)
{ "registry" : "http://bower.ot.com"}
{ "registry" : "http://artifactory.ot.com", "resolvers": [ "bower-art-resolver" ]}
Private Bower - Hacklone
Private Bower - Artifactory
![Page 56: Distributing UI Libraries: in a post Web-Component world](https://reader034.vdocument.in/reader034/viewer/2022042723/5872b37d1a28ab523c8b6047/html5/thumbnails/56.jpg)
Distributed SourceDeveloper Source
![Page 57: Distributing UI Libraries: in a post Web-Component world](https://reader034.vdocument.in/reader034/viewer/2022042723/5872b37d1a28ab523c8b6047/html5/thumbnails/57.jpg)
{ "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>
![Page 58: Distributing UI Libraries: in a post Web-Component world](https://reader034.vdocument.in/reader034/viewer/2022042723/5872b37d1a28ab523c8b6047/html5/thumbnails/58.jpg)
Distributed SourceDeveloper Source
![Page 59: Distributing UI Libraries: in a post Web-Component world](https://reader034.vdocument.in/reader034/viewer/2022042723/5872b37d1a28ab523c8b6047/html5/thumbnails/59.jpg)
Tasks, Presets, or Recipes
![Page 60: Distributing UI Libraries: in a post Web-Component world](https://reader034.vdocument.in/reader034/viewer/2022042723/5872b37d1a28ab523c8b6047/html5/thumbnails/60.jpg)
{ "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
![Page 61: Distributing UI Libraries: in a post Web-Component world](https://reader034.vdocument.in/reader034/viewer/2022042723/5872b37d1a28ab523c8b6047/html5/thumbnails/61.jpg)
Feature Branches & Pre-Releases
v1.0.0
master
![Page 62: Distributing UI Libraries: in a post Web-Component world](https://reader034.vdocument.in/reader034/viewer/2022042723/5872b37d1a28ab523c8b6047/html5/thumbnails/62.jpg)
feature
Feature Branches & Pre-Releases
v1.0.0
master
![Page 63: Distributing UI Libraries: in a post Web-Component world](https://reader034.vdocument.in/reader034/viewer/2022042723/5872b37d1a28ab523c8b6047/html5/thumbnails/63.jpg)
feature
Feature Branches & Pre-Releases
v1.0.0
master
![Page 64: Distributing UI Libraries: in a post Web-Component world](https://reader034.vdocument.in/reader034/viewer/2022042723/5872b37d1a28ab523c8b6047/html5/thumbnails/64.jpg)
feature
Feature Branches & Pre-Releases
v1.0.1v1.0.0
master
![Page 65: Distributing UI Libraries: in a post Web-Component world](https://reader034.vdocument.in/reader034/viewer/2022042723/5872b37d1a28ab523c8b6047/html5/thumbnails/65.jpg)
feature
Feature Branches & Pre-Releases
v1.0.1v1.0.0
v1.1.0-rc
master
![Page 66: Distributing UI Libraries: in a post Web-Component world](https://reader034.vdocument.in/reader034/viewer/2022042723/5872b37d1a28ab523c8b6047/html5/thumbnails/66.jpg)
feature
Feature Branches & Pre-Releases
v1.0.1v1.0.0
v1.1.0-rc
v1.1.0
master
![Page 67: Distributing UI Libraries: in a post Web-Component world](https://reader034.vdocument.in/reader034/viewer/2022042723/5872b37d1a28ab523c8b6047/html5/thumbnails/67.jpg)
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!
![Page 68: Distributing UI Libraries: in a post Web-Component world](https://reader034.vdocument.in/reader034/viewer/2022042723/5872b37d1a28ab523c8b6047/html5/thumbnails/68.jpg)
OpenTable is hiring!
We’re hiring!Visit our careers page atopentable.com/careers/
We’re hiring!Visit our careers page atopentable.com/careers/