Rich Internet Applications 2009 (Czech)

10.4.2009 - Pavel Růžička [MCPD]Product Development Department

Rich Internet Applications 2009


2


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ší?


4

Online aplikace přinášejí nechtěné závislosti•Než začnete budovat závislost na online aplikacích, 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í


5

Co je Rich Internet Application

•Existuje silná spojitost s internetem.•MS Word RIA není•eBay Desktop je•Mých5 ?

•Možnosti UI se blíží tradičním desktopovým aplikací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


6

Esmska – offline desktop aplikace


7

Resco Contact Manager (Windows Mobile)


8

Asistenka Anna (online web)


9

Co je Rich Internet Application

•GMAIL•Outlook Web Access•MQC•RIA != AJAX


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


11

Co je AJAX


12

AJAX není zlato, co se třpytí• 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

• 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í.


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 StoragelocalStorage.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">


14

AJAX versus zbytek světa


15

AJAX výhody a nevýhody

Výhody

•Snížení objemu přenášených dat

•Zrychlení odezvy UI

•Snížení zátěže serveru

•Vizuální přitažlivost

•Buzzword compatibility

Nevýhody

•Zvýšení objemu přenášených dat

•Zpomalení odezvy UI

•Zvýšení zátěže serveru

•Snížená přístupnost

•Nová bezpečnostní rizika


16

Plugin ve webové stránce•využívá browser jako hostitele (klasický příklad – flash ve

stránce)


17

Pluginové technologie

•Adobe Flex

•Microsoft SilverLight

•Java, JavaFX a další...


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


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ů


20

Adobe Flex diagram


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


22

SilverLight – XAML a .NET

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);

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);

<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 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>


23

SilverLight WebService Interoperability


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


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


26

OpenLaszló diagram


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


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


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


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


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í


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á


33

Nejsou špatné a dobré technologie.Jsou technologie vhodně a nevhodně použité.

• 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


34

Děkuji za pozornost


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

Rich Internet Applications 2009 (Czech)

Technology

Transcript of Rich Internet Applications 2009 (Czech)