• About Us
    • New York
  • Work
  • Capabilities
  • Careers
  • Technology
  • Blog
  • Contact Us
  • About Us
    • New York
  • Work
  • Capabilities
  • Careers
  • Technology
  • Blog
  • Contact Us
February 21, 2017

The Right Level of React Abstraction

Posted by Christopher Davis

Yesterday while reviewing a few pull requests from my coworkers, I was struck by how easy a few changes were in some React code. The changes were easy because the codebase in question had found the right level of abstraction in the pieces that were changing. ReactJS may be the next shiny new thing, but a surprising amount of old design advice still applies.

In this case, a <DeleteButton /> component was being used in one PR and changed in another. This was possible because the public interface of that component — how it was to be used in JSX — that interface did not change even though the underlying implementation did. My coworkers realized the value of programming to an interface

Similarly, the new implementation of <DeleteButton /> favored a lot of composition over inheritance and re-used a few existing components effectively. More old advice.

The thing we’re still learning about React and other frontend frameworks (like Vue, Angular, etc.) is how they hold up over time. How they help us imperfect developers meet the needs of our projects or employers. There are no 10-year-old react projects (yet). No one has any real, react-specific advice on how things will hold up beyond the attention span of the current frontend world.

I suspect the truth is that it doesn’t matter what flavor of frontend framework (or lack of) gets used. What matters if finding the right level of abstraction that makes changes easy over time. Following some more traditional advice — advice that has proven itself in long term projects — well, that sort of advice is worth following.

abstractionreactreactjs
Previous
Next

Latest White Papers

  • Shifting Plans for 2020 & Beyond
  • Game On: How Brands Can Log Into A Diverse Multi-Billion Dollar Industry
  • What CCPA Means For Brands
  • How Google is Improving Consumer Data Privacy
  • Ways to Prepare for the Cookieless Future
  • See all White Papers

Featured Posts

  • Ad Age Names PMG #1 Best Place to Work in 2021
  • MediaPost Names PMG Independent Agency of the Year
  • PMG Client Portfolio Trends During Amazon Prime Day 2020
  • A Closer Look at the Congressional Big Tech Market Power Report
  • What to Know About Reddit

Categories

  • Consumer Insights
  • Content
  • Creative Design
  • Data Analytics
  • Development
  • Digital TV & Video
  • Ecommerce
  • Industry News
  • Local
  • Mobile
  • Paid Search
  • PMG Culture
  • Programmatic & Display
  • SEO
  • Social Media
  • Structured Data
Fort Worth

2845 West 7th Street
Fort Worth, TX 76107

Dallas

3102 Oak Lawn Avenue
Suite 650
Dallas, TX 75219

Austin

823 Congress Avenue
Suite 800
Austin, TX 78701

London

33 Broadwick Street
London
W1F 0DQ

New York

120 East 23rd Street
New York, NY 10010

Get in touch

(817) 420 9970
info@pmg.com

Subscribe to the PMG Newsletter
© 2021 PMG Worldwide, LLC, All Rights Reserved
  • Contact
  • Privacy Policy
 Tweet
 Share
 Tweet
 Share
 Tweet
 Share
 LinkedIn
We and our partners use cookies to personalize content, analyze traffic, and deliver ads. By using our website, you agree to the use of cookies as described in our Cookie Policy.