Architecture

Hologram's architecture is designed around simplicity and developer experience. Here's how it works:

Pages and Components

The framework breaks down web applications into two fundamental building blocks:

• Pages: top-level components that represent different routes in your application
• Components: reusable UI elements that can be composed together

Code Distribution

Hologram automatically analyzes your code and:

• Determines which parts should run on the client vs server
• Compiles necessary Elixir code to JavaScript for browser execution
• Sets up all required client-server communication

Client-Side State

State is maintained in the browser, which:

• Enables immediate UI updates
• Reduces server load
• Simplifies the programming model

Actions and Commands

Code execution is organized into two types of operations:

• Actions: client-side operations that run in the browser
• Commands: server-side operations for tasks like database access

Both can be triggered by user interactions, and they can trigger each other.

Client-Server Communication

Communication is wired up automatically - no manual HTTP configuration and no boilerplate code - over two complementary transports:

• HTTP/2 request/response handles all action-command round-trips, practically as fast as WebSockets for real-time updates
• A Server-Sent Events (SSE) stream carries server-pushed updates - this is how broadcast actions reach every subscribed client without the client polling for changes

Both legs are plain HTTP, which keeps the whole system:

• Easy to debug with standard HTTP tools and browser DevTools
• Seamless through corporate proxies and firewalls

Runtime Behavior

The framework:

• Renders the initial page to HTML on the server (server-side rendering, or SSR) and serves it to the browser
• Mounts the page in the browser
• Manages the virtual DOM for efficient updates
• Handles all client-server communication automatically

Sponsored by

Main sponsor

Milestone sponsor

Previous

← Quick Start

Next

Template Syntax →