Component Driven Modular Architecture

It's not so easy to define a Good and Bad Architecture –. It's a very subjective topic. There is no quick, easy definition, but instead, a number of factors to consider like scalability, maintainability, extensibility, reliability etc.
In the world of microservices, node modules, web components, how we can define our front-end architecture as a frame of modules and child apps in order to achieve reusability, scalability, maintainability and other factors of a good architecture.

Transcript

1. COMPONENT DRIVEN ARCHITECTURE A M O D U L A R A P P R O A C H A N O O P G U P TA 7th October 2018 React Delhi NCR Meetup Group 1 Frontend Architect Publicis.Sapient
2. AGENDA • Architect vs Architecture • Industry Facts • What is modular architecture • Architectural pattern • Why modular architecture • Q&A 7th October 2018 React Delhi NCR Meetup Group 2
3. ARCHITECT-URE FIRST Every architect in this world is an engineer but every engineer is not an architect. 7th October 2018 React Delhi NCR Meetup Group 3
4. I N D U S T RY FAC T S • NPM has more than 10 million users • They download 7 billion packages a week • Most npm packages are modules except CLIs • Components can be reused as modules. The key feature of React is the composition of components. Components written by different people should work well together like npm modules. 7th October 2018 React Delhi NCR Meetup Group 4
5. 7th October 2018 React Delhi NCR Meetup Group 5 Download History
6. WHAT’S MODULAR ARCHITECTURE • Modular is where the frontend application is broken down into smaller reusable modules. • We can convert them as internal packages or npm packages. • We can also scale up them as child applications. 7th October 2018 React Delhi NCR Meetup Group 6
7. MODULAR ARCHITECTURE 7th October 2018 React Delhi NCR Meetup Group 7 MONO REPO App1 UI Component Library Configs Shared Components Views Stand Alone Modules APPS App2 App3 App4 ..so on Shared Components State NPM Modules Auth Assets HOCs Containers Services Service Containers Common Pages Internal Modules
8. NPM VS INTERNAL PACKAGES NPM • When dealing with hundreds of components, this meant having to maintain and make changes across hundreds of repositories and publish them • Also need to update your package.json in order to use the updated module INTERNAL PACKAGES • Packages within the same repository • Synchronize easily across the project • Uses common configurations 7th October 2018 React Delhi NCR Meetup Group 8
9. WHY ‘MODULAR ‘ 7th October 2018 React Delhi NCR Meetup Group 9
   Better testability
   Maintainability
   Reliability & Consistency
   Code splitting and bundling
   Re-usability
   Manageability – Easy to deploy
   Extensibility
10. Q&A 7th October 2018 React Delhi NCR Meetup Group 10
11. THANK YOU Connect with me Medium: https://medium.com/@anoopgupta_86049 Linkedin: https://www.linkedin.com/in/anoopkgupta/ Twitter: https://twitter.com/anoop__gupta 7th October 2018 React Delhi NCR Meetup Group 11