El Viaje de ING en la Construcción e Implementación de Código Front-end

Rate this content
Bookmark

Dentro de ING hemos estado trabajando con JS/FE durante varios años. Comenzando desde cero, evaluamos el proceso de CI/CD para esto, pasando por múltiples etapas hasta llegar a lo que es ahora. Voy a repasar estas etapas para inspirarte a crear un proceso similar para tu propia empresa.

FAQ

El objetivo principal del equipo Fruit Loops en ING es facilitar la vida de los ingenieros de front-end, proporcionando pipelines especializados para construir e implementar código de front-end.

Inicialmente, el equipo probó el código de front-end implementándolo en cualquier servidor web disponible o en un CMS, sin reutilizar soluciones entre los equipos.

El equipo introdujo un pipeline basado en Angular que permitía recoger cada confirmación de desarrollo y master, configurando automáticamente los pasos de construcción. Posteriormente, se migró a un sistema basado en Polymer y finalmente a Azure DevOps, permitiendo mayor flexibilidad y reutilización de componentes.

El portal permitió a los equipos gestionar las versiones que se implementaban en aceptación y producción, y hacer visible cada componente web que se desarrollaba dentro de ING, fomentando la reutilización de componentes.

La migración a Azure DevOps permitió a los equipos usar una variedad más amplia de herramientas y recursos, lo que les facilitó innovar en la forma en que construyen sus aplicaciones. Además, se crearon nuevas plantillas y tareas personalizadas para compartir innovaciones entre equipos.

La autonomía ha sido clave para fomentar la innovación, ya que permitió a los equipos elegir cómo incluir contenido en sus construcciones y adaptar los pipelines a sus necesidades específicas, impulsando la creatividad y eficiencia.

Erik van der Voort
Erik van der Voort
8 min
01 Jul, 2021

Comments

Sign in or register to post your comment.

Video Summary and Transcription

El equipo Fruit Loops de ING tiene como objetivo simplificar la vida de los ingenieros front-end mediante la introducción de pipelines. Comenzaron con un pipeline de Angular y luego introdujeron un pipeline de Polymer basado en aplicaciones y componentes web. Se utilizaron el ING web CLI y Azure DevOps para crear pipelines que brindaron agilidad, libertad de elección, escalabilidad y autonomía a los equipos. La lección principal es elegir los controladores adecuados que se adapten a las necesidades de tu organización al implementar pipelines.

1. Introducción al equipo Fruit Loops y a los Pipelines

Short description:

Hola a todos. Mi nombre es Eric van der Voort y soy uno de los ingenieros del equipo Fruit Loops dentro de ING. El objetivo principal del equipo Fruit Loops dentro de ING es facilitar la vida de los ingenieros de front-end. En los últimos ocho años, hemos estado tratando de adaptar estos pipelines a las necesidades de nuestra organización. Introdujimos nuestro pipeline de Angular y pudimos servir más de 700 módulos, lo que nos permitió reutilizar bibliotecas. Sin embargo, nuestros equipos demandaban una solución menos restrictiva, lo que nos llevó a introducir nuestro pipeline de Polymer basado en aplicaciones y componentes web.

Mi nombre es Eric van der Voort y soy uno de los ingenieros del equipo Fruit Loops dentro de ING. El objetivo principal del equipo Fruit Loops dentro de ING es facilitar la vida de los ingenieros de front-end y es por eso que este equipo tiene experiencia en pipelines para construir e implementar código de front-end dentro de ING.

En los últimos ocho años, hemos estado tratando de adaptar estos pipelines a las necesidades de nuestra organización y me gustaría llevarlos en este recorrido durante esta presentación. El primer paso que dimos fue simplemente probar el código de front-end dentro de ING. Lo implementamos en cualquier servidor web disponible o en un CMS. Cada equipo tenía su propia solución. No reutilizábamos nada y debido al crecimiento en el uso, decidimos buscar una mejor solución.

Entonces, dentro de ING, decidimos introducir nuestro pipeline de Angular. El pipeline se basaba en aplicaciones de Angular y podía recoger cada confirmación de desarrollo y master. Y aplicamos una configuración específica para tu aplicación. Esto significa que todos los pasos en tu construcción estaban predefinidos. Así que solo tenías un sabor. Implementamos los resultados de la construcción a intervalos regulares en pruebas y aceptación. Y al menos una vez al día íbamos a producción. El resultado de eso fue que pudimos servir más de 700 módulos. Pudimos reutilizar. Así que esto nos brindó un pipeline que nos permitió reutilizar bibliotecas y nos acercó a la entrega continua. Servimos alrededor de 700 módulos. Podíamos reutilizar cosas.

Pero nuestros equipos demandaban ser un poco menos restrictivos. Por ejemplo, en los métodos de pruebas que podían usar en la herramienta de construcción. Y también queríamos tener estas enormes bibliotecas que no tenían versión. Y si teníamos que actualizar una de estas bibliotecas, teníamos que volver a implementar y probar cada aplicación en nuestro pipeline. Si solo tienes dos o tres aplicaciones, está bien. Pero si estás sirviendo más de 160 aplicaciones, ya no es divertido. Así que decidimos buscar una mejor solución. Después de eso, introdujimos dentro de ING nuestro pipeline de Polymer basado en aplicaciones y componentes web. Pudimos construir e implementar en pruebas en cada confirmación. Y proporcionamos un portal a nuestros equipos en el que podían gestionar las versiones que se implementaron en aceptación y producción.

2. ING Pipeline Journey

Short description:

El portal hizo que cada componente web desarrollado dentro de ING fuera visible para todos los equipos, permitiendo su reutilización. Los equipos utilizaron nuestra ING web CLI, una interfaz de línea de comandos que captura las tareas de construcción, prueba, instalación e implementación. Sin embargo, era restrictivo, por lo que nos mudamos a Azure DevOps, creando pipelines basados en plantillas. Los equipos pueden utilizar plantillas e innovar con nuevas tareas personalizadas. Nuestro viaje se centró en la agilidad, la libertad de elección, la escalabilidad y la autonomía. Elija los controladores adecuados para adaptar sus pipelines a su organización.

Y lo que ese portal también hizo fue hacer visible cada componente web que se desarrolló dentro de ING. Y fue visible para todos los equipos. Por lo tanto, realmente permitió la reutilización de componentes web dentro de ING.

Para esto, los equipos utilizaron nuestra ING web CLI, que desarrollamos nosotros mismos. Y esa es una interfaz de línea de comandos en la que todas las tareas posibles como construcción, prueba, instalación, implementación, lo que sea, se capturaron dentro de esa web CLI. Los equipos podían elegir lo que necesitaban de esa CLI, pero había una desventaja. Si no lo incluíamos en la CLI, no podían usarlo. Por lo tanto, era restrictivo en el sentido de que solo podían usar lo que desarrollamos, pero al menos tenían alguna opción en cómo incluir el contenido en su construcción.

Entonces todavía era un poco restrictivo, y es por eso que decidimos encontrar una mejor solución. Y ahí es donde estamos actualmente. Nos mudamos a Azure DevOps. Y actualmente estamos creando nuestros pipelines basados en plantillas. Y si no podemos adaptarlo a una plantilla, entonces lo convertimos en una tarea personalizada. Y los equipos pueden utilizar estas plantillas si lo desean. Y también pueden utilizar cualquier otra cosa que deseen. La migración está en curso hacia ese pipeline. Y para nosotros, la gran ventaja es que los equipos pueden usar otras cosas que no les proporcionamos. Esto les permite innovar en la forma en que construyen sus aplicaciones. Y para nosotros, es una ventaja que podemos poner esas innovaciones a disposición de otros equipos mediante la creación de nuevas plantillas y nuevas tareas personalizadas.

Entonces, este es el camino que recorrimos dentro de ING para nuestros pipelines. Lo primero que hicimos fue simplemente quitar la carga de construcción e implementación de los equipos para que pudieran avanzar más rápido. El impulsor aquí fue la agilidad. El segundo paso fue que queríamos darles a los equipos más libertad de elección y permitir la escalabilidad, para poder entregar más aplicaciones en nuestros pipelines. Y el último paso que dimos fue la autonomía. Por lo tanto, permitimos a los equipos hacer lo que quisieran y ayudarlos al hacerlo, lo que llevó a más innovación, y creo que el impulsor aquí es la autonomía. Si miras tu organización, puede ser completamente diferente. Para nosotros, nuestros impulsores fueron menos rigidez, más agilidad, más escala, más autonomía. Pero para tu organización, pueden ser impulsores como la madurez del equipo, la confianza, tal vez incluso algo tan simple como el número de equipos u cualquier otro impulsor que no se me ocurra, y tal vez a ti sí. Por lo tanto, la lección es elegir los impulsores adecuados, utilizar esos impulsores para adaptar tus pipelines a tu organización. Te deseo buena suerte con eso. Gracias por tu atención.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Elevando Monorepos con los Espacios de Trabajo de npm
DevOps.js Conf 2022DevOps.js Conf 2022
33 min
Elevando Monorepos con los Espacios de Trabajo de npm
Top Content
Aprenda más sobre cómo aprovechar las características predeterminadas de los espacios de trabajo de npm para ayudarlo a administrar su proyecto monorepo, mientras también explora algunas de las nuevas características de npm cli.
Un Marco para Gestionar la Deuda Técnica
TechLead Conference 2023TechLead Conference 2023
35 min
Un Marco para Gestionar la Deuda Técnica
Top Content
Seamos realistas: la deuda técnica es inevitable y reescribir tu código cada 6 meses no es una opción. La refactorización es un tema complejo que no tiene una solución única para todos. Las aplicaciones de frontend son particularmente sensibles debido a los frecuentes cambios de requisitos y flujos de usuario. Nuevas abstracciones, patrones actualizados y limpieza de esas viejas funciones - todo suena genial en papel, pero a menudo falla en la práctica: los todos se acumulan, los tickets terminan pudriéndose en el backlog y el código legado aparece en cada rincón de tu base de código. Por lo tanto, un proceso de refactorización continua es la única arma que tienes contra la deuda técnica.En los últimos tres años, he estado explorando diferentes estrategias y procesos para refactorizar el código. En esta charla describiré los componentes clave de un marco para abordar la refactorización y compartiré algunos de los aprendizajes acumulados en el camino. Espero que esto te ayude en tu búsqueda de mejorar la calidad del código de tus bases de código.

Depuración de JS
React Summit 2023React Summit 2023
24 min
Depuración de JS
Top Content
Como desarrolladores, pasamos gran parte de nuestro tiempo depurando aplicaciones, a menudo código que ni siquiera escribimos. Lamentablemente, a pocos desarrolladores se les ha enseñado cómo abordar la depuración, es algo que la mayoría de nosotros aprendemos a través de la experiencia dolorosa. La buena noticia es que _puedes_ aprender a depurar de manera efectiva, y hay varias técnicas y herramientas clave que puedes usar para depurar aplicaciones de JS y React.
Automatizando Todo el Código y las Pruebas con GitHub Actions
React Advanced Conference 2021React Advanced Conference 2021
19 min
Automatizando Todo el Código y las Pruebas con GitHub Actions
Top Content
Las tareas de código como linting y pruebas son partes críticas del flujo de trabajo de un desarrollador que nos ayudan a mantenernos cuerdos, como prevenir problemas de sintaxis o estilo y fortalecer nuestra lógica de negocio central. Hablaremos de cómo podemos usar GitHub Actions para automatizar estas tareas y ayudar a mantener nuestros proyectos funcionando sin problemas.
Construyendo un Asistente AI Activado por Voz con Javascript
JSNation 2023JSNation 2023
21 min
Construyendo un Asistente AI Activado por Voz con Javascript
Top Content
En esta charla, construiremos nuestro propio Jarvis utilizando Web APIs y langchain. Habrá codificación en vivo.
Solucionando Problemas de Rendimiento en React
React Advanced Conference 2023React Advanced Conference 2023
22 min
Solucionando Problemas de Rendimiento en React
Top Content
Next.js y otros marcos de trabajo que envuelven a React proporcionan un gran poder en la construcción de aplicaciones más grandes. Pero con gran poder viene una gran responsabilidad de rendimiento - y si no prestas atención, es fácil añadir varios segundos de penalización de carga en todas tus páginas. ¡Vaya! Vamos a recorrer un estudio de caso de cómo unas pocas horas de depuración de rendimiento mejoraron tanto los tiempos de carga como los de análisis para la aplicación Centered en varios cientos por ciento cada uno. Aprenderemos no solo por qué ocurren esos problemas de rendimiento, sino cómo diagnosticarlos y solucionarlos. ¡Viva el rendimiento! ⚡️

Workshops on related topic

Construyendo una Aplicación de Shopify con React & Node
React Summit Remote Edition 2021React Summit Remote Edition 2021
87 min
Construyendo una Aplicación de Shopify con React & Node
Top Content
WorkshopFree
Jennifer Gray
Hanna Chen
2 authors
Los comerciantes de Shopify tienen un conjunto diverso de necesidades, y los desarrolladores tienen una oportunidad única para satisfacer esas necesidades construyendo aplicaciones. Construir una aplicación puede ser un trabajo duro, pero Shopify ha creado un conjunto de herramientas y recursos para ayudarte a construir una experiencia de aplicación sin problemas lo más rápido posible. Obtén experiencia práctica construyendo una aplicación integrada de Shopify utilizando el CLI de la aplicación Shopify, Polaris y Shopify App Bridge.Te mostraremos cómo crear una aplicación que acceda a la información de una tienda de desarrollo y pueda ejecutarse en tu entorno local.
Construye una sala de chat con Appwrite y React
JSNation 2022JSNation 2022
41 min
Construye una sala de chat con Appwrite y React
WorkshopFree
Wess Cope
Wess Cope
Las API/Backends son difíciles y necesitamos websockets. Utilizarás VS Code como tu editor, Parcel.js, Chakra-ui, React, React Icons y Appwrite. Al final de este masterclass, tendrás los conocimientos para construir una aplicación en tiempo real utilizando Appwrite y sin necesidad de desarrollar una API. ¡Sigue los pasos y tendrás una increíble aplicación de chat para presumir!
Despliegue de aplicaciones React Native en la nube
React Summit 2023React Summit 2023
88 min
Despliegue de aplicaciones React Native en la nube
WorkshopFree
Cecelia Martinez
Cecelia Martinez
Desplegar aplicaciones React Native manualmente en una máquina local puede ser complejo. Las diferencias entre Android e iOS requieren que los desarrolladores utilicen herramientas y procesos específicos para cada plataforma, incluidos los requisitos de hardware para iOS. Los despliegues manuales también dificultan la gestión de las credenciales de firma, las configuraciones de entorno, el seguimiento de las versiones y la colaboración en equipo.
Appflow es la plataforma de DevOps móvil en la nube creada por Ionic. Utilizar un servicio como Appflow para construir aplicaciones React Native no solo proporciona acceso a potentes recursos informáticos, sino que también simplifica el proceso de despliegue al proporcionar un entorno centralizado para gestionar y distribuir tu aplicación en múltiples plataformas. Esto puede ahorrar tiempo y recursos, permitir la colaboración, así como mejorar la confiabilidad y escalabilidad general de una aplicación.
En este masterclass, desplegarás una aplicación React Native para su entrega en dispositivos de prueba Android e iOS utilizando Appflow. También aprenderás los pasos para publicar en Google Play y Apple App Stores. No se requiere experiencia previa en el despliegue de aplicaciones nativas, y obtendrás una comprensión más profunda del proceso de despliegue móvil y las mejores prácticas para utilizar una plataforma de DevOps móvil en la nube para enviar rápidamente a gran escala.
Problemas difíciles de GraphQL en Shopify
GraphQL Galaxy 2021GraphQL Galaxy 2021
164 min
Problemas difíciles de GraphQL en Shopify
WorkshopFree
Rebecca Friedman
Jonathan Baker
Alex Ackerman
Théo Ben Hassen
 Greg MacWilliam
5 authors
En Shopify a gran escala, resolvemos algunos problemas bastante difíciles. En este masterclass, cinco oradores diferentes describirán algunos de los desafíos que hemos enfrentado y cómo los hemos superado.

Tabla de contenidos:
1 - El infame problema "N+1": Jonathan Baker - Vamos a hablar sobre qué es, por qué es un problema y cómo Shopify lo maneja a gran escala en varios APIs de GraphQL.
2 - Contextualizando APIs de GraphQL: Alex Ackerman - Cómo y por qué decidimos usar directivas. Compartiré qué son las directivas, qué directivas están disponibles de forma predeterminada y cómo crear directivas personalizadas.
3 - Consultas de GraphQL más rápidas para clientes móviles: Theo Ben Hassen - A medida que tu aplicación móvil crece, también lo harán tus consultas de GraphQL. En esta charla, repasaré diversas estrategias para hacer que tus consultas sean más rápidas y efectivas.
4 - Construyendo el producto del futuro hoy: Greg MacWilliam - Cómo Shopify adopta las características futuras en el código actual.
5 - Gestión efectiva de APIs grandes: Rebecca Friedman - Tenemos miles de desarrolladores en Shopify. Veamos cómo estamos asegurando la calidad y consistencia de nuestras APIs de GraphQL con tantos colaboradores.
Despliegue de Aplicación MERN Stack en Kubernetes
DevOps.js Conf 2022DevOps.js Conf 2022
152 min
Despliegue de Aplicación MERN Stack en Kubernetes
Workshop
Joel Lord
Joel Lord
Desplegar y gestionar aplicaciones JavaScript en Kubernetes puede volverse complicado. Especialmente cuando una base de datos también debe formar parte del despliegue. MongoDB Atlas ha facilitado mucho la vida de los desarrolladores, sin embargo, ¿cómo se integra un producto SaaS con su clúster de Kubernetes existente? Aquí es donde entra en juego el Operador de MongoDB Atlas. En este masterclass, los asistentes aprenderán cómo crear una aplicación MERN (MongoDB, Express, React, Node.js) localmente y cómo desplegar todo en un clúster de Kubernetes con el Operador de Atlas.