MVI: Minimum Viable Interface for React Components
Your flexible components are a liability. Learn how a Minimum Viable Interface simplifies development by satisfying only current business needs.
#1about 2 minutes
Introducing Minimum Viable Interface for business code
MVI is a philosophy for writing business-specific code by keeping the interface of your components as small as possible to satisfy current needs.
#2about 2 minutes
Benefits of a minimal component interface
Reducing component props lowers cognitive load, simplifies testing, makes refactoring easier, and improves overall codebase coherence.
#3about 2 minutes
Defining a React component's interface as its props
For the purpose of MVI, a React component's public interface is defined entirely by the props it accepts.
#4about 3 minutes
Contrasting abstract library code with specific business code
Unlike abstract library code designed for many use cases, business code should be concrete and tailored to solve a single, specific problem.
#5about 1 minute
Applying the YAGNI principle to component props
The "You Ain't Gonna Need It" (YAGNI) principle advises against adding props or features for hypothetical future needs.
#6about 5 minutes
Choosing the right prop types from booleans to styles
A hierarchy of prop types is presented, favoring simple types like booleans and enums over more flexible but dangerous ones like class names or styles.
#7about 3 minutes
Why you should wrap third-party libraries
Encapsulate third-party libraries in your own components to expose only the minimal interface needed, simplifying future refactoring and dependency swaps.
#8about 1 minute
How to avoid impossible component states with props
Design your component props using enums or union types instead of multiple booleans to prevent developers from creating invalid or nonsensical states.
#9about 2 minutes
Addressing the challenges and trade-offs of MVI
While adapting to changing business needs can be uncomfortable with MVI, the long-term benefits of clarity and simplicity often outweigh the initial friction.
Related jobs
Jobs that call for the skills explored in this talk.
Matching moments
04:44 MIN
Best practices for designing flexible and reusable component APIs
Leveraging Storybook for Component Driven Development outside of your classic Component Library.
03:21 MIN
Leveraging component islands for optimal performance
Beyond Warp Speed: Crafting the Future of Web Development with Astro 4.10
05:58 MIN
Understanding the core principles of React
Hands-on React Native: From Zero to Hero
02:02 MIN
How atomic design prevents common frontend anti-patterns
Building a large, complex product from the ground up with typescript & Atomic Design:lessons learned
01:24 MIN
Summary of key principles for accessible React apps
Accessibility in React Application
03:29 MIN
Why web components are ideal for framework-agnostic UI
Unlocking Seamless Collaboration: Design-First APIs for UI Components
03:09 MIN
Understanding the core concepts of React
React and the power of visualisation
01:20 MIN
Using essential community libraries and basic components
Micro Components - a different approach to a simpler component-based webThere has been a lot of heated discussion lately in the web community about component based development. One side argued that Web Components are a standard we should follow whereas others complained that they still lag behind in what frameworks offer...
Ashutosh Mishra
16 Best Free React UI Libraries in 2025Web development is moving incredibly fast. New features pop up all the time, but there's one constant issue that keeps coming up: keeping your app's interface looking attractive and impressive. While new features are born and killed as the project gr...
Chris Heilmann
Accessibility tip: Detecting reduced motion in one line of JavaScriptAnimation can be a great tool to make apps seem more performant, be more engaging or even just more interesting. There are, however, quite a few groups of people who can not deal with things animating, as it distracts them or can even cause nausea. T...
Eli McGarvie
Top 10 Svelte UI Libraries in 2025As Svelte gains traction among developers for its impressive performance and simplicity, the need for robust UI libraries becomes increasingly apparent. UI libraries can provide developers with the necessary building blocks to easily create beautiful...
From learning to earning
Jobs that call for the skills explored in this talk.