Webbprogrammering och interaktivitet

AJAX, CORS ,jQuery, PaaS, Projektet

TDP013

Anders Fröberg Institutionen för Datavetenskap (IDA)

Innan AJAX – Ett synkront webb

2

Server

1. Användaren klickar länk, formulär, bild etc

2. Anrop till servern sker

3. Servern agerar på förfrågan

4. Servern returnerar svar

5. Webbläsaren laddar om hela sidan

Användaren måste vänta på svar, kan inte göra något annat.

Med AJAX – Ett Asynkront webb

3

Server

1. Användaren klickar länk, formulär, bild etc

2. Anrop till servern sker

3. Servern agerar på förfrågan

4. Servern returnerar svar

5. Webbläsaren laddar om delar av sidan

• Användaren kan göra annat i väntan på svar från servern. • Endast de påverkade delarna av sidan ändras.

Klicka, dra, byt bild, skriv vidare, etc. användaren kan fortsätta använda webbplatsen

AJAX

• Hela processen styrs av JavaScript

• Görs lite olika beroende på vilken webbläsare som används

• Oftast så använder man ett färdigt bibliotek (t ex jQuery) för att använda AJAX så man slipper bry sig om detaljerna för olika webbläsare

• Det som kommer tillbaka från servern (istället för en helt ny sida) kan variera, men oftast JSON eller XML (i denna kursen använder vi bara JSON)

4

AJAX – Skapa XMLHttpRequest

var xmlhttprequest; if(window.XMLHttpRequest) { //IE7+, Firefox, Chrome, Opera, Safari

xmlhttprequest = new XMLHttpRequest();

} else { //IE6, IE5 xmlhttprequest = new ActiveXObject(”Microsoft.XMLHTTP”);

}

5

AJAX – Skicka request

var xmlhttprequest; if(window.XMLHttpRequest) { //IE7+, Firefox, Chrome, Opera, Safari xmlhttprequest = new XMLHttpRequest(); } else { //IE6, IE5 xmlhttprequest = new ActiveXObject(”Microsoft.XMLHTTP”); }

xmlhttprequest.open(”GET”, http://www.example.com/service, true);

xmlhttprequest.send();

6

true gör anropet asynkront

AJAX – Skicka request med GET data

var xmlhttprequest; if(window.XMLHttpRequest) { //IE7+, Firefox, Chrome, Opera, Safari xmlhttprequest = new XMLHttpRequest(); } else { //IE6, IE5 xmlhttprequest = new ActiveXObject(”Microsoft.XMLHTTP”); }

xmlhttprequest.open(”GET”, http://www.example.com/service?a=b, true);

xmlhttprequest.send();

7

AJAX – Skicka request med POST data

var xmlhttprequest; if(window.XMLHttpRequest) { //IE7+, Firefox, Chrome, Opera, Safari xmlhttprequest = new XMLHttpRequest(); } else { //IE6, IE5 xmlhttprequest = new ActiveXObject(”Microsoft.XMLHTTP”); }

xmlhttprequest.open(”POST”, http://www.example.com/service, true);

xmlhttp.setRequestHeaders(”Content-Type”, ”application/x-www-form-urlencoded”); xmlhttprequest.send(”a=b”);

8

AJAX – Response

var xmlhttprequest; if(window.XMLHttpRequest) { //IE7+, Firefox, Chrome, Opera, Safari

xmlhttprequest = new XMLHttpRequest();

} else { //IE6, IE5

xmlhttprequest = new ActiveXObject(”Microsoft.XMLHTTP”); }

xmlhttprequest.open(”GET”, http://www.example.com/service?a=b, true);

xmlhttprequest.send();

xmlhttprequest.onreadystatechange = function() { if(xmlhttprequest.readystate == 4 && xmlhttprequest == 200) { document.getElementById(”content”).innerHTML = xmlhttprequest.responseText; } }

9

AJAX - jQuery

10

var callback = function(data) {

$(”#content”).text = data; }

$.ajax({

url: ”http://localhost:8888/”, type : ”POST”, data : {

name : ”Marcus”,

filter : ”Employee”

},

success : callback

});

Titta i dokumentationen för fler alternativ när man använder jQuery’s AJAX bibliotek

AJAX Demo

11

Socket Example

12

Cross-Domain Scripting & CORS

• En restriktion som finns på AJAX är att anropen måste göras till exakt samma domän som klienten kör på. Finns er sida på http://example.com så får man endast anropa tjänster på http://example.com/…

• Anledningen till denna restriktion är av säkerhetskäl, och den intresserade kan läsa om cross-domain scripting

• För att komma runt detta har man börjat använda CORS (Cross-Origin Resource Sharing) där servern kan ge rättigheter åt olika domäner. (OBS fungerar inte i alla webbläsare)

• Vi kommer inte fördjupa oss i alla detaljer kring detta, utan endast bry oss om hur vi implementerar det

13

CORS – OPTIONS

• Innan GET/POST anropet skickas ett OPTIONS anrop till servern

• Om rätt headers returneras så tillåter webbläsaren att man genomför GET/POST

• Ett relativt ”snyggt” sätt att göra det på, som minimerar allt för mycket kodförändingar i existerande system

14

CORS – Response headers

var headers = {}; headers[”Access-Control-Allow-Origin”] = ”*”;

headers[”Access-Control-Allow-Methods”] = ”POST, GET, OPTIONS”;

res.writeHead(200, headers); res.end();

15

I Node.js så lägger man till detta på alla utgående ”response” som man vill göra tillgänliga.OBS: Vi väljer att sätta ”*” vilket tillåter alla klienter att anropa, det kanske man inte vill göra i enproduktionsmiljö.

CORS – Response headers

Kan vara smart att göra något för att snabba upp processen:

if(req.method == ”OPTIONS”) { var headers = {}; headers[”Access-Control-Allow-Origin”] = ”*”; headers[”Access-Control-Allow-Methods”] = ”POST, GET, OPTIONS”; res.writeHead(200, headers); res.end(); } else { //Om det är POST, GET etc så gör något annat lite mer avancerat som tar tid, //men headers måste ändå sättas! }

16

CORS – Response headers

Express.js

app.use(function(req, res, next) { res.header("Access-Control-Allow-Origin", "*"); res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept"); next(); });

17

Utan CORS

• Ett alternativ är att använda en proxy som hanterar alla anrop till domänen (detta gör vi inte i denna kurs), att använda en proxy kan ha andra fördelar så som ”caching” och att det fungerar med alla webbläsare.

18

Proxy

DNSwww.example.com

Anropar www.example.com/index.html

Anropar www.example.com/service

Apacheserver

Django server

Anropen sker till samma domännamnså det tillåts av alla webbläsare. Men proxyn omfördelar till olika servrar.

Nu lite fluff

• Hur kör vi vår app

19

Vad är (ett) problem(en)

• Skalbara applikationer • Hur hanterar vi framtida behov/kostnader ? • Vem ska köpa och installera våra servrar ?

• Vem ser till att underhålla och driftsätta våra system?

20

Traditional Infrastructure Model

Forecasted Infrastructure Demand

Time

Capital

Acceptable Surplus

Forecasted Infrastructure Demand

Surplus

Time

Capital

Actual Infrastructure Demand

Time

Capital

Unacceptable Surplus

Surplus

Time

Capital

Unacceptable Deficit

Deficit

Time

Capital

Utility Infrastructure Model

Actual Infrastructure Demand

Time

Capital

Cloud Flavors?

• SaaS – Software as a Service

• IaaS – Infrastructure as a Service • PaaS – Platform as a Service • BaaS – Backend as a Service • (DaaS – Desktop as a Service)

28

What is Software as a Service? (SaaS)

• SaaS is a software delivery methodology that provides licensed multi-tenant access to software and its functions remotely as a Web-based service.

• Usually billed based on usage • Usually multi tenant environment

• Highly scalable architecture

SaaS Examples

Infrastructure as a Service (IaaS)

• IaaS is the delivery of technology infrastructure as an on demand scalable service

• Usually billed based on usage • Usually multi tenant virtualized environment

• Can be coupled with Managed Services for OS and application support

IaaS is not Managed Hosting

• Traditional managed hosting is a form of web hosting where a user chooses to lease entire server(s) housed in an off-site data center.

• Term based contracts based on projected resource requirements

IaaS Examples

Platform as a Service (PaaS)

• PaaS provides all of the facilities required to support the complete life cycle of building and delivering web applications and services entirely from the Internet.

• Typically applications must be developed with a particular platform in mind

• Multi tenant environments

• Highly scalable multi tier architecture

PaaS Examples

Deployment Models

• Public cloud • Public cloud (off-site and remote) describes cloud computing where resources are dynamically provisioned on

an on-demand, self-service basis over the Internet, via web applications/web services, open API, from a third-party provider who bills on a utility computing basis.

• Private cloud • A private cloud environment is often the first step for a corporation prior to adopting a public cloud initiative.

Corporations have discovered the benefits of consolidating shared services on virtualized hardware deployed from a primary datacenter to serve local and remote users.

• Hybrid cloud • A hybrid cloud environment consists of some portion of computing resources on-site (on premise) and off-site

(public cloud). By integrating public cloud services, users can leverage cloud solutions for specific functions that are too costly to maintain on-premise such as virtual server disaster recovery, backups and test/development environments.

• Community cloud • A community cloud is formed when several organizations with similar requirements share common

infrastructure. Costs are spread over fewer users than a public cloud but more than a single tenant.

TDP013 in a nutshell

2

I högskoleförordningen står det under mål för kandidatexamina bland annat att:

För kandidatexamen skall studenten - visa förmåga att söka, samla, värdera och kritiskt tolka relevant information i en problemställning samt att kritiskt diskutera företeelser, frågeställningar och situationer, - Högskoleförordningen (1993:100)

Projektet

3

• Projektet genomförs i par enligt webreg.

• För godkänt skall de grundläggande kraven vara uppfyllda.

• För betyg 4 finns ytterligare ett krav med WebSockets.

• För betyg 5 finns ytterligare två krav (webworkers och ett valbart).

Projektet - Kortfattat

4

• Det skall finnas en webbplats som är navigerbar och använder antingen Bootstrap,jQuery UI , eller liknande för layout. Webbplatsen skall använda sig av god interaktionsdesign och vara användarvänlig. Beslut kring interaktion och design skall grundas i relevant dokumentation eller informationskällor.

• Testning av användargränssnitt skall ske med Selenium, testning av backend skall ske med Mocha.

• Endast den nya informationen som efterfrågas av användaren skall uppdateras, minsta möjliga del av webbplatsen skall laddas om när användaren efterfrågar ny information.

• Användare skall kunna registrera sig, logga in på en personlig sida samt logga ut. • Användare skall kunna söka efter andra användare. • Användare skall kunna lägga till andra användare som "vänner". • Användare skall kunna se en lista över sina vänner. • Användare skall kunna se sina vänners sidor. • Användare skall kunna posta meddelanden på sina vänners sidor.

Projektet – Högre betyg

5

Krav - Betyg 4

Möjlighet för vänner att chatta med varandra i realtid. Detta skall ske med HTML5 WebSockets, och socket.io plugin till Node.js

Krav - Betyg 5 I JavaScript finns inte trådar, och förr har man använt timeouts för att bygga funktioner som behövde detta. I HTML5 standarden introduceras WebWorkers. Använd WebWorkers för att automatiskt uppdatera meddelanden på den sida man tittar på.

Välj en av nedanstående: •Möjlighet att ladda upp bilder till sin sida samt låta vänner bläddra sig igenom dessa. •Möjlighet att ladda upp video till sin sida samt låta vänner titta på dessa. •Vidareutveckla chatten från betyg 4 med möjlighet för gruppkonversationer (mer än 2 personer).

Projektet – Redovisning

6

Skriftlig redovisning – Som i laborationerna

Muntlig redovisning Varje student ska förbereda en 15 minuters screencast där både systemet och tekniken bakom demonstreras. Den som ser filmen ska kunna se vad för system ni har byggt och hur ni byggt det.

jQuery UI

• Ett JavaScript bibliotek (innehåller lite CSS och bilder) som ger utvecklare standard komponenter för utveckling.

7

AngularJs

43

React.js

44

Knockout.js

45

Node.js

• Ramverk • Express • Derby

• Meteor • Flatrion • SocketStream • SailJS • Tower • Mojito • RailwayJS • Många fler

46

Bootstrap

• Ett CSS bibliotek som ger utvecklare ett ramverk för webbsidor.

8

https://docs.google.com/spreadsheet/ccc?key=0AiN0QfBTPpOCdDFjWlM0eU1ra21XanZkekxGbjA2WWc

www.liu.se

www.liu.se