Trabajar como desarrollador front-end te permite hacer una variedad de cosas. Implica una variedad de trabajos y talentos. Además, es fundamental mantener el enfoque en el propósito principal de lo que estamos creando: un sitio web que ayude a las personas con las tareas cotidianas.
En este ensayo, repasaré los numerosos aspectos/características que todo desarrollador web debería tener en cuenta. Si existen, te daré algunos consejos y ejemplos sobre cómo usarlos y tener éxito en ellos.
Diseño de interfaz de usuario
Disposición
La creación de una aplicación web comienza con la creación de un diseño atractivo y correcto que atraiga a los usuarios a pasar una cantidad significativa de tiempo en su sitio web.
Hay varios marcos CSS disponibles y puede elegir uno que cumpla con sus requisitos. El más conocido es Bootstrap, que puede modificar rápidamente gracias a las características adicionales de los preprocesadores CSS. Recomiendan numerosos componentes y controles que le darán a su sitio una apariencia consistente.
Oreja
Con Bootstrap, el marco de código abierto front-end más popular del mundo, puede desarrollar y configurar rápidamente páginas web con capacidad de respuesta para dispositivos móviles.
getbootstrap.com
Bootstrap solo ha publicado una alfa de su quinta versión por ahora.
Flexbox es una opción fantástica para administrar bloques flexibles de contenido si desea crear su propio marco CSS (es decir, aspecto de componentes, espacios, contenedores, etc.).
Los fundamentos de flexbox
El módulo de caja flexible, o flexbox para abreviar, se creó como un modelo de diseño unidimensional y como…
desarrollador.mozilla.org
CSS Grid utiliza una técnica diferente, dividiendo el contenido en cuadrículas.
Sensibilidad
La capacidad de un sitio web para modificar la entrega de su información al dispositivo del lector se conoce como capacidad de respuesta. Por ejemplo, no verá esta publicación de la misma manera si la lee en su teléfono inteligente o en su computadora portátil.
La capacidad de respuesta de una aplicación web ayuda a mostrar el material con precisión y aumenta la legibilidad y la experiencia del usuario.
«Las consultas de medios son útiles cuando desea ajustar su sitio o aplicación en función del tipo general de un dispositivo (como impresión frente a pantalla) o atributos y parámetros particulares (como resolución de pantalla o ancho de ventana del navegador)», según MDN en línea. instrucciones.
Las consultas de medios CSS son una técnica poderosa para administrar la capacidad de respuesta.
Como vimos antes, pueden usarse junto con Flexbox o CSS Grid. Si usa un marco CSS, la capacidad de respuesta generalmente se ocupa de usted. Todo lo que tiene que hacer ahora es agregar algunas clases de CSS.
Usar srcset para imágenes podría ser una alternativa fantástica para hacer que sus imágenes respondan. Le permite mostrar la misma imagen con un tamaño inicial variado según la dimensión del dispositivo mientras mantiene la relación de aspecto y reduce el peso del paquete.
Imágenes que responden
En este artículo, aprenderemos sobre las imágenes receptivas, que son imágenes que funcionan bien en una variedad de dispositivos.
desarrollador.mozilla.org
Controles y componentes homogéneos
Será más fácil para las personas ver si los componentes y controles son todos iguales. Funciona como una guía, una ruta de navegación para los usuarios y una identidad de marca para su negocio.
Aquí hay algunas bibliotecas de marco JS conocidas para utilizar si desea aprovechar un marco existente:
Material angular: el material angular es una alternativa a Angular, que presenta componentes fuertes y un CDK completo.
Material UI es una implementación de diseño de materiales de componentes web que utiliza React.
Vue.js: finalmente, la comunidad de Vue.js ha producido su propia implementación de estándares de materiales: Vuetify.
Errores y validación
Cuando se trata de entradas de usuario, la validación es fundamental. Es fundamental manejar la validación y los errores en su aplicación, ya sea que se deban a dificultades de la red, fallas del servidor o entradas incorrectas del usuario.
Angular: Angular incluye una API de validación de formularios como parte de su arquitectura general.
React Hook Form puede ser el complemento más utilizado para manejar la validación de formularios en un proyecto React.
Vue.js: un divertido juego de palabras para esta versión de Vue.js: vuelidate
La interacción del usuario
Teniendo en cuenta la asincronía
Puede llevar unos momentos, unos segundos o incluso minutos obtener o guardar datos. Como resultado, agregar un cargador o mensajes pendientes indica que algo está pasando.
Las llamadas asincrónicas se pueden manejar mediante la Promesa de Javascript o la API Fetch del navegador.
Compatibilidad con navegadores (polyfills)
El mundo del front-end, como los navegadores, cambia rápidamente. Sin embargo, debido a la retrocompatibilidad, una sola pieza de código no proporcionará el mismo resultado en todos los navegadores y versiones. Una versión anterior de Internet Explorer (Internet Explorer) no admite tantas capacidades JS o reglas CSS como la versión más reciente de Google Chrome.
Se han realizado polyfills para evitar que ocurran problemas durante el tiempo de ejecución en versiones anteriores. «Un polyfill, o polyfiller, es una pieza de código (o complemento) que ofrece la tecnología que usted, el desarrollador, espera que el navegador proporcione de forma nativa», escribe Remy Sharp en su publicación.
Marque «¿Puedo usar…» para ver si una regla CSS o función JS es compatible con una determinada versión del navegador.
Angular: el manual de Angular incluye una sección sobre compatibilidad con navegadores.
React — Create React App, como ReactDOM, es compatible con Internet Explorer 9+ con polyfills.
La documentación de CLI para Vue.js describe la compatibilidad del navegador.
L10n (localización) e i18n (internacionalización) (internacionalización)
Usuarios de todo el mundo pueden visitar su sitio web. La internacionalización de su aplicación web hará que sea más fácil de entender para todos sus usuarios.
El método para reconocer la nación (o área) de origen del usuario y ajustar su sitio web a su ubicación se conoce como L10n (10 letras entre L y n).
La internacionalización, a menudo conocida como i18n (18 letras entre I y n), es el proceso de manejar muchos idiomas y configuraciones regionales en un proyecto web. Comprende no solo texto, por supuesto, sino también formato de fecha, formato numérico y, ocasionalmente, dirección de escritura (ltr o rtl).
Ambos principios están entrelazados y se pueden aplicar de varias maneras:
Mediante un menú desplegable con todos los idiomas disponibles
Acceder a la ubicación del usuario (usando la API del navegador de geolocalización) y personalizar la página web
Al agregar un parámetro de URL de idioma, se crea un tipo distinto de URL, por ejemplo,
example.com?lang=en, example.com/en, o incluso en.example.com son URL válidas.
Angular: una vez más, Angular ofrece una solución lista para usar como un marco completo.
El complemento react-i18next es bien conocido en la comunidad React.
Vue.js (Vue.js) es un lenguaje de programación que le permite El complemento vue-i18n tiene mucho poder.
a11y a11y a11y a11 (accesibilidad)
La capacidad de un sitio web para adaptarse a usuarios con limitaciones visuales, motoras u otras se conoce como a11y (11 letras entre aey).
Con frecuencia pasado por alto, requiere una nueva perspectiva sobre la experiencia del usuario y, en algunos casos, cambios considerables en el proyecto. No obstante, es fundamental incorporar este segmento de la población, especialmente porque incluso pequeñas modificaciones en su código pueden tener una influencia significativa en su experiencia de usuario.
Hay varias opciones, incluyendo:
Usando la propiedad alt para imágenes
Agregar propiedades ARIA al contenido para explicarlo
Personalización del tamaño del texto
Tener un modo de alto contraste disponible
Uso de TAB o métodos abreviados de teclado para navegar por el teclado
El proyecto a11y tiene como objetivo estandarizar esta noción, ¡y es un esfuerzo comunitario encomiable! Los principales marcos de JavaScript también han avanzado:
Angular: hay una sección dedicada en los documentos de Angular y el CDK de Angular comienza a manejar la accesibilidad.
React: React proporciona un paquete llamado react-a11y que habla sobre a11y en sus documentos. (Tenga cuidado, ya que pronto dejará de recibir mantenimiento y será reemplazado por react-axe).
Vue.js: el complemento vue-a11y mantiene la accesibilidad y vuetify también se enfoca en él.
Notificaciones
La API del navegador de notificaciones push notifica a los usuarios cuando hay nuevo contenido disponible, lo que le permite mantenerse en contacto con sus lectores.
Notificación
La interfaz de notificación de la API de alertas se utiliza para personalizar y mostrar notificaciones de escritorio al usuario…
desarrollador.mozilla.org
Datos y Aplicación
Una y única fuente de verdad (SSOT)
Las soluciones de gestión de estado de aplicaciones, que han sido populares desde 2015, se han vuelto inevitables. Aunque su utilidad es discutible, son una forma simple y eficiente de consolidar datos en su programa. Todos están usando el patrón Flux:
Implementación del patrón de flujo ngrx
Implementación de patrones de flujo en NgRx (de ngrx.io)
Los selectores de NgRx o Redux son análogos a los captadores de Vuex, y cada uno tiene su propia nomenclatura. Los reductores en Angular son equivalentes a las mutaciones en Vue…
Angular — “Estado reactivo para Angular”: NgRx.
Por supuesto, React — ¡Redux!
Vue.js: la herramienta de administración de estado de la aplicación Vue.js: Vuex.
Obteniendo informacion
Los datos se pueden recuperar de Internet de varias maneras. El método más frecuente es consultar las API web a través de solicitudes HTTP. La API del navegador proporciona la API Fetch, sin embargo, cada marco JS principal tiene su propia implementación.
Angular: basado en el diseño de Observer, Angular sugiere utilizar rxjs (usando objetos Observable o Subject).
Reaccionar: la documentación aún recomienda usar la API Fetch.
Vue.js: la comunidad de Vue.js prefiere Axios. Es una implementación basada en promesas.
Mención destacada: GraphQL
En el campo de la programación front-end, GraphQL ha revolucionado la forma en que se recuperan los datos. Su premisa es que «el cliente especifica lo que requiere mediante el uso de un lenguaje de consulta». Al hacerlo, recibimos precisamente lo que pedimos.
apolo-angular – angular
react-apollo es un componente de React.
vue-apollo — vue.js
Persistencia a nivel local
Los datos se pueden guardar localmente en la PC del usuario a través de la persistencia local. Las cookies, el almacenamiento local y el almacenamiento de sesión son opciones para almacenar datos.
Window.localStorage
El atributo localStorage de solo lectura le permite acceder a un objeto para el origen del; los datos almacenados se conservan en…
desarrollador.mozilla.org
Se utilizan cookies HTTP.
Una cookie HTTP (también conocida como cookie web o cookie del navegador) es una pequeña porción de datos enviada por un servidor al navegador web de un usuario. Los…
desarrollador.mozilla.org
Trabajadores en Internet
Hacer uso de trabajadores web
Los Trabajadores en línea son una forma rápida y fácil para que el contenido web ejecute scripts en segundo plano. El subproceso de trabajo tiene la capacidad de…
desarrollador.mozilla.org
Web Workers es una nueva API para navegadores. Es un script de JavaScript que se ejecuta en segundo plano y no afecta el rendimiento de la página.
Angular — En su documentación, Angular incluye una sección dedicada.
React: se ha creado un enlace React y se puede encontrar aquí.
Vue.js: vue-worker es una implementación de trabajador web en Vue.js.
Red y rendimiento
Tamaño del paquete
El auge de la industria de los teléfonos inteligentes ha dado paso a un cambio fundamental en el desarrollo web. Ahora debemos considerar el móvil primero para que los dispositivos tengan que descargar la cantidad mínima de material. Como indica este gráfico, el uso de Internet móvil ha superado al de la navegación de escritorio.
Gráfico que compara el uso de Internet en computadoras de escritorio y en teléfonos inteligentes
Broadbandsearch.net es la fuente de esta imagen.
Esto implica que el tamaño del paquete es crítico. Para guardar datos, el tamaño de los archivos descargados debe ser lo más pequeño posible. Afortunadamente, cuando los principales marcos JS lanzan nuevas versiones de sus bibliotecas, trabajan en ello. El tamaño reducido del paquete también garantiza un mejor rendimiento.
Angular: webpack-bundle-analyzer simplifica la inspección de paquetes. Además, la opción de comando stats-json en Angular CLI le permite producir un archivo de informe cuando se completa el proceso de construcción.
React: la aplicación Create React tiene una página dedicada al análisis del tamaño del paquete.
Vue.js: Vue CLI, como Angular, tiene una opción de comando de informe para obtener un archivo de informe. Más información está disponible aquí.
Trabajadores de la industria de servicios y aplicaciones web progresivas
Un trabajador de servicio es un script que controla el almacenamiento en caché de una aplicación que se ejecuta en el navegador web. Es una de las fases del proceso de conversión de una aplicación web a una PWA (aplicación web progresiva). Se puede acceder a una PWA como a cualquier otro sitio web mediante una URL segura, pero brinda una experiencia de usuario comparable a la de una aplicación móvil sin las limitaciones (p. ej., el envío a tiendas de aplicaciones o el uso intensivo de memoria en el dispositivo).
Angular: todo el marco también ofrece una técnica de gestión de trabajadores de servicios.
El tutorial PWA de Create React App se puede encontrar aquí.
Vue.js: la CLI de Vue viene con una funcionalidad PWA.
Representación en el servidor (SSR)
Para las aplicaciones Angular, React y Vue.js, la representación del lado del servidor o SSR es un cambio de juego. En el servidor, convierte los componentes en cadenas HTML y las transmite directamente al navegador. Finalmente, convierte el marcado estático en una aplicación completamente interactiva en el cliente. Cumple numerosos objetivos:
Mejore su optimización de motores de búsqueda (optimización de motores de búsqueda)
El contenido se presenta más rápidamente.
Las siguientes son las soluciones proporcionadas por cada JS Framework:
Angular — Angular Universal es una característica del framework Angular.
Reaccionar — Siguiente.
Para las aplicaciones React, JavaScript se utiliza ampliamente.
Nuxt, un marco Vue.js para SSR, es un marco Vue.js (documentación de Vue).
Generador de sitios web estáticos (SSG)
Los generadores de sitios estáticos, o SSG, son cada vez más inevitables a medida que crece el Jamstack. Jamstack es un tipo de aplicación web que no necesita el uso de un servidor web. Se puede encontrar más información en el enlace anterior, sin embargo, estos son algunos de los beneficios de utilizar SSG:
Velocidad: en lugar de generar las páginas de su sitio en tiempo real, los generadores de sitios estáticos lo hacen en el momento de la construcción.
Seguridad: no más CMS (sistemas de administración de contenido), que a menudo son el objetivo de los piratas informáticos
Escalado más fácil: la implementación se asienta en una pila de archivos que se pueden entregar en cualquier lugar, por lo que es extremadamente simple almacenar un sitio web en una red de entrega de contenido (CDN) (CDN). Por lo tanto, los archivos pueden reproducirse en todo el planeta para una velocidad óptima.
Flujo de trabajo de desarrollo: el desarrollador ya no tiene que establecer y operar un servidor back-end o mantener una base de datos.
Los SSG más frecuentes son:
Scully es angular.
A continuación, React — Gatsby (React + GraphQL).
js
Gridsome, Nuxt y Vue.js
11ty, Hugo, Jekyll y otros lenguajes de programación
Analítica
Pruebas y seguimiento A/B
El seguimiento no es necesario al diseñar un sitio web, pero ayuda mucho a mejorarlo. Cuando los usuarios navegan por su aplicación, el seguimiento comprende una colección de tecnologías que monitorean los clics y la actividad de los usuarios. Te ayuda a estar más cerca de las demandas del usuario y, gracias a las pruebas A/B, elige la opción más relevante en términos de características, comportamiento y diseño.
Estos son algunos ejemplos de soluciones de seguimiento y pruebas A/B:
Angular, React y Vue.js Angular, React y Vue.js Angular, React y Vue.js Angular, React y Vue
Kameleoon es un marco para la personalización impulsada por IA y las pruebas A/B.
la velocidad de internet
Es difícil crear una aplicación web de alto rendimiento en una sola sesión. A los usuarios les gustará su experiencia al navegar por su aplicación si se carga rápidamente. Existen varios sitios web de información de aplicaciones para evaluar el rendimiento, como PageSpeed Insights de Google:
Información sobre PageSpeed
¿Tiene preguntas particulares sobre cómo usar PageSpeed Insights? Stack Overflow es el lugar para ir si tiene una pregunta. En general…
desarrolladores.google.com
Lighthouse, una característica útil en la consola de Google Chrome, ya está disponible. Califica su sitio web en cinco criterios diferentes (rendimiento, aplicación web progresiva, mejores prácticas, accesibilidad y SEO) y asigna una puntuación de 100 a cada uno. Tras el análisis, se dan sugerencias para mejorar las puntuaciones.
Análisis Lighthouse para un sitio web aleatorio
Un sitio web aleatorio se sometió a un examen de faro.
La cobertura es otra característica de la consola de Google Chrome.
La pestaña Cobertura en Chrome DevTools puede ayudarlo a encontrar código JavaScript y CSS no utilizado.
La pestaña Cobertura de Chrome DevTools puede ayudarlo a localizar código JavaScript y CSS innecesario. Quitar el código innecesario podría ayudarlo a ahorrar tiempo…
desarrolladores.google.com
Ayuda en el seguimiento del código Javascript y CSS innecesario para minimizar el tamaño del paquete, lo que reduce el tiempo de carga y el uso de datos en dispositivos móviles.
Optimización de motores de búsqueda (SEO) (SEO)
SEO significa optimización de motores de búsqueda, y es lo que debe hacer para mejorar su clasificación en motores de búsqueda como Google, Bing, DuckDuckGo y otros. Aumenta tu visibilidad en la web. Incluso hay un título de trabajo para ello: consultor de SEO. Existen muchos libros, artículos y cursos para crear la reputación de su sitio web.
Angular: un ensayo fascinante sobre SEO en aplicaciones Angular y Angular Universal.
React 2: artículos sobre React y SEO, incluido uno sobre desafíos frecuentes de SEO en proyectos React y otro sobre herramientas SEO para aplicaciones React.
Vue.js: un ensayo completo sobre el control de SEO en una aplicación Vue.js
Últimos pensamientos
Estoy de acuerdo en que hay mucha experiencia de front-end y factores a considerar. En realidad, adherirse a todos ellos es bastante difícil y requiere mucho tiempo. Cada proyecto tiene sus propias demandas y prioridades. Es por eso que los importantes deben definirse al inicio del proyecto. Como resultado, estará listo para comenzar cuando llegue el momento y podrá cambiar su arquitectura para cumplir con esos objetivos.
