AJAX w aplikacjach webowych: zalety, wyzwania, typowe problemy. Andrzej Bednarz Wrocław,

AJAX w aplikacjach webowych: zalety, wyzwania, typowe problemy Andrzej Bednarz Wrocław, 20.06.2012

AGENDA Podstawy AJAX AJAX we frameworkach webowych na przykładzie Wicket AJAX produkcyjnie problemy i wyzwania AJAX w GWT i JQuery i kolejne wyzwania Podsumowanie 3

AJAX definicja AJAX ang. Asynchronous JavaScript and XML, asynchroniczny JavaScript i XML technologia tworzenia aplikacji internetowych, w której interakcja użytkownika z serwerem odbywa sie bez przeładowywania całego dokumentu, w sposób asynchroniczny. Źródło: Wikipedia, za J..J. Garrett Ajax: A New Approach to Web Applications, 2005 5

AJAX technologie Technicznie AJAX to zbiór różnych rozwiązań XMLHttpRequest JavaScript XML (JSON, HTML) HTML i CSS DOM Źródło: Wikipedia, za J..J. Garrett Ajax: A New Approach to Web Applications, 2005 6

Jak używać AJAX niskopoziomowo stworzenie XMLHttpRequest function getxmlhttprequest () { var xmlhttp; try { // Utworzenie obiektu XMLHttpRequest (silnik Gecko, WebKit, Presto, Trident w IE>6) xmlhttp= new XMLHttpRequest(); } catch(e) { // Wylapuje blad jesli JavaScript nie posiada obiektu XMLHttpRequest try { // Utworzenie obiektu ActiveXObject, który jest zawarty w kontrolce ActiveX IE xmlhttp = new ActiveXObject("Msxml2.XMLHTTP"); } catch(e) { try { // Utworzenie obiektu ActiveXObject, dla innych wersji IE xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } catch(e) { // Wyswietlenie bledu o braku obslugi obiektu XMLHttpRequest alert("your browser does not support AJAX!"); return false; } } } // zwrócenie obiektu return xmlhttp; } Źródło: Wikipedia 7

Jak używać AJAX niskopoziomowo wysyłanie żądania do serwera 1 var r; r = getxmlhttprequest(); 2 r.open('get', 'http://www.do.net/p/?id=123', true); // true dla asynchr. 3 4 r.onreadystatechange = processresponse; //rejestracja funkcji do //odbierania wyników r.send(null); //null dla żądania GET 5 function processresponse() { if (r.readystate == 4) { // odebrano odpowiedź od serwera if (r.status == 200) { // kod odpowiedzi HTTP OK document.getelementbyid('tresc').innerhtml = r.responsexml.getelementsbytagname('tekst')[0].childnodes[0].nodevalue; }; }; } Źródło: W.Gajda http://gajdaw.pl/ajax/wprowadzenie/ 8

Trudności w używaniu AJAX niskopoziomowo Developerzy a JavaScript Różnice w przeglądarkach Frameworki Trudność użycia / podatność na błędy Prędkość tworzenia aplikacji Integracja z częścią serwerową Image courtesy of FreeDigitalPhotos.net 9

Apache Wicket Wybrane cechy Czysty HTML + czysta Java Komponentowy Wysoka reużywalność AJAX bez JavaScript Szablon HTML HelloWorld.html Klasa Java HelloWorld.java Źródło: http://wicket.apache.org/learn/examples/helloworld.html 11

AJAX w Wicket Link rankproduct = new Link("rankProduct1") { }; @Override public void onclick() { updaterating(getproduct(), getuser(), 1); // nic więcej nie trzeba robić, //Wicket sam odświeży stronę } AjaxLink rankproductajax = new AjaxLink("rankProduct1") { @Override public void onclick(ajaxrequesttarget target) { updaterating(getproduct(), getuser(), 1); // powiedz Wicketowi, by odświeżył wybrany fragment target.add(rankpanel); } }; AjaxFallbackLink rankproductajaxfallback = new AjaxFallbackLink("rankProduct1") { }; @Override public void onclick(ajaxrequesttarget target) { updaterating(getproduct(), getuser(), 1); if (target!= null) { // powiedz Wicketowi, by odświeżył wybrany fragment target.add(rankpanel); } else { // Nie działa JavaScript i AJAX, pełne przeładowanie strony } } 12

Development -> testy akceptacyjne -> aplikacja na produkcji i zaczęły się problemy Skargi użytkowników Aplikacja działa zbyt wolno Brak reakcji aplikacji na składnie zamówień nie da się zamawiać Składanie zamówienia czasem nigdy się nie kończy ( kółeczko się kręci bez końca) a czasem się kończy bez oczekiwanego rezultatu 15

W poszukiwaniu rozwiązań Nie wiemy, czego nie wiemy Pierwsze akcje Kompleksowy monitoring na serwerze Winna jest prawdopodobnie sieć To dziwne, u mnie działa Przydatne narzędzie! SmokePing http:// oss.oetiker.ch/smokeping/ To nie rozwiązuje problemu 16

W poszukiwaniu rozwiązań Jak zweryfikować problemy z połączeniem (z AJAX) Dwa fundamentalne problemy: Brak odpowiedniego monitoringu po stronie przeglądarki Jak to zrobić po stronie przeglądarki? Jak zintegrować z monitoringiem serwera? Brak odpowiedniego środowiska testowego Przydatne narzędzie! WanEm http://wanem.sourceforge.net/ If you can't test it, you don't know that it works. If you don't know that it works, then it's useless. Uncle Bob 17

Rozwiązania Monitoring Obsługa błędów Wydajność Elementy: Logowanie Cookies JavaScript JMX Wiele rodzajów danych Czas oczekiwania na wysłanie Czas komunikacji z serwerem Czas przetwarzania odpowiedzi Wszelkie błędy Integracja z logami serwera Spójne dane Całościowy obraz Przydatne narzędzie! Perf4j http://perf4j.codehaus.org/ 18

Rozwiązania Monitoring Obsługa błędów Wydajność Przetwarzanie przeglądarki Komunikacja sieciowa Łączny czas widoczny dla użytkownika Przetwarzanie serwera 19

Rozwiązania Monitoring Obsługa błędów Wydajność Przykładowa tabela logów Data i czas Użytk ownik ID-sesji IP ID żądania Akcja Hierar chia Czas [ms] 20.06.2012, 14:34:12,000 user1 123456789 1.1.1.1 awe12e1 Zamówienie: oczekiwanie na wyslanie 1 250 20.06.2012, 14:34:12,250 20.06.2012, 14:34:12,500 20.06.2012, 14:34:12,500 20.06.2012, 14:34:12,550 20.06.2012, 14:34:12,800 20.06.2012, 14:34:17,250 user1 123456789 1.1.1.1 awe12e1 Zamówienie: komunikacja z serwerem user1 123456789 1.1.1.1 awe12e1 Zamówienie: przetwarzanie serwera user1 123456789 1.1.1.1 awe12e1 Zamówienie: walidacja 2-1- 1 50 user1 123456789 1.1.1.1 awe12e1 Zamówienie: zapis 2-1- 2 250 user1 123456789 1.1.1.1 awe12e1 Zamówienie: przetwarzanie wicket 2 2-1 2-1- 3 user1 123456789 1.1.1.1 awe12e1 Zamówienie: renderowanie 3 250 5000 750 450 20

Rozwiązania Monitoring Obsługa błędów Wydajność Brak obsługi błędów komunikacji Komunikaty o błędach Limit czasowy (timeout) 1 Uwaga! Przeglądarka robi to automatycznie dla zwykłych żądań. Ponowne próby wysłania żądania (retries) 1 1 Sami ręcznie musimy to zrobić 21

Rozwiązania Monitoring Obsługa błędów Wydajność Poprawianie wydajności Już poprzednie rozwiązania pomogły (retries, timeouts) Optymalizacja wysyłanego HTML Problem z dużymi odpowiedziami (funkcja innerhtml) Nadliczbowe żądania do serwera (specyfika Wicket i innych frameworków pełnostanowych) Wprowadzenie współbieżnych wywołań (specyfika Wicket) Wprowadzenie zbiorczych żądań (batch request) + Servlet Filter Optymalizacja odświeżania w tle (CometD) 22

Rozwiązania konkluzje Monitoring Obsługa błędów Wydajność Plik wicket-ajax.js mocno zmieniony utrudnione uaktualnianie wersji Wicket The Law of Leaky Abstractions, Joel Spolsky, http://www.joelonsoftware.com/ articles/leakyabstractions.html All non-trivial abstractions, to some degree, are leaky. SQL 1). where a=b and b=c 2). where a=b and b=c and c=a TCP/IP 23

Jeszcze o XMLHTTPRequest metody Źródło: Wikipedia 24

Jeszcze o XMLHTTPRequest własności Źródło: Wikipedia 25

Krótkie demo wicket-ajax.js W eclipse 26

Podsumowanie Wicket Można szybko pisać rozbudowane aplikacje webowe dla biznesu, wiele ważnych elementów jest już wbudowanych, łatwa reużywalność komponentów Średnio trudne modyfikowanie / rozszerzanie wbudowanych mechanizmów Pewne problemy z AJAX: Nie wszystkie sytuacje obsłużone domyślnie (timeouts, retries) W pewnych zastosowaniach wydajność może być niewystarczająca Ale to się zmienia, w najnowszej wersji (6.0 beta) jest JQuery-AJAX Czy warto go używać w projekcie? zdecydowanie tak * 27

GWT zmiana punktu widzenia 30

GWT Główne cechy Fundamentalna różnica w podejściu, bogaty klient (rich client) Java JavaScript (zoptymalizowany uniwersalny ) AJAX wbudowany i konieczny Zapewnia abstrakcje nad DOM i XMLHTTPRequest public void rankproduct() { // stworzenie pośrednika do serwera RankingServiceAsync rankingservice = (RankingServiceAsync) GWT.create(RankingService.class); } AsyncCallback callback = new AsyncCallback() { public void onsuccess(rank result) { // zmiana w GUI gdy przyjdzie wynik } public void onfailure(throwable caught) { // blad wywolania zadania } }; rankingservice.rank(productid, userdid, callback); Co ukrywa pewne niuanse, szczególnie dla GWT RPC, ważna klasa Request Builder 31

GWT - kontynuacja Główne cechy Zapewnia wsparcie dla sytuacji wyjątkowych Błędy komunikacji (metoda onfailure obowiązkowa część Callback) Limit czasowy (timeout), choć nie w podstawowym tutorialu dla RPC * Łatwo dorobić dodatkowe rozwiązania, np. ponowienia (retries) Monitorowanie połączenia klasa RequestBuilder Łatwe logowanie i debuggowanie Wnioski Zapewnia bogaty framework dla tworzenia Rich Internet Applications Intuicyjna obsługa błędów AJAX Łatwa optymalizacja wydajności, w tym komunikacji z serwerem Może być pracochłonny (integracja klient-serwer, bezpieczeństwo) 32

JQuery Główne cechy Czysty JavaScript Perspektywa jak przy GWT Dostęp do wszystkich mechanizmów AJAX, ale jednocześnie ładne API Łatwa obsługa sytuacji wyjątkowych 33

JQuery Wnioski Bardzo bogata biblioteka JavaScript Potrzebe doświadczenie w JavaScript, żeby efektywnie używać. Podobnie jak przy GWT, a nawet bardziej, może być pracochłonna integracja klient serwer Najmniejsza abstrakcja od technologii, najłatwiej naprawiać potencjalne błędy, łatwa optymalizacja Inne problemy Brak świadomości klienta Brak odpowiedniego projektu GUI (wskaźnik postępu, komunikaty o błędach, timeout, retries). 34

Podsumowanie Prawidłowa obsługa AJAX stawia wiele wyzwań Techniczne Koncepcyjne (co dokładnie) Który framework wybrać? Może żaden? Dobrać odpowiedni do potrzeb Sam framework nie wystarczy, dobrze znać podstawy technologii, które są poniżej ( Leaky abstraction ) Brak świadomości zagrożeń i ze strony klienta i wykonawcy Testowanie Doświadczenie Consulting Problemy tu opisane wyglądają znajomo Już w 1994: The 8 Fallacies of Distributed Computing, P. Deutsch i J.Gosling: The network is reliable. Latency is zero. Bandwidth is infinite. Transport cost is zero. 36

Dziękuję za uwagę. www.de.capgemini.com 38