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 NextJS is a powerful React framework that enables developers to build high-performance web applications with features like Server-Side Rendering (SSR) and Static Site Generation (SSG). Key advantages include improved SEO, automatic code splitting for faster page loads, a built-in routing system, and an optimized developer experience with "Fast Refresh" and easy deployment through platforms like Vercel. Prerequisites NextJS framework is primarily used for building web applications based on ReactJS and is supported with many more features, so if you only have a need to create a Single Page Web Application or have never started with React , you should look up some basic knowledge before continuing with the posts in this series. Detail Using styled-components in Next Applications Understanding React Server Component Guide to Setting Up Jest Testing for a NextJS Project AWS Guide to deploying NextJS on AWS ECS Guide to Setting Up CI/CD for NextJS with Jenkins, Gitlab,...

Introduction AWS Amplify is a complete development framework provided by Amazon Web Services (AWS) that helps developers build, deploy, and manage Full-stack web and mobile applications quickly. Instead of having to manually configure each individual AWS service, Amplify acts as an intelligent "manager," integrating tools and libraries to connect your application to cloud infrastructure in just minutes. Key Advantages Ultra-fast development speed (Speed): Amplify provides a Command Line Interface (CLI) and ready-to-use UI components for common features such as Authentication, Storage, and APIs. You don’t need to be a cloud infrastructure expert to set up a complex Backend. Seamless Full-stack integration: This platform allows you to build both Frontend (React, Vue, NextJS) and Backend synchronously. Data management between the client and the cloud becomes seamless thanks to automatic Code Generation capabilities. Automated CI/CD workflow: Amplify Hosting supports Git-based wo...

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 In a previous article , I provided guidance on using Vite to set up a React project integrated with Micro Frontend. However, you may have noticed that during development, you need to rebuild the static files for the exposed components in the Remote App before they can be used in the Shell App. To address this issue and improve development performance, in this article, I will guide you on how to use Module Federation to implement Micro Frontend. First, let’s explore some concepts about Module Federation. What is Module Federation? Module Federation is an architectural pattern for decentralizing JavaScript applications (similar to microservices on the server-side). It allows you to share code and resources among multiple JavaScript applications (or micro-frontends). This can help you: Reduce code duplication Improve code maintainability Lower the overall size of your applications Enhance the performance of your applications What is Module Federation 2.0? Module Federation 2....

Introduction Micro frontend is an architectural pattern inspired by Microservices. It allows developers to integrate multiple modules together to create a complete web application. Each micro frontend is an independent unit responsible for a specific function. The basic components of Micro Frontend include: Host Application : Also known as the Shell app, this is the primary application that users interact with. It serves as the container for the micro frontends. Remote Application : These are the micro frontends themselves, which act as building blocks for the host application. Remote Applications are injected into the Shell app to form a complete web application. Advantages Scalability : It is easy to add new business modules to the system (without affecting existing modules), and teams can work concurrently on separate modules without impacting each other. Flexibility : Micro frontends can be developed using different frameworks, as they ultimately just need to be built into static f...