web development

Current micro-frontend architectures heavily rely on specific bundlers (e.g., Webpack), leading to inflexible module composition, constrained cross-team collaboration, and bottlenecks in error detection, runtime observability, and loading performance. To address these limitations, we propose Bundler-Independent Module Federation (BIMF)—the first runtime module federation framework decoupled from build-time bundlers. BIMF enables dynamic module loading, type-safe inter-module collaboration, and cross-team dependency sharing. It integrates runtime dependency resolution, distributed tracing, server-side rendering (SSR), and intelligent prefetching to significantly enhance observability and first-contentful-paint (FCP) performance. Experimental evaluation of a prototype implementation demonstrates: (1) full preservation of TypeScript type contracts across modules; (2) 100% dependency deduplication; (3) a 37% reduction in average module loading latency; and (4) a 42% improvement in parallel development efficiency across distributed teams.

OCL.js exhibits incomplete standard coverage, low adoption, and poor integration with modern frontend toolchains in SaaS modeling environments. Method: This paper proposes replacing OCL.js with JSX—a declarative JavaScript/TypeScript syntax—for model constraint specification. It introduces JSX to constraint modeling for the first time, leveraging its functional and component-based paradigm to enable inductive syntax definition, constraint-aware code generation, and dynamic querying, while natively supporting frontend-first architectures. A client-side constraint expression and execution framework is implemented atop the React ecosystem. Contribution/Results: Empirical evaluation demonstrates that JSX delivers superior expressiveness over OCL.js on representative modeling examples and significantly improves integration with contemporary frontend tools—including TypeScript, Vite, and ESLint—thereby enhancing developer productivity and tooling consistency.

This work addresses the challenges posed by implicit dependencies introduced by React Hooks, which often lead to anti-patterns that reduce code predictability and maintainability. To tackle this issue, we propose HookLens—the first interactive visualization system specifically designed for React Hooks—that integrates static and dynamic program analysis to explicitly reveal data flows and dependency structures across components. Through an iterative design process, HookLens provides an intuitive interface that enhances developers’ understanding of complex hook-based logic. A user study with 12 developers demonstrates that using HookLens significantly improves the accuracy of anti-pattern identification compared to conventional code editors and state-of-the-art large language model (LLM) coding assistants, thereby validating its effectiveness in supporting code comprehension and quality assurance for React Hooks.

React Hooks’ opaque semantics frequently lead to subtle UI bugs. To address this, we introduce React-tRace—the first formal semantic model targeting the core mechanisms of React Hooks. Grounded in operational semantics and definitional interpretation, our model precisely captures the execution ordering, state dependencies, and invocation constraints of Hooks within functional components. We formally prove that the model satisfies essential Hook properties—including call consistency and state persistence—and empirically validate its behavioral equivalence with the real React runtime. Leveraging this model, we develop a visualization-based debugging tool that significantly enhances developers’ understanding of Hook behavior and accelerates defect localization. This work establishes a verifiable, interpretable theoretical foundation for React Hooks while delivering practical tooling support for robust UI development.

To address client-side hydration-induced interactivity delays in SSR applications, this paper proposes a modular rendering and context-aware adaptive hydration architecture. The approach decomposes the UI into independently renderable and selectively hydratable modules, dynamically scheduling hydration timing and granularity based on device capabilities, network conditions, and component priority. Technically, it integrates dynamic `import()`-based code splitting, visibility detection, `requestIdleCallback`-driven idle-time scheduling, and custom adaptive React Hooks. Compared to monolithic hydration, the method significantly reduces initial JavaScript execution volume, improving core performance metrics—including First Input Delay (FID) and Time to Interactive (TTI)—without compromising interactivity richness. Its key contribution lies in the systematic integration of context-awareness into hydration orchestration, enabling fine-grained, runtime-adaptive hydration control—a novel advancement in SSR optimization.

Misuse of Observables, Signals, and change detection in Angular applications leads to performance degradation, memory leaks, and debugging challenges. To address this, we present the first static analysis tool specifically designed for Angular semantics, tightly integrating component lifecycle semantics, template binding mechanics, and reactive programming patterns. Implemented as an ESLint plugin, it enables precise identification of anti-patterns under the signal-first paradigm. Unlike generic RxJS linters, our approach introduces framework-aware, context-sensitive analysis and provides actionable, migration-guided remediation suggestions—facilitating smooth evolution from legacy RxJS-centric codebases to modern signal-based architectures. Evaluated across five large-scale production Angular applications, the tool reduces change detection cycles by up to 3× and lowers peak memory consumption by 75%, significantly improving both runtime performance and long-term maintainability.

This study addresses the lack of systematic approaches for identifying and detecting code smells specific to the Angular framework, a gap that hinders the maintainability of large-scale front-end projects. Through a gray literature review, the authors construct the first comprehensive catalog of Angular-specific code smells, distilling eleven distinct types and organizing them into a structured taxonomy—six of which represent cross-framework anti-patterns. Building on this classification, they develop a static analysis tool to automate detection. Evaluated on a manually validated dataset, the tool demonstrates strong performance, achieving an accuracy above 0.88 and F1 scores ranging from 0.89 to 1.00. It effectively identifies prevalent issues such as component overloading and duplicated logic, thereby validating the feasibility and practical utility of the proposed methodology.

This work addresses the pronounced challenges of web accessibility in dynamic single-page applications (SPAs), where traditional manual remediation is inefficient and costly. It presents the first approach to leverage large language models (LLMs) for automated accessibility repair in SPAs, introducing a unified, modular workflow that integrates DOM manipulation, source code analysis, and accessibility auditing tools. The proposed framework achieves repair rates of 80% on static websites and 86% on Angular-based SPAs, while also generating context-aware semantic descriptions for images. Designed to preserve visual consistency and system stability, the framework enables end-to-end automated accessibility remediation across both static and dynamic frontends.

Existing web agents are confined to operating at the human interface layer, lacking direct access to application logic, which limits their robustness and action expressiveness. This work proposes a lightweight embedded agent architecture that enables coordinated control over both frontend and backend components through frontend hooks and reusable backend workflows. The architecture uniquely supports unified integration across diverse frontend frameworks—such as React and Angular—and combines ARIA and URL observation, a page function registry, WebSocket communication, and MCP tool invocation to enable mixed-granularity actions and multi-step task execution. Evaluated in real-world web environments, the approach demonstrates that stable and complex agent behaviors can be deployed with minimal modification overhead, confirming its generality and practical utility.

This work addresses the lack of a modular desktop framework in scientific computing and engineering that supports orthogonal decoupling of 2D/3D visualization and simulation components. We propose and implement a modular multi-document interface framework tailored for the JVM ecosystem, which achieves architectural flexibility and long-term maintainability by decoupling the visualization layer, simulation engine, and an optional hardware-accelerated 3D rendering module. This design prevents 2D applications from incurring unnecessary 3D dependencies while enabling efficient synchronization between multiple views and simulations. Built on Java with a modular architecture and multithreaded model, the framework has been successfully integrated with a real-time 3D gas expansion simulation alongside synchronized 2D entropy map rendering. The implementation is publicly available on Maven Central, providing foundational support for the sustainable evolution of scientific software.