Upload
johnna
View
50
Download
4
Embed Size (px)
DESCRIPTION
Biezās tīmekļa lietotnes. Vieslekcija kursā " Tīmekļa programmēšana " Krišs Rauhvargers, 2013. Mūsdienīgs tīmeklis. Pēdējos 20 gados tīmeklis ir pamatīgi attīstījies 1993: pašas pirmās vietnes , "read only" režīms 2013: trīsgadīgi bērni liek fotogrāfijas Facebook Nepārtraukti aug - PowerPoint PPT Presentation
Citation preview
Biezās tīmekļa lietotnes
Vieslekcija kursā "Tīmekļa programmēšana"Krišs Rauhvargers, 2013
• Pēdējos 20 gados tīmeklis ir pamatīgi attīstījies– 1993: pašas pirmās vietnes, "read only" režīms– 2013: trīsgadīgi bērni liek fotogrāfijas Facebook
• Nepārtraukti aug• tehnoloģiju piedāvātās iespējas;• lietotāju pieprasījums pēc funkcionalitātes;
– To kultivē populārie servisi, kas izmanto visu, kas pieejams, lai efektivizētu darbu.
• Diemžēl konstantas vērtības paliek– izstrādei pieejamo resursu ierobežojumi– lietotāju tieksme izprast pielietotās tehnoloģijas
Mūsdienīgs tīmeklis
• Satura vadības sistēmās (piem., interneta portālam) vajadzīga iespēja rediģēt tekstu ar formatējumu
• 2000. gadā Microsoft ievieš "designMode" atribūtu IE5.5
• Pārējie cenšas sekot piemēram• HTML5 standartizēts kā "contentEditable" • Milzīgs daudzums bibliotēku, kas vienkāršo darbu ar
to (TinyMCE, Aloha, FCKeditor, …)• 2013: standartfunkcionalitāte blogu vietnēs, eStudijās
u.c.
Tehnoloģiju "augšanas" piemēri
AJAX UN TĀ IZAUGSME
• "Tīrajā" HTTP modelī jebkura lietotāja darbība izraisa jaunu pieprasījumu un lapas pilnu pārlādi– Klikšķis uz saites– Aizpildītas formas iesūtīšana
• Tas jau sen daudziem šķiet kaitinoši– Daudz lieku pārsūtāmu datu– Viss notiek lēni– Lapa katru reizi tiek pilnībā pārzīmēta– => izstrādātāji meklē apkārtceļus
Vajadzība pēc A***
• Lai tikai iesūtītu datus, izmanto IMG elementu:<img width="0" height="0" src="script.cgi?param1=val1¶m2=val2" />
• 1997. gadā parādās IFRAME elements, izmanto to:– Var norādīt kā kādas formas "target"– Var dinamiski mainīt "src" un pēc ielādes nolasīt
saturu
Sākotnējie AJAX risinājumi
• 1999. gadā Microsoft ievieš XMLHttpRequest objektu – IE proprietary, pieejams caur IE ActiveX atbalstu
• Citi izstrādātāji seko (reversā inženierija)– Mozilla Firefox: 2002– Safari: 2004– W3C standarts 2008. gadā
• Secinājums: drīkst lietot, ja vajag.
Vienots Ajax atbalsts
• Ziņu kastes / čata lodziņa atjaunošana• Datu rediģēšana, nepārlādējot lapu• "Auto-complete" sarakstu ielasīšana u.c.
meklēšana
Tipiski AJAX lietojumi (vēsturiskie)
• Plašāk lietojot AJAX, mainās arī servera puses arhitektūra– Atgriežamais datu formāts kā parametrs– RESTful pieeja: lietotne kā resursu kopums, ar
kuriem var veikt CRUD operācijas• Idejas labi sasaucas ar SOA (Service
Oriented Architecture)
AJAX attīstības sekas
BIEZĀS LIETOTNES IDEJA
• Biezā lietotne (Rich Client Application):– Pieeja: lielākā daļa izpildes loģikas tiek veikta pie
klienta, tikai vajadzības gadījumā sazinās ar serveri;
– Nav specifiska tīmekļa lapām.• Ideja: nevis samazināt pilnas lapas pārlāžu
skaitu, bet to nedarīt nemaz!
Kas ir "biezā" lietotne?
• Saite uz pašreizējo skatu/stāvokli• Pārlūkprogrammas "Back" un "Forward"
funkcionalitāte• Interneta meklētājprogrammu apkalpošana• Kur glabāt resursus, lai tie nebūtu jāpārlasa?• Kā uzzināt par jaunumiem serverī?• Kā organizēt kodu?
Biezo lietotņu problēmas
• Problēma:– Lietotājs pēc lapas atvēršanas pārvietojis lietotni
uz citā stāvoklī• Piem., e-pasta klientprogramma, atvērta sadaļa
"outbox"– Klasiskā lietotnē risinātu caur URL parametriem:
• http://epastaklients.com/folder/outbox/
Saite uz pašreizējo skatu
• Risinājums biezajā lietotnē:– Izmantot URL hash daļu:– http://epastaklients/#folder/outbox
• Hash maiņa neizraisa lapas pārlādi• Var saglabāt favorītos• Atverot lapu, analizē hash saturu un izraisa
vajadzīgās stāvokļu pārejas• Vēlāk, veicot pārejas, modificē hash
Saite uz pašreizējo skatu (2)
• Palīgbibliotēkas– Routie : maza, vienkāršiem parametru formātiem
• http://projects.jga.me/routie/– Crossroads: atpazīst dažādus paternus:
• http://millermedeiros.github.io/crossroads.js/– jQuery HashChange
• http://benalman.com/projects/jquery-hashchange-plugin/
Saite uz pašreizējo skatu (3)
• Atsevišķi stāvokļi ir tik būtiski, lai uz tiem gribētos atgriezties ar "back"
• Risinājumi:– Vēsturiskais: mainot hash, mainās pārlūkprogrammas
vēstures saraksts– Jaunais: HTML5 ir iekļauts History API (
https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Manipulating_the_browser_history )
• Iespēja pievienot papildus ierakstus pārlūkprogrammas vēsturei• Nav jālieto hash adreses• Piemērs: http://html5demos.com/history/
Back/forward
• Pieņēmums: – ja google indeksētu manu e-pasta tīmekļa klientu..– …un tur izmantotas hash adreses
• Atrodot saitihttp://epastaklients.com/#folder/outbox"– Faila URL ir http://epastaklients.com– JavaScript, visticamāk, neizpilda
• Sekas: lietotnes saturs paliek neindeksēts• Risinājums
– "hashbang URLs": adresi sāk ar #!, piem, http://epastaklients.com/#!folder/outbox
– tas nozīmē, ka meklētājam jāapmeklē resurss http://epastaklients.com/folder/outbox un tur būs pilnvērtīgs HTML saturs
Meklētāju apkalpošana (pa vecam)
• Lietojot HTML5 PushState:– Serverim jānodrošina, ka visi stāvokļu
nosaukumi ir eksistējošas adreses– Piem, http://epastaklients/folder/outbox/ jāatgriež
attiecīgās mapes HTML saturs• Navigācijā lietotu hipersaites kā• <a href="http://epastaklients/folder/outbox/"
onclick="goToState("/folder/outbox")>..</a>
Meklētāju apkalpošana: pa jaunam
• Biezā lietotnē var būt dati, – kam servera pusē nav jēgas
• Starpdati (nosūtāmās vēstules nepabeigts teksts)• Klienta puses konfigurācija (logu izkārtojums, burtu izmērs)
– kas servera pusē jau ir, bet • negribas pārsūtīt (kešošana no sava servera)• Grūti/ilgi savākt (laika prognozes 47 adresēm)
• Vēsturiski vienkāršākiem gadījumiem lietoja "cookie" (limits!)
Datu glabātuves
• HTML5 piedāvā 2 datu glabātuves:– localStorage (ilglaicīgai glabāšanai)– sessionStorage (vienas sesijas ietvaros)
• Datus uzglabā – "kaut kur" pārlūkprogrammas saimniecībā– kā "nosaukums-vērtība" pārīšus– ne vairāk kā 5MB apjomā
• Palīgbibliotēkas:– https://github.com/marcuswestin/store.js
HTML5 WebStorage
• Biezās lietotnes reti sazinās ar serveri– pārsvarā – ja klientam kaut ko vajag
nolasīt/saglabāt• Datos var rasties izmaiņas, par kurām būtu
jāzina– piem., tieši to ierakstu, ko lietotājs pašlaik labo,
kāds cits tikko izdzēsa
Kā uzzināt par jaunumiem serverī: problēma
• "Ajax polling"– klients ik pa mazam brīdim pārprasa serverim "vai nav
jaunumu"• "Long polling"
– Klients sūta AJAX pieprasījumu, serveris neatbild, līdz nav kāda notikuma
– Tikko atbilde saņemta, klients uzsāk nākamo jautājumu• Server-sent events
– Līdzīgi kā "long polling", tikai klients katru reizi neveido jaunu pieprasījumu
• WebSockets– Atver ilglaicīgu savienojumu starp klientu un serveri,
apmainās ar informāciju
Kā uzzināt par jaunumiem serverī: metodes
Non-IE
HTML5
• Server-sent events un WebSockets gadījumā servera pusei jāspēj ilgstoši gatavot atbildi
• Atbildi parasti izraisa cits notikums serverī• Secinājums: Apache+PHP diez vai derēs
– Node.JS– PHP+Ratchet– IIS8 + SignalR + Asp.Net
Kā uzzināt par jaunumiem serverī: servera tehnoloģiju ierobežojumi
• WebSockets un SSE labi atbalstīti jaunākajos, ne-IE pārlūkos
• Drošāk izmantot kādu palīgbibliotēku, kas piemeklē alternatīvas– Populārākā: http://socket.io– Bet arī "socks.js" :
https://github.com/sockjs/sockjs-client
Kā uzzināt par jaunumiem serverī: klienta tehnoloģiju ierobežojumi
• Biezās lietotnes raksta javaScript– Kods lasīšaani pieejams jebkuram lietotājam– Nepieciešams salīdzinoši daudz koda– Ļoti dažāda funkcionalitāte
• Sekas– Viegli apmaldīties un izveidot koda mudžekli.
Kā organizēt kodu?
• Ja iespējams – neprogrammēt, bet ņemt esošas palīgbibliotēkas;– Piemēram, web sockets realizācijai, "history
push" u.c.• Rakstīt tikai "klienta" kodu
Ieteikumi, kā organizēt palīgkodu
• Darbs ar DOM bieži vienveidīgs:– Uztvert ievadīto vērtību maiņas, vērtības nolasīt,
rakstīt/lasīt kādus datus– Ģenerēt lapas saturu HTML vai DOM struktūrās– Pārformatēt datus no viena formāta citā
• Darbs ar lietotāja ievaddatu apstrādi sevišķi garlaicīgs/kaitinošs.
Kā organizēt galveno kodu?
• MVC ietvari palīdz risināt DOM + datu manipulācijas:– Definē datu modeli– Tā atribūtus piesaista GUI artefaktiem– Kodā apraksta tikai augsta līmeņa loģiku
• Populāri– Ember.JS, http://emberjs.com– Angular.JS, http://angularjs.org– Backbone JS, http://backbone.js
JavaScript MVC ietvari