A presentation at NCD Oslo in in Oslo, Norway by Debbie O'Brien
Component Driven Repo for a Component Driven World
debs_obrien
Debbie O’Brien Head Developer Advocate at Bit Open Source Contributo Speaker,Teacher, Blogger, YouTube Cycling, Running, Padel, Skiin 4th degree black belt in Taekwondo r g r debs_obrien
The Modern Web is Component Driven
We are living in a perfect world
Are we?
Building Apps in 2021
Let’s go Back in Time
DATABASE JQUERY PHP HTML CSS JAVASCRIPT Monolith FRONTEND BACKEND Composed all in one piece
JQUERY PHP HTML CSS JAVASCRIPT BACKEND FRONTEND
Microservices JQUERY PHP CSS JAVASCRIPT HTML BACKEND FRONTEND
Microservices FRONTEND
Microservices s s s s • • • • • • arranges an application as a collection of loosely-coupled service split in terms of responsibility and knowledge incremental update independent deployment smaller codebase better scalability
s i d h n t e i l t o n n o r o F M e a h l T til s FRONTEND
But I’m building React applications, they are modern
Components are tightly coupled and nested inside the app
Frontend Monolith One Version; too many components, hard to scale
One Build; slow to develop p • • • One Codebase; no team ownershi
Scaling to Multiple apps
Duplicating Components n l y • • • • Lots of code to maintai Inconsistenc Re-inventing the whee Updating components over multiple Apps is time consuming
Packaging Components e n s • • • • Too many packages to maintai A lot of package.json Updating dependencies is a nightmar Hard to discover components
Monorepos
Monorepos Pros Improve velocit Code Sharing and reus Dev Experienc Large Scale refactorin Cross team Collaboratio n e g y e Standardisation
Monorepos Cons Toolin Visibility and Discoverabilit Easy to Break Others Cod On-boarding Developer Slow Build y e s s g Team Boundaries and Ownership
Scaling one large app
Large App p s g e h • • • • • • Hard to discover component Hard to give teams ownershi One main branc No internal versionin One long build tim Manage multiple deployments
Let’s Break Down the Frontend Monolith once and for all
Let teams own features
Support Team • • • • “create support request” component (form) “Online chat widget” component (widget) “My open support tickets” component (page) “Support ticket dashboard” component (page)
Product Team • • • • “Shopping Cart” component (widget) “Get Product” component (hook) “Product Card” component (widget) “Product Page” component (page)
Design Team • • • • “Button” component “Card” component “Logo” component “Tooltip” component
m m Support Scope Product Scope Design Scope Support Team Components Product Tea Components Design Tea Components
What’s a Scope? It’s like a next-gen micro-service allowing teams to own and expose APIs that include both frontend APIs, backend APIs and even node modules.
base-ui ecommerce shoe-store
Every Scope can have it’s own Repo
Every Scope can have it’s own Repo
Teams Own Feature Work Independent from Other Team Have Separate Build Pipeline Test Independentl Ship Components Individuall s s y y s Want Autonomy
Apps are Composed from Components
base ecommerce shoe-store
Component Driven Is a reuse-based approach to defining, implementing and composing loosely coupled independent components into systems
Shoes-card card heading text img currency button
base shoe-store ecommerce
So how do we build Component Driven?
Think about every component as a product for anyone to use
Your Component: e s e I Great Dev Experienc Different context Easy to us AP Loosely coupled
Developers e e e Better softwar Maintainable softwar Testable softwar Dev Experience
Organizations e y e Better softwar Save tim Save mone Happier Devs
Component Driven Re usa ble Theme-able e l b a s o p m o C Components t n e d n e p e d n I Enc aps ula ted
Theme-able Design components with themes so they can be used differently in other apps
Theme-able Apply different themes
Composable Compose smaller components together to form more complex components
Composable
Encapsulated Exposes interfaces which allow the caller to use its functionalit y Hides details of internal variables or state
Encapsulated title text src alt currency buttonText
Independent Components are independen Components have their own version and revision histor Components have their own build pipelin y e t Minimal dependencies on other components
Independant Each component has its own version
Reusable Reused in different scenarios in the same or in different applications
Reusable
Decoupled
Decoupled
Monorepo
Multi-Repos
Decoupled Codebases
Compose Components to create Apps
Reuse Components in any App
Reuse Components in any App
Reuse Components in any App
Reuse Components in any App
Decoupling
Component Driven d p m d d • • • • • • Components are truly isolate Scoped to a Particular Tea Independently Versione Independently Release No longer coupled to the Ap Can be consumed in the app, any app, many apps
D e y b h d t i o l o no G o M B W I H T A C M K IC E R N O S E R V IC E S W I H T IN D M N E O T C N T O N R E F D N E P E D O P N N E S T
thanks for listening debs_obrien
Demo Projects Demo Projects on bit.dev debs_obrien
We think in monorepos when we want to share components across many teams and apps. but let’s face it, we all hate monorepos. As soon as we hear the word we just think legacy. But it doesn’t have to be. But if we make our repos component driven, where we can easily share components across any repos or apps then everything changes. We really are moving towards a component driven world so lets start building in component driven repos.
