bk-weweb

Integrate and manage micro-frontends with BK-WeWeb framework.

10|4|Updated Aug 28, 2023

Search Tags:#frontend architecture #web components #micro-frontend #javascript framework #module loading #bk-weweb

Ready to run

npx skills add https://github.com/TencentBlueKing/bk-weweb --skill bk-weweb

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: bk-weweb
Source: https://github.com/TencentBlueKing/bk-weweb/tree/main/.cursor/skills/bk-weweb
Command: npx skills add https://github.com/TencentBlueKing/bk-weweb --skill bk-weweb

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill simplifies the development and integration of micro-frontends, allowing you to manage multiple applications or modules within a single interface without intrusive modifications.

Core Features & Use Cases

Micro-application Loading: Load and manage independent web applications.
Micro-module Loading: Integrate smaller, reusable JavaScript modules.
Isolation: Provides JS and CSS sandboxing to prevent conflicts.
Use Case: Integrate a legacy Vue 2 application and a modern React component into a single dashboard seamlessly, each operating in its own isolated environment.

Quick Start

Use the bk-weweb skill to load a micro-application from the URL 'http://localhost:8001/'.

Frequently Asked Questions about bk-weweb

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I load a micro-frontend application from a URL?▼

You can load a micro-frontend application by providing its HTML entry URL to the bk-weweb framework, which manages the integration and rendering of the independent web application within your main interface.

What is the difference between micro-application and micro-module loading?▼

Micro-application loading integrates full independent web applications via HTML entries, while micro-module loading integrates smaller, reusable JavaScript modules via JavaScript entries into a single modular web architecture.

How do I prevent CSS and JavaScript conflicts when integrating a legacy Vue app and a React component?▼

To prevent conflicts when integrating diverse technology stacks, the micro-frontend framework provides JS and CSS sandboxing alongside routing isolation and Shadow DOM rendering for each module.

Can I use different JavaScript frameworks in the same micro-frontend architecture?▼

Yes, the micro-frontend framework is applicable for building scalable web architectures with diverse technology stacks, allowing you to seamlessly integrate a legacy Vue 2 application and a modern React component.

How does Shadow DOM rendering help with micro-frontend module loading?▼

Shadow DOM rendering provides CSS and JavaScript isolation for micro-modules, ensuring that styling and scripts from reusable JavaScript modules do not leak or conflict with the main application.

What is the best way to build a modular web architecture without intrusive modifications?▼

The best way to build a modular web architecture without intrusive modifications is using a micro-frontend framework that supports HTML and JavaScript entries with built-in sandboxing and routing isolation.