�ݺ�ߣ

Bit.ly/nnugspa
Instagram #nnug

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

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

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

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

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

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

KISS

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

11

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

<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

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

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
};
});

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

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

<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

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();
};

SignalR

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

20

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

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"

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

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

Takk for meg!
Ta gjerne kontakt hvis du lurer på noe.

@magnusg
magnus.green@bouvet.no

27

�ݺ�ߣ

The Client Strikes Back

More Related Content

Similar to The Client Strikes Back (20)

The Client Strikes Back

Editor's Notes