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
• Converts necessary Elixir code into 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.

WebSocket Communication

Client-server communication happens automatically through WebSockets:

• No manual WebSocket or HTTP configuration needed
• No boilerplate code required
• Handles all action-command interactions

Runtime Behavior

The framework:

• Loads the initial page from the server
• Mounts the page in the browser
• Manages the virtual DOM for efficient updates
• Handles all client-server communication automatically