Distributing UI Libraries: in a post Web-Component world

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.

Talk presented at OpenTable Tech meetup in February 2016.

Transcript

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 File Example 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 File Example 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 File Example 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 .netrc Source
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 .netrc Source
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 Source Developer 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 Source Developer 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.1 v1.0.0 master
65. feature Feature Branches & Pre-Releases v1.0.1 v1.0.0 v1.1.0-rc master
66. feature Feature Branches & Pre-Releases v1.0.1 v1.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/