Hologram v0.5.0 Released!

Hologram 0.5.0 represents a major evolution of the framework, delivering significant new features, performance improvements, and architectural changes that provide a more robust foundation for future development.

This release brings substantial performance enhancements across the entire stack - execution times have improved from milliseconds to microseconds in many core client-side operations, making Hologram fast enough to handle real-time interactions like mouse move events for drawing applications. To showcase these capabilities, I've prepared an SVG Drawing Demo that demonstrates smooth, responsive drawing using pointer move events.

Key highlights include the introduction of comprehensive session and cookie management, a new HTTP-based transport layer, live reload functionality for enhanced development experience, and incremental compilation for faster build times. The release also features a new high-performance bitstring implementation, extensive benchmarking infrastructure, and foundational CRDT support for future distributed features.

With over 950 commits since version 0.4.0, this release includes important architectural changes that improve both developer experience and runtime performance, while laying the groundwork for advanced features in upcoming releases.

New Features

Session Management

• Complete session handling system - Full server-side session support for storing and retrieving user data across requests
• Session operations in pages and commands - Added put_session/3, get_session/2, get_session/3, and delete_session/2 functions available in both page and component inits and page and component command handlers
• Phoenix session integration - When used on top of Phoenix, Hologram is fully interoperable with Phoenix session (not applicable when used as a standalone framework)

Cookie Support

• Full cookie management - Added put_cookie/3, put_cookie/4, get_cookie/2, get_cookie/3 and delete_cookie/2 functions with support for all standard cookie options (http_only, secure, same_site, etc.)
• Server-side cookie operations - Cookies can be read and manipulated during both server-side page/component rendering and command execution
• Automatic cookie encoding/decoding - Elixir data types are automatically serialized/deserialized when stored in cookies

New Events

• Pointer events support - Added support for pointer_move, pointer_cancel, pointer_down, pointer_up events with pointer-specific properties
• Mouse move event - Added new mouse_move event with support for client coordinates, movement deltas, offset positions, and screen positions
• Select event - Implemented text select event

Live Reload for Development

• File watching and auto-reload - Automatic detection of file changes in .ex and .holo files with intelligent debouncing (1 second delay)
• Compilation error overlay - Beautiful error overlay that displays compilation errors
• Phoenix CodeReloader integration - Seamless integration with Phoenix's code reloading system

CRDT Implementation

• Last Writer Wins (LWW) CRDT Map - Complete conflict-free replicated data type implementation for distributed state management (foundational work for future distributed features)
• Delta operations - Support for computing and applying delta operations between CRDT states
• Timestamp-based conflict resolution - Automatic conflict resolution using microsecond-precision timestamps

Enhancements

New Bitstring Implementation

• Complete bitstring rewrite - New JavaScript bitstring class with significant performance improvements: ~ x50 rendering speed improvements (!)
• Enhanced pattern matching - Better support for complex bitstring patterns and bitstring segment operations
• Optimized text handling - Fast paths for text-based bitstrings and UTF-8 operations

Incremental Compilation

• Module digest tracking - Implemented module digest PLTs (Persistent Lookup Tables) that track BEAM definition digests for all modules using fast phash2 hashing
• Smart recompilation - Only recompiles modules that have actually changed by comparing old and new module digest PLTs
• Call graph patching - Incrementally updates the call graph using CallGraph.patch/3 by removing vertices for deleted modules, rebuilding paths for edited modules, and adding new modules
• Build performance optimization - Significantly faster incremental builds as unchanged modules are skipped entirely, with detailed benchmarking showing the performance improvements. The speedup is 2x-10x depending on project size.
• Build artifact persistence - Automatic loading and dumping of module digest PLTs and call graph to disk for persistence across compilation cycles

Enhanced Event System

• Enhanced mouse and pointer event properties - Added comprehensive coordinate and movement tracking with fields: client_x, client_y, movement_x, movement_y, offset_x, offset_y, page_x, page_y, screen_x, screen_y
• Event inheritance improvements - ClickEvent now inherits from PointerEvent for better event property consistency (Firefox and Safari fixed related bugs)

Performance Optimizations

• Extensive function optimizations - Over 50 functions optimized including pattern matching, module reflection, and core operations
• Custom graph implementation - Replaced libgraph with custom map-based digraph implementation for better performance (optimized for Hologram-specific scenarios)
• ETS table optimizations - Enabled read/write concurrency options for better multi-process performance (Hologram compiles modules in parallel)
• Client-side rendering optimizations - Significant improvements to DOM rendering and bitstring operations
• Type representation changes - More performant internal representation for boxed types and complex data structures

Comprehensive Benchmarking Infrastructure

• Elixir benchmarking suite - 30+ benchmark scripts covering compiler operations, reflection functions, and core utilities
• JavaScript benchmarking system - New benchmarking infrastructure for client-side performance testing
• Automated benchmark runner - Script to execute all benchmarks with detailed performance reports

Transport Layer Migration

• HTTP-based communication - Migration from WebSocket to HTTP for page requests and command execution that need to access cookies/session.
• HTTP ping system - Keep-alive mechanism using HTTP HEAD requests every 30 seconds (this gives practically the same latency as running commands through Websockets)
• WebSocket connection management - New connection abstraction with automatic reconnection and timeout handling
• Phoenix Channels dependency removed - No longer depends on Phoenix JS for WebSocket functionality (custom implementation)

Serialization Improvements

• Serialization format v2 - New, more efficient serialization protocol for client-server communication
• Backward compatibility - Support for deserializing both v1 and v2 formats during transition period
• Better type support - Enhanced serialization for Elixir types

Expanded Runtime Support

• New Erlang function ports - Added JavaScript implementations of :erlang.iolist_to_binary/1, :erlang.max/2, :erlang.min/2, :erlang.byte_size/1, and partial :erlang.float_to_binary/2
• String function ports - Manual JavaScript ports of String.contains?/2 and String.trim/1 with server consistency tests
• 16-bit floats - Added support for 16-bit floats (now all float types are supported)

Bug Fixes

Template and Parsing Fixes

• SVG tag parsing - Fixed parsing of SVG tags and improved void element detection
• Template text fragments - Fixed parsing of "#" characters and "${" symbols in text fragments
• Expression parsing - Better handling of complex expressions in template contexts

Event and Navigation Fixes

• Page reload detection - Improved detection and handling of page reloads vs navigation (page reloads don't need to load page snapshot from the client store)
• Page snapshot restoration - Fixed restoration of page state when returning from external pages
• Flaky test resolution - Resolved multiple flaky tests in both Elixir and JavaScript test suites

Runtime Fixes

• Connection timeout handling - Better handling of connection timeouts and error states
• Error reporting - Made error reporting for some ported functions to be consistent with Elixir behavior
• Runtime env detection - Fixed the automatic detection of the runtime environment in Hologram.env/0

Backward Incompatible Changes

Event Naming Convention Changes

• Updated event names - Events like pointerdown should now be written in templates as $pointer_down, etc.

Acknowledgments & Community

Special Thanks to My GitHub Sponsors

I'd like to thank my GitHub sponsors: D4no0 (Calancea Daniel), Lucassifoni (Lucas Sifoni) and sodapopcan (Andrew Haust). Your support is greatly appreciated and helps with Hologram's continued development.

If you'd like to support Hologram's development and help make releases like this possible, consider becoming a GitHub sponsor. Your sponsorship directly contributes to the framework's growth, allows me to dedicate more time to new features, performance improvements, and community support. Every contribution, no matter the size, makes a meaningful difference in Hologram's journey.

Stay Connected

Join the growing community following Hologram's journey by signing up for our monthly Newsletter.

Every month, you'll get updates on development milestones, ecosystem news, and insights from the Hologram world. Think of it as your monthly check-in with everything Hologram-related. Whether it's new features being worked on, interesting discussions in the community, or updates on the framework's direction, you'll get a nice overview of what's been happening. No need to piece together information from different places - it's all compiled into one convenient monthly update.

- Bart