Your SlideShare is downloading. ×
Rich Internet Applications 2009 (Czech)
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Rich Internet Applications 2009 (Czech)

454
views

Published on

Published in: Technology

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
454
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
1
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Rich Internet Applications 200910.4.2009 - Pavel Růžička [MCPD]Product Development Department
  • 2. 210.4.2009 - Pavel Růžička [MCPD]Product Development Department
  • 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ší? 310.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 temyslete nato, 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í 410.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 510.4.2009 - Pavel Růžička [MCPD]Product Development Department
  • 6. Esmska – offline desktop aplikace 610.4.2009 - Pavel Růžička [MCPD]Product Development Department
  • 7. Resco Contact Manager (WindowsMobile) 710.4.2009 - Pavel Růžička [MCPD]Product Development Department
  • 8. Asistenka Anna (onlineweb) 8 10.4.2009 - Pavel Růžička [MCPD] Product Development Department
  • 9. Co je Rich Internet Application• GMAIL• Outlook Web Access• MQC• RIA != AJAX 910.4.2009 - Pavel Růžička [MCPD]Product Development Department
  • 10. HTML - HyperText Markup LanguageHTML 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 1010.4.2009 - Pavel Růžička [MCPD]Product Development Department
  • 11. Co je AJAX 1110.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í. 1210.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"> 1310.4.2009 - Pavel Růžička [MCPD]Product Development Department
  • 14. AJAX versus zbytek světa 1410.4.2009 - Pavel Růžička [MCPD]Product Development Department
  • 15. AJAX výhody a nevýhodyVýhody Nevýhody•Snížení objemu •Zvýšení objemupř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 1510.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) 1610.4.2009 - Pavel Růžička [MCPD]Product Development Department
  • 17. Pluginové technologie• Adobe Flex• Microsoft SilverLight• Java, JavaFX a další... 1710.4.2009 - Pavel Růžička [MCPD]Product Development Department
  • 18. Adobe Flex•definice uživatelskýchrozhraní pomocí MXMLse podobá HTML•stylování aplikace lzezařídit pomocípodmnožiny CSS•ActionScript 3 dobřekombinuje rysyJavaScriptu 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ů 1910.4.2009 - Pavel Růžička [MCPD]Product Development Department
  • 20. Adobe Flex diagram 2010.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 2110.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
  • 23. SilverLight WebServiceInteroperability 2310.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 2410.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 2510.4.2009 - Pavel Růžička [MCPD]Product Development Department
  • 26. OpenLaszló diagram 2610.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 2710.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 2810.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í 3110.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á 3210.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čkatNejsou špatné a dobré technologie.Jsou technologie vhodně a nevhodněpoužité. 3310.4.2009 - Pavel Růžička [MCPD]Product Development Department
  • 34. Děkuji za pozornost  3410.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