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&param2=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