Angular Dream Stack
Example of running multiple Routers and Ngrx Instances for Complex Dashboards with Webpack Module Federation
Overview
The Angular DREAM Stack offers an innovative approach to building enterprise-level applications that require a desktop-like environment in a web browser. By leveraging a DOM-less routing engine, it addresses the need for more complex and rich user interfaces, particularly in scenarios such as dashboards filled with various interactive widgets. Unlike traditional routing mechanisms that bind the displayed content directly to the browser's location, this framework permits greater flexibility, enabling multiple instances of similar widgets to coexist without route conflicts.
This platform is especially beneficial for developers aiming to create single-page applications (SPAs) that also serve as micro-frontend (MFE) architectures. By introducing sandboxing techniques through Angular's Dependency Injection, developers can design widgets that maintain autonomy while still being part of a larger application framework.
Features
-
DOM-less Routing Engine: Allows multiple routing instances for complex widgets, enhancing user experience in dashboards.
-
Custom Service for Code-Splitting: Ensures efficient loading of widget components by creating isolated injectors for each widget.
-
Sandboxing via Injector: Utilizes Angular's Dependency Injection to create independent environments for each widget, reducing conflicts.
-
Multiple Routers Support: Overriding the default PlatformLocation at the widget level allows for in-memory URL management, facilitating simultaneous routing.
-
Dual Distribution Models: Supports the release of applications as both SPAs and MFEs, allowing for versatile deployment options.
-
Centralized Application Bootstrapping: The core functionality is encapsulated in a library, streamlining the bootstrap process for different distribution styles.
-
In-App Rendering: Capable of rendering a new instance of the application within itself, promoting dynamic content generation.
This innovative approach not only enhances the development workflow but also significantly improves user interactions with complex applications.
- Angular
Angular is a TypeScript-based open-source framework by Google for building dynamic single-page applications and cross-platform mobile apps with MVC architecture and a rich set of features.
- Tailwind
Tailwind CSS is a utility-first CSS framework that provides pre-defined classes for building responsive and customizable user interfaces.
- Dashboard
A dashboard style website template is a pre-designed layout that features a user interface resembling a control panel or dashboard. It typically includes charts, graphs, tables, and other data visualization tools that allow users to monitor and analyze data in real-time.
- Eslint
ESLint is a linter for JavaScript that analyzes code to detect and report on potential problems and errors, as well as enforce consistent code style and best practices, helping developers to write cleaner, more maintainable code.
- Postcss
PostCSS is a popular open-source tool that enables web developers to transform CSS styles with JavaScript plugins. It allows for efficient processing of CSS styles, from applying vendor prefixes to improving browser compatibility, ultimately resulting in cleaner, faster, and more maintainable code.
- Typescript
TypeScript is a superset of JavaScript, providing optional static typing, classes, interfaces, and other features that help developers write more maintainable and scalable code. TypeScript's static typing system can catch errors at compile-time, making it easier to build and maintain large applications.