Episode Summary

Andrey Okonetchnikov is a specialist in frontend architecture and design systems. He runs his own consultancy and made the package lint-staged. Andrey has been in programming for 20 years and talks about his background, how he got into React, and why he started component-driven.io. Andrey has always been interested in design tools and design systems, it just wasn’t the right time because the right tools weren’t available. 

Since Andrey has been working in frameworks for 20 years and has watched them come and go, Lucas asks Andrey how he has seen the communication between developers and business owners evolve over that time. Andrey reflects on his first conference talk and believes that not much has changed, even if the tools have. His perfect interaction between developers and business owners would be codeless, and would instead draw his design on a napkin. 

This idea ties into Andrey’s ideas of creating things in primitives instead of wireframes. He relates his idea to the pattern philosophy of the building architect Christopher Alexander, the idea that specific design problems require specific solutions. He talks about since everything in React is a component, we can encapsulate a design decision into a component. 

Since the power of components is redistributing knowledge, the panel discusses how components promotes reusability, accessibility, and sustainability in code. However, Frankenstein components are the dark side of reusability. Andrey talks about the dynamic view of a design system that does reuse and how to make sure that it evolves cleanly. They discuss how much of can be planned in advance the first time you’re creating a component versus how much should you not try to think too far ahead and fix it when it comes up. They all agree that early abstraction can be almost as destructive as early optimization

Panelists

• Leslie Cohn-Wein

• Thomas Aylott

• Lucas Reis

With special guest: Andrey Okonetchnikov

Sponsors

• Sustain Our Software

• Sentry use the code “devchat” for 2 months free on Sentry’s small plan

• GitLab | Get 30% off tickets with the promo code: DEVCHATCOMMIT

Links

• Lint-staged 

• Component-driven.io 

• Primitive

• Shape Up book

• Create prototype using AI : Airbnb test

• Monica Lent twitter

• Wireframe 

• jQuery

• CoffeeScript 

• Backbone.js

• Christopher Alexander

Follow DevChat on Facebook and Twitter

Picks

Leslie Cohn Wein:

• Frontend Masters Intro to Vue course

• Gatsby.js glossary

Thomas Aylott:

• Designing Web Interfaces by Bill Scott

Lucas Reis:

• Shape Up book

• MIT open courseware

Andrey Okonetchnikov:

• Components.ai

Special Guest: Andrey Okonetchnikov.