~/projects/hframe

HFrame

> Canvas UI Framework

HFrame is an experimental JS/TS framework that renders to a canvas instead of the DOM. Interactive webapps are often limited in performance by the browser's HTML tree parsing - for deeply nested structures, the browser may recalculate the size and position of hundreds of elements at a time. HFrame avoids intensive DOM manipulation by rendering the app to a canvas instead of HTML elements.

HFrame was the first project I made after reading Code Complete 2 and Head First Design Patterns. Its primary purpose was to help me practice the OOP concepts introduced within those books.

Status:
Backburner
Timeline:
2 months
Role:
Developer
Team:
Solo Project
HFrame

[Features]

Composability

In HFrame, all UI components implement the "element" interface, including layout components. Accordingly, layouts and elements can be composed together to create complex application interfaces and compound elements.

Object-Oriented Design

The design of HFrame adheres to the OOP principles of abstraction, encapsulation, inheritance, and polymorphism. Classes are programmed with high cohesion, and browser APIs are abstracted to reduce complexity.

Flexbox-like Layouts

Components can be laid out using absolute sizes (in pixels), or percentages of the parent component. Panels can be resized by dragging their edges.

Styling and Themes

HFrame's default themes can be extended and customized using the ThemeBuilder. Styles of individual components can also be customized inline by the user.

[Key Challenges]

Implementing Flexbox-like Layouts

Creating a flexbox-like layout system on canvas was difficult, since canvas lacks native layout engines like CSS. Calculating relative positions and sizes required recursive calculation of component sizes based on parent dimensions.

Handling Resize Interactions

Implementing draggable panel resizing was tricky, and manually checking the distance of the cursor to element boundaries created unnecessary complexity. To handle geometric operations in a more declarative way, I created several shape classes - points, line segments, and rectangles - and composed them together, abstracting away mathematical formulas for distance, overlap, transformations, and more.