Front-end development can sometimes become overwhelming with repetitive tasks, leaving less time for creative coding. But fret not! There's a way to make your life easier and coding more enjoyable. In this blog post, let's dive into the world of bin `package.json` to automate code generation and streamline your front-end development process.

## Why Automation Matters?
As developers, we've all faced the tedious task of writing boilerplate code or repetitive snippets. Automation is the magic that can save us from this monotony. By automating code generation, you get consistent code patterns, increased productivity, and the liberty to focus on more exciting aspects of your project.

Automating code generation offers several benefits:
1. **Consistency**: Automatically generating code ensures consistency across your project, reducing the likelihood of inconsistent code patterns.
2. **Productivity**: Tasks that are automated save developers time, allowing them to focus on more critical aspects of development.
3. **Maintainability**: By generating code programmatically, developers can easily update and maintain the codebase.

## Getting Started
Let's dive into building a simple code generator. Our example will create a JavaScript file with a basic function, but you can customize it to fit your specific needs.

### Step 1: Set Up Your Project
Start by creating a new project or navigating to an existing one:

```bash
mkdir my-project
# or
cd my-project
```

### Step 2: Initialize npm
Initialize npm in your project folder
```bash
npm init -y
npm install yargs
```

### Step 3: Create the Code Generator Script
Begin by creating a new file named `index.js` in your project's root directory. This file will serve as our code generator script.

```javascript
# index.js

#! /usr/bin/env node
const yargs = require('yargs/yargs');
const path = require("path");
const { hideBin } = require('yargs/helpers');

const parseQueryString = (queryString) => {
	// TODO
}

yargs(hideBin(process.argv))
	.scriptName('codegen')
	.command('generate [target]', 'start the generator', (yargs) => {
		return yargs
			.positional('target', {
				describe: 'target template',
				default: 'example',
			})
	}, (argv) => {
		const inputParams = argv.params;
		const targetTemplate = argv.target;
		const params = parseQueryString(inputParams); // Make the parseQueryString to read client input params under JSON Object format

		switch(targetTemplate) {
			case 'example':
				// TODO: Working with the target template directory path and generate code by following template
				// Convert template contents then starting generating
				break;
			default:
				break;
		}
	})
	.option('destination', {
		type: 'string',
		description: 'Destination path for generated files/folder',
		default: './Example',
		alis: 'd',
	})
	.option('params', {
		type: 'string',
		description: 'params string pass to the target template',
		default: 'name=Example',
		alias: 'p'
	})
	.example('$0 generate example --destination=./tests/Example --params="component=Example"', 'generate React component files')
	.coerce(['destination', 'template'], path.resolve)
	.parse()
```

In this example, our generating code will do the following steps:
1. Read the template directory path
2. Parse client input parameters to all content under pre-defined format
3. Generate the new content to destination path given by client

### Step 4: Set Up the CLI Entry Point
In your `package.json`, add a `bin` field to specify the CLI command and its entry point. The command name is chosen by you, so make it meaningful.

```json
# package.json

{
	"name": "my-project",
	"version": "1.0.0",
	"bin": {
		"codegen": "./index.js"
	},
	"dependencies": {
		// Your dependecies that supports code generator
	}
}
```

In this example, we've defined `"codegen"` as the CLI command, associated with the `index.js` script.

### Step 5: Create your own template

You would wonder where to store the template stuffs and also how to ignore the syntax check for the template logic. Let's explore in this step.

So the project structure will be as below:
```bash
my-project
├── __template__
├── package.json
├── index.js
├── .prettierignore // Ignore template code
└── README.md
```

In case you are using VSCode as your code editor, create folder `.vscode` then creating `settings.json` inside that just created folder.
```json
# .vscode/settings.json

{
  "eslint.ignorePatterns": ["**/__template__/**/*.[tsx|ts|js|jsx]"],
  ...
}
```

In the `__template__` folder, create code template for `Example`:
```bash
my-project
├── __template__
|       └── Example
|             ├── {{component}}.tsx
|             ├── {{component}}.test.tsx
|             └── {{component}}.d.ts
.
```

The content of `Example.tsx` might be as below:
```javascript
import React from 'react';
import {{component}}Props from './{{component}}.d';

const {{component}}: React.FC<Partial<{{component}}Props>> = (_props) => {
  return <React.Fragment>
    {/* Add the component content here */}
  </React.Fragment>;
}

{{component}}.defaultProps = {
  // default props put here
};

export default {{component}};
```

After generated, the expected results that we all want is:
```bash
my-project
├── Example
|     ├── Example.tsx
|     ├── Example.test.tsx
|     └── Example.d.ts
.
```

```javascript
# Example/Example.tsx

import React from 'react';
import ExampleProps from './Example.d';

const Example: React.FC<Partial<ExampleProps>> = (_props) => {
  return <React.Fragment>
    {/* Add the component content here */}
  </React.Fragment>;
}

Example.defaultProps = {
  // default props put here
};

export default Example;
```

### Step 6: Make your script Works

You can make your script as dependencies in another project or make it as executable file then add its path to `OS ENVIRONMENT` .

Feel free to customize your code generator to suit your needs. You can create more complex templates, generate multiple files, or prompt the user for input using third-party libraries like `inquirer` for an interactive CLI experience.

## Conclusion

Congratulations! You've successfully created a code generator CLI using npm and Node.js. By automating code generation, you can boost your productivity, maintain code consistency, and focus on building awesome front-end applications.

So, harness the power of automation and let your code generator do the heavy lifting. Happy coding, and may your development journey be filled with creativity and efficiency!

mario.gif

Automating Code Generation using npm and NodeJS

If you're a fan of the Marvel Cinematic Universe, you're probably familiar with the concept of the Infinity Stones. These powerful gems were scattered throughout the universe, and when brought together, they gave their wielder ultimate power. In a way, micro front-end development is like collecting the Infinity Stones - each micro front-end module is a piece of the puzzle, and when put together, they create a powerful and flexible application.

In this post, we'll how they work together to create a seamless user experience, discuss how to structure a micro front-end application, and provide practical advice on how to implement one.

## 1. Micro front-end props and beyond

we'll explore the six "Infinity Stones" of micro front-end development and how they work together to create a seamless user experience.

### 1.1. The Mind Stone: Micro Front-end Architecture

The first step to building a powerful micro front-end application is to establish a solid architecture. This is where the "Mind Stone" comes in - it represents the foundational knowledge needed to build a successful micro front-end architecture.

### 1.2. The Time Stone: Dynamic Loading

The "Time Stone" represents the ability to dynamically load micro front-end modules as needed. This is essential for building a scalable and performant application, as it allows modules to be loaded on demand, rather than all at once.

Dynamic loading is usually achieved through asynchronous module loading, where modules are loaded only when they are needed, rather than all at once. This can significantly improve the initial load time of the application, as well as reduce memory usage and improve overall performance.

### 1.3. The Space Stone: Module Isolation

The "Space Stone" represents the concept of module isolation - ensuring that each micro front-end module is independent and does not interfere with other modules. This is achieved through techniques such as sandboxing, encapsulation, and versioning.

Isolation is important because it allows modules to be developed and deployed independently without affecting other parts of the application. It also allows for easier testing and maintenance, as each module can be tested in isolation.

### 1.4. The Power Stone: Framework Agnosticism

The "Power Stone" represents the ability to use multiple frameworks within a micro front-end application. This is achieved through framework agnosticism - allowing each module to use the framework that best suits its needs.

Using multiple frameworks within an application allows developers to take advantage of the strengths of each framework and create a more powerful and flexible application. It also allows for easier integration with existing systems and technologies.

### 1.5. The Reality Stone: Cross-Platform Compatibility

The "Reality Stone" represents the ability to run micro front-end applications across different platforms and devices. This is achieved through cross-platform compatibility - ensuring that each module can be run on different platforms without modification.

Cross-platform compatibility is important because it allows micro front-end applications to be deployed on a wide range of devices, from desktop computers to mobile devices and beyond.

### 1.6. The Soul Stone: Data Sharing

The "Soul Stone" represents the ability to share data between micro front-end modules. This is achieved through techniques such as custom events, message passing, and shared state management.

Data sharing is important because it allows modules to work together and share information, creating a more seamless and integrated user experience. It also allows for more efficient use of resources, as modules can share data rather than duplicating it.

## 2. Micro front-end structure

To structure a micro front-end application, you'll need to create separate directories for each micro front-end, as well as a directory for shared resources, such as common styles, fonts, or images. Each micro front-end should have its own directory structure, including the components, services, views, and any other relevant files.

Here's an example directory structure that could be used for a micro front-end architecture:

```bash
micro-front_end-root
├── @routing-module
├── @module-a
├── @module-b
...
├── shared-components
├── shared-assets
├── shared-services
└── README.md
```

Explaination folder structure:

- `shared-components`: Make this module as common stylings for the whole business and every modules inside this project can re-use the components instead of defining over again inside each modules
- `shared-assets`: images, icons, etc
- `shared-services`: control the service controller for all modules to communicate to middleware/back-end

> **Note**: In further, you can also separate your utils/hooks logic into a dedicated module

## 3. Practical implementation

Implementing a micro front-end architecture requires careful planning and coordination. Here are a few practical tips to help you get started:

### 3.1. Choose the right technology stack

When building a micro front-end architecture, it's important to choose a technology stack that supports modular development and deployment. Some popular options include React, Angular, and Vue.js, as they provide tools and libraries to help you build modular applications.

My own advices would be some trendy techs as below:  
**For each sperated modules**:

- ReactJS
- Redux, Redux-toolkit (global cross-state control management)

**For `shared-components`**:

- tailwindcss (class stylings, theme provider, etc)
- Marteial-UI/Ant-design (optional)
- storybook (document and preview shared components)

**For `shared-services`**:

- axios (fetcher instance)

**Tips**: you can use the `RTK-query` or `React-query` for caching and indicator or manually implement them.

### 3.2. Use Git submodules

Git submodules can be used to manage the dependencies between the micro front-ends and the shared code repository. This allows each micro front-end to reference the shared code repository as a submodule, making it easy to update the shared code across all micro front-ends.

For example: Adding the submodule into your micro root repository

```bash
git submodule add <module-git-url> <module-name>
```

### 3.3. Share data between micro front-ends

Sharing data between micro front-ends can be challenging because each module is typically developed and deployed independently. However, there are a few ways to share data between micro front-ends, such as API calls, the Pub/Sub pattern, or shared state management libraries such as Redux or MobX.

### 3.4. Control routing your micro front-end

In a micro front-end architecture, routing can be controlled in different ways depending on the specific implementation. Here are three common approaches:

1. `Centralized Routing`: This approach uses a central routing mechanism that sits outside of the individual micro front-end applications. The central router is responsible for receiving requests from the user and deciding which micro front-end application to load. This approach requires careful coordination between the different teams responsible for each micro front-end to ensure consistency and compatibility.
2. `Embedded Routing`: With embedded routing, each micro front-end application has its own internal routing mechanism. When a user navigates within a micro front-end, the embedded router handles the routing within that micro front-end. If a user navigates to a different micro front-end, the embedded router hands off the request to the central router.
3. `Hybrid Routing`: A hybrid approach combines elements of both centralized and embedded routing. The central router is responsible for handling high-level navigation between micro front-ends, while each individual micro front-end also has its own internal router for handling internal navigation.

Here's an example of how you could use a separate routing module in a micro front-end application built with React:

```javascript
import { BrowserRouter as Router, useNavigate } from "react-router-dom";
import { useRoutes } from "react-router";
import React from 'react';
import ReactDOM from "react-dom";
import { loadMicroApp } from "./microAppLoader";

const root = ReactDOM.createRoot(
  document.getElementById("root") as HTMLElement,
);

const Header = () => {
  const navigate = useNavigate();

  const handleNavigate = (path: string) => navigate(path);

  return (
    <div>
      <button onClick={() => handleNavigate("/home")}>home</button>
      <button onClick={() => handleNavigate("/microapp1")}>micro1</button>
      <button onClick={() => handleNavigate("/microapp2")}>micro2</button>
    </div>
  );
};

const Routes = () => {
  const routes = useRoutes([
    {
      path: "/microapp1",
      element: loadMicroApp(
        "microapp1",
        "http://localhost:3001",
      ),
    },
    {
      path: "/microapp2",
      element: loadMicroApp(
        "microapp2",
        "http://localhost:3002",
      ),
    },
  ]);

  return (
    <React.Suspense fallback={<div>loading...</div>}>{routes}</React.Suspense>
  );
};

root.render(
  <React.StrictMode>
    <Router>
      <Header />
      <Routes />
    </Router>
  </React.StrictMode>,
);
```

The `loadMicroApp` function is responsible for loading the micro front-end from its URL and returning a React component that can be rendered by the main application. Here's an example implementation of the `loadMicroApp` function:

```javascript
export const loadMicroApp = (name: string, microAppUrl: string) => {
  return <iframe title={name} src={microAppUrl} />;
};
```

In this example, the loadMicroApp function returns a new React component that is responsible for loading the micro front-end script from the specified URL.

### 3.5. Monitor and troubleshoot your micro front-end architecture

When deploying a micro front-end architecture, it's important to monitor and troubleshoot your application to ensure that it is working as expected. This includes monitoring your micro front-ends for errors, as well as monitoring the performance and availability of your application as a whole.

## 4. Conclusion

In conclusion, a micro front-end architecture can help you break down a large, complex front-end application into smaller, more manageable parts. By structuring your application in this way, you can develop, test, and deploy each micro front-end independently, making it easier to maintain and scale your application over time. To implement a micro front-end architecture, you'll need to choose the right technology stack, use Git submodules, share data between micro front-ends, test each micro front-end independently, and monitor and troubleshoot your application.


medium_five-stones.png

small_five-stones.png

thumbnail_five-stones.png

five-stones.png

Micro Front-End and Six infinity Stones

React is a popular `front-end` framework for building complex web applications. However, as applications grow in size and complexity, performance can suffer, leading to slow load times and sluggish user interfaces. In this blog post, we'll explore some advanced techniques for optimizing React performance and improving the overall user experience.

## 1. Understanding React Performance

We'll take a deep dive into the factors that can impact React performance, including the use of virtual DOM, component lifecycles, and the importance of minimizing re-renders.

## 2. Advanced Techniques

We will cover several advanced techniques for optimizing React performance, including:

- Memoization: Using memoization to prevent unnecessary re-renders of components
- Lazy loading: Loading components only when they are needed, to reduce initial load times
- Code splitting: Breaking down large bundles of code into smaller, more manageable pieces to reduce load times
- Server-side rendering: Rendering components on the server to reduce initial load times and improve SEO

### 2.1. Memoization

React memoization is a technique used in React to optimize rendering performance by preventing unnecessary re-renders of components. When a component is re-rendered unnecessarily, it can cause a performance hit, especially in larger applications.

React memoization can be achieved by using the `React.memo()` Higher Order Component (HOC) to wrap a component. This HOC will memoize the component and re-render it only when the props passed to it have changed.

Here's an example of how to use `React.memo()` to memoize a component:

```javascript
import React, { memo } from "react";

const MyComponent = memo((props) => {
  // Component code here
});

export default MyComponent;
```

In this example, `MyComponent` is wrapped with `React.memo()`, which will memoize the component and re-render it only when its props have changed.

It's important to note that memoization should only be used when necessary, as it can add unnecessary complexity to a codebase. It's also important to ensure that the props passed to a memoized component are immutable, as changing them will trigger a re-render.

### 2.2. Lazy loading

Lazy loading is a technique used to improve the performance of web applications by deferring the loading of resources until they are actually needed. In the context of React, lazy loading involves loading components only when they are required, rather than loading them all at once during the initial load of the application.

React provides a built-in way to implement lazy loading using the `React.lazy()` function. This function allows you to load a component lazily, i.e., only when it's needed. To use this function, you need to import it from the React library:

```javascript
import React, { lazy, Suspense } from "react";
```

You can then use the `lazy()` function to load a component lazily. For example:

```javascript
const MyComponent = lazy(() => import("./MyComponent"));
```

Here, `MyComponent` is loaded lazily using the `import()` function. When the component is needed, React will automatically load the necessary code and render the component.

To ensure a smooth user experience while the component is loading, you can use the `Suspense` component to show a loading indicator. The `Suspense` component is also imported from the React library:

```javascript
import React, { lazy, Suspense } from "react";

const MyComponent = lazy(() => import("./MyComponent"));

function App() {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <MyComponent />
      </Suspense>
    </div>
  );
}
```

In this example, the `MyComponent` is wrapped inside the `Suspense` component. The `fallback` prop specifies what should be rendered while the component is being loaded. In this case, a simple "Loading..." message is displayed.

By using lazy loading with the `React.lazy()` function and the `Suspense` component, you can improve the performance of your React application by loading components only when they are needed, reducing the initial load times and improving the overall user experience.

### 2.3. Code splitting

Code splitting is a technique used to split a large codebase into smaller, more manageable pieces. In React, code splitting is often used to improve the performance of web applications by reducing the amount of code that needs to be loaded at once.

There are several ways to implement code splitting in React:

1. Dynamic import: This allows you to load a component or module on demand, only when it's needed. The import() function is used to achieve this.
2. React.lazy: This is a built-in feature of React that allows you to load a component lazily (i.e. on demand). It uses dynamic imports under the hood. (as mentioned at 2.2)
3. Bundle splitting: This involves splitting your code into multiple smaller bundles, which can be loaded on demand. This is often done using tools like Webpack.

Code splitting can greatly improve the performance of your React applications, especially if you have a large codebase with many components. By splitting your code into smaller chunks, you can reduce the amount of code that needs to be loaded at once, which can result in faster load times and a better user experience.

### 2.4. Server-side rendering

Server-side rendering in React involves rendering the React components on the server-side and sending the generated HTML to the client for faster initial load times and better search engine optimization (SEO).

The process involves setting up a server that can handle incoming requests for specific routes, rendering the appropriate React component for that route, and sending the generated HTML to the client. This can be done using libraries such as `Express` or `Next.js`.

When the client receives the HTML, it hydrates the HTML by attaching event listeners to the rendered markup, enabling the React components to function as expected.

Server-side rendering can significantly improve the initial load time of a React application and improve SEO by making it easier for search engines to crawl and index the content of the application.

## 3. Best Practices for Optimizing React Performance

We'll wrap up with some best practices for optimizing React performance, including:

- Using the React Profiler to identify performance bottlenecks
- Monitoring performance using browser developer tools
- Minimizing the use of third-party libraries and components to reduce code bloat and improve performance
- Optimizing images and other media to reduce load times

**Conclusion:** By implementing these advanced techniques and best practices, you can optimize the performance of your React applications and provide a fast, responsive user experience.


Links

CoZDe Blogs

Automating Code Generation using npm and NodeJS

Micro Front-End and Six infinity Stones

Advanced Techniques for Optimizing React Performance

Links

Contact