aplikacje internetowe nieświadomie zastępują stare aplikacje desktopowe. Są wygodniejsze w użyciu, łatwe do aktualizacji i nie są związane z jednym urządzeniem. I chociaż użytkownicy delikatnie przechodzą z aplikacji internetowych opartych na przeglądarce do aplikacji mobilnych, zapotrzebowanie na złożone i wyrafinowane aplikacje jest już ogromne i wciąż rośnie., Jeśli myślisz o stworzeniu własnej aplikacji, prawdopodobnie słyszałeś, że istnieją dwa główne wzorce projektowe dla aplikacji internetowych: aplikacja wielostronicowa (MPA) i aplikacja jednostronicowa (SPA). I oczywiście oba modele mają swoje plusy i minusy.

zanim zaczniesz przekształcać swój pomysł w prawdziwą aplikację, musisz odpowiedzieć na kilka ważnych pytań. Aby zdecydować, który model aplikacji jest dla ciebie lepszy, powinieneś postępować zgodnie z podejściem content-first, które podkreśla znaczenie umieszczenia treści aplikacji nad wszystkim innym., Dzieje się tak dlatego, że zawartość jest głównym powodem, dla którego użytkownicy będą lub nie będą korzystać z aplikacji. I to prowadzi nas do najważniejszych pytań: jakie treści chcesz zaprezentować i na jakich treściach najbardziej będą dbać Twoi użytkownicy.

jest wiele plusów i minusów SPA jak i MPA. Mam nadzieję, że poniższe linie wyjaśnią różnice między tymi dwoma wzorcami projektowymi i przybliżą cię do punktu, w którym dowiesz się, jaki rodzaj aplikacji bardziej pasuje do twojego pomysłu. I spraw, aby twój pomysł na własną aplikację się spełnił.,

aplikacja jednostronicowa to aplikacja, która działa w przeglądarce i nie wymaga przeładowania strony podczas użytkowania. Używasz tego typu aplikacji każdego dnia. Są to na przykład: Gmail, Google Maps, Facebook czy GitHub.
w spa chodzi o to, aby serwować znakomity UX, próbując naśladować „naturalne” środowisko w przeglądarce — bez przeładowywania strony, bez dodatkowego czasu oczekiwania. Jest to tylko jedna strona, którą odwiedzasz, która następnie ładuje wszystkie inne treści za pomocą JavaScript — od którego w dużym stopniu zależą.,

SPA żąda znaczników i danych niezależnie i renderuje strony prosto w przeglądarce. Możemy to zrobić dzięki zaawansowanym frameworkom JavaScript takim jak AngularJS, Ember.js, Meteor.js, nokaut.js .
strony jednostronicowe pomagają utrzymać użytkownika w jednej, wygodnej przestrzeni internetowej, w której treści są prezentowane użytkownikowi w prosty, łatwy i wykonalny sposób.

zalety aplikacji Jednostronicowej:

  • SPA jest szybki, ponieważ większość zasobów (HTML+CSS+skrypty) jest ładowana tylko raz przez cały okres użytkowania aplikacji. Tylko dane są przesyłane tam iz powrotem.,
  • rozwój jest uproszczony i usprawniony. Nie ma potrzeby pisania kodu do renderowania stron na serwerze. O wiele łatwiej jest zacząć, ponieważ zwykle można rozpocząć rozwój z pliku file: / / URI, bez użycia jakiegokolwiek serwera.
  • Spa są łatwe do debugowania za pomocą Chrome, ponieważ można monitorować operacje sieciowe, badać elementy strony i dane z nią związane.
  • łatwiej jest stworzyć aplikację mobilną, ponieważ programista może ponownie użyć tego samego kodu zaplecza dla aplikacji webowej i natywnej aplikacji mobilnej.
  • SPA może skutecznie buforować dowolną lokalną pamięć masową., Aplikacja wysyła tylko jedno żądanie, przechowuje wszystkie dane, a następnie może z nich korzystać i działa nawet w trybie offline.

wady aplikacji Jednostronicowej:

  • optymalizacja SEO aplikacji Jednostronicowej jest bardzo trudna i nie jest łatwym zadaniem. Jego zawartość jest ładowana przez AJAX (asynchroniczny JavaScript i XML) – metodę wymiany danych i aktualizacji w aplikacji bez odświeżania strony.
    aktualizacja 27.09.2017: w swoim komentarzu Iris Shaffer poprawnie wskazała, że można to zrobić również po stronie serwera. Rzeczywiście, dziś jest łatwiej niż kiedyś.,
  • pobieranie jest powolne, ponieważ wymagane jest załadowanie do klienta ciężkich frameworków klienckich.
  • wymaga obecności i Włączenia JavaScript. Jeśli użytkownik wyłączy JavaScript w swojej przeglądarce, nie będzie możliwe poprawne prezentowanie aplikacji i jej działań.
    aktualizacja 27.09.2017 :w swoim komentarzu Iris Shaffer zauważyła, że przy renderowaniu izomorficznym / po stronie serwera można już renderować stronę na serwerze. Gdy początkowe renderowanie jest na serwerze i może być buforowane, wyłączenie JS nie będzie problemem dla uzyskania renderowanej strony., Teoretycznie tak. Oczywiście możesz renderować po stronie serwera. Ale brak JS może być problemem dla innych funkcjonalności. Wiele rzeczy można zrobić w HTML & CSS ale z mojego doświadczenia byłoby piekłem zrobić to w ten sposób zamiast używać JavaScript.
  • w porównaniu do „tradycyjnej” aplikacji, SPA jest mniej bezpieczne. Ze względu na Cross-Site Scripting (XSS), umożliwia atakującym wprowadzanie skryptów po stronie klienta do aplikacji internetowej przez innych użytkowników.,
  • wyciek pamięci w JavaScript może nawet spowodować spowolnienie działania systemu
  • w tym modelu przyciski do tyłu i do przodu stają się dysfunkcyjne.
    aktualizacja 27.09.2017: obecnie nie jest to już problem.

aplikacja wielostronicowa

Aplikacje wielostronicowe działają w „tradycyjny” sposób. Każda zmiana np. wyświetl dane lub prześlij dane z powrotem do żądań serwera renderując nową stronę z serwera w przeglądarce. Aplikacje te są duże, większe niż uzdrowiska, ponieważ muszą być. Ze względu na ilość treści, aplikacje te mają wiele poziomów interfejsu użytkownika., Na szczęście to już nie problem. Dzięki AJAXOWI nie musimy się martwić, że duże i złożone aplikacje muszą przesyłać dużo danych między serwerem a przeglądarką. To rozwiązanie poprawia i pozwala odświeżyć tylko poszczególne części aplikacji. Z drugiej strony, dodaje więcej złożoności i jest trudniejsze do opracowania niż aplikacja jednostronicowa.

zalety aplikacji Wielostronicowej:

  • to idealne podejście dla użytkowników, którzy potrzebują wizualnej mapy, gdzie iść w aplikacji., Solidna, kilkupoziomowa nawigacja w menu jest istotną częścią tradycyjnej aplikacji Wielostronicowej.
  • bardzo dobre i łatwe do właściwego zarządzania SEO. Daje to większe szanse na ranking dla różnych słów kluczowych, ponieważ aplikacja może być zoptymalizowana dla jednego słowa kluczowego na stronę.

wady aplikacji wielostronicowej:

  • nie ma opcji używania tego samego backendu z aplikacjami mobilnymi.
    aktualizacja 27.09.2017: wtedy, kiedy pisałem ten artykuł, nie miałem zbyt dużego doświadczenia z backendem i aplikacjami mobilnymi., Dla mnie to oczywiste, że możesz używać tego samego backendu dla obu. I chciałbym podziękować wszystkim czytelnikom, którzy zwrócili na to uwagę.
  • rozwój Frontend i backend są ściśle ze sobą powiązane.
  • rozwój staje się dość złożony. Programista musi używać frameworków po stronie klienta i serwera. Skutkuje to dłuższym czasem tworzenia aplikacji.

SPA czy MPA?

przed wdrożeniem aplikacji internetowej należy wziąć pod uwagę jej cel., Jeśli wiesz, że potrzebujesz wielu kategorii — ponieważ na przykład prowadzisz sklep internetowy lub publikujesz wiele innych treści)-użyj witryny wielostronicowej. Jeśli jesteś pewien, że Twoja witryna jest odpowiednia dla czystego doświadczenia jednostronicowego-zrób to. A jeśli lubisz SPA, ale ledwo zmieścisz wszystko na jednej stronie, rozważ stronę hybrydową. To kolejny sposób, o którym wcześniej nie wspominałem. Aplikacja hybrydowa bierze to, co najlepsze w obu podejściach i stara się zminimalizować wady., Jest to w rzeczywistości aplikacja jednostronicowa, która wykorzystuje kotwice URL jako syntetyczne strony, umożliwiając więcej w nawigacji w przeglądarce i funkcjonalności preferencji. Ale to jest temat na inny artykuł.

być może w przyszłości każdy będzie używał modelu aplikacji Jednostronicowej (w tym aplikacji hybrydowej), ponieważ wydaje się to przynosić wiele korzyści. Wiele aplikacji dostępnych na rynku migruje w kierunku tego modelu. Jednak ponieważ niektóre projekty po prostu nie pasują do SPA, model MPA jest nadal żywy.

Autor: Paweł Skólski w neoteric.eu/blog 1 grudnia 2016 roku.