Javascript tar hevn

Pål Fossmo

@fossmo

pal.fossmo@bekk.no

De som har begravet Javascript må tenke om igjen.

AGENDA

Hvorfor lære Javascript?

Rammeverk

Nodejs og Windows Azure

Hvorfor lære Javascript?

JavaScript is a prototype-based scripting

language that is dynamic,

weakly typed and has first-class functions. It is a

multi-paradigm language,

supporting object-oriented, imperative, and

functional programming styles.

Wikipedia.com

Hvorfor lære Javascript?

Nytt

webprogrammerings

rammeverk

JA

VA

SC

RIP

TK

LIE

NT

SE

RV

ER

DA

TA

BA

SE

OVERBEVIST?

RAMMEVERK

“One page”

Prosessering

Spine.js

MVC/MVVM

JSONJSON

MVVM:

Model datastruktur

ViewModel presentasjon

View viser data

Alle

nettlesere

Declarative binding

Bruker “data-bind”

for å binde til

modellen

Bindinger:

visible, text, html, css

, style, attr, template

click, event, submit,

enable, disable, valu

e, checked, options,

selectionOptions, uni

queName

Holder orden på endringer

i viewmodellen oppdater

GUI.

Endringer “trackes” med:

ko.observable(<type>)

Ko.observableArray(<array>)

Utvidbar

Observable

(Silverlight)Knockoutjs.com

Gjør deg effektiv!

TODO

function Task(description, minutes) {

var self = this;

self.description = ko.observable(description);

self.minutes = ko.observable(minutes);

};

TODO

Opprett modellen

function TasksViewModel() {

var self = this;

self.tasks = ko.observableArray([

new Task("Forstå hvordan knockoutjs fungerer.", "25"),

new Task("Spise lunsj", "60")

]);

self.totalMinutes = ko.computed(function(){

var total = 0;

$.each(self.tasks(), function(){ total +=

parseInt(this.minutes()) })

return total;

});

self.removeTask = function(task) { self.tasks.remove(task) };

};

TODOTODO

Opprett modellen

<div data-bind="foreach: tasks" class="tasks">

<div data-bind="text: description" class="text"></div>

<div data-bind="text: minutes" class="number"></div>

<div class="tools">

<a href="#" data-bind="click: $parent.removeTask"></a>

</div>

TODOTODO

Opprett HTML

<script type=“text/javascript”>

ko.applyBindings(tasksViewModel);

</script>

TODOTODO

Legg til binding

DEMO

En “gammel” og gjennomprøvd teknologi er ofte det beste!

NODE.JS har tatt den “gamle” teknologine til et nytt miljø

Nodejs og Azure node.js

Why bother with node at all? (…) It uses a

very fast JavaScript engine called V8, but

more importantly its I/O is asynchronous

and event-driven which contrasts with

typical synchronous code.

Scott Hanselman,

Microsoft Principal Program Manager

I/O asyncronous

Community

Microsoft(Node.js Developer

Center)

IISNode

Windows Azure

Express.js

NPM(search.npmjs.org)

Nodejs.org

IISNODE

Process

managment

Side-om-side med

andre

applikasjoner

Skalering over

flere kjerner

Oppdatere

automatisk når

skript filer endres

process.env.PORT

Integrert med IIS

sitt konfigurasjons

system

Tomasz Janczuk

Microsoft

DEMO

Oppsummering

Javascript

gjennom alle lag!

Windows 8

TV

Knockout.js

Azure

Effektiv

Cloud9IISNode

Pål Fossmo, BEKK

@fossmo

pal.fossmo@bekk.no

TAKK FOR MEG!