How To Dev

Introduction This is a comprehensive page about the technologies I have shared in series format. You can view brief introductions and links to directly access each series you are interested in. In the field of software development, to deploy a product from the initial idea to its release, the standard process typically involves several stages as follows: Database : Designing and implementing the database according to business requirements, storing data during the system's operation. Backend : Handling the main logic of the system, communicating with the database and services. Frontend : Building the interface for users to interact with the system, which could be a desktop, mobile, or web application. This usually includes implementing UI/UX and integrating APIs from the backend. DevOps : Deploying the system for use, which can be done on a server or in the cloud. Testing : Applying testing methods to ensure the product meets the standards for release. Of course, these are just stan...

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...

Introduction SSO (Single Sign-On) is a way for users to log in just once - with a single set of credentials (username and password)—to access many different applications. The main benefit of SSO is that it improves the user experience because people don't have to remember multiple passwords. It also boosts security by reducing potential weak spots from using weak or reused passwords. Keycloak is a popular, open-source Identity and Access Management (IAM) solution designed to implement SSO and other security features. Keycloak supports industry standards like OAuth 2.0, OpenID Connect, and SAML 2.0, which makes it easy to integrate with most modern applications. Key benefits of Keycloak include: Easy SSO Implementation: It provides a central platform to manage user authentication for thousands of applications. Diverse Authentication Method Support: It allows for one-time passwords (OTP), Multi-Factor Authentication (MFA), and integration with external systems like LDAP/Active Direct...

Introduction TinyMCE is a feature-rich, What You See Is What You Get (WYSIWYG) editor written in JavaScript. It's often built into web applications to let users easily format content without needing to know HTML. TinyMCE gives you an intuitive interface, much like desktop word processors (such as Microsoft Word). This allows users to: Format text (bold, italic, underline). Create lists. Insert images/videos. Make tables. Directly view/edit the HTML source code. It essentially acts as a bridge between the end-user and complex HTML code. Key Advantages Easy to Use (Familiar Interface): The friendly and familiar interface helps users quickly get comfortable and create high-quality content. Highly Extensible (Extensibility): It supports hundreds of plugins and customizations, allowing developers to add specialized functions (like spell check, advanced file management, etc.). Cross-Platform Compatibility: It works reliably across all modern browsers and integrates easily with any fronte...