SlideShare a Scribd company logo
Aktuální trendy ve vývoji webových aplikací
a něco navíc
Mgr. Lukáš Vacek
lukas.vacek@uhk.cz
TNPW2 2015/2016
2
„Zajímám se o budoucnost, protože v ní hodlám
strávit zbytek svého života.“ – Ch. F. Kettering
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
Současný stav
• 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ů…
Internet 5
• 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 (Výzvy: Dostupnost, identifikace, soukromí, bezpečnost)
• Počítačová bezpečnost
• Snižování energetické náročnosti (datová centra i klientská zařízení)
• In-memory computing
• 3D (tisk, vizualizace)
Dnešní ICT trendy 6
• 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!
Dnešní webové technologie 7
• 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?
Aktuální problémy webových aplikací 8
• 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í)
Řešení? 9
• 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
RIA (Rich Internet Application) 10
Komunikace webových aplikací
• 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
Webová komunikace – beze-stavové HTTP 12
• 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.
Další možnosti komunikace 13
Uživatelské rozhraní
• 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
Uživatelské rozhraní (UI, frontend…) 15
• 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/
Webové formuláře 16
• 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/
HTML5 (Web Forms 2.0 je součástí) 17
• 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/
Lokální úložiště dat – Local storage, session storage 18
• 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
XForms 19
AJAX
• 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
AJAX (Asynchronous JavaScript and XML) 21
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
XML data
HTTP request
Flash, Flex a spol.
• 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 21.x 3/2016), 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/
Adobe Flash 24
• 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.15.xx (1/2016)
• 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/
Adobe Flex 25
• Adobe AIR (Adobe Integrated Runtime, dříve Apollo)
• První stabilní verze 1.0 (únor 2008) – aktuální verze 21.xx (3/2016)
• 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
Adobe Air 26
• První verze v září 2007, aktuální verze 5.1.xx (1/2016)
• 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)
Microsoft Silverlight 27
• 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
XUL (XML User Interface Language, čti Zůl) 28
Pracovní nástroje
• 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ší
Pracovní nástroje 30
Web 2.0?
Gartner: 4 hlavní trendy
• 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
Web 2.0? 32
• 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
Co znamená Web 2.0 pro návrh (design) aplikace? 33
• 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ů
Gartner: 4 hlavní trendy – Sociální sítě 34
• „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
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
Gartner: 4 hlavní trendy – Cloud computing (více přednáška) 35
SaaS
PaaS
IaaS
• 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
Gartner: 4 hlavní trendy – Mobilní aplikace (více na přednášce) 36
• 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
Gartner: 4 hlavní trendy – Big data, datová analytika 37
Pro srovnání 2014
• Mobilní cloud
• Internet věcí >> Web věcí
• Extrémní objemy dat, analytika
• 3D revoluce – rychle, levně
• E-learning
• Mobilní sítě nové generace
• Bezpečnost = ID vs soukromí
• Healthcare
• E-government
• Cloud computingu ve vědě
• Zdroj: 2014
Top technology trends (IEEE) 38
2016
• 5G sítě
• VR a Augmentovaná realita
• „Non Volatile“ paměť on/off
• Cyber Physical System (jinak IoT)
• Data Science
• Capability-based Security
• Strojové účení
• Virtualizace síťových funkcí
• Kontejnery v Cloudu
• Zdroj: 2016
Internetové odkazy, literatura
Odkazy na internetu I. 40
• http://cs.wikipedia.org/wiki/Asynchronous_JavaScript_and_XML (AJAX)
• http://www.asp.net/ajax/ (Microsoft ASP.NET AJAX Extension)
• http://en.wikipedia.org/wiki/Html5 (HTML5)
• http://www.adobe.com/products/flash/ (Adobe Flash)
• http://www.adobe.com/products/flex/ (Adobe Flex)
• http://www.openlaszlo.org/ (OpenLaszlo)
• http://www.mozilla.org/projects/xul/ (XUL)
• http://www.microsoft.com/silverlight/ (Silverlight)
• http://www.sun.com/software/javafx/index.jsp (JavaFX)
• http://labs.adobe.com/technologies/air/ (Adobe Air)
• http://en.wikipedia.org/wiki/Web_2.0 (Web 2.0)
• http://zdrojak.root.cz/clanky/cloud-computing-jiny-pohled-na-aplikace/
• http://www.augi.cz/programovani/cassandra-ocima-net-programatora/ (NoSQL)
• http://www.zive.cz/bleskovky/v-americe-vladne-internetu-netflix-v-evrope-bittorrent/sc-4-a-
166249/default.aspx (Netflix a BitTorrent králové datového trafficu)
• http://www.root.cz/clanky/big-data-a-jejich-zpracovani/
Odkazy na internetu II. 41
• http://zdrojak.root.cz/clanky/jak-budeme-psat-webove-aplikace-za-tri-roky/
• http://zdrojak.root.cz/clanky/vyvojar-si-jen-s-programovanim-nevystaci/
• http://suewebik.net/webove/web20-def.html
• http://www.lupa.cz/clanky/web-2-0-bublina-nebo-novy-smer-webu/
• http://www.slideshare.net/MedvidekPU/sociln-st-mn-internet-k-nepoznn
• http://zdrojak.root.cz/clanky/jaky-software-pohani-facebook/
• http://www.lupa.cz/clanky/komunitni-server-a-komunitu-mate-kde/
• http://www.forbes.com/sites/gartnergroup/2014/10/21/gartners-top-10-strategic-technology-
trends-for-2015/
• http://tech.ihned.cz/c1-63001160-internet-of-things-internet-veci-hrozby
• Internet of Things – trendy: Dostupnost, identifikace, soukromí a zabezpečení
Závěr, dotazy

More Related Content

What's hot

TNPW2-2014-04
TNPW2-2014-04TNPW2-2014-04
TNPW2-2014-04
Lukáš Vacek
 
TNPW2-2014-03
TNPW2-2014-03TNPW2-2014-03
TNPW2-2014-03
Lukáš Vacek
 
TNPW2-2014-05
TNPW2-2014-05TNPW2-2014-05
TNPW2-2014-05
Lukáš Vacek
 
TNPW2-2014-06
TNPW2-2014-06TNPW2-2014-06
TNPW2-2014-06
Lukáš Vacek
 
Rich Internet Applications 2009 (Czech)
Rich Internet Applications 2009 (Czech)Rich Internet Applications 2009 (Czech)
Rich Internet Applications 2009 (Czech)Pavel Růžička
 
Smact a průmysl 4.0
Smact a průmysl 4.0Smact a průmysl 4.0
Smact a průmysl 4.0
Jaroslav Smarda
 
Confluence_v1.4_extended
Confluence_v1.4_extendedConfluence_v1.4_extended
Confluence_v1.4_extendedPetr Holodňák
 
Webinář: Ochrana firemního perimetru za pomoci firewallů nové generace / 30.9...
Webinář: Ochrana firemního perimetru za pomoci firewallů nové generace / 30.9...Webinář: Ochrana firemního perimetru za pomoci firewallů nové generace / 30.9...
Webinář: Ochrana firemního perimetru za pomoci firewallů nové generace / 30.9...
Jaroslav Prodelal
 

What's hot (20)

TNPW2-2014-04
TNPW2-2014-04TNPW2-2014-04
TNPW2-2014-04
 
TNPW2-2014-03
TNPW2-2014-03TNPW2-2014-03
TNPW2-2014-03
 
TNPW2-2014-05
TNPW2-2014-05TNPW2-2014-05
TNPW2-2014-05
 
TNPW2-2014-06
TNPW2-2014-06TNPW2-2014-06
TNPW2-2014-06
 
TNPW2-2012-08
TNPW2-2012-08TNPW2-2012-08
TNPW2-2012-08
 
TNPW2-2012-06
TNPW2-2012-06TNPW2-2012-06
TNPW2-2012-06
 
TNPW2-2013-02
TNPW2-2013-02TNPW2-2013-02
TNPW2-2013-02
 
TNPW2-2013-07
TNPW2-2013-07TNPW2-2013-07
TNPW2-2013-07
 
TNPW2-2012-05
TNPW2-2012-05TNPW2-2012-05
TNPW2-2012-05
 
TNPW2-2013-01
TNPW2-2013-01TNPW2-2013-01
TNPW2-2013-01
 
TNPW2-2012-02
TNPW2-2012-02TNPW2-2012-02
TNPW2-2012-02
 
TNPW2-2013-04
TNPW2-2013-04TNPW2-2013-04
TNPW2-2013-04
 
Rich Internet Applications 2009 (Czech)
Rich Internet Applications 2009 (Czech)Rich Internet Applications 2009 (Czech)
Rich Internet Applications 2009 (Czech)
 
Smact a průmysl 4.0
Smact a průmysl 4.0Smact a průmysl 4.0
Smact a průmysl 4.0
 
TNPW2-2011-04
TNPW2-2011-04TNPW2-2011-04
TNPW2-2011-04
 
TNPW2-2012-07
TNPW2-2012-07TNPW2-2012-07
TNPW2-2012-07
 
Confluence_v1.4_extended
Confluence_v1.4_extendedConfluence_v1.4_extended
Confluence_v1.4_extended
 
TNPW2-2013-06
TNPW2-2013-06TNPW2-2013-06
TNPW2-2013-06
 
Webinář: Ochrana firemního perimetru za pomoci firewallů nové generace / 30.9...
Webinář: Ochrana firemního perimetru za pomoci firewallů nové generace / 30.9...Webinář: Ochrana firemního perimetru za pomoci firewallů nové generace / 30.9...
Webinář: Ochrana firemního perimetru za pomoci firewallů nové generace / 30.9...
 
TNPW2-2013-09
TNPW2-2013-09TNPW2-2013-09
TNPW2-2013-09
 

Similar to TNPW2-2016-05

Jak vypadá ideální bankovní API?
Jak vypadá ideální bankovní API? Jak vypadá ideální bankovní API?
Jak vypadá ideální bankovní API?
Petr Dvorak
 
Semináře M-Files: Konec hledání řešení pro správu firemních dat
Semináře M-Files: Konec hledání řešení pro správu firemních datSemináře M-Files: Konec hledání řešení pro správu firemních dat
Semináře M-Files: Konec hledání řešení pro správu firemních dat
Jaroslav Prodelal
 
Čtvrtkon #71 - Marian Benčat - Angular a NativeScript
Čtvrtkon #71 - Marian Benčat - Angular a NativeScriptČtvrtkon #71 - Marian Benčat - Angular a NativeScript
Čtvrtkon #71 - Marian Benčat - Angular a NativeScript
Ctvrtkoncz
 
Co sledovat a jak měřit u mobilního webu
Co sledovat a jak měřit u mobilního webuCo sledovat a jak měřit u mobilního webu
Co sledovat a jak měřit u mobilního webu
Akce Dobrého webu
 
Vývojářské Nástroje a Techniky
Vývojářské Nástroje a TechnikyVývojářské Nástroje a Techniky
Vývojářské Nástroje a Techniky
Martin Maly
 
Anatomie mobilního webu
Anatomie mobilního webuAnatomie mobilního webu
Anatomie mobilního webuFilip Mares
 
Moderni trendy ve_vyvoji_aplikaci
Moderni trendy ve_vyvoji_aplikaciModerni trendy ve_vyvoji_aplikaci
Moderni trendy ve_vyvoji_aplikaciRENESTEIN
 
Joomla!
Joomla!Joomla!
Joomla!
EstelOscora
 
TNPW2-2011-01
TNPW2-2011-01TNPW2-2011-01
TNPW2-2011-01
Lukáš Vacek
 
TNPW2-2014-01
TNPW2-2014-01TNPW2-2014-01
TNPW2-2014-01
Lukáš Vacek
 
Borek Bernard: TypeScript - příčetný jazyk pro web
Borek Bernard: TypeScript - příčetný jazyk pro webBorek Bernard: TypeScript - příčetný jazyk pro web
Borek Bernard: TypeScript - příčetný jazyk pro webDevelcz
 
Zaverecny ukol
Zaverecny ukolZaverecny ukol
Zaverecny ukol
Marek Mensik
 

Similar to TNPW2-2016-05 (20)

TNPW2-2011-08
TNPW2-2011-08TNPW2-2011-08
TNPW2-2011-08
 
Webové technologie
Webové technologieWebové technologie
Webové technologie
 
TNPW2-2012-01
TNPW2-2012-01TNPW2-2012-01
TNPW2-2012-01
 
Jak vypadá ideální bankovní API?
Jak vypadá ideální bankovní API? Jak vypadá ideální bankovní API?
Jak vypadá ideální bankovní API?
 
Semináře M-Files: Konec hledání řešení pro správu firemních dat
Semináře M-Files: Konec hledání řešení pro správu firemních datSemináře M-Files: Konec hledání řešení pro správu firemních dat
Semináře M-Files: Konec hledání řešení pro správu firemních dat
 
Čtvrtkon #71 - Marian Benčat - Angular a NativeScript
Čtvrtkon #71 - Marian Benčat - Angular a NativeScriptČtvrtkon #71 - Marian Benčat - Angular a NativeScript
Čtvrtkon #71 - Marian Benčat - Angular a NativeScript
 
Co sledovat a jak měřit u mobilního webu
Co sledovat a jak měřit u mobilního webuCo sledovat a jak měřit u mobilního webu
Co sledovat a jak měřit u mobilního webu
 
Vývojářské Nástroje a Techniky
Vývojářské Nástroje a TechnikyVývojářské Nástroje a Techniky
Vývojářské Nástroje a Techniky
 
Anatomie mobilního webu
Anatomie mobilního webuAnatomie mobilního webu
Anatomie mobilního webu
 
Seznam na mobilu
Seznam na mobiluSeznam na mobilu
Seznam na mobilu
 
Moderni trendy ve_vyvoji_aplikaci
Moderni trendy ve_vyvoji_aplikaciModerni trendy ve_vyvoji_aplikaci
Moderni trendy ve_vyvoji_aplikaci
 
TNPW2-2011-06
TNPW2-2011-06TNPW2-2011-06
TNPW2-2011-06
 
Joomla!
Joomla!Joomla!
Joomla!
 
TNPW2-2012-03
TNPW2-2012-03TNPW2-2012-03
TNPW2-2012-03
 
TNPW2-2011-01
TNPW2-2011-01TNPW2-2011-01
TNPW2-2011-01
 
TNPW2-2014-01
TNPW2-2014-01TNPW2-2014-01
TNPW2-2014-01
 
Borek Bernard: TypeScript - příčetný jazyk pro web
Borek Bernard: TypeScript - příčetný jazyk pro webBorek Bernard: TypeScript - příčetný jazyk pro web
Borek Bernard: TypeScript - příčetný jazyk pro web
 
Zaverecny ukol
Zaverecny ukolZaverecny ukol
Zaverecny ukol
 
CSAS_v06
CSAS_v06CSAS_v06
CSAS_v06
 
TNPW2-2012-04
TNPW2-2012-04TNPW2-2012-04
TNPW2-2012-04
 

TNPW2-2016-05

  • 1. Aktuální trendy ve vývoji webových aplikací a něco navíc Mgr. Lukáš Vacek lukas.vacek@uhk.cz TNPW2 2015/2016
  • 2. 2 „Zajímám se o budoucnost, protože v ní hodlám strávit zbytek svého života.“ – Ch. F. Kettering
  • 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. • 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ů… Internet 5
  • 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 (Výzvy: Dostupnost, identifikace, soukromí, bezpečnost) • Počítačová bezpečnost • Snižování energetické náročnosti (datová centra i klientská zařízení) • In-memory computing • 3D (tisk, vizualizace) Dnešní ICT trendy 6
  • 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! Dnešní webové technologie 7
  • 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? Aktuální problémy webových aplikací 8
  • 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í) Řešení? 9
  • 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 RIA (Rich Internet Application) 10
  • 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 Webová komunikace – beze-stavové HTTP 12
  • 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. Další možnosti komunikace 13
  • 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 Uživatelské rozhraní (UI, frontend…) 15
  • 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/ Webové formuláře 16
  • 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/ HTML5 (Web Forms 2.0 je součástí) 17
  • 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/ Lokální úložiště dat – Local storage, session storage 18
  • 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 XForms 19
  • 20. AJAX
  • 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 AJAX (Asynchronous JavaScript and XML) 21
  • 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 XML data HTTP request
  • 23. Flash, Flex a spol.
  • 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 21.x 3/2016), 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/ Adobe Flash 24
  • 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.15.xx (1/2016) • 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/ Adobe Flex 25
  • 26. • Adobe AIR (Adobe Integrated Runtime, dříve Apollo) • První stabilní verze 1.0 (únor 2008) – aktuální verze 21.xx (3/2016) • 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 Adobe Air 26
  • 27. • První verze v září 2007, aktuální verze 5.1.xx (1/2016) • 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) Microsoft Silverlight 27
  • 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 XUL (XML User Interface Language, čti Zůl) 28
  • 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ší Pracovní nástroje 30
  • 31. Web 2.0? Gartner: 4 hlavní trendy
  • 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 Web 2.0? 32
  • 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 Co znamená Web 2.0 pro návrh (design) aplikace? 33
  • 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ů Gartner: 4 hlavní trendy – Sociální sítě 34
  • 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 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 Gartner: 4 hlavní trendy – Cloud computing (více přednáška) 35 SaaS PaaS IaaS
  • 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 Gartner: 4 hlavní trendy – Mobilní aplikace (více na přednášce) 36
  • 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 Gartner: 4 hlavní trendy – Big data, datová analytika 37
  • 38. Pro srovnání 2014 • Mobilní cloud • Internet věcí >> Web věcí • Extrémní objemy dat, analytika • 3D revoluce – rychle, levně • E-learning • Mobilní sítě nové generace • Bezpečnost = ID vs soukromí • Healthcare • E-government • Cloud computingu ve vědě • Zdroj: 2014 Top technology trends (IEEE) 38 2016 • 5G sítě • VR a Augmentovaná realita • „Non Volatile“ paměť on/off • Cyber Physical System (jinak IoT) • Data Science • Capability-based Security • Strojové účení • Virtualizace síťových funkcí • Kontejnery v Cloudu • Zdroj: 2016
  • 40. Odkazy na internetu I. 40 • http://cs.wikipedia.org/wiki/Asynchronous_JavaScript_and_XML (AJAX) • http://www.asp.net/ajax/ (Microsoft ASP.NET AJAX Extension) • http://en.wikipedia.org/wiki/Html5 (HTML5) • http://www.adobe.com/products/flash/ (Adobe Flash) • http://www.adobe.com/products/flex/ (Adobe Flex) • http://www.openlaszlo.org/ (OpenLaszlo) • http://www.mozilla.org/projects/xul/ (XUL) • http://www.microsoft.com/silverlight/ (Silverlight) • http://www.sun.com/software/javafx/index.jsp (JavaFX) • http://labs.adobe.com/technologies/air/ (Adobe Air) • http://en.wikipedia.org/wiki/Web_2.0 (Web 2.0) • http://zdrojak.root.cz/clanky/cloud-computing-jiny-pohled-na-aplikace/ • http://www.augi.cz/programovani/cassandra-ocima-net-programatora/ (NoSQL) • http://www.zive.cz/bleskovky/v-americe-vladne-internetu-netflix-v-evrope-bittorrent/sc-4-a- 166249/default.aspx (Netflix a BitTorrent králové datového trafficu) • http://www.root.cz/clanky/big-data-a-jejich-zpracovani/
  • 41. Odkazy na internetu II. 41 • http://zdrojak.root.cz/clanky/jak-budeme-psat-webove-aplikace-za-tri-roky/ • http://zdrojak.root.cz/clanky/vyvojar-si-jen-s-programovanim-nevystaci/ • http://suewebik.net/webove/web20-def.html • http://www.lupa.cz/clanky/web-2-0-bublina-nebo-novy-smer-webu/ • http://www.slideshare.net/MedvidekPU/sociln-st-mn-internet-k-nepoznn • http://zdrojak.root.cz/clanky/jaky-software-pohani-facebook/ • http://www.lupa.cz/clanky/komunitni-server-a-komunitu-mate-kde/ • http://www.forbes.com/sites/gartnergroup/2014/10/21/gartners-top-10-strategic-technology- trends-for-2015/ • http://tech.ihned.cz/c1-63001160-internet-of-things-internet-veci-hrozby • Internet of Things – trendy: Dostupnost, identifikace, soukromí a zabezpečení