Tendencias y mejores prácticas en el desarrollo del front-end (Parte III): a la vanguardia

03.15.2019

Si está buscando una tecnología que diferencie las propiedades digitales de su empresa, es probable que opciones como Blockchain, VR, Chatbots, Machine Learning e Internet de las Cosas (IoT) hayan pasado por su radar. Pero, más allá de los rumores, ¿qué valor empresarial pueden aportar a su empresa? ¿Impactarán en el desarrollo de su front-end? Profundizaremos en cómo estas tendencias tecnológicas están dando forma al futuro de las tecnologías frontales y qué mejores prácticas están disponibles ahora para ayudarle a superar a la competencia.

Chatbots

Hay que ser muy creativo para crear un sitio web atractivo (https://www.door3.com/front-end-development-consultancy/) que sea fácil de usar y, al mismo tiempo, ayude a sus clientes y empleados a hacer las cosas de forma discreta. Hoy en día, cuando tener un sitio web es imprescindible, cada vez más empresas optan por una sencilla página de aterrizaje con un chatbot integrado como medio para establecer rápidamente una presencia en Internet.

Un chatbot es una aplicación que puede interactuar con los clientes para conocer sus necesidades y ofrecerles productos y servicios relevantes o asistencia. Los chatbots son muy prácticos porque pueden sustituir la interfaz gráfica de usuario de un sitio web (https://www.door3.com/ux-design-agency-nyc/) por una interfaz conversacional, permitiendo a los clientes explorar los servicios mientras un equipo de desarrollo trabaja en una versión completa del sitio. O, en función de sus necesidades, también pueden ser una solución más permanente para guiar a los clientes hacia lo que buscan exactamente. Los chatbots ayudan a ir al grano cuando los clientes necesitan ayuda inmediata o quieren una explicación rápida de la funcionalidad de un producto.

Además de servir como sustituto rápido de una versión desarrollada de un sitio web, los chatbots pueden ayudar a las empresas incluso después del lanzamiento del sitio web principal:

Estar a disposición del cliente 24 horas al día, 7 días a la semana
Manejar múltiples conversaciones (ahorrando la necesidad de contratar más personal de recepción)
Recopilación de datos analíticos para mejorar sus embudos de ventas y su servicio de asistencia

Aunque el desarrollo de un chatbot pueda parecer intimidante, en realidad es bastante factible con la tecnología adecuada. Existen marcos en el mercado que se encargan del aprendizaje automático y los algoritmos de IA, como Cloud Natural Language API y Dialogflow de Google, Cognitive Services API de Microsoft y Watson Conversation de IBM. Algunos marcos de desarrollo de chatbots, como Bot Platform o Botpress, ofrecen funcionalidad similar a la de un CMSpara que incluso los usuarios sin conocimientos tecnológicos puedan construir un chatbot sencillo. Dicho esto, el desarrollo de un chatbot avanzado con lógica empresarial complejarequerirá amplios conocimientos de front-end.

Realidad virtual

Las empresas suelen ver la realidad virtual (RV) como una tecnología exagerada para sorprender a clientes de alto nivel. Pero en los últimos dos años, ha madurado lo suficiente como para ofrecer experiencias de RV inmersivas al usuario medio, a un coste menor y más rápido que nunca. Los modernos cascos de realidad virtual tienen potencia y precisión suficientes para simular operaciones quirúrgicas. Al mismo tiempo, Google Cardboard ofrece RV a cualquier usuario de smartphone por un precio bastante asequible: 15 dólares.

El desarrollo web de RV se hizo posible con la introducción de WebVR en la comunidad de desarrollo front-end. WebVR es una API de JavaScript que permite a las aplicaciones web mostrar contenidos en una realidad virtual utilizando una tecnología WebGL que renderiza gráficos interactivos en un navegador web. La tecnología es compatible con los principales navegadores, incluidos Chrome, Firefox, Edge y Samsung Internet, y su implementación específica, WebVR Polyfill, permite a los desarrolladores front-end implementar la funcionalidad VR de línea de base a través de otros navegadores web.

La iniciativa más reciente de Google, Mozilla, Samsung y Microsoft, WebXR, se basa en WebVR y tiene en cuenta los comentarios de los fabricantes de dispositivos de realidad virtual y los desarrolladores web. La nueva API WebXR mejora WebVR al permitir a los desarrolladores de front-end incluir el doble de píxeles en las aplicaciones de RV basadas en web; además, las aplicaciones de RV creadas con la API WebXR se ejecutan más rápido.

Lo que esto significa para las empresas es que por fin pueden ofrecer a sus clientes fascinantes experiencias de RV basadas en la web, independientemente del hardware de RV que utilicen. Las empresas confían en las aplicaciones de RV que funcionan en un navegador web para crear escenarios virtuales únicos para conferencias, para impartir sesiones de formación a los empleados o para crear una fuerte conexión emocional con los clientes a través de una experiencia de juego en RV.

Y como todo lo que ayuda a captar la atención del cliente, la RV basada en la web merece una seria consideración por parte de las empresas del mundo actual. Estar entre las empresas pioneras que permiten a sus clientes experimentar un producto o un servicio de cerca puede llegar muy lejos en determinados sectores, como la fabricación y el entretenimiento.

Realidad aumentada

La realidad aumentada (RA) es otra tecnología de moda que ayuda a las empresas a obtener una ventaja competitiva en la interminable búsqueda de la atención de los clientes superponiendo objetos virtuales al mundo real. Todos hemos experimentado la RA de una forma u otra: visitando una exposición de RA como ReBlink o recibiendo ayuda con la navegación en interiores en centros comerciales. ¿Y quién puede olvidar Pokemon Go? Ahora las empresas recurren a la RA para aumentar la eficiencia y captar clientes.

Hasta hace poco, estas emocionantes experiencias de realidad aumentada se limitaban a plataformas específicas propiedad de empresas como Apple, Google o Facebook. La buena noticia es que las tecnologías web han avanzado significativamente en términos de rendimiento y accesibilidad para los usuarios, incluidos los navegadores móviles y las herramientas de desarrollo front-end. Hoy en día, todo lo que se necesita para ejecutar una aplicación de realidad aumentada es una cámara y un navegador web.

Una de las tecnologías frontales que utilizan los desarrolladores web para crear experiencias de realidad aumentada basadas en la web es AR.js. Se trata de un marco de front-end construido sobre three.js (biblioteca 3D de JavaScript) y ARToolKit (la primera biblioteca de RA). AR.js permite a los equipos de front-end diseñar experiencias de realidad aumentada multiplataforma basadas en marcadores. Basada en marcadores significa que el usuario tiene que escanear un marcador único -un código AR o QR- para activar una experiencia AR preprogramada.

El siguiente gran actor que permitirá el desarrollo de la realidad aumentada en la Web es WebXR Device API. Ya la hemos mencionado en relación con las tecnologías web de realidad virtual, pero WebXR es un trabajo en curso con ingenieros de Google, Mozilla, Samsung, Amazon y otras grandes empresas que contribuyen activamente a su iniciativa de realidad aumentada. El objetivo es conseguir interacciones avanzadas y efectos visuales atractivos en aplicaciones web de realidad aumentada para que los usuarios puedan hacer algo más que simplemente observar objetos virtuales. Por ejemplo, los usuarios podrán manipular objetos virtuales con gestos, comandos de voz y mucho más. Por supuesto, esta funcionalidad está actualmente en fase de desarrollo, pero aquí hay algunos ejemplos básicos de Google: un usuario que deja caer girasoles de RA en una sala de estar y unos colegas que construyen un objeto virtual de RA.

Aprendizaje automático

Después de que Google presentara TensorFlow.js en Google I/O ‘18, el aprendizaje automático (Machine Learning, ML) se ha convertido en una realidad para la web. El ML implica dos componentes necesarios: construir modelos y entrenar a una máquina con estos modelos para que, digamos, después de alimentar varias imágenes de gatos a una máquina, aprenda a identificar gatos en fotos por sí misma. O si, por ejemplo, su cliente describe un problema a su chatbot, se le redirige automáticamente al ingeniero de soporte más adecuado que puede resolver con éxito el problema y recuperar la lealtad del cliente. Estas aplicaciones de ML habilitadas para la web pueden ayudar a las empresas a diferenciar sus servicios.

Claro, el ML hecho con JavaScript era una posibilidad antes de TensorFlow.js con bibliotecas como Brain.js y deeplearn.js. (Esta última fue adquirida por Google y se fusionó con TensorFlow.js.) Sin embargo, esas bibliotecas de JavaScript no se acercaban ni de lejos al potencial de TensorFlow.js.

TensorFlow.js está pensada para “entrenar y desplegar modelos de aprendizaje automático en el navegador” Los desarrolladores de front-end pueden confiar en esta tecnología de vanguardia para llevar las experiencias basadas en ML directamente a la experiencia web del cliente. (Aquí tienes una demostración rápida que te permite experimentar ML en un navegador de primera mano)

Esta biblioteca JavaScript que permite ML ofrece una experiencia de desarrollo excepcional: los ingenieros de front-end pueden crear y entrenar modelos directamente en un navegador, sin necesidad de configuración. Dado que los navegadores albergan experiencias de ML, las entradas disponibles son cada vez más ricas: Los modelos de ML pueden recopilar datos de cámaras, micrófonos, GPS, acelerómetros y giroscopios, por nombrar algunos. La ventaja adicional es la mejora de la privacidad, ya que todos los datos recopilados para el entrenamiento de los modelos ML permanecen en el navegador del usuario y no se transmite nada a un servidor.

Por otro lado, el rendimiento de TensorFlow.js es más lento en comparación con la programación ML “nativa” basada en Python. Para entrenar un modelo en un navegador, TensorFlow.js tiene que acceder a la GPU de la máquina a través de WebGL, y el rendimiento resultante puede ser de dos a diez veces más lento que la versión Python de TensorFlow con AVX. Por supuesto, debemos recordar que esto es sólo el principio de JavaScript ML, y Google está trabajando activamente para resolver estos problemas de rendimiento.

Sin duda, es un buen momento para experimentar con prototipos basados en web que aprovechen la potencia del aprendizaje automático para proporcionar una ventaja competitiva. Es fácil ver el valor de innovaciones como los motores de recomendaciones que ofrecen a sus clientes nuevos productos y servicios basados en sus acciones, al igual que las sugerencias que ve en Netflix.

Relojes inteligentes

Gracias al éxito del Apple Watch, los relojes inteligentes se están convirtiendo en un accesorio omnipresente. Según CCS Insights, las ventas de smartwatches deberían alcanzar los 140 millones de dispositivos en 2022. Y aunque la cifra es humilde en comparación con las ventas de smartphones, PC y portátiles, es probable que las empresas consigan más clientes actualizando sus propiedades web para que sean compatibles con los smartwatches.

Vale la pena señalar que cuando decimos “desarrollo front-end para smartwatches”, nos referimos al Apple Watch. A pesar de que hay más de 50 modelos de smartwatches con Wear OS en el mercado, Google todavía no ha resuelto la navegación web en estos gadgets.

Apple, en cambio, ha decidido que el momento de la navegación web en la muñeca es ahora y añadió esta funcionalidad a Watch OS 5 en 2018. Ahora los propietarios de un Apple Watch pueden navegar por sitios web y realizar acciones básicas como desplazarse por las páginas web, acercar y alejar la imagen y navegar hacia atrás y hacia adelante en su historial de navegación. Sin embargo, aún faltan algunas de las funciones avanzadas de navegación web, como la reproducción de vídeo, la compatibilidad con JavaScript service workers y las fuentes web. Apple las añadirá más adelante.

Con el lanzamiento de Watch OS 5, Apple (fiel a su naturaleza) publicó algunas directrices y mejores prácticas de desarrollo front-end para su smartwatch. Sin entrar en demasiados detalles, mencionaremos los principales aspectos del diseño de experiencias frontales fluidas (https://www.door3.com/ux-design-agency-nyc/ui-design-company/) para el Apple Watch:

Tener en cuenta tres tamaños de pantalla.
Aplicar atributos adecuados a los controles de formulario para números de teléfono, fechas, hora, etc.
Utilice marcas HTML especiales en páginas web con mucho texto e imágenes para una visualización óptima.
Utilizar metaetiquetas open graph para crear vistas previas de enlaces compartibles de aspecto agradable.

Optimizar un sitio web para una visualización óptima en el Apple Watch es otro factor diferenciador que puede situar a las empresas por delante del resto y ayudarlas a ganarse la fidelidad de un público conocedor de la tecnología.

Internet de las cosas

Tenemos una situación bastante peculiar con el desarrollo de front-end para el Internet de las Cosas (IoT): sistemas basados en la nube que obtienen datos de una red de dispositivos y sensores inteligentes interconectados.

En su forma más simple, un dispositivo IoT puede ser una tetera inteligente que se controla desde una aplicación o un dispositivo doméstico inteligente habilitado por voz como Amazon Echo. Un ejemplo empresarial de producto IoT sería un sistema de control de la cadena de frío para camiones de reparto que transportan productos congelados, compuesto por una interfaz web que muestra datos críticos procedentes de diversos sensores de temperatura, unidades GPS y aplicaciones de smartphone. Lo que hace especialmente inusual el caso del desarrollo frontal en IoT es que los productos IoT no suelen necesitar una interfaz de usuario. Los usuarios interactúan con estos productos a través de aplicaciones web o móviles que incorporan sus propias interfaces gráficas.

Sin embargo, cuando existe la necesidad de proporcionar a los usuarios una interfaz de usuario web en un dispositivo IoT, ésta tendrá ciertas limitaciones. A saber, que las “cosas” inteligentes suelen tener pantallas pequeñas y su rendimiento está limitado por el hardware. Desarrollar interfaces basadas en la web para este tipo de dispositivos es una alternativa viable al uso de lenguajes de programación nativos restrictivos.

Entre las mejores prácticas de desarrollo web que ayudan a los diseñadores e ingenieros de interfaz de usuario a abordar estas limitaciones al desarrollar interfaces frontales para terminales IoT se incluyen:

Interfaces web con capacidad de respuesta que se adaptan a distintos tamaños de pantalla.
Uso mínimo de JavaScript y escasas o nulas animaciones.
Algoritmos de caché para acceder a datos críticos incluso en zonas sin cobertura.

La tecnología IoT ha encontrado aplicaciones en diversos productos B2C y B2B de muchos sectores: desde la logística para grandes empresas hasta los hogares inteligentes. Y los puntos finales inteligentes (también conocidos como “cosas”) variarán en consecuencia: desde sensores sin interfaz de usuario hasta bienes de consumo duraderos con una interfaz gráfica basada en web. Es importante pensar detenidamente en el uso, la forma y la arquitectura de un producto IoT al inicio de un proyecto y decidir qué tipos de terminales necesitarán una interfaz de usuario. Los clientes apreciarán las interfaces con capacidad de respuesta que se adapten adecuadamente al tamaño de la pantalla de un terminal y mejoren el funcionamiento de sus dispositivos.

Sin código y con poco código

No-code/low-code es otra tendencia disruptiva en el desarrollo de software que pretende democratizar el proceso de creación de software y ahorrar tiempo y dinero a las empresas. Las herramientas de desarrollo sin código y de bajo código son, en esencia, potentes plantillas que permiten desarrollar y desplegar aplicaciones web ricas en funcionalidades con escasos o nulos conocimientos de codificación. Tanto los desarrolladores ciudadanos (personas sin formación en programación) como los ingenieros de software expertos pueden utilizar una interfaz gráfica de usuario integrada en una plataforma de desarrollo sin código/de bajo código para diseñar los componentes front-end y back-end de una aplicación web.

Front_end_development_more_accessible_with_lo-code_and_no-code_solutions.jpg

La diferencia entre las herramientas de desarrollo sin código y de código bajo (como sus nombres indican) radica en el tipo de usuarios a los que se dirigen. Las primeras dan la bienvenida a cualquiera, independientemente de su experiencia en codificación, y las segundas proporcionan más flexibilidad a los desarrolladores al permitirles operar a nivel de código. Una clara ventaja de las plataformas sin código y de bajo código es, por supuesto, su capacidad para autogenerar código y sustituir gran parte de la codificación manual habitual en un proceso estándar de desarrollo de software. Los usuarios arrastran y sueltan los elementos de la interfaz de usuario y secuencian los eventos en los flujos de trabajo, mientras que una plataforma sin código o de bajo código genera el código fuente, la base de datos y todo lo demás que interviene en la construcción del front-end y el back-end de una aplicación web.

Cabe señalar que, aunque las herramientas de desarrollo sin código y de bajo código pueden ayudar a las empresas a crear aplicaciones web más rápido y a menor coste (automatizando el desarrollo de la parte delantera), la aplicación de estas herramientas sigue estando limitada a la creación de aplicaciones web relativamente sencillas, con una lógica empresarial transparente y flujos de trabajo básicos. El desarrollo de aplicaciones web de realidad aumentada y realidad virtual o el uso de la inteligencia artificial siguen estando fuera del alcance de las plataformas sin código y de código reducido (https://www.door3.com/blog/no-code-slash-low-code-wont-replace-the-experts). Todo esto no quiere decir que estas herramientas de desarrollo sean instrumentos perfectos para liberar el desarrollo de software, sino que pueden permitir tanto a los usuarios empresariales como a las partes interesadas defender el desarrollo frontal, especialmente en las fases de prueba de concepto.

Un caso de uso ideal para el enfoque low-code y no-code en el desarrollo front-end son los primeros días de una startup que no cuenta con un ingeniero front-end en el equipo. Los fundadores, que sólo tienen una perspectiva empresarial, pueden construir ellos mismos un prototipo sencillo y probarlo.

Blockchain

En este momento, blockchain es probablemente la tecnología que más expectación está generando. Todo el mundo -desde un padre que se queda en casa hasta tu abuela- conoce el auge y la caída de Bitcoin. Y puede que incluso estén familiarizados con cómo desempeñó un papel en la votación en torno a las elecciones de mitad de mandato de 2018. Ambos desarrollos fueron posibles gracias a blockchain. Sin embargo, ¿cómo encaja esta tecnología disruptiva en el desarrollo de front-end? Y ¿cómo pueden aprovecharla las empresas para llevar sus servicios de desarrollo web al siguiente nivel?

Aunque la mayor parte del desarrollo de blockchain se realiza en el back-end, los desarrolladores front-end pueden seguir necesitando herramientas para integrar un cliente web con una infraestructura basada en blockchain. Y como dice el refrán entre los desarrolladores front-end: “Si es en JavaScript, ¡hay una biblioteca para eso!” De hecho, los equipos de desarrollo front-end pueden confiar en la biblioteca web3.js, una API JavaScript compatible con Ethereum. Web3.js es compatible con todos los marcos de desarrollo front-end populares, como React, Angular, o Vue, y permite que la pieza front-end de una aplicación web interactúe con el componente blockchain, por ejemplo, cuando los usuarios necesitan firmar transacciones o mensajes con sus claves privadas.

Por supuesto, aún estamos en los primeros días de la adopción de blockchain en productos comerciales, y todavía tenemos que ver cómo se mezclará la tecnología blockchain con el desarrollo front-end. Al mismo tiempo, la aparición de proyectos como Esprezzo -un middleware blockchain para desarrolladores front-end- es muy prometedora para el futuro de blockchain y el desarrollo front-end.

¿De qué trata tu front-end?

Esperamos haber arrojado algo de luz sobre estas tendencias de desarrollo front-end y haber despertado el interés por explorar las oportunidades que estas tecnologías de vanguardia crean en el desarrollo web. Estar en la primera ola de las empresas que implementan estas innovaciones frontales siempre es un riesgo: las tecnologías evolucionan mientras hablamos. Aun así, es probable que los primeros en adoptarlas obtengan considerables ventajas competitivas al comprender mejor las necesidades de sus clientes y satisfacerlas en todo el espectro de dispositivos.

Si se ha perdido la Parte I y la Parte II, consúltelas hoy mismo.