Tecnologias da Web comuns do lado do clienteCommon client side web technologies

"Os sites devem ter uma bela aparência em todo lugar.""Websites should look good from the inside and out."
- Paul Cookson- Paul Cookson

Os aplicativos ASP.NET Core são aplicativos Web e normalmente se baseiam em tecnologias da Web do lado do cliente como HTML, CSS e JavaScript.ASP.NET Core applications are web applications and they typically rely on client-side web technologies like HTML, CSS, and JavaScript. Ao separar o conteúdo da página (o HTML) de seu layout e estilo (o CSS) e seu comportamento (por meio do JavaScript), os aplicativos Web complexos podem aproveitar o princípio da Separação de Interesses.By separating the content of the page (the HTML) from its layout and styling (the CSS), and its behavior (via JavaScript), complex web apps can leverage the Separation of Concerns principle. As alterações futuras na estrutura, no design ou no comportamento do aplicativo podem ser feitas com mais facilidade quando esses interesses não são entrelaçados.Future changes to the structure, design, or behavior of the application can be made more easily when these concerns are not intertwined.

Embora o HTML e o CSS sejam relativamente estáveis, o JavaScript, por meio das estruturas do aplicativo e dos utilitários com os quais os desenvolvedores trabalham para criar aplicativos baseados na Web, está evoluindo em uma velocidade vertiginosa.While HTML and CSS are relatively stable, JavaScript, by means of the application frameworks and utilities developers work with to build web-based applications, is evolving at breakneck speed. Este capítulo examina algumas maneiras pelas quais o JavaScript é usado por desenvolvedores da Web como parte do desenvolvimento de aplicativos, além de fornecer uma visão geral de alto nível das bibliotecas do lado do cliente Angular e React.This chapter looks at a few ways JavaScript is used by web developers as part of developing applications, as provides a high-level overview of the Angular and React client side libraries.

HTMLHTML

A linguagem HTML é a linguagem de marcação padrão usada para criar páginas da Web e aplicativos Web.HTML (HyperText Markup Language) is the standard markup language used to create web pages and web applications. Seus elementos formam os blocos de construção de páginas, representando o texto formatado, imagens, entradas de formulário e outras estruturas.Its elements form the building blocks of pages, representing formatted text, images, form inputs, and other structures. Quando um navegador faz uma solicitação para uma URL, independentemente se ele está buscando uma página ou um aplicativo, a primeira coisa retornada é um documento HTML.When a browser makes a request to a URL, whether fetching a page or an application, the first thing that is returned is an HTML document. Esse documento HTML pode referenciar ou incluir informações adicionais sobre sua aparência e o layout na forma de CSS ou sobre seu comportamento na forma de JavaScript.This HTML document may reference or include additional information about its look and layout in the form of CSS, or behavior in the form of JavaScript.

CSSCSS

O CSS (folhas de estilos em cascata) é usado para controlar a aparência e o layout de elementos HTML.CSS (Cascading Style Sheets) is used to control the look and layout of HTML elements. 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.CSS styles can be applied directly to an HTML element, defined separately on the same page, or defined in a separate file and referenced by the page. Os estilos são aplicados em cascata de acordo com a forma como são usados para selecionar determinado elemento HTML.Styles cascade based on how they are used to select a given HTML element. Por exemplo, um estilo pode se aplicar a um documento inteiro, mas ser substituído por um estilo aplicado a um elemento específico.For instance, a style might apply to an entire document, but would be overridden by a style that applied to a particular element. Da mesma forma, um estilo específico a um elemento é substituído por um estilo aplicado a uma classe CSS que foi aplicada ao elemento, que, por sua vez, é substituído por um estilo direcionado a uma instância específica desse elemento (por meio de sua ID).Likewise, an element-specific style would be overridden by a style that applied to a CSS class that was applied to the element, which in turn would be overridden by a style targeting a specific instance of that element (via its id). Figura 6-1Figure 6-1

Regras de especificidade de CSS

Figura 6-1.Figure 6-1. Regras de especificidade do CSS, na ordem.CSS Specificity rules, in order.

É melhor manter os 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.It's best to keep styles in their own separate stylesheet files, and to use selection-based cascading to implement consistent and reusable styles within the application. A colocação das 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 determinada classe CSS aplicada a eles) deve ser uma exceção, não a regra.Placing style rules within HTML should be avoided, and applying styles to specific individual elements (rather than whole classes of elements, or elements that have had a particular CSS class applied to them) should be the exception, not the rule.

Pré-processadores de CSSCSS preprocessors

As folhas de estilos CSS não têm suporte para lógica condicional, variáveis e outros recursos de linguagem de programação.CSS stylesheets lack support for conditional logic, variables, and other programming language features. Portanto, folhas de estilos grandes geralmente incluem um lote de repetição, pois a mesma cor, fonte ou outra configuração é aplicada a muitas variações diferentes de elementos HTML e classes CSS.Thus, large stylesheets often include a lot of repetition, as the same color, font, or other setting is applied to many different variations of HTML elements and CSS classes. Os pré-processadores do CSS podem ajudar as folhas de estilos a seguirem o princípio DRY, com a adição de suporte para variáveis e lógica.CSS preprocessors can help your stylesheets follow the DRY principle by adding support for variables and logic.

Os pré-processadores do CSS mais populares são o Sass e LESS.The most popular CSS preprocessors are Sass and LESS. Ambos estendem o CSS e são compatíveis com versões anteriores dele, o que significa que um arquivo CSS simples é um arquivo do Sass ou LESS válido.Both extend CSS and are backward compatible with it, meaning that a plain CSS file is a valid Sass or LESS file. O Sass é baseado em Ruby e o LESS é baseado em JavaScript e ambos costumam ser executados como parte do processo de desenvolvimento local.Sass is Ruby-based and LESS is JavaScript based, and both typically run as part of your local development process. Os dois têm ferramentas de linha de comando disponíveis, bem como suporte interno no Visual Studio para executá-las com tarefas do Gulp ou Grunt.Both have command line tools available, as well as built-in support in Visual Studio for running them using Gulp or Grunt tasks.

JavaScriptJavaScript

O JavaScript é uma linguagem de programação dinâmica e interpretada que foi padronizada na especificação da linguagem ECMAScript.JavaScript is a dynamic, interpreted programming language that has been standardized in the ECMAScript language specification. É a linguagem de programação da Web.It is the programming language of the 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.Like CSS, JavaScript can be defined as attributes within HTML elements, as blocks of script within a page, or in separate files. Assim como o CSS, é geralmente recomendado organizar o JavaScript em arquivos separados, mantendo-o separado tanto quanto possível do HTML encontrado em páginas da Web individuais ou exibições do aplicativo.Just like CSS, it's generally recommended to organize JavaScript into separate files, keeping it separated as much as possible from the HTML found on individual web pages or application views.

Ao trabalhar com o JavaScript no aplicativo Web, há algumas tarefas que você geralmente precisará executar:When working with JavaScript in your web application, there are a few tasks that you'll commonly need to perform:

  • Selecionar um elemento HTML e recuperar e/ou atualizar seu valor.Selecting an HTML element and retrieving and/or updating its value.

  • Consultar dados em uma API Web.Querying a Web API for data.

  • Enviando um comando para uma API Web (e respondendo a um retorno de chamada com seu resultado).Sending a command to a Web API (and responding to a callback with its result).

  • Executando a validação.Performing validation.

Você pode executar todas essas tarefas apenas com o JavaScript, mas muitas bibliotecas existem para facilitar essas tarefas.You can perform all of these tasks with JavaScript alone, but many libraries exist to make these tasks easier. 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.One of the first and most successful of these libraries is jQuery, which continues to be a popular choice for simplifying these tasks on web pages. Para SPAs (Aplicativos de Página Única), o jQuery não fornece muitos dos recursos desejados oferecidos pelo Angular e React.For Single Page Applications (SPAs), jQuery doesn't provide many of the desired features that Angular and React offer.

Aplicativos Web herdados com jQueryLegacy web apps with jQuery

Embora seja antigo de acordo com os padrões de estrutura do JavaScript, o jQuery continua sendo uma biblioteca muito usada para trabalhar com HTML/CSS e criar aplicativos que fazem chamadas AJAX a APIs Web.Although ancient by JavaScript framework standards, jQuery continues to be a very commonly used library for working with HTML/CSS and building applications that make AJAX calls to web APIs. No entanto, o jQuery opera no nível do DOM (Modelo de Objeto do Documento) do navegador e, por padrão, oferece apenas um modelo de imperativo, em vez de declarativo.However, jQuery operates at the level of the browser document object model (DOM), and by default offers only an imperative, rather than declarative, model.

Por exemplo, imagine que, se o valor da caixa de texto exceder 10, um elemento na página precisará ficar visível.For example, imagine that if a textbox's value exceeds 10, an element on the page should be made visible. No jQuery, isso normalmente será implementado com a escrita de um manipulador de eventos com um código que inspecionará o valor da caixa de texto e definirá a visibilidade do elemento de destino com base nesse valor.In jQuery, this would typically be implemented by writing an event handler with code that would inspect the textbox's value and set the visibility of the target element based on that value. Essa é uma abordagem imperativa, baseada em código.This is an imperative, code-based approach. Em vez disso, outra estrutura poderá usar a associação de dados para associar a visibilidade do elemento ao valor da caixa de texto de forma declarativa.Another framework might instead use databinding to bind the visibility of the element to the value of the textbox declaratively. Isso não exige nenhuma codificação, mas apenas a decoração dos elementos envolvidos com atributos de associação de dados.This would not require writing any code, but instead only requires decorating the elements involved with data binding attributes. Conforme os comportamentos do lado do cliente ficam mais complexos, as abordagens de associação de dados frequentemente resultam em soluções mais simples com menos código e complexidade condicional.As client side behaviors grow more complex, data binding approaches frequently result in simpler solutions with less code and conditional complexity.

jQuery vs. uma estrutura de SPAjQuery vs a SPA Framework

FatorFactor jQueryjQuery AngularAngular
Abstrai o DOMAbstracts the DOM SimYes SimYes
Suporte do AJAXAJAX Support SimYes SimYes
Associação de dados declarativaDeclarative Data Binding NoNo SimYes
Roteamento no estilo MVCMVC-style Routing NoNo SimYes
ModelagemTemplating NoNo SimYes
Roteamento de link profundoDeep-Link Routing NoNo SimYes

A maioria dos recursos que o jQuery não tem intrinsecamente pode ser adicionada com a adição de outras bibliotecas.Most of the features jQuery lacks intrinsically can be added with the addition of other libraries. No entanto, uma estrutura de SPA como o Angular fornece esses recursos de forma mais integrada, pois foi projetado com todos eles em mente, desde o início.However, a SPA framework like Angular provides these features in a more integrated fashion, since it's been designed with all of them in mind from the start. Além disso, o jQuery é uma biblioteca imperativa, o que significa que você precisa chamar funções do jQuery para fazer qualquer coisa com o jQuery.Also, jQuery is a very imperative library, meaning that you need to call jQuery functions in order to do anything with jQuery. Grande parte do trabalho e da funcionalidade fornecida pelas estruturas de SPA pode ser feita de forma declarativa, sem a necessidade de codificação real.Much of the work and functionality that SPA frameworks provide can be done declaratively, requiring no actual code to be written.

A associação de dados é um ótimo exemplo disso.Data binding is a great example of this. No jQuery, geralmente, é necessário apenas uma linha de código para obter o valor de um elemento DOM ou para definir o valor de um elemento.In jQuery, it usually only takes one line of code to get the value of a DOM element, or to set an element's value. No entanto, você precisa escrever esse código sempre que precisa alterar o valor do elemento e, às vezes, isso acontecerá em várias funções em uma página.However, you have to write this code any time you need to change the value of the element, and sometimes this will occur in multiple functions on a page. Outro exemplo comum é a visibilidade do elemento.Another common example is element visibility. No jQuery, pode haver muitos lugares diferentes em que você codificará para controlar se determinados elementos eram visíveis.In jQuery, there might be many different places where you would write code to control whether certain elements were visible. Em cada um desses casos, ao usar a associação de dados, nenhuma codificação precisa ser feita.In each of these cases, when using data binding, no code would need to be written. Você apenas vincula 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 são refletidas automaticamente nos elementos associados.You would simply bind the value or visibility of the element(s) in question to a viewmodel on the page, and changes to that viewmodel would automatically be reflected in the bound elements.

SPAs do AngularAngular SPAs

O AngularJS rapidamente se tornou uma das estruturas de JavaScript mais populares do mundo.AngularJS quickly became one of the world's most popular JavaScript frameworks. Com o Angular 2, a equipe reformulou totalmente a estrutura (usando o TypeScript) e passou a chamar o AngularJS de simplesmente Angular.With Angular 2, the team rebuilt the framework from the ground up (using TypeScript) and rebranded from AngularJS to simply Angular. Atualmente na versão 4, o Angular continua sendo uma estrutura robusta para a criação de Aplicativos de Página Única.Currently on version 4, Angular continues to be a robust framework for building Single Page Applications.

Os aplicativos do Angular baseiam-se em componentes.Angular applications are built from components. Os componentes combinam modelos HTML com objetos especiais e controlam uma parte da página.Components combine HTML templates with special objects and control a portion of the page. Um componente simples da documentação do Angular é mostrado aqui:A simple component from Angular's docs is shown here:

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

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

export class AppComponent { name = 'Angular'; }

Os componentes são definidos com a função de decorador @Component, que usa metadados sobre o componente.Components are defined using the @Component decorator function, which takes in metadata about the component. A propriedade de seletor identifica a ID do elemento na página na qual esse componente será exibido.The selector property identifies the id of the element on the page where this component will be displayed. 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.The template property is a simple HTML template that includes a placeholder that corresponds to the component's name property, defined on the last line.

Trabalhando com componentes e modelos, em vez de elementos DOM, os aplicativos do Angular podem operar em um nível superior de abstração e com menos código geral comparado aos aplicativos escritos apenas com JavaScript (também chamado "JS baunilha") ou com o jQuery.By working with components and templates, instead of DOM elements, Angular apps can operate at a higher level of abstraction and with less overall code than apps written using just JavaScript (also called "vanilla JS") or with jQuery. O Angular também impõe uma ordem de como organizar os arquivos de script do lado do cliente.Angular also imposes some order on how you organize your client-side script files. Por convenção, os aplicativos do Angular usam uma estrutura de pastas comum, com arquivos de script de módulo e componente localizados em uma pasta do aplicativo.By convention, Angular apps use a common folder structure, with module and component script files located in an app folder. Os scripts do Angular referentes à criação, à implantação e ao teste do aplicativo geralmente estão localizados em uma pasta de nível superior.Angular scripts concerned with building, deploying, and testing the app are typically located in a higher-level folder.

O Angular também faz intenso uso de ferramentas de CLI (interface de linha de comando).Angular also makes great use of command line interface (CLI) tooling. Para começar o desenvolvimento local com o Angular (supondo que você já tenha instalado o GIT e o npm) basta clonar um repositório do GitHub e executar npm install e npm start.Getting started with Angular development locally (assuming you already have git and npm installed) consists of simply cloning a repo from GitHub and running npm install and npm start. Além disso, o Angular fornece sua própria ferramenta de CLI que pode criar projetos, adicionar arquivos e ajudar com tarefas de teste, agrupamento e implantação.Beyond this, Angular ships its own CLI tool which can create projects, add files, and assist with testing, bundling, and deployment tasks. Essa facilidade de utilização das ferramentas de CLI tornam o Angular especialmente compatível com o ASP.NET Core, que também apresenta compatibilidade excelente com a CLI.This CLI tooling friendliness makes Angular especially compatible with ASP.NET Core, which also features great CLI support.

A Microsoft desenvolveu um aplicativo de referência, o eShopOnContainers, que inclui uma implementação SPA do Angular.Microsoft has developed a reference application, eShopOnContainers, which includes an Angular SPA implementation. Esse aplicativo inclui módulos do Angular para gerenciar a cesta de compras da loja online, carregar e exibir itens do catálogo e manipular a criação de ordens.This app includes Angular modules to manage the online store's shopping basket, load and display items from its catalog, and handling order creation. Exiba e baixe o aplicativo de exemplo no GitHub.You can view and download the sample application from GitHub.

ReactReact

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.Unlike Angular, which offers a full Model-View-Controller pattern implementation, React is only concerned with views. Ele não é uma estrutura, apenas uma biblioteca e, portanto, para criar um SPA, precisará utilizar bibliotecas adicionais.It's not a framework, just a library, so to build a SPA you'll need to leverage additional libraries.

Um dos recursos mais importantes do React é o uso de um DOM virtual.One of React's most important features is its use of a virtual DOM. O DOM virtual oferece várias vantagens ao React, incluindo o desempenho (o DOM virtual pode otimizar quais partes do DOM real precisam ser atualizadas) e a capacidade de teste (sem a necessidade de ter um navegador para testar o React e suas interações com seu DOM virtual).The virtual DOM provides React with several advantages, including performance (the virtual DOM can optimize which parts of the actual DOM need to be updated) and testability (no need to have a browser to test React and its interactions with its virtual DOM).

O React também é incomum na forma como funciona com HTML.React is also unusual in how it works with HTML. Em vez de ter uma separação estrita entre o código e a marcação (talvez com a exibição das referências ao JavaScript em atributos HTML), o React adiciona o HTML diretamente ao seu código JavaScript como JSX.Rather than having a strict separation between code and markup (with references to JavaScript appearing in HTML attributes perhaps), React adds HTML directly within its JavaScript code as JSX. O JSX é uma sintaxe semelhante ao HTML que pode ser compilada até um JavaScript puro.JSX is HTML-like syntax that can compile down to pure JavaScript. Por exemplo:For example:

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

Se você já conhece o JavaScript, aprender a usar o React deve ser fácil.If you already know JavaScript, learning React should be easy. A curva de aprendizado ou a sintaxe especial envolvida não é tão grande quanto a do Angular ou de outras bibliotecas populares.There isn't nearly as much learning curve or special syntax involved as with Angular or other popular libraries.

Como o React não é uma estrutura completa, geralmente, você desejará ter outras bibliotecas para manipular aspectos como roteamento, chamadas à API Web e gerenciamento de dependências.Because React isn't a full framework, you'll typically want other libraries to handle things like routing, web API calls, and dependency management. A vantagem é que você pode escolher a melhor biblioteca para cada um deles, mas a desvantagem é que você precisa tomar todas essas decisões e verificar se todas as bibliotecas escolhidas funcionam bem em conjunto quando terminar.The nice thing is, you can pick the best library for each of these, but the disadvantage is that you need to make all of these decisions and verify all of your chosen libraries work well together when you're done. Caos deseje um bom ponto de partida, use um kit de início como o React Slingshot, que pré-empacota um conjunto de bibliotecas compatíveis com o React.If you want a good starting point, you can use a starter kit like React Slingshot, which prepackages a set of compatible libraries together with React.

Escolhendo uma estrutura de SPAChoosing a SPA Framework

Ao considerar qual estrutura de JavaScript funcionará melhor para dar suporte ao SPA, tenha em mente as seguintes considerações:When considering which JavaScript framework will work best to support your SPA, keep in mind the following considerations:

  • Sua equipe está familiarizada com a estrutura e suas dependências (incluindo o TypeScript em alguns casos)?Is your team familiar with the framework and its dependencies (including TypeScript in some cases)?

  • Quão "teimosa" é a estrutura e você concorda com sua forma padrão de fazer as coisas?How opinionated is the framework, and do you agree with its default way of doing things?

  • Ela (ou uma biblioteca complementar) inclui todos os recursos necessários para seu aplicativo?Does it (or a companion library) include all of the features your app requires?

  • Ela está bem documentada?Is it well-documented?

  • Quão ativa é sua comunidade?How active is its community? A criação de novos projetos é feita com ela?Are new projects building built with it?

  • Quão ativa é sua equipe principal?How active is its core team? Os problemas estão sendo resolvidos e novas versões são fornecidas regularmente?Are issues being resolved and new versions shipped regularly?

As estruturas de JavaScript continuam evoluindo em uma velocidade vertiginosa.JavaScript frameworks continue to evolve with breakneck speed. Use as considerações listadas acima para ajudar a atenuar o risco de escolher uma estrutura da qual mais tarde você se arrependerá de ter uma dependência.Use the considerations listed above to help mitigate the risk of choosing a framework you'll later regret being dependent upon. Caso você seja particularmente avesso a riscos, considere uma estrutura que oferece suporte comercial e/ou que está sendo desenvolvida por uma empresa grande.If you're particularly risk-averse, consider a framework that offers commercial support and/or is being developed by a large enterprise.

Referências – Tecnologias da Web do clienteReferences – Client Web Technologies