skills.rest
TencentBlueKing
TencentBlueKingOFFICIAL
Explore all skills by this author →
WebsiteGitHub

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
One-click install
npx skills add https://github.com/TencentBlueKing/bk-weweb --skill bk-weweb
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Software Engineering Skills→
GoBeromsuGoBeromsu

overleaf-frontend-patterns

Standardize frontend module patterns for Overleaf CE projects.

Community
Intermediate
nachopalmerinachopalmeri

animate

Plan purposeful animations and micro-interactions for frontend UI features.

Community
Advanced
sayali-ingle-pdlsayali-ingle-pdl

router

Generate a Vue Router setup file with hash-based routing and navigation guards.

Community
Intermediate
ncsound919ncsound919

frontend-design

Design frontend interfaces and components for React or HTML/CSS.

Community
Advanced