Kent C. Dodds

Utah

wife, 4 kids, & a dog

PayPal, Inc.

@kentcdodds

kcd.im/js-tools

Tools of modern JavaScript Projects

Please Stand...

@kentcdodds

if you are able ❤️ ♿️

kcd.im/js-tools

What this talk is

Opinionated
Experienced

kcd.im/js-tools

What this talk is not

Covering everything you need for every application
Perfect for every scenario

kcd.im/js-tools

Let's
Get
STARTED!

@kentcdodds

kcd.im/js-tools

What makes a

tool "good" ?

Does the job you need
Wide "pit of success"

kcd.im/js-tools

What is a

"pit of success" ?

What makes a "pit of success" wide?

Simple
Automatic

kcd.im/js-tools

Before we get to tools...

How do we get them?

Ubiquitous
Fast
Reliable
De-facto

kcd.im/js-tools

Let's start with the user interface

Fast and easy to build and maintain
Great community of educational material, support, and libraries
Transferrable skills (small domain-specific API)
"Easy to reason about..." 🙃

kcd.im/js-tools

Handy Libraries

axios

react-intl

codesandbox.io/s/6RmxWgm9Q

kcd.im/js-tools

How about code optimization?

Use the latest features of JavaScript without worrying about browser support.
Precompile code at build time.
Easily integrate with other tools we want to use

kcd.im/js-tools

Great babel plugins/presets

babel-preset-env

babel-plugin-lodash

babel-plugin-transform-react-remove-prop-types

babel-plugin-module-resolver

babel-plugin-transform-react-constant-elements

babel-plugin-react-intl

babel-plugin-preval

babel-plugin-console

See awesome-babel for more

babel-plugin-codegen

kcd.im/js-tools

What about the build pipeline?

Load only the things we need when they're needed
Allows us to structure things in a way that's easy to maintain
Easily integrate with other tools we want to use

kcd.im/js-tools

Related Tools

react-loadable

webpack-config-utils

html-webpack-plugin

offline-plugin

See awesome-webpack for more

kcd.im/js-tools

How about code quality?

Reduces the number of tests we need to write
Increases our confidence when refactoring
Brings static types to JavaScript
Can quickly add it to an existing codebase and get value
Easily integrate with other tools we want to use

kcd.im/js-tools

What about discouraging suboptimal patterns?

Reduces the number of tests we need to write
Increases our confidence when refactoring
Totally pluggable, allowing us to do custom pattern checks
Easily integrate with other tools we want to use

ESLint

kcd.im/js-tools

ESLint

Helpful configs & plugins

eslint-plugin-jest

eslint-plugin-jsx-a11y

eslint-plugin-security

eslint-plugin-react

eslint-plugin-babel

eslint-plugin-import

kcd.im/js-tools

And tools to improve development workflow?

Eliminates need to argue over code format.
Formats code for you automatically as you go.
Integrates well with all major editors.

kcd.im/js-tools

Supporting Tools

lint-staged 🚫💩

husky 🐶

kcd.im/js-tools

lint-staged 🚫💩

husky 🐶

What about debugging?

Great debugging experience, even in production
Allows for extensibility
Ubiquitous

kcd.im/js-tools

Handy extensions and tips

react devtools

redux devtools

a11y devtools

node --inspect

kcd.im/js-tools

react devtools

node --inspect

How do we test our JavaScript?

Straightforward and minimal setup required
Integrates seamlessly with existing tools
Easy to write unit and integration tests (especially async)
Quick feedback on broken tests that is easy to triage
Extremely fast even for large codebases

kcd.im/js-tools

Helpful Jest Companion

react-testing-library 🐐

kcd.im/js-tools

Ok, but what about End-to-End?

NOT FLAKEY
Test debuggability
Mocking/Proxying capabilities
Quick feedback on broken tests that is easy to triage

kcd.im/js-tools

debbugging

import generateArticleData from '../../other/generate/article'
import {visitApp, sel, loginAsNewUser} from '../utils'

describe('Posts', () => {
  let cleanupUser
  before(() => {
    return loginAsNewUser().then(({cleanup}) => {
      cleanupUser = cleanup
    })
  })

  after(() => {
    return cleanupUser()
  })

  it('should allow you to create new posts', () => {
    const {title, description, body, tagList} = generateArticleData()
    const shortBody = body.slice(0, 10)
    visitApp('/editor')

    // create the post
    fillInPostDetails({title, description, body: shortBody, tagList})
    cy.get(sel('submit')).click()

    // validate the post
    validatePostDetails({title, body: shortBody, tagList})

    // edit the post
    cy.get(sel('edit')).click()
    const newDetails = {
      title: `${title}_`,
      description: `${description}_`,
      body: `${shortBody}_`,
      // TODO handle changing tags
    }
    fillInPostDetails(newDetails)
    cy.get(sel('submit')).click()

    validatePostDetails(Object.assign({}, newDetails, {tagList}))
  })
})

function fillInPostDetails({title, description, body, tagList = []}) {
  cy.get(sel('title')).clear().type(title)
  cy.get(sel('description')).clear().type(description)
  cy.get(sel('body')).clear().type(body)

  tagList.forEach(tag => {
    cy.get(sel('tags')).type(tag).type('{enter}')
  })
}

function validatePostDetails({title, body, tagList = []}) {
  cy.get(sel('title')).should('contain.text', title)
  cy.get(sel('body')).should('contain.text', `${body}\n`)
  tagList.forEach((tag, index) => {
    cy
      .get(`${sel('tags')} li:nth-child(${index + 1})`)
      .should('contain.text', tag)
  })
}