Our great sponsors
-
SurveyJS
Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.
-
lerna
:dragon: Lerna is a fast, modern build system for managing and publishing multiple JavaScript/TypeScript packages from the same repository.
-
InfluxDB
Power Real-Time Data Analytics at Scale. Get real-time insights from all types of time series data with InfluxDB. Ingest, query, and analyze billions of data points in real-time with unbounded cardinality.
You can find the source code that we are going to use in this repo
Additionally, to create a new library for each piece you want to share, you could use the Secondary entrypoints feature of ng-packagr to group common things together, like components or services, and group them together by a more specific feature. But consider this will requires additional updates to the configuration.
Since micro-frontend allows us to develop applications individually, this also means you can use different frameworks and libraries together to develop each section of this application. Of course, this will have some advantages and disadvantages. If you are using different technologies to serve different parts of the application, it won't be so easy to move developers within teams. However, the door is open, and if you want to do something like that, you could use something like Single SPA, or some other, to help you organize and connect the different technologies into a larger application.
You can also use just one frontend tool, like React, Vue, or in this case, Angular. Each of them has some way to achieve what we need. If you prefer doing in this way, one tool you could use is Nx. It has some really cool features such as depency graph, linked package, and others. It also has first-class support for Module Federation and Micro-frontend development.
We could improve part of this by using something like Lerna. With the right configuration, Lerna can be really helpful.
Related posts
- ⏰ It’s time to talk about Import Map, Micro Frontend, and Nx Monorepo
- React monorepo with open-source apps and proprietary libs
- Best way to share code between React App, React Native App, and NodeJs server?
- Angular Signals, Reactive Context, and Dynamic Dependency Tracking
- Episode 24/15: Wiz behind the curtain, Copilot in VSCode