astralpeople/dom-dom-dom.com

My idea for Node.js Knockout

My and kangax’s idea for Node.js Knockout:

Auto-gathered compatibility tables of browser features

caniuse.com is nice but you still have to write all tests manually. I’d like to automate it by taking slightly different approach: collect serialised window objects of all people visiting the website. This way we get always up to date data.

How would it look like?

dom-dom-dom.com/Object.getOwnPropertyNames shows:
function: Chrome 5+, Firefox 4+, IE 9+, Opera 12+, Safari 5+

dom-dom-dom.com/document.body.style.boxShadow shows:
string: Chrome 10+, Firefox 4+, IE 9+, Opera 10.5+, Safari 5.1+

dom-dom-dom.com/window (the same as dom-dom-dom.com/) lists all its proporties:

• ArrayBuffer
  • function: Chrome 7+, Firefox 4+, IE 10+, Opera 11.6+, Safari 5.1+
• document
  • object: all browsers
    • [+] expand
• ...
• webkitURL
  • object: Chrome 10+, Safari 5.1+

##TODO

Front-end

Write window to JSON serializer. How to serialize DOM node to JSON?

Submiting data

Send data to the server in the following format:

{
	userAgent: "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_8_2) AppleWebKit/537.17 (KHTML, like Gecko) Chrome/24.0.1312.5 Safari/537.17",
	window: {
		ArrayBuffer: {
			$type: "function",
			arguments: "null",
			caller: "null",
			length: "number",
			name: "string",
			prototype: {
				$type: "object",
				constructor: {$type: "link", keys: ["ArrayBuffer"]},
				slice: {
					$type: "function",
					arguments: "null",
					caller: "null",
					length: "number",
					name: "string",
					prototype: {
						$type: "object",
						constructor: {$type: "link", keys: ["ArrayBuffer", "prototype", "slice"]}
					}
				}
			}
		},
		// ...
	}
}

"null", "string", "number", "boolean", "undefined" are primitive types, they don’t have children. "function" "object", "array" do.

"link" type has an absolute path in its "keys" field.

Back-end

MongoDB Schema

One MongoDB collection:

[
	{
		_id: 'ArrayBuffer',
		types: {
			function: [
				{family: 'Chrome', major: 24, minor: 0, patch: 1312}
				// more browsers
			]
		},
		children: {/* … */}
	},

	{
		_id: 'document',
		types: {
			'object': [
				{family: 'Firefox', major: 24, minor: 0}
				// …
			]
		},
		children: {
			URL: {
				types: {
					'string': []
				},
				children: {}
			},
			activeElement: {
				types: {
					object: [/* ... */]
				},
				children: {
					/* All the way down to the rabbit hole */
				}
			}
		}
	},

	{
		_id: 'window',
		types: {
			link: [
				{family: 'Chrome', major: 24, minor: 0, patch: 1312, value: '/'}
			]
		}
	}
]

Some collection items such as document might be several megabytes big. Let’s see how it’s going to work out.

API

When user opens a home page he receive the following data from api.dom-dom-dom/?depth=1

{
	ArrayBuffer: {
		types: {
			function: [
				{family: 'Chrome', major: 24, minor: 0, patch: 1312}
				// more browsers
			]
		},
		children: {}
	},

	document: {
		types: {
			'object': [
				{family: 'Firefox', major: 24, minor: 0}
				// …
			]
		},
		children: {}
	},

	window: {
		types: {
			link: [
				{family: 'Chrome', major: 24, minor: 0, patch: 1312, value: '/'}
			]
		}
	}
}

The response has the same structure as DB with exception of Mongo’s _id stuff.

depth indicates that I don’t need any children objects. Otherwise the response would be the whole DB.

Parse user agent

tobie/ua-parser. Borrow browserized version from Modernizr.

uaparse(navigator.userAgent)
> UserAgent {
  family: "Chrome",
  major: 24,
  minor: 0,
  patch: 1312
}

By the way

I have dom-dom-dom.com domain. It’s the best name I could came up with but I still don’t like it very much.

I want to build a long-running project. I’m going to maintain it after Node Knockout. I have had the idea for more than 2 years. Node KO is just a kick to start working on it.