Starlight Javascript Framework

A virtual-DOM framework that completely decouples application code from the DOM.

• Website
• Documentation
• Used by
• FAQ

Usage

To run a component in the DOM context (if you're using other libraries):

import { mount, addons } from 'starlight';
import { RootComponent } from './components';

const app = mount(RootComponent, document.body, addons);
app.update('Hi');

To run a component in a web-worker:

// DOM-context
import { mount } from 'starlight';

const worker = new Worker('worker.js');
const app = mount(worker, document.body);
app.update('Hi');  // send props to root component

// worker.js
import { mount, addons } from 'starlight';
import { RootComponent } from './components';

mount(RootComponent, null, addons).then(function(app) {
    app.update('Hi');  // send props to root component
});

Code Principles

Javascript has some features that make imperative programming easy but often those features lead to code that is more difficult to read or maintain. Starlight was designed to encourage good code hygiene principles. Some of the best of those are:

• Prefer closures to classes - this is ambiguous and splatters bind calls (or closures) in your code to maintain context. Better to just use closures to begin with. Javascript classes are just syntactic sugar over the existing prototypical object-model.
• Classes can be useful for data objects. (using instanceof and debugging).
• Prefer possession over inheritance or mixins - prototype is clunky and deep class hierarchies make for difficult debugging.
• Focus on building your business logic with pure functions and higher-order functions where you can. Leave impure functions for the edges.

TODO

• Add keyed element diffing to more-efficiently handle list insertion/removal
• (DOM-only components) Wrap components/expose wrapper to a components in a worker sandbox.
• more addons?

Credit

Created by Timothy Farrell