Aplikacje SPA, Angular, AngularJS 1.x) przeniosإ‚o do przeglؤdarki wzorzec architektoniczny MVC...

download Aplikacje SPA, Angular, AngularJS 1.x) przeniosإ‚o do przeglؤdarki wzorzec architektoniczny MVC sprawdzony

If you can't read please download the document

  • date post

    03-Jun-2020
  • Category

    Documents

  • view

    0
  • download

    0

Embed Size (px)

Transcript of Aplikacje SPA, Angular, AngularJS 1.x) przeniosإ‚o do przeglؤdarki wzorzec architektoniczny MVC...

  • Aplikacje SPA, Angular, TypeScript

    dr hab. inż. Marek Wojciechowski

  • 2

    Ewolucja aplikacji webowych (pre-SPA)

    • Model 1 (pierwotny model WWW)

    – Strony powiązane linkami (jak dokumenty WWW)

    • Model 2 (MVC)

    – Kontroler decyduje o nawigacji

    – Strony nie odwołują się do siebie bezpośrednio

    • Model 3 (MVC + komponenty)

    – Wersja Model 2 inspirowana sposobem działaniem aplikacji desktopowych: komponenty obsługujące zdarzenia

    – Przebudowa i przeładowanie strony w reakcji na zdarzenie

    • (Model 2 / Model 3) + Ajax

    – Częściowa eliminacja nawigacji i odświeżania stron

    – Źródło: http://itsnat.sourceforge.net/php/spim/spi_manifesto_en.php

  • 3

    Single Page Applications (SPA)

    • Strona startowa aplikacji jest jedyną stroną pobieraną w całości z serwera (potem interakcje Ajax, WebSocket)

    • Strona aplikacji nie przeładowuje się w czasie pracy z nią

    • Nie następuje nawigacja do innych stron

    • Zmienia się stan (i wygląd) strony w przeglądarce

    • User Experience (UX) podobny do aplikacji desktopowych

    • Technologie: HTML5, CSS, JavaScript, Ajax, WebSocket

    • Frameworki: Angular, Ember.js, Meteor.js, ExtJS, React, …

  • 4

    Single Page Interface (SPI)

    • Czy model SPA jest odpowiedni tylko dla aplikacji webowych (web applications) czy również dla witryn (web sites)? – Pytanie otwarte, różne stanowiska

    – Głos „na tak”: „The Single Page Interface Manifesto” (http://itsnat.sourceforge.net/php/spim/spi_manifesto_en.php)

    • Problemy przy tworzeniu witryn mocno opartych o Ajax: – Zakładki do „stanu strony” po jej zmianie Ajaksem, historia przeglądarki

    – Indeksowanie przez wyszukiwarki (Search Engine Optimization (SEO))

    – Model biznesowy oparty o liczbę odwiedzin stron

    – Potrzeba wyskakujących okienek (pop-up)

    – Wolne pierwsze wyświetlenie strony

  • 5

    Stan aplikacji SPA/SPI

    • W tradycyjnej aplikacji webowej sekwencja stanów aplikacji to sekwencja stron

    • W aplikacji SPA/SPI każda częściowa zmiana strony w przeglądarce (Ajax, DOM) skutkuje zmianą stanu

    • Stany aplikacji SPA/SPI można podzielić na:

    – Stany fundamentalne (odpowiadałyby stronom w modelu tradycyjnym, warte tworzenia zakładek)

    – Stany drugorzędne

    • Przykład kategoryzacji stanów: obsługa logowania

    – Ekran do wprowadzenia użytkownika i hasła (fundamentalny)

    – Informacje o błędach w formularzu logowania (drugorzędny)

    – Ekran powitalny po zalogowaniu (fundamentalny)

  • 6

    Zakładki i historia przeglądarki w SPA

    • Opis problemu

    – Dla aplikacji SPA samoistnie pojawi się tylko jeden wpis w historii przeglądarki

    – Ewentualna zakładka będzie prowadzić do strony w wersji pobranej z serwera (stan początkowy)

    – Programowa podmiana (JS) window.location (location.href) może spowodować odwołanie przeglądarki do serwera

    • Rozwiązania

    – Wykorzystanie adresów URL adresujących fragmenty stron (#)

    • Podmiana adresu URL (przez location.href lub location.hash) na różniący się od poprzedniego treścią po znaku # nie powoduje odwołania do serwera

    – Wykorzystanie HTML 5 History API: history.pushState

    [W obu przypadkach obsługa nawigacji Back/Forward jest programowa]

  • 7

    Rozwiązania pozostałych problemów modelu SPA/SPI

    • Search Engine Optimization (SEO)

    – Specjalny tryb nawigacji dla robotów (web crawlers)

    • … (roboty obecnie ignorują JavaScript)

    • Linki w formacie (Ajax-crawlable): „#!” (wyszukiwarka widząc taki URL zmienia go na zawierający „?_escaped_fragment_” a aplikacja odpowiada snaphotem strony HTML)

    • Zwiększanie licznika odwiedzin stron

    – Ramka IFRAME prowadząca do pustej strony ze skryptem

    • Okienka pop-up

    – Problemy: brak okien modalnych w przeglądarce, współdzielenie stanu między oknami

    – Rozwiązanie: Symulowanie okienek modalnych/niemodalnych za pomocą elementów HTML z odpowiednim pozycjonowaniem

  • 8

    Architektura aplikacji SPA

    Źródło: http://singlepageappbook.com/single-page.html

    Cechy architektury:

    • Write-only DOM

    • Cały stan aplikacji w komponentach modelu

    • Widoki obserwujące zmiany w modelu

    • Modularyzacja z jak najmniejszymi zależnościami między modułami

    • Jak największa izolacja od implementacji DOM w przeglądarce

    • Brak kontrolera (znanego z MVC)

  • 9

    Kontrolery w aplikacjach SPA?

    • Część pierwszych frameworków dla aplikacji SPA (np. AngularJS 1.x) przeniosło do przeglądarki wzorzec architektoniczny MVC sprawdzony i powszechny po stronie serwerowej

    • Separacja modeli i widoków powszechnie akceptowana, ale czy spoiwem powinien być kontroler?

    – Koncepcja Model-View-Whatever, MV*

    • Typowe zadania przydzielane kontrolerom w SPA:

    – Obsługa zdarzeń w modelu DOM

    – Renderowanie szablonów widoków

    – Synchronizacja widoków z modelami

    • Lepiej jest powyższe zadania rozdzielić (zasada pojedynczej odpowiedzialności)

  • 10

    Angular (2+) / AngularJS (1.x)

    • Front-endowy framework do tworzenia aplikacji webowych

    • Rozwijany pod skrzydłami Google

    • Głównie zorientowany na aplikacje SPA

    • Od wersji 2.0 pozycjonowany jako jeden framework dla aplikacji webowych, mobilnych i desktopowych

    • Zaimplementowany w języku JavaScript i (od wersji 2.0) TypeScript, wykorzystujący HTML i CSS

    • Główna motywacja: HTML jest odpowiedni dla stron WWW, ale nieodpowiedni dla aplikacji webowych

  • 11

    AngularJS 1.x

    • Framework oparty o wzorzec MVC po stronie klienta

    • Obiekt scope ($scope) jako sposób współdzielenia danych między kontrolerem a widokiem

    – Spoiwo między kontrolerem i widokiem, pełni rolę ViewModel

    • Wiązanie danych (data binding):

    – Interpolacje {{ }}, one-way data binding, two-way data binding

    • Dyrektywy ng-* – dodatkowe atrybuty dla elementów HTML

    – np. ng-app, ng-model, ng-repeat

    • Filtry | – filtracja, sortowanie, transformacja danych

    • 4 rodzaje komponentów do logiki biznesowej:

    – Factory, Service, Provider, Value

    • Routing – nawigacja między widokami aplikacji SPA

    • Modularność (Angular modules)

  • 12

    AngularJS 1.x – „Hello World”

    Na podstawie: https://angularjs.org/

    Name: Hello {{yourName | uppercase}}!

  • 13

    Web Components

    • Zbiór cech dodawanych do specyfikacji HTML i DOM

    – Częściowo wspierany przez współczesne przeglądarki

    – Wsparcie dla starszych przeglądarek poprzez polyfille

    • Intencja: – przeniesienie komponentowego modelu tworzenia aplikacji na grunt WWW

    – umożliwienie tworzenia reużywalnych komponentów (widgets) do wykorzystania na stronach WWW i po stronie front-endu aplikacji webowych

    • Cechy (rodzaje Web Components)

    – Custom Elements - APIs to definiowania nowych elementów HTML

    – Shadow DOM – enkapsulacja DOM i styli w elemencie HTML

    • Przeglądarka renderuje DOM elementów z Shadow DOM bez umieszczania ich w DOM głównego dokumentu

    – HTML Imports – deklaratywny import dokumentów HTML do innych dokumentów HTML

    – HTML Templates – szablony fragmentów HTML

  • 14

    Angular 2+ na tle Angular 1.x

    • Istotne zmiany w porównaniu z Angular 1.x

    – Właściwie nowy framework

    – Brak zgodności wstecz, opcja migracji i współistnienia obu wersji w obrębie jednej aplikacji

    – Duże zmiany w czasie jego rozwoju (Alpha->Developer Preview->Beta->Final)

    • wiele tutoriali nieaktualnych

    – Angular 2 witany przez deweloperów z mieszanymi uczuciami

    – Kolejne zmiany 2 -> 4 -> 5 -> 6 już ewolucyjne, a nie rewolucyjne

    • Przyczyny radykalnych zmian: – Rozwój języka JavaScript, pojawienie się języka TypeScript

    – Rozwój przeglądarek

    – Nowe trendy, np. Web Components

    – Nadmierna komplikacja niektórych aspektów Angular 1.x (np. kilka rodzajów komponentów logiki biznesowej)

    – Problemy wydajnościowe (np. gdy dużo danych w $scope)

  • 15

    Cechy Angular 2+ (zalety na tle 1.x)

    • Framework również dla urządzeń mobilnych

    • Większa modularność

    • Wsparcie tylko współczesnych przeglądarek

    – Uproszczenie frameworka przez brak workarounds dla starszych

    • Orientacja na język TypeScript – Choć możliwe jest programowanie w czystym JavaScript

    • Wykorzystanie elementów ECMAScript 2015

    • Dynamiczne ładowanie

    • Prostszy routing, serwisy do logiki biznesowej

    • Poprawione wstrzykiwanie zależności

    • Kompon