Module Federation

Module Federation allows you to dynamically share code between separate applications. This is particularly useful for micro-frontend architectures or when building large, modular applications.

Configuration

To enable Module Federation, you'll need to configure your build system. Here's a simplified example of a Webpack configuration:

const { ModuleFederationPlugin } = require('webpack').container;

module.exports = {
    // ... other webpack configurations
    plugins: [
        new ModuleFederationPlugin({
            name: 'app1', // Name of the remote application
            filename: 'remoteEntry.js', // Output file name for the remote entry
            exposes: {
                './Button': './src/components/Button', // Expose the Button component
            },
            shared: ['react', 'react-dom'], // Specify shared dependencies
        }),
    ],
};
            

Consuming Remotes

In another application, you can consume these exposed modules:

import React from 'react';
import('./App'); // Dynamically load the application

const Button = React.lazy(() => import('app1/Button')); // Import from the federated module

function App() {
    return (
        

            
Welcome to Our Application
            Loading...
}>
                 alert('Button clicked!')} />
            
        

Custom Hooks

Our platform provides a rich set of custom hooks to simplify common asynchronous operations, state management, and UI interactions.

useFetch Hook

The useFetch hook simplifies making HTTP requests and managing their state (loading, error, data).

import { useFetch } from '@our-platform/hooks';

function UserProfile({ userId }) {
    const { data, loading, error } = useFetch(`/api/users/${userId}`);

    if (loading) return 
Loading user data...
;
    if (error) return 
Error loading user: {error.message}
;

    return (
        

            
{data.name}
            
Email: {data.email}
        
    );
}
            

useLocalStorage Hook

Persist state in local storage with the useLocalStorage hook.

import { useLocalStorage } from '@our-platform/hooks';

function Settings() {
    const [theme, setTheme] = useLocalStorage('appTheme', 'light');

    return (
        

            
Current theme: {theme}
             setTheme(theme === 'light' ? 'dark' : 'light')}>
                Toggle Theme
            
        
    );
}
            

Web Workers for Background Tasks

Offload computationally intensive tasks to Web Workers to keep your main thread responsive. This is crucial for maintaining a smooth user experience during complex operations.

Creating a Worker

Create a separate JavaScript file for your worker logic (e.g., worker.js):

// worker.js
self.onmessage = (event) => {
    const { data } = event;
    // Perform a complex calculation
    const result = data.number * 2;
    self.postMessage({ result });
};
            

Using the Worker in Your Application

const worker = new Worker('/path/to/worker.js');

worker.onmessage = (event) => {
    console.log('Message from worker:', event.data.result);
};

worker.postMessage({ number: 10 });
            

Internationalization (i18n)

Make your application accessible to a global audience by implementing internationalization. Our platform supports standard i18n libraries.

Integrating a Library (e.g., react-i18next)

Install the library:

npm install react-i18next i18next
# or
yarn add react-i18next i18next
            

Configure i18n in your app:

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';

import translationEN from './locales/en/translation.json';
import translationES from './locales/es/translation.json';

const resources = {
    en: { translation: translationEN },
    es: { translation: translationES },
};

i18n
    .use(initReactI18next)
    .init({
        resources,
        lng: 'en', // default language
        interpolation: {
            escapeValue: false, // react already safes from xss
        },
    });

export default i18n;
            

Use translations in your components:

import { useTranslation } from 'react-i18next';

function Greeting() {
    const { t } = useTranslation();
    return 
{t('welcomeMessage')}
;
}