Reflect.js
The HTML-oriented reactive framework
Using a reactive framework in modern web development can be pretty involved — but it doesn't have to be.
Reflect.js is a groundbreaking alternative which strives for simplicity:
- it turns HTML itself into a reactive language
- it generates fully indexable pages out of the box
- it makes it easy to create your own reusable components.
It's implemented as a customizable Express server for Node.js. It augments HTML with :-prefixed attributes, [[...]] expressions, and <:...> directives, and it's easy to pick up.
Page-specific JavaScript code for both the client and the server is compiled on the fly as needed — you only have to focus on page logic and the server takes care of the rest.
Reflect.js removes all the boilerplate code associated with JS-oriented reactive web frameworks like React and Vue.js, while still encouraging good practices and code reuse — you'll be surprised at how effective it can be.
Reflect.js is still under development. We plan to reach v.1.0 later in 2023.
Hello World
- create a dir and install the package:
mkdir myapp && cd myapp
npm install reflectjs-core
npx reflectjs
# ... START http://localhost:3001- add
index.html
<html>
<body :count="[[0]]"
:did-init="[[
setInterval(() => count++, 1000);
]]">
Seconds: [[count]]
</body>
</html>- navigate to http://localhost:3001 to see the seconds counter live.
If you install globally with
npm install -g reflectjs-coreyou can just launch the server from any directory with thereflectjscommand.
Use in a project
- create the project
mkdir myproject cd myproject
npm init -y
npm install reflectjs-core
mkdir docroot- add an entry point
// index.js
const reflectjs = require('reflectjs-core');
const path = require('path');
new reflectjs.Server({
port: 3002,
rootPath: path.join(__dirname, 'docroot'),
});in TypeScript we can use imports instead
// index.ts
import { Server } from 'reflectjs-core';
import path from 'path';
new Server({
port: 3002,
rootPath: path.join(__dirname, 'docroot'),
});- add
docroot/index.html
<html>
<body :count="[[0]]"
:did-init="[[
setInterval(() => count++, 1000);
]]">
Seconds: [[count]]
</body>
</html>- run the project:
node index.js
# ... START http://localhost:3002- navigate to http://localhost:3002 to see the seconds counter live.
When using Reflect.js in a project you can configure it and add your own services and middleware. All options are documented in the Server Reference.
Next steps
- Introduction — get the gist of Reflect.js
- Tutorial — get a taste of Reflect.js development
- Reference — find all the details