Wybór między tradycyjnymi Web Apps i aplikacjami jednostronicowymi (aplikacji jednostronicowych)Choose Between Traditional Web Apps and Single Page Apps (SPAs)

"Atwoodeme: Każda aplikacja, którą można napisać w języku JavaScript, zostanie ostatecznie zapisywana w języku JavaScript"."Atwood's Law: Any application that can be written in JavaScript, will eventually be written in JavaScript."
- Jan Atwoodem- Jeff Atwood

Obecnie istnieją dwa ogólne podejścia do kompilowania aplikacji sieci Web: tradycyjne aplikacje sieci Web, które wykonują większość logiki aplikacji na serwerze i aplikacje jednostronicowe (aplikacji jednostronicowych), które wykonują większość logiki interfejsu użytkownika w przeglądarce internetowej, komunikując się z serwerem sieci Web przede wszystkim przy użyciu interfejsów API sieci Web.There are two general approaches to building web applications today: traditional web applications that perform most of the application logic on the server, and single page applications (SPAs) that perform most of the user interface logic in a web browser, communicating with the web server primarily using web APIs. Podejście hybrydowe jest również możliwe, najprostszym hostem jednego lub więcej rozbudowanych podaplikacji typu SPA w ramach większej tradycyjnej aplikacji sieci Web.A hybrid approach is also possible, the simplest being host one or more rich SPA-like subapplications within a larger traditional web application.

Używaj tradycyjnych aplikacji sieci Web, gdy:Use traditional web applications when:

  • Wymagania po stronie klienta aplikacji są proste lub nawet tylko do odczytu.Your application's client-side requirements are simple or even read-only.

  • Aplikacja musi działać w przeglądarkach bez obsługi języka JavaScript.Your application needs to function in browsers without JavaScript support.

  • Twój zespół nie zna technik programowania JavaScript i języka TypeScript.Your team is unfamiliar with JavaScript or TypeScript development techniques.

Użyj SPA, gdy:Use a SPA when:

  • Aplikacja musi uwidocznić rozbudowany interfejs użytkownika z wieloma funkcjami.Your application must expose a rich user interface with many features.

  • Twój zespół jest zaznajomiony z JavaScript, TypeScript lub Blazor WebAssembly programowaniem.Your team is familiar with JavaScript, TypeScript, or Blazor WebAssembly development.

  • Aplikacja musi już uwidocznić interfejs API dla innych klientów (wewnętrznych lub publicznych).Your application must already expose an API for other (internal or public) clients.

Ponadto struktury SPA wymagają większej wiedzy o architekturze i zabezpieczeniach.Additionally, SPA frameworks require greater architectural and security expertise. Są one większe, ze względu na częste aktualizacje i nowe platformy niż tradycyjne aplikacje sieci Web.They experience greater churn due to frequent updates and new frameworks than traditional web applications. Konfigurowanie zautomatyzowanych procesów kompilacji i wdrażania oraz korzystanie z opcji wdrażania, takich jak kontenery, może być trudniejsze w przypadku aplikacji SPA niż tradycyjne aplikacje sieci Web.Configuring automated build and deployment processes and utilizing deployment options like containers may be more difficult with SPA applications than traditional web apps.

Udoskonalenia środowiska użytkownika wykonywanego przez podejście SPA muszą zostać odważone względem tych zagadnień.Improvements in user experience made possible by the SPA approach must be weighed against these considerations.

Blazor

ASP.NET Core obejmuje model kompilowania bogatych, interaktywnych i składających się interfejsów użytkownika o nazwie Blazor .ASP.NET Core includes a model for building rich, interactive, and composable user interfaces called Blazor. Blazor po stronie serwera umożliwiają deweloperom tworzenie interfejsu użytkownika przy użyciu języka C# i Razor na serwerze oraz interfejs użytkownika, który ma być interaktywnie połączony z przeglądarką w czasie rzeczywistym za pomocą połączenia trwałego.Blazor server-side allows developers to build UI with C# and Razor on the server and for the UI to be interactively connected to the browser in real-time using a persistent SignalR connection. BlazorWebAssemblywprowadza kolejną opcję dla Blazor aplikacji, umożliwiając ich uruchamianie w przeglądarce przy użyciu programu WebAssembly .Blazor WebAssembly introduces another option for Blazor apps, allowing them to run in the browser using WebAssembly. Ponieważ jest to rzeczywista platforma .NET działająca w systemie WebAssembly , można użyć kodu i bibliotek z części aplikacji po stronie serwera.Because it's real .NET running on WebAssembly, you can re-use code and libraries from server-side parts of your application.

Blazor Program udostępnia nową, trzecią opcję, którą należy wziąć pod uwagę podczas oceniania, czy należy utworzyć czysto wyrenderowaną przez serwer aplikację sieci Web lub SPA.Blazor provides a new, third option to consider when evaluating whether to build a purely server-rendered web application or a SPA. Korzystając z programu, można tworzyć rozbudowane, takie jak zachowania po stronie klienta Blazor , bez konieczności znaczącego programowania w języku JavaScript.You can build rich, SPA-like client-side behaviors using Blazor, without the need for significant JavaScript development. Blazor aplikacje mogą wywoływać interfejsy API w celu żądania danych lub wykonywania operacji po stronie serwera.Blazor applications can call APIs to request data or perform server-side operations. Mogą współdziałać z JavaScript, tam gdzie jest to konieczne, aby korzystać z bibliotek i struktur języka JavaScript.They can interoperate with JavaScript where necessary to take advantage of JavaScript libraries and frameworks.

Rozważ skompilowanie aplikacji sieci Web przy użyciu programu Blazor :Consider building your web application with Blazor when:

  • Aplikacja musi uwidaczniać rozbudowany interfejs użytkownikaYour application must expose a rich user interface

  • Twój zespół jest bardziej wygodny dla projektowania platformy .NET niż programowanie w języku JavaScript lub TypeScriptYour team is more comfortable with .NET development than JavaScript or TypeScript development

Jeśli masz istniejącą aplikację formularzy sieci Web, rozważasz migrację do platformy .NET Core, warto przejrzeć bezpłatną książkę elektroniczną Blazor dla deweloperów formularzy sieci Web , aby sprawdzić, czy warto rozważyć przeprowadzenie migracji do programu Blazor .If you have an existing web forms application you're considering migrating to .NET Core, you may wish to review the free e-book, Blazor for Web Forms Developers to see whether it makes sense to consider migrating it to Blazor.

Aby uzyskać więcej informacji na temat Blazor , zobacz wprowadzenie Blazor do .For more information about Blazor, see Get started with Blazor.

Kiedy należy wybrać tradycyjne aplikacje sieci WebWhen to choose traditional web apps

Poniżej znajduje się bardziej szczegółowy opis przedstawionych wcześniej powodów dotyczących wybierania tradycyjnych aplikacji sieci Web.The following is a more detailed explanation of the previously stated reasons for picking traditional web applications.

Twoja aplikacja ma proste, prawdopodobnie tylko do odczytu wymagania po stronie klientaYour application has simple, possibly read-only, client-side requirements

Wiele aplikacji sieci Web jest używanych głównie w sposób tylko do odczytu przez ogromną większość użytkowników.Many web applications are primarily consumed in a read-only fashion by the vast majority of their users. Aplikacje tylko do odczytu (lub do odczytu) są znacznie prostsze niż te, które utrzymują i manipulują dużą ilością.Read-only (or read-mostly) applications tend to be much simpler than those that maintain and manipulate a great deal of state. Na przykład aparat wyszukiwania może składać się z jednego punktu wejścia z polem tekstowym i drugą stroną do wyświetlania wyników wyszukiwania.For example, a search engine might consist of a single entry point with a textbox and a second page for displaying search results. Anonimowi użytkownicy mogą łatwo wprowadzać żądania i nie ma potrzeby dla logiki po stronie klienta.Anonymous users can easily make requests, and there is little need for client-side logic. Podobnie aplikacja publiczna lub publiczny systemu zarządzania zawartością zwykle składa się głównie z zawartości z małym zachowaniem po stronie klienta.Likewise, a blog or content management system's public-facing application usually consists mainly of content with little client-side behavior. Takie aplikacje są łatwe do skompilowania jako tradycyjne aplikacje sieci Web oparte na serwerze, które wykonują logikę na serwerze sieci Web i Renderuj HTML do wyświetlania w przeglądarce.Such applications are easily built as traditional server-based web applications, which perform logic on the web server and render HTML to be displayed in the browser. Oznacza to, że każda unikatowa Strona witryny ma własny adres URL, który może być oznaczony zakładką i indeksowany przez aparaty wyszukiwania (domyślnie bez konieczności dodawania go jako osobnej funkcji aplikacji) również w takich scenariuszach.The fact that each unique page of the site has its own URL that can be bookmarked and indexed by search engines (by default, without having to add this as a separate feature of the application) is also a clear benefit in such scenarios.

Aplikacja musi działać w przeglądarkach bez obsługi języka JavaScriptYour application needs to function in browsers without JavaScript support

Aplikacje sieci Web, które muszą działać w przeglądarkach z ograniczoną lub nie obsługą języka JavaScript, powinny być zapisywane przy użyciu tradycyjnych przepływów pracy aplikacji sieci Web (lub co najmniej może powracać do takiego zachowania).Web applications that need to function in browsers with limited or no JavaScript support should be written using traditional web app workflows (or at least be able to fall back to such behavior). Aplikacji jednostronicowych wymaga, aby kod JavaScript po stronie klienta działał; Jeśli nie jest on dostępny, aplikacji jednostronicowych nie jest dobrym rozwiązaniem.SPAs require client-side JavaScript in order to function; if it's not available, SPAs are not a good choice.

Twój zespół nie zna technik programowania JavaScript i języka TypeScriptYour team is unfamiliar with JavaScript or TypeScript development techniques

Jeśli Twój zespół nie zna języka JavaScript lub TypeScript, ale jest zaznajomiony z programowaniem aplikacji sieci Web po stronie serwera, to prawdopodobnie będzie możliwe szybsze dostarczanie tradycyjnej aplikacji sieci Web niż SPA.If your team is unfamiliar with JavaScript or TypeScript, but is familiar with server-side web application development, then they will probably be able to deliver a traditional web app more quickly than a SPA. O ile nie jest wymagane uczenie się programu aplikacji jednostronicowych lub środowisko użytkownika zapewniane przez SPA, tradycyjne aplikacje sieci Web to bardziej wydajny wybór dla zespołów, które już znają ich Kompilowanie.Unless learning to program SPAs is a goal, or the user experience afforded by a SPA is required, traditional web apps are a more productive choice for teams who are already familiar with building them.

Kiedy należy wybrać aplikacji jednostronicowychWhen to choose SPAs

Poniżej znajduje się bardziej szczegółowy opis sytuacji, w której można wybrać styl aplikacji jednostronicowej dla aplikacji sieci Web.The following is a more detailed explanation of when to choose a Single Page Applications style of development for your web app.

Aplikacja musi uwidaczniać rozbudowany interfejs użytkownika z wieloma funkcjamiYour application must expose a rich user interface with many features

Aplikacji jednostronicowych może obsługiwać rozbudowane funkcje po stronie klienta, które nie wymagają ponownego załadowania strony, ponieważ użytkownicy podejmują działania lub Przechodź między obszarami aplikacji.SPAs can support rich client-side functionality that doesn't require reloading the page as users take actions or navigate between areas of the app. Aplikacji jednostronicowych może szybciej ładować, pobierać dane w tle, a akcje poszczególnych użytkowników są większe, ponieważ pełne obciążenia stron są rzadkie.SPAs can load more quickly, fetching data in the background, and individual user actions are more responsive since full page reloads are rare. Aplikacji jednostronicowych może obsługiwać aktualizacje przyrostowe, zapisując częściowo zakończone formularze lub dokumenty bez konieczności klikania przycisku w celu przesłania formularza.SPAs can support incremental updates, saving partially completed forms or documents without the user having to click a button to submit a form. Aplikacji jednostronicowych może obsługiwać rozbudowane zachowania po stronie klienta, na przykład przeciąganie i upuszczanie, znacznie łatwiejsze niż tradycyjne aplikacje.SPAs can support rich client-side behaviors, such as drag-and-drop, much more readily than traditional applications. Aplikacji jednostronicowych może być zaprojektowana tak, aby działała w trybie rozłączenia, po wprowadzeniu aktualizacji do modelu po stronie klienta, które zostały ostatecznie zsynchronizowane z serwerem po ponownym nawiązaniu połączenia.SPAs can be designed to run in a disconnected mode, making updates to a client-side model that are eventually synchronized back to the server once a connection is re-established. Wybierz aplikację w stylu SPA, jeśli wymagania dotyczące aplikacji obejmują rozbudowane funkcje, które wykraczają poza typowe oferty formularzy HTML.Choose a SPA-style application if your app's requirements include rich functionality that goes beyond what typical HTML forms offer.

Często aplikacji jednostronicowych muszą implementować funkcje, które są wbudowane w tradycyjne aplikacje sieci Web, takie jak wyświetlanie zrozumiałego adresu URL na pasku adresu odzwierciedlające bieżącą operację (i Umożliwianie użytkownikom zakładek lub głębokiego linku do tego adresu URL w celu powrotu do niego).Frequently, SPAs need to implement features that are built in to traditional web apps, such as displaying a meaningful URL in the address bar reflecting the current operation (and allowing users to bookmark or deep link to this URL to return to it). Aplikacji jednostronicowych powinien również zezwalać użytkownikom na używanie przycisków Wstecz i do przodu przeglądarki z wynikami, które nie są w ich przypadku niewidoczne.SPAs also should allow users to use the browser's back and forward buttons with results that won't surprise them.

Twój zespół zna język JavaScript i/lub programowanie TypeScriptYour team is familiar with JavaScript and/or TypeScript development

Pisanie aplikacji jednostronicowych wymaga znajomości języka JavaScript i/lub technik programowania po stronie klienta i bibliotek.Writing SPAs requires familiarity with JavaScript and/or TypeScript and client-side programming techniques and libraries. Zespół powinien być kompetentny do pisania nowoczesnego kodu JavaScript przy użyciu struktury SPA, takiej jak kątowy.Your team should be competent in writing modern JavaScript using a SPA framework like Angular.

References — platformy SPAReferences – SPA Frameworks

Aplikacja musi już udostępnić interfejs API innym (wewnętrznym lub publicznym) klientomYour application must already expose an API for other (internal or public) clients

Jeśli obsługujesz już internetowy interfejs API do użytku przez innych klientów, może być konieczne mniejsze nakłady pracy w celu utworzenia implementacji SPA, która wykorzystuje te interfejsy API zamiast odtwarzania logiki w formularzu po stronie serwera.If you're already supporting a web API for use by other clients, it may require less effort to create a SPA implementation that leverages these APIs rather than reproducing the logic in server-side form. Aplikacji jednostronicowych wykonywać wiele interfejsów API sieci Web, aby wysyłać zapytania i aktualizować dane, gdy użytkownicy współpracują z aplikacją.SPAs make extensive use of web APIs to query and update data as users interact with the application.

Kiedy należy wybrać BlazorWhen to choose Blazor

Poniżej znajduje się bardziej szczegółowy opis sytuacji, w których należy wybrać Blazor aplikację sieci Web.The following is a more detailed explanation of when to choose Blazor for your web app.

Aplikacja musi uwidaczniać rozbudowany interfejs użytkownikaYour application must expose a rich user interface

Podobnie jak w przypadku aplikacji jednostronicowych opartych na języku JavaScript, Blazor aplikacje mogą obsługiwać rozbudowane zachowanie klienta bez konieczności ponownego ładowania stron.Like JavaScript-based SPAs, Blazor applications can support rich client behavior without page reloads. Aplikacje te są coraz bardziej odpowiadać użytkownikom, pobierając tylko dane (lub HTML) wymagane do odpowiedzi na daną interakcję użytkownika.These applications are more responsive to users, fetching only the data (or HTML) required to respond to a given user interaction. Poprawnie zaprojektowane aplikacje po stronie serwera Blazor można skonfigurować tak, aby działały jako aplikacje po stronie klienta Blazor z minimalnymi zmianami, gdy ta funkcja jest obsługiwana.Designed properly, server-side Blazor apps can be configured to run as client-side Blazor apps with minimal changes once this feature is supported.

Twój zespół jest bardziej wygodny dla projektowania platformy .NET niż programowanie w języku JavaScript lub TypeScriptYour team is more comfortable with .NET development than JavaScript or TypeScript development

Wielu deweloperów jest wydajniejsza przy użyciu platformy .NET i Razor niż w przypadku języków po stronie klienta, takich jak JavaScript czy TypeScript.Many developers are more productive with .NET and Razor than with client-side languages like JavaScript or TypeScript. Ze względu na to, że po stronie serwera aplikacja jest już opracowywana przy użyciu platformy .NET, korzystanie z usługi gwarantuje, że Blazor każdy deweloper platformy .NET w zespole może zrozumieć i potencjalnie stworzyć zachowanie frontonu aplikacji.Since the server side of the application is already being developed with .NET, using Blazor ensures every .NET developer on the team can understand and potentially build the behavior of the front end of the application.

Tabela decyzjiDecision table

W poniższej tabeli decyzji przedstawiono podstawowe czynniki, które należy wziąć pod uwagę podczas wybierania między tradycyjną aplikacją sieci Web, SPA lub Blazor aplikacją.The following decision table summarizes some of the basic factors to consider when choosing between a traditional web application, a SPA, or a Blazor app.

CzynnikFactor Tradycyjna aplikacja internetowaTraditional Web App Aplikacja jednostronicowaSingle Page Application Blazor AplikacjeBlazor App
Wymagana znajomość zespołu w języku JavaScript/TypeScriptRequired Team Familiarity with JavaScript/TypeScript MinimalnyMinimal WymaganeRequired MinimalnyMinimal
Obsługa przeglądarek bez obsługi skryptówSupport Browsers without Scripting ObsługiwałSupported NieobsługiwaneNot Supported ObsługiwałSupported
Minimalne zachowanie aplikacji po stronie klientaMinimal Client-Side Application Behavior Dobrze dopasowaneWell-Suited Zbyt obszerneOverkill ŻyweViable
Zaawansowane wymagania dotyczące interfejsu użytkownikaRich, Complex User Interface Requirements OgraniczoneLimited Dobrze dopasowaneWell-Suited Dobrze dopasowaneWell-Suited