SlideShare a Scribd company logo

Design Patterns in React

Functional programming principles are the foundation of design patterns in React. Following FP and design patterns in React leads to optimal solutions. Get to know them!

1 of 20
Download to read offline
Design Patterns
in React
27 June, 2019
Tomasz Bąk
tb@tomaszbak.com
Design Patterns in React
Agenda
● Why we need software design patterns?
● Principles of Functional Programming (FP)
● Design patterns in React
What are software design patterns?
● a description or template for how to solve a problem
● they fit between the programming paradigm and a concrete
algorithm
Programming paradigm
(i.e. OOP, functional)
Design patterns
(i.e. Container Pattern)
Algorithm
(i.e. your components)
Why we need software design patterns?
● to understand the high-level design of the code
● to apply proven solutions to common problems
It is often the case that you won’t need to refactor the code
later on because applying the correct design pattern to a
given problem is already an optimal solution.
Popular programming design patterns
● Gang of Four (GoF) design patterns
https://github.com/fbeline/design-patterns-JS
● S.O.L.I.D. principles
https://medium.com/@cramirez92/s-o-l-i-d-the-first-5-priciples-of-object-or
iented-design-with-javascript-790f6ac9b9fa

Recommended

Jakarta EE: Today and Tomorrow
Jakarta EE: Today and TomorrowJakarta EE: Today and Tomorrow
Jakarta EE: Today and TomorrowDmitry Kornilov
 
Introduction to React JS for beginners
Introduction to React JS for beginners Introduction to React JS for beginners
Introduction to React JS for beginners Varun Raj
 
Write microservice in golang
Write microservice in golangWrite microservice in golang
Write microservice in golangBo-Yi Wu
 
ReactJS presentation
ReactJS presentationReactJS presentation
ReactJS presentationThanh Tuong
 
Full Stack React Workshop [CSSC x GDSC]
Full Stack React Workshop [CSSC x GDSC]Full Stack React Workshop [CSSC x GDSC]
Full Stack React Workshop [CSSC x GDSC]GDSC UofT Mississauga
 

More Related Content

What's hot

GraalVM Overview Compact version
GraalVM Overview Compact versionGraalVM Overview Compact version
GraalVM Overview Compact versionscalaconfjp
 
BUSINESS ARCHITECTURE OVERVIEW
BUSINESS ARCHITECTURE OVERVIEWBUSINESS ARCHITECTURE OVERVIEW
BUSINESS ARCHITECTURE OVERVIEWKenMartin18
 
Baby steps to Domain-Driven Design
Baby steps to Domain-Driven DesignBaby steps to Domain-Driven Design
Baby steps to Domain-Driven DesignŽilvinas Kuusas
 
Atomic Design
Atomic Design Atomic Design
Atomic Design Rey Mayson
 
Android Modularization
Android ModularizationAndroid Modularization
Android ModularizationYoung-Hyuk Yoo
 
Introduction to react
Introduction to reactIntroduction to react
Introduction to reactkiranabburi
 
Togaf introduction and core concepts
Togaf introduction and core conceptsTogaf introduction and core concepts
Togaf introduction and core conceptsPaul Sullivan
 
DDD patterns that were not in the book
DDD patterns that were not in the bookDDD patterns that were not in the book
DDD patterns that were not in the bookCyrille Martraire
 
React js - The Core Concepts
React js - The Core ConceptsReact js - The Core Concepts
React js - The Core ConceptsDivyang Bhambhani
 
Domain Driven Design
Domain Driven DesignDomain Driven Design
Domain Driven DesignNader Albert
 
Single Responsibility Principle
Single Responsibility PrincipleSingle Responsibility Principle
Single Responsibility PrincipleEyal Golan
 
Introduction to Enterprise Architecture
Introduction to Enterprise ArchitectureIntroduction to Enterprise Architecture
Introduction to Enterprise ArchitectureMohammed Omar
 
Basics of reflection in java
Basics of reflection in javaBasics of reflection in java
Basics of reflection in javakim.mens
 
The 4-Layer Architecture in Practice
The 4-Layer Architecture in PracticeThe 4-Layer Architecture in Practice
The 4-Layer Architecture in PracticeOutSystems
 
Refactoring Applications using SOLID Principles
Refactoring Applications using SOLID PrinciplesRefactoring Applications using SOLID Principles
Refactoring Applications using SOLID PrinciplesSteven Smith
 
SOLID Design Principles
SOLID Design PrinciplesSOLID Design Principles
SOLID Design PrinciplesSamuel Breed
 
Testing With OutSystems
Testing With OutSystemsTesting With OutSystems
Testing With OutSystemsOutSystems
 

What's hot (20)

React Hooks
React HooksReact Hooks
React Hooks
 
GraalVM Overview Compact version
GraalVM Overview Compact versionGraalVM Overview Compact version
GraalVM Overview Compact version
 
BUSINESS ARCHITECTURE OVERVIEW
BUSINESS ARCHITECTURE OVERVIEWBUSINESS ARCHITECTURE OVERVIEW
BUSINESS ARCHITECTURE OVERVIEW
 
Baby steps to Domain-Driven Design
Baby steps to Domain-Driven DesignBaby steps to Domain-Driven Design
Baby steps to Domain-Driven Design
 
Atomic Design
Atomic Design Atomic Design
Atomic Design
 
Android Modularization
Android ModularizationAndroid Modularization
Android Modularization
 
Introduction to react
Introduction to reactIntroduction to react
Introduction to react
 
Togaf introduction and core concepts
Togaf introduction and core conceptsTogaf introduction and core concepts
Togaf introduction and core concepts
 
React workshop
React workshopReact workshop
React workshop
 
DDD patterns that were not in the book
DDD patterns that were not in the bookDDD patterns that were not in the book
DDD patterns that were not in the book
 
React js - The Core Concepts
React js - The Core ConceptsReact js - The Core Concepts
React js - The Core Concepts
 
Domain Driven Design
Domain Driven DesignDomain Driven Design
Domain Driven Design
 
Single Responsibility Principle
Single Responsibility PrincipleSingle Responsibility Principle
Single Responsibility Principle
 
Introduction to Enterprise Architecture
Introduction to Enterprise ArchitectureIntroduction to Enterprise Architecture
Introduction to Enterprise Architecture
 
Basics of reflection in java
Basics of reflection in javaBasics of reflection in java
Basics of reflection in java
 
The 4-Layer Architecture in Practice
The 4-Layer Architecture in PracticeThe 4-Layer Architecture in Practice
The 4-Layer Architecture in Practice
 
Refactoring Applications using SOLID Principles
Refactoring Applications using SOLID PrinciplesRefactoring Applications using SOLID Principles
Refactoring Applications using SOLID Principles
 
Togaf 9.2 Introduction
Togaf 9.2 IntroductionTogaf 9.2 Introduction
Togaf 9.2 Introduction
 
SOLID Design Principles
SOLID Design PrinciplesSOLID Design Principles
SOLID Design Principles
 
Testing With OutSystems
Testing With OutSystemsTesting With OutSystems
Testing With OutSystems
 

Similar to Design Patterns in React

Design Of A Design Representation
Design Of A Design RepresentationDesign Of A Design Representation
Design Of A Design RepresentationKatie Ellis
 
London F-Sharp User Group : Don Syme on F# - 09/09/2010
London F-Sharp User Group : Don Syme on F# - 09/09/2010London F-Sharp User Group : Don Syme on F# - 09/09/2010
London F-Sharp User Group : Don Syme on F# - 09/09/2010Skills Matter
 
CIS110 Computer Programming Design Chapter (1)
CIS110 Computer Programming Design Chapter  (1)CIS110 Computer Programming Design Chapter  (1)
CIS110 Computer Programming Design Chapter (1)Dr. Ahmed Al Zaidy
 
chapter1-161229182113 (1).pdf
chapter1-161229182113 (1).pdfchapter1-161229182113 (1).pdf
chapter1-161229182113 (1).pdfBernardVelasco1
 
Aspect Oriented Software Development
Aspect Oriented Software DevelopmentAspect Oriented Software Development
Aspect Oriented Software DevelopmentJignesh Patel
 
Sumit Gulwani at AI Frontiers : Programming by Examples
Sumit Gulwani at AI Frontiers : Programming by ExamplesSumit Gulwani at AI Frontiers : Programming by Examples
Sumit Gulwani at AI Frontiers : Programming by ExamplesAI Frontiers
 
Lecture 7 agile software development (2)
Lecture 7   agile software development (2)Lecture 7   agile software development (2)
Lecture 7 agile software development (2)IIUI
 
Cis 331 Success Begins / snaptutorial.com
Cis 331 Success Begins / snaptutorial.comCis 331 Success Begins / snaptutorial.com
Cis 331 Success Begins / snaptutorial.comRobinson069
 
CIS 331 Technology levels--snaptutorial.com
CIS 331 Technology levels--snaptutorial.comCIS 331 Technology levels--snaptutorial.com
CIS 331 Technology levels--snaptutorial.comsholingarjosh56
 
CIS 331 Education Redefined / snaptutorial.com
CIS 331  Education Redefined / snaptutorial.comCIS 331  Education Redefined / snaptutorial.com
CIS 331 Education Redefined / snaptutorial.comMcdonaldRyan200
 
Class[3][5th jun] [three js]
Class[3][5th jun] [three js]Class[3][5th jun] [three js]
Class[3][5th jun] [three js]Saajid Akram
 
Automatic Graphical Design Generator
Automatic Graphical Design GeneratorAutomatic Graphical Design Generator
Automatic Graphical Design GeneratorIRJET Journal
 

Similar to Design Patterns in React (20)

Design Of A Design Representation
Design Of A Design RepresentationDesign Of A Design Representation
Design Of A Design Representation
 
Essay Diagram
Essay DiagramEssay Diagram
Essay Diagram
 
London F-Sharp User Group : Don Syme on F# - 09/09/2010
London F-Sharp User Group : Don Syme on F# - 09/09/2010London F-Sharp User Group : Don Syme on F# - 09/09/2010
London F-Sharp User Group : Don Syme on F# - 09/09/2010
 
CIS110 Computer Programming Design Chapter (1)
CIS110 Computer Programming Design Chapter  (1)CIS110 Computer Programming Design Chapter  (1)
CIS110 Computer Programming Design Chapter (1)
 
chapter1-161229182113 (1).pdf
chapter1-161229182113 (1).pdfchapter1-161229182113 (1).pdf
chapter1-161229182113 (1).pdf
 
Aspect Oriented Software Development
Aspect Oriented Software DevelopmentAspect Oriented Software Development
Aspect Oriented Software Development
 
Sumit Gulwani at AI Frontiers : Programming by Examples
Sumit Gulwani at AI Frontiers : Programming by ExamplesSumit Gulwani at AI Frontiers : Programming by Examples
Sumit Gulwani at AI Frontiers : Programming by Examples
 
MSR Asia Summit
MSR Asia SummitMSR Asia Summit
MSR Asia Summit
 
Build 2019 Recap
Build 2019 RecapBuild 2019 Recap
Build 2019 Recap
 
Code Refactoring
Code RefactoringCode Refactoring
Code Refactoring
 
project_details
project_detailsproject_details
project_details
 
Cocomomodel
CocomomodelCocomomodel
Cocomomodel
 
Cocomo model
Cocomo modelCocomo model
Cocomo model
 
COCOMO Model
COCOMO ModelCOCOMO Model
COCOMO Model
 
Lecture 7 agile software development (2)
Lecture 7   agile software development (2)Lecture 7   agile software development (2)
Lecture 7 agile software development (2)
 
Cis 331 Success Begins / snaptutorial.com
Cis 331 Success Begins / snaptutorial.comCis 331 Success Begins / snaptutorial.com
Cis 331 Success Begins / snaptutorial.com
 
CIS 331 Technology levels--snaptutorial.com
CIS 331 Technology levels--snaptutorial.comCIS 331 Technology levels--snaptutorial.com
CIS 331 Technology levels--snaptutorial.com
 
CIS 331 Education Redefined / snaptutorial.com
CIS 331  Education Redefined / snaptutorial.comCIS 331  Education Redefined / snaptutorial.com
CIS 331 Education Redefined / snaptutorial.com
 
Class[3][5th jun] [three js]
Class[3][5th jun] [three js]Class[3][5th jun] [three js]
Class[3][5th jun] [three js]
 
Automatic Graphical Design Generator
Automatic Graphical Design GeneratorAutomatic Graphical Design Generator
Automatic Graphical Design Generator
 

More from Tomasz Bak

Building React CRUD app in minutes?
Building React CRUD app in minutes?Building React CRUD app in minutes?
Building React CRUD app in minutes?Tomasz Bak
 
How to migrate large project from Angular to React
How to migrate large project from Angular to ReactHow to migrate large project from Angular to React
How to migrate large project from Angular to ReactTomasz Bak
 
e2e testing with cypress
e2e testing with cypresse2e testing with cypress
e2e testing with cypressTomasz Bak
 
How to GraphQL: React Apollo
How to GraphQL: React ApolloHow to GraphQL: React Apollo
How to GraphQL: React ApolloTomasz Bak
 
How to GraphQL
How to GraphQLHow to GraphQL
How to GraphQLTomasz Bak
 
Working with npm packages
Working with npm packagesWorking with npm packages
Working with npm packagesTomasz Bak
 
How to replace rails asset pipeline with webpack?
How to replace rails asset pipeline with webpack?How to replace rails asset pipeline with webpack?
How to replace rails asset pipeline with webpack?Tomasz Bak
 
Functional Reactive Angular 2
Functional Reactive Angular 2 Functional Reactive Angular 2
Functional Reactive Angular 2 Tomasz Bak
 
Jak wnieść wkład w Open Source?
Jak wnieść wkład w Open Source?Jak wnieść wkład w Open Source?
Jak wnieść wkład w Open Source?Tomasz Bak
 
JavaScript Promises
JavaScript PromisesJavaScript Promises
JavaScript PromisesTomasz Bak
 
Replacing Rails asset pipeline with Gulp
Replacing Rails asset pipeline with GulpReplacing Rails asset pipeline with Gulp
Replacing Rails asset pipeline with GulpTomasz Bak
 
Ulepszanie aplikacji webowej z AngularJS
Ulepszanie aplikacji webowej z AngularJSUlepszanie aplikacji webowej z AngularJS
Ulepszanie aplikacji webowej z AngularJSTomasz Bak
 
Bardziej produktywny gmail
Bardziej produktywny gmailBardziej produktywny gmail
Bardziej produktywny gmailTomasz Bak
 
Rails tobak2005
Rails tobak2005Rails tobak2005
Rails tobak2005Tomasz Bak
 
Testowanie JavaScript
Testowanie JavaScriptTestowanie JavaScript
Testowanie JavaScriptTomasz Bak
 

More from Tomasz Bak (18)

Building React CRUD app in minutes?
Building React CRUD app in minutes?Building React CRUD app in minutes?
Building React CRUD app in minutes?
 
How to migrate large project from Angular to React
How to migrate large project from Angular to ReactHow to migrate large project from Angular to React
How to migrate large project from Angular to React
 
JAMstack
JAMstackJAMstack
JAMstack
 
e2e testing with cypress
e2e testing with cypresse2e testing with cypress
e2e testing with cypress
 
How to GraphQL: React Apollo
How to GraphQL: React ApolloHow to GraphQL: React Apollo
How to GraphQL: React Apollo
 
How to GraphQL
How to GraphQLHow to GraphQL
How to GraphQL
 
Working with npm packages
Working with npm packagesWorking with npm packages
Working with npm packages
 
How to replace rails asset pipeline with webpack?
How to replace rails asset pipeline with webpack?How to replace rails asset pipeline with webpack?
How to replace rails asset pipeline with webpack?
 
Functional Reactive Angular 2
Functional Reactive Angular 2 Functional Reactive Angular 2
Functional Reactive Angular 2
 
Jak wnieść wkład w Open Source?
Jak wnieść wkład w Open Source?Jak wnieść wkład w Open Source?
Jak wnieść wkład w Open Source?
 
JavaScript Promises
JavaScript PromisesJavaScript Promises
JavaScript Promises
 
Replacing Rails asset pipeline with Gulp
Replacing Rails asset pipeline with GulpReplacing Rails asset pipeline with Gulp
Replacing Rails asset pipeline with Gulp
 
Ulepszanie aplikacji webowej z AngularJS
Ulepszanie aplikacji webowej z AngularJSUlepszanie aplikacji webowej z AngularJS
Ulepszanie aplikacji webowej z AngularJS
 
Bardziej produktywny gmail
Bardziej produktywny gmailBardziej produktywny gmail
Bardziej produktywny gmail
 
Kerberos
KerberosKerberos
Kerberos
 
Rails tobak2005
Rails tobak2005Rails tobak2005
Rails tobak2005
 
Ldap novell
Ldap novellLdap novell
Ldap novell
 
Testowanie JavaScript
Testowanie JavaScriptTestowanie JavaScript
Testowanie JavaScript
 

Recently uploaded

Utilising Energy Modelling for LCSF and PSDS Funding Applications
Utilising Energy Modelling for LCSF and PSDS Funding ApplicationsUtilising Energy Modelling for LCSF and PSDS Funding Applications
Utilising Energy Modelling for LCSF and PSDS Funding ApplicationsIES VE
 
Establishing data sharing standards to promote global industry development
Establishing data sharing standards to promote global industry developmentEstablishing data sharing standards to promote global industry development
Establishing data sharing standards to promote global industry developmentThorsten Huelsmann
 
Q4 2023 Quarterly Investor Presentation - FINAL.pdf
Q4 2023 Quarterly Investor Presentation - FINAL.pdfQ4 2023 Quarterly Investor Presentation - FINAL.pdf
Q4 2023 Quarterly Investor Presentation - FINAL.pdfTejal81
 
GraphSummit London Feb 2024 - ABK - Neo4j Product Vision and Roadmap.pptx
GraphSummit London Feb 2024 - ABK - Neo4j Product Vision and Roadmap.pptxGraphSummit London Feb 2024 - ABK - Neo4j Product Vision and Roadmap.pptx
GraphSummit London Feb 2024 - ABK - Neo4j Product Vision and Roadmap.pptxNeo4j
 
AI for Educators - Integrating AI in the Classrooms
AI for Educators - Integrating AI in the ClassroomsAI for Educators - Integrating AI in the Classrooms
AI for Educators - Integrating AI in the ClassroomsPremsankar Chakkingal
 
LF Energy Webinar: Introduction to TROLIE
LF Energy Webinar: Introduction to TROLIELF Energy Webinar: Introduction to TROLIE
LF Energy Webinar: Introduction to TROLIEDanBrown980551
 
Building Bridges: Merging RPA Processes, UiPath Apps, and Data Service to bu...
Building Bridges:  Merging RPA Processes, UiPath Apps, and Data Service to bu...Building Bridges:  Merging RPA Processes, UiPath Apps, and Data Service to bu...
Building Bridges: Merging RPA Processes, UiPath Apps, and Data Service to bu...DianaGray10
 
My Journey towards Artificial Intelligence
My Journey towards Artificial IntelligenceMy Journey towards Artificial Intelligence
My Journey towards Artificial IntelligenceVijayananda Mohire
 
New ThousandEyes Product Features and Release Highlights: February 2024
New ThousandEyes Product Features and Release Highlights: February 2024New ThousandEyes Product Features and Release Highlights: February 2024
New ThousandEyes Product Features and Release Highlights: February 2024ThousandEyes
 
Battle of React State Managers in frontend applications
Battle of React State Managers in frontend applicationsBattle of React State Managers in frontend applications
Battle of React State Managers in frontend applicationsEvangelia Mitsopoulou
 
ASTRAZENECA. Knowledge Graphs Powering a Fast-moving Global Life Sciences Org...
ASTRAZENECA. Knowledge Graphs Powering a Fast-moving Global Life Sciences Org...ASTRAZENECA. Knowledge Graphs Powering a Fast-moving Global Life Sciences Org...
ASTRAZENECA. Knowledge Graphs Powering a Fast-moving Global Life Sciences Org...Neo4j
 
SKY Paradigms, change and cake: the steep curve of introducing new technologies
SKY Paradigms, change and cake: the steep curve of introducing new technologiesSKY Paradigms, change and cake: the steep curve of introducing new technologies
SKY Paradigms, change and cake: the steep curve of introducing new technologiesNeo4j
 
Cultivating Entrepreneurial Mindset in Product Management: Strategies for Suc...
Cultivating Entrepreneurial Mindset in Product Management: Strategies for Suc...Cultivating Entrepreneurial Mindset in Product Management: Strategies for Suc...
Cultivating Entrepreneurial Mindset in Product Management: Strategies for Suc...Product School
 
Artificial Intelligence, Design, and More-than-Human Justice
Artificial Intelligence, Design, and More-than-Human JusticeArtificial Intelligence, Design, and More-than-Human Justice
Artificial Intelligence, Design, and More-than-Human JusticeJosh Gellers
 
Python For Kids - Sách Lập trình cho trẻ em
Python For Kids - Sách Lập trình cho trẻ emPython For Kids - Sách Lập trình cho trẻ em
Python For Kids - Sách Lập trình cho trẻ emNho Vĩnh
 
How AI and ChatGPT are changing cybersecurity forever.pptx
How AI and ChatGPT are changing cybersecurity forever.pptxHow AI and ChatGPT are changing cybersecurity forever.pptx
How AI and ChatGPT are changing cybersecurity forever.pptxInfosec
 
Introduction to Multimodal LLMs with LLaVA
Introduction to Multimodal LLMs with LLaVAIntroduction to Multimodal LLMs with LLaVA
Introduction to Multimodal LLMs with LLaVARobert McDermott
 
AGFM - Toyota Coaster 1HZ Install Guide.pdf
AGFM - Toyota Coaster 1HZ Install Guide.pdfAGFM - Toyota Coaster 1HZ Install Guide.pdf
AGFM - Toyota Coaster 1HZ Install Guide.pdfRodneyThomas28
 
Act Like an Owner, Challenge Like a VC by former CPO, Tripadvisor
Act Like an Owner,  Challenge Like a VC by former CPO, TripadvisorAct Like an Owner,  Challenge Like a VC by former CPO, Tripadvisor
Act Like an Owner, Challenge Like a VC by former CPO, TripadvisorProduct School
 

Recently uploaded (20)

Utilising Energy Modelling for LCSF and PSDS Funding Applications
Utilising Energy Modelling for LCSF and PSDS Funding ApplicationsUtilising Energy Modelling for LCSF and PSDS Funding Applications
Utilising Energy Modelling for LCSF and PSDS Funding Applications
 
Establishing data sharing standards to promote global industry development
Establishing data sharing standards to promote global industry developmentEstablishing data sharing standards to promote global industry development
Establishing data sharing standards to promote global industry development
 
Q4 2023 Quarterly Investor Presentation - FINAL.pdf
Q4 2023 Quarterly Investor Presentation - FINAL.pdfQ4 2023 Quarterly Investor Presentation - FINAL.pdf
Q4 2023 Quarterly Investor Presentation - FINAL.pdf
 
GraphSummit London Feb 2024 - ABK - Neo4j Product Vision and Roadmap.pptx
GraphSummit London Feb 2024 - ABK - Neo4j Product Vision and Roadmap.pptxGraphSummit London Feb 2024 - ABK - Neo4j Product Vision and Roadmap.pptx
GraphSummit London Feb 2024 - ABK - Neo4j Product Vision and Roadmap.pptx
 
AI for Educators - Integrating AI in the Classrooms
AI for Educators - Integrating AI in the ClassroomsAI for Educators - Integrating AI in the Classrooms
AI for Educators - Integrating AI in the Classrooms
 
LF Energy Webinar: Introduction to TROLIE
LF Energy Webinar: Introduction to TROLIELF Energy Webinar: Introduction to TROLIE
LF Energy Webinar: Introduction to TROLIE
 
Building Bridges: Merging RPA Processes, UiPath Apps, and Data Service to bu...
Building Bridges:  Merging RPA Processes, UiPath Apps, and Data Service to bu...Building Bridges:  Merging RPA Processes, UiPath Apps, and Data Service to bu...
Building Bridges: Merging RPA Processes, UiPath Apps, and Data Service to bu...
 
My Journey towards Artificial Intelligence
My Journey towards Artificial IntelligenceMy Journey towards Artificial Intelligence
My Journey towards Artificial Intelligence
 
New ThousandEyes Product Features and Release Highlights: February 2024
New ThousandEyes Product Features and Release Highlights: February 2024New ThousandEyes Product Features and Release Highlights: February 2024
New ThousandEyes Product Features and Release Highlights: February 2024
 
Battle of React State Managers in frontend applications
Battle of React State Managers in frontend applicationsBattle of React State Managers in frontend applications
Battle of React State Managers in frontend applications
 
ASTRAZENECA. Knowledge Graphs Powering a Fast-moving Global Life Sciences Org...
ASTRAZENECA. Knowledge Graphs Powering a Fast-moving Global Life Sciences Org...ASTRAZENECA. Knowledge Graphs Powering a Fast-moving Global Life Sciences Org...
ASTRAZENECA. Knowledge Graphs Powering a Fast-moving Global Life Sciences Org...
 
SKY Paradigms, change and cake: the steep curve of introducing new technologies
SKY Paradigms, change and cake: the steep curve of introducing new technologiesSKY Paradigms, change and cake: the steep curve of introducing new technologies
SKY Paradigms, change and cake: the steep curve of introducing new technologies
 
Cultivating Entrepreneurial Mindset in Product Management: Strategies for Suc...
Cultivating Entrepreneurial Mindset in Product Management: Strategies for Suc...Cultivating Entrepreneurial Mindset in Product Management: Strategies for Suc...
Cultivating Entrepreneurial Mindset in Product Management: Strategies for Suc...
 
Artificial Intelligence, Design, and More-than-Human Justice
Artificial Intelligence, Design, and More-than-Human JusticeArtificial Intelligence, Design, and More-than-Human Justice
Artificial Intelligence, Design, and More-than-Human Justice
 
Python For Kids - Sách Lập trình cho trẻ em
Python For Kids - Sách Lập trình cho trẻ emPython For Kids - Sách Lập trình cho trẻ em
Python For Kids - Sách Lập trình cho trẻ em
 
How AI and ChatGPT are changing cybersecurity forever.pptx
How AI and ChatGPT are changing cybersecurity forever.pptxHow AI and ChatGPT are changing cybersecurity forever.pptx
How AI and ChatGPT are changing cybersecurity forever.pptx
 
In sharing we trust. Taking advantage of a diverse consortium to build a tran...
In sharing we trust. Taking advantage of a diverse consortium to build a tran...In sharing we trust. Taking advantage of a diverse consortium to build a tran...
In sharing we trust. Taking advantage of a diverse consortium to build a tran...
 
Introduction to Multimodal LLMs with LLaVA
Introduction to Multimodal LLMs with LLaVAIntroduction to Multimodal LLMs with LLaVA
Introduction to Multimodal LLMs with LLaVA
 
AGFM - Toyota Coaster 1HZ Install Guide.pdf
AGFM - Toyota Coaster 1HZ Install Guide.pdfAGFM - Toyota Coaster 1HZ Install Guide.pdf
AGFM - Toyota Coaster 1HZ Install Guide.pdf
 
Act Like an Owner, Challenge Like a VC by former CPO, Tripadvisor
Act Like an Owner,  Challenge Like a VC by former CPO, TripadvisorAct Like an Owner,  Challenge Like a VC by former CPO, Tripadvisor
Act Like an Owner, Challenge Like a VC by former CPO, Tripadvisor
 

Design Patterns in React

  • 1. Design Patterns in React 27 June, 2019 Tomasz Bąk tb@tomaszbak.com
  • 3. Agenda ● Why we need software design patterns? ● Principles of Functional Programming (FP) ● Design patterns in React
  • 4. What are software design patterns? ● a description or template for how to solve a problem ● they fit between the programming paradigm and a concrete algorithm Programming paradigm (i.e. OOP, functional) Design patterns (i.e. Container Pattern) Algorithm (i.e. your components)
  • 5. Why we need software design patterns? ● to understand the high-level design of the code ● to apply proven solutions to common problems It is often the case that you won’t need to refactor the code later on because applying the correct design pattern to a given problem is already an optimal solution.
  • 6. Popular programming design patterns ● Gang of Four (GoF) design patterns https://github.com/fbeline/design-patterns-JS ● S.O.L.I.D. principles https://medium.com/@cramirez92/s-o-l-i-d-the-first-5-priciples-of-object-or iented-design-with-javascript-790f6ac9b9fa
  • 7. See more at: Functional programming design patterns by Scott Wlaschin https://vimeo.com/113588389
  • 8. Principles of Functional Programming (FP) ● Functions are "first class citizens" ● Immutable data structures
  • 9. Functions composition increase code readability const increment = num => num + 5 const decrement = num => num - 3 const multiply = num => num * 2 const numbersOperation = num => increment(decrement(multiply(num))) console.log(numbersOperation(15)) // 32 Source: https://codinglawyer.net/index.php/2018/01/31/taste-the-principles-of-functional-programming-in-react/
  • 10. Functions as parameters increase code flexibility const numbers = [1, 5, 8, 10, 21] const plusOne = num => num + 1 console.log(numbers.map(plusOne)) // [2, 6, 9, 11, 22]
  • 11. Higher-order functions help to reuse code const numbers = [1, 5, 8, 10, 21] const createAddingFunction = number => arr => arr.map(num => num + number) const numbersPlusOne = createAddingFunction(1) console.log(numbersPlusOne(numbers)) // [2, 6, 9, 11, 22] Source: https://codinglawyer.net/index.php/2018/01/31/taste-the-principles-of-functional-programming-in-react/
  • 12. Immutability It’s not about forbidding change, but how to handle change. Instead of modifying something you create something new with your change applied.
  • 13. Immutability unintended objects mutation bug const numbers = [1, 5, 8, 10, 21] const numbersPlusOne = numbers => { for(let i = 0; i < numbers.length; i++) { numbers[i] = numbers[i] + 1 } return numbers } console.log(numbersPlusOne(numbers)) // [2, 6, 9, 11, 22] - the output we wanted console.log(numbers) // [2, 6, 9, 11, 22] - the side effect we did not want! Source: https://codinglawyer.net/index.php/2018/01/31/taste-the-principles-of-functional-programming-in-react/
  • 14. Immutability create new data instead of changing data const numbers = [1, 5, 8, 10, 21] const createAddingFunction = number => arr => arr.map(num => num + number) const numbersPlusOne = createAddingFunction(1) console.log(numbersPlusOne(numbers)) // [2, 6, 9, 11, 22] - the output we wanted console.log(numbers) // [1, 5, 8, 10, 21] - numbers are not changed by function! Source: https://codinglawyer.net/index.php/2018/01/31/taste-the-principles-of-functional-programming-in-react/
  • 15. Design patterns in React ● Components ● Data-Down, Actions-Up
  • 16. React Component Patterns by Michael Chan https://www.youtube.com/watch?v=YaZg8wg39QQ ● Stateful component ● Stateless component ● Container component ● Higher-order component ● Render props
  • 17. reactpatterns.com ● Function component ● Destructuring props ● JSX spread attributes ● Merge destructured props with other values ● Conditional rendering ● Children types ● Array as children ● Function as children ● Render prop ● Children pass-through ● Proxy component ● Style component ● Event switch ● Layout component ● Container component ● Higher-order component ● State hoisting ● Controlled input
  • 18. github.com/vasanthk/react-bits ● Conditional in JSX ● Async Nature Of setState() ● Dependency Injection ● Context Wrapper ● Event Handlers ● Flux Pattern ● One Way Data Flow ● Presentational vs Container ● Third Party Integration ● Passing Function To setState() ● Decorators ● Feature Flags ● Component Switch ● Reaching Into A Component ● List Components ● Format Text via Component ● Share Tracking Logic ● Toggle UI Elements ● HOC for Feature Toggles ● HOC props proxy ● Wrapper Components ● Display Order Variations
  • 20. Summary Functional programming principles are the foundation of design patterns in React. Following FP and design patterns in React leads to optimal solutions. Get to know them!