OPTIMERA STHLM! Stefan Pettersson

Faster websites with AJAX REST and architecture Optimera STHLM 2010-05-31

Stefan Pettersson

Stefan Pettersson @stpe stefpet@gmail.com http://stpe.se

HTML CSS JavaScript

<a href=”#” HTML onclick=”globalPollution();” style=”font-size: 666px”> CSS JavaScript

<a href=”#” HTML onclick=”globalPollution();” style=”font-size: 666px”> CSS JavaScript Ugly

<a href=”#” HTML onclick=”globalPollution();” style=”font-size: 666px”> CSS JavaScript Ugly WebServer DB

<a href=”#” HTML onclick=”globalPollution();” style=”font-size: 666px”> CSS JavaScript Ugly WebServer HEAVY Java? DB

<a href=”#” HTML onclick=”globalPollution();” style=”font-size: 666px”> CSS JavaScript Ugly WebServer Weird .NET? DB

<a href=”#” HTML onclick=”globalPollution();” style=”font-size: 666px”> CSS JavaScript Ugly WebServer Chaotic PHP? DB

<a href=”#” HTML onclick=”globalPollution();” style=”font-size: 666px”> CSS JavaScript Ugly WebServer Maybe MVC...? DB

View Model Controller

C C C C C

V V V V V V V V C C C C C

V V V V V V V V V V C C C C C

V V V V V V V V M M V M M M M M V M M M C C C C C

V V V V V V V V DAO M DAO M V M M DAO M M M V DAO DAO M M DAO M DAO DAO DAO DAO C C C C C

V V V V V V V V PM PM PM PM DAO M DAO M V PM PM PM M M PM DAO M M M V DAO DAO M PM M DAO M DAO PM DAO DAO DAO C C C C C

Separation of concerns

Presentationslogik i browsern

Separera data från ﬂöde

AJAX + REST

Enklare arkitektur

Flexiblare arkitektur

Snabbare sidor

HTML CSS JavaScript RESTful Web Web Server Service DB

HTML CSS JavaScript Template RESTful Web Web Server Service DB

HTML CSS JavaScript Template Data RESTful Web Web Server Service DB

Template?

The fundamentalist way...

<!DOCTYPE html> <html> <head> <title>ThinServer</title> <script src=”bootstrap.js”></script> </head> <body> </body> </html>

Representational State Transfer

No bullshit web services!

http://server.com/item/17/

XMLHttpRequest // get XHR object (older IE needs workaround) var xhr = new XMLHttpRequest(); xhr.open('GET', '/item/17/', true); xhr.onreadystatechange = function(event) { if (xhr.readyState == 4) { if (xhr.status == 200) { console.log(xhr.responseText); } else { console.log("Fail"); } } }; // initiate request xhr.send(null);

Same Domain Policy

{“data”: [1, 2, 3]}

callback({“data”: [1, 2, 3]});

callback({“data”: [1, 2, 3]}); <script type=”text/javascript” src=”http://d.com/item/17/?callback=callback”> </script>

Browser Data RESTful Web Service

Browser Data RESTful Web Service Database

Browser Data RESTful Web Service Enterprise SOA Producers Consumers Queues Buses

Browser Data RESTful Web Service NoSQL

Browser Data RESTful Web Service

Internal System Data RESTful Web Service

Web Server Data RESTful Web Service

Mobile Data RESTful Web Service

One more thing...

document.write is evil

Friendly IFrame

http://blogg.aftonbladet.se/dev/

Stefan Pettersson CEO @ Expansive Worlds AB http://www.expansiveworlds.com

OPTIMERA STHLM! Stefan Pettersson

by .SE (Stiftelsen för Internetinfrastruktur)

Accessibility

Categories

Upload Details

Usage Rights

2 Embeds 30

Statistics

OPTIMERA STHLM! Stefan Pettersson Presentation Transcript

http://www.slideshare.net	25
http://www.techgig.com	5