3. Agenda
• Online aplikace – chtěná závislost?
• Co je Rich Internet Application
• Co je AJAX, výhody a nevýhody
• HTML 5
• Pluginové technologie
• Adobe Flex
• Silverlight
• Java, JavaFX a ti další
• Výhody a nevýhody pluginových RIA technologií
• AJAX vs. plugin – co je lepší?
3
10.4.2009 - Pavel Růžička [MCPD]
Product Development Department
4. Online aplikace přinášejí nechtěné
závislosti budovat z ávis los t na online a plikac í c h,
•Ne ž z a č ne te
myslete na
to, jak budete fungovat bez nich
•Zvažujte výhody offline klientů
•Nepřenáší v požadavcích také UI
•Nevyžaduje trvalé spojení
•Může požadavky uložit do fronty a odeslat najednou až při
spojení
4
10.4.2009 - Pavel Růžička [MCPD]
Product Development Department
5. Co je Rich Internet Application
• E xis tuje s ilná s pojitos t s internete m.
• MS Word RIA není
• eBay Desktop je
• Mých5 ?
• Mo ž nos ti U I s e blí ž í tra di č ním de s ktopov ý m
aplika c ím
• rychlá odezva, drag&drop, klávesové zkratky…
• Snadnost spuštění aplikace se blíží navštívení
webové stránky
• není komplikovaný instalátor
• Nedochází ke stahování UI při každém požadavku
5
10.4.2009 - Pavel Růžička [MCPD]
Product Development Department
6. Esmska – offline desktop aplikace
6
10.4.2009 - Pavel Růžička [MCPD]
Product Development Department
7. Resco Contact Manager (Windows
Mobile)
7
10.4.2009 - Pavel Růžička [MCPD]
Product Development Department
9. Co je Rich Internet Application
• GMAIL
• Outlook Web Access
• MQC
• RIA != AJAX
9
10.4.2009 - Pavel Růžička [MCPD]
Product Development Department
10. HTML - HyperText Markup Language
HTML a HTTP je určeno pro dokumenty
• Sémantika pro složité dokumenty
• Request/response, bezstavový protokol
• Omezená interakce s uživatelem
• Beztypová komunikace jen pomocí GET/POST
• Používáme (zneužíváme) ho pro tvorbu GUI:
• Autentizace, autorizace
• Nutnost rychlé odezvy na požadavky
• Pokročilé zadávání strukturovaných dat
10
10.4.2009 - Pavel Růžička [MCPD]
Product Development Department
11. Co je AJAX
11
10.4.2009 - Pavel Růžička [MCPD]
Product Development Department
12. AJAX není zlato, co se třpytí
• P ou ž í váme ( z neu ž í váme) ho pro tvorbu G U I:
• Autentizace, autorizace
• Nutnost rychlé odezvy na požadavky
• Pokročilé zadávání strukturovaných dat
• Není možné řídit crossdomain přístup
• lze sice obejít přes JSON, ale je to pracné, nákladné
• Prohlížečů je mnoho - odladit aplikaci pro každý je obtížné a
nákladné.
• Výkonnost JavaScriptu je špatná – jednovláknové zpracování
• Technologické možnosti HTML/CSS jsou omezené
• Standardy se vyvíjejí pomalu (HTML 5 ?)
• Podpora AJAX vývoje v nástrojích je v porovnání s jinými
technologiemi slabá
• JavaScript má mnoho odlišností od "tradičních" jazyků typu Java
nebo C# - bariéra pro vývojáře zkušené serverových nebo
desktopových aplikací.
12
10.4.2009 - Pavel Růžička [MCPD]
Product Development Department
13. HTML 5 na pomezí ?
• Rozšíření formulářů - WebForms2
<input type="datetime„ required />
• Sémantické značky
<header>, <footer>, <nav>, <aside>, <section>, <article>, <dialog>
• Bezpečný iframe – sandbox
• Web Workers (vlákna na pozadí)
• Komunikace mezi okny
frame1.postMessage('data', 'http://www.example.com/');
• Data Storage
localStorage.setItem('key', data);
• AJAX s historií
history.pushState()
• Audio, video, canvas
<video src="soubor.ogg"></video>
<canvas> <img href="obrazek.png" alt="...desc..."> </canvas>
• Offline webové aplikace – manifest offline souborů
<html manifest="Aplikace.manifest">
13
10.4.2009 - Pavel Růžička [MCPD]
Product Development Department
14. AJAX versus zbytek světa
14
10.4.2009 - Pavel Růžička [MCPD]
Product Development Department
15. AJAX výhody a nevýhody
Výhody Nevýhody
•Snížení objemu •Zvýšení objemu
přenášených dat přenášených dat
•Zrychlení odezvy UI •Zpomalení odezvy UI
•Snížení zátěže serveru •Zvýšení zátěže serveru
•Vizuální přitažlivost •Snížená přístupnost
•Buzzword compatibility •Nová bezpečnostní rizika
15
10.4.2009 - Pavel Růžička [MCPD]
Product Development Department
16. Plugin ve webové stránce
• využívá browser jako hostitele (klasický příklad – flash
ve stránce)
16
10.4.2009 - Pavel Růžička [MCPD]
Product Development Department
17. Pluginové technologie
• Adobe Flex
• Microsoft SilverLight
• Java, JavaFX a další...
17
10.4.2009 - Pavel Růžička [MCPD]
Product Development Department
18. Adobe Flex
•definice uživatelských
rozhraní pomocí MXML
se podobá HTML
•stylování aplikace lze
zařídit pomocí
podmnožiny CSS
•ActionScript 3 dobře
kombinuje rysy
JavaScriptu a Javy ->
nižší bariéry pro vývojáře
18
10.4.2009 - Pavel Růžička [MCPD]
Product Development Department
19. Adobe Flex
• vyspělá technologie, sázka na jistotu
• Flex framework a základní vývojářské nástroje zdarma
• zdrojové kódy jsou textové soubory (na rozdíl od.fla)
• v prostředí Adobe AIR můžeme aplikace spustit v prohlížeči,
ale také instalovat na desktop (cross-platform)
• je aktivně vyvíjen
• již nyní existuje řada komponent a open source projektů
19
10.4.2009 - Pavel Růžička [MCPD]
Product Development Department
20. Adobe Flex diagram
20
10.4.2009 - Pavel Růžička [MCPD]
Product Development Department
21. Silverlight 2.0
• Podporuje několik jazyků
• C# , VB.NET
• Ruby, Phython i PHP
• prezentace (design) může využít formát XAML
• OOP koncept na vyšší úrovni než v ActionScriptu
• Dostupná je podmnožina .NET Frameworku avšak kompatibilní s
plným .NET
• Cross-platformní
• Windows, Mac OS a Linux (projekt Moonlight)
• prohlížeče Windows Explorer, Firefox, Opera nebo Safari
• SilverLight Mobile
• v současnosti podpora Windows Mobile, Nokia S60
• 3.0 má být skutečně cross-platform
• Server/klient vývoj těží z jednotného modelu a jazyka
• žádný speciální serverový framework, využívá běžné webservice/
WCF
• výhodné z pohledu nároků na znalosti vývojářů - nákladů
• vývojářů .NET je řádově více než Flex vývojářů
• Instalace v jednotkách megabajtů (5 MB)
• snadná a rychlá, podobná instalaci Flash Playeru
21
10.4.2009 - Pavel Růžička [MCPD]
Product Development Department
22. SilverLight – XAML a .NET
<Canvas xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
MouseEnter="OnMouseEnter">
<TextBlock Canvas.Top="30" Foreground="#FFFF3333">
Ahoj světe
</TextBlock>
</Canvas>
Canvas canvas = new Canvas();
canvas.MouseEnter += new MouseEventHandler(OnMouseEnter);
TextBlock t = new TextBlock();
t.SetValue(Canvas.TopProperty, 30);
t.Text = "Ahoj světe";
Color ratherRed = Color.FromArgb(0xFF, 0xFF, 0x33, 0x33);
t.Foreground = new SolidColorBrush(ratherRed);
canvas.Children.Add(t);
22
10.4.2009 - Pavel Růžička [MCPD]
Product Development Department
24. Java, JavaFX
• Java jednou z prvních RIA technologií – applety
• Java applety si vybudovaly špatnou reputaci
• Sun proto přichází s technologií JavaFX
• zatím hluboko v alfa fázi vývoje
• Pravděpodobně nový model podobný Flexu nebo Silverlightu
• běhovým prostředím zůstane tradiční "plná" Java
• řada z původních nevýhod appletů tak zůstane zachována
• Mohla by být zajímavá pro intranety nebo pro jiné, specifické
scénáře
24
10.4.2009 - Pavel Růžička [MCPD]
Product Development Department
25. ... a ti další
• oblast RIA není úplně přesně vymezená
• v principu podobné Flexu a Silverlightu
• XUL
• Mozilla Prism
• Curl
• OpenLaszlo
•…
• Google Gears výjimečné
• přidává do typicky webových aplikací offline podporu
25
10.4.2009 - Pavel Růžička [MCPD]
Product Development Department
26. OpenLaszló diagram
26
10.4.2009 - Pavel Růžička [MCPD]
Product Development Department
27. Výhody pluginových technologií
• Plugin od jednoho dodavatele
• odpadá ladění pro různé prohlížeče
• Výkon řádově lepší než u JavaScriptového interpretu
• podporuje multi-threading
• Odpadají omezení HTML/CSS
• z důležitých funkcí např. podpora kryptografie, zabezpečení
• Vytvořeno na míru vývojářům, ne grafikům nebo
autorům textů
• Podpora v nástrojích
• Flex nebo Silverlight mají funkční WYSIWYG
• jinak často nechybí kontrola syntaxe, debugging
27
10.4.2009 - Pavel Růžička [MCPD]
Product Development Department
28. Nevýhody pluginových technologií
• Je potřeba plugin - to je nevýhoda číslo jedna
• nikdy nebude tak rozšířený jako samotné webové prohlížeče
• FlashPlayer obsahuje až 95 % počítačů
• ostatní technologie bohužel méně
• Aplikace se v prohlížeči nechová jako běžná webová stránka
• například nefungují klávesové zkratky prohlížeče
• může být problém označování/kopírování textu a jeho tisk
• problematické je tlačítko "zpět„
• políčka pro zadání textu si nepamatují předchozí vstupy
• password manager si nepamatuje hesla
• zhoršená nebo žádná přístupnost
• může posílat nezašifrovaná HTTP data, ačkoli stránka byla načtena přes
HTTPS
28
10.4.2009 - Pavel Růžička [MCPD]
Product Development Department
29. AJAX versus plugin – AJAX má problém?
• crossdomain problém
• nutno odlaďovat pro každý browser
• obtížné přizpůsobení pro různé druhy browserů
• problémy ovládání s navigací back-forward
• obtížné ladění
• zanáší nepřístupnost do web aplikace
• zhusta jde o kombinaci statických a generovaných skriptů
• může být skoro nemožné používat z lokální kopie např. v telefonu
• může provádět pouze to, co podporuje JavaScript
• prakticky vyloučena interakce s prostředky klienta
29
10.4.2009 - Pavel Růžička [MCPD]
Product Development Department
30. AJAX versus plugin – plugin může více!
• může řídit přístup z různých domén
• cross-domain client access policy svoluje/zamezuje užití služby z jiné
domény
• ScriptAccess parametr ve stránce svoluje/zamezuje skriptování hostujícího
dokumentu
• může u klienta ukládat data (100kb – 1Mb)
• ačkoli zanáší nepřístupnost do web aplikace, některé asistivní
technologie umějí pluginové technologie omezeně zpracovávat a
zlepšují se
• lze snadno umístit u klienta jako jeden soubor a využívat jej jako
lokální aplikaci
• aplikace může omezeně pracovat s prostředky klienta
• aplikace má přístup k DOM stránky – může tedy ve stránce
provádět totéž, co AJAX nebo libovolný skript 30
10.4.2009 - Pavel Růžička [MCPD]
Product Development Department
31. Volba RIA technologie pro web
• Dokument je dokument
• nesmí se měnit „pod rukama“
• tj. žádný AJAX a nic podobného
• Aplikace je aplikace
• nesmí vyzrazovat svůj stav (např. v URL)
• ideální pro pluginové RIA technologie
• AJAX se nehodí -> pracnost údržby, problém offline podpory,
různých klientů...
• Formulář je jednoduchá aplikace
• není to dokument
• je pěkné ho zpestřit AJAXem
• měl by být funkční i bez AJAXu, byť omezeně
• AJAX by měl být použit jen jako “koření“ web aplikací
31
10.4.2009 - Pavel Růžička [MCPD]
Product Development Department
32. Volba RIA technologie
• Zvažujte důsledky online aplikací
•nechtěné závislosti
•tzv. „molochální systémy“
• Nenadužívejte AJAX tam, kde se nehodí
• používejte jako „koření“ online aplikací (mash-upy,
validace...)
• Pro bohaté aplikace volte pluginové
technologie
• nabízí více než AJAX
• mohou fungovat offline
• jsou přenositelné mezi různými browsery/zařízeními
• podpora HTML5 je slabá
32
10.4.2009 - Pavel Růžička [MCPD]
Product Development Department
33. • RIA je aktuálním a důležitým tématem vývoje software
• Investují do něj všichni velikáni oboru
• Poptávka po kvalitních RIA vývojářích je vysoká.
• Aplikace v prohlížeči - dvě velké, ostře oddělené skupiny
• AJAX a platformy vyžadující plugin.
• Překotný vývoj „plugin RIA technologií“
• AJAX už mnoho let stojí na stejných principech.
• HTML5 na pomezí současných AJAX a pluginových aplikací
• podpora v prohlížečích je slabá
• Nejzajímavější jsou dvě - Adobe Flex a Microsoft Silverlight
• Flex vyspělá platforma, díky Flash Playeru na více než 95 % prohlížečů
• Silverlight zatím jen zajímavým malým "tygrem„, na vyšší rozšířenost si musíme
počkat
Nejsou špatné a dobré technologie.
Jsou technologie vhodně a nevhodně
použité.
33
10.4.2009 - Pavel Růžička [MCPD]
Product Development Department
34. Děkuji za pozornost
34
10.4.2009 - Pavel Růžička [MCPD]
Product Development Department
35. Zdroje
• Rich Internet Applications v roce 2008
• Rich Internet Application
• Engineering Rich Internet Applications
• Projekt Esmska
• Resco Contanct Manager
• Ajax: A New Approach to Web Applications
• Ajaxian
• SilverLight.net
• Nové typy útoků na nové Web (2.0) aplikace
• SilverLight Cross-domain client access policy
35
10.4.2009 - Pavel Růžička [MCPD]
Product Development Department