spinner

Frontend y Backend, juntos pero no revueltos

En artículos anteriores hemos analizado nuestro Radar de Tecnologías hablando de nube pública, privada e híbrida o de la automatización en el testing. En esta ocasión nos acercamos a dos grandes bloques del desarrollo web que trabajan en sintonía: Frontend y Backend. ¿Quieres saber lo que hemos descubierto?

Como en todo oficio, el uso de las herramientas adecuadas es fundamental para asegurar la calidad del producto final. En un mundo tan cambiante como el tecnológico, es imposible elegir las herramientas con acierto sin un profundo análisis previo.

En el Radar de Tecnología de BBVA Next Technologies, analizamos cada año las tecnologías disponibles en el mercado, estudiando su tendencia de uso, el tamaño de su comunidad de desarrolladores, sus posibles alternativas y muchos otros factores que nos proporcionan una amplia visión del estado de cada tecnología.

Así, durante varios meses, decenas de Nexters establecemos la hoja de ruta que seguirá la compañía para permanecer a la vanguardia de la innovación. En este post vamos a acercarnos un poco más a las partes Frontend y Backend del desarrollo web para enseñaros que criterios seguimos a la hora de seleccionar las tecnologías más prometedoras.

En nuestro Radar todas las tecnologías se enmarcan en tres niveles según la madurez y la conveniencia de cada tecnología: Core, Adoptar y Evaluar.

Frontend: más estabilidad, más velocidad, más estándar

¿Cuáles son las tecnologías core?

En el ámbito Core este año encontramos tecnologías que llevan ya varios años entre nosotros, pero que han apostado por aumentar su estabilidad y rendimiento, además de incorporar ciertos cambios que les acercan al paradigma de Web Components.

Es el caso de Angular y sus Angular Elements, una funcionalidad que fue incorporada en la versión 6 de Angular CLI y que permite empaquetar componentes Angular como custom elements siguiendo el estándar HTML. Por otro lado, sigue haciendo la vida más fácil a los desarrolladores mejorando su línea de comandos tanto en velocidad como en facilidad de uso. Puede que el boom de Angular se haya rebajado últimamente en favor de otros frameworks, pero sin duda sigue siendo uno de los referentes y una gran herramienta para acometer proyectos.

Este año volvemos a contar con EmberJS, uno de los frameworks «con solera» del mundo web y que ha demostrado una especial habilidad para mantenerse alineado con las tendencias del mercado. Se trata de un framework enfocado a construir grandes aplicaciones, estables y robustas, y en este último año le ha tocado transformarse sin perder su personalidad. Un claro ejemplo de esto es la introducción de Angle Brackets Syntax, es decir, la posibilidad de declarar componentes con la sintaxis típica de HTML () en lugar de la histórica de Handlebars ({{my-component}}). También llegan a Ember las clases nativas de JavaScript y se elimina jQuery por completo, contribuyendo a mejorar su rendimiento y la experiencia de desarrollo.

En cuanto a la Release Management, Ember mantiene su Deprecation Policy, es decir, asegura a los desarrolladores un tiempo suficiente para adaptar sus aplicaciones a los nuevos cambios del framework con el mínimo esfuerzo. Esto hace de Ember una tecnología excelente para grandes aplicaciones web en producción, que pueden seguir incorporando nuevas funcionalidades sin verse perjudicadas por la adaptación a las novedades del framework.

Una de las misiones del Radar es evaluar tendencias, y si algo está claro es que el mundo web tiende a los Web Components. A continuación veamos qué ha pasado con las tres librerías de referencia en este ámbito.

Por su parte Polymer, la librería de Google orientada a web components, ha evolucionado a LitElement, lo que supone una de las novedades más relevantes de este año. A lo largo de sus versiones, Polymer ha mantenido su filosofía «Use the platform«, delegando cada vez más en el navegador responsabilidades como procesar, transformar, animar o renderizar. Ahora le toca pasar el testigo a LitElement, LitHTML y PWA Starter Kit, que continuarán la labor de Polymer pero con una organización distinta y un sabor renovado para competir con fuerza en el mundo de los web components y las Progressive Web Apps.

El uso de hooks está cambiando la forma de escribir componentes en React, empujando a los desarrolladores a crear componentes presentacionales funcionales y dejar atrás los de clase. Además, React ha seguido incorporando nuevas mejoras en rendimiento y ciclo de vida de los componentes, por lo que claramente merece permanecer en el ámbito de tecnologías core del Radar.

Por último tenemos a Vue.js, que desde su nacimiento no ha dejado de crecer y conquistar a desarrolladores de todo el mundo. Esto se debe a que ha sabido coger lo mejor de cada casa, y presentarlo de forma clara y limpia a la comunidad de developers. En la línea de Angular, Vue CLI 3 ha incorporado la capacidad de generar un web component estándar a partir de un componente de Vue. Por su parte, el framework Nuxt.js es cada vez más utilizado por aprovechar toda la potencia de Vue conservando una asombrosa sencillez a la hora de desarrollar aplicaciones híbridas y universales, sin caer en la pesadez y rigidez de otros frameworks.

Como podemos ver, todas las tecnologías Core han apostado por aumentar su estabilidad, mejorar la experiencia de desarrollo y acercarse a los estándares web.

¿Qué vamos a adoptar?

Como hemos visto, este ha sido un año de mejora y evolución de las tecnologías existentes, y no tanto de aparición de otras nuevas. Aún así, hemos decidido adoptar Cypress, que en nuestro Radar de 2018 se situaba en el ámbito de tecnologías a evaluar, y que supone un cambio significativo en cuanto a las tecnologías de testing que utilizábamos hasta ahora. Cypress se caracteriza por su sencillez de configuración y por ahorrarnos el punto de fricción que suponen los webdrivers, ya que sus comandos se ejecutan en el navegador en el mismo ciclo de ejecución que nuestra aplicación. Se puede utilizar con frameworks modernos (Vue, React, Angular…) y también con aplicaciones SSR (Server-Side Rendering). Además es capaz de realizar desde tests unitarios a tests E2E, lo que le convierte en una herramienta muy potente que debemos aprovechar e incorporar en nuestros proyectos.

¿Qué estamos evaluando?

Este año tenemos varias herramientas interesantes con las que «trastear». Un claro ejemplo son las AMP (Accelerated Mobile Pages), que ya son frecuentemente utilizadas en el mundo del periodismo y que han demostrado su validez a la hora de solucionar las necesidades de velocidad, rendimiento y peso de páginas web en dispositivos móviles.

Otro protagonista es el concepto BaaS (Backend as a Service), en el que Google ha dado unos cuantos pasos con Firebase y AWS va camino de hacer lo mismo con AppSync.

Finalmente, cabe destacar dos herramientas que pueden abrirnos un mundo de posibilidades y aumentar nuestra eficiencia como developers. Se trata de Gatsby y Next.js, dos frameworks basados en React que han incorporado importantes optimizaciones de rendimiento, empaquetado y carga de recursos. Su uso se está extendiendo a gran velocidad, por lo que deberemos estar atentos a su evolución y evaluar su adopción de cara al próximo año.

Backend: La cara oculta de la web

Gran parte de la actividad de BBVA Next Technologies se realiza en grandes corporaciones. En este tipo de empresa no son muy habituales los proyectos «greenfield«, es decir, aquellos en los que puedes adoptar tecnologías desde cero en proyectos sin legacy. Por el contrario, sí solemos encontrar proyectos «brownfield«, en los que se puede innovar pero manteniendo ciertas normas de convivencia.

Hay que aclarar que, a lo largo de este artículo (y en la vida real), no usamos la palabra “legacy” como un término despectivo, al contrario, ellos llegaron antes y suelen ser los que nos mantienen a flote para probar cosas nuevas. Dicho esto, las técnicas que se suelen usar para introducir novedades es convertir parte de los monolitos que ya teníamos en servicios más especializados.

Gracias a la fragmentación de estos monolitos somos capaces de brindar los pros de las arquitecturas microserviciadas a un entorno “brownfield” como lo hemos descrito anteriormente.

A la hora de desplegar estos servicios nos estamos ayudando fuertemente de otras tendencias en el mercado, como pueden ser los contenedores en orquestadores como Openshift o Kubernetes y tecnologías serverless/lambda como AWS Lambda o Cloud Functions.

¿Cuáles son las tecnologías core?

Quizá no te sorprenda lo que te vamos a contar a continuación: ¡usamos Java! Sin embargo, teniendo en cuenta la cantidad de proyectos en los que trabajamos, nuestro stack de lenguajes es mucho mayor, incluyendo Python, Go o JavaScript. Lo realmente importante es buscar la mejor herramienta para el trabajo que estamos realizando.

No nos gusta reinventar la rueda por lo que aunque sí disponemos de blueprints que nos facilitan la vida solemos apoyarnos en frameworks de mercado. Esto nos aporta dos cosas: podemos empezar a aportar valor lo antes posibles ya que no tenemos que sufrir el síndrome NIH y por otro lado no tenemos que perder tiempo aprendiendo frameworks que 1) no nos serán útiles fuera de BBVA Next Technologies y 2) no vamos a encontrar compañeros en el mercado que ya sepan utilizarlo ya que ha sido inventado aquí.

¿Qué vamos a adoptar?

Siempre nos gusta probar cosas nuevas, no solo porque es divertido sino porque creemos que puede facilitarnos el trabajo en el futuro. De ahí que muchas de las herramientas que hemos evaluado en años anteriores han pasado a tecnologías que este año ya hemos adoptado. Un ejemplo de estas tecnologías (aunque puedes consultar la lista completa en el Radar) podrían ser Scala y Kotlin que, si bien ya están siendo utilizadas en algunos proyectos, nos gustaría intensificar su protagonismo en la compañía.

Una tecnología que cabe destacar en nuestra lista de tecnologías a adoptar es gRPC. Actualmente estamos en proceso de implantación de este framework, que está resultando sin duda prometedor. En la documentación oficial, sus creadores nos hablan sobre ventajas como performance o protocolo binario, pero nos resulta especialmente interesante un detalle: el proto (el fichero de definición de gRPC) debe ser compilado (aka, es tipado) y en parte gracias a ello comprobar que el contrato no se ha roto es más sencillo, lo que ayuda con su versionado.

¿Qué estamos evaluando?

Nos gustaría acabar el artículo mencionando hacia dónde se dirigen las tendencias. Por el lado de backend creemos que lenguajes que pueden acabar triunfando dependiendo del contexto donde los vayas a usar son Rust o Elixir.

Por otro lado nos parece mucho más interesante la movilización que hay respecto a Functions As A Service en donde parece que lenguajes y frameworks pasan a un segundo lugar ya que estamos hablando de funciones de pocas líneas muy fácilmente migrables que era en parte lo que nos vendían los microservicios pero que es difícilmente alcanzable por todo el plumbing que se necesita que suele ser dependiente del lenguaje.

Foto principal: Pexels

Autores:

Juan Antonio Gómez – Frontend Architect

Alexandre González – Head of Backend @ Next C(ontainers)aaS team lead @ BBVA

Las opiniones vertidas por el autor son enteramente suyas y no siempre representan la opinión de BBVA Next Technologies.

¿Quieres saber que más cosas hacemos en BBVA Next Technologies?