Partilhar via

Tecnologias Web comuns do lado do cliente

Sugestão

Este conteúdo é um excerto do eBook, Architect Modern Web Applications with ASP.NET Core e Azure, disponível no .NET Docs ou como um PDF transferível gratuito que pode ser lido offline.

Descarregar PDF

Arquitete aplicativos Web modernos com miniatura da capa do ASP.NET Core e do eBook do Azure.

"Os sites devem ter uma boa aparência por dentro e por fora." - Paulo Cookson

ASP.NET Os aplicativos principais são aplicativos da Web e normalmente dependem de tecnologias da Web do lado do cliente, como HTML, CSS e JavaScript. Ao separar 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 de separação de preocupações. Alterações futuras na estrutura, design ou comportamento do aplicativo podem ser feitas mais facilmente quando essas preocupações não estão interligadas.

Enquanto HTML e CSS são relativamente estáveis, o JavaScript, por meio das estruturas de aplicativos e utilitários com os quais os desenvolvedores trabalham para criar aplicativos baseados na Web, está evoluindo a uma velocidade vertiginosa. Este capítulo analisa algumas maneiras pelas quais o JavaScript é usado por desenvolvedores da 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 a criação de interfaces de usuário de cliente ricas e interativas.

HTML

HTML é a linguagem de marcação padrão usada para criar páginas e aplicativos da 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 fazer referência ou incluir informações adicionais sobre sua aparência e layout na forma de CSS ou comportamento na forma de JavaScript.

CSS

CSS (Cascading Style Sheets) é usado para controlar a aparência e o layout de elementos HTML. Os estilos CSS podem ser aplicados diretamente a um elemento HTML, definido separadamente na mesma página ou definido em um arquivo separado e referenciado pela página. Os estilos em cascata dependem de como são utilizados na seleção de um determinado elemento HTML. Por exemplo, um estilo pode se aplicar a um documento inteiro, mas seria substituído por um estilo que se aplicasse a um elemento específico. Da mesma forma, um estilo específico de elemento seria substituído por um estilo que se aplicasse a uma classe CSS que fosse 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 CSS

Figura 6-1. Regras de especificidade CSS, em ordem.

É melhor manter os estilos em seus próprios arquivos de folha de estilo separados e usar a cascata baseada em seleção para implementar estilos consistentes e reutilizáveis no aplicativo. A colocação de regras de estilo em HTML deve ser evitada, e a aplicação de 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 estilo CSS não têm suporte para lógica condicional, variáveis e outros recursos da linguagem de programação. Assim, folhas de estilo grandes geralmente incluem um pouco de repetição, como 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 estilo 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 CSS e são retrocompatíveis com ele, o que significa que um arquivo CSS simples é um arquivo Sass ou LESS válido. Sass é baseado em Ruby e LESS é baseado em JavaScript, e ambos normalmente são executados como parte do seu processo de desenvolvimento local. Ambos têm ferramentas de linha de comando disponíveis, bem como suporte interno no Visual Studio para executá-los usando tarefas Gulp ou Grint.

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. Como CSS, JavaScript pode ser definido como atributos dentro de elementos HTML, como blocos de script dentro de 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 visualizações de aplicativos.

Ao trabalhar com JavaScript em sua aplicação web, há algumas tarefas que você normalmente precisará executar:

  • Selecionar um elemento HTML e recuperar e/ou atualizar seu valor.

  • Consultando uma API da Web para obter dados.

  • Enviar um comando para uma API Web (e responder a um retorno de chamada com seu resultado).

  • Realização de 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 a ser uma escolha popular para simplificar essas tarefas em páginas da web. Para aplicativos de página única (SPAs), o jQuery não fornece muitos dos recursos desejados que o Angular e o React oferecem.

Aplicações Web legadas com jQuery

Embora antigo pelos padrões de estrutura JavaScript, o jQuery continua a ser uma biblioteca comumente usada para trabalhar com HTML/CSS e criar aplicativos que fazem chamadas AJAX para APIs da Web. No entanto, o jQuery opera no nível do modelo de objeto de documento (DOM) do navegador 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 deve ser tornado 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. Este processo é uma abordagem imperativa baseada em código. Outra estrutura pode, em vez disso, usar databinding para vincular a visibilidade do elemento ao valor da caixa de texto declarativamente. Essa abordagem não exigiria escrever nenhum código, mas apenas decorar os elementos envolvidos com atributos de vinculação de dados. À medida que os comportamentos do lado do cliente se tornam mais complexos, as abordagens de vinculação de dados frequentemente resultam em soluções mais simples com menos código e complexidade condicional.

jQuery vs um Framework SPA

Fator jConsulta Angular
Resumos do DOM Sim Sim
Suporte AJAX Sim Sim
Vinculação declarativa de dados Não Sim
Roteamento no estilo MVC Não Sim
Templateização Não Sim
Roteamento Deep-Link Não Sim

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

A vinculação de dados é um ótimo exemplo dessa funcionalidade. No jQuery, geralmente é necessária apenas uma linha de código para obter o valor de um elemento DOM ou para definir o valor de um elemento. No entanto, você tem que 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 dos elementos. No jQuery, pode haver muitos lugares diferentes onde você escreveria código para controlar se certos elementos estavam visíveis. Em cada um desses casos, ao usar a vinculação de dados, nenhum código precisaria ser escrito. Você simplesmente vincularia o valor ou a visibilidade dos elementos em questão a um modelo de exibição na página, e as alterações nesse modelo de exibição seriam refletidas automaticamente nos elementos vinculados.

ZPE 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 mudou o nome do AngularJS original para Angular. Agora com vários anos, o Angular redesenhado continua a ser uma estrutura robusta para a construção de aplicativos de página única.

As aplicações angulares são construídas a partir de componentes. Os componentes combinam modelos HTML com objetos especiais e controlam uma parte da página. Um componente simples dos documentos da 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 decorador, que recebe metadados sobre o componente. A propriedade seletor identifica a ID do elemento na página onde esse componente será exibido. A propriedade template é um modelo HTML simples que inclui um marcador que corresponde à propriedade 'name' do componente, a qual é definida na última linha.

Ao trabalhar 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 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 seus arquivos de script do lado do cliente. Por convenção, os aplicativos Angular usam uma estrutura de pastas comum, com arquivos de script de módulo e componente localizados em uma pasta de aplicativo. Os scripts angulares relacionados à criação, implantação e teste do aplicativo geralmente estão localizados em uma pasta de nível superior.

Você pode desenvolver aplicativos Angular usando uma CLI. Começar com o 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 envia sua própria CLI, que pode criar projetos, adicionar arquivos e ajudar com tarefas de teste, agregação e implantação. Essa simpatia da CLI torna o Angular especialmente compatível com o ASP.NET Core, que também possui um ótimo suporte à CLI.

A Microsoft desenvolveu uma aplicação de referência, eShopOnContainers, que inclui uma implementação Angular SPA. 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 visualizar e baixar o aplicativo de exemplo do GitHub.

Reagir

Ao contrário do Angular, que oferece uma implementação completa de padrões deView-Controller de modelos, o React se preocupa apenas com visualizações. Não é uma estrutura, apenas uma biblioteca, portanto, para criar um SPA, você precisará aproveitar bibliotecas adicionais. Há uma série de bibliotecas que são projetadas para serem usadas com o React para produzir aplicativos ricos de página única.

Uma das características mais importantes do React é o uso de um DOM virtual. O DOM virtual oferece ao React várias vantagens, incluindo desempenho (o DOM virtual pode otimizar quais partes do DOM real precisam ser atualizadas) e 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 na forma como 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 em 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 JavaScript, aprender React deve ser fácil. Não há tanta curva de aprendizado ou sintaxe especial envolvida como no Angular ou em outras bibliotecas populares.

Como o React não é uma estrutura completa, você normalmente desejará que outras bibliotecas lidem com coisas como roteamento, chamadas de API da Web e gerenciamento de dependência. 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 bibliotecas escolhidas funcionam bem juntas quando terminar. Se você quiser um bom ponto de partida, você pode usar um kit inicial como o React Slingshot, que pré-empacota um conjunto de bibliotecas compatíveis junto com o React.

Vue

Do seu guia de introdução: "Vue é uma estrutura progressiva para criar interfaces de utilizador." 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 visualização e é fácil de pegar e integrar com outras bibliotecas ou projetos existentes. Por outro lado, o Vue é perfeitamente capaz de alimentar aplicações Single-Page sofisticadas quando usado em combinação com ferramentas modernas e bibliotecas de suporte."

Começar a usar o Vue simplesmente requer incluir 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ê pode renderizar dados declarativamente para o DOM usando a sintaxe de modelagem direta do Vue:

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

e, em seguida, adicionando o seguinte script:

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

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

Claro, isso apenas arranha a superfície do que o Vue é capaz. Ganhou muita popularidade nos últimos anos e tem uma grande comunidade. Há uma lista enorme e crescente de componentes de suporte e bibliotecas que funcionam com o Vue para estendê-lo também. Se você está procurando adicionar comportamento do lado do cliente ao seu aplicativo Web ou considerando criar um SPA completo, vale a pena investigar Vue.

Blazor WebAssembleia

Ao contrário de outras estruturas JavaScript, Blazor WebAssembly é uma estrutura de aplicativo de página única (SPA) para criar aplicativos Web interativos do lado do cliente com .NET. Blazor WebAssembly usa padrões web abertos sem plugins ou recompilar código em outras linguagens. Blazor WebAssembly funciona em todos os navegadores modernos, incluindo navegadores móveis.

A execução de código .NET dentro de navegadores da Web é possível graças ao WebAssembly (abreviado wasm). WebAssembly é um formato de bytecode compacto otimizado para download rápido e velocidade máxima de execução. WebAssembly é um padrão web aberto e é suportado em navegadores web sem plugins.

O código WebAssembly pode acessar todas as funcionalidades do navegador via JavaScript, chamado de interoperabilidade JavaScript, muitas vezes abreviado para interoperabilidade JavaScript ou interoperabilidade JS. O código .NET executado via WebAssembly no navegador é executado na sandbox JavaScript do navegador com as proteções que a sandbox fornece contra ações maliciosas na máquina cliente.

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

Escolhendo uma estrutura de SPA

Ao considerar qual opção funcionará melhor para apoiar o seu 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 opinativo é o quadro e concorda com a sua forma padrão de fazer as coisas?

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

  • Está bem documentado?

  • Quão ativa é a sua comunidade? Novos projetos estão sendo construídos com ele?

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

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

Referências – Client Web Technologies

AnteriorPróximo

  • Last updated on