Future web framework.
- ES6 modules without transpiling, or use Rollup with Tree Shaking, only the classes you use are compiled into your project.
- Simple design pattern with inheritance,
Interface
,Component
, etc. - Event based or use promises.
- CSS3 animations.
- Math and Spring animations.
- Canvas graphics engine.
- Web audio engine.
- SVG support.
- WebGL with three.js.
- GLSL shaders with glslify (a node.js-style module system for GLSL).
glslify shader
colour beam
dissolve (fade transition)
colorize (fade transition)
chromatic aberration (simple)
chromatic aberration 2 (barrel distortion)
rotate
rotate 2 (pinhole)
mask (levels transition)
noise warp
noise dizzy
directional warp
directional warp 2 (scroll transition)
ripple
perlin
glitch displace
melt (feedback buffer)
//
// Class
// │
// ├── Decorators
// └── Constructor
// │
// └── Private scope
// │
// ├── Constants
// ├── Variables
// ├── Functions
// │
// └── Public scope
// │
// ├── Functions
// └── Overrides
//
class About extends Interface {
constructor() {
super('About');
const self = this;
// Private scope
let wrapper;
initHTML();
addListeners();
function initHTML() {
self.size('100%');
wrapper = self.create('.wrapper');
}
function addListeners() {
self.events.add(Events.RESIZE, resize);
resize();
}
function resize() {
}
// Public scope
this.update = () => {
};
this.animateIn = callback => {
};
this.animateOut = callback => {
};
// Overrides
this.destroy = () => {
// ...
return super.destroy();
};
}
}
import { Stage, Interface, Device } from '../alien.js/src/Alien.js';
Config.UI_OFFSET = Device.phone ? 20 : 35;
class Logo extends Interface {
constructor() {
super('Logo');
const self = this;
const size = Device.phone ? 40 : 64;
initHTML();
function initHTML() {
self.size(size);
self.css({
left: Config.UI_OFFSET,
top: Config.UI_OFFSET,
opacity: 0
});
self.bg('assets/images/logo.svg', 'cover');
self.tween({ opacity: 1 }, 1000, 'easeOutQuart');
self.interact(hover, click);
}
function hover(e) {
if (e.action === 'over') self.tween({ opacity: 0.7 }, 100, 'easeOutSine');
else self.tween({ opacity: 1 }, 300, 'easeOutSine');
}
function click() {
getURL('https://alien.js.org/');
}
}
}
class Main {
constructor() {
Stage.initClass(Logo);
}
}
new Main();
import { Events, Stage, Interface, Canvas } from '../alien.js/src/Alien.js';
class CanvasLayer extends Interface {
static instance() {
if (!this.singleton) this.singleton = new CanvasLayer();
return this.singleton;
}
constructor() {
super('CanvasLayer');
const self = this;
initHTML();
initCanvas();
addListeners();
function initHTML() {
self.size('100%').mouseEnabled(false);
Stage.add(self);
}
function initCanvas() {
self.canvas = self.initClass(Canvas, Stage.width, Stage.height, true);
}
function addListeners() {
self.events.add(Events.RESIZE, resize);
resize();
}
function resize() {
self.canvas.size(Stage.width, Stage.height);
}
}
}
class Main {
constructor() {
let canvas;
initCanvas();
function initCanvas() {
canvas = CanvasLayer.instance().canvas;
// ...
}
}
}
new Main();
import { Events, Stage, StateDispatcher } from '../alien.js/src/Alien.js';
class Data {
static init() {
const self = this;
this.dispatcher = new StateDispatcher(true);
addListeners();
function addListeners() {
Stage.events.add(self.dispatcher, Events.UPDATE, stateChange);
}
function stateChange(e) {
if (e.path !== '') self.setSlide(e);
}
this.setSlide = e => {
// ...
};
}
}
class Main {
constructor() {
Data.init();
const state = Data.dispatcher.getState();
if (state.path !== '') {
// ...
}
}
}
new Main();
To build a project, make sure you have Node.js installed (at least version 4).
mkdir loader
cd loader
git init
git submodule add -b master https://github.com/pschroen/alien.js
cp -r alien.js/examples/loader/* .
cp alien.js/.eslintrc.json alien.js/.gitignore .
npm install
npm start
Then open http://localhost:8080/. The npm start
script runs npm run dev
, so you can start experimenting with the code right away! :)
git submodule update --remote --merge
cp alien.js/examples/loader/package.json alien.js/examples/loader/rollup.config.js .
cp alien.js/.eslintrc.json alien.js/.gitignore .
rm -rf node_modules package-lock.json
npm install
npm run lint
npm run build
npm start
npm run build
- Docs
- Tests
- Import three.js via modules
- Dynamically import classes
- Particle emitter
- FX and lighting
- Error handling
- Active Theory's GitHub
- Active Theory's gists
- Active Theory's Mira
- Active Theory
- ECMAScript modules in browsers
- How to Set Up Smaller, More Efficient JavaScript Bundling Using Rollup
Released under the MIT license.