When I was a child, my playtime revolved around building vibrant cities with my toy blocks. I would carefully piece them together, ensuring each block had its own space and significance. As a seasoned architect with over two decades of industry experience, I’ve transitioned from tangible to digital blocks. The essence remains unchanged: creating structured and efficient designs.
Microfrontends:
Much like the city sectors of my childhood imaginations, microfrontends offer modularity, allowing different parts of a web application to evolve independently yet harmoniously. Angular’s intrinsic modular nature seamlessly aligns with this. This modular structure can be imagined as various sectors or boroughs of a digital city, each having its unique essence yet forming part of the larger metropolis.
AG Grid:
In my toy block city, streets and avenues ensured connectivity. AG Grid performs a similar function in our digital city, giving structure and clarity to vast amounts of data. With Angular, integrating AG Grid feels as natural as laying down roads on a plain.
<ag-grid-angular
style="width: 100%; height: 500px;"
class="ag-theme-alpine"
[rowData]="myData"
[columnDefs]="myColumns">
</ag-grid-angular>
These grids act as pathways, guiding the user through the information landscape.
Web Components and Angular Elements:
In the heart of my miniature city, unique buildings stood tall, each with its distinct architecture. Web components in our digital city reflect this individuality. They encapsulate functionality and can be reused across applications, making them the skyscrapers of our application. With Angular Elements, creating these standalone skyscrapers becomes a breeze.
import { createCustomElement } from '@angular/elements'
@NgModule({
entryComponents: [DashboardComponent]
})
export class DashboardModule {
constructor(injector: Injector) {
const customElement = createCustomElement(DashboardComponent, { injector });
customElements.define('my-dashboard', customElement);
}
};
Webpack and Infrastructure:
Beneath my toy city lay an imaginary network of tunnels and infrastructure. Similarly, Webpack operates behind the scenes in our digital realm, ensuring our Angular applications are optimized and efficiently bundled.
const AngularWebpackPlugin = require('@ngtools/webpack')
module.exports = {
// ...
module: {
rules: [
{
test: /(?:\.ngfactory\.js|\.ngstyle\.js|\.ts)$/,
loader: '@ngtools/webpack'
}
]
},
plugins: [
new AngularWebpackPlugin()
]
};;
In every narrative, there’s an inspiration. For me, that beacon has been Manfred Steyer. His contributions to the Angular community have been invaluable. His insights into microfrontends and architecture greatly inspired my journey. Manfred’s eBook (https://www.angulararchitects.io/en/book/) is a must-read for those yearning to deepen their understanding.
From the joys of childhood toy blocks to the complex software architectures today, the essence of creation is unchanging. Tools like Module Federation, Angular, Webpack, AG-Grid, and WebComponents, combined with foundational structures like the Shell, empower us not just to build but to envision and innovate.
Stackademic
Thank you for reading until the end. Before you go:
- Please consider clapping and following the writer! 👏
- Follow us on Twitter(X), LinkedIn, and YouTube.
- Visit Stackademic.com to find out more about how we are democratizing free programming education around the world.
Shanoj 