Front-end framework using object.observe! (just the JS)

gistfile1.txt

var person = {
		name: 'Dude!',
		age: '100',
		profession :'Welder'
	},
	hook = document.getElementById('hookOne');

function render(location, object) {
	location.innerHTML = '';
	var newBio = document.createElement('div');
	for (property in object) {
		var newBioTag = document.createElement('p'),
			newBioLine = document.createTextNode(property.toUpperCase() + ': ' + object[property])
		newBioTag.setAttribute('data-objectProperty', property);
		newBioTag.appendChild(newBioLine);
		newBio.appendChild(newBioTag);
	};
	location.appendChild(newBio);
	runListeners();
}

Object.observe(person, function(changes) {
	render(hook, person);

	// You could also do this for an external data source
	// $.post(url, change)
	// 	.then(render(hook, person))
	// 	.fail( some undo change code that object.observe has... if it has , render(hook, person));
});


render(hook, person);

function runListeners() {
	pTags = document.getElementsByTagName('p')
	for (var i = 0; i < pTags.length; ++i) {
		pTags[i].addEventListener('click', function() {
			var inputTag = document.createElement('input');
				objectAttribute = this.getAttribute('data-objectProperty');
			inputTag.setAttribute('data-objectProperty',objectAttribute);
			inputTag.setAttribute('placeholder',objectAttribute);
			this.parentNode.replaceChild(inputTag, this);
			inputTag.addEventListener('change', inputSubmit);
		})
	}	
}


function inputSubmit() {
	var property = this.getAttribute('data-objectProperty');
	person[property] = this.value;
	render(hook, person);
}

This is just a proof of concept that with Object.observe you have what could be a front-end framework. The render function was inspired by a a talk on React. Rather than update Dom elements it just clears it out and re-creates, but since that happens you have to run Listeners again. To make this work just load it in an HTML document that has a div with an id="hookOne" (and maybe style it nicely too). You would need to add code to get some data from an external API too.