Tendencias y buenas prácticas en el desarrollo del front-end (Parte II): Tecnologías emergentes

02.15.2019

La interfaz de su producto de software es como la versión digital de un escaparate que atrae a nuevos clientes. Por eso es vital que cualquier empresa se mantenga a la vanguardia y aproveche las últimas tecnologías. E incluso si no depende de su sitio web para atraer a nuevos clientes, sus clientes actuales siguen contando con una experiencia digital que sea fácil de usar y se sienta perfectamente integrada con su negocio. Si dispone de recursos limitados para dedicar a su presencia en Internet, pero quiere encontrar formas de superar a la competencia, invertir en una interfaz que funcione bien será un dinero bien gastado. Pero, ¿en qué áreas de desarrollo de front-end debería centrarse, en primer lugar? Hoy en día, incluso un experto en front-end puede perderse en el mundo de las cambiantes herramientas de desarrollo front-end, marcos y enfoques. ¿Cómo entender todo este revuelo?

Para ayudarle a navegar mejor por las tecnologías frontales modernas, hemos seleccionado 11 tendencias y mejores prácticas de desarrollo frontales. Antes de que cualquiera de estas mejores prácticas pase a formar parte de la infraestructura tecnológica de una empresa, se investiga mucho sobre ellas. Y Google Trends es el mejor lugar para observar esto.

Preste especial atención a las tendencias que están generando menor interés por el momento: aquí es donde las tendencias de desarrollo front-end y las innovaciones que impulsan el valor empresarial se producirán con toda seguridad. Los desarrolladores que se centren únicamente en las tendencias más punteras, como GraphQL o WebAssembly, pueden encontrarse más adelante jugando a ponerse al día con otras empresas que opten por dedicar más tiempo a tendencias que apenas están ganando tracción. Al mismo tiempo, los primeros experimentos con tecnologías emergentes como las páginas móviles aceleradas (https://www.door3.com/mobile-app-development-company-new-york/) o los generadores de sitios estáticos pueden ayudarle a superar a sus competidores. Esta es nuestra predicción sobre las tendencias y mejores prácticas de desarrollo de front-end que despegarán en el futuro.

Resurgimiento de los sitios estáticos

Los sitios estáticos formados por archivos HTML sin formato solían dominar la web en los primeros días de Internet, justo cuando la navegación web se estaba volviendo accesible para el usuario medio. En la actualidad, las páginas web sencillas se han convertido en aplicaciones web dinámicas y ricas en funciones, a menudo creadas con un CMS en el back-end. Sin embargo, cada vez son más las empresas que recurren a los sitios estáticos para reducir los costes de alojamiento y producción y ofrecer a sus clientes una experiencia más segura y rápida. Hay muchas empresas de nueva creación con necesidades mínimas de sitios web que quieren establecer una presencia en línea lo antes posible, y los sitios estáticos encajan perfectamente en este nicho.

La abundancia de generadores de sitios estáticos disponibles (¡463 sólo en staticsitegenerators.net!) utilizados para desarrollar sitios básicos habla de esta tendencia al alza en el desarrollo front-end. Los desarrolladores pueden confiar en los generadores de sitios estáticos para crear sitios web seguros y de carga rápida. Estos sitios son menos propensos a los ataques porque no tienen base de datos en el back-end. Además, son más accesibles y ayudan a mantener bajos los costes de desarrollo.

Motion UI

Esta biblioteca de código abierto basada en CSS permite a los desarrolladores mejorar los sitios web con animaciones y transiciones personalizadas. Hoy en día, cuando la capacidad de atención de los visitantes de un sitio web es más corta que la de un pececillo de colores, cada detalle que contribuya al compromiso del usuario puede ser crucial.

Para empezar, la biblioteca Motion UI ofrece una buena cantidad de efectos estándar: deslizar, desvanecer, escalar y girar, entre otros. Pero la herramienta brilla realmente cuando se trata de animaciones personalizadas que permiten a los desarrolladores orquestar cuidadosamente sus especificaciones de dirección, intensidad y velocidad. Cuando es necesario, las animaciones pueden alinearse en series para reproducirse en un orden determinado. Pero hay una advertencia sobre el trabajo con Motion UI: las animaciones excesivas a menudo pueden degradar la UX distrayendo al usuario o empantanando el tiempo de carga en dispositivos más lentos

GraphQL: El lenguaje de consulta de Facebook para APIs gana adeptos

GraphQL, un lenguaje de consulta para APIs introducido por Facebook en 2015, ha ido ganando tracción últimamente. Empresas como el New York Times, GitHub, Pinterest y Shopify, conocidas por su enfoque prudente de las nuevas tecnologías, ya han cambiado de REST a GraphQL. Entonces, ¿por qué todo el mundo habla de esta tecnología de repente?

GraphQL crea una capa de abstracción entre una aplicación y sus fuentes de datos, permitiendo a los desarrolladores front-end extraer datos de múltiples fuentes con una sola consulta en lugar de múltiples peticiones. Las solicitudes GraphQL también pueden ser muy específicas sobre qué tipo de datos se requieren, a diferencia de una solicitud basada en REST que tendría que extraer todos los datos del back-end - a menudo para actualizar una pequeña parte en el front-end. Como era de esperar, GraphQL ofrece un enfoque más flexible para el desarrollo del front-end, con interacciones cliente-servidor bien estructuradas.

Como resultado, las aplicaciones web que dependen de varias fuentes de datos dispares pueden ejecutarse más rápidamente, y los costes de mantenimiento se reducen a medida que disminuyen el número de solicitudes y la cantidad de datos transmitidos.

Búsqueda por voz

Las tecnologías de reconocimiento de voz están proliferando. Confiamos en nuestros dispositivos domésticos inteligentes para encender y apagar las luces, programar recordatorios, enviar mensajes de texto a amigos o encontrar productos con una sola orden, sin necesidad de interfaz. Gartner llegó a predecir que en 2020 “el 30% de las sesiones de navegación web se harán sin pantalla”. Puede que te preguntes cómo encaja este enfoque de interfaz cero con el desarrollo de front-end, en el que al menos hay implícita una interfaz gráfica de usuario.

Pues bien, una forma de abordar esta creciente tendencia de desarrollo front-end de interfaces basadas en la conversación es implementar una función de búsqueda por voz en su sitio web. De este modo, cuando los clientes descubran su sitio a través de la búsqueda por voz de Google, podrán seguir explorando sus productos y servicios mediante comandos de voz. Chrome y Firefox, dos de los navegadores web más importantes del mundo, ya admiten esta funcionalidad. Y existen herramientas como Google’s JavaScript Web Speech API y Amazon’s Alexa API que le ayudarán a destacar entre la multitud haciendo de la búsqueda por voz una parte integral de su presencia en la web.

Headless Chrome

Headless Chrome, introducido por Google en 2018, es el mismo navegador web Chrome bueno y viejo, solo que sin la parte GUI. El modo sin cabeza está incluido en Google Chrome, y los desarrolladores pueden acceder a él y operarlo a través de una interfaz de línea de comandos (CLI) mediante el uso de scripts.

Headless Chrome permite a los desarrolladores ejecutar pruebas de navegador front-end sin malgastar recursos en mostrar el sofisticado JavaScript que a menudo se incluye en las páginas web modernas. Los desarrolladores frontales también pueden utilizar Puppeteer, una biblioteca Node.js de código abierto del equipo de Chrome, para omitir la carga de determinados elementos de la página, como CSS e imágenes, o almacenarlos en caché para que se carguen más rápidamente durante las pruebas. Estas prácticas acortan los ciclos de control de calidad y agilizan la entrega general de los proyectos web.

Otra forma de utilizar Headless Chrome y Puppeteer es pre-renderizar JavaScript en el lado del servidor y mostrar el contenido del sitio a los usuarios más rápidamente - sólo si el marco de desarrollo front-end que está utilizando no proporciona ya capacidades de renderizado en el lado del servidor. Los rastreadores web también apreciarán el acceso al contenido pre-renderizado del sitio que de otra manera podría estar oculto detrás de JavaScript, ayudando a que el sitio se posicione mejor en los resultados de búsqueda.

IDEs en línea

Al igual que Google Docs ha sustituido a Microsoft Word como solución para colaborar en documentos en muchas empresas y organizaciones, los IDE en línea prometen sustituir a las herramientas de escritorio tradicionales que los desarrolladores utilizan para escribir y trabajar con código. La tendencia es clara, con empresas como Amazon y Red Hat adquiriendo startups que ofrecen productos IDE basados en la nube.

Esta nueva clase de IDE vive en un navegador, lo que significa que los desarrolladores pueden trabajar en su proyecto desde cualquier lugar virtualmente, sin la pérdida de tiempo que supone la configuración de un entorno de desarrollo; además, pueden conceder acceso al código para codificación en parejas en tiempo real, revisiones de código, etc. El desarrollo web moderno se ha vuelto enrevesado, pero los IDE eliminan parte de esa complejidad al permitir que los desarrolladores colaboren directamente. Los desarrolladores frontales y los equipos de DevOps pierden una cantidad ingente de horas configurando un entorno de desarrollo, mientras que con las IDE en línea (como StackBlitz) los desarrolladores sólo tienen que iniciar sesión para empezar a programar.

Herramientas de formato de código

Los proyectos a gran escala que requieren importantes esfuerzos de desarrollo front-end tienen algo en común: su éxito depende de una colaboración eficaz entre los miembros del equipo del proyecto. La mayoría de las veces, esto tiene que ver con el establecimiento y la aplicación de directrices de estilo para la codificación de la interfaz, con el fin de garantizar que el código sea conciso y legible para todos los participantes en el proyecto.

Aquí es donde resultan útiles las herramientas de formateo automático del código fuente como Prettier. Prettier es un formateador de código que funciona con JavaScript (ES2017), TypeScript, Flow, Vue y muchas otras tecnologías, incluso fuera de la pila de front-end. Así, tanto los equipos de front end como los de back end pueden implementar rápidamente Prettier o una herramienta similar, por ejemplo, ESLint, en su entorno de desarrollo y dejar de preocuparse por el estilo del código.

Estas herramientas de formato de código llevarán automáticamente el código a un estilo uniforme y estandarizado que sea fácil de entender por otros desarrolladores. Como resultado, los equipos pasan menos tiempo discutiendo sobre el estilo del código en las revisiones de los sprints, y más tiempo escribiendo código front-end de calidad. Los nuevos miembros del equipo también pueden ponerse al día más rápidamente, con una incorporación más sencilla. Y, a su vez, las empresas obtienen [aplicaciones web] estables (https://www.door3.com/portal-development/) con [componentes frontales] fácilmente personalizables (https://www.door3.com/custom-software-development-company/).

WebAssembly

WebAssembly (WASM) es un estándar web que se está ganando rápidamente el corazón de los desarrolladores frontales. Ya es compatible con los principales navegadores, como Chrome (escritorio y móvil), Firefox y Safari (escritorio y móvil), y aporta velocidad y flexibilidad.

Las empresas pueden aprovechar sus recursos de desarrollo existentes que pueden codificar en uno de los siguientes lenguajes de programación para crear aplicaciones frontales y compilar en WebAssembly:

C, C++
C#, .Net
Java, Kotlin

WebAssembly se compone de código binario y su descodificación es más rápida que la de JavaScript. Esto conduce a una ejecución del código casi tan rápida como la del código máquina nativo. Por eso, WASM se está convirtiendo rápidamente en la solución para complementar a JavaScript y acelerar las partes críticas para el rendimiento de las aplicaciones web. Por ejemplo, la herramienta de diseño web Figma carga tres veces más rápido después de que sus desarrolladores hayan adoptado WebAssembly en el producto.

Componentes web

Web Components es un conjunto de API y plantillas HTML que permite a los desarrolladores crear elementos de interfaz de usuario personalizados que pueden reutilizarse en varios proyectos web, independientemente del marco de desarrollo frontal subyacente. Aunque solo dos navegadores, Chrome y Safari, son totalmente compatibles con la funcionalidad de Web Components, la idea de poder crear, por ejemplo, una aplicación web React y luego reutilizar algunos componentes de interfaz de usuario en un proyecto Angular es tan fascinante que otros fabricantes de navegadores están trabajando activamente para añadir compatibilidad con Web Components. Web Components ofrece a los equipos de front-end una mayor flexibilidad durante el desarrollo y la capacidad de reutilizar rápidamente elementos para acelerar el proceso de desarrollo.

Aplicaciones web progresivas

A medida que los usuarios pasan más tiempo en dispositivos móviles (3,5 horas de media al día en Estados Unidos, según eMarketer), las empresas se esfuerzan por aprovechar esta adicción a los smartphones optimizando sus estrategias de desarrollo front end móvil.

Las aplicaciones web progresivas (PWA, Progressive Web Apps), una reciente incorporación al conjunto de herramientas móviles de las empresas, fusionan las mejores características de la web móvil y las aplicaciones nativas en nuevas y emocionantes experiencias para los usuarios. Bajo el capó, las PWA son aplicaciones web móviles que imitan la funcionalidad de las aplicaciones móviles nativas. He aquí una lista de las principales características que ofrecen las PWA:

Navegación fluida y efectos de animación
Modo offline y capacidad para trabajar en redes lentas
Notificaciones push
Conexión HTTPS segura
Carga instantánea desde la pantalla de inicio

Todas estas características se transforman en una experiencia de usuario de cinco estrellas y hacen que los usuarios vuelvan a estas aplicaciones a por más. Empresas como Flipkart ya están aprovechando el poder de las PWA: El gigante del comercio electrónico informó de que su tasa de conversión aumentó un 70% después de introducir una aplicación web progresiva para su audiencia.

Páginas móviles aceleradas

Aunque difícil de implementar, Accelerated Mobile Pages (AMP) es otra iniciativa de código abierto que permite la carga ultrarrápida de páginas web en teléfonos inteligentes y tabletas. Teniendo en cuenta los datos de KISSmetrics que sugieren que “alrededor del 40% de las personas abandonarán una página web que tarde más de 3 segundos en cargarse”, las AMP pueden convertirse en una ventaja competitiva crucial para las empresas que planean mantenerse a la vanguardia a largo plazo. También puede aumentar el tráfico de búsqueda; las páginas que se cargan más rápido tienen prioridad en los resultados de búsqueda y, por tanto, reciben más visitas que las páginas web normales.

Washington Post utilizó AMP para mejorar drásticamente el tiempo de carga de sus páginas móviles: los lectores acceden a los artículos un 88% más rápido que con la versión móvil anterior del sitio. Y una startup francesa [Teads] informó de un aumento del 200% de las conversiones ](https://amp.dev/success-stories/teads?referrer=ampproject.org)de sus anuncios de vídeo en páginas web para móviles habilitadas para AMP.

El futuro del desarrollo front-end: Tendencias y tecnología

A medida que aumenta el número de interfaces que debe cubrir el front-end -portátiles, pantallas inteligentes, electrodomésticos y muchos otros-, tiene mucho sentido apostar estratégicamente por innovaciones prometedoras que puedan mejorar drásticamente la experiencia del usuario. La facilidad de uso y el rendimiento deben ir siempre de la mano, porque si su sitio tarda demasiado en cargarse, sus clientes nunca descubrirán lo estupendo que es.

Nunca hay un momento aburrido en el desarrollo de front-end tendencias y tecnologías, y esperamos ver aún más innovaciones interesantes en un futuro próximo.

En la Parte III, examinamos más de cerca las tendencias tecnológicas que están configurando el futuro de las tecnologías front-end.

En DOOR3, siempre estamos a la vanguardia de las últimas tendencias de desarrollo front-end, herramientas y prácticas relacionadas para impulsar el éxito empresarial y el compromiso de los clientes en las plataformas digitales. Si necesita ayuda para elegir la mejor pila tecnológica entre react y angular para su proyecto de desarrollo web, póngase en contacto con nosotros.

"En 2019, el móvil superará a la televisión como medio que atrae más minutos en EEUU"

Informe de eMarketer Tiempo invertido en el móvil en 2018