Juan Olvera j0lvera

Moving from jQuery

Events

// jQuery
$(document).ready(function() {
  // code
})

Basic JavaScript MVC Implementation

Despite being derived from classical MVC pattern JavaScript and the environment it runs in makes Javascript MVC implementation have its own twists. Lets see how typical web MVC functions and then dive into simple, concrete JavaScript MVC implementation.

How Web MVC typically works

Typical server-side MVC implementation has one MVC stack layered behind the singe point of entry. This single point of entry means that all HTTP requests, e.g. http://www.example.com or http://www.example.com/whichever-page/ etc., are routed, by a server configuration, through one point or, to be bold, one file, e.g. index.php.

At that point, there would be an implementation of Front Controller pattern which analyzes HTTP request (URI at first place) and based on it decides which class (Controller) and its method (Action) are to be invoked as a response to the request (method is name for function and member is name for a variable when part of the class/object).

The introduction to Reactive Programming you've been missing

(by @andrestaltz)

So you're curious in learning this new thing called (Functional) Reactive Programming (FRP).

Learning it is hard, even harder by the lack of good material. When I started, I tried looking for tutorials. I found only a handful of practical guides, but they just scratched the surface and never tackled the challenge of building the whole architecture around it. Library documentations often don't help when you're trying to understand some function. I mean, honestly, look at this:

Rx.Observable.prototype.flatMapLatest(selector, [thisArg])

Projects each element of an observable sequence into a new sequence of observable sequences by incorporating the element's index and then transforms an observable sequence of observable sequences into an observable sequence producing values only from the most recent observable sequence.

	// based on https://gist.github.com/Potfur/5576225 & https://github.com/james2doyle/saltjs
	// more info: https://plus.google.com/109231487156400680487/posts/63eZzzrBSb6
	window.$ = function(s) {
	var c = {
	'#': 'ById',
	'.': 'sByClassName',
	'@': 'sByName',
	'=': 'sByTagName'}[s[0]];
	return document[c?'getElement'+c:'querySelectorAll'](s.slice(1))
	};

	mkdir heroku
	cd heroku/
	virtualenv --no-site-packages env
	source env/bin/activate
	pip install bottle gevent
	pip freeze > requirements.txt

	cat >app.py <<EOF
	import bottle
	import os

	var Options = React.createClass({
	savePrice: function(price) {
	localStorage.setItem("Price", price);
	},

	_renderOptions: function() {
	return this.props.data.map(function(option) {
	return (
	<Option
	price={option.price}

	/*
	* Minimal classList shim for IE 9
	* By Devon Govett
	* MIT LICENSE
	*/


	if (!("classList" in document.documentElement) && Object.defineProperty && typeof HTMLElement !== 'undefined') {
	Object.defineProperty(HTMLElement.prototype, 'classList', {
	get: function() {

	// validation mixin
	var validation = {
	getDefaultProps: function () {
	return {
	validate: []
	}
	}
	, hasErrors: function () {
	var errors = []

	// Use Gists to store code you would like to remember later on
	console.log(window); // log the "window" object to the console

	// bootstrap
	PX.app = new PX.App();
	Backbone.history.start();