How To Dev

Introduction Angular is a TypeScript-based, open-source web application framework developed by Google, widely used for building dynamic and feature-rich single-page applications (SPAs). Advantages Two-way data binding: Synchronizes data between the view and model seamlessly. Component-based architecture: Enhances code reusability and maintainability. Built-in tools: Offers robust features like dependency injection, directives, and routing. Community support: Benefits from an active developer community and regular updates from Google. Disadvantages Steep learning curve: Requires understanding of TypeScript, RxJS, and other Angular concepts. Complexity: Can be overwhelming for smaller projects due to its size and structure. Performance issues: May face challenges with performance in very large applications. Key features Here are the key features of Angular that I will introduce in this series: Lifecycle Hooks: A set of methods triggered throughout a component’s lifecycle—from creation to...

Introduction I've already covered implementing microfrontends for React using Vite and Module Federation . In this article, we'll continue that discussion by implementing a microfrontend using Angular. Since Angular is a complete framework, the integration of microfrontends comes with automatic tooling support. We won't need to configure as much as we did with React. Detail First, you need to install the Angular CLI: npm install -g @angular/cli Note that in this article, I'm using Angular version 20. If you're using a different version, please ensure that Module Federation is compatible with that Angular version. As per the theory I discussed in previous articles about Microfrontends, we need a shell app and a remote app. In this article, I'll also add a remote component to demonstrate how to integrate both a remote app and a remote component into the shell app. Creating the Remote App Use the Angular CLI to execute the following command: ng new remote-app...

A page aggregator designed for easy reference and search, compiling all blog posts for convenient access.

Introduction In this article, we're diving into Immutable and Mutable in JavaScript, while also exploring how functions like Object.freeze() and Object.seal() relate to Immutable . This is a pretty important topic that can be super helpful in projects with complex codebase. So, what's Immutable? Immutable is like a property of data in JavaScript. It means once the data is created, it can't be changed. This allows for better memory management and catching changes promptly. This is a big deal and totally contrasts with Mutable, which is the default nature when you initialize data in JavaScript. Implementing Immutable in a project makes development much smoother, reduces issues that crop up, and saves a ton of effort and time for maintenance down the road. But what happens if you don't use Immutable? Let me give you an example of how changing data during development can lead to some serious issues. let info = { name: "name" , address: "addres...

Introduction As most of us already know, React enables us to break down interfaces into independent parts called Components, facilitating reuse and customization. Currently, React Components are divided into two main types: Client Components : widely used in Client Side Rendering (CSR) applications. Server Components : a new type of component that renders on the server side before being sent to the client (browser). At first glance, it may seem similar to Server Side Rendering (SSR) which has been used for a while, but in reality, these two concepts have certain differences. The Difference of RSC (React Server Component) Ease of development: React Server Component allows easy direct connection to server-side resources such as databases or internal services, streamlining development processes. Improved performance: By reducing latency in communication between client and server, React Server Component enhances overall application performance. Reduced source code size: Libraries utili...