Presentasjon holdt på MVP Live 2012. Kode finnes her: https://github.com/fossmo/todolist

1. Javascript tar hevn
Pål Fossmo
@fossmo
pal.fossmo@bekk.no

2. De som har begravet Javascript må tenke om igjen.

3. AGENDA
Hvorfor lære Javascript?
Rammeverk
Nodejs og Windows Azure

4. 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

6. Hvorfor lære Javascript?

8. Nytt
webprogrammerings
rammeverk

10. DATABASE SERVER KLIENT
JAVASCRIPT

13. OVERBEVIST?

14. RAMMEVERK

15. Prosessering MVC/MVVM
Spine.js “One page”
JSON JSON

16. Gjør deg effektiv!
MVVM:
Model  datastruktur
ViewModel  presentasjon Holder orden på endringer
View  viser data i viewmodellen oppdater
GUI.
Alle Endringer “trackes” med:
nettlesere ko.observable(<type>)
Ko.observableArray(<array>)
Declarative binding
Bruker “data-bind”
for å binde til
modellen Utvidbar
Bindinger:
visible, text, html, css
, style, attr, template
click, event, submit,
enable, disable, valu Observable
Knockoutjs.com
e, checked, options, (Silverlight)
selectionOptions, uni
queName

17. TODO

19. Opprett modellen
TODO
function Task(description, minutes) {
var self = this;
self.description = ko.observable(description);
self.minutes = ko.observable(minutes);
};

20. Opprett modellen
function TasksViewModel() {
var self = this;
TODO
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) };
};

21. Opprett HTML
TODO
<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>

22. Legg til binding
TODO
<script type=“text/javascript”>
ko.applyBindings(tasksViewModel);
</script>

23. DEMO

24. En “gammel” og gjennomprøvd teknologi er ofte det beste!
NODE.JS har tatt den “gamle” teknologine til et nytt miljø

25. 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

26. Nodejs.org
NPM
I/O asyncronous
(search.npmjs.org)
Community Express.js
Microsoft
(Node.js Developer Windows Azure
Center)
IISNode

27. Tomasz Janczuk
Microsoft
Process Integrert med IIS
managment sitt konfigurasjons
system
Side-om-side med
andre process.env.PORT
applikasjoner IISNODE
Oppdatere
Skalering over
automatisk når
flere kjerner
skript filer endres

28. DEMO

29. Oppsummering
Javascript
gjennom alle lag! Knockout.js
Windows 8 Effektiv
TV
IISNode Cloud9
Azure

30. TAKK FOR MEG!
Pål Fossmo, BEKK
@fossmo
pal.fossmo@bekk.no