w tym artykule omówię kilka podstawowych koncepcji budowania aplikacji jednostronicowych (SPA) i kilka przykładów aplikacji jednostronicowych utworzonych przy użyciu komponentów Syncfusion Essential JS 2.
Co to jest aplikacja jednostronicowa (SPA)?,
single-page application (SPA) to aplikacja internetowa, w której jedna strona widoku głównego zostanie załadowana z serwera, a następnie, w oparciu o interakcję z użytkownikiem, aplikacja dynamicznie zaktualizuje zawartość po stronie klienta bez przeładowywania strony.
Spa są bardziej płynne i responsywne niż konwencjonalne aplikacje wielostronicowe i najlepiej nadają się do tworzenia SaaS (Software as a Service), korporacyjnych pulpitów nawigacyjnych i innych aplikacji internetowych opartych na formularzach.,
cykl życia SPA
istnieje wiele frameworków do budowy SPA, ale koncepcja SPA w każdym frameworku pozostaje taka sama. Pobranie całego interfejsu użytkownika po stronie klienta lub widoku z serwera podczas początkowego ładowania. Następnie, na podstawie interakcji użytkownika lub nawigacji po aplikacji, interfejs użytkownika będzie dynamicznie odświeżany po stronie klienta.
SPA wykorzystuje minimalną przepustowość, aby skontaktować się z serwerem w celu aktualizacji danych z interakcji użytkowników i pobrać zaktualizowane dane podczas odświeżania strony internetowej.,
źródło obrazu:https://msdn.microsoft.com/en-us/magazine/dn463786.aspx
zalety SPA
Aplikacje jednostronicowe są bardziej płynne i reagują niż aplikacje wielostronicowe. Dzięki temu aplikacje te są również dobrze dostosowane do urządzeń mobilnych, bez potrzeby budowania osobnej natywnej aplikacji mobilnej.
SPA obsługuje bogate interakcje z wieloma komponentami, takimi jak Edytory i wyskakujące okienka, na stronie widoku. Komponenty te mogą mieć Stany pośrednie, które mogą być trudniejsze do zaimplementowania przy renderowaniu po stronie serwera.,
oprócz początkowego ładowania strony, SPA wykorzystuje mniejszą przepustowość do aktualizacji interfejsu użytkownika. Nie ma odświeżania strony podczas gdy użytkownik porusza się po aplikacji, dzięki czemu aplikacja jest wygodniejsza w użyciu na urządzeniach mobilnych.
ponieważ warstwa widoku i Warstwa danych są utrzymywane oddzielnie w SPA, będzie to znacznie łatwiejsze do wdrożenia w produkcji.
ważne pojęcia SPA
Routing
w SPA cała zawartość jest utrzymywana za pomocą oddzielnych adresów URL i można szybko nawigować do różnych treści za pomocą tych adresów URL.,
Aplikacje jednostronicowe zachowują stan za pomocą adresów URL lub śledzą Stany wewnętrznie, podczas gdy użytkownik przechodzi przez aplikację.
głównym przypadkiem użycia routingu stron w SPA jest sytuacja, gdy dana osoba udostępnia adres URL. Ta osoba może być pewna, że każdy, kto otworzy ten link, zobaczy dokładnie tę samą treść, przechodząc do dokładnego adresu URL w aplikacji.
wiązanie i synchronizacja danych
SPA wykorzystuje minimalną przepustowość do kontaktu z serwerem w celu pobrania danych lub aktualizacji modelu danych po interakcji użytkownika w aplikacji.,
podczas gdy użytkownik przechodzi przez aplikację, model danych na serwerze będzie aktualizowany jednocześnie za pomocą asynchronicznego żądania HTTP (AJAX).
na podstawie interakcji użytkownika dane są aktualizowane do modelu danych na serwerze. Te zmiany danych są odświeżane jednocześnie do interfejsu użytkownika, dzięki czemu użytkownik zawsze może przeglądać zaktualizowaną stronę internetową bez jej odświeżania.
szybki i płynny czas reakcji
SPA słynie z szybkich i płynnych reakcji na interakcję z użytkownikiem., Ich bogate interfejsy obsługują akcję użytkownika i dynamicznie odświeżają interfejs użytkownika bez żadnych opóźnień lub żądań z serwera. W ten sposób mogą uniknąć przerw w działaniu i sprawić, że aplikacja internetowa będzie zachowywać się bardziej jak aplikacja komputerowa.
oddzielenie warstwy widoku i danych
SPA jest zbudowane przy użyciu wzorców Model-View-Controller (MVC) i Model-View-ViewModel (MVVM), ale nadal można zbudować aplikację na własnym wzorze MV*.,
plik widoku (wraz z pakietem CSS), który przechowuje renderowanie interfejsu użytkownika aplikacji i warstwy danych aplikacji, jest dobrze utrzymywany oddzielnie w architekturze SPA.
separacja warstwy widoku i danych jest przeznaczona dla użytkownika do ponownego użycia strony widoku dla różnych zestawów danych lub zmiany strony widoku bez wpływu na model danych w produkcji.
separacja warstw widoku i danych w SPA ułatwia wersjonowanie i wycofywanie w produkcji.,
przykłady aplikacji jednostronicowych i dema
są to niektóre z rzeczywistych przykładów aplikacji jednostronicowych zbudowanych przy użyciu podstawowych kontrolek JS 2.
koszt Tracker
koszt Tracker jednostronicowy przykład aplikacji, prezentuje kilka podstawowych kontrolek JS 2 razem śledzić i wizualizować codzienne wydatki z wielkim interfejsem użytkownika.,
Tracker wydatków – SPA
różne strony internetowe w aplikacji, pulpicie nawigacyjnym, transakcjach I O firmie, używają DataGrid, Wykresów i innych niezbędnych kontrolek JS 2 do wizualizacji modelu danych. Ta aplikacja wykorzystuje mechanizm przekierowywania stron do przejścia stron do nawigacji między widokami.
użytkownicy mogą nawigować między tymi widokami za pomocą adresów URL, które zostaną utworzone dla każdej strony ze względu na routing., Ponieważ ta aplikacja jest zbudowana przy użyciu architektury SPA, wszystkie strony internetowe zostaną pobrane przy początkowym ładowaniu aplikacji internetowej. Następnie przejście strony nastąpi całkowicie po stronie klienta bez żądania żadnych stron internetowych serwera. Podczas przechodzenia do różnych widoków adres URL aplikacji zostanie odpowiednio zaktualizowany.
wiązanie danych odgrywa ważną rolę w SPA. Ponieważ wszystkie strony internetowe są pobierane po stronie klienta, komponenty interfejsu użytkownika powinny być odświeżane z aktualnymi danymi wtedy i tam., Podczas wykonywania dowolnych czynności edycyjnych na stronie transakcji zmiany zostaną jednocześnie zaktualizowane do modelu danych. Zmiany te zostaną odzwierciedlone w komponentach interfejsu użytkownika dostępnych na innych stronach.
ponieważ SPA doskonale nadają się do renderowania zarówno w przeglądarkach desktopowych, jak i środowiskach mobilnych, Ta aplikacja jest zbudowana z płynnym i responsywnym projektem do renderowania na urządzeniach mobilnych.
demo tej aplikacji jest dostępne na naszej stronie internetowej, a źródło na Githubie znajdziesz tutaj.,
Tracker wydatków – widok mobilny
poczta internetowa
poczta internetowa jest przykładem aplikacji jednostronicowej z interfejsem użytkownika podobnym do Outlooka zbudowanym do zarządzania skrzynką pocztową.
Ta aplikacja jest zbudowana z bogatych interfejsów i interaktywnego projektu przy użyciu komponentów Syncfusion, takich jak akordeon, ListView i pasek boczny jako pojedynczy widok strony internetowej. Aplikacja jest podzielona na trzy sekcje do zarządzania skrzynką pocztową: foldery pocztowe, elementy poczty i obszar zawartości poczty., Ze względu na responsywny projekt, Ta aplikacja może być renderowana z łatwością na urządzeniach mobilnych i przeglądarkach desktopowych.
wiązanie danych odgrywa znaczącą rolę w tej aplikacji do aktualizacji skrzynki pocztowej i wyświetlania zawartości poczty na podstawie interakcji użytkownika. Elementy listy pocztowej zostaną odświeżone o odpowiednią zawartość na podstawie wyboru użytkownika w folderach pocztowych. Obszar poczty zostanie odświeżony o zaktualizowaną zawartość, gdy użytkownik wybierze element poczty z listy mail.
demo tej aplikacji można znaleźć na naszej stronie internetowej, a źródło na Githubie.,
poczta internetowa – SPA
aplikacja obsługuje wiele interakcji użytkownika i odpowiednio odświeża zawartość bez odświeżania strony, dzięki czemu aplikacja wygląda jak aplikacja desktopowa.
responsywny projekt tej aplikacji ułatwia renderowanie na urządzeniach mobilnych z najlepszym interfejsem użytkownika.,
Kalkulator kredytowy
Kalkulator kredytowy jest jednostronicowym przykładem aplikacji, który prezentuje komponenty takie jak DataGrid, wykresy, suwak i inne razem w jednym widoku strony do obliczania płatności pożyczki na podstawie kwoty pożyczki, odsetek i okresu.,
Kalkulator kredytowy – SPA
powiązanie danych w tej aplikacji działa w taki sposób, że podczas dostosowywania wartości kwoty kredytu, odsetek i terminu za pomocą komponentu suwak, DANE Dla komponentów wykresu i siatki zostaną odpowiednio odświeżone o odpowiednie dane.
można również odświeżyć zawartość wykresu, wybierając żądany miesiąc do wyświetlenia za pomocą kontrolki DatePicker. Po zmianie miesiąca, który ma być wyświetlany, dane dla odpowiedniego miesiąca zostaną zwrócone z modelu., To samo zostanie zaktualizowane w kontroli Wykresów zbyt.
demo tej aplikacji znajdziesz na naszej stronie internetowej, a jej źródło znajdziesz na Githubie.
Health Tracker
Health Tracker to kolejny przykład aplikacji jednostronicowej do śledzenia zdrowia osoby poprzez śledzenie spożycia jedzenia, przebytej odległości, spożywanej wody i czasu snu.
Ta aplikacja jest zbudowany z bogatych interfejsów i interaktywny projekt przy użyciu kontroli Syncfusion, takich jak wykresy i karty jako pojedynczy widok strony internetowej. Powiązanie danych służy do prezentacji danych na wykresie., Źródło tej próbki można znaleźć w tej lokalizacji GitHub.
Health Tracker – SPA
Diagram Builder
diagram Builder to aplikacja, która pomaga w tworzeniu różnych diagramów dla różnych przypadków użycia, takich jak wykresy organizacyjne, drzewa hierarchiczne i mapy myśli.
Ta aplikacja jest zbudowana z potężnych i bogatych w funkcje kontrolek, takich jak Diagram, Próbnik Kolorów, okno dialogowe i suwak zakresu. Źródło tej próbki można znaleźć w tej lokalizacji GitHub.,
Diagram Builder – SPA
Story Estimator
Story Estimator jest skutecznym, zwinnym narzędziem do szacowania punktów historii za historie za pomocą technik planowania pokera.
Ta aplikacja jest zbudowana z kontrolek, takich jak DataGrid, wykresy, Maska wprowadzania, przycisk, przycisk opcji i pole wyboru. Źródło tej próbki można znaleźć w tej lokalizacji GitHub.,
Szacowanie historii – SPA
wykres giełdowy
wykres giełdowy służy do śledzenia i wizualizacji ceny akcji dowolnej firmy w określonym okresie czasu.
Ta aplikacja jest zbudowana z Wykresów, paska narzędzi, DateTimePicker, rozwijanej i przycisków sterujących. Możesz znaleźć jego źródło na Githubie.,
Stock Chart – SPA
zarządzanie aktywami
aplikacja do zarządzania aktywami jest jednostronicową aplikacją służącą do śledzenia i wizualizacji zasobów oprogramowania i sprzętu organizacji.
Ta aplikacja jest zbudowana z kontrolek DataGrid, Charts, TreeMap i DateRangePicker. Możesz znaleźć jego źródło na Githubie.,
zarządzanie aktywami – SPA
rozważania dotyczące SPA
oprócz wielu zalet aplikacji jednostronicowej, warto pamiętać o SPA:
- podczas tworzenia SPA należy zapewnić Zasady zorientowane obiektowo. Jeśli zostanie zignorowany, spowoduje to wycieki pamięci w przeglądarce. W ten sposób, powodując spowolnienie aplikacji, pogarszając w ten sposób jej wydajność.
- poprawnie obsługuje przycisk Wstecz przeglądarki w aplikacjach jednostronicowych., Jeśli nie, użytkownik może kliknąć przycisk Wstecz przeglądarki, co prowadzi do utraty przepływu pracy.
jednak odpowiednie techniki mogą rozwiązać wszystkie te problemy.
podsumowanie
w tym wpisie na blogu zobaczyliśmy zalety aplikacji jednostronicowych nad aplikacjami wielostronicowymi. Widzieliśmy również przykłady aplikacji jednostronicowych w świecie rzeczywistym z wieloma kontrolkami Syncfusion Essential JS 2.
omówione wcześniej przykłady aplikacji jednostronicowych są również dostępne dla Angular, JavaScript, ASP.NET rdzeń i ASP.,Platformy NET MVC, a demo tych aplikacji na żywo można znaleźć na naszej stronie internetowej. Możesz również sprawdzić inne rzeczywiste aplikacje zbudowane z komponentów Syncfusion tutaj.
zalecamy sprawdzenie kodu źródłowego, dostępnego na Githubie, który można łatwo uruchomić, aby zobaczyć, jak aplikacje jednostronicowe są budowane przy użyciu komponentów Syncfusion.