Cirkit is a lightweight and opinionated UI framework that utilizes JSX and a signal-slot system for building responsive and component-based web applications. Emphasizing minimalism, flexibility, and performance, Cirkit provides a declarative syntax for creating UI components, lists, menus, tabs, and other interactive elements, enabling developers to construct applications with ease and clarity.

Key Features

• JSX-based component structure: Use JSX for a simple and intuitive component tree.
• Collection components: Create dynamic lists, menus, tabs, and accordions.
• Signal-slot architecture: Promote event handling and decoupled communication between components.
• Reactive binding: Automatically bind data to UI elements with selection support.
• Efficient DOM updates: Achieve higher performance through direct references and minimal index lookups.
• Inbuilt layout styling: Use flexbox for straightforward layout management.
• No dependencies: Built with clean TypeScript and vanilla JavaScript, ensuring a lightweight framework.

Framework Philosophy

Cirkit was developed from a desire to simplify the heavy complexity often found in contemporary web frameworks, influenced by experiences with mature GUI frameworks like QT and wxWidgets. It aims to provide a more intuitive approach to frontend development, addressing common frustrations with popular frameworks like React and AngularJS. Cirkit emphasizes straightforward coding practices, allowing applications to be developed without the convolutions seen in traditional setups.

Understanding Signals and Slots

The signal-slot mechanism of Cirkit offers a robust method for managing events. This system allows components to interact without being tightly coupled, thereby enhancing flexibility. An illustrative example of this paradigm demonstrates how an upload button can easily update a user interface without tight integration between components:

// Setup the count state
data.count = 0;

// Define a slot to update the UI label
const doUpdateUploadCount = () => app.panelCounts.labelUploadCount.ref.textContent = `Upload count: ${data.count}`;

// Connect the signal
dir('app.updateUploadCount', doUpdateUploadCount);

// Wire the button click event
dir('app.updateButton.click', () => {data.count++; emit('app.updateUploadCount')});

In this example, the button and the count display are linked through signals, demonstrating the power of decoupled interactions.

JSX for User Interfaces

Cirkit encourages a streamlined use of JSX to define the user interface, treating it as a series of nested elements rather than a blend of logic and layout. This approach allows for clear and maintainable code, exemplified in a simple Todo list application:

import {ComponentMap, h, plantDOMTree, setProp, setStyle, List, wire, emit} from './lib/cirkit.js';

type TodoItem = { text: string };
export const data = { todos: new List<TodoItem>('todos') };

const root: ComponentMap =
<app class='VBox app'>
  <todos class='vscroll' trait='list' bind={data.todos} tag='ul'>
    <item-template tag={'li'} text={setProp('innerText')}/>
  </todos>
  <todoAdd class='HBox'>
    <todoInput tag='input' placeholder='Add item...' signals={['keypress']} />
  </todoAdd>
</app>;

const app = plantDOMTree(root, document.body);

const doAddTodo = function() {
  const elemInput = app.todoAdd.todoInput.ref;
  if(elemInput.value) {
    data.todos.add({text: elemInput.value});
    elemInput.value = '';
  }
};

wire('app.addTodo', doAddTodo);
wire('app.todoAdd.todoInput.keypress', (evt: any) => evt.key === 'Enter' && emit('app.addTodo'));

This structure demonstrates the clarity and compactness of writing UI code in Cirkit.

Future Development

Several enhancements are planned to further expand Cirkit's capabilities. Future updates aim to include more example applications, advanced collection features like multi-select and virtual lists, asynchronous signal handling, and support for advanced animations and layouts. Additionally, a complete documentation suite, a UI designer, and type checking improvements will significantly enhance developer experience.

Demo Available Here

Explore the functionality and design of Cirkit in real-time, showcasing its commitment to simplicity and efficiency in creating modern web applications.

Cirkit represents an innovative approach to UI development, providing a much-needed alternative for those seeking an uncomplicated yet powerful framework.