Archiwa tagu: technologie rich internet applications

Porównanie technologii

Aplikacje RIA wymagają odpowiednich technologii do tworzenia warstwy prezentacyjnej. By przenieść większość logiki do przeglądarki internetowej należy użyć odpowiedniego języka programowania aplikacji webowych. Wiąże się to także z wymaganiami dotyczącymi środowiska uruchomieniowego danej aplikacji w zależności od użytej technologii.

Najpopularniejszymi technologiami RIA są: Adobe Flash/Flex, Microsoft Silverlight, JavaFX, Ajax, HTML5. Każda z nich jest wykorzystywana na rynku do tworzenia aplikacji, jednak żadna nie jest dominującą dla tworzenia bogatych aplikacji internetowych. Wiąże się to z przeszkodami takimi jak instalowanie dodatkowych wtyczek w przeglądarce, niekompatybilność z przeglądarkami, problemy z wydajnością, a także od strony programistycznej – niewielka ilość narzędzi developerskich lub brak darmowych.

1. Adobe Flash/Flex

Flash jest dziełem firmy Adobe System Incorporated (wcześniej Macromedia), która także wprowadziła w 2001 roku pojęcie Rich Internet Applications. Flash to technologia, która pozwala na tworzenie aplikacji webowych działających w przeglądarce i wykorzystujących wtyczkę Flash Player. Bazuje na języku programowania Action Script. Aplikacje kompilowane są do pliku z rozszerzeniem SWF (format zamknięty grafiki wektorowej stworzony dla Flasha), gdzie następnie otrzymany plik wynikowy za pomocą kilku linijek kodu wstawia się do HTML. Adobe Flash na początku wykorzystywany był najczęściej do animacji, ruchomych banerów jako elementów reklamowych na stronie internetowej. Później zaczęto za jego pomocą tworzyć gry działające w przeglądarce oraz aplikacje, których zadaniem była zaawansowana interakcja z użytkownikiem (np. konfiguratory produktów w sklepie internetowym). Flash ze względu na możliwość tworzenia jednoekranowego i estetycznego interfejsu wykorzystywany jest również do tworzenia nieskomplikowanych stron służących jako wizytówki firm.

W celu łatwiejszego tworzenia aplikacji RIA, firma Adobe udostępniła Flex Framework bazujący na języku Action Script oraz MXML do opisu elementów interfejsu. Narzędziem do wspomagania tworzenia aplikacji Flex mogą być bezpłatny Adobe Flex SDK lub płatny Flash Builder. Flex pozwala na bezpłatne tworzenie aplikacji z użyciem języka Action Script, co wcześniej było niemożliwe ze względu na płatne środowisko Adobe Flash.

2. Microsoft Silverlight

Silverlight jest technologią internetową zaproponowaną przez firmę Microsoft do tworzenia aplikacji z bogatym i atrakcyjnym interfejsem użytkownika. Została wprowadzona w odpowiedzi na technologię Flash firmy Adobe. Silverlight podobnie jak Flash potrzebuje specjalnej wtyczki do przeglądarki (o tej samej nazwie), za pomocą której aplikacje wykonane w tej technologii będą mogły się uruchomić. Programowanie strony interfejsu opiera się na modelu .NET, dlatego dostępne są języki C#, Visual Basic. Dodatkowo wspierany jest Python oraz Ruby. Językiem dla front-endu jest XAML (ang. eXtensible Application Markup Language). XAML oparty jest na języku XML, zoptymalizowany do tworzenia warstwy prezentacji. Silverlight skierowany jest szczególnie do tworzenia aplikacji biznesowych (np. aplikacji działających w chmurze), wymagających zaawansowanego przetwarzania danych. Dodatkowo Silverlight ma lepsze wsparcie dla video, eliminując proces buforowania poprzez automatyczne dostosowanie jakości wyświetlanego filmu do szybkości łącza internetowego.

3. Ajax

Nie jest stricte technologią. Ajax jest pewnym wzorcem architektonicznym, łączącym wiele technologii webowych takich jak JavaScript, HTML/XHTML, CSS, DOM.

a) HTML/XHTML

Język znaczników HTML służy do budowania struktury strony WWW.  Jest najczęściej wykorzystywaną technologią webową i większość stron w Internecie opiera się na HTML-u. Obecnie używa się wersji XHTML opartej składniowo na dokumencie XML, co wymusza stosowanie się do reguł XMLa (np. żaden znacznik nie może pozostać bez zamknięcia, co w przypadku HTMLa było możliwe). Aplikacje Ajax potrafią modyfikować strukturę HTMLa, poprzez zmianę wyglądu, dodawanie nowych elementów i zdarzeń. W ten sposób statyczna strona HTML może stać się interaktywna.

b) CSS

Technologia CSS (ang. Cascading Style Sheets) służy do opisu wyglądu strony internetowej. Składa się z listy reguł definiujących wygląd każdego elementu. Ajax umożliwia łatwe manipulowanie na elementach CSS, dzięki czemu można ożywić statyczny interfejs i stworzyć go bardziej interaktywnym bez użycia Flasha czy Silverlight. Najnowszy CSS3 dąży do tego, by za jego pomocą było możliwe tworzenie animowanych elementów, operowanie na gradientach oraz cieniach, które do tej pory były wyłącznie domeną Flasha.

c) JavaScript

Główny język skryptowy, na którym bazuje Ajax. JavaScript działa po stronie przeglądarki i pozwala na większą interaktywność tworzonych aplikacji internetowych.

d) DOM

Model DOM (ang. Document Object Model) prezentuje hierarchiczną strukturę danych w postaci modelu obiektowego. DOM jest niezależny od języka programowania. Modyfikacja struktury dokumentu odbywa się za pomocą modyfikacji tzw. węzłów (ang. nodes). Konsorcjum W3C udostępnia interfejs JavaScript oraz Java do pracy z modelem DOM. Poprzez strukturalizowany zapis w postaci drzewa modelu dokumentu strony internetowej, możliwe jest za pomocą poleceń JavaScript manipulować wyglądem oraz układem elementów strony WWW.

W odróżnieniu do Flasha czy Silverlighta, Ajax  jest całkowicie darmowy. Era Ajaxa rozpoczęła się w 2005 roku, kiedy Jesse-James Garrett opublikował artykuł „Ajax: a new approach to web applications” (Garrett 2005), mimo że wcześniej aplikacje Ajax były dostępne w Internecie. Samo pojęcie „Ajax” znaczy „Asynchronous JavaScript + XML”. Aktualnie Ajax jest szeroko wykorzystywany do tworzenia aplikacji RIA, gdyż bazuje na standardowych technologiach internetowych. Oznacza to, że nie istnieje odrębny język programowania warstwy prezentacji, używa się sprawdzonych technologii internetowych, znanych już od bardzo dawna (HTML+CSS). Znane aplikacje wykorzystujące ten wzorzec programowania to Google Maps czy Gmail. Obecnie Ajaxa używa się w tworzeniu portali społecznościowych oraz e-commerce. Na bazie Ajaxa powstało wiele frameworków takich jak jQuery czy Prototype, udostępniających wiele gotowych funkcji, ułatwiających tworzenie bogatych aplikacji internetowych.

4. HTML 5

HTML 5 nie jest technologią samą w sobie. Łączy w sobie możliwości jakie dane język znaczników HTML, język skryptowy JavaScript oraz arkusz stylów CSS. Dopiero ten komplet poszczególnych technologii webowych zapewnia największe możliwości tworzenia interaktywnych serwisów WWW.

Konsorcjum W3C dąży do tego by nowy standard HTML 5, łączący w sobie HTML we wcześniejszych wersjach oraz XHTML stał się nowoczesną technologią wspomagającą tworzenie bogatych aplikacji internetowych. Obecnie trwają pracę nad HTML 5, który wciąż nie jest wspierany przez znane przeglądarki internetowe. W3C obiecuje, że do 2022 roku HTML 5 będzie dominującą technologią internetową, wspieraną przez większość przeglądarek.

HTML do tej pory nie miał praktycznie żadnych możliwości, by zwiększyć interaktywność swoich stron internetowych. Ograniczał się jedynie do statycznych znaczników, które mogły być modyfikowane dopiero za pomocą JavaScript. W nowej wersji HTML 5 twórcy zapowiadają, że ich język będzie miał więcej możliwości, których obsługa nie będzie wymagała użycia dodatkowych bibliotek JavaScript. Jednak są to daleko idące plany W3C, na razie przeglądarki są w stanie obsłużyć co najwyżej połowę z tego co zaplanowano. Wprowadzenie nowych możliwości HTML 5 ułatwiłoby pracę wielu początkującym programistą, którzy nie umieją innych skryptowych języków programowania. HTML 5 postanowił wyjść naprzeciw i we własnym języku zaadoptować różne rozwiązania, które możliwe były tylko z pomocą dodatkowych widżetów.

Najważniejszymi elementami HTML 5 w zakresie funkcjonalności, który HTML 5 ma w zamiarze obsługiwać, przybliżającymi go do Flasha, Flexa oraz języków skryptowych działających po stronie przeglądarki będą (Karpiuk 2010):

a) Kontrolki wyboru

Dodanie kontrolek umożliwiający wybór użytkownikowi: ColorPicker, DateChooser oraz Slider. Do tej pory widżety były zarezerwowane dla frameworków pisanych w JavaScript (np. jQuery User Interface) czy rozwiązań Adobe. HTML 5 chce zaadoptować te elementy, by były łatwiejsze w użyciu przez koderów.

b) Wizualizacja 2D oraz 3D

HTML 5 chce wprowadzić możliwość tworzenia grafiki dwu oraz trójwymiarowej. Zdefiniowany element <canvas> tworzy obszar grafiki rastrowej, gdzie można rysować z poziomu JavaScript.  Funkcjonalność jaką posiada canvas to między innymi rysowanie figur geometrycznych, wypełnianie ich kolorem lub gradientem, obsługa przezroczystości, cieniowanie, osadzanie obrazów rastrowych jak PNG, JPEG, GIF.  Canvas znajdzie zastosowanie dla takich elementów jak wykresy, grafy, gry przeglądarkowe czy inne aplikacje. Należy zwrócić uwagę, że metoda działania canvas to rendering trybu natychmiastowego (ang. immediate mode rendering), który wymaga jawnego pisania kodu JavaScript rysującego obraz, za to jest bardzo wydajny.

c) Video

Zawsze gdy była potrzeba zamieszczenia w serwisie plików muzycznych lub video trzeba było użyć dodatkowej wtyczki do przeglądarki w postaci Flash, Apple Quick Time lub RealPlayer. W3C dąży do tego, by wzbogacanie serwisu o elementy multimedialne było możliwe z poziomu samego HTML 5. Niestety na dzień dzisiejszy wiele kontenerów audio i video nie są obsługiwane przez różne przeglądarki, dlatego przygotowuje się pliki w paru wersjach, aby przeglądarka mogła samodzielnie wybrać format jaki jest w stanie odtworzyć.

d) WebSocket

Zapewnia kanał komunikacji w dwie strony (full-duplex) przeglądarki internetowej i serwera. Pozwala na jednoczesną komunikację we dwie strony co oznacza asynchroniczne przesyłanie danych między serwerem a aplikacją w przeglądarce.

e) Server-Send Events

Działa podobnie jak Web Socket ale jest jednokierunkowa. Pozwala na przesyłanie komunikatów serwerowi do przeglądarki, przez to pozwala na bieżąco aktualizować różne informacje jak wykresy kursów akcji czy status, bez dodatkowego przeładowania całej strony WWW.

f) Web Workers

Za wzorem obiektowych języków programowania technologia Web Workers pozwala na tworzenie wątków czyli przetwarzanie w tle. Możliwe jest wówczas wykorzystanie procesorów wielordzeniowych. Cechą wątków jest to, że nie blokują działania interfejsu w przeglądarce, lecz przez to, że zużywają sporo pamięci nadają się najbardziej do długo trwających zadań.

g) Drag&Drop

Metoda przeciągania oraz upuszczania elementów myszką jest znana już z aplikacji stacjonarnych. Dla użytkowników czynność ta była oczywista i naturalna. Kiedy Internet zaczął być popularny użytkownicy chcieli przenosić znane zwyczaje z pracy z aplikacjami desktopowymi do aplikacji internetowych. Wtedy się okazało, że nie ma takiej możliwości i realizacja części naturalnych czynności okazała się zupełnie inna niż dotychczas znana użytkownikom. Tak było chociażby w przypadku czynności drag&drop. Dopiero używanie tej metody było możliwe w aplikacjach zrealizowanych za pomocą Flasha. Również włączył się w to Ajax. Obecnie możliwe jest nawet manewrowanie boksami na stronie internetowej i układanie ich wedle własnych potrzeb. Wiele aplikacji sklepowych umożliwia klientom dodawanie produktów na stronie internetowej poprzez przeciągnięcie ich nad ikonę koszyka.

h) Praca offline

Zwykłe aplikacje oparte na HTML-u działają w sposób pytanie – odpowiedź. W momencie zerwania połączenia z serwerem dane przesyłane mogą być utracone, do skutkuje błędem na stronie WWW, która nie może zostać wyświetlona. Praca offline (ang. offline access) polega na korzystaniu i możliwości zapisywania danych mimo braku połączenia z serwerem, czyli aplikacja musiałaby pobierać wszystkie potrzebne dane na początku, a dane wprowadzane przez użytkownika przechowywać na lokalnym komputerze.

Do tej pory często stosowanym rozwiązaniem w przechowywaniu danych po stronie klienta są ciasteczka (ang. cookies). Mają jednak pewne ograniczenia w postaci maksymalnej liczy ciasteczek na domenę (20) oraz maksymalną wielkość przechowywanych danych (4KB). Nie ma więc możliwości przechowywania dużych ilości danych (najczęściej przechowuje się identyfikator sesji). Konsorcjum W3C proponuje lokalny zapis danych w postaci dwóch rozwiązań: Web  Storage oraz Web SQL Database.

Web Storage dotyczy zapisywania danych do pamięci trwałej w postaci słownika łańcuch – łańcuch przypisanej domenie, z której pochodzi strona WWW. Maksymalna wielkość pliku słownika to 5MB na domenę. Drugim rozwiązaniem jest baza danych SQL po stronie przeglądarki. W tej kwestii istnieje SQLite (realizujący lokalne zapytania za pomocą SQL) oraz Indexed Database API (zaproponowany przez Oracle obiektowy dostęp do bazy danych bez języka pośredniczącego). Niestety oba rozwiązania są różnie traktowane przez twórców przeglądarek internetowych, dlatego nie we wszystkich można stosować lokalne bazy danych.

Za pomocą powyższych metod zapisywania danych lokalnie możliwe jest stworzenie takich aplikacji, które w momencie utraty połączenia z serwerem będą mogły pracować offline, a kiedy połączenie internetowe wróci, same zsynchronizują dane aplikacji z danymi na serwerze.

Powyższe technologie webowe mają za zadanie udoskonalić proces tworzenia bogatych aplikacji internetowych, które de facto stają się standardem w sieci. Obecnie tworzenie serwisów czy aplikacji internetowych nastawione jest głównie na funkcjonalny oraz użyteczny interfejs. Dostępne technologie internetowe starają się dopasować do tego trendu, by spełniać wymagania dla bogatych interfejsów użytkownika. Obecnie, gdy duża część oprogramowania znanego jako oprogramowanie stacjonarne na przykład Word, Excel, używane przez większość osób na co dzień, przenosi się do sieci (Google Docs), użytkownicy oczekują tych samych funkcjonalności oraz szybkości działania, które znają z aplikacji desktopowych. Tutaj z pomocą przychodzą nowoczesne techniki internetowe jak Silverlight czy HTML 5, które posiadają coraz więcej cech ułatwiających pracę w sieci przeciętnemu użytkownikowi.

Obok oprogramowania biznesowego rozwija się także strefa rozrywki w Internecie. Powstaje coraz więcej gier na przeglądarki internetowe. Początkowo większość gier o bogatej grafice i interfejsie instalowane były wyłącznie na komputerze użytkownika. Obecnie gry przeglądarkowe dynamicznie się rozwijają, a tworzenie gier trójwymiarowych jest możliwe dzięki technologii Flash 3D. Również HTML 5 chce umożliwić tworzenie bogatych interfejsów, także trójwymiarowych, stawiając na dynamiczny rozwój swojej technologii, która do tej pory była bardzo ograniczona w swojej funkcjonalności.

 

Źródło: Praca magisterska pt. „Ocena jakości zewnętrznej bogatych aplikacji internetowych typu e-commerce.” (J. Pytlik, Uniwersytet Ekonomiczny we Wrocławiu 2012)