In the  previous part, we I’ve shared my knowledge and experience about the components and how it affects our React app architecture.

Today we will dive deep into code-splitting: architectural approaches, microservices, and microfront-ends.

Architectural approaches

Every modern web-app uses JavaScript due to its open-source community, standards, applicability, tools and many other things which make JavaScript stand out from the crowd. In bunch of projects it leads to an increase in complexity, development time, testing time, release cycle and entry level for developers. Most often monoliths have such problems as they are large apps.

Monolithic architecture is an architectural approach which blends the main app logic and server-related code so that application consists of a one-layer combination of different components.

I have an extensive experience in developing monoliths and I found out several cons of handling them:

• significant amount of legacy code
• a lot of logic is mixed through the whole app
• different components have similar naming
• easy to brake something down
• a bunch of duplicated code

Using micro-service architecture approach, instead of monoliths, we divvy up our app into a set of small, reusable modules that interact with each other on their own layers. One of the main advantages of a micro-services is that your apps becomes flexible and you can easily use oppropriate tech stack for every single task.

Moreover, with micro-services you can reduce testing and deployment time, app complexity, use modular approach and do different tasks in parallel. In case of UI development this approach is named as microfront-ends.

#react-app-architecture #reactjs #microservices #microfrontend