Compartir a través de

Tecnologías web comunes del lado del cliente

Sugerencia

Este contenido es un extracto del libro electrónico, Arquitecto de aplicaciones web modernas con ASP.NET Core y Azure, disponible en .NET Docs o como un PDF descargable gratuito que se puede leer sin conexión.

Descargar PDF

Diseñe aplicaciones web modernas con ASP.NET core y miniatura de portada de libro electrónico de Azure.

"Los sitios web deben ser buenos desde dentro y fuera." - Paul Cookson

ASP.NET aplicaciones principales son aplicaciones web y normalmente se basan en tecnologías web del lado cliente como HTML, CSS y JavaScript. Al separar el contenido de la página (html) de su diseño y estilo (CSS) y su comportamiento (a través de JavaScript), las aplicaciones web complejas pueden aprovechar el principio separación de preocupaciones. Los cambios futuros en la estructura, el diseño o el comportamiento de la aplicación se pueden realizar más fácilmente cuando estos problemas no están entrelazados.

Aunque HTML y CSS son relativamente estables, JavaScript, por medio de los marcos de aplicaciones y utilidades con los que los desarrolladores trabajan para crear aplicaciones basadas en web, está evolucionando a una velocidad vertiginosa. En este capítulo se examinan algunas maneras en que los desarrolladores web usan JavaScript y se proporciona información general de alto nivel de las bibliotecas del lado cliente de Angular y React.

Nota:

Blazor proporciona una alternativa a los marcos de JavaScript para crear interfaces de usuario cliente enriquecidas e interactivas.

HTML

HTML es el lenguaje de marcado estándar que se usa para crear páginas web y aplicaciones web. Sus elementos forman los bloques de creación de páginas, que representan texto con formato, imágenes, entradas de formulario y otras estructuras. Cuando un explorador realiza una solicitud a una dirección URL, tanto si captura una página como una aplicación, lo primero que se devuelve es un documento HTML. Este documento HTML puede hacer referencia o incluir información adicional sobre su apariencia y diseño en forma de CSS o comportamiento en forma de JavaScript.

CSS

CSS (Hojas de estilos en cascada) se usa para controlar la apariencia y el diseño de los elementos HTML. Los estilos CSS se pueden aplicar directamente a un elemento HTML, definido por separado en la misma página o definidos en un archivo independiente y al que hace referencia la página. Los estilos se aplican en cascada según cómo se utilizan para seleccionar un determinado elemento HTML. Por ejemplo, un estilo podría aplicarse a un documento completo, pero se reemplazaría por un estilo que se aplica a un elemento determinado. Del mismo modo, un estilo específico del elemento se reemplazaría por un estilo que se aplicaba a una clase CSS que se aplicó al elemento, lo que, a su vez, se invalidaría mediante un estilo destinado a una instancia específica de ese elemento (a través de su identificador). Figura 6-1

Reglas de especificidad de CSS

Figura 6-1. Reglas de especificidad de CSS, en orden.

Es mejor mantener los estilos en sus propios archivos de hoja de estilos independientes y usar la cascada basada en selección para implementar estilos coherentes y reutilizables dentro de la aplicación. La colocación de reglas de estilo en HTML debe evitarse y aplicar estilos a elementos individuales específicos (en lugar de clases completas de elementos o elementos que han tenido una clase CSS determinada aplicada) debe ser la excepción, no la regla.

Preprocesadores CSS

Las hojas de estilos CSS carecen de compatibilidad con la lógica condicional, las variables y otras características del lenguaje de programación. Por lo tanto, las hojas de estilos grandes suelen incluir un poco de repetición, ya que el mismo color, fuente u otro valor se aplica a muchas variaciones diferentes de elementos HTML y clases CSS. Los preprocesadores CSS pueden ayudar a las hojas de estilos a seguir el principio DRY agregando compatibilidad con variables y lógicas.

Los preprocesadores CSS más populares son Sass y LESS. Ambos amplían CSS y son compatibles con las versiones anteriores, lo que significa que un archivo CSS sin formato es un archivo Sass o LESS válido. Sass se basa en Ruby y LESS se basa en JavaScript y normalmente se ejecutan como parte del proceso de desarrollo local. Ambos tienen herramientas de línea de comandos disponibles, así como compatibilidad integrada en Visual Studio para ejecutarlas mediante tareas de Gulp o Grunt.

JavaScript

JavaScript es un lenguaje de programación dinámico e interpretado que se ha estandarizado en la especificación del lenguaje ECMAScript. Es el lenguaje de programación de la web. Al igual que CSS, JavaScript se puede definir como atributos dentro de elementos HTML, como bloques de script dentro de una página o en archivos independientes. Al igual que CSS, se recomienda organizar JavaScript en archivos independientes, lo que lo mantiene separado tanto como sea posible del HTML que se encuentra en páginas web individuales o vistas de aplicación.

Al trabajar con JavaScript en la aplicación web, normalmente es necesario realizar algunas tareas:

  • Seleccionar un elemento HTML y recuperar o actualizar su valor.

  • Consulta de una API web para obtener datos.

  • Enviar un comando a una API web (y responder a una devolución de llamada con su resultado).

  • Realización de la validación.

Puede realizar todas estas tareas solo con JavaScript, pero existen muchas bibliotecas para facilitar estas tareas. Una de las primeras y más exitosas de estas bibliotecas es jQuery, que sigue siendo una opción popular para simplificar estas tareas en páginas web. En el caso de las aplicaciones de página única (SPA), jQuery no proporciona muchas de las características deseadas que ofrece Angular y React.

Aplicaciones web antiguas con jQuery

A pesar de ser antiguo según los estándares de los frameworks de JavaScript, jQuery sigue siendo una biblioteca ampliamente utilizada para trabajar con HTML/CSS y desarrollar aplicaciones que realizan llamadas AJAX a las API web. Sin embargo, jQuery funciona en el nivel del modelo de objetos de documento del explorador (DOM) y, de forma predeterminada, solo ofrece un modelo imperativo, en lugar de declarativo.

Por ejemplo, imagine que si el valor de un cuadro de texto supera 10, se debe hacer visible un elemento de la página. En jQuery, esta funcionalidad normalmente se implementaría escribiendo un controlador de eventos con código que inspeccionaría el valor del cuadro de texto y establecería la visibilidad del elemento de destino en función de ese valor. Este proceso es un enfoque imperativo basado en código. En su lugar, otro marco podría usar databinding para enlazar la visibilidad del elemento al valor del cuadro de texto mediante declaración. Este enfoque no requeriría escribir ningún código, sino que solo requiere decorar los elementos implicados en los atributos de enlace de datos. A medida que los comportamientos del lado cliente crecen más complejos, los enfoques de enlace de datos suelen dar lugar a soluciones más sencillas con menos código y complejidad condicional.

jQuery frente a un marco de SPA

Factor jQuery Angular
Abstrae el DOM Sí Sí
Compatibilidad con AJAX Sí Sí
Enlace de datos declarativo No Sí
Enrutamiento de estilo MVC No Sí
Plantillas No Sí
Enrutamiento de vínculo profundo No Sí

La mayoría de las características que jQuery carece intrínsecamente se puede agregar con la adición de otras bibliotecas. Sin embargo, un marco spa como Angular proporciona estas características de forma más integrada, ya que se ha diseñado con todos ellos en mente desde el principio. Además, jQuery es una biblioteca imperativa, lo que significa que debe llamar a funciones de jQuery para poder hacer cualquier cosa con jQuery. Gran parte del trabajo y la funcionalidad que proporcionan los marcos de SPA se pueden realizar mediante declaración, lo que requiere que no se escriba código real.

El enlace de datos es un excelente ejemplo de esta funcionalidad. En jQuery, normalmente solo toma una línea de código para obtener el valor de un elemento DOM o para establecer el valor de un elemento. Sin embargo, debe escribir este código en cualquier momento que necesite cambiar el valor del elemento y, a veces, esto se producirá en varias funciones de una página. Otro ejemplo común es la visibilidad de elementos. En jQuery, puede haber muchos lugares diferentes en los que escribiría código para controlar si determinados elementos estaban visibles. En cada uno de estos casos, al usar el enlace de datos, no es necesario escribir código. Simplemente enlazaría el valor o la visibilidad de los elementos en cuestión a un modelo de vista de la página y los cambios en ese modelo de vista se reflejarían automáticamente en los elementos enlazados.

SPA de Angular

Angular sigue siendo uno de los marcos de JavaScript más populares del mundo. Desde Angular 2, el equipo recompiló el marco desde cero (con TypeScript) y cambió el nombre del nombre original de AngularJS a Angular. Ahora, tras varios años desde su rediseño, Angular sigue siendo un sólido marco para el desarrollo de aplicaciones de una sola página.

Las aplicaciones angulares se compilan a partir de componentes. Los componentes combinan plantillas HTML con objetos especiales y controlan una parte de la página. Aquí se muestra un componente sencillo de los documentos de Angular:

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

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

export class AppComponent { name = 'Angular'; }

Los componentes se definen mediante la @Component función de decorador, que toma metadatos sobre el componente. La propiedad selector identifica el identificador del elemento en la página donde se mostrará este componente. La propiedad template es una plantilla HTML sencilla que incluye un marcador de posición que corresponde a la propiedad name del componente, definida en la última línea.

Al trabajar con componentes y plantillas, en lugar de elementos DOM, las aplicaciones de Angular pueden funcionar en un nivel superior de abstracción y con menos código general que las aplicaciones escritas con solo JavaScript (también denominado "vanilla JS") o con jQuery. Angular también impone algún orden sobre cómo organizar los archivos de script del lado cliente. Por convención, las aplicaciones de Angular usan una estructura de carpetas común, con archivos de script de módulos y componentes ubicados en una carpeta de la aplicación. Los scripts angulares relacionados con la compilación, implementación y prueba de la aplicación se encuentran normalmente en una carpeta de nivel superior.

Puede desarrollar aplicaciones de Angular mediante una CLI. Introducción al desarrollo de Angular localmente (suponiendo que ya tiene git y npm instalado) consiste en simplemente clonar un repositorio desde GitHub y ejecutar npm install y npm start. Además de esto, Angular incluye su propia CLI, que puede crear proyectos, agregar archivos y ayudar con las tareas de prueba, agrupación e implementación. Esta facilidad de uso de la CLI hace que Angular sea especialmente compatible con ASP.NET Core, que también ofrece una gran compatibilidad con la CLI.

Microsoft ha desarrollado una aplicación de referencia, eShopOnContainers, que incluye una implementación de SPA de Angular. Esta aplicación incluye módulos de Angular para administrar la cesta de la compra de la tienda en línea, cargar y mostrar elementos desde su catálogo y controlar la creación de pedidos. Puede ver y descargar la aplicación de ejemplo desde GitHub.

Reaccionar

A diferencia de Angular, que ofrece una implementación completa del modeloView-Controller, React solo se preocupa por las vistas. No es un marco, solo una biblioteca, por lo que para crear una SPA, deberá aprovechar bibliotecas adicionales. Hay una serie de bibliotecas diseñadas para usarse con React para generar aplicaciones enriquecidas de página única.

Una de las características más importantes de React es su uso de un DOM virtual. El DOM virtual proporciona a React varias ventajas, incluido el rendimiento (el DOM virtual puede optimizar qué partes del DOM real deben actualizarse) y la capacidad de prueba (no es necesario tener un explorador para probar React y sus interacciones con su DOM virtual).

React también es inusual en cómo funciona con HTML. En lugar de tener una separación estricta entre código y marcado (con referencias a JavaScript que aparecen en atributos HTML quizás), React agrega HTML directamente dentro de su código JavaScript como JSX. JSX es una sintaxis similar a HTML que se puede compilar hasta JavaScript puro. Por ejemplo:

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

Si ya conoce JavaScript, el aprendizaje de React debe ser fácil. No hay casi tanta curva de aprendizaje ni sintaxis especial implicada como con Angular u otras bibliotecas populares.

Dado que React no es un marco completo, normalmente querrá que otras bibliotecas controle aspectos como el enrutamiento, las llamadas api web y la administración de dependencias. Lo bueno es que puede elegir la mejor biblioteca para cada uno de estos, pero la desventaja es que necesita tomar todas estas decisiones y comprobar que todas las bibliotecas elegidas funcionan bien cuando haya terminado. Si desea un buen punto de partida, puede usar un kit de inicio como React Slingshot, que empaqueta previamente un conjunto de bibliotecas compatibles junto con React.

Vue

En su guía de introducción, "Vue es un marco progresivo para crear interfaces de usuario. A diferencia de otros marcos monolíticos, Vue está diseñado desde el principio para que se pueda adoptar de forma incremental. La biblioteca principal se centra solo en la capa de vista y es fácil de seleccionar e integrar con otras bibliotecas o proyectos existentes. Por otro lado, Vue es perfectamente capaz de impulsar sofisticadas aplicaciones Single-Page cuando se usan en combinación con herramientas modernas y bibliotecas auxiliares".

La introducción a Vue simplemente requiere incluir su script dentro de un archivo HTML:

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

Con el marco agregado, podrá representar datos declarativamente en el DOM mediante la sintaxis de plantillas sencilla de Vue:

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

y, a continuación, agregue el siguiente script:

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

Esto es suficiente para representar "Hello Vue!" en la página. Sin embargo, tenga en cuenta que Vue no representa simplemente el mensaje incluido en el elemento "div" una vez. Admite el enlace de datos y las actualizaciones dinámicas de manera que si el valor de message cambia, el valor de <div> se actualiza inmediatamente para reflejarlo.

Por supuesto, esto apenas revela la esencia de lo que Vue es capaz de. Ha ganado una gran popularidad en los últimos años y tiene una gran comunidad. Hay una enorme y creciente lista de componentes y bibliotecas auxiliares que funcionan con Vue para ampliarlo también. Si desea agregar el comportamiento del lado cliente a la aplicación web o considerar la posibilidad de crear una SPA completa, Vue merece la pena investigar.

Blazor WebAssembly

A diferencia de otros marcos de JavaScript, Blazor WebAssembly es un marco de aplicación de página única (SPA) para crear aplicaciones web interactivas del lado cliente con .NET. Blazor WebAssembly usa estándares web abiertos sin complementos ni volver a compilar código en otros lenguajes. Blazor WebAssembly funciona en todos los exploradores web modernos, incluidos los exploradores móviles.

La ejecución de código .NET dentro de exploradores web es posible mediante WebAssembly (abreviado wasm). WebAssembly es un formato de código de bytes compacto optimizado para descargas rápidas y una velocidad de ejecución máxima. WebAssembly es un estándar web abierto y se admite en exploradores web sin complementos.

El código WebAssembly puede acceder a la funcionalidad completa del explorador a través de JavaScript, denominada interoperabilidad de JavaScript, a menudo acortada a la interoperabilidad de JavaScript o a la interoperabilidad de JS. El código de .NET que se ejecuta a través de WebAssembly en el explorador se ejecuta a su vez en el espacio aislado de JavaScript del explorador con las protecciones que proporciona dicho espacio aislado contra acciones malintencionadas en la máquina cliente.

Para obtener más información, vea Introducción a ASP.NET Core Blazor.

Elección de un marco de SPA

Al valorar qué opción funcionará mejor para admitir la SPA, tenga en cuenta las consideraciones siguientes:

  • ¿Su equipo está familiarizado con el marco y sus dependencias (incluido TypeScript en algunos casos)?

  • ¿Hasta qué punto es opinable el marco, y usted está de acuerdo con la manera predeterminada de hacer las cosas?

  • ¿Incluye (o una biblioteca complementaria) todas las características que requiere la aplicación?

  • ¿Está bien documentado?

  • ¿Cómo está activa su comunidad? ¿Se están construyendo nuevos proyectos con ello?

  • ¿Cómo está activo su equipo principal? ¿Se resuelven los problemas y se envían periódicamente las nuevas versiones?

Los marcos siguen evolucionando con velocidad vertiginosa. Use las consideraciones enumeradas anteriormente para ayudar a mitigar el riesgo de elegir un marco en el que más adelante lamentará que dependa. Si es particularmente aversente al riesgo, considere un marco que ofrezca soporte técnico comercial o que esté desarrollando una gran empresa.

Referencias: tecnologías web cliente

Siguiente anterior