Uniface Developing Shell

中文文档

Introduction:

In micro-frontend architectures based on iframes, development and debugging often face numerous challenges: frequent manual modification of iframe src, difficulty in managing multiple micro-applications, lack of a unified debugging entry, and so on. To address these issues, we have developed a development-period shell package specifically for front-end developers, which greatly simplifies the iframe-based micro-frontend development process and improves development efficiency.

Core Features:

• Menu-Driven Micro-Application Management:
  • Easily switch and manage multiple micro-applications through an intuitive menu interface.
  • Load the target micro-application with one click, without manually modifying the iframe src.
• Unified Development Entry:
  • Provide a unified development and debugging entry to facilitate centralized management and debugging of various micro-applications by developers.
  • Simplify development environment setup and reduce configuration complexity.
• Development-Period Specific:
  • This shell package is only used during the development and debugging phase and does not affect product building and release.
  • Remove the shell package from the production environment through simple configuration to ensure product purity.
• Convenient Function Switching:
  • Through the menu, you can easily switch each function, and quickly locate the function that needs to be debugged.

Usage Scenarios:

• Suitable for micro-frontend projects using the iframe architecture.
• Suitable for development scenarios that require frequent switching and debugging of multiple micro-applications.
• Suitable for teams that want to simplify development environment setup and improve development efficiency.

Advantages:

• Improve Development Efficiency:
  • Simplify micro-application management, reduce repetitive operations, and save development time.
• Optimize Development Experience:
  • Provide a unified development entry to facilitate centralized management and debugging by developers.
  • The intuitive menu interface improves the convenience of development and debugging.
• Reduce Maintenance Costs:
  • Development-period specific, does not affect product building and release, and reduces maintenance costs.

How to Use:

1. Integrate the shell package into your development environment.
2. Configure the micro-application menu and specify the entry address of each micro-application.
3. Start the development server, and select the target micro-application for debugging through the menu.

Summary:

This iframe-based micro-frontend development and debugging shell package is a powerful assistant for front-end developers during micro-frontend development. It can effectively improve development efficiency, optimize the development experience, and reduce maintenance costs. If you are developing an iframe-based micro-frontend, you may want to try this tool, and I believe it will bring you surprises!

Usage

npm i -D @ticatec/uniface-dev-shell

+page.svelte文件示例

<script lang="ts">

    import "@ticatec/uniface-element/ticatec-uniface-web.css"
    import "@ticatec/uniface-icons/feather-style.css"
    import "@ticatec/uniface-app-component.css"
    import "./app.css";
    import {onMount} from "svelte";

    import HomePage from "@ticatec/uniface-app-component";
    import RestService, {ApiError} from "@ticatec/axios-restful-service";
    import {BaseDataService} from "@ticatec/app-data-service";
    import routes from "./routes";

    const isDev = import.meta.env.MODE == "development" || import.meta.env.DEV;
    const inFrame = window.frameElement !== null;
    let mainHome: any;
    let params: any;
    
    onMount(async () => {
        if (isDev && !inFrame) {
            mainHome = (await import('@ticatec/uniface-dev-shell')).default;
            params = {
                menu: (await import('./menu')).default,
                title: 'Uniface Application Components'
            }
        } else {
            let service = new RestService(window.location.origin, (ex: any) => {
                if (ex instanceof ApiError) {

                }
                return true
            });
            BaseDataService.setProxy(service);
            mainHome = HomePage;
            params = {
                routes
            }
        }
    });
</script>

{#if mainHome}
    <svelte:component this={mainHome} {...params}/>
{/if}