Operations Tooling for UI - DevOps for CSS Developers

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.

Transcript

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!