ROZSZERZENIA BIBLIOTEKI

Transkrypt

1 J A V A S C R I P T ROZSZERZENIA I BIBLIOTEKI Waldemar Korłub Aplikacje i Usługi Internetowe KASK ETI Politechnika Gdańska

2 Dynamiczne strony Dynamika po stronie klienta przeglądarki Modyfikowanie treści, struktury, wyglądu dokumentu HTML już po jego załadowaniu w przeglądarce n Bez komunikacji z serwerem JavaScript Dynamika po stronie serwera Generowanie dokumentu HTML przez aplikację działającą po stronie serwera n Zamiast serwowania statycznego pliku HTML Serwowanie różnych treści, np. w zależności od: n Użytkownika: Masz 2 nowe zaproszenia n Dnia: Pogoda na dziś: PHP, Ruby on Rails, Python, ASP.NET MVC, Java ServerFaces

3 Dynamiczne strony Asynchroniczna komunikacja z serwerem Wykorzystanie dynamiki w przeglądarce do pobrania nowych treści z serwera, który może generować je dynamicznie Bez przeładowywania całej strony AJAX

4 AJAX Asynchronous JavaScript and XML Asynchroniczne pobieranie danych z serwera już po załadowaniu strony do przeglądarki Zamiast przeładowywać całą stronę, pobierany jest jedynie jej fragment, który zostaje wyświetlony w przeglądarce przy użyciu API DOM Powszechnie wykorzystywany na stronach internetowych (np. Moja PG, enauczanie) Różnice w API pomiędzy przeglądarkami Przykład przy okazji biblioteki jquery

5 Żądania synchroniczne bez AJAXa Przeglądarka Kompletny dokument HTML Kompletny dokument HTML aktywność użytkownika żądanie HTTP oczekiwanie na załadowanie strony aktywność użytkownika żądanie HTTP oczekiwanie na załadowanie strony aktywność użytkownika odpowiedź HTTP odpowiedź HTTP Serwer przetwarzanie żądania przetwarzanie żądania

6 Żądania asynchroniczne: AJAX Przeglądarka aktywność użytkownika żądanie HTTP aktualizacja fragmentu strony z użyciem API DOM odpowiedź HTTP żądanie HTTP aktualizacja fragmentu strony odpowiedź HTTP Serwer przetwarzanie żądania przetwarzanie żądania

7 7 DOM: Document Object Model

8 DOM: Document Object Model DOM Obiektowy model dokumentu W postaci drzewa elementów API DOM zestaw interfejsów do operowania na drzewie dokumentu Pozwala na wyszukiwanie elementów dokumentu, ich modyfikację, usuwanie i dodawanie nowych

9 Wyszukiwanie elementów var divs = document.getelementsbytagname('div'); var age_inputs = document.getelementsbyname('age'); var posts = document.getelementsbyclassname('post'); //pojedynczy element: var header = document.getelementbyid('header'); //pojedynczy element: var post_title = document.queryselector('div#body div.post h1'); //zbiór elementów: var titles = document.queryselectorall('div#body div.post h1');

10 Usuwanie elementów //wyszukanie elementu do usunięcia: var header = document.getelementbyid('header'); //usunięcie elementu: header.parentnode.removechild(header);

11 Dodawanie elementów //nowy element <div>: var div = document.createelement('div'); //nowy element tekstowy: var text = document.createtextnode('abc'); //dodanie elementu tekstowego do elementu <div> div.appendchild(text); //dodanie elementu <div> do dokumentu document.body.appendchild(div);

12 Demo DOM Przykład 03-dom Narzędzia deweloperskie Drzewo dokumentu Debugger języka JavaScript

13 13 Web Storage API (HTML5)

14 Web Storage API (HTML5) Pozwala na zapisywanie danych po stronie przeglądarki Dane postaci: klucz (string) à wartość (string) Konieczność serializacji wszystkich przechowywanych wartości do postaci tekstowej Local Storage Dane utrzymywane pomiędzy kolejnymi uruchomieniami przeglądarki Session Storage Dane niszczone w chwili zamknięcia okna przeglądarki

15 Local storage function count_clicks() { if (localstorage.clickcount) { localstorage.click_count = Number(localStorage.click_count) + 1; } else { localstorage.click_count = 1; } var div = document.getelementbyid("result"); } div.innerhtml = "Licznik kliknięć: " + localstorage.click_count;

16 Local storage //w pliku HTML: <div id="result" onclick="count_clicks();"> Licznik kliknięć </div> Przykład 04-web-storage

17 Obiekty w Web Storage var student = { 'imie': 'Imiesław', 'nazwisko': 'Nazwiskowy', 'nr_albumu': 99999, }; //zapisanie reprezentacji tekstowej localstorage.student = JSON.stringify(student); //odczytanie danych i konwersja na obiekt var object = JSON.parse(localStorage.student); console.log(object.imie);

18 Usuwanie elementów //Local storage localstorage.removeitem("click_count"); //Session storage sessionstorage.removeitem("lastname");

19 19 Rozszerzenia i biblioteki

20 JavaScript 20 JavaScript nie jest idealnym językiem programowania Żaden język nie jest ale JavaScript wybitnie nie jest JavaScript był konstruowany z myślą o prostych zastosowaniach Brendan Eich miał opracować prototyp języka w ciągu 10 dni w maju 1995 roku JavaScript zaistniał na rynku, bo był jedynym językiem obsługiwanym przez przeglądarki JavaScript jest znany wielu deweloperom, bo nie mieli oni innego wyjścia

21 JavaScript 21 JavaScript nie posiada wielu mechanizmów przydatnych w dużych projektach Przestrzenie nazw/moduły na poziomie języka n Mogą być symulowane przy użyciu domknięć i anonimowych funkcji Klasy, interfejsy i związane z nimi mechanizmy obiektowe n Obiektowość oparta na koncepcji prototypów, dziedziczenie po obiektach nie po klasach Poziomy dostępu do składowych prywatne, publiczne, chronione Silne typowanie Rosnąca złożoność aplikacji internetowych prowadzi do dużych systemów działających w środowisku przeglądarki internetowej

22 Jak naprawić JavaScript? 22 Sam język rozwija się powoli Kolejne wersje w różnym tempie są implementowane przez przeglądarki Sytuacja znacząco poprawiła się w ostatnich latach à kolejny slajd Chcąc zapewnić kompatybilność należy wybierać najmniejszy wspólny mianownik

23 Rynek przeglądarek 23 W przeszłości nowe wersje przeglądarek wydawane były raz na rok lub raz na kilka lat Internet Explorer: ; ; ; Długi cykl wydawniczy opóźnia wprowadzanie nowych specyfikacji Google zapoczątkowało trend wydawania nowych wersji tak często, że nikogo to już nie obchodzi Google Chrome: ; (6,9 wydania/rok) Inkrementalne zmiany, szybkie wprowadzanie nowych funkcji Automatyczne instalowanie aktualizacji (przezroczyste dla użytkownika) Inne przeglądarki podążają za tym trendem: Firefox 50, Opera 42, Edge 14

24 Jak naprawić JavaScript? 24 Biblioteki 3rd party Biblioteki zewnętrznych deweloperów, nie stanowią części samego języka Rozwiązują typowe problemy występujące w codziennej pracy Oferują gotowe komponenty do zastosowania na stronie n Podobnie jak biblioteki CSS takie, jak Bootstrap Bibliotek 3rd party dla języka JavaScript nie brakuje

25 25 Biblioteki i rozszerzenia

26 Jak naprawić JavaScript? 26 JavaScript można naprawiać na wiele sposobów bo jest popsuty na wielu poziomach

27 Biblioteki narzędziowe 27 Dostarczają przydatne funkcje do realizacji typowych niewielkich zadań programistycznych np. Underscore.js, Lodash Operacja na kolekcjach _.each iterowanie _.map mapowanie wartości n _.map([1, 2, 3], function(num){ return num * 3; }); => [3, 6, 9] _.reduce redukcja kolekcji do wartości skalarnej n var sum = _.reduce([1, 2, 3], function(memo, num){ return memo + num; }, 0); _.contains([1, 2, 3], 3); - wyszukiwanie

28 Biblioteki narzędziowe 28 Operacja na tablicach _.flatten([1, [2], [3, [[4]]]]); => [1, 2, 3, 4]; _.intersection([1, 2, 3], [101, 2, 1, 10], [2, 1]); => [1, 2] _.difference([1, 2, 3, 4, 5], [5, 2, 10]); => [1, 3, 4] _.uniq([1, 2, 1, 4, 1, 3]); => [1, 2, 4, 3]

29 Biblioteki bazowe/ 29 Operacje na modelu DOM Ukrywają różnice pomiędzy przeglądarkami Dostarczają spójne API do realizacji typowych operacji na drzewie dokumentu Przydatne do modyfikacji stylów CSS, obsługi zdarzeń, animacji, obsługi AJAXa Nie oferują mechanizmów do organizacji struktury kodu aplikacji np. jquery, mootools, prototype

30 Biblioteki widgetów 30 Dostarczają gotowe komponenty (wraz z zachowaniami) do wykorzystania w interfejsie aplikacji np. jquery UI, dojo toolkit, PrimeNG

31 Biblioteki MV* 31 Dostarczają mechanizmy do organizacji struktury aplikacji i zarządzania przepływem sterowania Umożliwiają modularyzację, wydzielenie komponentów np. Angular, Backbone.js, ember

32 MVC: Model View Controller Wzorzec architektoniczny modelujący przepływ sterowania w interfejsie użytkownika Oryginalnie zaproponowany przez Trygve Reenskaug w latach 70. dla graficznych interfejsów użytkownika Dzieli kod aplikacji na trzy części w celu oddzielenia wewnętrznych reprezentacji danych od sposobu, w jaki są one przedstawiane użytkownikowi

33 MVC wykorzystuje Controller manipuluje Użytkownik Model jest prezentowany View aktualizuje

34 MVC Kontroler aktualizuje model danych w odpowiedzi na akcje użytkownika podejmowane w interfejsie Model danych reprezentuje dane, na których operuje aplikacja Widok generuje reprezentację danych widoczną dla użytkownika

35 MVC co z logiką biznesową? Wzorzec MVC modeluje interakcje z użytkownikiem nie logikę biznesową aplikacji Kontroler manipuluje modelem (widoku) Logika biznesowa często wymaga czegoś więcej Modyfikacja bazy danych Wywołanie zewnętrznej usługi (np. płatności) Modyfikacja innych obiektów w modelu danych (np. stany magazynowe)

36 Narzędzia do zarządzania 36 zależnościami Zewnętrzne biblioteki mogą posiadać zależności Wymagają innych bibliotek do prawidłowego działania Te inne biblioteki mogą mieć własne zależności itd. Ręczne zarządzanie zależnościami i ich aktualizowanie jest trudne i podatne na błędy Zaniechanie aktualizowania zależności może otworzyć luki bezpieczeństwa w aplikacji Narzędzia takie jak bower i npm zarządzają zależnościami w sposób automatyczny

37 Frameworki full stack 37 Framework łączy wiele bibliotek i narzędzi tworząc pojedynczą spójną platformę do budowania aplikacji np. Ext JS

38 Biblioteki polyfill 38 Emulują nowe API języka JavaScript w starszych przeglądarkach, które tych API nie obsługują Niektóre biblioteki tego typu nadpisują wadliwe implementacje API w przeglądarkach Modernizr Biblioteka wykrywające funkcjonalności oferowane przez przeglądarkę Ładuje biblioteki typu polyfill, jeśli nie wykryje obsługi wymaganych API

39 Biblioteki do testowania jednostkowego 39 Testy jednostkowe Zautomatyzowane testy badające poprawność działania poszczególnych komponentów w separacji od pozostałych elementów aplikacji Nie wymagają klikania w przeglądarce przez człowieka-testera Umożliwiają wykrywanie regresji w oprogramowaniu np. Mocha, Jasmine

40 40 jquery

41 41

42 jquery 42 Ujednolicone API dla wszystkich przeglądarek Ukrywa różnice pomiędzy rozwiązaniami różnych producentów Ułatwia pracę z modelem DOM dokumentu Ułatwia wykorzystywanie animacji Ułatwia obsługę zdarzeń Ułatwia obsługę technologii AJAX

43 Selektory 43 Pozwalają wybierać grupy elementów z drzewa DOM Opierają się na selektorach z CSS 1-3

44 Selektory 44 <div id="maindiv"> <div> Wewnętrzny div </div> <div class="poem-line"> Stylowy div </div> <div> <p title="tytuł">pierwszy akapit</p> <p>drugi akapit</p> <p>trzeci akapit</p> </div> </div>

45 45 Selektory

46 46 Selektory

47 47 Selektory

48 48 Selektory

49 Łańcuchy komend 49 <div id="maindiv"> <p> Litwo! Ojczyzno moja! ty jesteś jak zdrowie. <span style="display: none">komentarz 1</span></p> <p> Ile cię trzeba cenić, ten tylko się dowie, <span style="display: none">komentarz 2</span> </p> </div> $("#maindiv").addclass("poem-text").children("p").addclass("poem-line").children("span").addclass("poem-comment").toggle("fast");

50 Operacje na atrybutach i stylach 50.addClass(),.removeClass() oraz.toggleclass() dodawanie, usuwanie, przełączanie klas.css() dostęp do styli elementu.attr() dostęp do atrybutów.val() dostęp do wartości elementu (np. input).html() dostęp do treści elementu Umożliwia również zmianę zawartości

51 Trawersowanie drzewa DOM 51.add() dodaje zbiór elementów do zbioru bieżącego.children() wybiera dzieci każdego z elementów aktualnego zbioru.find(selektor) wybiera pasujących potomków każdego z elementów aktualnego zbioru.each() pozwala wywołać funkcje na każdym z elementów aktualnego zbioru

52 Obsługa zdarzeń 52 Zdarzenia na elementach dokumentu.focus().blur().change().click().keydown() /.keyup().mousemove()

53 Obsługa zdarzeń 53 Zdarzenia związane z załadowaniem drzewa DOM lub jego fragmentów: $(document).ready() n Po załadowaniu drzewa przed załadowaniem obrazków n Możliwość dodania wielu funkcji obsługi zdarzeń z różnych miejsc w aplikacji $(selektor).load() n Po załadowaniu elementu n Dopuszczalne elementy: Image, Script, Frame, Iframe, Window

54 Obsługa AJAXa 54 $.ajax() Wysyła asynchroniczne żądanie; umożliwia ustawienie wszystkich parametrów i typu żądania $.get() Wysyła żądanie metodą GET $.post() Wysyła żądanie metodą POST $(selektor).load(uri) Pobiera zawartość uri i umieszcza ją w elemencie wskazanym przez selektor

55 Plug-iny dla jquery 55 jquery.extend( { center: function($element) { $element.css("position", "relative"); var top = ($element.parent().height() - $element.height())/ 2-1; $element.css("top", top + "px"); var left = ($element.parent().width() - $element.width()) / 2; $element.css("left", left + "px"); } }); //$.center($(selektor)); jquery.fn.center = function () { jquery.center(this); return this; } //$(selektor).center() $("selektor1").load("uri").find("selektor2").center();

56 56 Poza językiem JavaScript

57 Inne języki w przeglądarce? 57 JavaScript jest jedynym językiem obsługiwanym powszechnie przez przeglądarki Istnieją rozwiązania umożliwiające implementację aplikacji w innych językach programowania Przed publikacją w Internecie są one tłumaczone na zrozumiały dla przeglądarek JavaScript n Transpilacja (w odróżnieniu od kompilacji) Przykładowe rozwiązania: GWT: Java à JavaScript (Google) CoffeScript à JavaScript Dart à JavaScript (Google) Kotlin à JavaScript (JetBrains) TypeScript à JavaScript (Microsoft)

58 58 Pytania?