1. Bit.ly/nnugspa
Instagram #nnug

2. MAGNUS GREEN (@magnusg)
Reise Film
Rock n’ Roll
Kaffe
www
Konsulent
Gaming
TDD .net
JavaScript
Clean Code Øl
Smidig
Sneakers
New York
Master of Information Technology

3. BOUVET
54 26'43" S 3 21'46" E
meetup.com/Bouvet-Oslo-Tech

5. Hva skal vi gjennom?
• Hva er en Single Page Application?
• Hvorfor Single Page Application?
• Hvordan lage en Single Page Application?
• Bootstrap – HTML5 UI rammeverk
• RequireJS – Modularisert JavaScript
• Knockout – MVVM rammeverk
• SignalR – Real-time async signaling
• Deploy som en Azure web-site
• Oppsummering

6. Single Page Web Application
• Applikasjon != Webside
• Data oppdateres når det er
nødvendig
• Data oppdateres der hvor det
er nødvendig
• Tilstand og navigasjon
6

7. Client Server Data store
Tradisjonell web
Display HTML Authentication
Decorative JS Authorization
Ajax for HTML Validation Store data
Business logic Retrieve data
Generate HTML Business logic
Client Server Data store
Ajax for JSON Authentication
Business Logic Authorization
SPA
Generate HTML Validation Store data
Generate JSON Retrieve data
Kilde:
Single page web applications, Michael S. Mikowski og Josh C.
Powell
7

10. Forvirret og sint bruker
(Dårlig steming) Blid og fornøyd bruker
(God stemning)

11. KISS
• SPA i sin enkleste form med jQuery
– http://jsfiddle.net/magnusg/xCDR5/
• Litt mer avansert med flere rammeverk
– http://bit.ly/nnugspa
11

12. Twitter Bootstrap
• Hva?
– Front-end rammeverk fra skaperne av
twitter
• Hvorfor?
– Rask vei til å få opp et godt rammeverk /
prototyp for en SPA eller webside.
– Lett å style om i etterkant
12

13. <ul class="nav nav-tabs">
<li class="active"> Aktiverer funksjonalitet via
<a href="#home" data-toggle="tab"> data attributter, ingen
<i class="icon-home"></i>Home JavaScript her!
bootstrap icon
</a>
</li>
<li><a href="#map" data-toggle="tab">Map</a></li>
<li><a href="#statistics" data-toggle="tab">Statistics</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="home">
@RenderPage("Views/home.cshtml")
</div>
<div class="tab-pane" id="map">Map</div>
<div class="tab-pane" id="statistics">Statistics</div>
</div>
bootstrap css tab pane
13

14. RequireJS
• Hva?
– Dependency injection for JavaScript
• Hvorfor?
– JavaScript-koden deles opp i moduler
– Lettere å få til SRP og renere kode
– Tar hånd om rekkefølgen på lastingen av
JavaScript moduler
14

15. Modulnavn Avhengighet
define('dataservice.images', ['ajaxhelper'], function (ajaxhelper) {
var getImages = function (callbacks, searchTerm) {
var search = { searchTerm: searchTerm };
var data = search.searchTerm ? search : searchTerm;
return ajaxhelper.ajaxRequest('api/images', data)
.done(callbacks.success)
.fail(callbacks.error);
};
return {
getImages: getImages Revealing module
};
});

16. define('someservice', ['jquery', 'dataservice.images'],
function($, dataService) {
$.when(
dataService.getImages(
{
success: function(data) {
},
error: function(err) {
}
}))
.then(function() {
//Do something clever
});
});

17. KnockoutJS
• Hva?
– MVVM (Model-View-ViewModel) rammeverk
– Data-binding for JavaScript
• Hvorfor?
– Oppdatering av UI når og hvor det er behov
– Applikasjonstilstand
– Renere markup og JavaScript
– Klart skille mellom markup og JavaScript
17

18. <div class="modal-body">
<p></p>
<img data-bind="attr: { src: image_standard_res }"/>
<div class="heart-image">
<strong data-bind="text:likes"></strong>
</div>
<div data-bind="foreach:tags">
<span class="label label-inverse" data-bind="text:$data"></span>
</div>
</div>
var Image = function () {
var self = this;
self.caption = ko.observable(); foreach-binding
self.user = ko.observable();
self.userProfilePicture = ko.observable();
self.userRealName = ko.observable();
self.link = ko.observable();
self.image_standard_res = ko.observable();
text binding
self.likes = ko.observable();
self.tags = ko.observableArray();
};
18

19. click binding – bundet mot view model
<div data-bind="foreach:images"> binding handler, egendefinert binding
<div class="imageTile span4" data-bind="simplePopup:caption">
<a href="#imagesModal" data-toggle="modal" data-bind="click:
$root.setCurrentImage">
<img data-bind="attr: { src: image_standard_res }"/>
</a>
</div>
</div>
var Image = function () {
var self = this;
self.caption = ko.observable();
self.user = ko.observable();
self.userProfilePicture = ko.observable();
self.userRealName = ko.observable();
self.link = ko.observable();
self.image_standard_res = ko.observable();
self.likes = ko.observable();
self.tags = ko.observableArray();
};

20. SignalR
• Hva?
– Sanntidskommunikasjon mellom server og klient
• Hvorfor?
– Sanntidsoppdatering av klienter
– Meldinger om endringer i data eller endringer i andre
klienter
20

21. +
=
AWESOME
21

22. Pass på!
• JavaScript minnehåndtering
• Ikke rør DOM hvis du ikke må!
• Lær deg JavaScript!
• Bruk Chrome debugging og
performance tools (Firebug /
Dragonfly)
22

23. Oppsummering
• SPA = RIA = RWA?
• SPA er applikasjoner, ikke web-sider
• Bedre brukeropplevelse på flere plattformer
• JavaScript kan være rent og
vedlikeholdbart
• Web browseren som plattform har kommet
for å bli!
23 22. august 2012 Bunntekst – endres/slettes med "Sett inn, Topptekst og bunntekst"

24. 24

25. Do you haz teh codez?
• Websiden:
– http://bit.ly/nnugspa
• SPA Starter
– https://github.com/magnushg/SinglePageAppStarter
• Awsome SPA
– https://github.com/magnushg/AwesomeSPAReboot
25

26. Ressurser
• http://twitter.github.com/bootstrap/index.html
• http://requirejs.org/
• http://www.knockmeout.net/
• http://knockoutjs.com/
• https://github.com/SignalR/SignalR
• http://addyosmani.com/blog/
• http://www.johnpapa.net/building-single-page-apps-with-
knockout-jquery-and-web-api-ndash-the-story-begins/
• http://chutzpah.codeplex.com/
• http://javascriptjabber.com/
• http://responsinator.com/
26

27. Takk for meg!
Ta gjerne kontakt hvis du lurer på noe.
@magnusg
magnus.green@bouvet.no
27