frontend development

This paper addresses critical challenges in e-commerce frontends—tight coupling, outdated technologies, and poor developer experience—by empirically investigating the applicability boundaries of micro-frontend architecture. Method: Using a handcraft e-commerce platform as a case study, we incrementally decompose the monolith via an API gateway and Backend-for-Frontend (BFF) pattern, then implement Svelte-based micro-frontends atop an existing microservices infrastructure to achieve frontend-backend decoupling and team-autonomous delivery. Contributions: First, we systematically validate—within a real-world e-commerce setting—the necessity and inherent limitations of micro-frontends. Second, we demonstrate that leveraging an established microservice ecosystem significantly lowers adoption barriers. Third, we empirically show that micro-frontends are not universally superior: a well-architected monolithic frontend remains viable for equivalent functional goals, underscoring that architectural decisions must align closely with organizational capabilities and evolutionary maturity. Survey-based evaluation confirms measurable improvements but reinforces the principle of “context-sensitive” architecture selection.

Answer Set Programming (ASP) developers traditionally rely on external frontend technologies to construct user interfaces, creating a barrier to rapid prototyping and tight integration of declarative logic with interactive behavior. Method: This paper introduces Clinguin, the first system enabling native interactive UI modeling directly within ASP. It extends ASP with declarative UI predicates—such as `ui/2` for interface structure and `on_event/3` for event handling—unifying UI specification and interaction logic under ASP’s logical rule formalism. Built as an extension of Clingo, Clinguin compiles ASP source code directly into dynamic, browser-executable web interfaces. Contribution/Results: Clinguin significantly lowers the UI development threshold for ASP applications: interactive prototypes can be generated from just a few lines of ASP code. The system is fully integrated into the Clingo toolchain and publicly available as open-source software.

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.

Existing UI prototyping tools provide weak support for integrating design artifacts such as screenshots and sketches, hindering component reuse, semantic integration, and cross-role collaboration. This paper proposes a novel UI prototyping paradigm grounded in Conceptual Blending Theory, the first to concretize cognitive-science-based blending mechanisms into an interactive tool. It enables semantic-level element mixing across heterogeneous design examples through example-driven component extraction and semantic alignment, lightweight vision–semantics mapping, and real-time blended preview—facilitating staged intent articulation by developers. An empirical study with 14 frontend developers demonstrates that the approach significantly reduces prototype initiation time (average improvement of 42%), stimulates highly unexpected creative combinations (68% novel composition rate), and enhances design–development collaboration efficiency.

General-purpose chat-based LLM interfaces (e.g., ChatGPT) lack usability features tailored for web application development, hindering end-to-end application construction by non-programmers. Method: We propose the first language model interface specifically designed for zero-code web application generation. It innovatively integrates structured input, real-time feedback, and user-story-driven task decomposition, combined with frontend visual design, prompt engineering optimization, and GPT-series models. Contribution/Results: In a user study with 14 novices, nine fully implemented all user stories and five completed over half—achieving significantly higher task completion rates than ChatGPT. The results empirically validate that our interface effectively lowers the programming barrier imposed by LLMs and enhances practical development usability for non-experts.

This work addresses the inefficiency and lack of guidance faced by front-end developers when manually selecting plausible and natural attribute values for instantiating reusable UI components within a vast design space. To tackle this challenge, the paper introduces the concept of “discriminative variants,” which uniquely integrates symbolic reasoning with large language models (LLMs). Symbolic reasoning identifies visually salient attributes, while the LLM leverages real-world knowledge to generate component instances that balance fidelity to exemplars with meaningful differentiation. This approach shifts the paradigm from ad hoc manual configuration to structured exploration of the design space. A user study (n=12) demonstrates that the generated variants effectively aid developers in comprehending the design space, significantly improving both instantiation efficiency and user experience, while maintaining strong domain relevance.

This work addresses the challenges in edge and embedded application development—namely, heterogeneous software stacks, multi-language runtimes, and difficult debugging—which lead to rigid deployment workflows and complex fault diagnosis. To overcome these limitations, the paper proposes a novel architecture enabling unified end-edge-cloud development. Its core components include a single programming language, a retargetable runtime system, a local recording and replay mechanism for distributed events, and a cross-platform deployment framework. This design breaks down traditional debugging barriers in edge–cloud collaborative development, facilitating seamless scalability, consistent testing, and flexible deployment across heterogeneous environments. Evaluation of the prototype system demonstrates that the proposed approach significantly simplifies deployment procedures and enhances fault diagnosis efficiency.

This work addresses logical redundancy, state fragmentation, and poor maintainability arising from front-end/back-end heterogeneity in AI-generated web applications by proposing a backend-driven hypermedia application model. The approach uniquely integrates Kotlin’s statically typed HTML DSL with a reactive signal mechanism, enabling automatic synchronization between UI and backend state through type-safe custom HTML attributes and builder patterns, thereby substantially reducing reliance on JavaScript. Built upon HtmlFlow extensions, Datastar data attributes, and the Spring MVC architecture, the method demonstrates in the Petclinic case study a near-complete elimination of client-side scripting, enhanced type safety, and the realization of an isomorphic reactive interaction paradigm across frontend and backend.

This work addresses the vulnerability of existing ReAct-based web agents to prompt injection attacks when encountering malicious web content, which can hijack their control flow. To mitigate this, the authors propose shifting to a “Plan-Then-Execute” paradigm: before observing any web page, the agent generates a task-specific static execution plan and relies on typed, task-level APIs instead of low-level browser operations, thereby isolating untrusted inputs from the decision-making logic. By combining programmatic planning with static task graphs, the approach eliminates runtime dependence on large language models for action generation. Evaluation on the WebArena benchmark shows that all tasks are compatible with this paradigm, and 80% can be completed entirely using pre-generated plans without any runtime LLM invocation, substantially enhancing security and auditability.