Bigview: A Node.js Bigpipe‑Based Modular Frontend Framework

What is Bigview – Bigview is a Node.js‑written framework that implements the Bigpipe concept and offers a highly modular architecture for building web pages.

Background – It was created during the redesign of a domestic airline ticket detail page. The business requirements include independent modules, optional display based on user data, fault tolerance, and first‑come‑first‑served rendering.

Problems addressed – Slow API responses can delay the whole page, and the legacy codebase had a confusing structure that made maintenance difficult.

Framework goals – Improve first‑screen loading speed, decouple modules, and provide a clear code structure to boost development efficiency and reduce maintenance cost.

Main features – Five rendering modes are provided: parallel.js : layout first, parallel requests, render after all results are received. pipeline.js (default): layout first, parallel requests, render incrementally. reduce.js : layout first, execute pagelets sequentially. reducerender.js : layout first, sequential execution, render after all results. render.js : single‑pass rendering for non‑JS clients and SEO.

Nested pagelets – Supports unlimited nesting of pagelets, allowing sub‑pagelets (e.g., a, b, c) to be rendered in a specific order while the parent pagelet uses another mode.

Pagelet lifecycle – Each pagelet goes through the stages: before fetch – request API to get data parse – process module data render – assemble tpl + data end

Browser side support (bigview.js) – Provides lifecycle events ( ready , end , on pagelet arrive , on error ) and event methods ( on , off , trigger ).

Core technology – Bigpipe – Bigpipe splits a page into multiple pagelets and streams them to the browser using HTTP/1.1 chunked transfer encoding, allowing the server to send partial responses as soon as data for a pagelet is ready. The article outlines the traditional page load steps and compares them with the Bigpipe pipeline.

Lerna monorepo – The framework consists of three packages (bigview, biglet, bigview‑cli) managed in a single repository with Lerna. The directory layout and a sample lerna.json configuration are shown:

{
  "lerna": "2.0.0-beta.36",
  "packages": ["packages/*"],
  "version": "1.3.14",
  "commands": {
    "publishConfig": {
      "ignore": ["example/**", "test/**"]
    }
  }
}

Promise‑based flow control – Promises are used to implement the five rendering modes, enabling parallel and sequential execution of pagelet tasks.

References – Links to Wikipedia on chunked transfer encoding, the Bigview GitHub repository, Facebook’s Bigpipe article, and related Chinese engineering blogs are provided for further reading.