Articles

jakie są korzyści?

13 października, 2020 by admin

w tym poście omówimy główne korzyści z przyjęcia architektury SPA podczas budowania naszych aplikacji kątowych i odpowiemy na kilka bardzo typowych pytań dotyczących Spa w ogóle.

ten post jest częścią trwającej serii Angular for Beginners, oto cała seria:

Angular for Beginners Guide – Getting Started (Setup Environment)
Angular for Beginners Guide: Why Angular?, Najważniejsze korzyści
Angular for Beginners Guide – Components vs Directives
dlaczego jedna strona aplikacji, jakie są korzyści? Co to jest SPA?

dlaczego Architektura SPA?

Zacznijmy od pierwszego pytania: Dlaczego Single Page Applications (SPAs)? Tego typu aplikacje istnieją od lat, ale nie stały się jeszcze powszechne w publicznym Internecie.

a dlaczego?

istnieje zarówno dobry powód, jak i jeszcze lepszy powód, dla którego może się to zmienić w najbliższej przyszłości.,

uzdrowiska w ciągu ostatnich kilku lat bardzo się zaadoptowały do budowy prywatnej części pulpitu nawigacyjnego Platform SaaS (Software as a Service) lub ogólnie usług internetowych, a także do budowania aplikacji opartych na danych korporacyjnych i wymagających formularzy.

ale czy Angular wymusza budowanie naszych aplikacji jako uzdrowiska?

odpowiedź brzmi Nie, Nie Ma, ale jest to ciekawa możliwość, że przynosi, biorąc pod uwagę wiele korzyści płynących z budowania aplikacji w ten sposób. Co sprowadza nas do kluczowego pytania:

dlaczego chciałbyś zbudować aplikację jako SPA?,

jest to coś, co często jest brane za pewnik. Każdy buduje aplikacje w ten sposób, ale jaka jest tego wielka zaleta? Musi być przynajmniej kilka zabójczych cech, prawda?

Zacznijmy od funkcji, o której nie wspomina się zbyt często: wdrożenie produkcyjne.

zrozumienie zalet wykorzystania SPA w produkcji pozwoli również odpowiedzieć na kluczowe pytanie:

Co to jest aplikacja jednostronicowa?

czasami nazwy w tworzeniu oprogramowania nie są dobrze dobrane, co może prowadzić do wielu nieporozumień., Tak z pewnością nie jest w przypadku terminu SPA: aplikacja jednostronicowa ma dosłownie tylko jedną stronę !! 😊

Jeśli chcesz zobaczyć aplikację na jednej stronie w akcji, zapraszam do udania się do AngularUnivhttps://angular-university.io I rozpocząć klikanie na stronie głównej na liście najnowszych kursów, oraz w górnym menu.

Jeśli zaczniesz nawigować, zobaczysz, że strona nie jest w pełni przeładowana – tylko nowe dane są wysyłane przez przewód, gdy użytkownik przechodzi przez aplikację – jest to przykład aplikacji jednostronicowej.,

pozwól, że wyjaśnię ci, jaka jest zaleta budowania takiej aplikacji i jak to w ogóle działa.

korzystając z narzędzi Chrome Dev, sprawdźmy indeks.html strony AngularUniv, która zostanie pobrana na stronie głównej (lub dowolnej innej stronie, jeśli nawigujesz i wciśniesz odśwież).

strona, która zostanie pobrana, to pierwsze żądanie, które zobaczysz w Panelu Chrome Network tab-czyli dosłownie Pojedyncza strona naszej aplikacji.

zauważmy jedną rzecz – ta strona jest prawie pusta! Poza metką, niewiele się tu dzieje.,

Uwaga: Na Rzeczywistej stronie pobrana strona ma również HTML, który został wstępnie renderowany na serwerze za pomocą Angular Universal

zauważ nazwy pakietów CSS i Javascript: wszystkie CSS, a nawet wszystkie Javascript aplikacji (która zawiera Angular) nie pochodzi nawet z tego samego serwera co index.html-to pochodzi z zupełnie innego serwera statycznego:

w tym przypadku oba pakiety pochodzą z wiadra Amazon S3!,

zauważ również, że nazwa pakietów jest wersjonowana: zawiera on znacznik czasu, przy którym została wykonana kompilacja wdrożeniowa, która wdrożyła tę konkretną wersję aplikacji.

zalety wdrażania aplikacji jednostronicowych

scenariusz, który widzieliśmy powyżej, jest naprawdę fajną zaletą aplikacji jednostronicowych:

Aplikacje jednostronicowe są bardzo łatwe do wdrożenia w produkcji, a nawet do wersji w czasie!,

pojedyncza aplikacja jest bardzo prosta do wdrożenia w porównaniu do bardziej tradycyjnych aplikacji renderowanych po stronie serwera: to naprawdę tylko jeden plikindex.html, z pakietem CSS i pakietem Javascript.

te 3 pliki statyczne mogą być przesyłane do dowolnego serwera treści statycznych, takich jak Apache, Nginx, Amazon S3 lub Firebase Hosting.

Oczywiście aplikacja będzie musiała wykonywać połączenia z backendem, aby uzyskać swoje dane, ale jest to oddzielny serwer, który można zbudować w razie potrzeby za pomocą zupełnie innej technologii: np. Node, Java lub PHP.,

właściwie, gdybyśmy zbudowali nasze REST API lub inny typ zaplecza w Node, moglibyśmy nawet zbudować go również w maszynopisie, a więc móc używać tego samego języka zarówno na serwerze, jak i na kliencie, a nawet dzielić się kodem między nimi.

wersjonowanie aplikacji jednostronicowych w produkcji

Kolejną zaletą wdrożenia naszej nakładki jako aplikacji jednostronicowej jest wersjonowanie i wycofywanie. Wszystko, co musimy zrobić, to wersja naszego wyjścia kompilacji (który tworzy pakiety CSS i JS podświetlone na Żółto powyżej).,

możemy skonfigurować serwer, który obsługuje nasze SPA z parametrem, który określa, która wersja aplikacji frontend zbudować: to jest tak proste!

ten typ wdrożenia skaluje się bardzo dobrze: statyczne serwery treści, takie jak Nginx, mogą skalować się dla bardzo dużej liczby użytkowników.

oczywiście ten typ wdrożenia i wersjonowania jest ważny tylko dla części frontend naszej aplikacji, nie dotyczy to serwera backendowego. Ale to ważna zaleta.

ale czy wdrożenie produkcyjne jest jedyną zaletą aplikacji jednostronicowych?, Z pewnością nie, oto kolejna ważna zaleta:

Aplikacje jednostronicowe i doświadczenie użytkownika

Jeśli kiedykolwiek korzystałeś z aplikacji internetowej, która stale przeładowuje wszystko z serwera przy prawie każdej interakcji z użytkownikiem, będziesz wiedział, że ten typ aplikacji daje słabe doświadczenie użytkownika ze względu na:

stała pełna strona przeładowuje
również ze względu na sieć iz powrotem wycieczki do serwera, aby pobrać cały ten HTML.,

w aplikacji jednostronicowej rozwiązaliśmy ten problem, używając zasadniczo innego podejścia architektonicznego:

w SPA, po początkowym załadowaniu strony, HTML nie jest wysyłany przez sieć. Zamiast tego, tylko dane są wymagane z serwera (lub wysyłane do serwera).

tak więc podczas pracy SPA wysyłane są tylko dane przez przewód, co zajmuje dużo mniej czasu i przepustowości niż ciągłe wysyłanie HTML. Spójrzmy na rodzaj ładunku, który przechodzi przez przewód zazwyczaj w SPA.,

na przykład w AngularUniv SPA, jeśli klikniesz na kurs, żaden HTML nie zostanie wysłany przez drut. Zamiast tego otrzymujemy żądanie Ajax, które otrzymuje ładunek JSON ze wszystkimi danymi kursu:

jak widać, wersja HTML kursu byłaby znacznie większa w porównaniu do zwykłego obiektu JSON ze względu na wszystkie znaczniki otwierania i zamykania, ale także istnieje wiele duplikatów HTML, jeśli ciągle ładujemy podobne strony w kółko.

na przykład rzeczy takie jak nagłówki i stopki strony są stale wysyłane do przeglądarki, ale tak naprawdę nie zmieniły się.,

w związku z tym mamy tutaj drugą dużą zaletę aplikacji jednostronicowej: znacznie ulepszone wrażenia użytkownika dzięki mniejszej liczbie przeładowań pełnej strony i lepszej ogólnej wydajności, ponieważ potrzebna jest mniejsza przepustowość.

więc dlaczego nie używamy Spa wszędzie wtedy?

skoro uzdrowiska mają tak wiele zalet, to dlaczego nie zostały przyjęte na większą skalę w publicznym Internecie? Jest ku temu dobry powód.

jeszcze stosunkowo niedawno wyszukiwarki takie jak Google miały trudności z prawidłową indeksacją jednej strony. Ale co z dzisiaj?,

w przeszłości istniały pewne zalecenia, aby używać specjalnego schematu indeksowania Ajax, który został tymczasem przestarzały. Czy Google jest teraz w stanie w pełni renderować Ajax?

w oficjalnym ogłoszeniu mamy informację, że Google search jest obecnie ogólnie w stanie indeksować Ajax, ale istnieją doniesienia, że nie jest jeszcze w pełni w stanie to zrobić.

i zaleca się zamiast tego stosowanie progresywnego ulepszania. Co to oznacza, że na tym etapie jest możliwe korzystanie z uzdrowisk w publicznym Internecie,czy jeszcze nie?

Spa przyjazne wyszukiwarkom?,

możliwe jest posiadanie wydajności i doświadczenia użytkownika SPA wraz z dobrymi właściwościami SEO: korzystanie z uniwersalnego silnika wstępnego renderowania Angular pozwala nam:

pre-renderować aplikację na zapleczu
wysłać HTML do przeglądarki razem z Angular
i mieć Angular bootstrap po stronie klienta i przejąć stronę SPA

czy Spa staną się częstsze w przyszłości?,

wyobraź sobie przyjazną dla SEO wersję Amazon, która nie odświeżyłaby się przy każdym przeładowaniu strony i znacznie poprawiłaby wydajność i wrażenia użytkownika: prawdopodobnie miałoby to ogromny pozytywny wpływ na czas spędzany przez klientów na stronie!

więc korzyści techniczne z SEO-friendly Spa są znaczące, a tym bardziej na urządzeniach mobilnych, i spodziewalibyśmy się, że tego typu aplikacje SEO friendly SPA staną się coraz częstsze w przyszłości także w publicznym Internecie.

ale ostatnie pytanie tej sekcji pozostaje bez odpowiedzi., Musisz myśleć na tym etapie po przeczytaniu kilku ostatnich sekcji:

Jeśli tylko minimalny HTML jest ładowany z serwera podczas uruchamiania, to w jaki sposób strona zmienia się w czasie?

co prowadzi nas do ostatniego pytania tego działu, a może najważniejszego:

Jak w ogóle działa aplikacja jednostronicowa?

rzeczywiście, jak mogą one działać, ponieważ załadowaliśmy tylko bardzo mało HTML z serwera? Po uruchomieniu aplikacji tylko dane przechodzą przez przewód. Skąd się bierze nowy HTML?,

bo gdzieś musi być generowany nowy HTML, bo tylko tak przeglądarka zmieni to co wyświetla, prawda?

odpowiedź jest prosta i dotyczy sposobu działania aplikacji jednostronicowych w porównaniu z tradycyjnymi aplikacjami serwerowymi.

w tradycyjnej aplikacji (która obejmuje zdecydowaną większość dzisiejszego publicznego Internetu), transformacja danych do HTML (lub renderowanie) odbywa się po stronie serwera.,

z drugiej strony, Aplikacje jednostronicowe robią to w znacznie inny sposób:

w SPA po uruchomieniu aplikacji proces transformacji danych do HTML został przeniesiony z serwera do klienta – Spa mają odpowiednik silnika szablonów działającego w Twojej przeglądarce!

i tak z tymi informacjami w ręku, zakończmy tę sekcję, podsumowując kluczowe punkty dotyczące aplikacji pojedynczych stron.,– Zalety uzdrowisk i kluczowa koncepcja ich działania

Budowanie naszej aplikacji jako SPA da nam znaczną liczbę korzyści:

będziemy w stanie przynieść dużo lepsze wrażenia użytkownikowi
aplikacja będzie czuła się szybciej, ponieważ używana jest mniejsza przepustowość, a nie pojawiają się odświeżanie pełnej strony, gdy użytkownik przechodzi przez aplikację
aplikacja będzie znacznie łatwiejsza do zainstalowania.wdrożenie w produkcji, przynajmniej na pewno część klienta: wszystko, czego potrzebujemy, to statyczny serwer, aby obsłużyć minimum 3 pliki: nasz pojedynczy indeks stron.,html, pakiet CSS i pakiet Javascript.
w razie potrzeby możemy również podzielić pakiety na wiele części za pomocą dzielenia kodu.
część nakładki aplikacji jest bardzo prosta do wersji w produkcji, pozwalając na uproszczone wdrożenie i cofnięcie do poprzedniej wersji nakładki w razie potrzeby

i to tylko jeden możliwy scenariusz wdrożenia Spa w produkcji.,

inne scenariusze produkcyjne

inne scenariusze obejmują wstępne renderowanie dużych części aplikacji i przesyłanie wszystkiego na statyczny serwer hostingowy, buforowanie w pamięci na serwerze tylko niektórych stron, wykonywanie wersjonowania za pomocą DNS, itp.

dziś prostsze niż kiedykolwiek tworzenie przyjaznych SEO Spa, więc prawdopodobnie będą one miały zwiększone zastosowanie w przyszłości, w scenariuszach, w których Spa nie były często używane.,

sposób, w jaki działają uzdrowiska

sposób, w jaki aplikacje jednostronicowe przynoszą te korzyści, jest powiązany ze sposobem, w jaki działają wewnętrznie:

po uruchomieniu, tylko dane są wysyłane przez przewód jako ładunek JSON lub inny format. Ale żaden HTML lub CSS nie jest już wysyłany przez przewód po uruchomieniu aplikacji.,

kluczowy punkt, aby zrozumieć, jak działają aplikacje jednostronicowe, jest następujący:

zamiast konwertować dane do HTML na serwerze, a następnie wysłać je przez przewód, w SPA przenieśliśmy teraz proces konwersji z serwera do klienta.

konwersja odbywa się w ostatniej sekundzie po stronie klienta, co pozwala nam zapewnić znacznie lepsze wrażenia użytkownika.

mam nadzieję, że przekona cię to o zaletach Spa., Jeśli nie, proszę dać mi znać i dlaczego tak nie jest, abym mógł lepiej rozwinąć niektóre punkty.

również na tym etapie chcę od razu pokazać ci jakiś kod. Zbudujmy małe spa Hello World w Angular i weźmy je stamtąd. Zobaczymy, jak koncepcje, które wprowadziliśmy map do małej aplikacji, którą mamy zamiar zbudować.

mam nadzieję, że ten post pomógł zrozumieć kluczowe zalety spa, i że ci się podobało!,