UIDL | BestHub

Ctrip Technology

Aug 24, 2023 · Frontend Development

Automatic Front‑End Code Generation from Visual Designs: Architecture, Implementation, and Practice

This article presents a comprehensive approach to automatically generate front‑end code from visual design drafts by introducing a customizable code‑generator workflow, detailing UIDL‑based intermediate representation, plugin‑based architecture, template‑driven development, platform optimizations, and real‑world deployment results, while also outlining future AI‑assisted enhancements.

DSLFrontendReact

0 likes · 18 min read

Automatic Front‑End Code Generation from Visual Designs: Architecture, Implementation, and Practice

ByteFE

Dec 5, 2022 · Frontend Development

Understanding the Architecture and Canvas Design of No‑Code/Low‑Code Building Platforms

This article explains the core concepts, architecture, and canvas implementation techniques of modern no‑code/low‑code building platforms, covering NCLC fundamentals, UIDL specifications, IOC modular design, drag‑and‑drop mechanics, smart snapping, multi‑selection, and event handling to improve development efficiency and user experience.

UIDLbuilding platformcanvas architecture

0 likes · 34 min read

Understanding the Architecture and Canvas Design of No‑Code/Low‑Code Building Platforms

Watermelon Frontend Tech Team

Nov 10, 2022 · Frontend Development

Unlocking No‑Code Platform Power: Inside the Frontend Canvas Architecture

This article explores how No‑Code & Low‑Code (NCLC) platforms transform frontend development by introducing a canvas‑editor and generator architecture, UIDL communication, IOC modular design, layered rendering, event systems, drag‑and‑drop mechanics, smart snapping, and component insertion techniques.

CanvasUIDLdrag and drop

0 likes · 37 min read

Unlocking No‑Code Platform Power: Inside the Frontend Canvas Architecture