JavaScript UI Architecture: Be all that you can be

JavaScript UI Architecturebe all that you can be

kyle simpson@getifyhttp://getify.me

#jsui #hbjs

“everyone is entitled to the their own (wrong) opinion.”

--unknown

how i(we) got here

front-end (html/css)

?back-end (logic, db)

front-end (html/css)

“middle-end”

back-end (logic, db)

(ui architecture)

ui architecture:how the “server” builds & delivers the presentation layer to the “client”

+how communication happens between the presentation layer and the application

warning: highly offensive material


breaking news: javascript is a first-class language now.

javascript is just soking awesome!


javascript is better at ui archiecture than your current application.

javascript doesn’t have to run in the browser to be so awesome.

what we’re NOT talking about

javascript frameworks application

platformsall-in-one anything

css {display:cool;}<marquee>

<html>

what we ARE talking about

raw javascript (browser & server)

an alternate “design pattern” to MVC modular everything

howto: make the ui really work for you

templating

DRY

what problems do we need to solve?

MVCuh oh!

“i like ‘mvc’, I just don’t like the ‘m’…”

M + C

<?phpif ($user->IsLoggedInAndCanPublish()) { $user->publish($doc->get()); }?>

M + V<?phpif (user->IsLoggedInAndCanPublish()) {?>

Welcome back!<?php}?>

V + C<?phpif (user->IsLoggedInAndCanPublish()) {

$output = $template->create(“loggedin.tmpl”)->html();$ouput .= $template->create(“footer.tmpl”)->html();return $output;

}?>

data validation

url routing

so how can we solve these problems?

MVC (in the browser)

? MVC (on the server)


iPad MVC (on the server)


MVC (on the server)


CVC MVC (on the server)

CVCclient-view-controller

everything is a client of everything

else

CVC

data should only be data, not methods

or behavior

CVC

presentation templates should

not have any application logic

CVC

code should be able to run anywhere

CVC

whatever application framework you choose (.NET, Java, RoR, PHP, etc), CVC sits on top of

your application

client(s)everything is module and a

client of everything else

view(s)HandlebarJS

HandlebarJStemplating engine written in javascript that takes simple text templates and combines with json data to output presentation views.

controller(s)also javascript

url routing, data validation, etc

ask more questions about your architecture…

…be all that you can be!

more info

kyle simpson@getifyhttp://getify.me

http://github.com/getify/HandlebarJShttp://speakerrate.com/talks/2062http://www.slideshare.net/shadedecho

JavaScript UI Architecture: Be all that you can be

Technology

Transcript of JavaScript UI Architecture: Be all that you can be