Dark

The lightweight and powerful UI rendering engine without dependencies and written in TypeScript
(Browser, Node.js, Android, iOS, Windows, Linux, macOS)

Features

• 🌟 Reactive
• 🎉 Declarative
• 🛸 Fast
• 🏭 Has components and hooks
• 🧶 Based on the Fiber architecture
• ⚡️ Сan use without build tools
• 🦾 Strongly typed
• 🦄 Small size (4x smaller than React)
• ✂️ No dependencies
• 💥 Tree-shakeable
• 🔄 Async rendering
• 🔀 Concurrent rendering
• 🥱 Lazy loading modules
• ☄️ Hot module replacement
• 💅 Styled components
• 💃🏼 Spring animations
• 💽 Server-side rendering
• 🏄‍♂️ Isomorphic routing
• 💾 Shared state between server and client
• ⚙️ Server asynchronous code in the app (in SSR)
• 📬 Declarative queries and mutations
• 📲 Rendering to mobile platforms (Android, iOS) via NativeScript
• 💻 Rendering to desktop platforms (Windows, Linux, macOS) via NodeGui and Qt

const Greeting = component(({ name }) => <h1>Hello {name} 🥰</h1>);

<Greeting name='Alice' />

Installation

from template:

npx degit github:atellmer/dark/templates/browser app

cd app
npm i
npm start

Dark vs React Fiber

• Concurrent Sierpinski triangle

Demos

• 1k components
• 10k rows
• Animated grid
• Concurrent deferred search
• Spring draggable list
• Spring snake
• Spring masonry grid
• Spring slider
• Spring menu

Stackblitz demos

• Dark context
• Working with standard HTML input elements
• SPA with lazy routes
• Concurrent tabs
• Spring page transitions
• SSR+PWA app

Motivation

This project was written in my free time as a hobby. I challenged myself: can I write something similar to React without third-party dependencies and alone. The biggest discovery for me: writing a rendering library is not difficult, it is difficult to write one that is fast and consumes little memory. And this is a really hard task.

Inspiration

If you liked the project, please rate it with a star ⭐, it gives me inspiration to work for the benefit of the open-source community.

Ecosystem

Package	Description	URL
@dark-engine/core	Abstract core with main functionality	Link
@dark-engine/platform-browser	Renderer for browser (Single-Page apps)	Link
@dark-engine/platform-server	Renderer for Node.js (Multi-Page, Static-Gen and Universal apps)	Link
@dark-engine/platform-native	Renderer for Android, iOS (Native mobile apps)	Link
@dark-engine/platform-desktop	Renderer for Windows, Linux, macOS (Native desktop apps)	Link
@dark-engine/web-router	Isomorphic router for browser and server	Link
@dark-engine/native-navigation	Dark NativeScript router	Link
@dark-engine/animations	Spring based animations	Link
@dark-engine/styled	Styled components	Link
@dark-engine/data	Declarative queries and mutations	Link

Usage

import { component, useState } from '@dark-engine/core';
import { createRoot } from '@dark-engine/platform-browser';

const App = component(() => {
  const [name, setName] = useState('Dark');

  return (
    <>
      <div>Hello {name}</div>
      <input value={name} onInput={e => setName(e.target.value)} />
    </>
  );
});

createRoot(document.getElementById('root')).render(<App />);

without JSX:

import { Text, component, useState } from '@dark-engine/core';
import { createRoot, div, input } from '@dark-engine/platform-browser';

const App = component(() => {
  const [name, setName] = useState('Dark');

  return [
    div({ slot: Text(`Hello ${name}`) }),
    input({ value: name, onInput: e => setName(e.target.value) }),
  ];
});

createRoot(document.getElementById('root')).render(App());

Benchmark

js-framework-benchmark

Based on the benchmark results (on the my machine), Dark is approximately 24% slower than the reference vanillajs implementation, yet it outperforms both React and Preact.

Lighthouse

A small application demonstrating the capabilities of Dark using SSR, rendering to stream, service-worker, offline mode, suspense, router, async queries, lazy and styled components scores maximum points in Lighthouse.

LICENSE

MIT © Alex Plex