Compartilhar via

Tecnologias comuns da Web do lado do cliente

Dica

Esse conteúdo é um trecho do eBook, Arquiteto de Aplicativos Web Modernos com ASP.NET Core e Azure, disponível no .NET Docs ou como um PDF para download gratuito que pode ser lido offline.

Baixar PDF

Miniatura da capa do eBook 'Architect Modern Web Applications with ASP.NET Core and Azure'.

"Os sites devem ficar bem de dentro e de fora." - Paul Cookson

Aplicativos ASP.NET Core são aplicativos web e normalmente dependem de tecnologias web do lado do cliente, como HTML, CSS e JavaScript. Separando o conteúdo da página (o HTML) de seu layout e estilo (o CSS) e seu comportamento (via JavaScript), aplicativos Web complexos podem aproveitar o princípio separação de preocupações. Alterações futuras na estrutura, design ou comportamento do aplicativo podem ser feitas com mais facilidade quando essas preocupações não estão entrelaçadas.

Embora HTML e CSS sejam relativamente estáveis, o JavaScript, por meio dos frameworks de aplicação e utilitários com os quais os desenvolvedores trabalham para criar aplicativos baseados em web, está evoluindo em velocidade vertiginosa. Este capítulo analisa algumas maneiras pelas quais o JavaScript é usado por desenvolvedores Web e fornece uma visão geral de alto nível das bibliotecas do lado do cliente Angular e React.

Observação

Blazor fornece uma alternativa às estruturas JavaScript para criar interfaces de usuário cliente avançadas e interativas.

HTML

HTML é a linguagem de marcação padrão usada para criar páginas da Web e aplicativos Web. Seus elementos formam os blocos de construção de páginas, representando texto formatado, imagens, entradas de formulário e outras estruturas. Quando um navegador faz uma solicitação para uma URL, seja buscando uma página ou um aplicativo, a primeira coisa que é retornada é um documento HTML. Este documento HTML pode referenciar ou incluir informações adicionais sobre sua aparência e layout na forma de CSS ou comportamento na forma de JavaScript.

CSS

CSS (folhas de estilo em cascata) é usado para controlar a aparência e o layout dos elementos HTML. Os estilos CSS podem ser aplicados diretamente a um elemento HTML, definidos separadamente na mesma página ou definidos em um arquivo separado e referenciados pela página. Os estilos em cascata são aplicados conforme a maneira como são utilizados para selecionar um determinado elemento HTML. Por exemplo, um estilo pode se aplicar a um documento inteiro, mas seria substituído por um estilo aplicado a um determinado elemento. Da mesma forma, um estilo específico do elemento seria substituído por um estilo aplicado a uma classe CSS que foi aplicada ao elemento, que, por sua vez, seria substituído por um estilo direcionado a uma instância específica desse elemento (por meio de sua ID). Figura 6-1

Regras de especificidade do CSS

Figura 6-1. Regras de especificidade do CSS, na ordem.

É melhor manter estilos em seus próprios arquivos de folha de estilos separados e usar a cascata baseada em seleção para implementar estilos consistentes e reutilizáveis dentro do aplicativo. A colocação de regras de estilo dentro de HTML deve ser evitada e aplicar estilos a elementos individuais específicos (em vez de classes inteiras de elementos ou elementos que tiveram uma classe CSS específica aplicada a eles) deve ser a exceção, não a regra.

Pré-processadores CSS

As folhas de estiloS CSS não têm suporte para lógica condicional, variáveis e outros recursos de linguagem de programação. Assim, folhas de estilo grandes geralmente incluem um pouco de repetição, pois a mesma cor, fonte ou outra configuração é aplicada a muitas variações diferentes de elementos HTML e classes CSS. Os pré-processadores CSS podem ajudar suas folhas de estilos a seguir o princípio DRY adicionando suporte para variáveis e lógica.

Os pré-processadores CSS mais populares são Sass e LESS. Ambos estendem o CSS e são compatíveis retroativamente com o CSS, o que significa que um arquivo CSS comum é um arquivo Sass ou LESS válido. Sass é baseado em Ruby e LESS é baseado em JavaScript e normalmente é executado como parte do processo de desenvolvimento local. Ambos têm ferramentas de linha de comando disponíveis, bem como suporte interno no Visual Studio para executá-las usando tarefas Gulp ou Grunt.

JavaScript

JavaScript é uma linguagem de programação dinâmica e interpretada que foi padronizada na especificação da linguagem ECMAScript. É a linguagem de programação da Web. Assim como o CSS, o JavaScript pode ser definido como atributos em elementos HTML, como blocos de script em uma página ou em arquivos separados. Assim como o CSS, é recomendável organizar o JavaScript em arquivos separados, mantendo-o separado o máximo possível do HTML encontrado em páginas da Web individuais ou exibições de aplicativo.

Ao trabalhar com JavaScript em seu aplicativo Web, há algumas tarefas que normalmente você precisará executar:

  • Selecionando um elemento HTML e recuperando e/ou atualizando seu valor.

  • Consultando uma API Web para obter dados.

  • Enviando um comando para uma API Web (e respondendo a um callback com o resultado).

  • Executando a validação.

Você pode executar todas essas tarefas apenas com JavaScript, mas existem muitas bibliotecas para facilitar essas tarefas. Uma das primeiras e mais bem-sucedidas dessas bibliotecas é o jQuery, que continua sendo uma opção popular para simplificar essas tarefas em páginas da Web. Para SPAs (Aplicativos de Página Única), o jQuery não fornece muitos dos recursos desejados que o Angular e o React oferecem.

Aplicativos Web herdados com jQuery

Embora antigo pelos padrões da estrutura JavaScript, o jQuery continua sendo uma biblioteca comumente usada para trabalhar com HTML/CSS e criar aplicativos que fazem chamadas AJAX para APIs Web. No entanto, o jQuery opera no nível do modelo de objeto de documento do navegador (DOM) e, por padrão, oferece apenas um modelo imperativo, em vez de declarativo.

Por exemplo, imagine que, se o valor de uma caixa de texto exceder 10, um elemento na página deverá ficar visível. No jQuery, essa funcionalidade normalmente seria implementada escrevendo um manipulador de eventos com código que inspecionaria o valor da caixa de texto e definiria a visibilidade do elemento de destino com base nesse valor. Esse processo é uma abordagem imperativa baseada em código. Em vez disso, outra estrutura pode usar a vinculação de dados para associar a visibilidade do elemento ao valor da caixa de texto declarativamente. Essa abordagem não exigiria escrever nenhum código, mas requer apenas a decoração dos elementos envolvidos com atributos de associação de dados. À medida que os comportamentos do lado do cliente se torna mais complexos, as abordagens de associação de dados frequentemente resultam em soluções mais simples com menos código e complexidade condicional.

jQuery vs a SPA Framework

Fator jQuery Angular
Abstrai o DOM Sim Sim
Suporte a AJAX Sim Sim
Associação de dados declarativa Não Sim
Roteamento no estilo MVC Não Sim
Modelagem de texto Não Sim
Roteamento de link profundo Não Sim

A maioria dos recursos que jQuery não tem intrinsecamente pode ser adicionada com a adição de outras bibliotecas. No entanto, uma estrutura SPA como a Angular fornece esses recursos de forma mais integrada, já que ela foi projetada com todos eles em mente desde o início. Além disso, jQuery é uma biblioteca imperativa, o que significa que você precisa chamar funções jQuery para fazer qualquer coisa com jQuery. Grande parte do trabalho e da funcionalidade que as estruturas SPA fornecem podem ser feitas declarativamente, exigindo que nenhum código real seja gravado.

A associação de dados é um ótimo exemplo dessa funcionalidade. No jQuery, geralmente é preciso apenas uma linha de código para obter o valor de um elemento DOM ou definir o valor de um elemento. No entanto, você precisa escrever esse código sempre que precisar alterar o valor do elemento e, às vezes, isso ocorrerá em várias funções em uma página. Outro exemplo comum é a visibilidade do elemento. No jQuery, pode haver muitos lugares diferentes em que você escreveria código para controlar se determinados elementos estavam visíveis. Em cada um desses casos, ao usar a associação de dados, nenhum código precisaria ser gravado. Você simplesmente associaria o valor ou a visibilidade dos elementos em questão a um viewmodel na página e as alterações nesse viewmodel seriam refletidas automaticamente nos elementos associados.

SPAs angulares

O Angular continua sendo uma das estruturas JavaScript mais populares do mundo. Desde o Angular 2, a equipe reconstruiu a estrutura do zero (usando TypeScript) e renomeou do nome AngularJS original para Angular. Agora com vários anos de idade, o Angular redesenhado continua a ser uma estrutura robusta para a criação de Aplicativos de Página Única.

Os aplicativos Angular são criados a partir de componentes. Os componentes combinam modelos HTML com objetos especiais e controlam uma parte da página. Um componente simples dos documentos do Angular é mostrado aqui:

import { Component } from '@angular/core';

@Component({
    selector: 'my-app',
    template: `<h1>Hello {{name}}</h1>`
})

export class AppComponent { name = 'Angular'; }

Os componentes são definidos usando a @Component função decoradora, que usa metadados sobre o componente. A propriedade seletor identifica a ID do elemento na página em que esse componente será exibido. A propriedade de modelo é um modelo HTML simples que inclui um espaço reservado que corresponde à propriedade de nome do componente, definida na última linha.

Trabalhando com componentes e modelos, em vez de elementos DOM, os aplicativos Angular podem operar em um nível mais alto de abstração e com menos código geral do que os aplicativos escritos usando apenas JavaScript (também chamado de "vanilla JS") ou com jQuery. O Angular também impõe alguma ordem sobre como você organiza os arquivos de script do lado do cliente. Por convenção, os aplicativos Angular usam uma estrutura de pasta comum, com arquivos de script de módulo e componente localizados em uma pasta de aplicativo. Scripts angulares relacionados à criação, implantação e teste do aplicativo normalmente estão localizados em uma pasta de nível superior.

Você pode desenvolver aplicativos Angular usando uma CLI. Introdução ao desenvolvimento do Angular localmente (supondo que você já tenha o git e o npm instalados) consiste em simplesmente clonar um repositório do GitHub e executar npm install e npm start. Além disso, o Angular fornece sua própria CLI, que pode criar projetos, adicionar arquivos e auxiliar nas tarefas de teste, agrupamento e implantação. Essa facilidade de uso da CLI torna o Angular especialmente compatível com o ASP.NET Core, que também apresenta um ótimo suporte à CLI.

A Microsoft desenvolveu um aplicativo de referência, eShopOnContainers, que inclui uma implementação de SPA Angular. Este aplicativo inclui módulos Angular para gerenciar a cesta de compras da loja online, carregar e exibir itens de seu catálogo e lidar com a criação de pedidos. Você pode exibir e baixar o aplicativo de exemplo no GitHub.

Reagir

Ao contrário do Angular, que oferece uma implementação completa do padrão Modelo-Exibição-Controlador, o React está voltado para exibições. Não é uma estrutura, apenas uma biblioteca, portanto, para criar um SPA, você precisará aproveitar bibliotecas adicionais. Há várias bibliotecas que foram projetadas para serem usadas com o React para produzir aplicativos de página única avançados.

Um dos recursos mais importantes do React é o uso de um DOM virtual. O DOM virtual fornece ao React várias vantagens, incluindo desempenho (o DOM virtual pode otimizar quais partes do DOM real precisam ser atualizadas) e a capacidade de teste (não é necessário ter um navegador para testar o React e suas interações com seu DOM virtual).

O React também é incomum em como ele funciona com HTML. Em vez de ter uma separação estrita entre código e marcação (com referências a JavaScript aparecendo em atributos HTML, talvez), o React adiciona HTML diretamente dentro de seu código JavaScript como JSX. JSX é uma sintaxe semelhante a HTML que pode ser compilada até JavaScript puro. Por exemplo:

<ul>
{ authors.map(author =>
    <li key={author.id}>{author.name}</li>
)}
</ul>

Se você já conhece o JavaScript, aprender o React deve ser fácil. Não há quase tanta curva de aprendizado ou sintaxe especial envolvida como com Angular ou outras bibliotecas populares.

Como o React não é uma estrutura completa, você normalmente desejará que outras bibliotecas lidem com coisas como roteamento, chamadas à API Web e gerenciamento de dependências. O bom é que você pode escolher a melhor biblioteca para cada uma delas, mas a desvantagem é que você precisa tomar todas essas decisões e verificar se todas as suas bibliotecas escolhidas funcionam bem juntas quando terminar. Se você quiser um bom ponto de partida, poderá usar um kit inicial como o React Slingshot, que pré-empacota um conjunto de bibliotecas compatíveis junto com o React.

Vue

Em seu guia de introdução, "O Vue é uma estrutura progressiva para a criação de interfaces do usuário. Ao contrário de outras estruturas monolíticas, o Vue foi projetado desde o início para ser incrementalmente adotável. A biblioteca principal é focada apenas na camada de exibição e é fácil de captar e integrar com outras bibliotecas ou projetos existentes. Por outro lado, o Vue é perfeitamente capaz de alimentar aplicativos Single-Page sofisticados quando usado em combinação com ferramentas modernas e bibliotecas de suporte".

Começar a usar o Vue simplesmente requer a inclusão de seu script em um arquivo HTML:

<!-- development version, includes helpful console warnings -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

Com a estrutura adicionada, você poderá renderizar dados declarativamente para o DOM usando a sintaxe de modelagem simples do Vue:

<div id="app">
  {{ message }}
</div>

e, em seguida, adicionar o seguinte script:

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

Isso é suficiente para renderizar "Hello Vue!" na página. Observe, no entanto, que o Vue não está simplesmente renderizando a mensagem para o div uma vez. Ele dá suporte à vinculação de dados e atualizações dinâmicas, de modo que, se o valor em message mudar, o valor em <div> será imediatamente atualizado para refletir essa mudança.

Claro, isso é só o começo do que o Vue pode fazer. Ganhou muita popularidade nos últimos anos e tem uma grande comunidade. Há uma lista enorme e crescente de componentes e bibliotecas de suporte que funcionam com o Vue para estendê-lo também. Se você estiver procurando adicionar o comportamento do lado do cliente ao seu aplicativo Web ou considerar a criação de um SPA completo, vale a pena investigar o Vue.

Blazor WebAssembly

Ao contrário de outras estruturas JavaScript, o Blazor WebAssembly é uma estrutura de SPA (aplicativo de página única) para a compilação de aplicativos Web interativos do lado do cliente com o .NET. Blazor O WebAssembly usa padrões da Web abertos sem plug-ins ou recompilação de código em outros idiomas. Blazor O WebAssembly funciona em todos os navegadores da Web modernos, incluindo navegadores móveis.

A execução do código .NET dentro de navegadores da Web é possível por WebAssembly (abreviado wasm). O WebAssembly é um formato de código de bytes compacto, otimizado para download rápido e máxima velocidade de execução. O WebAssembly é um padrão da Web aberto e tem suporte em navegadores da Web sem plug-ins.

O código WebAssembly pode acessar a funcionalidade completa do navegador por meio de JavaScript, chamado de Interoperabilidade do JavaScript, geralmente abreviada para Interop. do JavaScript ou Interop. do JS. O código .NET executado por meio da WebAssembly no navegador é executado na área restrita do JavaScript do navegador com as proteções que a área restrita oferece contra ações mal intencionadas no computador cliente.

Para obter mais informações, consulte Introdução ao ASP.NET Core Blazor.

Escolhendo um framework SPA

Ao considerar qual opção funcionará melhor para dar suporte ao SPA, tenha em mente as seguintes considerações:

  • Sua equipe está familiarizada com a estrutura e suas dependências (incluindo o TypeScript em alguns casos)?

  • Quão opinativa é a estrutura e você concorda com sua maneira padrão de fazer as coisas?

  • Ele (ou uma biblioteca complementar) inclui todos os recursos que seu aplicativo requer?

  • Está bem documentado?

  • Qual é o nível de atividade da sua comunidade? Novos projetos estão sendo criados com ele?

  • Quão ativa é a sua equipe principal? Os problemas estão sendo resolvidos e novas versões são enviadas regularmente?

As estruturas continuam evoluindo com velocidade vertiginosa. Use as considerações listadas acima para ajudar a atenuar o risco de escolher uma estrutura da qual você mais tarde se arrependerá de ser dependente. Se você for particularmente avesso a riscos, considere uma estrutura que ofereça suporte comercial e/ou esteja sendo desenvolvida por uma grande empresa.

Referências – Tecnologias web do cliente

AnteriorPróximo

  • Last updated on