Biezās tīmekļa lietotnes

1. Biezāstīmekļalietotnes Vieslekcijakursā "Tīmekļaprogrammēšana" Krišs Rauhvargers, 2013

2. Mūsdienīgstīmeklis • Pēdējos 20 gadostīmeklisirpamatīgiattīstījies • 1993: pašaspirmāsvietnes, "read only" režīms • 2013: trīsgadīgibērniliekfotogrāfijas Facebook • Nepārtrauktiaug • tehnoloģijupiedāvātāsiespējas; • lietotājupieprasījumspēcfunkcionalitātes; • To kultivēpopulārieservisi, kasizmantovisu, kaspieejams, laiefektivizētudarbu. • Diemžēlkonstantasvērtībaspaliek • izstrādeipieejamoresursuierobežojumi • lietotājutieksmeizprastpielietotāstehnoloģijas

3. Tehnoloģiju "augšanas" piemēri • Saturavadībassistēmās (piem., internetaportālam) vajadzīgaiespējarediģēttekstuarformatējumu • 2000. gadā Microsoft ievieš "designMode" atribūtu IE5.5 • Pārējiecenšassekotpiemēram • HTML5 standartizētskā "contentEditable" • Milzīgsdaudzumsbibliotēku, kasvienkāršodarbuar to (TinyMCE, Aloha, FCKeditor, …) • 2013: standartfunkcionalitātebloguvietnēs, eStudijāsu.c.

4. Ajax un tāizaugsme

5. Vajadzībapēc A*** • "Tīrajā" HTTP modelījebkuralietotājadarbībaizraisajaunupieprasījumu un lapaspilnupārlādi • Klikšķisuzsaites • Aizpildītasformasiesūtīšana • Tasjausendaudziemšķietkaitinoši • Daudzliekupārsūtāmudatu • Vissnotieklēni • Lapakatrureizitiekpilnībāpārzīmēta • => izstrādātājimeklēapkārtceļus

6. Sākotnējie AJAX risinājumi • Lai tikaiiesūtītudatus, izmanto IMG elementu: <img width="0" height="0" src="script.cgi?param1=val1&param2=val2" /> • 1997. gadāparādās IFRAME elements, izmanto to: • Varnorādītkākādasformas "target" • Vardinamiskimainīt "src" un pēcielādesnolasītsaturu

7. Vienots Ajax atbalsts • 1999. gadā Microsoft ieviešXMLHttpRequestobjektu • IE proprietary, pieejamscaur IE ActiveX atbalstu • Citi izstrādātājiseko (reversāinženierija) • Mozilla Firefox: 2002 • Safari: 2004 • W3C standarts 2008. gadā • Secinājums: drīkstlietot, javajag.

8. Tipiski AJAX lietojumi (vēsturiskie) • Ziņukastes / čatalodziņaatjaunošana • Daturediģēšana, nepārlādējotlapu • "Auto-complete" sarakstuielasīšanau.c. meklēšana

9. AJAX attīstībassekas • Plašāklietojot AJAX, maināsarīserverapusesarhitektūra • Atgriežamaisdatuformātskāparametrs • RESTfulpieeja: lietotnekāresursukopums, arkuriemvarveikt CRUD operācijas • Idejaslabisasaucasar SOA (Service Oriented Architecture)

10. Biezāslietotnesideja

11. Kasir "biezā" lietotne? • Biezālietotne (Rich Client Application): • Pieeja: lielākādaļaizpildesloģikastiekveikta pie klienta, tikaivajadzībasgadījumāsazināsarserveri; • Navspecifiskatīmekļalapām. • Ideja: nevissamazinātpilnaslapaspārlāžuskaitu, bet to nedarītnemaz!

12. Biezolietotņuproblēmas • Saiteuzpašreizējoskatu/stāvokli • Pārlūkprogrammas "Back" un "Forward" funkcionalitāte • Internetameklētājprogrammuapkalpošana • Kurglabātresursus, lai tie nebūtujāpārlasa? • Kāuzzināt par jaunumiemserverī? • Kāorganizētkodu?

13. Saiteuzpašreizējoskatu • Problēma: • Lietotājspēclapasatvēršanaspārvietojislietotniuzcitāstāvoklī • Piem., e-pasta klientprogramma, atvērtasadaļa "outbox" • Klasiskālietotnērisinātucaur URL parametriem: • http://epastaklients.com/folder/outbox/

14. Saiteuzpašreizējoskatu (2) • Risinājumsbiezajālietotnē: • Izmantot URL hash daļu: • http://epastaklients/#folder/outbox • Hash maiņaneizraisalapaspārlādi • Varsaglabātfavorītos • Atverotlapu, analizēhashsaturu un izraisavajadzīgāsstāvokļupārejas • Vēlāk, veicotpārejas, modificēhash

15. Saiteuzpašreizējoskatu (3) • Palīgbibliotēkas • Routie : maza, vienkāršiemparametruformātiem • http://projects.jga.me/routie/ • Crossroads: atpazīstdažāduspaternus: • http://millermedeiros.github.io/crossroads.js/ • jQueryHashChange • http://benalman.com/projects/jquery-hashchange-plugin/

16. Back/forward • Atsevišķistāvokļiirtikbūtiski, laiuztiemgribētosatgrieztiesar "back" • Risinājumi: • Vēsturiskais: mainothash, maināspārlūkprogrammasvēsturessaraksts • Jaunais: HTML5 iriekļauts History API (https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Manipulating_the_browser_history) • Iespējapievienotpapildusierakstuspārlūkprogrammasvēsturei • Navjālietohash adreses • Piemērs: http://html5demos.com/history/

17. Meklētājuapkalpošana (pa vecam) • Pieņēmums: • jagoogleindeksētumanu e-pasta tīmekļaklientu.. • …un turizmantotas hash adreses • Atrodotsaitihttp://epastaklients.com/#folder/outbox" • Faila URL ir http://epastaklients.com • JavaScript, visticamāk, neizpilda • Sekas: lietotnessaturspaliekneindeksēts • Risinājums • "hashbang URLs": adresisākar #!, piem, http://epastaklients.com/#!folder/outbox • tasnozīmē, kameklētājamjāapmeklēresursshttp://epastaklients.com/folder/outbox un turbūspilnvērtīgs HTML saturs

18. Meklētājuapkalpošana: pa jaunam • Lietojot HTML5 PushState: • Serverimjānodrošina, kavisistāvokļunosaukumiireksistējošasadreses • Piem, http://epastaklients/folder/outbox/ jāatgriežattiecīgāsmapes HTML saturs • Navigācijālietotuhipersaiteskā • <a href="http://epastaklients/folder/outbox/" onclick="goToState("/folder/outbox")>..</a>

19. Datuglabātuves • Biezālietotnēvarbūtdati, • kamserverapusēnavjēgas • Starpdati(nosūtāmāsvēstulesnepabeigtsteksts) • Klientapuseskonfigurācija (loguizkārtojums, burtuizmērs) • kasserverapusējauir, bet • negribaspārsūtīt (kešošana no savaservera) • Grūti/ilgisavākt(laikaprognozes 47 adresēm) • Vēsturiskivienkāršākiemgadījumiemlietoja "cookie" (limits!)

20. HTML5 WebStorage • HTML5 piedāvā 2 datuglabātuves: • localStorage(ilglaicīgaiglabāšanai) • sessionStorage (vienassesijasietvaros) • Datusuzglabā • "kautkur" pārlūkprogrammassaimniecībā • kā "nosaukums-vērtība" pārīšus • ne vairākkā 5MB apjomā • Palīgbibliotēkas: • https://github.com/marcuswestin/store.js

21. Kāuzzināt par jaunumiemserverī: problēma • Biezāslietotnesretisazināsarserveri • pārsvarā – jaklientamkautkovajagnolasīt/saglabāt • Datosvarrastiesizmaiņas, par kurāmbūtujāzina • piem., tieši to ierakstu, kolietotājspašlaiklabo, kādscitstikkoizdzēsa

22. Kāuzzināt par jaunumiemserverī: metodes • "Ajax polling" • klientsik pa mazambrīdimpārprasaserverim "vainavjaunumu" • "Long polling" • Klientssūta AJAX pieprasījumu, serverisneatbild, līdznavkādanotikuma • Tikkoatbildesaņemta, klientsuzsāknākamojautājumu • Server-sent events • Līdzīgikā "long polling", tikaiklientskatrureizineveidojaunupieprasījumu • WebSockets • Atverilglaicīgusavienojumustarpklientu un serveri, apmaināsarinformāciju Non-IE HTML5

23. Kāuzzināt par jaunumiemserverī: serveratehnoloģijuierobežojumi • Server-sent events un WebSocketsgadījumāserverapuseijāspējilgstošigatavotatbildi • Atbildiparastiizraisacitsnotikumsserverī • Secinājums: Apache+PHPdiezvaiderēs • Node.JS • PHP+Ratchet • IIS8 + SignalR + Asp.Net

24. Kāuzzināt par jaunumiemserverī: klientatehnoloģijuierobežojumi • WebSockets un SSE labiatbalstītijaunākajos, ne-IE pārlūkos • Drošākizmantotkādupalīgbibliotēku, kaspiemeklēalternatīvas • Populārākā: http://socket.io • Bet arī"socks.js" : https://github.com/sockjs/sockjs-client

25. Kāorganizētkodu? • BiezāslietotnesrakstajavaScript • Kodslasīšaanipieejamsjebkuramlietotājam • Nepieciešamssalīdzinošidaudzkoda • Ļotidažādafunkcionalitāte • Sekas • Viegliapmaldīties un izveidotkodamudžekli.

26. Ieteikumi, kāorganizētpalīgkodu • Jaiespējams – neprogrammēt, bet ņemtesošaspalīgbibliotēkas; • Piemēram, web sockets realizācijai, "history push" u.c. • Rakstīttikai "klienta" kodu

27. Kāorganizētgalvenokodu? • Darbsar DOM bieživienveidīgs: • Uztvertievadītovērtībumaiņas, vērtībasnolasīt, rakstīt/lasītkādusdatus • Ģenerētlapassaturu HTML vai DOM struktūrās • Pārformatētdatus no vienaformātacitā • Darbsarlietotājaievaddatuapstrādisevišķigarlaicīgs/kaitinošs.

28. JavaScript MVC ietvari • MVC ietvaripalīdzrisināt DOM + datumanipulācijas: • Definēdatumodeli • Tāatribūtuspiesaista GUI artefaktiem • Kodāaprakstatikaiaugstalīmeņaloģiku • Populāri • Ember.JS, http://emberjs.com • Angular.JS, http://angularjs.org • Backbone JS, http://backbone.js