Summary: <h3 dir="ltr"><strong>Episode Summary</strong></h3> <p dir="ltr"><strong>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. </strong></p> <p dir="ltr"><strong>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. </strong></p> <p dir="ltr"><strong>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. </strong></p> <p dir="ltr"><strong>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</strong></p> <h3 dir="ltr"><strong>Panelists</strong></h3> <ul> <li dir="ltr"> <p dir="ltr"><strong>Leslie Cohn-Wein</strong></p> </li> <li dir="ltr"> <p dir="ltr"><strong>Thomas Aylott</strong></p> </li> <li dir="ltr"> <p dir="ltr"><strong>Lucas Reis</strong></p> </li> </ul> <p dir="ltr"><strong>With special guest: Andrey Okonetchnikov</strong></p> <h2 dir="ltr"><strong>Sponsors</strong></h2> <ul> <li dir="ltr"> <p dir="ltr"><strong><a href="https://devchat.tv/sustain-our-software/">Sustain Our Software</a></strong></p> </li> <li dir="ltr"> <p dir="ltr"><strong><a href="http://sentry.io/">Sentry</a> use the code “devchat” for 2 months free on Sentry’s small plan</strong></p> </li> <li dir="ltr"> <p dir="ltr"><strong><a href="https://devchat.tv/gitlabcommit">GitLab</a> | Get 30% off tickets with the promo code: DEVCHATCOMMIT</strong></p> </li> </ul> <p dir="ltr"><strong>Links</strong></p> <ul> <li dir="ltr"> <p dir="ltr"><strong><a href="https://github.com/okonet/lint-staged">Lint-staged</a> </strong></p> </li> <li dir="ltr"> <p dir="ltr"><strong><a href="https://component-driven.io">Component-driven.io </a></strong></p> </li> <li dir="ltr"> <p dir="ltr"><strong><a href="https://medium.com/styled-components/announcing-primitives-support-for-truly-universal-component-systems-5772c7d14bc7">Primitive</a></strong></p> </li> <li dir="ltr"> <p dir="ltr"><strong><a href="https://basecamp.com/shapeup">Shape Up book</a></strong></p> </li> <li dir="ltr"> <p dir="ltr"><strong><a href="https://www.youtube.com/watch?v=3MPc3PZ6dc4">Create prototype using AI : Airbnb test</a></strong></p> </li> <li dir="ltr"> <p dir="ltr"><strong><a href="https://twitter.com/monicalent">Monica Lent twitter</a></strong></p> </li> <li dir="ltr"> <p dir="ltr"><strong><a href="https://www.npmjs.com/package/react-wireframe">Wireframe</a> </strong></p> </li> <li dir="ltr"> <p dir="ltr"><strong><a href="https://jquery.com/">jQuery</a></strong></p> </li> <li dir="ltr"> <p dir="ltr"><strong><a href="https://coffeescript.org/">CoffeeScript</a> </strong></p> </li> <li dir="ltr"> <p dir="ltr"><strong><a href="https://backbonejs.org/">Backbone.js</a></strong></p> </li> <li dir="ltr"> <p dir="ltr"><strong><a href="http://www.patternlanguage.com/ca/ca.html">Christopher Alexander</a></strong></p> </li> </ul> <p dir="ltr"><strong>Follow DevChat on <a href="https://www.facebook.com/DevChattv/?__tn__=%2Cd%2CP-R&eid=ARDBDrBnK71PDmx_8gE_IeIEo5SnM7cyzylVBjAwfaOo1ck_6q3GXuRBfaUQZaWVvFGyEVjrhDwnS_tV">Facebook</a> and <a href="https://twitter.com/devchattv?lang=en">Twitter</a></strong></p> <h3 dir="ltr"><strong>Picks</strong></h3> <p dir="ltr"><strong>Leslie Cohn Wein:</strong></p> <ul> <li dir="ltr"> <p dir="ltr"><strong><a href="https://frontendmasters.com/courses/vue/">Frontend Masters Intro to Vue course</a></strong></p> </li> <li dir="ltr"> <p dir="ltr"><strong><a href="https://www.gatsbyjs.org/docs/glossary/">Gatsby.js glossary</a></strong></p> </li> </ul> <p dir="ltr"><strong>Thomas Aylott:</strong></p> <ul> <li dir="ltr"> <p dir="ltr"><strong><a href="http://shop.oreilly.com/product/9780596516253.do">Designing Web Interfaces by Bill Scott</a></strong></p> </li> </ul> <p dir="ltr"><strong>Lucas Reis:</strong></p> <ul> <li dir="ltr"> <p dir="ltr"><strong><a href="https://basecamp.com/shapeup">Shape Up book</a></strong></p> </li> <li dir="ltr"> <p dir="ltr"><strong><a href="https://ocw.mit.edu/courses/electrical-engineering-and-computer-science/6-041-probabilistic-systems-analysis-and-applied-probability-fall-2010/video-lectures/">MIT open courseware</a></strong></p> </li> </ul> <p dir="ltr"><strong>Andrey Okonetchnikov:</strong></p> <ul> <li dir="ltr"> <p dir="ltr"><strong><a href="https://components.ai/">Components.ai</a></strong></p> </li> </ul>
