SlideShare a Scribd company logo
www.luxoft.com
Andrii Sliusar
Module Architecture
of React-Redux
Applications
www.luxoft.com
Problem statement
www.luxoft.com
What is “Architecture”?
• Architecture - a fundamental agreement and
solutions.
• Architecture - something important.
• Architecture is difficult to change.
• Architecture must be reused.
www.luxoft.com
Why do we need module architecture?
Module architecture is the type of architecture where an application is semantically split
on components.
For what?
• Development speed
• Scaling
• Reduced maintenance costs
• Decrease the input threshold
www.luxoft.com
How to ensure the necessary modularity?
The modularity level depends on the scale of the application.
Everything that can be identified as a separate component / project should be separated.
What should we split?
• Main Components
• Data model
• Business logic
www.luxoft.com
The connectivity problem of React-Redux architecture?
In order for the project to be scalable and readable, it is necessary to ensure minimal
connectivity between modules.
www.luxoft.com
Modular application architecture
www.luxoft.com
Extract business logic and domain
www.luxoft.com
Root folder
The main idea to keep everything as simple as possible on each level of the architecture.
/project
/core
/screens
app.ts
www.luxoft.com
How to organize the architecture of modules?
/screens
/screen1
/actions
/containers
/components
/reducers
/state
index.tsx
www.luxoft.com
What to do with styles?
• Styles are in one folder with a component
• SASS is good, but JS-based styles have more option
• Create themes from the very beginning
www.luxoft.com
Algorithm for creating a React component
1. Create a component (const or class)
2. Add styles in the same folder
3. Create other logic (actions, reducers, ...)
If it becomes more complex
4. Move props connection to container
www.luxoft.com
Why do we need State model?
• It’s a clear way to work with state
• The same data model can be used in DB
• Build domain model from the beginning
www.luxoft.com
Wire selectors with state
• Everything is sorted by domains
• It clear easier to modify state and
selectors
export default class User{
public name:string;
public getName = (state) =>
state.user.name;
}
const mapStateToProps = (state, props) => ({
name: User.getName(state)
});
www.luxoft.com
What to do with actions?
• They must be standardized
• The same const between modules, but
different values
• They can be processed inside different
modules
enum ACTION_TYPE {
UPDATE_NAME = UPDATE_USER_NAME'
}
export const updateName = (name: string) => ({
type: ACTION_TYPE.UPDATE_NAME,
name
})
then
import {ACTION_TYPE as USER_ACTION_TYPE} from
‘./actions’;
www.luxoft.com
Pros and Cons of Modular architecture
Pros:
• Scaling
• Reduced maintenance costs
• Decrease the input threshold
Cons:
• Amount of folders/files
www.luxoft.com
Thank you!
Ad

More Related Content

What's hot (20)

A testing strategy for hexagonal applications
A testing strategy for hexagonal applicationsA testing strategy for hexagonal applications
A testing strategy for hexagonal applications
Matthias Noback
 
Salesforce lwc development workshops session #4
Salesforce lwc development workshops  session #4Salesforce lwc development workshops  session #4
Salesforce lwc development workshops session #4
Rahul Gawale
 
linkerd: The Cloud Native Service Mesh
linkerd: The Cloud Native Service Meshlinkerd: The Cloud Native Service Mesh
linkerd: The Cloud Native Service Mesh
Dario Simonetti
 
JEE session 1
JEE session 1JEE session 1
JEE session 1
Smita B Kumar
 
Microservices with spring boot
Microservices  with spring bootMicroservices  with spring boot
Microservices with spring boot
Mesut Can Gurle
 
Hierarchical architecture
Hierarchical architectureHierarchical architecture
Hierarchical architecture
brigeit
 
Salesforce lwc development workshops session #3
Salesforce lwc development workshops  session #3Salesforce lwc development workshops  session #3
Salesforce lwc development workshops session #3
Rahul Gawale
 
Building Autonomous Services
Building Autonomous ServicesBuilding Autonomous Services
Building Autonomous Services
Matthias Noback
 
Service abstractions - Part 1: Queries
Service abstractions - Part 1: QueriesService abstractions - Part 1: Queries
Service abstractions - Part 1: Queries
Matthias Noback
 
(ATS6-DEV04) Building Web MashUp applications that include Accelrys Applicati...
(ATS6-DEV04) Building Web MashUp applications that include Accelrys Applicati...(ATS6-DEV04) Building Web MashUp applications that include Accelrys Applicati...
(ATS6-DEV04) Building Web MashUp applications that include Accelrys Applicati...
BIOVIA
 
(ATS6-APP05) Deploying Contur ELN to large organizations
(ATS6-APP05) Deploying Contur ELN to large organizations(ATS6-APP05) Deploying Contur ELN to large organizations
(ATS6-APP05) Deploying Contur ELN to large organizations
BIOVIA
 
Clovaを支える技術 機械学習配信基盤のご紹介
Clovaを支える技術 機械学習配信基盤のご紹介Clovaを支える技術 機械学習配信基盤のご紹介
Clovaを支える技術 機械学習配信基盤のご紹介
LINE Corporation
 
Architecting Single Page Applications
Architecting Single Page ApplicationsArchitecting Single Page Applications
Architecting Single Page Applications
Guy Nesher
 
Joining Data From Different Source: Many options, but Which to See?
Joining Data From Different Source: Many options, but Which to See?Joining Data From Different Source: Many options, but Which to See?
Joining Data From Different Source: Many options, but Which to See?
Safe Software
 
Flux architecture
Flux architectureFlux architecture
Flux architecture
Badr Zaman [Front End , J2EE ]
 
Architecture Sustaining LINE Sticker services
Architecture Sustaining LINE Sticker servicesArchitecture Sustaining LINE Sticker services
Architecture Sustaining LINE Sticker services
LINE Corporation
 
Give your microservices a bus ride with MassTransit
Give your microservices a bus ride with MassTransitGive your microservices a bus ride with MassTransit
Give your microservices a bus ride with MassTransit
Alexey Zimarev
 
AvalancheProject2012
AvalancheProject2012AvalancheProject2012
AvalancheProject2012
fishetra
 
Cody_Zeng_HPE_Intern_Poster
Cody_Zeng_HPE_Intern_PosterCody_Zeng_HPE_Intern_Poster
Cody_Zeng_HPE_Intern_Poster
Cody Zeng
 
Software architecture, Patterns for Scale
Software architecture, Patterns for ScaleSoftware architecture, Patterns for Scale
Software architecture, Patterns for Scale
iGbanam
 
A testing strategy for hexagonal applications
A testing strategy for hexagonal applicationsA testing strategy for hexagonal applications
A testing strategy for hexagonal applications
Matthias Noback
 
Salesforce lwc development workshops session #4
Salesforce lwc development workshops  session #4Salesforce lwc development workshops  session #4
Salesforce lwc development workshops session #4
Rahul Gawale
 
linkerd: The Cloud Native Service Mesh
linkerd: The Cloud Native Service Meshlinkerd: The Cloud Native Service Mesh
linkerd: The Cloud Native Service Mesh
Dario Simonetti
 
Microservices with spring boot
Microservices  with spring bootMicroservices  with spring boot
Microservices with spring boot
Mesut Can Gurle
 
Hierarchical architecture
Hierarchical architectureHierarchical architecture
Hierarchical architecture
brigeit
 
Salesforce lwc development workshops session #3
Salesforce lwc development workshops  session #3Salesforce lwc development workshops  session #3
Salesforce lwc development workshops session #3
Rahul Gawale
 
Building Autonomous Services
Building Autonomous ServicesBuilding Autonomous Services
Building Autonomous Services
Matthias Noback
 
Service abstractions - Part 1: Queries
Service abstractions - Part 1: QueriesService abstractions - Part 1: Queries
Service abstractions - Part 1: Queries
Matthias Noback
 
(ATS6-DEV04) Building Web MashUp applications that include Accelrys Applicati...
(ATS6-DEV04) Building Web MashUp applications that include Accelrys Applicati...(ATS6-DEV04) Building Web MashUp applications that include Accelrys Applicati...
(ATS6-DEV04) Building Web MashUp applications that include Accelrys Applicati...
BIOVIA
 
(ATS6-APP05) Deploying Contur ELN to large organizations
(ATS6-APP05) Deploying Contur ELN to large organizations(ATS6-APP05) Deploying Contur ELN to large organizations
(ATS6-APP05) Deploying Contur ELN to large organizations
BIOVIA
 
Clovaを支える技術 機械学習配信基盤のご紹介
Clovaを支える技術 機械学習配信基盤のご紹介Clovaを支える技術 機械学習配信基盤のご紹介
Clovaを支える技術 機械学習配信基盤のご紹介
LINE Corporation
 
Architecting Single Page Applications
Architecting Single Page ApplicationsArchitecting Single Page Applications
Architecting Single Page Applications
Guy Nesher
 
Joining Data From Different Source: Many options, but Which to See?
Joining Data From Different Source: Many options, but Which to See?Joining Data From Different Source: Many options, but Which to See?
Joining Data From Different Source: Many options, but Which to See?
Safe Software
 
Architecture Sustaining LINE Sticker services
Architecture Sustaining LINE Sticker servicesArchitecture Sustaining LINE Sticker services
Architecture Sustaining LINE Sticker services
LINE Corporation
 
Give your microservices a bus ride with MassTransit
Give your microservices a bus ride with MassTransitGive your microservices a bus ride with MassTransit
Give your microservices a bus ride with MassTransit
Alexey Zimarev
 
AvalancheProject2012
AvalancheProject2012AvalancheProject2012
AvalancheProject2012
fishetra
 
Cody_Zeng_HPE_Intern_Poster
Cody_Zeng_HPE_Intern_PosterCody_Zeng_HPE_Intern_Poster
Cody_Zeng_HPE_Intern_Poster
Cody Zeng
 
Software architecture, Patterns for Scale
Software architecture, Patterns for ScaleSoftware architecture, Patterns for Scale
Software architecture, Patterns for Scale
iGbanam
 

Similar to Andrii Sliusar "Module Architecture of React-Redux Applications" (20)

React.js at Cortex
React.js at CortexReact.js at Cortex
React.js at Cortex
Geoff Harcourt
 
A Model-Driven, Component Generation Approach for the Web of Things
A Model-Driven, Component Generation Approach for the Web of ThingsA Model-Driven, Component Generation Approach for the Web of Things
A Model-Driven, Component Generation Approach for the Web of Things
Andreas Ruppen
 
Thesis Defence: A Model Driven Architecture for the Web of Things
Thesis Defence: A Model Driven Architecture for the Web of ThingsThesis Defence: A Model Driven Architecture for the Web of Things
Thesis Defence: A Model Driven Architecture for the Web of Things
Andreas Ruppen
 
.net Based Component Technologies
.net Based Component Technologies.net Based Component Technologies
.net Based Component Technologies
prakashk453625
 
Architectural peripherals of react by Vadym Zhiltsov
Architectural peripherals of react by Vadym ZhiltsovArchitectural peripherals of react by Vadym Zhiltsov
Architectural peripherals of react by Vadym Zhiltsov
Lohika_Odessa_TechTalks
 
Clean sw 3_architecture
Clean sw 3_architectureClean sw 3_architecture
Clean sw 3_architecture
AngelLuisBlasco
 
AngularJS
AngularJSAngularJS
AngularJS
Yogesh L
 
Reactjs notes.pptx for web development- tutorial and theory
Reactjs  notes.pptx for web development- tutorial and theoryReactjs  notes.pptx for web development- tutorial and theory
Reactjs notes.pptx for web development- tutorial and theory
jobinThomas54
 
GDG Workshop on React (By Aakanksha Rai)
GDG Workshop on React (By Aakanksha Rai)GDG Workshop on React (By Aakanksha Rai)
GDG Workshop on React (By Aakanksha Rai)
gdgoncampuslncts
 
Spring - a framework written by developers
Spring - a framework written by developersSpring - a framework written by developers
Spring - a framework written by developers
MarcioSoaresPereira1
 
Microsoft Entity Framework
Microsoft Entity FrameworkMicrosoft Entity Framework
Microsoft Entity Framework
Mahmoud Tolba
 
Introduction to react native with redux
Introduction to react native with reduxIntroduction to react native with redux
Introduction to react native with redux
Mike Melusky
 
Meteor + React
Meteor + ReactMeteor + React
Meteor + React
Taggart Bowen-Gaddy
 
Vue vs React In-Depth Comparison of 2 Leading JavaScript Frameworks
Vue vs React In-Depth Comparison of 2 Leading JavaScript FrameworksVue vs React In-Depth Comparison of 2 Leading JavaScript Frameworks
Vue vs React In-Depth Comparison of 2 Leading JavaScript Frameworks
Pixlogix Infotech
 
Clean architecture with asp.net core
Clean architecture with asp.net coreClean architecture with asp.net core
Clean architecture with asp.net core
Sam Nasr, MCSA, MVP
 
Pragmatic Monolith-First, easy to decompose, clean architecture
Pragmatic Monolith-First, easy to decompose, clean architecturePragmatic Monolith-First, easy to decompose, clean architecture
Pragmatic Monolith-First, easy to decompose, clean architecture
Piotr Pelczar
 
Learn Entity Framework in a day with Code First, Model First and Database First
Learn Entity Framework in a day with Code First, Model First and Database FirstLearn Entity Framework in a day with Code First, Model First and Database First
Learn Entity Framework in a day with Code First, Model First and Database First
Jibran Rasheed Khan
 
Super applied in a sitecore migration project
Super applied in a sitecore migration projectSuper applied in a sitecore migration project
Super applied in a sitecore migration project
dodoshelu
 
Introduction to ReactJS UI Web Dev .pptx
Introduction to ReactJS UI Web Dev .pptxIntroduction to ReactJS UI Web Dev .pptx
Introduction to ReactJS UI Web Dev .pptx
SHAIKIRFAN715544
 
Unboxing ASP.NET Core
Unboxing ASP.NET CoreUnboxing ASP.NET Core
Unboxing ASP.NET Core
Kevin Leung
 
A Model-Driven, Component Generation Approach for the Web of Things
A Model-Driven, Component Generation Approach for the Web of ThingsA Model-Driven, Component Generation Approach for the Web of Things
A Model-Driven, Component Generation Approach for the Web of Things
Andreas Ruppen
 
Thesis Defence: A Model Driven Architecture for the Web of Things
Thesis Defence: A Model Driven Architecture for the Web of ThingsThesis Defence: A Model Driven Architecture for the Web of Things
Thesis Defence: A Model Driven Architecture for the Web of Things
Andreas Ruppen
 
.net Based Component Technologies
.net Based Component Technologies.net Based Component Technologies
.net Based Component Technologies
prakashk453625
 
Architectural peripherals of react by Vadym Zhiltsov
Architectural peripherals of react by Vadym ZhiltsovArchitectural peripherals of react by Vadym Zhiltsov
Architectural peripherals of react by Vadym Zhiltsov
Lohika_Odessa_TechTalks
 
Reactjs notes.pptx for web development- tutorial and theory
Reactjs  notes.pptx for web development- tutorial and theoryReactjs  notes.pptx for web development- tutorial and theory
Reactjs notes.pptx for web development- tutorial and theory
jobinThomas54
 
GDG Workshop on React (By Aakanksha Rai)
GDG Workshop on React (By Aakanksha Rai)GDG Workshop on React (By Aakanksha Rai)
GDG Workshop on React (By Aakanksha Rai)
gdgoncampuslncts
 
Spring - a framework written by developers
Spring - a framework written by developersSpring - a framework written by developers
Spring - a framework written by developers
MarcioSoaresPereira1
 
Microsoft Entity Framework
Microsoft Entity FrameworkMicrosoft Entity Framework
Microsoft Entity Framework
Mahmoud Tolba
 
Introduction to react native with redux
Introduction to react native with reduxIntroduction to react native with redux
Introduction to react native with redux
Mike Melusky
 
Vue vs React In-Depth Comparison of 2 Leading JavaScript Frameworks
Vue vs React In-Depth Comparison of 2 Leading JavaScript FrameworksVue vs React In-Depth Comparison of 2 Leading JavaScript Frameworks
Vue vs React In-Depth Comparison of 2 Leading JavaScript Frameworks
Pixlogix Infotech
 
Clean architecture with asp.net core
Clean architecture with asp.net coreClean architecture with asp.net core
Clean architecture with asp.net core
Sam Nasr, MCSA, MVP
 
Pragmatic Monolith-First, easy to decompose, clean architecture
Pragmatic Monolith-First, easy to decompose, clean architecturePragmatic Monolith-First, easy to decompose, clean architecture
Pragmatic Monolith-First, easy to decompose, clean architecture
Piotr Pelczar
 
Learn Entity Framework in a day with Code First, Model First and Database First
Learn Entity Framework in a day with Code First, Model First and Database FirstLearn Entity Framework in a day with Code First, Model First and Database First
Learn Entity Framework in a day with Code First, Model First and Database First
Jibran Rasheed Khan
 
Super applied in a sitecore migration project
Super applied in a sitecore migration projectSuper applied in a sitecore migration project
Super applied in a sitecore migration project
dodoshelu
 
Introduction to ReactJS UI Web Dev .pptx
Introduction to ReactJS UI Web Dev .pptxIntroduction to ReactJS UI Web Dev .pptx
Introduction to ReactJS UI Web Dev .pptx
SHAIKIRFAN715544
 
Unboxing ASP.NET Core
Unboxing ASP.NET CoreUnboxing ASP.NET Core
Unboxing ASP.NET Core
Kevin Leung
 
Ad

More from LogeekNightUkraine (20)

Face recognition with c++
Face recognition with c++ Face recognition with c++
Face recognition with c++
LogeekNightUkraine
 
C++20 features
C++20 features C++20 features
C++20 features
LogeekNightUkraine
 
Autonomous driving on your developer pc. technologies, approaches, future
Autonomous driving on your developer pc. technologies, approaches, futureAutonomous driving on your developer pc. technologies, approaches, future
Autonomous driving on your developer pc. technologies, approaches, future
LogeekNightUkraine
 
Orkhan Gasimov "High Performance System Design"
Orkhan Gasimov "High Performance System Design" Orkhan Gasimov "High Performance System Design"
Orkhan Gasimov "High Performance System Design"
LogeekNightUkraine
 
Vitalii Korzh "Managed Workflows or How to Master Data"
Vitalii Korzh "Managed Workflows or How to Master Data" Vitalii Korzh "Managed Workflows or How to Master Data"
Vitalii Korzh "Managed Workflows or How to Master Data"
LogeekNightUkraine
 
Yevhen Tatarynov "From POC to High-Performance .NET applications"
Yevhen Tatarynov "From POC to High-Performance .NET applications"Yevhen Tatarynov "From POC to High-Performance .NET applications"
Yevhen Tatarynov "From POC to High-Performance .NET applications"
LogeekNightUkraine
 
Oleksii Kuchuk "Reading gauge values with open cv imgproc"
Oleksii Kuchuk "Reading gauge values with open cv imgproc"Oleksii Kuchuk "Reading gauge values with open cv imgproc"
Oleksii Kuchuk "Reading gauge values with open cv imgproc"
LogeekNightUkraine
 
Oleksandr Kutsan "Using katai struct to describe the process of working with ...
Oleksandr Kutsan "Using katai struct to describe the process of working with ...Oleksandr Kutsan "Using katai struct to describe the process of working with ...
Oleksandr Kutsan "Using katai struct to describe the process of working with ...
LogeekNightUkraine
 
Pavlo Zhdanov "Mastering solid and base principles for software design"
Pavlo Zhdanov "Mastering solid and base principles for software design"Pavlo Zhdanov "Mastering solid and base principles for software design"
Pavlo Zhdanov "Mastering solid and base principles for software design"
LogeekNightUkraine
 
Serhii Zemlianyi "Error Retries with Exponential Backoff Using RabbitMQ"
Serhii Zemlianyi "Error Retries with Exponential Backoff Using RabbitMQ"Serhii Zemlianyi "Error Retries with Exponential Backoff Using RabbitMQ"
Serhii Zemlianyi "Error Retries with Exponential Backoff Using RabbitMQ"
LogeekNightUkraine
 
Iurii Antykhovych "Java and performance tools and toys"
Iurii Antykhovych "Java and performance tools and toys"Iurii Antykhovych "Java and performance tools and toys"
Iurii Antykhovych "Java and performance tools and toys"
LogeekNightUkraine
 
Eugene Bova "Dapr (Distributed Application Runtime) in a Microservices Archit...
Eugene Bova "Dapr (Distributed Application Runtime) in a Microservices Archit...Eugene Bova "Dapr (Distributed Application Runtime) in a Microservices Archit...
Eugene Bova "Dapr (Distributed Application Runtime) in a Microservices Archit...
LogeekNightUkraine
 
Aleksandr Kutsan "Managing Dependencies in C++"
Aleksandr Kutsan "Managing Dependencies in C++"Aleksandr Kutsan "Managing Dependencies in C++"
Aleksandr Kutsan "Managing Dependencies in C++"
LogeekNightUkraine
 
Yevhen Tatarynov "My .NET Application Allocates too Much Memory. What Can I Do?"
Yevhen Tatarynov "My .NET Application Allocates too Much Memory. What Can I Do?"Yevhen Tatarynov "My .NET Application Allocates too Much Memory. What Can I Do?"
Yevhen Tatarynov "My .NET Application Allocates too Much Memory. What Can I Do?"
LogeekNightUkraine
 
Alexandr Golyak, Nikolay Chertkov "Automotive Testing vs Test Automatio"
Alexandr Golyak, Nikolay Chertkov  "Automotive Testing vs Test Automatio"Alexandr Golyak, Nikolay Chertkov  "Automotive Testing vs Test Automatio"
Alexandr Golyak, Nikolay Chertkov "Automotive Testing vs Test Automatio"
LogeekNightUkraine
 
Michal Kordas "Docker: Good, Bad or Both"
Michal Kordas "Docker: Good, Bad or Both"Michal Kordas "Docker: Good, Bad or Both"
Michal Kordas "Docker: Good, Bad or Both"
LogeekNightUkraine
 
Kolomiyets Dmytro "Dealing with Multiple Caches, When Developing Microservices"
Kolomiyets Dmytro "Dealing with Multiple Caches, When Developing Microservices"Kolomiyets Dmytro "Dealing with Multiple Caches, When Developing Microservices"
Kolomiyets Dmytro "Dealing with Multiple Caches, When Developing Microservices"
LogeekNightUkraine
 
Shestakov Illia "The Sandbox Theory"
Shestakov Illia "The Sandbox Theory"Shestakov Illia "The Sandbox Theory"
Shestakov Illia "The Sandbox Theory"
LogeekNightUkraine
 
Dmytro Kochergin “Autotest with CYPRESS”
Dmytro Kochergin “Autotest with CYPRESS”Dmytro Kochergin “Autotest with CYPRESS”
Dmytro Kochergin “Autotest with CYPRESS”
LogeekNightUkraine
 
Ivan Dryzhyruk “Ducks Don’t Like Bugs”
Ivan Dryzhyruk “Ducks Don’t Like Bugs”Ivan Dryzhyruk “Ducks Don’t Like Bugs”
Ivan Dryzhyruk “Ducks Don’t Like Bugs”
LogeekNightUkraine
 
Autonomous driving on your developer pc. technologies, approaches, future
Autonomous driving on your developer pc. technologies, approaches, futureAutonomous driving on your developer pc. technologies, approaches, future
Autonomous driving on your developer pc. technologies, approaches, future
LogeekNightUkraine
 
Orkhan Gasimov "High Performance System Design"
Orkhan Gasimov "High Performance System Design" Orkhan Gasimov "High Performance System Design"
Orkhan Gasimov "High Performance System Design"
LogeekNightUkraine
 
Vitalii Korzh "Managed Workflows or How to Master Data"
Vitalii Korzh "Managed Workflows or How to Master Data" Vitalii Korzh "Managed Workflows or How to Master Data"
Vitalii Korzh "Managed Workflows or How to Master Data"
LogeekNightUkraine
 
Yevhen Tatarynov "From POC to High-Performance .NET applications"
Yevhen Tatarynov "From POC to High-Performance .NET applications"Yevhen Tatarynov "From POC to High-Performance .NET applications"
Yevhen Tatarynov "From POC to High-Performance .NET applications"
LogeekNightUkraine
 
Oleksii Kuchuk "Reading gauge values with open cv imgproc"
Oleksii Kuchuk "Reading gauge values with open cv imgproc"Oleksii Kuchuk "Reading gauge values with open cv imgproc"
Oleksii Kuchuk "Reading gauge values with open cv imgproc"
LogeekNightUkraine
 
Oleksandr Kutsan "Using katai struct to describe the process of working with ...
Oleksandr Kutsan "Using katai struct to describe the process of working with ...Oleksandr Kutsan "Using katai struct to describe the process of working with ...
Oleksandr Kutsan "Using katai struct to describe the process of working with ...
LogeekNightUkraine
 
Pavlo Zhdanov "Mastering solid and base principles for software design"
Pavlo Zhdanov "Mastering solid and base principles for software design"Pavlo Zhdanov "Mastering solid and base principles for software design"
Pavlo Zhdanov "Mastering solid and base principles for software design"
LogeekNightUkraine
 
Serhii Zemlianyi "Error Retries with Exponential Backoff Using RabbitMQ"
Serhii Zemlianyi "Error Retries with Exponential Backoff Using RabbitMQ"Serhii Zemlianyi "Error Retries with Exponential Backoff Using RabbitMQ"
Serhii Zemlianyi "Error Retries with Exponential Backoff Using RabbitMQ"
LogeekNightUkraine
 
Iurii Antykhovych "Java and performance tools and toys"
Iurii Antykhovych "Java and performance tools and toys"Iurii Antykhovych "Java and performance tools and toys"
Iurii Antykhovych "Java and performance tools and toys"
LogeekNightUkraine
 
Eugene Bova "Dapr (Distributed Application Runtime) in a Microservices Archit...
Eugene Bova "Dapr (Distributed Application Runtime) in a Microservices Archit...Eugene Bova "Dapr (Distributed Application Runtime) in a Microservices Archit...
Eugene Bova "Dapr (Distributed Application Runtime) in a Microservices Archit...
LogeekNightUkraine
 
Aleksandr Kutsan "Managing Dependencies in C++"
Aleksandr Kutsan "Managing Dependencies in C++"Aleksandr Kutsan "Managing Dependencies in C++"
Aleksandr Kutsan "Managing Dependencies in C++"
LogeekNightUkraine
 
Yevhen Tatarynov "My .NET Application Allocates too Much Memory. What Can I Do?"
Yevhen Tatarynov "My .NET Application Allocates too Much Memory. What Can I Do?"Yevhen Tatarynov "My .NET Application Allocates too Much Memory. What Can I Do?"
Yevhen Tatarynov "My .NET Application Allocates too Much Memory. What Can I Do?"
LogeekNightUkraine
 
Alexandr Golyak, Nikolay Chertkov "Automotive Testing vs Test Automatio"
Alexandr Golyak, Nikolay Chertkov  "Automotive Testing vs Test Automatio"Alexandr Golyak, Nikolay Chertkov  "Automotive Testing vs Test Automatio"
Alexandr Golyak, Nikolay Chertkov "Automotive Testing vs Test Automatio"
LogeekNightUkraine
 
Michal Kordas "Docker: Good, Bad or Both"
Michal Kordas "Docker: Good, Bad or Both"Michal Kordas "Docker: Good, Bad or Both"
Michal Kordas "Docker: Good, Bad or Both"
LogeekNightUkraine
 
Kolomiyets Dmytro "Dealing with Multiple Caches, When Developing Microservices"
Kolomiyets Dmytro "Dealing with Multiple Caches, When Developing Microservices"Kolomiyets Dmytro "Dealing with Multiple Caches, When Developing Microservices"
Kolomiyets Dmytro "Dealing with Multiple Caches, When Developing Microservices"
LogeekNightUkraine
 
Shestakov Illia "The Sandbox Theory"
Shestakov Illia "The Sandbox Theory"Shestakov Illia "The Sandbox Theory"
Shestakov Illia "The Sandbox Theory"
LogeekNightUkraine
 
Dmytro Kochergin “Autotest with CYPRESS”
Dmytro Kochergin “Autotest with CYPRESS”Dmytro Kochergin “Autotest with CYPRESS”
Dmytro Kochergin “Autotest with CYPRESS”
LogeekNightUkraine
 
Ivan Dryzhyruk “Ducks Don’t Like Bugs”
Ivan Dryzhyruk “Ducks Don’t Like Bugs”Ivan Dryzhyruk “Ducks Don’t Like Bugs”
Ivan Dryzhyruk “Ducks Don’t Like Bugs”
LogeekNightUkraine
 
Ad

Recently uploaded (20)

Linux Professional Institute LPIC-1 Exam.pdf
Linux Professional Institute LPIC-1 Exam.pdfLinux Professional Institute LPIC-1 Exam.pdf
Linux Professional Institute LPIC-1 Exam.pdf
RHCSA Guru
 
Increasing Retail Store Efficiency How can Planograms Save Time and Money.pptx
Increasing Retail Store Efficiency How can Planograms Save Time and Money.pptxIncreasing Retail Store Efficiency How can Planograms Save Time and Money.pptx
Increasing Retail Store Efficiency How can Planograms Save Time and Money.pptx
Anoop Ashok
 
#StandardsGoals for 2025: Standards & certification roundup - Tech Forum 2025
#StandardsGoals for 2025: Standards & certification roundup - Tech Forum 2025#StandardsGoals for 2025: Standards & certification roundup - Tech Forum 2025
#StandardsGoals for 2025: Standards & certification roundup - Tech Forum 2025
BookNet Canada
 
SAP Modernization: Maximizing the Value of Your SAP S/4HANA Migration.pdf
SAP Modernization: Maximizing the Value of Your SAP S/4HANA Migration.pdfSAP Modernization: Maximizing the Value of Your SAP S/4HANA Migration.pdf
SAP Modernization: Maximizing the Value of Your SAP S/4HANA Migration.pdf
Precisely
 
Role of Data Annotation Services in AI-Powered Manufacturing
Role of Data Annotation Services in AI-Powered ManufacturingRole of Data Annotation Services in AI-Powered Manufacturing
Role of Data Annotation Services in AI-Powered Manufacturing
Andrew Leo
 
ThousandEyes Partner Innovation Updates for May 2025
ThousandEyes Partner Innovation Updates for May 2025ThousandEyes Partner Innovation Updates for May 2025
ThousandEyes Partner Innovation Updates for May 2025
ThousandEyes
 
tecnologias de las primeras civilizaciones.pdf
tecnologias de las primeras civilizaciones.pdftecnologias de las primeras civilizaciones.pdf
tecnologias de las primeras civilizaciones.pdf
fjgm517
 
TrustArc Webinar: Consumer Expectations vs Corporate Realities on Data Broker...
TrustArc Webinar: Consumer Expectations vs Corporate Realities on Data Broker...TrustArc Webinar: Consumer Expectations vs Corporate Realities on Data Broker...
TrustArc Webinar: Consumer Expectations vs Corporate Realities on Data Broker...
TrustArc
 
Dev Dives: Automate and orchestrate your processes with UiPath Maestro
Dev Dives: Automate and orchestrate your processes with UiPath MaestroDev Dives: Automate and orchestrate your processes with UiPath Maestro
Dev Dives: Automate and orchestrate your processes with UiPath Maestro
UiPathCommunity
 
AI and Data Privacy in 2025: Global Trends
AI and Data Privacy in 2025: Global TrendsAI and Data Privacy in 2025: Global Trends
AI and Data Privacy in 2025: Global Trends
InData Labs
 
Rusty Waters: Elevating Lakehouses Beyond Spark
Rusty Waters: Elevating Lakehouses Beyond SparkRusty Waters: Elevating Lakehouses Beyond Spark
Rusty Waters: Elevating Lakehouses Beyond Spark
carlyakerly1
 
Noah Loul Shares 5 Steps to Implement AI Agents for Maximum Business Efficien...
Noah Loul Shares 5 Steps to Implement AI Agents for Maximum Business Efficien...Noah Loul Shares 5 Steps to Implement AI Agents for Maximum Business Efficien...
Noah Loul Shares 5 Steps to Implement AI Agents for Maximum Business Efficien...
Noah Loul
 
AI Changes Everything – Talk at Cardiff Metropolitan University, 29th April 2...
AI Changes Everything – Talk at Cardiff Metropolitan University, 29th April 2...AI Changes Everything – Talk at Cardiff Metropolitan University, 29th April 2...
AI Changes Everything – Talk at Cardiff Metropolitan University, 29th April 2...
Alan Dix
 
Massive Power Outage Hits Spain, Portugal, and France: Causes, Impact, and On...
Massive Power Outage Hits Spain, Portugal, and France: Causes, Impact, and On...Massive Power Outage Hits Spain, Portugal, and France: Causes, Impact, and On...
Massive Power Outage Hits Spain, Portugal, and France: Causes, Impact, and On...
Aqusag Technologies
 
The Evolution of Meme Coins A New Era for Digital Currency ppt.pdf
The Evolution of Meme Coins A New Era for Digital Currency ppt.pdfThe Evolution of Meme Coins A New Era for Digital Currency ppt.pdf
The Evolution of Meme Coins A New Era for Digital Currency ppt.pdf
Abi john
 
Social Media App Development Company-EmizenTech
Social Media App Development Company-EmizenTechSocial Media App Development Company-EmizenTech
Social Media App Development Company-EmizenTech
Steve Jonas
 
Greenhouse_Monitoring_Presentation.pptx.
Greenhouse_Monitoring_Presentation.pptx.Greenhouse_Monitoring_Presentation.pptx.
Greenhouse_Monitoring_Presentation.pptx.
hpbmnnxrvb
 
Transcript: #StandardsGoals for 2025: Standards & certification roundup - Tec...
Transcript: #StandardsGoals for 2025: Standards & certification roundup - Tec...Transcript: #StandardsGoals for 2025: Standards & certification roundup - Tec...
Transcript: #StandardsGoals for 2025: Standards & certification roundup - Tec...
BookNet Canada
 
Build 3D Animated Safety Induction - Tech EHS
Build 3D Animated Safety Induction - Tech EHSBuild 3D Animated Safety Induction - Tech EHS
Build 3D Animated Safety Induction - Tech EHS
TECH EHS Solution
 
Technology Trends in 2025: AI and Big Data Analytics
Technology Trends in 2025: AI and Big Data AnalyticsTechnology Trends in 2025: AI and Big Data Analytics
Technology Trends in 2025: AI and Big Data Analytics
InData Labs
 
Linux Professional Institute LPIC-1 Exam.pdf
Linux Professional Institute LPIC-1 Exam.pdfLinux Professional Institute LPIC-1 Exam.pdf
Linux Professional Institute LPIC-1 Exam.pdf
RHCSA Guru
 
Increasing Retail Store Efficiency How can Planograms Save Time and Money.pptx
Increasing Retail Store Efficiency How can Planograms Save Time and Money.pptxIncreasing Retail Store Efficiency How can Planograms Save Time and Money.pptx
Increasing Retail Store Efficiency How can Planograms Save Time and Money.pptx
Anoop Ashok
 
#StandardsGoals for 2025: Standards & certification roundup - Tech Forum 2025
#StandardsGoals for 2025: Standards & certification roundup - Tech Forum 2025#StandardsGoals for 2025: Standards & certification roundup - Tech Forum 2025
#StandardsGoals for 2025: Standards & certification roundup - Tech Forum 2025
BookNet Canada
 
SAP Modernization: Maximizing the Value of Your SAP S/4HANA Migration.pdf
SAP Modernization: Maximizing the Value of Your SAP S/4HANA Migration.pdfSAP Modernization: Maximizing the Value of Your SAP S/4HANA Migration.pdf
SAP Modernization: Maximizing the Value of Your SAP S/4HANA Migration.pdf
Precisely
 
Role of Data Annotation Services in AI-Powered Manufacturing
Role of Data Annotation Services in AI-Powered ManufacturingRole of Data Annotation Services in AI-Powered Manufacturing
Role of Data Annotation Services in AI-Powered Manufacturing
Andrew Leo
 
ThousandEyes Partner Innovation Updates for May 2025
ThousandEyes Partner Innovation Updates for May 2025ThousandEyes Partner Innovation Updates for May 2025
ThousandEyes Partner Innovation Updates for May 2025
ThousandEyes
 
tecnologias de las primeras civilizaciones.pdf
tecnologias de las primeras civilizaciones.pdftecnologias de las primeras civilizaciones.pdf
tecnologias de las primeras civilizaciones.pdf
fjgm517
 
TrustArc Webinar: Consumer Expectations vs Corporate Realities on Data Broker...
TrustArc Webinar: Consumer Expectations vs Corporate Realities on Data Broker...TrustArc Webinar: Consumer Expectations vs Corporate Realities on Data Broker...
TrustArc Webinar: Consumer Expectations vs Corporate Realities on Data Broker...
TrustArc
 
Dev Dives: Automate and orchestrate your processes with UiPath Maestro
Dev Dives: Automate and orchestrate your processes with UiPath MaestroDev Dives: Automate and orchestrate your processes with UiPath Maestro
Dev Dives: Automate and orchestrate your processes with UiPath Maestro
UiPathCommunity
 
AI and Data Privacy in 2025: Global Trends
AI and Data Privacy in 2025: Global TrendsAI and Data Privacy in 2025: Global Trends
AI and Data Privacy in 2025: Global Trends
InData Labs
 
Rusty Waters: Elevating Lakehouses Beyond Spark
Rusty Waters: Elevating Lakehouses Beyond SparkRusty Waters: Elevating Lakehouses Beyond Spark
Rusty Waters: Elevating Lakehouses Beyond Spark
carlyakerly1
 
Noah Loul Shares 5 Steps to Implement AI Agents for Maximum Business Efficien...
Noah Loul Shares 5 Steps to Implement AI Agents for Maximum Business Efficien...Noah Loul Shares 5 Steps to Implement AI Agents for Maximum Business Efficien...
Noah Loul Shares 5 Steps to Implement AI Agents for Maximum Business Efficien...
Noah Loul
 
AI Changes Everything – Talk at Cardiff Metropolitan University, 29th April 2...
AI Changes Everything – Talk at Cardiff Metropolitan University, 29th April 2...AI Changes Everything – Talk at Cardiff Metropolitan University, 29th April 2...
AI Changes Everything – Talk at Cardiff Metropolitan University, 29th April 2...
Alan Dix
 
Massive Power Outage Hits Spain, Portugal, and France: Causes, Impact, and On...
Massive Power Outage Hits Spain, Portugal, and France: Causes, Impact, and On...Massive Power Outage Hits Spain, Portugal, and France: Causes, Impact, and On...
Massive Power Outage Hits Spain, Portugal, and France: Causes, Impact, and On...
Aqusag Technologies
 
The Evolution of Meme Coins A New Era for Digital Currency ppt.pdf
The Evolution of Meme Coins A New Era for Digital Currency ppt.pdfThe Evolution of Meme Coins A New Era for Digital Currency ppt.pdf
The Evolution of Meme Coins A New Era for Digital Currency ppt.pdf
Abi john
 
Social Media App Development Company-EmizenTech
Social Media App Development Company-EmizenTechSocial Media App Development Company-EmizenTech
Social Media App Development Company-EmizenTech
Steve Jonas
 
Greenhouse_Monitoring_Presentation.pptx.
Greenhouse_Monitoring_Presentation.pptx.Greenhouse_Monitoring_Presentation.pptx.
Greenhouse_Monitoring_Presentation.pptx.
hpbmnnxrvb
 
Transcript: #StandardsGoals for 2025: Standards & certification roundup - Tec...
Transcript: #StandardsGoals for 2025: Standards & certification roundup - Tec...Transcript: #StandardsGoals for 2025: Standards & certification roundup - Tec...
Transcript: #StandardsGoals for 2025: Standards & certification roundup - Tec...
BookNet Canada
 
Build 3D Animated Safety Induction - Tech EHS
Build 3D Animated Safety Induction - Tech EHSBuild 3D Animated Safety Induction - Tech EHS
Build 3D Animated Safety Induction - Tech EHS
TECH EHS Solution
 
Technology Trends in 2025: AI and Big Data Analytics
Technology Trends in 2025: AI and Big Data AnalyticsTechnology Trends in 2025: AI and Big Data Analytics
Technology Trends in 2025: AI and Big Data Analytics
InData Labs
 

Andrii Sliusar "Module Architecture of React-Redux Applications"

  • 3. www.luxoft.com What is “Architecture”? • Architecture - a fundamental agreement and solutions. • Architecture - something important. • Architecture is difficult to change. • Architecture must be reused.
  • 4. www.luxoft.com Why do we need module architecture? Module architecture is the type of architecture where an application is semantically split on components. For what? • Development speed • Scaling • Reduced maintenance costs • Decrease the input threshold
  • 5. www.luxoft.com How to ensure the necessary modularity? The modularity level depends on the scale of the application. Everything that can be identified as a separate component / project should be separated. What should we split? • Main Components • Data model • Business logic
  • 6. www.luxoft.com The connectivity problem of React-Redux architecture? In order for the project to be scalable and readable, it is necessary to ensure minimal connectivity between modules.
  • 9. www.luxoft.com Root folder The main idea to keep everything as simple as possible on each level of the architecture. /project /core /screens app.ts
  • 10. www.luxoft.com How to organize the architecture of modules? /screens /screen1 /actions /containers /components /reducers /state index.tsx
  • 11. www.luxoft.com What to do with styles? • Styles are in one folder with a component • SASS is good, but JS-based styles have more option • Create themes from the very beginning
  • 12. www.luxoft.com Algorithm for creating a React component 1. Create a component (const or class) 2. Add styles in the same folder 3. Create other logic (actions, reducers, ...) If it becomes more complex 4. Move props connection to container
  • 13. www.luxoft.com Why do we need State model? • It’s a clear way to work with state • The same data model can be used in DB • Build domain model from the beginning
  • 14. www.luxoft.com Wire selectors with state • Everything is sorted by domains • It clear easier to modify state and selectors export default class User{ public name:string; public getName = (state) => state.user.name; } const mapStateToProps = (state, props) => ({ name: User.getName(state) });
  • 15. www.luxoft.com What to do with actions? • They must be standardized • The same const between modules, but different values • They can be processed inside different modules enum ACTION_TYPE { UPDATE_NAME = UPDATE_USER_NAME' } export const updateName = (name: string) => ({ type: ACTION_TYPE.UPDATE_NAME, name }) then import {ACTION_TYPE as USER_ACTION_TYPE} from ‘./actions’;
  • 16. www.luxoft.com Pros and Cons of Modular architecture Pros: • Scaling • Reduced maintenance costs • Decrease the input threshold Cons: • Amount of folders/files