Autor: Zee Gimon
jesteśmy tak przyzwyczajeni do bycia online i z telefonem komórkowym z naszych rąk, że często nie nawet nie zastanawiaj się, jaka technologia pomaga nam uruchomić tę lub inną aplikację. Zazwyczaj nie stanowi to problemu – nie myślimy o elektryczności, gdy włączamy światła., Jednak kiedy stoisz przed decyzją o utworzeniu aplikacji dla Twojej firmy, to sprzyja zrozumieniu, co oznacza SPA (single page application) i czym różni się od aplikacji wielostronicowych (Mpa).
w tym artykule porozmawiamy o tym, czym jest Single Page Application (SPA), jakie korzyści przynosi SPA użytkownikom i firmom, jak działa z SEO, jakie są jego wady i zalety, a wreszcie, jak SPA działa z takimi technologiami jak Blazor, Angular, React.js i Vue.js.,
======================
w tym numerze:
- definicja aplikacji Jednostronicowej
- zalety aplikacji Jednostronicowej
- wady aplikacji Jednostronicowej
- problemy z migracją aplikacji Jednostronicowej
- korzyści SPA dla użytkowników
- korzyści SPA dla firm
- Architektura aplikacji Jednostronicowej
- SPA i Angular, React.js, Vue.js, i .,NET
======================
co oznacza Single Page Application i dlaczego potrzebujemy Single Page Application
single-page application to aplikacja, która nie musi przeładowywać strony podczas jej użytkowania i działa w przeglądarce. Pomyśl o aplikacjach, z których korzystasz codziennie: Facebook, Google Maps, Gmail, Twitter, Dysk Google, a nawet GitHub. Wszystko to są przykłady SPA.
jedną z najlepszych zalet prawidłowo skonfigurowanego SPA jest user experience (UX), gdzie użytkownik cieszy się naturalnym środowiskiem aplikacji bez konieczności oczekiwania na przeładowanie strony i inne rzeczy., Pozostajesz na tej samej stronie, która jest zasilana przez język programowania JavaScript.
zanim przejdziemy dalej, są trzy skróty, które zobaczysz w tym artykule:
- SPA-aplikacja jednostronicowa (jak już wspomnieliśmy powyżej)
- MPA-aplikacja wielostronicowa (tradycyjna aplikacja, która ładuje nowe strony po kliknięciu linku)
- PWA – progresywna aplikacja internetowa (Strona internetowa, która jest zbudowana przy użyciu JavaScript lub jego frameworków i może działać jak aplikacja, tj.,, można na przykład dodać go do strony głównej telefonu komórkowego jako aplikację)
aplikacja jednostronicowa zalety: Dlaczego Warto korzystać z aplikacji Jednostronicowej?
główną zaletą aplikacji jednostronicowych jest jej szybkość. Większość zasobów SPA potrzebuje (HTML + CSS + skrypty) są ładowane przy uruchomieniu aplikacji i nie muszą być przeładowywane podczas użytkowania. Jedyne, co się zmienia, to dane przesyłane do i z serwera. Dzięki temu aplikacja jest bardzo responsywna na zapytania użytkownika i nie musi cały czas czekać na komunikację klient-serwer.,
liczne badania Google i kluczowe ustalenia firm takich jak Amazon i Wal*Mart pokazują, że jeśli strona ładuje się więcej niż 200 milisekund, może to zrujnować twoją firmę lub przynajmniej kosztować dużo pieniędzy. Na przykład Amazon twierdzi, że 1 sekunda dodatkowego opóźnienia w załadowaniu strony kosztuje ich 1% Sprzedaży (co, biorąc pod uwagę wielkość sprzedaży Amazon, wynosi 1,6 miliarda dolarów rocznie.)
z punktu widzenia programisty tworzenie takiej aplikacji jest usprawnione i zoptymalizowane., Nie musisz pisać kodu, aby renderować strony na serwerze. Nie potrzebujesz nawet serwera, aby rozpocząć proces rozwoju. Możesz zacząć od Pliku, aby rozpocząć. Poza tym programista może całkowicie ponownie użyć tego samego kodu backendowego po stronie serwera i wydajnego API dla aplikacji internetowej i natywnej aplikacji mobilnej.
Aplikacje jednostronicowe są doskonałe, gdy masz zespół programistów pracujących razem., Pozwala programistom backendów skupić się na interfejsie API, podczas gdy deweloperzy frontend mogą zwracać większą uwagę na tworzenie najlepszych doświadczeń użytkownika w oparciu o API backendów i wdrażanie pięknego interfejsu użytkownika.
debugowanie jednostronicowej aplikacji jest również łatwe za pomocą przeglądarki Chrome, ponieważ ma specjalne narzędzia do Bataranga i Reacta (technologie wykorzystywane w SPAs.) Za pomocą konsoli można monitorować operacje sieciowe, a także badać różne elementy strony i Powiązane Dane.,
proces buforowania jest również dość wydajny – aplikacja wysyła tylko jedno żądanie, przechowuje wszystkie przesyłane dane i może z nich korzystać. Jest to szczególnie ważne w czasach, gdy użytkownik może mieć słabą łączność – s / On nadal może korzystać z aplikacji, ponieważ jest ona zsynchronizowana z serwerem, gdy połączenie poprawia.
wspomnialiśmy powyżej o progresywnych aplikacjach internetowych (PWA), które można łatwo przekształcić w PWA. Z kolei umożliwia to programistom zapewnienie lokalnego buforowania i oferowanie klientom i użytkownikom trybu offline.,
wady aplikacji Jednostronicowej: dlaczego nie aplikacja jednostronicowa?
pomimo wszystkich zalet aplikacji jednostronicowych, nic nigdy nie jest idealne. Sprawdźmy czasy, kiedy SPA nie może być idealnym rozwiązaniem.
co rozumiemy przez wady aplikacji jednostronicowej?
Aplikacje jednostronicowe znacznie obciążają przeglądarkę. Na przykład, jeśli użytkownicy mają urządzenia o małej mocy, będą mieli słabe wrażenia z aplikacji pod względem szybkości.
dodatkowe problemy z JavaScript pojawiają się, ponieważ musisz upewnić się, że nie ma wycieków pamięci., Ponieważ aplikacja może działać przez długi czas-godziny na raz (w przeciwieństwie do MPA, gdzie żywotność strony była liczona w minutach), musisz upewnić się, że Twoje SPA nie zużywa więcej pamięci niż potrzebuje. W przeciwnym razie przyjemność z szybkiego ładowania stron zostanie zniszczona przez powolność niedostępnej pamięci na urządzeniu użytkownika.
jeszcze jedną wadą JavaScript jest to, że użytkownicy po prostu mogą go wyłączyć na swoich urządzeniach, a następnie musisz wymyślić dodatkowe sposoby, w jaki mogą uzyskać dostęp do informacji na swojej stronie internetowej lub aplikacji bez JavaScript.,
kolejną ważną rzeczą, o której należy pamiętać przy korzystaniu lub budowaniu SPA, jest bezpieczeństwo. Ze względu na Cross-site scripting (XSS) i fakt, że nie są ładowane nowe strony, hakerzy mogą uzyskać dostęp do witryny i wstrzyknąć nowe skrypty po stronie klienta.
dlatego, jeśli myślisz o zbudowaniu aplikacji jednostronicowej dla Twojej firmy, upewnij się, że podejmiesz niezbędne środki ostrożności, aby do tego nie dopuścić.
kolejnym problemem bezpieczeństwa jest prywatność poufnych danych. Początkowe ładowanie strony nie powinno zawierać żadnych informacji, które nie powinny być dostępne dla wszystkich użytkowników., Ponieważ całe SPA ładuje się od razu do urządzenia użytkownika, możesz przypadkowo przekazać dane, które powinny znajdować się za logowaniem lub w ogóle nie są dostępne.
Optymalizacja SEO dla aplikacji jednostronicowych
optymalizacja SEO jest trudna, gdy mamy aplikację jednostronicową, dlatego postanowiliśmy poświęcić jej osobny dział w zakładce Spa.
bezpieczniej jest korzystać z Spa, gdy nie polegasz na optymalizacji pod kątem wyszukiwarek (SEO), na przykład, jeśli dostęp do Twojej aplikacji jest możliwy tylko za pomocą loginu.,
Jeśli masz bloga, z drugiej strony trudniej jest wyszukiwarkom indeksować Twoją stronę w przeciwieństwie do tradycyjnych stron renderowanych na serwerze. Dzieje się tak dlatego, że adres URL tak naprawdę się nie zmienia, a różne strony zwykle nie mają swoich adresów URL.
dlatego nasza rada dla Ciebie: jeśli nie chcesz zawracać sobie głowy ustawieniami URL, wybierz framework, który obsługuje renderowanie po stronie serwera (SSR). Ponadto nie używaj okien iframe, używaj statycznych adresów URL i optymalizuj Skrypty na stronie, aby je przyspieszyć., Na koniec upewnij się, że Twoje strony mają HTML5, aby Google crawler mógł uzyskać do nich dostęp.
należy również zwrócić szczególną uwagę na komunikaty serwera, zwłaszcza błędy 200 i 404.
problemy z migracją aplikacji jednostronicowych
Aplikacje jednostronicowe brzmią tak, jakby zostały wysłane z nieba, aby ułatwić użytkownikom korzystanie z witryny. Jest szybki i wygodny; jest prawie idealny. Naprawdę tak jest?,
Kiedy myślisz o migracji do aplikacji jednostronicowej z MPa, musisz przestać i wziąć pod uwagę zalety i wady (o których wspomnialiśmy powyżej.)
kiedy korzystać ze SPA
Możesz zapytać: „kiedy należy korzystać z aplikacji jednostronnej?”Jeśli masz firmę lub osobistą stronę internetową, która potrzebuje dynamicznej platformy i małej ilości danych, aplikacja jednostronicowa jest dobrym pomysłem. Jest to również świetna opcja, jeśli planujesz opracować aplikację mobilną w przyszłości, ponieważ, jak wspomniano powyżej, API zaplecza może być używane zarówno dla aplikacji internetowych, jak i mobilnych.,
główną wadą jest SEO, ale architektura jest odpowiednia dla platform Software-as-a-Service (SaaS), zamkniętych społeczności i sieci społecznościowych (dlatego używa jej Facebook). Powodem tego jest to, że te witryny nie wymagają optymalizacji pod kątem wyszukiwania w Google.
kiedy używać MPa
duże firmy z szeroką gamą usług i produktów skorzystałyby z bardziej tradycyjnej aplikacji wielostronicowej. Takie firmy obejmują sklepy internetowe, strony firmowe, katalogi i marketplaces., Zarządzanie taką aplikacją byłoby również znacznie łatwiejsze, ponieważ możliwe jest podłączenie jej do wielu baz danych użytkowników.
W końcu tego typu firmy potrzebowałyby opcji optymalizacji pod kątem wyszukiwarek, ponieważ wiele z nich chciałoby znaleźć się w Google, Bing i innych wyszukiwarkach (aby sprzedawać produkty lub usługi, które oferują.)
korzyści SPA dla użytkowników
główną zaletą aplikacji jednostronicowych dla użytkowników końcowych jest oczywiście szybkość ładowania aplikacji, a także możliwość pracy w trybie offline.,
SPA oferuje liniowe doświadczenie użytkownika, co oznacza, że łatwo jest poruszać się po stronie i zrozumieć, gdzie znaleźć to lub tamto coś. Na przykład Saucony SPA ma wyraźny początek, środek i koniec. Korzystając z interfejsu UI/UX, twórcy aplikacji Saucony zastosowali przewijanie paralaksy i przejścia, aby podróż klienta była przyjemna.
Aplikacje jednostronicowe są świetne również na urządzeniach mobilnych, ponieważ większość czasu wystarczy, aby użytkownicy przewijali (pomyśl o niekończącej się ścianie Facebook). Nie musisz klikać żadnych linków, a po prostu ciesz się przewijaniem.,
korzyści SPA dla firm
jeśli chodzi o firmy, tworzenie aplikacji jednostronicowych zwykle zajmuje mniej czasu, ponieważ ten sam backend API może być używany zarówno dla Internetu, jak i urządzeń mobilnych. W rezultacie przepływ informacji jest usprawniony i znacznie łatwiej jest stworzyć samodzielną natywną aplikację mobilną.
biorąc pod uwagę zalety w optymalizacji prędkości SPA, firmy mogą również skorzystać, ponieważ użytkownicy będą bardziej zainteresowani korzystaniem z aplikacji, która jest szybka (ergo, kupić coś lub po prostu częściej korzystać z aplikacji.,)
Architektura aplikacji jednostronicowych i jak działa aplikacja jednostronicowa
Jak działają aplikacje jednostronicowe? Architektura aplikacji jednostronicowych jest dość prosta – składa się z technologii po stronie klienta (w HUSPI polegamy na Reaccie.js, Angular i Vue.js) oraz technologie po stronie serwera (do których zwykle używamy Node.js)
jeśli chodzi o sposób, w jaki strona renderuje się tak, jak jest prezentowana użytkownikowi, do wyboru są trzy opcje.,
renderowanie po stronie klienta (CSR)
- przeglądarka wysyła żądanie pliku HTML z serwera
- serwer reaguje szybko prostym plikiem HTML ze stylami i skryptami połączonymi
- użytkownik widzi pustą stronę lub jakiś obraz loadera podczas wykonywania js
- aplikacja pobiera dane, generuje widoki i wstrzykuje do DOM
- aplikacja jest gotowa do użycia
może to być opcja dla prostych stron internetowych, ale należy pamiętać, że renderowanie informacji po stronie klienta wymaga wielu zasobów z urządzenia i może przeciążać przeglądarkę., W rezultacie ta opcja może być najwolniejsza z trzech. Jednocześnie, jeśli masz stronę internetową o dużym natężeniu ruchu, CSR byłby lepszy, ponieważ przedstawiałby informacje użytkownikowi bez konieczności zbytniej rozmowy z serwerem.
Jeśli potrzebujesz opcji udostępniania społecznościowego, pamiętaj, że wszystkie strony w CSR zwykle mają te same wartości open graph (og:), dlatego musisz użyć SSR lub SSG.,ng (SSR)
- przeglądarka wysyła żądanie pliku HTML z serwera
- serwer pobiera wszystkie potrzebne dane, renderuje aplikację i generuje plik HTML aplikacji w locie
- użytkownik widzi dostępną zawartość
- jednostronicowa struktura aplikacji jest tym, co dołącza zdarzenia, generuje wirtualny DOM i wykonuje inne akcje
- aplikacja jest gotowa do użycia
renderowanie po stronie serwera jest opcja, na której polegamy w huspi, ponieważ łączy w sobie zarówno szybkość aplikacji jednostronicowej, jak i nie przeciąża przeglądarki użytkownika, dzięki czemu aplikacja jest szybka.,
statyczne Generatory stron (SSG)
- przeglądarka wysyła żądanie pliku HTML z serwera
- serwer reaguje szybko z już przygotowanym plikiem HTML
- użytkownik widzi stronę
- aplikacja pobiera dane, generuje widoki i wstrzykuje do DOM
- aplikacja jest gotowa do użycia
dobra i szybka opcja, ale pamiętaj, że jeśli masz dynamiczną zawartość na swojej stronie, statyczne Generatory witryn nie byłyby twoimi najlepszymi przyjaciółmi, ponieważ są zorientowane bardziej na statyczne strony (jak już można się domyślić z nazwy.,)
jak zrobić aplikację jednostronicową za pomocą Angular, React.js i Vue.js
kiedy pisałem ten artykuł, skonsultowałem się z naszymi programistami, aby zrozumieć, jakie są najlepsze na świecie praktyki w zakresie tworzenia aplikacji jednostronicowych, które są używane tutaj w HUSPI.
deweloperzy HUSPI wypróbowali i przetestowali wiele frameworków i mają różne środowiska pracy, ale jednoczą się mówiąc, że są trzy topowe frameworki dla frontendu-Angular, React i Vue – i jest jeden główny (ich ulubiony) dla backend – Node.js., Na rynku dostępnych jest kilka innych frameworków (jak Ember czy Knockout), ale nie używamy ich tak często.
aby zbudować jednostronicową aplikację, potrzebujesz AJAX i HTML5, aby zbudować responsywne strony, podczas gdy Angular, React i Vue są odpowiedzialne za obsługę „ciężkiego podnoszenia” po stronie klienta SPA.
co wybrać – React, Angular czy Vue?
napisaliśmy kilka artykułów na temat porównań między tymi frameworkami., Porównajmy je jednak jeszcze raz, aby sprawdzić, czy mają zalety w zakresie tworzenia aplikacji jednostronicowych.
Aplikacje Angular i Single-Page
Angular to framework JavaScript, który został wprowadzony przez Google w 2010 roku. Spośród trzech opcji, które porównujemy, Angular jest najstarszy i opiera się na maszynopisie. Ze względu na TypeScript, Angular jest świetną opcją do wykorzystania przez duże zespoły programistów i firm, które już używają tej technologii w swoich innych produktach.
jest najbardziej dojrzały wśród frameworków i ma przyzwoitą liczbę współpracowników na Githubie., Może to być trudniejsze z punktu widzenia krzywej uczenia się, ale jednocześnie warto.
wśród klientów, którzy używają Angular do swoich aplikacji jednostronicowych są Google (i ich produkty, takie jak Gmail i Dysk Google) i Wix, więc jeśli zdecydujesz się stworzyć aplikację jednostronicową za pomocą Angular, będziesz w świetnym towarzystwie.
# Contributors on GitHub: 997 (as of September 2019)
# Library size: 500+ KB
społeczność Angular ma zamiar wydać Angular 9.0.0 – czego można się spodziewać w nowej wersji Angular?
js i aplikacje jednostronicowe
React.js to biblioteka JavaScript, która została stworzona w 2013 roku przez Facebook., Facebook, Instagram i WhatsApp używają go szeroko w całej swojej linii produktów, w tym takich znanych aplikacji jednostronicowych, jak Facebook, Instagram i WhatsApp. Oprócz Facebook, Uber używa również React.biblioteka js dla swoich produktów.
spośród trzech konkurentów, React ma najwięcej współpracowników na Githubie – ponad tysiąc – co pomaga być na bieżąco z różnymi wyzwaniami, przed którymi stoją deweloperzy każdego dnia.
nasi programiści tutaj w HUSPI również preferują Reacta dla projektów, które rozwijamy (chyba że istnieją wymagania dla innego frameworka)., Jest zarówno lekki, jak i wystarczająco dojrzały, aby można go było przetestować i wypróbować i uznać za godny.
React jest właściwym wyborem dla tych, którzy dopiero zaczynają korzystać z frameworków interfejsu JavaScript, a także dla startupów i programistów, którzy lubią być elastyczni. React oferuje dobre opcje integracji z różnymi innymi technologiami i frameworkami, co jest bardzo pomocne, gdy pracujesz nad projektem z dużym ekosystemem.
# Contributors on GitHub: 1,336 (as of September 2019)
# Library size: 100KB
Vue.js i aplikacje jednostronicowe
Vue jest najmłodszą z trzech, stworzoną w 2014 roku przez byłego pracownika Google Yuxi (Evan) You., Mimo że żadna duża korporacja nie wspiera jej rozwoju, Vue udało się zdobyć popularność. Obecnie takie firmy jak GitLab, Baidu i Alibaba używają Vue.js dla ich potrzeb.
Jeśli wolisz prostotę i elastyczność w swoich front-endowych frameworkach, Vue jest dobrym rozwiązaniem. Poza tym jest najlżejszy ze wszystkich.
# Contributors on GitHub: 281 (as of September 2019)
# Library size: 80KB
ostatnio napisaliśmy artykuł o Reaccie.js vs. Vue.js
Aplikacje jednostronicowe i ASP.NET (Blazor)
postanowiliśmy dodać ASP.NET opcja do listy frameworków i technologii dla aplikacji jednostronicowych., Na osiedlu jest nowy dzieciak o imieniu Blazor. Jest to. NET Framework, który używa C# / Razor i HTML, który działa w przeglądarce z WebAssembly, zgodnie z repozytorium GitHub.
Microsoft ogłosił wydanie tego frameworka na początku 2019 roku i obecnie wygląda na to, że Wersja 1.0 jest gotowa. To poważne wsparcie ze strony dużej korporacji jest wielką zaletą Blazor, ponieważ natychmiast czyni ten instrument open-source częścią społeczności 60,000 + oss contributors z ponad 3,700 + oss company contributors.,
Blazor jest wygodnym narzędziem, ponieważ nie ma potrzeby stosowania maszynopisu ani JavaScript, można pisać całą logikę w C#. Mimo to Blazor oferuje interoperacyjność z interfejsami API i bibliotekami JavaScript, więc jeśli twój ekosystem jest duży i składa się z bibliotek JS, nie zgubisz się podczas przejścia.
. NET Blazor oferuje również dwie różne opcje – blazor tylko dla klientów i blazor po stronie serwera. Ten ostatni powinien być dostarczany z. Net Core 3.0.
czy to znaczy, że Blazor zabije Angular, React czy Vue? Nie wydaje nam się. Jest to jednak coś, na co warto mieć oko.
do stosowania w SPA .,NET, można również użyć ASP.NET rdzeń i ASP.NET MVC. Jak stworzyć aplikację jednostronicową w ASP.NET MVC? Ustawiasz go w backendzie, aby obsługiwał HTML na frontendzie.
# Contributors on GitHub: 67 (as of November 2019) + .NET contributors of 60K+
podsumowanie
biorąc pod uwagę wzrost urządzeń mobilnych i stylu życia w podróży, Aplikacje jednostronicowe są świetne. Czy Twoja firma pójdzie na SPA czy MPA – to bardziej pytanie dla analityków biznesowych i wymagań.,
w HUSPI mamy analityków biznesowych w zespole, którzy mogą pomóc w zrozumieniu i zdefiniowaniu potrzeb technicznych projektu (oraz programistów, którzy mogą zbudować architekturę i sam projekt od podstaw).