惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

cs.CL updates on arXiv.org
cs.CL updates on arXiv.org
雷峰网
雷峰网
Recent Announcements
Recent Announcements
月光博客
月光博客
G
Google Developers Blog
腾讯CDC
S
Secure Thoughts
大猫的无限游戏
大猫的无限游戏
T
Tenable Blog
云风的 BLOG
云风的 BLOG
W
WeLiveSecurity
博客园 - 【当耐特】
cs.CV updates on arXiv.org
cs.CV updates on arXiv.org
博客园 - 聂微东
The Cloudflare Blog
阮一峰的网络日志
阮一峰的网络日志
人人都是产品经理
人人都是产品经理
P
Privacy International News Feed
MyScale Blog
MyScale Blog
K
Kaspersky official blog
T
The Blog of Author Tim Ferriss
Attack and Defense Labs
Attack and Defense Labs
Spread Privacy
Spread Privacy
Threat Intelligence Blog | Flashpoint
Threat Intelligence Blog | Flashpoint
aimingoo的专栏
aimingoo的专栏
I
Intezer
Vercel News
Vercel News
小众软件
小众软件
Simon Willison's Weblog
Simon Willison's Weblog
cs.AI updates on arXiv.org
cs.AI updates on arXiv.org
N
Netflix TechBlog - Medium
P
Proofpoint News Feed
Latest news
Latest news
freeCodeCamp Programming Tutorials: Python, JavaScript, Git & More
T
Tor Project blog
S
Security Affairs
P
Proofpoint News Feed
博客园 - 三生石上(FineUI控件)
博客园 - Franky
C
Cyber Attacks, Cyber Crime and Cyber Security
Exploit-DB.com RSS Feed
Exploit-DB.com RSS Feed
美团技术团队
Recent Commits to openclaw:main
Recent Commits to openclaw:main
S
Security @ Cisco Blogs
L
LINUX DO - 热门话题
Know Your Adversary
Know Your Adversary
Project Zero
Project Zero
D
Docker
L
Lohrmann on Cybersecurity
F
Full Disclosure

Kent C. Dodds Blog

Implementing Hybrid Semantic + Lexical Search Simplifying Containers with Cloudflare Sandboxes Migrating to Workspaces and Nx Offloading FFmpeg with Cloudflare Building Semantic Search on my Content Helping YOU ask ME questions with AI How I used Cursor to Migrate Frameworks The Dow's Start on the Covenant Path 2025 in Review The next chapter: EpicAI.pro AI is taking your job How I increased my visibility Launching Epic Web 2023 in Review Stop Being a Junior RSC with Dan Abramov and Joe Savona Live Stream Fixing a Memory Leak in a Production Node.js App 2022 in Review My Car Accident I Migrated from a Postgres Cluster to Distributed SQLite with LiteFS I'm building EpicWeb.dev A review of my time at Remix Remix: The Yang to React's Yin How I help you build better websites Why I Love Remix The State Initializer Pattern How to React ⚛️ Get a catch block error message with TypeScript Building an awesome image loading experience How Remix makes CSS clashes predictable Introducing the new kentcdodds.com How I built a modern website in 2021 How to use React Context effectively Static vs Unit vs Integration vs E2E Testing for Frontend Apps The Testing Trophy and Testing Classifications Array reduce vs chaining vs for loop Don't Solve Problems, Eliminate Them Super Simple Start to Remix Super Simple Start to ESModules in Node.js JavaScript Pass By Value Function Parameters How to write a Constrained Identity Function (CIF) in TypeScript How to optimize your context value How to write a React Component in TypeScript TypeScript Function Syntaxes Listify a JavaScript Array Using fetch with TypeScript Wrapping React.useState with TypeScript Define function overload types with TypeScript 2020 in Review Business and Engineering alignment Hi, thanks for reaching out to me 👋 useEffect vs useLayoutEffect Super simple start to Firebase functions Super simple start to Netlify functions Super Simple Start to css variables Favor Progress Over Pride in Open Source Testing Implementation Details How getting into Open Source has been awesome for me useState lazy initialization and function updates Use ternaries rather than && in JSX Application State Management with React Use react-error-boundary to handle errors in React JavaScript to Know for React How I structure Express apps What open source project should I contribute to? When I follow TDD AHA Programming 💡 How I Record Educational Videos Should I write a test or fix a bug? Stop mocking fetch Intentional Career Building Improve test error messages of your abstractions Tracing user interactions with React Eliminate an entire category of bugs with a few simple tools Common mistakes with React Testing Library Super Simple Start to React Stop using client-side route redirects The State Reducer Pattern with React Hooks Function forms Replace axios with a simple custom fetch wrapper How to test custom React hooks React Production Performance Monitoring Should I useState or useReducer? Stop using isLoading booleans Make Your Test Fail Make your own DevTools An Argument for Automation Fix the "not wrapped in act(...)" warning Super Simple Start to ESModules in the Browser Implementing a simple state machine library in JavaScript 2010s Decade in Review Why users care about how you write code Why I avoid nesting closures Don't call a React function component Why your team needs TestingJavaScript.com Inversion of Control Understanding React's key prop How to Enable React Concurrent Mode How to add testing to an existing project Profile a React App for Performance
Build vs Buy: Component Libraries edition
2021-02-04 · via Kent C. Dodds Blog

When you started your last software project, did you write your own programming language first? Did you build your computer from scratch? Of course not. That would be ludicrous. It would be a waste of time (and in sustainable business that means money). It's not your core competency. It's not your value proposition. You'd run out of money before you finished.

When you started working on that user preferences page of your app (or whatever the latest feature you implemented was), did you just grab something off the shelf? It's very possible your database of choice has a pre-built UI interface for simple CRUD actions. Why didn't you just use that? Probably because your customers expect a professional, modern, and consistent design and experience throughout the app and that pre-built UI couldn't do that for your customers.

Those are examples of the extremes of build vs buy in the software business. There's gonna be a middle-ground between those two lines of thinking that's optimal for the success of your project (and your career/the business).

The open source world is filled with amazing libraries and frameworks that can help us get our software built and delivered to users quickly. Libraries like ReachUI, MaterialUI, and even some company-built component libraries like Adobe's React Spectrum are mature and battle-tested (and importantly: accessibility-tested). Encouragingly in the UI space, there are even paid options that are becoming available (for example TailwindUI and Remix). For many things you'll find yourself engaged in as a UI developer, there are existing solutions for the problems you'll face.

What I love about this is that it means there are fewer things I have to spend my time doing that aren't my core competency as a developer. Just like it would be ludicrous for me to build my own programming language, it would be just as foolish for me to build my own modal implementation when such great ones exist already.

I can hear some of you complaining already, so let me address the elephant in the room. Sometimes you'll find that you just don't like the way a component was implemented and you're bending over backward to fit your use case into their API. I would suggest that when what you're dealing with is a mature and established solution for the kind of UI you're trying to build, that you pause a moment. Consider whether what bothers you about the implementation is really a legitimate issue (performance and/or accessibility problems for example), or if it's just a matter of familiarity. Often we can have knee-jerk reactions to APIs that are different from what we're used to and it would be a mistake to let those first impressions control whether we embraced the new (React + JSX comes to mind for me).

Please keep in mind that I'm not saying you should never build a component library for your company. Most companies should do that (heck, where do you think most of the existing solutions came from?). But for goodness sake, if you're thinking about building your own accordion, tabs, or combobox, please reconsider. These are nontrivial to do well. Personally I blame the web platform for this problem (style-able versions of these common components should be baked-into the platform), but that's irrelevant to this discussion. Find a mature and battle-tested version of these kinds of low-level components and use that instead. Your company is not as much of a unique snowflake as you might like to think.

The kinds of components that should be included in your company's component library are the ones that wrap the lower-level primitive components for the common use cases in your application. And no, I'm not saying: "make a wrapper, then you can swap out the implementation" (this rarely works in practice). What I'm saying is you take the capabilities of the components you've chosen and you limit what people can do to promote consistency in your UI and codebase as much as is practical. Additionally, there are probably UI elements in your application that are pretty unique to your application, but are a composition of several other lower-level components. Those are also good candidates for a component library of your own.

So sure, you can have a component library that includes things like buttons, layout, typography, form elements, etc. But you don't have to build every one of these things from scratch. The other day, I saw a button component with thousands of lines of code. I mean, these things can get surprisingly complex if you let them, but for goodness sake, please just focus on your business.

I know it can be a lot of fun to build everything yourself. When I was at PayPal, I worked on a React component library and I built the button from scratch (but I also wrapped some open source stuff for other components). So I've been there. But not all companies have the resources to dedicate an engineer or two solely on building UI components. At some point, you've gotta put those components into something useful to the people who pay the bills. And those people don't pay for your internal component library doc's site (even if it does have runnable in-browser code examples).

I really don't want to make it sound like having a component library of some kind is a waste of time. It is not a waste of time. But you've just got to balance your excitement for building the perfect abstraction for a <Divider /> with the practicality of the sustainability of your business. Keep in mind the core-competency of your business and don't just go for the "build" option because it's a fun technical challenge, but because it's actually necessary for your business to succeed.

Whatever mix of build and buy you go for, I wish you the best of luck. 👍