Frontend Framework Overview

Braid Frontend is a five-framework architecture for building reactive SPAs and full-stack web applications. Each framework lives in braid-lang/lib/frameworks/ and can be imported independently or composed together under a single braidc frontend CLI workflow.

The Five Pillars

Bond — VDOM & Components

lib/frameworks/bond/ defines a lightweight virtual DOM library. It provides createElement, createText, createFragment, createComponent, createPortal, createSuspenseBoundary, createErrorBoundary, 50+ HTML/SVG element helpers, a reconciler with keyed diffing, SSR via render_to_html, mounting adapters (mount_to_memory_dom, mount_to_html_string, mount_to_wasm_dom), an event delegation system, form state management, a11y validators, CSP helpers, hydration engine, and lifecycle hooks.

Blend — CSS-in-JS & Theming

lib/frameworks/blend/ is a CSS-in-JS library. It offers style(properties) for atomic class generation, global_style(selector, props) for global rules, unit helpers (px, rem, em, percent, vh, vw), color helpers (hex, rgb, rgba), responsive breakpoints, dark mode auto-switching via prefers-color-scheme, @keyframes/@font-face/@import support, critical CSS extraction, CSS minification, vendor prefixing, a Z-index management system, and spacing/typography scales.

Link — SPA Router

lib/frameworks/link/ is a client-side router. It provides create_router(config) with :param pattern matching, route guards (beforeEnter, beforeLeave), lazy loading via lazy_route(), nested routes, path validators, history stack integration (pushState/replaceState), helper functions link_push, link_replace, link_back, and guarded_route() / route_with_meta() / route_with_validator() factories.

Merge — State Management

lib/frameworks/merge/ is a Redux-inspired state container. Functions include merge_createStore(reducer, initialState, middleware) with dispatch, getState, subscribe, undo/redo, addComputed/getComputed selectors with caching, connectDevtools, jumpToHistory, selector caching via select(selector), and middleware factories: create_logger_middleware, create_persist_middleware, and create_thunk_middleware.

Sync — Backend Protocol

lib/frameworks/sync/ provides a full-duplex RPC protocol over TCP with MessagePack serialization, an Envelope-based request/response/error model, server with auth, rate limiting, circuit breakers, schema validation, middleware chains, streaming, observability (metrics, histograms, timers), audit logging, TLS transport, compression (zlib/gzip/deflate), health checks, and an EventBus with wildcard subscriptions.

CLI Commands

The braidc compiler exposes frontend-specific subcommands (from tools/braidc/src/main.cpp:54-61):

braidc frontend new <name>    Create a new Frontend (Bond/Blend) project
braidc frontend routes        Parse routes from application
braidc frontend state         Initialize state management
braidc frontend render        Render UI components
braidc frontend test          Run frontend tests
braidc frontend build -o <f>  Build frontend artifact
braidc frontend check         Validate frontend configuration
braidc frontend dev           Generate build manifest for dev server

Project Structure

my-app/
  main.br            # Entry point
  index.br           # App scaffold
  components/        # Bond components
  styles/            # Blend styles
  routes/            # Link route definitions
  store/             # Merge store/reducers
  sync/              # Sync client config
  braid.json         # Project config

Hello World Component

import bond;
import blend;

fn Greeting(props) {
    return bond.h1("Hello, " + props.name + "!");
}

let greeting = bond.createComponent(Greeting, { name: "World" });
let html = bond.render_to_html(greeting);
print(html); // <h1>Hello, World!</h1>

Full App Scaffold

import bond;
import blend;
import link;
import merge;
import sync.frontend_client;

let store = merge.merge_createStore(reducer, { count: 0 }, []);
let router = link.create_router({
    routes: [
        link.route_with_meta("/", Home, { title: "Home" }),
        link.route_with_meta("/about", About, { title: "About" })
    ],
    history: window.history
});

fn App() {
    return bond.div({ class: "app" }, [
        bond.header({}, bond.h1("Braid App")),
        bond.createComponent(router.current_route.component, {}),
        bond.footer({}, bond.p("Powered by Braid Frontend"))
    ]);
}

bond.mount_to_wasm_dom(bond.createComponent(App, {}), "#root");

How They Work Together

Bond creates the VDOM tree. Blend attaches atomic class names to Bond elements. Link intercepts navigation events to render the correct route component. Merge holds shared state that Bond components read and dispatch to. Sync connects to the backend over a TCP/MessagePack protocol to fetch data and stream realtime updates — all integrated through importable Braid modules with no framework lock-in.