Escolher entre aplicativos Web tradicionais e SPAs (aplicativos de página única)Choose Between Traditional Web Apps and Single Page Apps (SPAs)

"Lei de Atwood: qualquer aplicativo que pode ser escrito em JavaScript será, em última análise, escrito em JavaScript.""Atwood's Law: Any application that can be written in JavaScript, will eventually be written in JavaScript."
- Jeff Atwood- Jeff Atwood

Há duas abordagens gerais para a criação de aplicativos Web hoje: os aplicativos Web tradicionais que executam a maior parte da lógica do aplicativo no servidor e os SPAs (aplicativos de página única) que executam a maior parte da lógica da interface do usuário em um navegador da Web, comunicando-se com o servidor Web principalmente por meio de APIs 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. Uma abordagem híbrida também é possível, e a mais simples é hospedar um ou mais subaplicativos avançados semelhantes ao SPA dentro de um aplicativo Web tradicional maior.A hybrid approach is also possible, the simplest being host one or more rich SPA-like sub-applications within a larger traditional web application.

Você deve usar os aplicativos Web tradicionais quando:You should use traditional web applications when:

  • Os requisitos do lado do cliente do aplicativo são simples ou até mesmo somente leitura.Your application's client-side requirements are simple or even read-only.

  • Seu aplicativo precisa funcionar em navegadores sem suporte a JavaScript.Your application needs to function in browsers without JavaScript support.

  • Sua equipe não está familiarizada com as técnicas de desenvolvimento do JavaScript ou do TypeScript.Your team is unfamiliar with JavaScript or TypeScript development techniques.

Você deve usar um SPA quando:You should use a SPA when:

  • Seu aplicativo precisa expor uma interface do usuário avançada com muitos recursos.Your application must expose a rich user interface with many features.

  • Sua equipe está familiarizada com o desenvolvimento do JavaScript e/ou do TypeScript.Your team is familiar with JavaScript and/or TypeScript development.

  • Seu aplicativo já deve expor uma API para outros clientes (internos ou públicos).Your application must already expose an API for other (internal or public) clients.

Além disso, as estruturas de SPA exigem um maior conhecimento em arquitetura e segurança.Additionally, SPA frameworks require greater architectural and security expertise. Elas passam por uma maior variação devido a atualizações frequentes e novas estruturas comparado aos aplicativos Web tradicionais.They experience greater churn due to frequent updates and new frameworks than traditional web applications. A configuração de processos de compilação e de implantação automatizados e a utilização de opções de implantação como contêineres são mais difíceis com aplicativos SPA do que com aplicativos Web tradicionais.Configuring automated build and deployment processes and utilizing deployment options like containers are more difficult with SPA applications than traditional web apps.

As melhorias na experiência do usuário possibilitadas pelo modelo do SPA devem ser avaliadas em relação a essas considerações.Improvements in user experience made possible by SPA model must be weighed against these considerations.

BlazorBlazor

O ASP.NET Core 3.0 apresenta um novo modelo para a criação de uma interface do usuário sofisticada, interativa e combinável chamado Blazor.ASP.NET Core 3.0 introduces a new model for building rich, interactive, and composable UI called Blazor. O lado do servidor mais incrivelmente permite que os desenvolvedores criem interface do usuário com o Razor no servidor e que esse código seja entregue ao navegador e executado no lado do cliente usando o Webassembly.Blazor server-side allows developers to build UI with Razor on the server and for this code to be delivered to the browser and executed client-side using WebAssembly. O ASP.NET Core 3.0 ainda está em desenvolvimento, mas aguarde mais informações sobre essa tecnologia na atualização 3.0 deste livro eletrônico.ASP.NET Core 3.0 is still under development, but you should expect to see more on this technology in the 3.0 update to this e-book. Para saber mais sobre o Blazor, confira a Introdução ao Blazor.For more information about Blazor, see Get started with Blazor.

Quando escolher aplicativos Web tradicionaisWhen to choose traditional web apps

A seguir há uma explicação mais detalhada dos motivos já mencionados para escolher os aplicativos Web tradicionais.The following is a more detailed explanation of the previously stated reasons for picking traditional web applications.

Seu aplicativo tem requisitos simples do lado do cliente, possivelmente somente leituraYour application has simple, possibly read-only, client-side requirements

Muitos aplicativos Web são consumidos principalmente em um modo somente leitura pela grande maioria de seus usuários.Many web applications are primarily consumed in a read-only fashion by the vast majority of their users. Os aplicativos somente leitura (ou predominantemente de leitura) tendem a ser muito mais simples do que aqueles que mantêm e manipulam uma grande quantidade de estado.Read-only (or read-mostly) applications tend to be much simpler than those that maintain and manipulate a great deal of state. Por exemplo, um mecanismo de pesquisa pode consistir em um único ponto de entrada com uma caixa de texto e uma segunda página para exibição dos resultados da pesquisa.For example, a search engine might consist of a single entry point with a textbox and a second page for displaying search results. Os usuários anônimos podem fazer solicitações com facilidade, e há pouca necessidade de uma lógica do lado do cliente.Anonymous users can easily make requests, and there is little need for client-side logic. Da mesma forma, um aplicativo voltado para o público de um sistema de gerenciamento de conteúdo ou blog normalmente consiste principalmente em conteúdo com pouco comportamento do lado do cliente.Likewise, a blog or content management system's public-facing application usually consists mainly of content with little client-side behavior. Aplicativos desse tipo são criados com facilidade como aplicativos Web tradicionais baseados em servidor que executam a lógica no servidor Web e renderizam o HTML a ser exibido no navegador.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. O fato de que cada página exclusiva do site tem sua própria URL que pode ser marcada e indexada por mecanismos de pesquisa (por padrão, sem a necessidade de adicioná-la como um recurso separado do aplicativo) também é um benefício claro nesses cenários.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.

Seu aplicativo precisa funcionar em navegadores sem suporte a JavaScriptYour application needs to function in browsers without JavaScript support

Os aplicativos Web que precisam funcionar em navegadores com suporte limitado ou nenhum suporte a JavaScript precisam ser escritos com fluxos de trabalho de aplicativo Web tradicional (ou, pelo menos, poder fazer fallback para esse comportamento).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). Os SPAs exigem um JavaScript do lado do cliente para funcionar; se ele não estiver disponível, os SPAs não serão uma boa opção.SPAs require client-side JavaScript in order to function; if it's not available, SPAs are not a good choice.

Sua equipe não está familiarizada com as técnicas de desenvolvimento do JavaScript ou do TypeScriptYour team is unfamiliar with JavaScript or TypeScript development techniques

Caso sua equipe não esteja familiarizada com o JavaScript ou o TypeScript, mas esteja familiarizada com o desenvolvimento de aplicativos Web do lado do servidor, provavelmente, ela poderá fornecer um aplicativo Web tradicional mais rapidamente do que um 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. A menos que o aprendizado de programação de SPAs seja uma meta ou a experiência do usuário proporcionada por um SPA seja necessária, os aplicativos Web tradicionais serão uma opção mais produtiva para equipes que já estão familiarizadas com sua criação.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.

Quando escolher SPAsWhen to choose SPAs

Veja a seguir uma explicação mais detalhada de quando escolher um estilo de desenvolvimento de Aplicativos de Página Única para seu aplicativo Web.The following is a more detailed explanation of when to choose a Single Page Applications style of development for your web app.

Seu aplicativo precisa expor uma interface do usuário avançada com muitos recursosYour application must expose a rich user interface with many features

Os SPAs podem dar suporte à funcionalidade avançada do lado do cliente que não exige o recarregamento da página conforme os usuários executam ações ou navegam entre as áreas do aplicativo.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. OS SPAs podem ser carregados com mais agilidade, buscando dados em segundo plano, e as ações de usuário individuais são mais ágeis na resposta pois os recarregamentos de página inteira são raros.SPAs can load more quickly, fetching data in the background, and individual user actions are more responsive since full page reloads are rare. Os SPAs podem dar suporte a atualizações incrementais, salvando formulários ou documentos parcialmente preenchidos sem que o usuário precise clicar em um botão para enviar um formulário.SPAs can support incremental updates, saving partially completed forms or documents without the user having to click a button to submit a form. Os SPAs podem ser compatíveis com comportamentos avançados do lado do cliente, como operações do tipo "arrastar e soltar", com muito mais agilidade do que os aplicativos tradicionais.SPAs can support rich client-side behaviors, such as drag-and-drop, much more readily than traditional applications. Os SPAs podem ser designados para serem executados em um modo desconectado, fazendo atualizações em um modelo do lado do cliente que são, por fim, sincronizadas com o servidor depois que uma conexão é restabelecida.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. Você deve escolher um aplicativo no estilo SPA se os requisitos do aplicativo incluem uma funcionalidade avançada que vai além do que os formulários HTML típicos oferecem.You should choose a SPA style application if your app's requirements include rich functionality that goes beyond what typical HTML forms offer.

Observe que, com frequência, os SPAs precisam implementar recursos internos de aplicativos Web tradicionais, como a exibição de uma URL significativa na barra de endereços que reflete a operação atual (e permitindo que os usuários marquem ou criem um link profundo dessa URL para retornar a ela).Note that 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). Os SPAs também devem permitir que os usuários usem os botões Voltar e Avançar do navegador com resultados que não os surpreenderão.SPAs also should allow users to use the browser's back and forward buttons with results that won't surprise them.

Sua equipe está familiarizado com o desenvolvimento do JavaScript e/ou do TypeScriptYour team is familiar with JavaScript and/or TypeScript development

A configuração de SPAs exige familiaridade com o JavaScript e/ou o TypeScript e bibliotecas e técnicas de programação do lado do cliente.Writing SPAs requires familiarity with JavaScript and/or TypeScript and client-side programming techniques and libraries. Sua equipe deve ser competente na escrita de JavaScript moderno usando uma estrutura de SPA como o Angular.Your team should be competent in writing modern JavaScript using a SPA framework like Angular.

Referências – Estruturas de SPAReferences – SPA Frameworks

Seu aplicativo já deve expor uma API para outros clientes (internos ou públicos)Your application must already expose an API for other (internal or public) clients

Caso você já esteja dando suporte a uma API Web para uso por outros clientes, poderá ser necessário menos esforço para criar uma implementação de SPA que utiliza essas APIs em vez de reproduzir a lógica no formulário do lado do servidor.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. Os SPAs fazem uso extensivo de APIs Web para consultar e atualizar os dados conforme os usuários interagem com o aplicativo.SPAs make extensive use of web APIs to query and update data as users interact with the application.

Tabela de decisão – Web tradicional ou SPADecision table – Traditional Web or SPA

A tabela de decisão a seguir resume alguns dos fatores básicos a serem considerados ao escolher entre um aplicativo Web tradicional e um SPA.The following decision table summarizes some of the basic factors to consider when choosing between a traditional web application and a SPA.

FatorFactor Aplicativo Web tradicionalTraditional Web App Aplicativo de página únicaSingle Page Application
É necessária a familiaridade da equipe com JavaScript/TypeScriptRequired Team Familiarity with JavaScript/TypeScript MínimaMinimal NecessáriaRequired
Suporte a navegadores sem scriptsSupport Browsers without Scripting Com suporteSupported Não compatívelNot Supported
Comportamento mínimo do aplicativo do lado do clienteMinimal Client-Side Application Behavior ApropriadoWell-Suited ExageroOverkill
Requisitos avançados e complexos de interface do usuárioRich, Complex User Interface Requirements LimitadoLimited ApropriadoWell-Suited