DEV Community

zhonghua
zhonghua

Posted on • Edited on

Practical Modular Development in HarmonyOS: Independent Routing and Decoupling Strategies

Practical Modular Development in HarmonyOS: Independent Routing and Decoupling Strategies

Foreword
In modern software development, modular design is key to enhancing a project's maintainability and scalability. HarmonyOS, with its advanced architectural design, offers developers powerful tools for modular development. This article delves into how to implement independent routing configurations for modules in HarmonyOS to reduce coupling between modules and enable independent operation and development of single modules.

I. Overview of Architectural Design
A clear architectural design is the cornerstone of modular development. Below is the architectural design pattern I recommend:

- baselibrary （Base library）
  - Contains all the basic functionalities and utility classes shared across the project.
- commons （Common business framework library）
  - uicomponents （Reusable UI components and page templates）
    - Houses all reusable UI components and page templates.
- features
  - collection （Collection page components）
  - message （Message page components）
  - Each feature module contains its specific business logic and UI implementation.
- products
  - default （Default product module）
    - The default product module, containing the main functionalities and entry points of the application.
Enter fullscreen mode Exit fullscreen mode

II. Detailed Routing Configuration

  1. Basic Routing Configuration In the product module, we first need to define basic routes, which typically include the application's splash screen, home page, and login page.

Basic routing configuration code example:

// Define route name constants
export enum RouteName {
  SplashPage = 'SplashPage',
  MainPage = 'MainPage',
  OtherLogin = 'OtherLogin',
  OtherTest = 'OtherTest'
}

// Routing configuration function
@Builder
export function routeConfig(name: string, param?: object) {
  switch (name) {
    case RouteName.SplashPage:
      return SplashPage();
    case RouteName.MainPage:
      return MainPage();
    case RouteName.OtherTest:
      return TestPage();
    case RouteName.OtherLogin:
      return OtherLogin();
    default:
      return NullPage();
  }
}
Enter fullscreen mode Exit fullscreen mode
  1. Application Entry Configuration In the application's entry file, we will configure the routes and initialize navigation.

Application entry configuration code example:

@Entry
@Component
struct Index {
  // Navigation stack
  @Provide('NavPathStack') pageInfos = new NavPathStack();

  aboutToAppear() {
    // Initialize routing
    LibNavigator.init(this.pageInfos, routeConfig);
  }

  build() {
    Navigation(this.pageInfos) {
      MainPage();
    }
    .navDestination(routeConfig);
  }
}
Enter fullscreen mode Exit fullscreen mode

III. Modular System Routing Configuration

  1. Module Routing Page Coding For each module, we need to write routing page code to enable navigation within the module.

Module routing page code example:

import { CommentComp } from '../pages/comment/CommentComp';

export enum MessageRouteName {
  Comment = "Comment"
}

@Builder
export function messageRouter(name: string, param?: object) {
  if (name === MessageRouteName.Comment) {
    return CommentComp();
  }
}
Enter fullscreen mode Exit fullscreen mode
  1. System Routing Table Configuration In the system's configuration file, we will configure the routing table for modules to enable independent routing operation of modules.

System routing table configuration code example:

{
  "routerMap": [
    {
      "name": "Comment",
      "pageSourceFile": "src/main/ets/router/MessageRouter.ets",
      "buildFunction": "messageRouter",
      "data": {
        "description": "Comment page"
      }
    }
  ]
}
Enter fullscreen mode Exit fullscreen mode

module.json5 configuration example:

{
  "module": {
    "name": "message",
    "type": "har",
    "deviceTypes": [
      "default",
      "tablet",
      "2in1"
    ],
    "routerMap": "$profile:route_map"
  }
}
Enter fullscreen mode Exit fullscreen mode

IV. Summary
Through the in-depth analysis of this article, we have learned how to implement modular development in HarmonyOS by configuring independent routes to reduce coupling between modules and improve development efficiency and application maintainability. It is hoped that this article will provide practical guidance and inspiration for HarmonyOS developers to jointly promote the prosperity and development of the HarmonyOS ecosystem.

Top comments (0)