Operations Tooling for UI - DevOps for CSS Developers

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

Embed Size (px)

Transcript of Operations Tooling for UI - DevOps for CSS Developers

  • Ops Tooling for UIDevOps and the CSS DeveloperCSSConf June 18, 2015

    (full speaker notes included)

    Rachael L MooreUI EngineerOpenTable morewry

  • Design Dev Ops

  • Design Dev Ops

  • Design Dev Ops

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

    Typo Example

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

    Typo Example

  • button { display: block; padding: 0 1rem;

    Typo Example

  • button { display: flex; flex: 1 1 auto; justify-content: center; align-items: center;}

    Prefix Example

  • Prefix Example

    button { display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center;

  • Layout Problem

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

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

    Layout Problem

  • DevOps(cross your fingers)

  • Cupcake Cup+Cake

  • idea goes in and product comes out

  • Ideation

  • Design

  • Implementation

  • Verification

  • Release

  • DevOps

  • Product & Design

  • ALL Implementation??

  • Brainstorming

  • Prototyping

  • Usability testing

  • Hand off final design

  • Questions

    What are we delivering?

    What's the process for producing it?

  • UI Components

  • UI Components

  • UI Components

  • UI Components Technical Benefits

  • UI Components Technical Benefits

  • UI Components Technical Benefits

  • What are we delivering?UI Components

    What's the process for producing it?

    Questions

  • What are we delivering?UI Components

    What's the process for producing it?Supported by automated pipeline

    Questions

  • Automated pipeline

    Tasks to automate

    Basic setup

  • Build

  • Test

  • Distribute

  • Build

    Test

    Distribute

  • Build Test Distribute

  • Build

    Lint

    Preprocess

    Postprocess

  • ul#id li button { display: block; color: white;}

    Linting vs Validating

    button } display: block; color: %FFF\

    Validation vs Linting

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

    Typo Example Caught by Linting

  • WARNING: Unknown property 'dispay'. Properties should be known (listed in CSS3 specification) or be a vendor-prefixed property.

    Typo Example Caught by Linting

  • .new-class { font-size: $var-font-size; @include custom-mixin; font-weight: bold @extend .old-class; @if $var-condition { // ... }}

    Sass (SCSS) Syntax

  • :root { --restaurant-color: #5FA9C4; --consumer-color: #CE3D44;}

    .class { background-color: var(--restaurant-color);}

    Vanilla CSS Features

  • .class { width: calc(100% - 3rem);}

    Vanilla CSS Features

  • button { display: flex; flex: 1 1 auto; justify-content: center; align-items: center;}

    Vanilla CSS Features

  • 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;}

  • Test

    Unit

    Visual diff

    End-to-end

  • test harness / test framework / test fixturestub / spy / mock object / fake objecttest double / dummy object / use case

    unit / integration / performance / e2e / uismoke / compatibility / acceptance / coverage

    black-box / white-box / gray-box visual / system / regression / reporter

    benchmark / test case / scenario / test suitetest matrix / security / page object

    selenium / webdriver / test runner / baselinefunctional / non-functional / ad hoc

    bottom up / top down / test bed / test driver

  • Unit Testing

  • var result = add(1, 2);expect(result).to.equal(3);

    Unit Testing

  • var button = $(".custom-button");expect(button.styles).to.equal(written.styles);

    *pseudocodeUnit Testing

  • Sample / Diff / Baseline

  • Techniques

    Test pages

    Mock data

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

    Mock Data Example

  • Distribute

    Pull Requests / CI

    Versioning / Releasing

  • > grunt build

    Running lint taskRunning preprocess taskRunning postprocess task

    > grunt test

    Running unit-test taskRunning visual-diff taskRunning e2e-test task

    Grunt Tasks Running

  • 1.2.3(best version ever)

  • Tagging & Bower

  • > bower install custom-button

    bower download ...bower install ...

    custom-button#1.2.3 bower_components/custom-button

    Tagging & Bower

  • Automated pipeline

    Build

    Test

    Distribute

  • 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 theeast.

    [Exits: north up (down)](White Aura) Iauro the old priest is here.

    > look

  • Installing Grunt

  • > npm install -g grunt-cli> npm install grunt --save-dev

    Installing Grunt

  • Gruntfile.js

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

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

    CSSLint - Gruntfile.js

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

    PostCSS/Autoprefixer - Gruntfile.js

  • ... // custom pipeline tasks grunt.registerTask("build", [ "csslint:default", "postcss:default" ]); grunt.registerTask("test", [...]); grunt.registerTask("distribute", [...]);...

    Pipline Tasks - Gruntfile.js

  • language: node_js

    node_js: - "0.12"

    install: - npm install -g grunt-cli - npm install

    script: - grunt build

    .travis.yml

  • Resources

    Rachael L MooreUI EngineerOpenTable morewry

    Example Github Repositoryhttp://github.com/morewry/CSSConf-2015-Pipeline

    Supplementary Reading ListCSSConf-2015-Pipeline/wiki/Reading

    Suggested Tools ListCSSConf-2015-Pipeline/wiki/Tools

    http://github.com/morewry/CSSConf-2015-Pipelinehttp://github.com/morewry/CSSConf-2015-Pipelinehttp://github.com/morewry/CSSConf-2015-Pipelinehttp://github.com/morewry/CSSConf-2015-Pipeline/wiki/Readinghttp://github.com/morewry/CSSConf-2015-Pipeline/wiki/Readinghttp://github.com/morewry/CSSConf-2015-Pipeline/wiki/Toolshttp://github.com/morewry/CSSConf-2015-Pipeline/wiki/Tools

  • Summary

    DevOps

    UI Components

    Automated Pipelines

  • Thanks!Sara Rahimian, Susan Lin, Agustin Colchado, Barry Wong, Simon Attley, Rahul Choudhury

    & entire Guest Center Web Team

    https://plus.google.com/+SaraRahimianhttps://twitter.com/bysusanlinhttps://twitter.com/acolchadohttps://plus.google.com/+SaraRahimianhttp://barrymwong.com/https://twitter.com/sigraphicshttps://twitter.com/Rahulhttp://barrymwong.com/

  • Visit our careers page atopentable.com/careers/Visit our careers page atopentable.com/careers/

    Were hiring!Were hiring!

    GUI Devs Q1 2016!

    http://www.opentable.com/careers/http://www.opentable.com/careers/http://www.opentable.com/careers/http://www.opentable.com/careers/http://opentable.com/careers/https://app.jobvite.com/Jobvite/jobvite.aspx?b=n6ruouwohttps://app.jobvite.com/Jobvite/jobvite.aspx?b=n6ruouwo