TDP013 Webbprogrammering och interaktivitet AJAX, CORS,jQuery, PaaS, Projektet Anders Fröberg Institutionen för Datavetenskap (IDA)
Innan AJAX Ett synkront webb 1. Användaren klickar länk, formulär, bild etc 2. Anrop till servern sker Server 3. Servern agerar på förfrågan 4. Servern returnerar svar 5. Webbläsaren laddar om hela sidan 2 Användaren måste vänta på svar, kan inte göra något annat.
Med AJAX Ett Asynkront webb 1. Användaren klickar länk, formulär, bild etc 2. Anrop till servern sker Server Klicka, dra, byt bild, skriv vidare, etc. användaren kan fortsätta använda webbplatsen 4. Servern returnerar svar 3. Servern agerar på förfrågan 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. 3
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(); true gör anropet asynkront 6
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-wwwform-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 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 10
11 AJAX Demo
12 Socket Example
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(); 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 en produktionsmiljö. 15
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. Anropen sker till samma domännamn så det tillåts av alla webbläsare. Men proxyn omfördelar till olika servrar. Anropar www.example.com/index.html DNS www.example.com Proxy Apacheserver Anropar www.example.com/service Django server 18
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 Capital Time
Acceptable Surplus Forecasted Infrastructure Demand Surplus Capital Time
Capital Actual Infrastructure Demand Time
Unacceptable Surplus Surplus Capital Time
Unacceptable Deficit Deficit Capital Time
Utility Infrastructure Model Capital Actual Infrastructure Demand Time
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 offsite 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 thirdparty 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 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) 2
Projektet 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). 3
Projektet - Kortfattat 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. 4
Projektet Högre betyg 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). 5
Projektet Redovisning 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. 6
jquery UI Ett JavaScript bibliotek (innehåller lite CSS och bilder) som ger utvecklare standard komponenter för utveckling. 7
43 AngularJs
44 React.js
45 Knockout.js
Node.js Ramverk Express Derby Meteor Flatrion SocketStream SailJS Tower Mojito RailwayJS Många fler 46
8 Bootstrap Ett CSS bibliotek som ger utvecklare ett ramverk för webbsidor. https://docs.google.com/spreadsheet/ccc?key=0ain0qfbtppocddfjwlm0eu1ra21xanzkekxgbja2wwc
www.liu.se
www.liu.se