SlideShare a Scribd company logo
- A B R A A R S Y E D
COMPONENTIZATION
PATTERNS
Reusability
Separation of concerns
WHY COMPONENTIZATION?
HOW TO
COMPONENTIZE?
Container/Presentation Model
Composition vs Inheritance
POPULAR PATTERNS
CONTAINER PRESENTATION
Smart Components
Contains other
Container/Presentation
components
Handles REST Calls
Handles Data
Transformations
Dumb Components
Can contain only
Presentation
components
UI Centric
Handles User
Interactions
WHEN TO KEEP STATES IN
CONTAINER COMPONENT?
HANDLING
USER
INTERACTIONS
WHEN TO KEEP STATES IN
PRESENTATION COMPONENT?
SUMMARY
Reusability
Separation of concerns
Higher Order Components
State Management Solutions
CURRENT TRENDS IN
PROGRAMMING
COMPOSITION VS INHERITANCE
WHAT DOES JAVASCRIPT SAY?
WHAT DOES REACT SAY?
QUESTIONS ANSWERS AND
THANK YOU :)
Twitter: @iamabraarsyed
Mail: abraar@jnaapti.com

More Related Content

Similar to React Design Patterns

[2017/2018] Introduction to Software Architecture
[2017/2018] Introduction to Software Architecture[2017/2018] Introduction to Software Architecture
[2017/2018] Introduction to Software Architecture
Ivano Malavolta
 
Architecting for Change: An Agile Approach
Architecting for Change: An Agile ApproachArchitecting for Change: An Agile Approach
Architecting for Change: An Agile Approach
Ben Stopford
 
[2016/2017] Introduction to Software Architecture
[2016/2017] Introduction to Software Architecture[2016/2017] Introduction to Software Architecture
[2016/2017] Introduction to Software Architecture
Ivano Malavolta
 
Introduction to SOFTWARE ARCHITECTURE
Introduction to SOFTWARE ARCHITECTUREIntroduction to SOFTWARE ARCHITECTURE
Introduction to SOFTWARE ARCHITECTURE
Ivano Malavolta
 
Framework Engineering
Framework EngineeringFramework Engineering
Framework Engineering
YoungSu Son
 
NetApp Clustered Data ONTAP with Oracle Databases
NetApp Clustered Data ONTAP with Oracle DatabasesNetApp Clustered Data ONTAP with Oracle Databases
NetApp Clustered Data ONTAP with Oracle Databases
NetApp
 
SW Architecture Monolithic to SOA
SW Architecture Monolithic to SOASW Architecture Monolithic to SOA
SW Architecture Monolithic to SOA
Raman Kannan
 
The Clean Architecture
The Clean ArchitectureThe Clean Architecture
The Clean Architecture
Dmytro Turskyi
 
High-Performance Interoperable Architecture for Information Dominance
High-Performance Interoperable Architecture for Information DominanceHigh-Performance Interoperable Architecture for Information Dominance
High-Performance Interoperable Architecture for Information Dominance
Real-Time Innovations (RTI)
 
Intelligent Content Management
Intelligent Content ManagementIntelligent Content Management
Intelligent Content Management
Joe Gollner
 
Fluent Interfaces
Fluent InterfacesFluent Interfaces
Fluent Interfaces
IDES Editor
 
Monolith to modular
Monolith to modularMonolith to modular
Monolith to modular
GaroHussenjian
 
Simplifying Architecture Design
Simplifying Architecture DesignSimplifying Architecture Design
Simplifying Architecture Design
Amanda Jackson
 
Tackling Sprawl in Microsoft 365 #MWCP21
Tackling Sprawl in Microsoft 365 #MWCP21Tackling Sprawl in Microsoft 365 #MWCP21
Tackling Sprawl in Microsoft 365 #MWCP21
Kanwal Khipple
 
Architecting for the public and the private cloud
Architecting for the public and the private cloudArchitecting for the public and the private cloud
Architecting for the public and the private cloud
Hammad Rajjoub
 
Seminar - Scalable Enterprise Application Development Using DDD and CQRS
Seminar - Scalable Enterprise Application Development Using DDD and CQRSSeminar - Scalable Enterprise Application Development Using DDD and CQRS
Seminar - Scalable Enterprise Application Development Using DDD and CQRSMizanur Sarker
 
Designingapplswithnet
DesigningapplswithnetDesigningapplswithnet
Designingapplswithnet
DSK Chakravarthy
 
How to make technical deicisons?
How to make technical deicisons?How to make technical deicisons?
How to make technical deicisons?
Oresztész Margaritisz
 

Similar to React Design Patterns (20)

Domain Driven Design
Domain Driven DesignDomain Driven Design
Domain Driven Design
 
[2017/2018] Introduction to Software Architecture
[2017/2018] Introduction to Software Architecture[2017/2018] Introduction to Software Architecture
[2017/2018] Introduction to Software Architecture
 
Architecting for Change: An Agile Approach
Architecting for Change: An Agile ApproachArchitecting for Change: An Agile Approach
Architecting for Change: An Agile Approach
 
[2016/2017] Introduction to Software Architecture
[2016/2017] Introduction to Software Architecture[2016/2017] Introduction to Software Architecture
[2016/2017] Introduction to Software Architecture
 
Introduction to SOFTWARE ARCHITECTURE
Introduction to SOFTWARE ARCHITECTUREIntroduction to SOFTWARE ARCHITECTURE
Introduction to SOFTWARE ARCHITECTURE
 
Framework Engineering
Framework EngineeringFramework Engineering
Framework Engineering
 
NetApp Clustered Data ONTAP with Oracle Databases
NetApp Clustered Data ONTAP with Oracle DatabasesNetApp Clustered Data ONTAP with Oracle Databases
NetApp Clustered Data ONTAP with Oracle Databases
 
SW Architecture Monolithic to SOA
SW Architecture Monolithic to SOASW Architecture Monolithic to SOA
SW Architecture Monolithic to SOA
 
The Clean Architecture
The Clean ArchitectureThe Clean Architecture
The Clean Architecture
 
High-Performance Interoperable Architecture for Information Dominance
High-Performance Interoperable Architecture for Information DominanceHigh-Performance Interoperable Architecture for Information Dominance
High-Performance Interoperable Architecture for Information Dominance
 
Intelligent Content Management
Intelligent Content ManagementIntelligent Content Management
Intelligent Content Management
 
Fluent Interfaces
Fluent InterfacesFluent Interfaces
Fluent Interfaces
 
Monolith to modular
Monolith to modularMonolith to modular
Monolith to modular
 
Simplifying Architecture Design
Simplifying Architecture DesignSimplifying Architecture Design
Simplifying Architecture Design
 
Tackling Sprawl in Microsoft 365 #MWCP21
Tackling Sprawl in Microsoft 365 #MWCP21Tackling Sprawl in Microsoft 365 #MWCP21
Tackling Sprawl in Microsoft 365 #MWCP21
 
Architecting for the public and the private cloud
Architecting for the public and the private cloudArchitecting for the public and the private cloud
Architecting for the public and the private cloud
 
Seminar - Scalable Enterprise Application Development Using DDD and CQRS
Seminar - Scalable Enterprise Application Development Using DDD and CQRSSeminar - Scalable Enterprise Application Development Using DDD and CQRS
Seminar - Scalable Enterprise Application Development Using DDD and CQRS
 
Designingapplswithnet
DesigningapplswithnetDesigningapplswithnet
Designingapplswithnet
 
Se
SeSe
Se
 
How to make technical deicisons?
How to make technical deicisons?How to make technical deicisons?
How to make technical deicisons?
 

Recently uploaded

The Future of Platform Engineering
The Future of Platform EngineeringThe Future of Platform Engineering
The Future of Platform Engineering
Jemma Hussein Allen
 
Essentials of Automations: Optimizing FME Workflows with Parameters
Essentials of Automations: Optimizing FME Workflows with ParametersEssentials of Automations: Optimizing FME Workflows with Parameters
Essentials of Automations: Optimizing FME Workflows with Parameters
Safe Software
 
Slack (or Teams) Automation for Bonterra Impact Management (fka Social Soluti...
Slack (or Teams) Automation for Bonterra Impact Management (fka Social Soluti...Slack (or Teams) Automation for Bonterra Impact Management (fka Social Soluti...
Slack (or Teams) Automation for Bonterra Impact Management (fka Social Soluti...
Jeffrey Haguewood
 
Software Delivery At the Speed of AI: Inflectra Invests In AI-Powered Quality
Software Delivery At the Speed of AI: Inflectra Invests In AI-Powered QualitySoftware Delivery At the Speed of AI: Inflectra Invests In AI-Powered Quality
Software Delivery At the Speed of AI: Inflectra Invests In AI-Powered Quality
Inflectra
 
Dev Dives: Train smarter, not harder – active learning and UiPath LLMs for do...
Dev Dives: Train smarter, not harder – active learning and UiPath LLMs for do...Dev Dives: Train smarter, not harder – active learning and UiPath LLMs for do...
Dev Dives: Train smarter, not harder – active learning and UiPath LLMs for do...
UiPathCommunity
 
FIDO Alliance Osaka Seminar: FIDO Security Aspects.pdf
FIDO Alliance Osaka Seminar: FIDO Security Aspects.pdfFIDO Alliance Osaka Seminar: FIDO Security Aspects.pdf
FIDO Alliance Osaka Seminar: FIDO Security Aspects.pdf
FIDO Alliance
 
FIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdf
FIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdfFIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdf
FIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdf
FIDO Alliance
 
Leading Change strategies and insights for effective change management pdf 1.pdf
Leading Change strategies and insights for effective change management pdf 1.pdfLeading Change strategies and insights for effective change management pdf 1.pdf
Leading Change strategies and insights for effective change management pdf 1.pdf
OnBoard
 
Neuro-symbolic is not enough, we need neuro-*semantic*
Neuro-symbolic is not enough, we need neuro-*semantic*Neuro-symbolic is not enough, we need neuro-*semantic*
Neuro-symbolic is not enough, we need neuro-*semantic*
Frank van Harmelen
 
Connector Corner: Automate dynamic content and events by pushing a button
Connector Corner: Automate dynamic content and events by pushing a buttonConnector Corner: Automate dynamic content and events by pushing a button
Connector Corner: Automate dynamic content and events by pushing a button
DianaGray10
 
ODC, Data Fabric and Architecture User Group
ODC, Data Fabric and Architecture User GroupODC, Data Fabric and Architecture User Group
ODC, Data Fabric and Architecture User Group
CatarinaPereira64715
 
Accelerate your Kubernetes clusters with Varnish Caching
Accelerate your Kubernetes clusters with Varnish CachingAccelerate your Kubernetes clusters with Varnish Caching
Accelerate your Kubernetes clusters with Varnish Caching
Thijs Feryn
 
Key Trends Shaping the Future of Infrastructure.pdf
Key Trends Shaping the Future of Infrastructure.pdfKey Trends Shaping the Future of Infrastructure.pdf
Key Trends Shaping the Future of Infrastructure.pdf
Cheryl Hung
 
IOS-PENTESTING-BEGINNERS-PRACTICAL-GUIDE-.pptx
IOS-PENTESTING-BEGINNERS-PRACTICAL-GUIDE-.pptxIOS-PENTESTING-BEGINNERS-PRACTICAL-GUIDE-.pptx
IOS-PENTESTING-BEGINNERS-PRACTICAL-GUIDE-.pptx
Abida Shariff
 
GraphRAG is All You need? LLM & Knowledge Graph
GraphRAG is All You need? LLM & Knowledge GraphGraphRAG is All You need? LLM & Knowledge Graph
GraphRAG is All You need? LLM & Knowledge Graph
Guy Korland
 
FIDO Alliance Osaka Seminar: Passkeys at Amazon.pdf
FIDO Alliance Osaka Seminar: Passkeys at Amazon.pdfFIDO Alliance Osaka Seminar: Passkeys at Amazon.pdf
FIDO Alliance Osaka Seminar: Passkeys at Amazon.pdf
FIDO Alliance
 
Transcript: Selling digital books in 2024: Insights from industry leaders - T...
Transcript: Selling digital books in 2024: Insights from industry leaders - T...Transcript: Selling digital books in 2024: Insights from industry leaders - T...
Transcript: Selling digital books in 2024: Insights from industry leaders - T...
BookNet Canada
 
GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...
GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...
GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...
James Anderson
 
From Daily Decisions to Bottom Line: Connecting Product Work to Revenue by VP...
From Daily Decisions to Bottom Line: Connecting Product Work to Revenue by VP...From Daily Decisions to Bottom Line: Connecting Product Work to Revenue by VP...
From Daily Decisions to Bottom Line: Connecting Product Work to Revenue by VP...
Product School
 
De-mystifying Zero to One: Design Informed Techniques for Greenfield Innovati...
De-mystifying Zero to One: Design Informed Techniques for Greenfield Innovati...De-mystifying Zero to One: Design Informed Techniques for Greenfield Innovati...
De-mystifying Zero to One: Design Informed Techniques for Greenfield Innovati...
Product School
 

Recently uploaded (20)

The Future of Platform Engineering
The Future of Platform EngineeringThe Future of Platform Engineering
The Future of Platform Engineering
 
Essentials of Automations: Optimizing FME Workflows with Parameters
Essentials of Automations: Optimizing FME Workflows with ParametersEssentials of Automations: Optimizing FME Workflows with Parameters
Essentials of Automations: Optimizing FME Workflows with Parameters
 
Slack (or Teams) Automation for Bonterra Impact Management (fka Social Soluti...
Slack (or Teams) Automation for Bonterra Impact Management (fka Social Soluti...Slack (or Teams) Automation for Bonterra Impact Management (fka Social Soluti...
Slack (or Teams) Automation for Bonterra Impact Management (fka Social Soluti...
 
Software Delivery At the Speed of AI: Inflectra Invests In AI-Powered Quality
Software Delivery At the Speed of AI: Inflectra Invests In AI-Powered QualitySoftware Delivery At the Speed of AI: Inflectra Invests In AI-Powered Quality
Software Delivery At the Speed of AI: Inflectra Invests In AI-Powered Quality
 
Dev Dives: Train smarter, not harder – active learning and UiPath LLMs for do...
Dev Dives: Train smarter, not harder – active learning and UiPath LLMs for do...Dev Dives: Train smarter, not harder – active learning and UiPath LLMs for do...
Dev Dives: Train smarter, not harder – active learning and UiPath LLMs for do...
 
FIDO Alliance Osaka Seminar: FIDO Security Aspects.pdf
FIDO Alliance Osaka Seminar: FIDO Security Aspects.pdfFIDO Alliance Osaka Seminar: FIDO Security Aspects.pdf
FIDO Alliance Osaka Seminar: FIDO Security Aspects.pdf
 
FIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdf
FIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdfFIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdf
FIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdf
 
Leading Change strategies and insights for effective change management pdf 1.pdf
Leading Change strategies and insights for effective change management pdf 1.pdfLeading Change strategies and insights for effective change management pdf 1.pdf
Leading Change strategies and insights for effective change management pdf 1.pdf
 
Neuro-symbolic is not enough, we need neuro-*semantic*
Neuro-symbolic is not enough, we need neuro-*semantic*Neuro-symbolic is not enough, we need neuro-*semantic*
Neuro-symbolic is not enough, we need neuro-*semantic*
 
Connector Corner: Automate dynamic content and events by pushing a button
Connector Corner: Automate dynamic content and events by pushing a buttonConnector Corner: Automate dynamic content and events by pushing a button
Connector Corner: Automate dynamic content and events by pushing a button
 
ODC, Data Fabric and Architecture User Group
ODC, Data Fabric and Architecture User GroupODC, Data Fabric and Architecture User Group
ODC, Data Fabric and Architecture User Group
 
Accelerate your Kubernetes clusters with Varnish Caching
Accelerate your Kubernetes clusters with Varnish CachingAccelerate your Kubernetes clusters with Varnish Caching
Accelerate your Kubernetes clusters with Varnish Caching
 
Key Trends Shaping the Future of Infrastructure.pdf
Key Trends Shaping the Future of Infrastructure.pdfKey Trends Shaping the Future of Infrastructure.pdf
Key Trends Shaping the Future of Infrastructure.pdf
 
IOS-PENTESTING-BEGINNERS-PRACTICAL-GUIDE-.pptx
IOS-PENTESTING-BEGINNERS-PRACTICAL-GUIDE-.pptxIOS-PENTESTING-BEGINNERS-PRACTICAL-GUIDE-.pptx
IOS-PENTESTING-BEGINNERS-PRACTICAL-GUIDE-.pptx
 
GraphRAG is All You need? LLM & Knowledge Graph
GraphRAG is All You need? LLM & Knowledge GraphGraphRAG is All You need? LLM & Knowledge Graph
GraphRAG is All You need? LLM & Knowledge Graph
 
FIDO Alliance Osaka Seminar: Passkeys at Amazon.pdf
FIDO Alliance Osaka Seminar: Passkeys at Amazon.pdfFIDO Alliance Osaka Seminar: Passkeys at Amazon.pdf
FIDO Alliance Osaka Seminar: Passkeys at Amazon.pdf
 
Transcript: Selling digital books in 2024: Insights from industry leaders - T...
Transcript: Selling digital books in 2024: Insights from industry leaders - T...Transcript: Selling digital books in 2024: Insights from industry leaders - T...
Transcript: Selling digital books in 2024: Insights from industry leaders - T...
 
GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...
GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...
GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...
 
From Daily Decisions to Bottom Line: Connecting Product Work to Revenue by VP...
From Daily Decisions to Bottom Line: Connecting Product Work to Revenue by VP...From Daily Decisions to Bottom Line: Connecting Product Work to Revenue by VP...
From Daily Decisions to Bottom Line: Connecting Product Work to Revenue by VP...
 
De-mystifying Zero to One: Design Informed Techniques for Greenfield Innovati...
De-mystifying Zero to One: Design Informed Techniques for Greenfield Innovati...De-mystifying Zero to One: Design Informed Techniques for Greenfield Innovati...
De-mystifying Zero to One: Design Informed Techniques for Greenfield Innovati...
 

React Design Patterns