Patrick Hund | Lead Frontend Developer | @wiekatz

Software Entropy

Accumulation of Technical Debt

(source: Dr. Carola Lilienthal)

Big Ball of Mud

React Component Spaghetti

Separating Logic and Layout

A Simple Start…

Presentational and Container Components

Separated Dumb Components

Recompose FTW!

Recomposed Spinner

Separate Enhancers

Separate Layout Components Styleguide

UI in Separate Repository

Living Styleguide with Storybook

Organizing Modules

Separation of Concerns

(source: Cristiano Rastelli)

Contribution Rules

  • One main component per Brick
  • One root index.js file provides exports for all modules needed to integrate it
  • Brick has no dependencies to code modules outside, except npm packages

Maintaining a healthy codebase is not a technical task.

It's a process task.

It's a people task.

Get out of that chair. Take off those headphones.

Breaking Down Redux

😱 Why all the complexity?

Why all that boilerplate code?

What's wrong with this picture?

Selectors to the rescue!

https://github.com/technology-ebay-de/modular-toolkit

Thank you!

Ninja Maaß

Frontend Developer

Daniel Schäfer

Frontend Developer

Eike Schulte-Kersmecke

Backend Developer

Anja Kunkel

Backend Developer

Torsten Walter

Frontend Developer

Juho Vepsäläinen

Dev Consultant

Mike Krüger

Quality Assurance

Hajo Skwirblies

Site Operations

Florian Stefan

Architect

Christoph Springer

Team Lead

Julia Thiele

Product Owner

Jakob Gehring

Product Owner

View this presentation online: bit.ly/break-react

Patrick Hund | Lead Frontend Developer | @wiekatz