En este post, voy a hablar sobre varios aspectos del desarrollo web que cualquier programador del perfil relevante debe conocer. Si es posible, proporcionaré enlaces a materiales que demuestren ejemplos del uso de las capacidades correspondientes y recomendaciones para su uso correcto. Aquí me enfocaré en la implementación de ciertos mecanismos en Angular, React y Vue.
Interfaz de usuario
▍ Diseño de página
La creación de una aplicación web comienza con el diseño de un diseño atractivo y ordenado que atraerá a los usuarios y les ayudará a pasar mucho tiempo en el sitio.
Hay muchos marcos CSS por ahí. Quizás entre ellos encuentres exactamente el que más te convenga. El más famoso de ellos es Bootstrap, y gracias a las nuevas características de los preprocesadores CSS, puede personalizar profundamente los estilos de este marco. Allí puede encontrar varios componentes y controles, cuyo uso constante le permitirá crear sitios diseñados de manera consistente.
La versión alfa de la versión 5 de Bootstrap está actualmente disponible .
Si prefiere crear conjuntos de estilos para sus proyectos usted mismo (componentes, relleno, contenedores, etc.), puede centrar su atención en CSS Flexbox , haciendo de este diseño flexible de elementos de página web la base de su propio marco CSS.
CSS Grid adopta un enfoque diferente para organizar el contenido de la página web colocándolo en una cuadrícula.
▍Diseño responsivo
La capacidad de respuesta es la capacidad de un sitio para adaptar su contenido al dispositivo en el que se ve. Por ejemplo, en un teléfono inteligente y una computadora portátil, este artículo se verá diferente.
La capacidad de respuesta de una aplicación web ayuda a que se muestre correctamente en diferentes pantallas, mejora la legibilidad del contenido y mejora la experiencia del usuario.
En MDN puedes saber que las consultas de medios se utilizan cuando necesitas aplicar diferentes estilos CSS para diferentes dispositivos (por ejemplo, para una impresora o monitor), así como también tener en cuenta características y parámetros específicos del dispositivo (por ejemplo, para diferentes resoluciones de pantalla o para diferentes anchos de la ventana del navegador).
Las consultas de medios CSS son una herramienta poderosa para respaldar el diseño receptivo.
Se pueden utilizar junto con CSS Flexbox o CSS Grid. Si prefiere utilizar marcos CSS, esos marcos normalmente ya implementan las capacidades correspondientes. Con este enfoque, para crear páginas receptivas, simplemente agregue las clases apropiadas a los elementos.
Cuando hablamos del concepto de capacidad de respuesta aplicado a imágenes , podemos pensar en un atributo
srcset. El uso de este atributo le permite mostrar imágenes de diferentes tamaños dependiendo de las características de la pantalla del dispositivo, lo que ayuda a reducir la cantidad de datos transferidos del servidor al navegador.
▍Componentes y controles homogéneos
El usuario estará encantado de trabajar con el sitio, cuyos componentes y controles están diseñados de manera uniforme, con el mismo estilo. Este enfoque de diseño facilita que el usuario domine las nuevas funciones del sitio y sirve como una especie de tarjeta de presentación de la empresa.
Si desea utilizar marcos y bibliotecas existentes, Angular, React o Vue para desarrollar sus proyectos, aquí hay algunos ejemplos de bibliotecas de estilo que implementan los principios de Material Design diseñados para estas herramientas:
- Angular. Biblioteca de Angular Material donde puedes encontrar componentes potentes y un CDK completo.
- Reaccionar. Los principios de Material Design se implementan en los componentes web de Material UI .
- Vue. Aquí tenemos Vuetify , una implementación de Material Design diseñada para proyectos Vue.
▍Validación de formularios y manejo de errores
La validación de datos es la tarea más importante para aquellos proyectos que reciben algo del usuario. Además, nada debe impedir que la aplicación reciba datos correctos del usuario: ni problemas de red, ni errores en el servidor, ni errores cometidos por el propio usuario. Estas son algunas de las soluciones de validación de entrada de usuario creadas para diferentes marcos:
- Angular. Dado que Angular es un marco de trabajo completo, nos proporciona una API especial para la validación de formularios.
- Reaccionar. La biblioteca React Hook Form es probablemente el validador de formularios más utilizado en los proyectos React .
- Vue. El nombre de la biblioteca correspondiente a Vue, vuelidate , se basa en un juego de palabras interesante.
Experiencia de usuario
▍Uso de mecanismos asincrónicos
Cargar datos en una aplicación o guardarlos puede llevar milisegundos, segundos o incluso minutos. Por eso es importante informar al usuario sobre tales operaciones utilizando los indicadores adecuados y no bloquear el trabajo del usuario con el proyecto.
Los motores de JavaScript como promesas y las API de navegador como Fetch pueden ayudarnos con estas tareas .
▍ Soporte para navegadores obsoletos (polyfills)
El mundo del desarrollo front-end está evolucionando muy rápidamente. Lo mismo puede decirse de los navegadores. Pero diferentes personas usan diferentes navegadores y diferentes versiones de ellos. Por lo tanto, para garantizar el correcto funcionamiento de su código en todas las plataformas utilizadas, el desarrollador debe cuidar la compatibilidad. Por ejemplo, la versión anterior de IE no admite las mismas funciones de JS y CSS que la última versión de Google Chrome. Los Polyfills
se utilizan para garantizar que el proyecto funcione correctamente en navegadores antiguos . Están bastante bien descritos en este artículo: "Un polyfill (polyfiller) es un fragmento de código (o complemento) que proporciona una implementación de una tecnología que usted, el desarrollador, esperaría encontrar entre las capacidades estándar del navegador".
Para saber si una determinada regla CSS o una determinada función JS son compatibles con una versión de navegador en particular, eche un vistazo al sitio ¿Puedo usarlo ?
Si hablamos de resolver problemas de soporte del navegador en Angular, React y Vue, entonces la situación es la siguiente:
- Angular. Hay una sección especial en la documentación de Angular para la compatibilidad con el navegador.
- Reaccionar. Proyectos creados con el soporte de Create React App , como ReactDOM , navegadores que comienzan con IE 9. Este soporte se basa en el uso de polyfills.
- Vue. Los detalles de compatibilidad con navegadores heredados se describen aquí en la documentación de CLI.
▍Localización e internacionalización
Su sitio puede tener usuarios de todo el mundo. Tener este hecho en cuenta a la hora de crear un proyecto aumentará la usabilidad del sitio para todos los que decidan verlo.
La localización (l10n, localización) es, según la definición del W3C, la adaptación del contenido de un producto, programa o documento al idioma, la cultura y otros requisitos de un mercado objetivo específico.
La internacionalización (i18n, internacionalización) es, basada en los materiales del W3C, la creación y desarrollo de contenido de producto, programa o documentación que permite una fácil localización para mercados de destino que difieren en cultura, región o idioma.
Ambos conceptos están interconectados, se pueden implementar de diferentes maneras. Esto incluye, por ejemplo, las siguientes técnicas:
- Utilice una lista desplegable en el sitio con una lista de idiomas admitidos por el proyecto.
- Acceder a información sobre la ubicación geográfica del usuario (mediante la API del navegador de Geolocalización ) y adaptar el sitio web de acuerdo con los datos recibidos.
- Especificar información de idioma en la URL. Por ejemplo, podría tener este aspecto:
example.com?lang=eno como esto:example.com/eno incluso de modo:en.example.com.
Ahora para estos conceptos en Angular, React y Vue.
- Angular. Angular, nuevamente, es un marco completo, le brinda al desarrollador una solución lista para usar .
- Reaccionar. Las tareas de internacionalización de proyectos se pueden resolver utilizando la biblioteca react-i18next , que es popular en el entorno React .
- Vue. vue-i18n.
▍
Accesibilidad (a11y, accesibilidad) es la capacidad de un sitio para adaptarse a las necesidades de los usuarios con discapacidad.
La accesibilidad del sitio web a menudo se pasa por alto. Para que el proyecto sea accesible para los usuarios con discapacidades, puede ser necesario revisar el enfoque de la formación de la experiencia del usuario que se utiliza en él, lo que a veces puede requerir un rediseño profundo del proyecto. En cualquier caso, es importante tener en cuenta las necesidades de todos los usuarios, especialmente si se tiene en cuenta que incluso pequeños cambios en el código del proyecto pueden mejorar significativamente la usabilidad del sitio para aquellos que tienen dificultades para utilizar sitios habituales.
Se pueden aplicar varias técnicas para hacer accesibles los proyectos web. Estos incluyen los siguientes:
- Usando el atributo de imagen
alt. - El uso de atributos ARIA para diseñar descripciones del contenido de las páginas del sitio.
- Soporte para la capacidad de cambiar el tamaño del texto.
- Modo de alto contraste disponible.
- Soporte para la navegación del sitio usando el teclado, en particular teclas
TABy flechas.
El proyecto a11yproject.com está implementando la idea de estandarizar estos conceptos. ¡Esta iniciativa es digna de respeto! Los principales marcos y bibliotecas de JS también están haciendo esfuerzos para apoyar el desarrollo de sitios accesibles:
- Angular. Hay una sección especial en la documentación de este marco . El desarrollo de proyectos accesibles también se admite a nivel de Angular CDK .
- Reaccionar. La accesibilidad también se analiza en la documentación de la biblioteca React. También hay una biblioteca especial: react-a11y . Pero esta biblioteca ya no es compatible, así que úsela con precaución y tenga en cuenta que se planea reemplazarla con la biblioteca react-ax .
- Vue. El complemento vue-a11y lo ayudará a desarrollar proyectos accesibles en Vue . También se tuvieron en cuenta las consideraciones de accesibilidad al crear la biblioteca vuetify .
▍Notificaciones
Para mantenerse en contacto con los visitantes de su sitio, puede utilizar las notificaciones de la API del navegador . Con su ayuda, puede informar a los usuarios que ha aparecido algo nuevo en el sitio.
Carga y procesamiento de datos
▍Una única fuente de datos fiables
Las herramientas de administración del estado de las aplicaciones, que ganaron popularidad en 2015, ahora son imprescindibles para casi cualquier proyecto web. Si bien el ámbito de la gestión del estado de las aplicaciones no es sencillo, el uso de soluciones personalizadas suele ser un método sencillo y eficaz de centralizar los datos de las aplicaciones. Todas las herramientas de gestión del estado se basan en el patrón Flux.
Implementación NgRx del patrón Flux (fuente - ngrx.io )
Estas herramientas usan diferentes nombres para las mismas entidades. Por ejemplo, lo que NgRx llama selectores se llama captadores en Vuex. Lo que Angular llama reductores se llama mutaciones en Vue.
Estas son las herramientas de administración de estado utilizadas en Angular, React y Vue:
- Angular. "Gestión de estado reactivo para Angular": NgRx .
- Reaccionar. Aquí, por supuesto, se usa Redux .
- Vue. Vuex se utiliza para administrar el estado de las aplicaciones Vue .
▍Descarga de datos
Hay diferentes formas de cargar datos en aplicaciones. El más común de ellos es el uso de solicitudes HTTP dirigidas a una API web. El navegador tiene una API Fetch diseñada para organizar la carga de datos, pero para los marcos y bibliotecas principales, se han desarrollado sus propias soluciones:
- Angular. La documentación de Angular recomienda usar rxjs y el enfoque basado en Observer (aquí se usan observables o objetos Subject).
- Reaccionar. La documentación de React recomienda usar la API Fetch para cargar datos.
- Vue. La comunidad de Vue prefiere usar la biblioteca Axios . Esta implementación del mecanismo de carga de datos se basa en promesas.
Cuando se habla de mecanismos para cargar datos en aplicaciones web, vale la pena mencionar GraphQL . Esta tecnología ha cambiado el enfoque utilizado al cargar datos en aplicaciones de front-end. Al aplicarlo, "El cliente determina lo que necesita utilizando el lenguaje de consulta". Con GraphQL, podemos obtener exactamente lo que necesitamos de fuentes de datos remotas y nada más.
Aquí están las implementaciones de GraphQL para las herramientas frontend que nos interesan:
- Angular. apolo-angular
- Reaccionar. reaccionar-apolo
- Vue.js. vue-apollo
▍Almacenamiento de datos locales
El almacenamiento de datos local es el almacenamiento de datos en la computadora del usuario. Los datos se pueden almacenar usando cookies , así como usando localStorage y
sessionStorage.
▍Trabajadores web
Los trabajadores web son una tecnología introducida por la nueva API del navegador. Permite que el código JavaScript se ejecute en segundo plano, quitando la carga del hilo principal y sin afectar el rendimiento del código de la página web.
Los trabajadores web son aplicables en Angular, React y Vue:
- Angular. Hay una sección especial en la documentación de Angular para este tema.
- Reaccionar. Hay un gancho React especial que se puede encontrar aquí .
- Vue. En las aplicaciones de Vue, los trabajadores web son convenientes de usar mediante la biblioteca vue-worker .
Redes y rendimiento
▍ Tamaño del paquete de la aplicación
El crecimiento del mercado de los teléfonos inteligentes ha revolucionado el mundo del desarrollo web. Ahora, al crear sitios web, primero debemos considerar las necesidades de los usuarios de dispositivos móviles. Cuanto menor sea la cantidad de datos que tengan que cargar los dispositivos móviles al trabajar con proyectos web, mejor. Según el gráfico a continuación, el uso de Internet móvil superó al uso de Internet de escritorio en 2016.
Uso mundial de Internet (fuente: broadbandsearch.net )
Esto nos dice en términos inequívocos cuán importantes son los tamaños de los paquetes de proyectos web en estos días. El tamaño de los archivos descargados debe ser lo más pequeño posible para ahorrar recursos de los usuarios móviles. Afortunadamente para nosotros, los desarrolladores de las principales herramientas de front-end y sus complementos tienen esto en cuenta al desarrollar sus proyectos. Reducir el tamaño de los paquetes de aplicaciones también significa un mejor rendimiento.
- Angular. Los paquetes de aplicaciones angulares son fáciles y convenientes de examinar con webpack-bundle-analyzer . Además, la CLI de Angular nos brinda una opción
stats-jsonque nos permite generar un informe después de construir un paquete. - React. Create React App , .
- Vue. Vue, Angular,
report, .
▍- -
Un trabajador de servicio es un script que se ejecuta en un navegador web y administra el almacenamiento en caché de los datos de la aplicación. Este es uno de los mecanismos que se utilizan para transformar un sitio web normal en una aplicación web progresiva (PWA). Puede trabajar con PWA como un sitio web normal usando HTTPS, pero las aplicaciones web progresivas tienen algunas características especiales. Dichas capacidades incluyen, por ejemplo, instalar dichas aplicaciones en dispositivos móviles sin tener que publicarlas en tiendas de aplicaciones especializadas y soportar el funcionamiento de aplicaciones sin acceso a Internet.
Puede usar trabajadores de servicio en Angular, React y Vue:
- Angular. Angular proporciona mecanismos para utilizar trabajadores de servicios.
- Reaccionar. Aquí hay un tutorial sobre cómo desarrollar una PWA con la aplicación Create React.
- Vue. La capacidad de crear PWA en Vue es compatible con el nivel de CLI.
▍ Representación del servidor
El Server-Side Rendering (SSR) es un conjunto de tecnologías que están revolucionando el desarrollo de aplicaciones basadas en Angular, React y Vue. Con SSR, HTML se genera en el servidor y se envía al navegador. Después de eso, el marcado HTML estático se pone en un estado de trabajo y la aplicación web está completamente lista para usarse en el cliente. Hay varios objetivos al utilizar la representación del servidor:
- Mejora de sitios SEO.
- Aceleración de la visualización de sitios en el navegador.
Estas son las soluciones SSR para las herramientas frontend que estamos investigando:
- Angular. Allí se utilizó Angular Universal .
- Reaccionar. Para representación del lado del servidor de aplicaciones Reaccionar, Next.js se utiliza .
- Vue. La representación del lado del servidor de las aplicaciones Vue se realiza utilizando el marco NuxtJS .
▍Generadores de sitios estáticos
Con el uso creciente de Jamstack , los Static Site Generators (SSG) se han convertido en una tecnología muy buscada. Una aplicación Jamstack es un tipo de aplicación web cuyo contenido está listo para el navegador y esencialmente no necesita un servidor web (estos materiales se pueden entregar a los clientes directamente desde la CDN). Los detalles sobre estos sitios se pueden encontrar siguiendo el enlace anterior. Enumeramos aquí solo las principales fortalezas de SSG:
- Velocidad: los generadores de sitios estáticos crean páginas de sitios durante la construcción del proyecto, no cuando el cliente las solicita.
- Seguridad: el uso de SSG le permite abandonar los sistemas de gestión de contenido (CMS), que a menudo son el objetivo de los ataques de los piratas informáticos.
- Simplifique el escalado: un proyecto web que utiliza SSG es una colección de archivos que se pueden transferir a un cliente desde cualquier lugar. Esto hace que sea mucho más fácil almacenar dichos archivos en un CDN. Como resultado, resulta que los sitios estáticos escalan muy bien.
- Proceso de desarrollo simplificado: los proyectos SSG no necesitan un backend ni una base de datos. Esto lo hace más fácil para los desarrolladores.
Existen soluciones SSG para Angular, React y Vue:
Otros proyectos de SSG incluyen los siguientes: 11ty , Hugo , Jekyll .
Analítica
▍ Monitoreo del comportamiento del usuario y pruebas A / B
La observación del comportamiento del usuario en el sitio es opcional, pero la posesión de dichos datos contribuye de manera significativa a mejorar los proyectos web. Existe una clase especial de herramientas diseñadas para recopilar información sobre cómo los usuarios interactúan con el sitio. Estas herramientas permiten a los desarrolladores de sitios considerar mejor las necesidades de los usuarios y, a través de pruebas A / B, ayudan a elegir las alternativas más adecuadas. Estamos hablando de las capacidades de los sitios, de los patrones de comportamiento de los usuarios que admiten, de diseño.
Aquí hay algunas soluciones para monitorear el comportamiento del usuario y las pruebas A / B:
▍ -
Es difícil desarrollar una aplicación web de alto rendimiento de una sola vez. Pero, por ejemplo, una aplicación que ha sido optimizada para acelerar su carga generará más emociones positivas en el usuario que su versión más lenta. Existen varios proyectos que analizan sitios y dan recomendaciones para su mejora. Por ejemplo, PageSpeed Insights de Google.
Entre las herramientas para desarrolladores de Google Chrome, puede encontrar una herramienta muy valiosa para analizar el rendimiento del sitio: Lighthouse . Califica los sitios según cinco criterios (rendimiento, accesibilidad, mejores prácticas, SEO, PWA) utilizando una escala de 100 puntos. Después del análisis, se genera un informe con recomendaciones para mejorar el sitio.
Análisis de un sitio con Lighthouse
Otro analizador de rendimiento que puede encontrar entre las herramientas de desarrollo de Chrome es el panel Cobertura , que le permite buscar código JS y CSS no utilizado. Al excluir dicho código del proyecto, puede reducir el tamaño de su paquete. Esto acelerará la carga del sitio, lo que se notará especialmente en dispositivos móviles.
▍SEO
SEO, optimización de motores de búsqueda, es lo que necesita hacer para mejorar la clasificación de un sitio en los motores de búsqueda, como Google, Bing, DuckDuckGo y muchos otros. Un sitio bien optimizado se vuelve más visible. De hecho, es tan importante que en el mundo del desarrollo web existe incluso un puesto especial: “Especialista en SEO”.
Si hablamos de SEO en Angular, React y Vue, obtenemos lo siguiente:
Estoy de acuerdo en que el desarrollo front-end es un campo de especialización amplio y en constante cambio. De hecho, si alguien intenta convertirse en un desarrollador universal que lo sabe todo y es capaz, será extremadamente difícil para él lograrlo y le llevará mucho tiempo. Además, cada proyecto web tiene sus propias necesidades y prioridades. Por eso es necesario decidir sobre lo más importante al comienzo del trabajo en un proyecto. Esto permitirá no dispersarse, seleccionando y estudiando solo lo más necesario, y planificando la arquitectura del proyecto para que corresponda a sus objetivos.
¿Qué nuevas tecnologías de desarrollo de front-end cree que son las más prometedoras?
