Daniel Espino Garcia
MVI: Minimum Viable Interface for React Components
#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
06:03 MIN
Best practices for designing flexible and reusable component APIs
Leveraging Storybook for Component Driven Development outside of your classic Component Library.
08:32 MIN
Leveraging component islands for optimal performance
Beyond Warp Speed: Crafting the Future of Web Development with Astro 4.10
02:52 MIN
Understanding the core principles of React
Hands-on React Native: From Zero to Hero
26:11 MIN
How atomic design prevents common frontend anti-patterns
Building a large, complex product from the ground up with typescript & Atomic Design:lessons learned
28:43 MIN
Summary of key principles for accessible React apps
Accessibility in React Application
09:28 MIN
Why web components are ideal for framework-agnostic UI
Unlocking Seamless Collaboration: Design-First APIs for UI Components
02:31 MIN
Understanding the core concepts of React
React and the power of visualisation
05:52 MIN
Using essential community libraries and basic components
Building Better Apps with React Native
Featured Partners
Related Videos
25:22Building Interactive Async UI with React 19 and Ariakit
Aurora Scharff
29:44Building a component library for modern challenges
Filip Rakowski
20:16Dos and don'ts with react hooks. An opinionated approach
Daniel Espino Garcia
19:46Building a framework-independent component library
Tobias Scholz
28:43Bringing back reactivity in "reactive" frontend
Michał Moroz
54:39Interface Contracts in Microfrontend Architectures
Alexander Günsche
23:39Rethinking React State Management: The Power of Built-In Solutions
Marc Brehmer
41:28Component styling in a JS world — evolve your mental model
Maximilian Heinrich
Related Articles
View all articles
.png?w=240&auto=compress,format)
From learning to earning
Jobs that call for the skills explored in this talk.
Senior Frontend Developer - Typescript / Svelte - (f/m/x)
doinstruct Software GmbH
Berlin, Germany
Senior
GIT
JavaScript
TypeScript
