coachonko/dark

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

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
• 🎀 Suspense fallbacks
• ☄️ Hot module replacement
• 💅 Styled components
• 💃🏼 Spring animations
• 💽 Server-side rendering
• 🏄‍♂️ Isomorphic routing
• 📖 SEO metadata
• 💾 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
• Spring dialog window

Stackblitz demos

• Dark context
• Working with standard HTML input elements
• SPA with lazy routes
• Concurrent tabs
• Spring page transitions
• Concurrent router
• 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, concurrent rendering, caching, suspense, router, async queries, lazy and styled components scores maximum points in Lighthouse.

Concurrent feature

Dark can split large rendering tasks automatically.

Turn this...

into this

LICENSE

MIT © Alex Plex