Rich Internet Applications 2009 (Czech)

Rich Internet
Applications 2009

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

2

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

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

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

Esmska – offline desktop aplikace

6

Resco Contact Manager (Windows
Mobile)

7

Asistenka Anna (online
web)

8

Co je Rich Internet Application

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

9

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

Co je AJAX

11

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

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

AJAX versus zbytek světa

14

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

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

16

Pluginové technologie

• Adobe Flex

• Microsoft SilverLight

• Java, JavaFX a další...

17

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

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

Adobe Flex diagram

20

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

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

SilverLight WebService
Interoperability

23

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

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

OpenLaszló diagram

26

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

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

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

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

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

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

• 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

Děkuji za pozornost 

34

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

Rich Internet Applications 2009 (Czech)

More Related Content

What's hot (20)

Viewers also liked (6)

Similar to Rich Internet Applications 2009 (Czech) (20)

Rich Internet Applications 2009 (Czech)