TDP013. Innan AJAX Ett synkront webb. Med AJAX Ett Asynkront webb

Transkript

1 Tenta TDP013 Webbprogrammering och interaktivitet AJAX, CORS,jQuery, PaaS, Projektet Anders Fröberg Institutionen för Datavetenskap (IDA) Efter UKÄs utvärdering: För lite böcker för mycket URL:er För lite tentor 3 böcker till tentan Kap 1-4 Clean Code Kap 5-9 i B.C Hela Hackers Delight 2 Innan AJAX Ett synkront webb Med AJAX Ett Asynkront webb 1. Användaren klickar länk, formulär, bild etc 2. Anrop till servern sker Server 1. Användaren klickar länk, formulär, bild etc 2. Anrop till servern sker Server 4. Servern returnerar svar 3. Servern agerar på förfrågan 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 3 5. Webbläsaren laddar om hela sidan Användaren måste vänta på svar, kan inte göra något annat 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.

2 AJAX AJAX Skapa XMLHttpRequest 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) var xmlhttprequest; if(window.xmlhttprequest) { //IE7+, Firefox, Chrome, Opera, Safari xmlhttprequest = new XMLHttpRequest(); else { //IE6, IE5 xmlhttprequest = new ActiveXObject( Microsoft.XMLHTTP ); 5 6 AJAX Skicka request 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 ); var xmlhttprequest; if(window.xmlhttprequest) { //IE7+, Firefox, Chrome, Opera, Safari xmlhttprequest = new XMLHttpRequest(); else { //IE6, IE5 xmlhttprequest = new ActiveXObject( Microsoft.XMLHTTP ); xmlhttprequest.open( GET, true); xmlhttprequest.send(); xmlhttprequest.open( GET, true); xmlhttprequest.send(); true gör anropet asynkront 7 8

3 AJAX Skicka request med POST data 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( POST, true); xmlhttp.setrequestheaders( Content-Type, application/x-wwwform-urlencoded ); xmlhttprequest.send( a=b ); var xmlhttprequest; if(window.xmlhttprequest) { //IE7+, Firefox, Chrome, Opera, Safari xmlhttprequest = new XMLHttpRequest(); else { //IE6, IE5 xmlhttprequest = new ActiveXObject( Microsoft.XMLHTTP ); xmlhttprequest.open( GET, true); xmlhttprequest.send(); xmlhttprequest.onreadystatechange = function() { if(xmlhttprequest.readystate == 4 && xmlhttprequest == 200) { document.getelementbyid( content ).innerhtml = xmlhttprequest.responsetext; 9 10 AJAX - jquery Cross-Domain Scripting & CORS var callback = function(data) { $( #content ).text = data; $.ajax({ url: 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 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å example.com så får man endast anropa tjänster på 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 11 12

4 CORS OPTIONS CORS Response headers 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 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ö CORS Response headers CORS Response headers Kan vara smart att göra något för att snabba upp processen: Express.js 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 { 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(); ); //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! 15 16

5 Utan CORS Nu lite fluff 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. Hur ser framtiden ut (redan idag) Anropen sker till samma domännamn så det tillåts av alla webbläsare. Men proxyn omfördelar till olika servrar. Anropar DNS Proxy Apacheserver Anropar Django server 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? Traditional Infrastructure Model Forecasted Infrastructure Demand Capital Time 19

6 Acceptable Surplus Forecasted Infrastructure Demand Surplus Capital Capital Actual Infrastructure Demand Time Time Unacceptable Surplus Unacceptable Deficit Deficit Surplus Capital Capital Time Time

7 Utility Infrastructure Model Cloud Flavors? Capital Time Actual Infrastructure Demand 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) 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 27

8 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 IaaS Examples 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

9 Platform as a Service (PaaS) PaaS Examples 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 Deployment Models OpenShift 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. PaaS demo openshift.ida.liu.se 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. 36

10 Projektet 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) 37 2 Projektet Projektet - Kortfattat 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). 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. 3 4

11 Projektet Högre betyg Projektet Redovisning 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 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. 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 6 jquery UI AngularJs Ett JavaScript bibliotek (innehåller lite CSS och bilder) som ger utvecklare standard komponenter för utveckling. 44 7

12 8 React.js Knockout.js Node.js Bootstrap Ramverk Express Derby Meteor Flatrion SocketStream SailJS Tower Mojito RailwayJS Många fler Ett CSS bibliotek som ger utvecklare ett ramverk för webbsidor. 47

13