hey!

Let's build a MV* framework.

Adventures in Javascript minimalism.

This guy

eml : scott.tolksdorf@gmail.com

github : stolksdorf

Been codin' a long time

Was front-end at Sweet Tooth

Now front-end at Thalmic

Why even do this?

What's out there

Angular - New kid on the block

Knockout - Data bindings for everyone

Backbone - Gets out of your way

Ember - Components are {{ cool }}

what do we need?

Inheritance

Event-y-ness

DOM Bindings

Templating (of some sort)

Collections of Data

URL Routing

focus up!

Fewest Line of Code

Read-ability

Tweak-ability

Be a tool, not a framework

Use POJOs where possible

Code in HTML === Bad

Keep dev console sane

First stop: archetype

Two jobs : Inheritance & Events

Archetype.js

var Sloth = archetype.extend({
    initialize : function(name){
        this.name = name;
    }, 
    numOfToes : 2, 
    nap : function(){ ... }, 
    eat : function(food){ ... } 
});

var mySloth = Sloth.create("Woodford"); console.log("Hello " + mySloth.name);

2nd First stop

Event junk

var napEventId = sloth.on('nap', function(adjective){
    console.log('The sloth is taking a ' + adjective + ' nap!');
});

sloth.trigger('nap', 'aggressive');

2nd stop: Exoskeleton

Time to MV*Whatevz

Three jobs : Views, Models, Routing

Inspiration : Backbone.js

XO.js

3rdstop.rar

One job : Templating

Inspiration : JSX from React

Dom.js

DOM.div({class:'cool_cssClass'},
    "Hello ", 
    DOM.span({style:"font-size:3em"}, 'World')
);

You know the drill

Styling with Style (and JSON)

Inspiration : Less

Css.js

css({
    body: {
        marginTop: "20px",
        width: "100%",
        p: {
            color: "#BADA55"
        }
    }
});

LEt's see it in action

Thanks!

scott.tolksdorf@gmail.com

github : stolksdorf

Projects you saw today:
Archetype.js

XO.js

Dom.js

Css.js