Tobi Reiss basecode

A quick draft of a "layered based" DOM renderer.

Why Layers?

A Layer, also referred to as "Stacking Context", describes a group of DisplayObjects that can be flattened and combined to one "Context". Why does that matter? Chances are supposed to be higher that continuous attribute changes due to animations can be applied much faster on a Layer that can potentially managed by GPU than on all children individually managed by GPU or even CPU. Especially when considering a frame-budget of only 16ms. Which means the animation could run at 60FPS.

When to create a Layer?

It's all about Components.

Components can be created at runtime via createClass
Stringified and parsed
Existing DOM can be parsed via a "mount" algorithm.

DOM changes

React is event based and not "frame" based. It's not using a timer. DOM changes are cached until all events are done and flushed at once.
setState triggers DOM changes explicitly

	// CGGeometry+Additions.h
	// Copyright (c) 2012 Tobias Reiss (MIT License)

	#import <CoreGraphics/CGGeometry.h>

	CG_INLINE CGRect CGRectScale(CGRect rect, CGFloat mult) {
	CGPoint origin = rect.origin;
	CGSize size = rect.size;
	return CGRectMake(origin.x * mult, origin.y * mult, size.width * mult, size.height * mult);
	}

	<svg width="500" height="500" style="background-color:orange;" version="1.1" xmlns="http://www.w3.org/2000/svg">
	<defs>
	<filter id="dropShadowStack">
	<feGaussianBlur stdDeviation="3"/>
	<feOffset dx="3" dy="3" result="offsetblur"/>
	<feFlood flood-color="#720"/>
	<feComposite in2="offsetblur" operator="in"/>
	<feMerge>
	<feMergeNode/>
	<feMergeNode in="SourceGraphic"/>

	<html>
	<body>

	<script id="worker" type="text/worker">
	onmessage = function(e) { postMessage('worker: ' + e.data); }
	</script>

	<script type="text/ecmascript">
	var blob = new Blob([
	document.querySelector('#worker').textContent

	<!doctype html>
	<html>
	<head>
	<meta name="viewport" content="width=device-width">
	<title>CSS animations</title>
	<style>
	.spin {
	-webkit-animation: 3s rotate linear infinite;
	animation: 3s rotate linear infinite;
	background: red;

	/**
	* log events and properties
	* from http://www.w3.org/html/wg/drafts/html/master/embedded-content-0.html
	*/
	(function(media) {
	if (media instanceof HTMLMediaElement) {
	console.log('Found', media);
	} else {
	console.log('Media not found');
	}

	// EntryPoint.js
	define(function () {
	return function EntryPoint(require) {
	this.modul1 = new require("./Model1");
	this.model2 = new require("./Model2");
	};
	});

	// Model1.js
	define(function () {

	// http://paulirish.com/2011/requestanimationframe-for-smart-animating/
	// http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating

	// requestAnimationFrame polyfill by Erik Möller. fixes from Paul Irish and Tino Zijdel

	// MIT license

	(function() {
	var lastTime = 0;
	var vendors = ['ms', 'moz', 'webkit', 'o'];