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