Modern UI Component libraries influenced by Web Components will rely more heavily on package management than last generation UI Frameworks. In this 15 minute session we'll introduce package management for web graphical user interfaces, talk about the best package contents for a UI component, and some tactics for making smooth releases. For video, skip to 57 minutes, 13 seconds (57:13), http://www.youtube.com/watch?v=BhP86d5IiM4&t=57m13s

1. 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

2. Application Built With UI Components

3. Application Built With UI Components

4. Application Built With UI Components

5. Application Built With UI Components

6. Application Built With UI Components

7. Application Built With UI Components

8. Application
Distributing UI Components to an Application
Application
UI
Components

9. Application
Distributing UI Components to an Application
Application
UI
Components

10. Application
Distributing UI Components to an Application
Application
UI
Components

11. Bower & npm

12. Package Manager Diagram
User
Request
Package
Manager
Component
Packages

13. Package Manager Diagram
User
Request
Package
Manager
Component
Packages

14. Package Manager Diagram
User
Request
Package
Manager
Component
Packages

15. Package Manager Diagram
User
Request
Package
Manager
Component
Packages

16. Package Manager Diagram
User
Request
Package
Manager
Component
Packages

17. Package Manager Diagram
User
Request
Package
Manager
Component
Packages

18. > pkgmgr install a-gui
Package Manager Example

19. > pkgmgr install a-gui
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 install a-gui
Package Manager Example

20. > pkgmgr install a-gui
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
> pkgmgr install a-gui
Package Manager Example

21. Package Managers
Registry
File Repository
Package Format (e.g. manifest)
Source

22. Semantic Versioning
major minor patch
x.y.z
Source
newer
older

23. 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"

24. 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"

25. <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"

26. Version Conflict Resolution
Version ranges
Get latest only if compatible with current
Share compatible dependencies

27. Version Locking
"Broken" is not only APIs
Bugs may exist in functionality
Glitches when used together

28. > npm install
# get latest
# create lock file
Example Lock FileExample Lock File

29. > 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

30. > 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

31. > 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

32. > 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

33. Bundlers
Browserify & webpack
Transforms code
Concatenates code
Produces a bundle file
Source

34. Hybrids
Duo & jspm
Has package manager functionality
Also has bundler functionality
Source

35. Bootstrap UI Framework

36. Polymer UI Component Library

37. UI Component Definition
style
script
text
markup
images

38. UI Component Definition
<a-gui>

39. require(["lodash1"],
function(lodash) {
// code
}
);
require(["lodash2"],
function(lodash) {
// code
}
);
<html>
<body>
<a-gui>
</a-gui>
</body>
</html>
HTML - global scoped - JavaScript

40. node_modules
accordion
jquery
modal
jquery
bower_components
jquery
accordion
modal
Bower - flat nested - npm

41. UI Component
Distribution practices

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

43. Public Github Repo and Tags

44. Public Github Repo and Tags

45. Private Github Repo

46. "dependencies": {
"a-gui":
"git+https://?:x-oath-basic@github.com/?/a-gui.git#^1.0.0"
}
token in bower.json URI

47. > git config --global
url."https://github".insteadOf git://github
[url "https://github"]
insteadOf = git://github
git config / token in .netrcSource

48. > 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

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

50. Private Bower Registry
User
Install
Private
Registry
Public
Registry

51. Private Bower Registry
User
Install
Private
Registry
Public
Registry

52. Private Bower Registry
User
Install
Private
Registry
Public
Registry

53. Private Bower Registry
User
Install
Private
Registry
Public
Registry

54. Private Bower Registry
User
Install
Private
Registry
Public
Registry

55. {
"registry" : "http://bower.ot.com"
}
{
"registry" : "http://artifactory.ot.com",
"resolvers": [
"bower-art-resolver"
]
}
Private Bower - Hacklone
Private Bower - Artifactory

56. Distributed SourceDeveloper Source

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

58. Distributed SourceDeveloper Source

59. Tasks, Presets, or Recipes

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

61. Feature Branches & Pre-Releases
v1.0.0
master

62. feature
Feature Branches & Pre-Releases
v1.0.0
master

63. feature
Feature Branches & Pre-Releases
v1.0.0
master

64. feature
Feature Branches & Pre-Releases
v1.0.1v1.0.0
master

65. feature
Feature Branches & Pre-Releases
v1.0.1v1.0.0
v1.1.0-rc
master

66. feature
Feature Branches & Pre-Releases
v1.0.1v1.0.0
v1.1.0-rc
v1.1.0
master

67. 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!

68. 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/