(Frontend)

Developer Experience

Techniques & Tools for Maximizing Happiness & Value

Alex Alvarez

@alexander-alvarez

About Me

• Fullstack Developer at PeerIQ

• Python, Javascript, Rust, Elixir
  • Ember.js
• Functional Programming
• Product Development / Management
• DevOps
• Efficiency

Developer Experience

How does it feel to be a developer @ <company_name>?

Developer Experience

Why do companies love new hires?

Energy + Perspective

Progress

• Not blinded by incremental change
• Bring different expectations

What Current Developers See

The build seems slow.

Build originally took 10 units of time

What New Hires See

New Hire Date

What did I just sign up for?

GOOD

• Developers can get setup in a matter of minutes
• Builds take seconds
• Conventions are codified
• Many different types of tests run automatically (and quickly)
• Tools are the best in their corresponding domain
• Vote Deploy early and oven
• Staying up to date with dependencies is trivial and not risky

• Environment break frequently
• Builds take minutes
• Key Man Risk
• Code review content are mostly about style and form not content
• Bikeshedding around things that don't drive business value
• Layers of approval processes block development flow
• Outdated or esoteric tools

BAD

Development/Deployment

What

Why

Fake it 'til You Make it

• Design APIs & services early
• Stub out with fake API calls
• Repeat until finished
• Remove fake calls with live calls when API is live

Faker.js

import faker from 'faker';
const { lorem, name, company, date, fake } = faker;

lorem.sentence();
lorem.paragraph();
name.firstName();
company.companyName();
address.zipCode();
date.future();
fake('{{name.prefix}} {{name.firstName}}, {{name.lastName}}'); 
// 'Dr. Isabel Martin

"Generate massive amounts of fake data in the browser and node.js"

Attentuate Handoff Problems

• Try to remove number of handoffs
• Minimize the length of handoffs
• Create tight & quick feedback loops

• "Throw it over the fence"
• Block yourself & create more hand-offs

DON'T

DO

Why Handoffs are Bad

https://itrevolution.com/resource-guide-for-the-phoenix-project-kanbans-part-2/

Why Handoffs are Bad

Why Handoffs are Bad

Leverage High Quality Tools

• Prefer Open Source
  • Minimizes training costs & time
  • Increases portability
    • Re-org / Spinoff / Acquisition / Open Sourcing 
• Build in house only if you have the resources to maintain and support
  • We don't need YAEsotericToolBuiltBySomeoneSmarterThanEveryoneWhoIsNoLongerHereAndDidntDocumentAnything
  • Open Source the in house tool :D

Always Deployable

• Feature Flags
  • Hide code until business signs off on it
  • Use it as a tool to iterate on a feature until fully done
    • Prevent massive PRs
• Append-Only API Deprecation Workflow
  • Append New
  • Deprecate old
  • Wait
  • Remove

Feature Flags

import { FlagsProvider, Flag } from 'flag';
const flags = { /*...*/ };

const instance = (
  <FlagsProvider flags={flags}>
    <div>
      This is my application.
      <Flag
        name="features.useMyCoolNewThing"
        render={() =>
          <div>Rendered on truthy</div>
        }
        fallbackRender={() =>
          <div>Rendered on falsy</div>
        }
      />
    </div>
  </FlagsProvider>
);

React.render(instance, document.querySelector('#app'));

Example: React

Feature Flags

• flag
• ember-feature-flags
• fflip
• LaunchDarkly

There are lots of libraries & even services to facilitate this

Always Deploy!

• Deploy development branch to integration environment automatically
  • No more back and forth about state of things

• Deploy pull requests automatically into their own branches
  • Developers don't need to context switch or change environments
  • Developers just click on link and review other's work

Testing/Maintenance

• Visual Regression Testing

• Proactive Dependency Testing

• Codify Conventions
• Automate manual & repetitive tasks

Visual Regression Testing

• Test code for visual changes
• Rendering page in headless browser (or browser testing lab) & take screenshots
• Compare diffs & automatically approve or stage for review

describe('Acceptance: Resume pages', function() {
  it('can visit /careers', function() {
    visit('/careers');
    click('#posting1');
    snapShot('Careers page (upload button)'); // mock API
  });
});

What

Visual Regression Testing

• No more checking out code to see CSS changes
  • Designers don't need dev environments & can review PRs
• No more Cascading Sinking Ship
• Automatic & Fast feedback

Examples

• PhantomCSS
• Percy

Thought: Maybe something may be built off of GoogleChrome/puppeteer

Why

Proactive Dependency Testing

• Test against later / latest versions of an upstream dependency

• Quick and early feedback on regressions
• Simplified Upgrades
  • Tests are already running against future versions
  • Incrementally fix tests
  • When green, upgrade

What

Why

Codify Conventions

• Lint Everything
  • ESlint, stylelint, & plugins
• Prettier

• Minimize bikeshedding
• Aligning with best practices for your ecosystem
• Remove ego (or future ego)
• Cradle for anyone new to development environment
• Quick feedback
• More Productive Code Reviews

dustinspecker/awesome-eslint

What

Why

Automate Manual & Repetitive Tasks

• eslint --fix

• facebook/jscodeshift
• Interact with AST to change code
• Change an API & have a lot of downstream consumers?
  • Release a codemod for the migration

• Developer's will welcome improvements
• Removes pedantic steps & errors

What

Why

• Quick Feedback Loops
• Leveraging High Quality Tools

• Higher Quality of Life
• Quicker Releases into Production
• Higher Quality Code

Takeaway

Leads To

↑ DX = ↑ Success

Thank You

More Reading

• Theory of Constraints
• Phoenix Project
• DevOps Handbook
• ESLint Guide: Working With Rules
• Writing Your Very First Codemod with jscodeshift
• Migrating Using Codemods
• Visual Diff Regression Tools