My JSHarmony Profile

GOTO: The '80s

OOPs

Fat, Thin, & Smart

An Original HTTPSTER

• XMLHTTP - 1998 
• AJAX - 2005

Rise of the Web App

Technologist

noun   [tek-nol-uh-jist]

A person who uses existing technology to solve practical problems.

  ...

History of The Web App

Client / Server

Processing = Server

Display = Client

Client / Server =

SEQUENCE<?php
$t=date("H");
if ($t<"20")
  {
  echo "Have a good day!";
  }
?>
SELECTION<cffunction name="concatinate" access="public" output="false" returnType="string" displayname="">
       <cfargument name="firstName"    required="true"/>
       <cfargument name="lastname"     required="false"/>

       <cfreturn arguments.firstName & " " & arguments.lastName>
</cffunction>

REPETITION<% 
For i = 0 to 10 Step 2 'use i as a counter
 response.write("The number is " & i & "<br />")
Next
%>

Hardware + Bandwidth 

Set a Paradigm

"Those who cannot remember the past are condemned to repeat it." 

I've got news for Mr. Santayana: we're doomed to repeat the past no matter what. That's what it is to be alive.

Kiddies, Please!

Recurrence

Structured Program Theorem

Sequence, Selection, Repetition

Each New Technology = A Return To Fundamentals

Meanwhile...

Settle, Farm, Research

Alonzo Church - Lambda Calculus--- 1936
Xerox PARC - Smalltalk -- OOP, MVC --'70s & '80s
MVVM (Presentation)- Microsoft & Martin Fowler  --  2004
Design Patterns - Gang of Four -- OOPSLA - 1994

The Evolution of MVC

Hardware + Bandwidth

Language Specs

JavaScript's Profile

Idols

Syntax , Conventions

(Not why it's named JavaScript btw...)

RegEx

Pedigree

 

Self

Pedigree

Scheme

-Lambda  - Anonymous Functions, Closure 

-Functions as First-Class Citizens

-Loose/Dynamic Typing

Personality

Profile Review

Personality

Prototypal

Lambda / Closure

Loose Typing

Dynamic Objects

Asynchronous

Functional + Imperative

Past Relationships

Structural, Client/Server Technology

Movement to MV*

Movement to Imperative

Don't Talk About Kids

Be Prototypal

var animal = function(){};
animal.legs = 4;
var dog = new(animal);
var penguin = new(animal);penguin.legs = 2;alert(animal.legs); // 4
alert(penguin.legs); // 2
alert(dog.legs); // undefined

Adjust the prototype...

animal.prototype.legs = 4;
alert(dog.legs); // 4

Or BE the prototype:

var animal = function(){};
animal.legs = 4;
var dog = Object.create(animal);alert(dog.legs); // 4 

Keep Secrets

Use Closure

var Umpire = function(){
	var strikes=0, balls=0, outs=0, innings=1;

	function _counter(){
		return this;
	}

	_counter.ball = function(){
		balls++;
		if (balls>=4) balls = strikes = 0;
		return _counter;
	}

	_counter.strike = function(){
		strikes++;
		if (strikes>=3) this.out();
		return _counter;
	}

	_counter.out = function(){
		outs++;
		strikes = balls = 0;
		if (outs>=6) this.inning();
		return _counter;
	}

	_counter.inning = function(){
		innings++;
		strikes = balls = outs = 0;
		if (innings>=9) innings = 1;
		return _counter;
	}

	_counter.score = function (){
		return 'Inning#:'+innings+' --- S:'+strikes+' B:'+balls+' O:'+outs;
	}

	return _counter;
} 

var ump1 = new Umpire();
ump1.strike().strike().ball().strike().strike().ball().ball(); // chained functions
alert ( ump1.innings ); //undefined
alert ( ump1.score() ); // 'Inning#1 --- S:1 B:2 O:0' 

Get JS to do the hard stuff

Use Abstractions!

Polyfills

Don't call it a trailer!

RequireJS

require(['jquery', 'canvas', 'app/sub'],
function   ($,        canvas,   sub) { //this is a callback function
    //jQuery, canvas and the app/sub module are all
    //loaded and can be used here now.
});

//Inside file my/shirt.js:
define({
    color: "black",
    size: "unisize"
});

http://requirejs.org

Play the Field

Don't get comfortable

Remember the Ouroboros!

MV* Platforms

Meteor  - http://meteor.com

Backbone - http://backbonejs.org

Angular - http://angularjs.org

Ember - http://emberjs.com

Derby - http://derbyjs.com

Templating

Graphics

AMD 

RequireJS - http://requirejs.org

New Ground

Brackets - http://brackets.io

Adobe Edge - http://html.adobe.com/

Node - http://nodejs.org

Meteor - http://meteor.com

PhoneGap - http://phonegap.com

Yeoman - http://yeoman.io

Web Components - http://bit.ly/WebComponents

Polymer - http://bit.ly/PolymerProject

Chrome Experiments - http://www.chromeexperiments.com/