Pages that arrive
in pieces.
BigPipe sends the page at once and every part of it as soon as it is ready. Update the DOM, open dialogs and call JavaScript modules from PHP: an application that feels fast, without becoming a single-page app.
Stop waiting for the slowest query to show anything.
The dashboard of this demo has three parts that call slow APIs. Rendered the usual way, the browser gets nothing until all of them are done. With BigPipe the layout is flushed first and the parts are rendered at the same time.
A regular response
one after anotherWith BigPipe
streamed, in parallelclass RevenuePagelet extends Pagelet
{
protected mixed $fallback = 'Revenue is not available right now.';
protected function content(): string
{
// A slow API: waiting here does not hold up the other pagelets.
$orders = $this->api->orders();
// Call a JavaScript module once the pagelet is on the page.
$this->call('Dashboard/Chart', 'draw', [$orders->daily()]);
return view('dashboard._revenue', ['total' => $orders->total()])->render();
}
}Pagelets
Independent parts with their own CSS, JavaScript and a fallback when they fail.
Lazy pagelets
Load a part when it becomes visible, and infinite scroll.
Async responses
Links and forms that set, append, replace or remove content by a selector.
Dialogs
Open, stack and close dialogs from the server.
Page transitions
Load the next page into the layout instead of in full.
Poller & bootloader
Polling the server controls, and modules loaded only when called.
Learn it one feature at a time.
Every tutorial is a working example with its code, and a panel that shows what the server sent back. Page transitions, infinite scroll and uploads are in the demo app below.
Streaming pagelets
Parts of a page rendered in parallel and flushed as they are ready, with fallbacks, phases and a refresh.
02 →Lazy pagelets
A pagelet loaded when it scrolls into view, or once the browser is idle.
03 →Poller
A deploy that reports its progress; the server stops the poller when it is done.
04 →Morph
A form rendered on the server with every keystroke, and the focus stays where it was.
05 →Bootloader
A module that is not in the bundle, loaded with its CSS the first time the server calls it.
06 →Events
One event informed from PHP, and independent widgets that react to it.
07 →Dialogs
Open dialogs from the server, stack several of them and close them all at once.
08 →Basic usages
The DOM operations: set, append, prepend, replace and remove content by a selector.
09 →Forms
A form that is sent in the background, and its validation errors.
10 →Payload
Data for your JavaScript next to the DOM operations: a live username check.
11 →Transport markers
Send HTML, but also Map, Set and Element values to a module.
12 →Custom configuration
Define the configuration of the page as a module and change it with any response.
13 →DOM references
Define an element of the page as a module that any module can require by name.
14 →Expired CSRF tokens
The browser gets a new token and sends the request again.
15 →Refresh & redirecting
Reload the page or redirect, with a delay.
Recipes for a real application.
A blog and a shop built the way an application is, with a database, validation, tests and expired sessions. Every page is a page transition.
Blog
An infinite feed, comments with validation errors and a confirmation dialog.
02 →Shop and cart
Links that change several parts of the page from one response.
03 →Dashboard
Pagelets that are streamed as they are ready, rendered at the same time, one of them lazy.
04 →Notifications
A poller that the server controls.
05 →Post editor
A warning before leaving a form with unsaved changes.
06 →Profile
A file upload with a progress bar.