🔥 Three Developers 🔥

...and a story each

About going far together

Who are we

...and why we are here

 

  • Who: Frontend Engineers at commercetools

    • From 4 different vertical teams

    • 3-4 different locations (Germany and Spain)

 

  • Why: Share and tell stories about our work

    • About how we work and achieve things together

Jest, Cypress

K8s, Circleci

React, GraphQL, Apollo

Mandatory: Tech Stack

...just briefly

Something else: Verticals 

...and why they're fun to work in

 

  • Focus on a business domain

    • Orders, Products & Categories, Prices or Checkout

 

  • Make your own decisions as a team​
    • Different domains and problems have different requirements

 

  • ​Work in a cross-functional team

    • ​A Product Owner, UX, Backend and Frontend Engineer

But

...not all problems are vertical!

Inner Source

work as if it was Open Source

Chapter

align across team boundaries

Don't repeat mistakes

3 stories, 3 developers, 3 improvements

1. Unit testing hell

2. Merging & Deploying

3. From Inner to Open Source

Unit Testing Hell

...sometimes a unit is not enough

Want

Don't want

  • Brittle tests
    • Change code
      then change test
  • Snapshot confidence
    • All we need is
      a snapshot
  • Confidence
    • Refactoring
      doesn't break things
  • User Focus
    • Ensure features work
      for the end user

Unit Testing Hell

...sometimes a unit is not enough

 

  • Introduce react-testing-library

    • Write tests not too many mostly integration

 

  • Tech Time
    • Gradually experiment and introduce new things

 

  • Rewrite a MoneyInput from downshift to react-select

    • ​Not a single test needed to change

Merging & Deploying

...more often while being iterative

The goal is not to deploy, but to flip a switch.

Reverting is a lot more difficult than turning a feature off again.

Deploying often, means smaller changes,
means less breakage

 

  • Deploy any pull request as a stack

    • Shorter feedback loop with stakeholders

 

  • Use a feature toggling solution
    • Flip switches without deploying in real time

 

  • Deploy 9 applications independently

    • ​Less coordination, smaller migrations

Merging & Deploying

...more often

Inner to Open Source

...there is more to share than you think

Want

Don't want

  • Redundancy
    • Multiple ways to do the same thing
  • Worry about infra
    • Solve customer
      problems
  • Share tooling configs
    • Not reinventing
      boring things
  • Outside contributions
    • Improve things
      together

Inner to Open Source

...there is more to share than you think

 

  • Shared tooling configs include:

    • ESLint, Jest, Babel preset, build and run scripts

 

  • Shared frontend code includes:
    • Application Shell, UIKit (Design System), etc

 

  • Open Source and contribute your learnings

    • ​Own API SDKs, Formik, Apollo, Enzyme

What (could) come next

...there is always something to improve

Type System

Destructive E2E testing

...more confidence in refactorings

Seeding data, visual regression testing

Better CI/CD performance

Better support for monorepos, short circuit runs

❗️ Thanks ❗️

Three developers and a story

By Tobias Deekens

Three developers and a story

  • 501