Linting, testing, distribution, deployment--and all the associated tooling and tracking. The learning curve on all this stuff can be pretty harsh for web UI developers. All the vocabulary. All the options. All the extra code. What does it all mean? And what, if anything, does your project need? In this talk I discuss web user interfaces at scale and the benefits of bringing more of DevOps culture to the UI space, combining introductory material with practical applications. Talk presented at CSSConf in June 2015.

1. Ops Tooling for UI
DevOps and the CSS Developer
CSSConf June 18, 2015
(full speaker notes included)
Rachael L Moore
UI Engineer
OpenTable
morewry

2. Design Dev Ops

3. Design Dev Ops

4. Design Dev Ops

5. button {
dispay: block;
padding: 0 1rem;
color: #FFF;
background: #333;
text-transform: uppercase;
}
Typo Example

6. button {
dispay: block;
padding: 0 1rem;
color: #FFF;
background: #333;
text-transform: uppercase;
}
Typo Example

7. button {
display: block;
padding: 0 1rem;
Typo Example

8. button {
display: flex;
flex: 1 1 auto;
justify-content: center;
align-items: center;
}
Prefix Example

9. Prefix Example
button {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;

10. Layout Problem
.table {
display: table;
width: 100%;
margin: 0 auto;
}

11. .table {
display: table;
table-layout: fixed;
width: 100%;
margin: 0 auto;
}
Layout Problem

12. DevOps
(cross your fingers)

17. Cupcake Cup+Cake

20. idea goes in and product comes out

30. Ideation

31. Design

32. Implementation

33. Verification

34. Release

35. DevOps

36. Product & Design

37. ALL Implementation??

40. Brainstorming

41. Prototyping

42. Usability testing

43. Hand off final design

45. Questions
What are we delivering?
What's the process for
producing it?

47. UI Components
<link rel="import" src="components/button.html" />

48. UI Components

49. <custom-button />
UI Components

52. UI Components Technical Benefits
<custom-button />

53. <custom-button option="option value" />
UI Components Technical Benefits
<custom-button />

54. UI Components Technical Benefits

56. What are we delivering?
UI Components
What's the process for
producing it?
Questions

61. What are we delivering?
UI Components
What's the process for
producing it?
Supported by automated
pipeline
Questions

62. Automated pipeline
Tasks to automate
Basic setup

64. Build

65. Test

66. Distribute

67. Build
Test
Distribute

68. Build Test Distribute

70. Build
Lint
Preprocess
Postprocess

71. ul#id li button {
display: block;
color: white;
}
Linting vs
Validating
button }
display: block;
color: %FFF
Validation vs Linting

72. button {
dispay: block;
padding: 0 1rem;
color: #FFF;
background: #333;
text-transform: uppercase;
}
Typo Example Caught by Linting

73. WARNING: Unknown property 'dispay'.
Properties should be known (listed in CSS3
specification) or be a vendor-prefixed property.
Typo Example Caught by Linting

74. .new-class {
font-size: $var-font-size;
@include custom-mixin;
font-weight: bold
@extend .old-class;
@if $var-condition {
// ...
}
}
Sass (SCSS) Syntax

76. :root {
--restaurant-color: #5FA9C4;
--consumer-color: #CE3D44;
}
.class {
background-color: var(--restaurant-color);
}
Vanilla CSS Features

77. .class {
width: calc(100% - 3rem);
}
Vanilla CSS Features

78. button {
display: flex;
flex: 1 1 auto;
justify-content: center;
align-items: center;
}
Vanilla CSS Features

81. Auto-Prefixed Comparison
button {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-moz-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-moz-box-align: center;
-webkit-align-items: center;
...
button {
display: flex;
justify-content: center;
align-items: center;
}

83. Test
Unit
Visual diff
End-to-end

84. test harness / test framework / test fixture
stub / spy / mock object / fake object
test double / dummy object / use case
unit / integration / performance / e2e / ui
smoke / compatibility / acceptance / coverage
black-box / white-box / gray-box
visual / system / regression / reporter
benchmark / test case / scenario / test suite
test matrix / security / page object
selenium / webdriver / test runner / baseline
functional / non-functional / ad hoc
bottom up / top down / test bed / test driver

87. Unit Testing

88. var result = add(1, 2);
expect(result).to.equal(3);
Unit Testing

89. var button = $(".custom-button");
expect(button.styles).to.equal(written.styles);
*pseudocode
Unit Testing

96. ✔

98. Sample / Diff / Baseline

102. Techniques
Test pages
Mock data

104. {
"guests": [
{
"name": "Testina T. McTesterson-Testfield",
"seated": true
},
{
"name": "T.J. Test",
"seated": false
}
]
}
Mock Data Example

107. Distribute
Pull Requests / CI
Versioning / Releasing

108. > grunt build
Running lint task
Running preprocess task
Running postprocess task
> grunt test
Running unit-test task
Running visual-diff task
Running e2e-test task
Grunt Tasks Running

111. 1.2.3
(best version ever)

112. Tagging & Bower

113. > bower install custom-button
bower download ...
bower install ...
custom-button#1.2.3 bower_components/custom-button
Tagging & Bower

114. Automated pipeline
Build
Test
Distribute

116. Prerequisites
Temple of Balance
Two tall stone pillars hold up the overhang of the
temple, shielding the worshippers from the
elements. You see the Temple Square to the north
and the altar of the neutral gods to the
east.
[Exits: north up (down)]
(White Aura) Iauro the old priest is here.
> look

120. Installing Grunt

121. > npm install -g grunt-cli
> npm install grunt --save-dev
Installing Grunt

122. Gruntfile.js
module.exports = function (grunt) {
// load tasks
grunt.loadNpmTasks("");
grunt.initConfig({});
// config tasks
grunt.config({})
// custom pipeline tasks
grunt.registerTask("", []);
};

123. ...
// load tasks
grunt.loadNpmTasks("grunt-csslint");
// config tasks
grunt.config("csslint", {
"default": {
options: { csslintrc: ".csslintrc" },
src: ["/*.css"]
}
});
...
CSSLint - Gruntfile.js

124. ...
// load tasks
grunt.loadNpmTasks("grunt-postcss");
// config tasks
grunt.config("postcss", {
options: { processors: [
require("autoprefixer-core")()
]},
"default": {
src: ["*.css"]
}
});
...
PostCSS/Autoprefixer - Gruntfile.js

125. ...
// custom pipeline tasks
grunt.registerTask("build", [
"csslint:default",
"postcss:default"
]);
grunt.registerTask("test", [...]);
grunt.registerTask("distribute", [...]);
...
Pipline Tasks - Gruntfile.js

126. language: node_js
node_js:
- "0.12"
install:
- npm install -g grunt-cli
- npm install
script:
- grunt build
.travis.yml

127. Resources
Rachael L Moore
UI Engineer
OpenTable
morewry
Example Github Repository
http://github.com/morewry/CSSConf-2015-Pipeline
Supplementary Reading List
CSSConf-2015-Pipeline/wiki/Reading
Suggested Tools List
CSSConf-2015-Pipeline/wiki/Tools

128. Summary
DevOps
UI Components
Automated Pipelines

129. Thanks!
Sara Rahimian, Susan Lin, Agustin Colchado,
Barry Wong, Simon Attley, Rahul Choudhury
& entire Guest Center Web Team

130. Visit our careers page at
opentable.com/careers/
Visit our careers page at
opentable.com/careers/
We’re hiring!We’re hiring!
GUI Devs Q1 2016!