Writing software that keeps working

Dr. Gleb Bahmutov PhD

gleb@kensho.com

glebbahmutov.com

github.com/bahmutov

@bahmutov

MIT 6.148 web competition

KENSHO

Technology that brings transparency to complex systems

Harvard Sq, WTC NYC

jobs@kensho.com

https://github.com/kensho

glebbahmutov.com

glebbahmutov.com/blog

Overview

• Developer value

• Modular software

• Testing JavaScript code

• Unsolicited advice

Developer Value

At large successful companies (Facebook, Google, MathWorks) each developer brings > $1,000,000 in revenue per year.

Developer Value

https://glebbahmutov.com/blog/developer-value/

Developer Value

https://glebbahmutov.com/blog/developer-value/

Developer Value

https://glebbahmutov.com/blog/developer-value/

Your value keeps increasing as long as the software you wrote keeps working

Developer Value

How much of what you wrote today (MIT 6.148) will survive in 1/5/10 years?

Hard

image source: https://unsplash.com/

Simple

image source: https://unsplash.com/

Build complex software from simple, dependable parts

• libraries over frameworks

• simplicity over features

• functional programming over OO

Reusable software

Module created for and reused by other systems gets the "natural selection" pressure, making it stronger and "antifragile"

https://glebbahmutov.com/blog/review-of-antifragile-by-nassim-nicholas-taleb/

Reusable software in practice

Put it on GitHub and reuse yourself. Tell others.

JavaScript: a package

/tmp/my-code $ npm init --yes
Wrote to /tmp/my-code/package.json:

{
  "name": "my-code",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"no tests\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

https://docs.npmjs.com/cli/init

Install dependencies

/tmp/my-code $ npm install --save express
/tmp/my-code $ npm i -S debug
/tmp/my-code $ npm install --save-dev qunit
/tmp/my-code $ npm i -D mocha
{
  "name": "my-code",
  "dependencies": {
    "express": "4.0.0",
    "debug": "2.6.0"
  },
  "devDependencies": {
    "qunit": "1.0.2",
    "mocha": "3.2.0"
  }
}

npm help install

What does package do?

/tmp/my-code $ npm info express
/tmp/my-code $ npm home express

npm help info

npm help home

Example package

https://github.com/bahmutov/mit-6.148

git clone git@github.com:bahmutov/mit-6.148.git
cd mit-6.148
npm install
npm run lint
npm test

NPM init (simple)

$ npm init --yes
Wrote to /tmp/my-code/package.json:

API semantic versioning

1.0.0

semver: how does API change between releases?

• major: API has changed

• minor: new API method has been added

• patch: a bug has been fixed, no API changes

Next version problem

current version: 1.0.0

Hard to determine "meaning" of each commit

Humans should provide the meaning

current version: 1.0.0

- feat(button): add a button

- fix(title): new title text

- major(email): remove notification

current version: 1.0.0 (major.minor.patch)

- feat(...): ...

- fix(...): ...

- major(...): ...

Automate each release!

- feat(...): ...

- fix(...): ...

- major(...): ...

https://github.com/semantic-release/semantic-release

1.0.0

https://juristr.com/blog/2015/10/release-like-a-pro/

Relying on versions

{
  "dependencies": {
    "foo": 1.0.0
  }
}

Theory

{
  "dependencies": {
    "foo": 1.0.0
  }
}

"foo" has versions 1.0.1, 1.1.0, 1.2.0 and 2.0.0 available

NO

YES

Practice

{
  "dependencies": {
    "foo": 1.0.0
  }
}

"foo" has versions 1.0.1, 1.1.0, 1.2.0 and 2.0.0 available

Upgrade automation

https://github.com/bahmutov/next-update

Developer value

Beautiful tests

source: https://www.petersons.com/graduate-schools/sample-lsat-test-questions.aspx

JavaScript is unsafe at any speed

• No types

• Gotchas

• Tangled with Web standards

• 3rd party libraries

Test types

unit tests, unit tests, unit tests, unit tests, unit tests, unit tests

integration tests, integration tests

end to end tests

Test types: practice

linter, unit tests, unit tests, unit tests, crash reporting

integration tests, integration tests

end to end tests

Test types: tools

linter, unit tests, unit tests, unit tests, crash reporting

integration tests, integration tests

end to end tests

standard

mocha, ava, jest

sentry

cypress.io

Linting source code

// add.js
function add(a, b) {
  return a + b
}
module.exports = addition

Setup linter

npm install --save-dev standard

http://standardjs.com/

{
  "scripts": {
    "test": "echo \"no tests\" && exit 1",
    "lint": "standard --verbose --fix *.js",
    "pretest": "npm run lint"
  }
}

Linters gonna lint

$ npm run lint
> standard --verbose --fix *.js
standard: Use JavaScript Standard Style (http://standardjs.com)
  add.js:1:10: 'add' is defined but never used. (no-unused-vars)
  add.js:4:18: 'addition' is not defined. (no-undef)

http://standardjs.com/

Fixed lint errors

// add.js
function add(a, b) {
  return a + b
}
module.exports = add

Unit testing

npm install --save-dev mocha

http://mochajs.org/

{
  "scripts": {
    "test": "mocha *-spec.js",
    "lint": "standard --verbose --fix *.js",
    "pretest": "npm run lint"
  }
}

Test (spec) file

https://glebbahmutov.com/blog/unit-test-node-code-in-10-seconds/​

/* global describe, it */
describe('add', function () {
  const add = require('./add')
  it('adds two numbers', () => {
    console.assert(add(2, 3) === 5)
  })
})

Promise testing

http://mochajs.org/#asynchronous-code

const five = Promise.resolve(5)
describe('five', function () {
  it('resolves to 5', () => {
    return five.then(value =>
      console.assert(value === 5)
    )
  })
})

http://6.148.scripts.mit.edu/2017/pages/lectures/WEBday6_jspromises.pdf

Unit test choices

https://glebbahmutov.com/blog/picking-javascript-testing-framework/

Mocha

Ava

Jest

Chai

lazy-ass + check-more-types

test library

predicates and assertions

Crashes will happen

image source: http://ktla.com/2016/04/02/small-plane-crashes-into-suv-on-15-freeway-in-san-diego-county/

undefined is not a function

Sentry.io crash service

if (process.env.NODE_ENV === 'production') {
    var raven = require('raven');
    var SENTRY_DSN = 'https://<DSN>@app.getsentry.com/...';
    var client = new raven.Client(SENTRY_DSN);
    client.patchGlobal();
}
foo.bar // this Error will be reported

https://glebbahmutov.com/blog/know-unknown-unknowns-with-sentry/

https://glebbahmutov.com/blog/stand-your-own-crash-server/

npm install raven --save

Crash early and often

Defensive coding: checking inputs before each computation (preconditions). Sometimes checking result value before returning (postconditions).

Crash early and often

Paranoid coding: checking inputs before each computation, as if the caller was evil and trying to break the function on purpose.

https://glebbahmutov.com/blog/paranoid-coding/

Crash early and often

https://glebbahmutov.com/blog/paranoid-coding/

const la = require('lazy-ass')
const is = require('check-more-types')
la(is.strings(names), 'expected list of names', names)
la(is.email(loginName), 'missing email')
la(is.version(tag) || check.sha(tag), 'invalid tag', tag)

Test types: tools

linter, unit tests, unit tests, unit tests, crash reporting

end to end tests

standard

mocha, ava, jest

sentry

cypress.io

Multiple moving parts

image source: http://www.goodwp.com/tags/mechanism/

https://glebbahmutov.com/2048-kensho/

https://github.com/bahmutov/2048-kensho

Grab source code at

Build and run local website

npm install
npm run build
npm start

Install and start Cypress

npm install -g cypress-cli
cypress install
cypress open

Login with GitHub

To get invite:

- enter email at https://www.cypress.io/#footer

- ask politely at https://gitter.im/cypress-io/cypress

Added this project to Cypress

describe('2048-kensho', function(){
  beforeEach(function(){
    cy.visit('http://localhost:3000')
  })
  it('has 2048 title', function(){
    cy.title().should('include', '2048')
  })
})

Mocha + Chai assertions

https://docs.cypress.io/docs/making-assertions

cypress/integration/2048-kensho-spec.js

Cypress in action

describe('2048-kensho', function(){
  beforeEach(function(){
    cy.visit('/')
  })
  it('has 2048 title', function(){
    cy.title().should('include', '2048')
  })
})

{
  "baseUrl": "http://localhost:3000"
}

Set "baseUrl" in cypress.json

it('starts with 3 tiles', () => {
  cy.get('.tile-container')
    .find('.tile')
    .should('have.length', 3)
})
it('has header', () => {
  cy.get('h1.title').should('be.visible')
    .contains('kensho')
})

https://github.com/bahmutov/2048-kensho/blob/master/cypress/integration/2048-kensho-spec.js

Examples: https://docs.cypress.io/docs/all-example-apps