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


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

3rdstop.rar


One job : Templating

Inspiration : JSX from React


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({
    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

XO.js

By Scott Tolksdorf

Made with Slides.com

XO.js

  • 621

More from Scott Tolksdorf