1. TNPW2 2013/2014
Mgr. Lukáš Vacek
lukas.vacek@uhk.cz
Aktuální trendy ve vývoji webových aplikací
a něco navíc
2. „Zajímám se o budoucnost, protože v ní hodlám
strávit zbytek svého života.“ – Ch. F. Kettering
2
3. Agenda
• Současný stav, RIA
• Komunikace webových aplikací
• Uživatelské rozhraní
• AJAX
• Flash, Flex, Silverlight a další
• Pracovní nástroje
• Co je Web 2.0? Gartner: hlavní trendy?
• Odkazy na internetu
3
5. Internet 5
• Poskytovatel informací >> platforma pro poskytování služeb uživatelům
• Exponenciálně roste počet uživatelů
• Exponenciálně roste nabídka informací a služeb
• Exponenciálně roste datový traffic (objem přenášených dat)
• Exponenciálně roste množství uložených dat
• Podle IBM každý den vytváříme 2,5 trilionu bytů dat,
90 % bylo vytvořeno za poslední 2 roky (IDC Enterprise mobility konf. 2014)
• Roste počet druhů zařízení, která lze pro přístup k Internetu využívat
• PC, mobily, tablety, smart TV, herní konzole, el. čtečky, mult. přehrávače…
• 24/7 – odkudkoliv, kdykoliv – tzv. Internet v kapse (mobilita zařízení)
• S tím souvisí podpora nových technologií a webových standardů…
6. Dnešní ICT trendy 6
• Existují různé pohledy a předpovědi
• Podle fy Gartner
• Mobilní aplikace a rozhraní pro mobilní zařízení (hlasové ovládání, gesta…)
• Sociální sítě (vč. businessu, soc. analytik a soc. kontextu)
• Big data (analýza, vizualizace)
• Cloud computing
• Další zajímavé trendy (některé se překrývají)
• E-commerce
• Internet of things (různá zařízení, Intel: cca 20 mld. v roce 2020!)
• Počítačová bezpečnost
• Snižování energetické náročnosti (datová centra i klientská zařízení)
• In-memory computing
• 3D (tisk, vizualizace)
7. Dnešní webové technologie 7
• Neustálé zdokonalování stávajících technologií pro web, které se ukázaly
jako použitelné (životaschopné):
• rozšiřování funkcionality, kterou poskytují vývojářům,
• zjednodušení (a zrychlení) jednotlivých procesů vývoje (analýza, návrh,
implementace, testování, deployment),
• implementace moderních trendů (MVC, ORM, SOA, bezpečnost, přístupnost
pro různá zařízení a platformy apod.),
• zvyšování výkonu vyvíjených aplikací.
• Osvědčené technologie: JavaScript, Java, ASP.NET, Flash, Python, PHP...
• „Novější“ technologie: Ruby (on Rails), Adobe AIR, Flex, Silverlight apod.
• Na straně klienta je současným leaderem HTML5 + CSS3 + JavaScript
• Pořád je co zlepšovat!
8. Aktuální problémy webových aplikací 8
• Vývoj webových aplikací = (až moc) velký výběr technologických platforem
• Problémem většiny dnešních webových aplikací jsou hlavně…
• Omezené možnosti jejich uživatelského rozhraní (User Interface)
• Validace formulářových dat na straně klienta (v reálném čase)
• Beze-stavová komunikace při použití protokolu HTTP(S)
• Práce v offline režimu
• Obecně podpora (implementace) standardů v prohlížečích
• Většina webových aplikací je stále založena na značkovacím jazyku HTML (XHTML)
– ten původně nebyl navržen pro vývoj aplikací >> má celou řadu omezení (množství
přenášených dat, ergonomie ovládání apod.)
• Některá omezení lze obejít (např. JavaScript/AJAX, Flash, Adobe AIR, ViewState
a PostBack v ASP.NET apod.), ale není to ono (problematická účinnost, někdy složitost
řešení, jen některé platformy)
• Takže, co s tím?
9. Řešení? 9
• Postupně vytvořit nové nebo rozšířit stávající technologie tak, aby poskytovaly
vývojářům a uživatelům:
• komplexní grafické rozhraní (MDI koncept >> 1 hlavní okno),
• ovládání a funkce odpovídající klasickému desktopovému řešení (drag&drop,
klávesové zkratky, kontextová nápověda, auto complete prvky apod.),
• možnost kontroly formulářových dat u klienta v reálném čase
• možnost práce v offline režimu na straně klienta
• odstínění klienta (uživatele) od modelu žádost/odpověď
• přenos jen nezbytně nutných dat (např. bez duplicit v UI)
• a to vše pro různé druhy platforem a zařízení (např. mobilní)
10. RIA (Rich Internet Application) 10
• Označení pro novou generaci aplikací, které by uvedené požadavky měly plně
(nebo částečně) splňovat
• RIA řeší především záležitosti na straně klienta!
• Významnou roli bude hrát HTML5 (aspoň v nejbližší době)
• Existuje silná spojitost s Internetem – web/(X)HTML, plug-iny prohlížečů,
desktop, mobilní zařízení
• Snadnost spuštění aplikace se blíží snadnosti navštívení webové stránky
• Výhledově by RIA technologie mohly výrazně podpořit myšlenku na převedení
většiny dnešních aplikací do online podoby (celá řada výhod >> aktuálnost,
dostupnost, zpoplatnění jen používaných funkcí apod.)
• http://interval.cz/clanky/rich-internet-applications-v-roce-2008/
• http://zdrojak.root.cz/clanky/pristupnost-ria-dynamicke-zmeny-obsahu/
• Není to dokonalé, ale je to krok správným směrem
12. Webová komunikace – beze-stavové HTTP 12
• Nejčastěji založena na protokolu HTTP(S)
• HTTP je beze-stavový protokol (request >> response)
• Základní vlastnost = snadná implementace
• Mezi jednotlivými requesty se neudržuje kontext
• U většiny aplikací to nemusí vadit
• Beze-stavové HTTP můžete obejít přes
• Cookie (nejstarší, 4KB dat, odesílá se s každým(!) http požadavkem, lze zakázat)
• Session (posílá se ID relace, data uložena na serveru – in proc, state server, sql)
• Využitím local storage (viz dále)
• Viewstate a Control State (v ASP.NET) – hashovaná data v políčku formuláře
• http://www.youtube.com/watch?v=IdJD2FSRQWU video z přednášky
13. Další možnosti komunikace 13
• Moderní webové aplikace využívají pro komunikace mezi klientem a webovým
serverem i další standardy/protokoly, než jen obyčejné HTTP(S)
• REST – orientován datově (ROA), běžné HTTP příkazy (GET, POST, PUT a DELETE) pro
CRUD operace
• Webové služby – protokol SOAP pro vzdálené volání procedur, formát XML
• SOA – univerzální, i mimo web
• Projekt SPDY – vylepšení protokolu HTTP, rychlejší načtení stránky
• Různé formáty dat přicházejících na klienta… HTML, XML, JSON apod., které lze
(programově) dále zpracovat
• Iniciátorem komunikace nemusí být vždy klient (obvyklý scénář) – možnost
vytvoření permanentního spojení (web socket, realtime app – SignalR apod.)
• Nezapomeňte na bezpečnost komunikace – SSL, autentizaci klientů apod.
15. Uživatelské rozhraní (UI, frontend…) 15
• Výrazným trendem dneška je JEDNODUCHOST
• Je kladen důraz na
• Přehlednost
• Intuitivnost
• Použitelnost
• Důležitou roli hraje přizpůsobení UI pro různá zařízení
• Adaptive Web Design (server)
• Responsive Web Design (klient)
• Nejbližší budoucnost… HTML5 + CSS3 + JavaScript
16. Webové formuláře 16
• Už od počátku Internetu jsou formuláře hlavním prostředkem pro zadávání
uživatelských vstupů do webové stránky
• Základní množina formulářových prvků a jejich funkcí je v podstatě stále stejná
jako na začátku, kdy se nepočítalo s Internetem jako s platformou pro aplikace
• Původní formulářové prvky nepokrývají všechny potřeby dnešních webových
aplikací, nejen v oblasti datových vstupů, ale i jejich případné validace (kontroly)
• Tento nedostatek bylo třeba odstranit
• Jsou (byly) možné dva základní přístupy k řešení problému:
• Úplně to celé předělat (XForms)
• Rozšířit stávající množinu prvků a jejich funkcionalitu (Web Forms >> HTML5)
• http://interval.cz/clanky/pohled-na-webove-formulare-druhe-generace/
17. HTML5 (Web Forms 2.0 je součástí) 17
• Původně konsorcium WHATWG (The Web Hypertext Application Technology
Working Group) >> vývojáři Mozilla, Opera, Safari
• Od roku 2007 existuje pracovní skupina W3C pro HTML5 specifikaci, v lednu
2008 byl vydán draft
• Rozšiřuje HTML 4.01 a XHTML 1.0 >> jednoduché na naučení
• Zpětná kompatibilita ve starších prohlížečích
• Zatím neúplná podpora nových prvků v prohlížečích
• Pozor! HTML5 řeší více než jenom webové formuláře
• http://en.wikipedia.org/wiki/Html5
• http://www.lupa.cz/clanky/whatwg-budoucnost-webu/
• http://www.w3.org/TR/2008/WD-html5-diff-20080122/
• http://www.root.cz/serialy/html5-a-jeho-zajimave-vlastnosti/
18. Lokální úložiště dat – Local storage, session storage 18
• V souvislosti se standardem HTML5 se často mluví o offline režimu aplikací
• Lokální úložiště dat (name/value) na straně klienta, přístupné z JavaScriptu
• Podpora v moderních prohlížečích (např. IE8+)
• Local storage běžně neexpiruje, musíte si po sobě uklidit!
• Session storage standardně vydrží do zavření okna prohlížeče
• Kapacita cca 5MB na doménu, každý browser to ale počítá jinak!
• Nepřenáší se na server, aplikační logika sama musí data serializovat!
• http://www.lupa.cz/clanky/sql-si-razi-cestu-do-html5/
• http://zdrojak.root.cz/clanky/webdesigneruv-pruvodce-po-html5-webstorage/
• http://code.google.com/p/sessionstorage/
19. XForms 19
• Za návrhem XForms stojí konsorcium W3C
• Jeden z modulů připravovaného XHTML 2.0
• Komplexně řeší formuláře na webu i na desktopu
• Je poněkud složitější na naučení (i když W3C tvrdí opak )
• Chybí zpětná kompatibilita
• Slepá větev!
• http://en.wikipedia.org/wiki/Xforms
• http://www.grafika.cz/art/webdesign/encxforms.html
• http://html456.blogspot.com/2009/07/predseda-xhtml2-wg-rika-xhtml2-neni.html
21. AJAX (Asynchronous JavaScript and XML) 21
• Aktuálně nejrozšířenější RIA technologie
• AJAX je programový přístup, který mezi prohlížeč a webový server přidává vrstvu
abstrakce
• Základem je klientské skriptování (DOM, (X)HTML a JavaScript), obvykle kombinované
s voláním webových služeb a zpracováváním XML dat (XMLHttpRequest)
• Používá známé a osvědčené technologie
• Jeho nasazení (pozor, neplatí to vždy a všude!) může zlepšit použitelnost webových
aplikací s ohledem na jejich ovládání uživatelem
• Při nevhodném použití může generovat poměrně velkou zátěž pro webový server
• Webové AJAX aplikace je možné vytvářet na většině hlavních vývojových platforem
(ASP.NET, Java/JSF/ADF, PHP apod.)
• http://cs.wikipedia.org/wiki/Asynchronous_JavaScript_and_XML
22. AJAX (Asynchronous JavaScript and XML) 22
Klasická webová aplikace
Klient (webový prohlížeč)
User Interface
Server (webový server)
Aplikační logika
HTTP request
HTML + CSS
AJAX
Klient (webový prohlížeč)
User
Interface
AJAX
Engine
JavaScript
HTML + CSS
Server (webový server)
Aplikační logika
HTTP request
XML data
24. Adobe Flash 24
• V současnosti dominuje v oblasti interaktivní grafiky na Internetu
• Multiplatformní technologie zaměřená na práci s grafikou, vektorovými
animacemi nebo video streamingem (např. Youtube)
• Historie – FutureWave Software (kolem roku 1996), Macromedia (do 2005)
• Pro klienta je k dispozici Flash Player (aktuální verze 12.x), jako plug-in je
nainstalován na většině počítačů s webovým prohlížečem (Adobe uvádí až 99 %)
• Používá programovací jazyk ActionScript (založený na ECMAScript), pracuje
s textem, grafikou i s databázemi
• Jsou určité problémy s indexování obsahu ve vyhledávačích
• Ověřená technologie, s velkou vývojářskou komunitou!
• Řada vývojových nástrojů
• Problémy: bezpečnost, stabilita, výkon na slabších zařízeních!
• http://www.adobe.com/products/flash/
• http://www.flash.cz/portal/
25. Adobe Flex 25
• Komponentový framework pro interaktivní aplikace postavené na technologii
Flash (Flash Player v prohlížeči) a Adobe AIR (desktop)
• Aplikace mohou integrovat např. multimédia, XML, webové služby nebo
tzv. Flex Data Services (WS postavené na J2EE)
• Programovací jazyk ActionScript 3, MXML pro UI
• Základní vývojové nástroje (SDK + kompilátor) jsou zdarma, Flex Builder
za peníze; je možná pokročilá integrace (Ant, Maven)
• Deployment = zkopírovat soubory SWF (+ HTML wrappery)
• Technologie Flash/Flex umožňují odklon UI od klasické podoby webových
stránek, není to náhrada HTML a spol.
• Velké plány Adobe, realita je skromnější, aktuální verze Flex 4.11.xx (10/2013)
• Open source licence frameworku!
• http://www.adobe.com/products/flex/
• http://www.grafika.cz/art/webdesign/flashflex.html
• http://interval.cz/clanky/adobe-flex-co-je-a-co-neni/
26. Adobe Air 26
• Adobe AIR (Adobe Integrated Runtime, dříve Apollo)
• První stabilní verze 1.0 (únor 2008) – aktuální verze 4.xx (12/2013)
• Multiplatformní runtime propojující desktopové a webové aplikace
• Umožňuje kombinovat např. HTML/JavaScript/AJAX, Flash, Flex
• Rozšiřuje funkcionalitu a možnosti webových aplikací (např. drag&drop,
práce s diskem, nativní okna, offline práce s daty, synchronizace apod.)
• Má plný přístup k lokálním zdrojům! Pod účtem, pod kterým uživatel pracuje
• Aplikace lze spouštět nezávisle na prohlížeči, na různých zařízeních
• http://www.adobe.com/cz/products/air/
• http://labs.adobe.com/technologies/air/
• http://jilm.blog.lupa.cz/0704/adobe-je-cerny-kun-internetovych-aplikaci
• http://www.flash.cz/portal/clanek.aspx?id=594
• http://www.dsl.sk/article.php?article=5359
27. Microsoft Silverlight 27
• První verze v září 2007, aktuální verze 5.1.xx (10/2013)
• Jde o runtime pro spouštění interaktivních aplikací v prostředí webového
prohlížeče nebo desktopu, u klienta je třeba instalovat odpovídající plug-in
• Základem je WPF >> grafický subsystém .NET Frameworku 3.0 >> umožňuje
popisovat textový, vektorový, interaktivní a multimediální obsah pomocí XAML
• Podporuje přehrávání audia a videa ve formátech WMV, WMA a MP3
• Programovat lze v JavaScriptu, od verze 2.0 také v C#, VB.NET apod.
• Multiplatformní podpora u klienta pro Windows, Mac, Linux (Moonlight)
• Na klientovi běží v tzv. sandboxu, nemá plný přístup k disku
• Jako vývojové prostředí se používá Visual Studio
• Někdy je označována jako tzv. „Flash killer“ technologie
• Jako cross-platform technologii bude Microsoft spíše podporovat HTML5!
• http://www.microsoft.com/silverlight/
• http://en.wikipedia.org/wiki/Moonlight_(runtime)
• http://is.gd/hUi05 (článek na JustIT - podpora Silverlight vs. HTML5)
28. XUL (XML User Interface Language, čti Zůl) 28
• XUL je technologie založená na XML
• Umožňuje tvorbu RIA aplikací, které mohou být spouštěny
z Internetu (ale nemusí, např. Firefox)
• XML v kombinaci s JavaScriptem (obsluha událostí) a CSS umožňuje vytvářet
UI aplikací
• XUL odděluje jednotlivé prvky UI a jejich vzhled >> snadná skinovatelnost
• Technologii XUL zastřešuje Mozilla Foundation
• Je platformě nezávislá, používá komponenty v nativních jazycích (C/C++)
• Na straně klienta je to trochu pomalé…
• http://www.mozilla.org/projects/xul/
• http://en.wikipedia.org/wiki/XUL
• http://www.kosek.cz/clanky/xul/index.html
30. Pracovní nástroje 30
• Trendem jsou rostoucí požadavky na komplexnost vývojových nástrojů
• Každý vývojář potřebuje něco jiného, záleží na jeho roli
• Jednotlivé etapy vývoje software nejsou jednoznačně odděleny, často běží vedle sebe
(paralelní běh analýzy a implementace při tzv. extrémním programování)
• Jsou vyžadovány funkce a nástroje, které zefektivní jednotlivé etapy vývoje
• Pro fázi implementace se za samozřejmé považuje např.
• sofistikovaný editor zdrojových kódu s inteligentním doplňováním,
• vizuální návrh UI, trend generování UI do HTML5 + JavaScript + CSS na výstupu,
• spolupráce s CASE nástroji, synchronizace,
• podpora verzování, týmový vývoj, úkoly/task(s),
• podpora pro ladění aplikace, trasování, refaktorizace kódu,
• podpora nejrůznějších šablon, práce s databází, ORM, design patterns,
• podpora automatického testování (unit, funkční, zátěžové…), TDD,
• tvorba instalačních balíčků, konfiguračních skriptů, deployment aplikace a další
32. Web 2.0? 32
• Web 2.0 lze chápat „Jako posun od centralizovaného zpracování služeb
k decentralizaci.“ – Tim O’Reilly (zdroj)
• „Web 2.0 jsou takové webové projekty, které používají technologie a principy namířené
co nejvíce k uživatelům služeb, a to často tak blízko, že nechávají samotné uživatele, aby
se sami podíleli na obsahu či tvorbě projektu.“ – Symbio
• Jiný úhel pohledu na to, jak rozlišit jednotlivé vývojové fáze webu… „Na Web 1.0 stačilo
připojení kolem 50 Kbit/s, na Web 2.0 linka o rychlosti 1 Mbit/s a na Web 3.0 to bude
přibližně 10 Mbit/s.“ – Reed Hastings (zdroj Symbio)
• http://www.oreillynet.com/pub/a/oreilly/tim/news/2005/09/30/what-is-web-20.html
• http://www.symbio.cz/clanky/web-2-0-3-0-4-0.html
• http://en.wikipedia.org/wiki/Web_2.0
33. Co znamená Web 2.0 pro návrh (design) aplikace? 33
• Web jako platforma – klasický design ustupuje do pozadí, a do popředí
se dostávají programové nadstavby (API), webové služby, XML, RSS apod.
= změny v programování a v přístupu k datům
• Mnohem intenzivnější spolupráce mezi servery při výměně dat
• Tzv. Mashup aplikace
• Změny v navigaci, organizaci informací a v přístupu k nim >> uživatelé rozhodují sami
(agregátory obsahu)
• Mixování obsahu >> obsah je důležitější než jeho poskytovatel!
• Komunity přidávají a sdílejí vlastní data >> štítky, recenze apod.
• Často hovoříme v této souvislosti o pojmech sociální sítě, Cloud computing apod.
• http://www.symbio.cz/clanky/komunity-v-podani-strycka-googla.html
• http://www.lupa.cz/clanky/zmeni-google-sidewiki-internet/
• http://zdrojak.root.cz/clanky/rest-architektura-pro-webove-api/
• „The Age of APIs“ >> rozvoj businessu + prostředek integrace
34. Gartner: 4 hlavní trendy – Sociální sítě 34
• Webové aplikace označované jako Web 2.0 se prosazují stále více
• Nesmírně důležitá je komunita uživatelů, která se na takovouto aplikaci „nabalí“
• Potom hovoříme o tzv. sociální síti
• Sociální sítě jsou čím dál důležitější i pro firemní komunikaci (dovnitř i ven)
Facebook, Instagram, Pinterest, Google+, LinkedIn – komunitní weby
Wikipedia – internetová encyklopedie
Del.icio.us – ukládání a sdílení záložek (bookmarks)
Flickr – sdílení fotografií na webu
Twitter – krátké osobní zprávy do 140 znaků
35. Gartner: 4 hlavní trendy – Cloud computing (více přednáška) 35
• „Termín označuje souhrnně technologie a postupy používané v datových centrech
a firmách pro zajištění snadné škálovatelnosti aplikací dodávaných přes Internet.“
– Jan Kodera (http://cloud.abakowiki.cz/)
• Cloud hosting nabízí serverový cluster s vysokým výpočetním výkonem, datovým
úložištěm a konektivitou, který je možné si pronajímat dle potřeby
• IaaS – Infrastruktura jako služba
• PaaS – Platforma jako služba
• SaaS – Software jako služba
• Výhodou je dynamický sizing
a platba jen za skutečně
spotřebované prostředky
SaaS
PaaS
IaaS
http://zdrojak.root.cz/clanky/cloud-hosting-aneb-hosting-v-oblacich/
http://www.lupa.cz/clanky/cloudy-maji-budoucnost-a-take-problemy/
http://is.gd/hUmcI – možnosti dynamického škálování prostředků v MS AZURE
36. Gartner: 4 hlavní trendy – Mobilní aplikace (více na přednášce) 36
• Přístup ke službám 24/7, odkudkoliv – tzv. Internet v kapse
• Prodá se více mobilních zařízení, než stolních počítačů >> post-PC svět/éra
• Významnou roli na straně serveru hraje cloud computing
• Objem dat přenášených přes mobilní zařízení exponenciálně roste!
• Mění se role telco operátorů: Hlasové služby ustupují, doplněk ICT služeb
• Mobilní aplikace
• Nativní aplikace
• Mobilní webové aplikace (někteří prosazují trend Mobile first)
• Native wraper
37. Gartner: 4 hlavní trendy – Big data, datová analytika 37
• Big data (podle Gartner) = data, jejich velikost je mimo schopnosti zachycovat, spravovat
a zpracovávat je běžně používanými softwarovými prostředky v rozumném čase
• Big data je hype! >> Všichni o tom mluví, ale zatím málokdo to umí dobře využít
• Při zpracování dat hraje roli SW + HW (distrib. úložiště a výpočty, HPC)
• Problémy mohou být s objemem, strukturou nebo rychlostí zpracování
• Často využívají tzv. NoSQL databáze >> umožňují pomocí key+hodnota relativně rychle
(a levně) pracovat s uloženými daty (základní dotazy), pokročilejší a náročnější operace
zajišťují pomaleji relační databáze
• Použití big data: Sociální sítě, e-commerce, marketing, různé senzory, vědecké
experimenty…
• Schopnost pracovat s datovou analytikou je často rozhodujícím faktorem úspěchu
produktu nebo služby
38. Top technology trends 2014 (IEEE) 38
• Mobilní cloud – mobilní zařízení využívají výpočetní výkon v cloudu, nové služby
• Z Internetu věcí >> Web věcí – využití mobilních zařízení a senzorů
• Od velkých objemů dat k extrémním – jednodušší analytické nástroje
• 3D revoluce – rychlejší a levnější 3D tisk
• Podpora nových způsobů učení – elearning
• Mobilní sítě nové generace – rostoucí potřeby uživatelů
• Vyvažování identity a soukromí – bezpečnost
• Inteligentní a propojená zdravotní péče – healthcare
• E-government
• Využití Cloud computingu ve vědě – nové objevy
• http://www.computer.org/portal/web/membership/Top-10-Tech-Trends-in-2014
• Třináct IT trendů v roce 2013 podle IEEE (Lupa.cz)