DevOps para Frontend: más allá de los navegadores de escritorio

Rate this content
Bookmark

Durante los últimos 10 años, hemos aplicado diligentemente los principios de DevOps a nuestros servicios de Backend, pero ¿qué pasa con el Frontend? ¿Podemos transferir parte de ese conocimiento entre estos mundos tan diferentes, pero a la vez muy similares? La respuesta es sí, y en esta charla te mostraré cómo los principios de DevOps nos ayudaron en DAZN a construir nuestras aplicaciones web para Smart TV y consolas de juegos.

This talk has been presented at DevOps.js Conf 2021, check out the latest edition of this JavaScript Conference.

FAQ

DevOps para frontend más allá de los navegadores de escritorio se refiere a la aplicación de prácticas de DevOps en el desarrollo y operación de aplicaciones web que se ejecutan en dispositivos como televisores inteligentes y consolas de juegos, no solo en navegadores de escritorio.

Los principales retos incluyen la baja retroalimentación entre equipos, problemas de visibilidad del trabajo debido a la dispersión de información en múltiples tableros Jira, y la dificultad de los equipos de dispositivos para resolver problemas de las características que no desarrollaron.

El flujo de trabajo en DaZone se estructura comenzando con los equipos de funciones que trabajan en características comunes, luego pasando el código a los equipos de dispositivos que aseguran el funcionamiento en cada dispositivo específico, y finalmente alcanzando a los clientes.

Max Gallo propone crear abstracciones y herramientas que permitan la autonomía y responsabilidad de los equipos a lo largo de todo el proceso de desarrollo, desde la creación hasta la implementación en dispositivos, mejorando así la efectividad y eficiencia del flujo de trabajo.

DaZone utiliza un laboratorio de televisores donde se realizan pruebas automatizadas con cámaras apuntando a los dispositivos. Esta configuración permite verificar la funcionalidad en una variedad de dispositivos físicos en un entorno controlado.

Max Gallo menciona que no existen herramientas listas para usar para pruebas en dispositivos como televisores y consolas, por lo que en DaZone han desarrollado soluciones personalizadas que incluyen un laboratorio con cámaras para probar los dispositivos físicos.

Max Gallo
Max Gallo
31 min
01 Jul, 2021

Comments

Sign in or register to post your comment.
Video Summary and Transcription
La charla de hoy trata sobre DevOps para el frontend más allá de los navegadores de escritorio, centrándose en los desafíos y el viaje hacia DevOps, la importancia de las abstracciones, maximizar el flujo y permitir la autonomía del equipo, aplicar los principios de DevOps más allá de las aplicaciones web, ejecutar pruebas automatizadas en consolas y televisores, invertir en herramientas para las pruebas de televisión y los desafíos de las pruebas de televisión en el laboratorio.

1. Introducción a DevOps para Frontend

Short description:

Hoy hablaremos sobre DevOps para frontend más allá de los navegadores de escritorio. Definiremos qué significa más allá de los navegadores de escritorio, especialmente en el contexto de DaZone. Abordaremos el viaje hacia DevOps y exploraremos las características que se pueden tomar prestadas de DevOps en el backend para el frontend. DaZone ofrece transmisión en vivo de deportes en más de 200 países en varios dispositivos basados en HTML y JavaScript. Nuestro flujo de trabajo involucra equipos de funciones, equipos de dispositivos y finalmente clientes. Un desafío es el bajo ciclo de retroalimentación debido a la participación de múltiples equipos.

Hola a todos, y gracias por acompañarme. Hoy hablaremos sobre DevOps para frontend más allá de los navegadores de escritorio. Mi nombre es Max Gallo. Soy un ingeniero principal de Londres. Trabajo en DaZone. Puedes encontrarme en Twitter como underscore Max Gallo. El tema de hoy es bastante grande, y quiero dividirlo en tres partes diferentes.

Al principio, estableceremos el contexto. Definiremos qué significa más allá de los navegadores de escritorio, especialmente en el contexto de DaZone, en el contexto de transmisión en vivo de deportes. Después de eso, abordaremos el viaje hacia DevOps. ¿Cómo llegamos a DevOps tal como lo conocemos hoy? ¿Y cuáles son las características que podemos robar, que podemos tomar prestadas del DevOps en el backend para el frontend? Y al final, veremos cómo se aplican esas características, si es que se aplican, para el frontend.

Pero comencemos más allá de los navegadores de escritorio. DaZone es una empresa de transmisión en vivo de deportes. Por lo tanto, ofrecemos deportes en vivo en todo el mundo en muchos dispositivos y en muchos países, más de 200 países. Entre todos estos dispositivos a los que apuntamos, hay casi 25 de ellos que son basados en HTML y JavaScript. Esto significa que estamos ejecutando nuestra aplicación web en algún tipo de navegador que está integrado en el dispositivo. Pero, ¿de qué dispositivos estamos hablando? Principalmente estoy hablando de tus televisores que tienes en tu sala de estar y tu consola de juegos, tu último y brillante PS5 o Xbox, o tal vez un conjunto de cajas que viene con tu proveedor de red y posiblemente más. Actualmente, estamos admitiendo más de 25 de ellos. Entonces, con todas estas ideas y todos estos dispositivos, creamos nuestro flujo de trabajo de la siguiente manera. Comenzamos con equipos de funciones. Este es nuestro flujo de trabajo hasta hace seis meses, un año. Nuestros equipos de funciones trabajaban en características comunes. Todas las características comunes que se compartían en varios dispositivos comenzaban aquí. Teníamos varios equipos de funciones y una vez que terminaban, entregaban el código a los equipos de dispositivos. El objetivo de este equipo era asegurarse de que la aplicación funcionara correctamente en el propio dispositivo. Y una vez que los dispositivos estaban satisfechos, finalmente podíamos llegar a los clientes. La idea es función, luego dispositivos y luego cliente. Pero esta configuración en particular tiene sus propios desafíos. Y quiero comenzar con el primer desafío, que es un ciclo de retroalimentación bajo. ¿Por qué es bajo el ciclo de retroalimentación? Principalmente porque tenemos dos equipos diferentes que son necesarios para ir de un lugar a otro.

2. Desafíos y el Viaje hacia DevOps

Short description:

Los equipos que constantemente se comunican entre sí pueden ralentizar las cosas. La visibilidad del trabajo es un desafío con múltiples equipos de funciones y equipos de dispositivos. Los equipos de dispositivos enfrentan problemas con la propiedad compartida. Los desafíos son el ciclo de retroalimentación lento, la visibilidad del trabajo poco clara y la propiedad compartida. El viaje hacia DevOps comienza enfatizando el rendimiento de todo el sistema. Los equipos de desarrollo y operaciones tienen similitudes. La pregunta es cómo llegamos al DevOps de hoy. Las abstracciones son factores contribuyentes poderosos.

Imagínate cualquier error o cualquier característica que pasa de un equipo a otro. Si encuentras algún problema, tiene que regresar, y esto continúa una y otra vez. Básicamente, estos dos equipos están constantemente hablando entre sí. Esto puede ralentizar las cosas.

El segundo desafío es la visibilidad del trabajo. Imagina el mejor escenario posible. Tienes un tablero Jira para los equipos de funciones y otro tablero Jira, digamos, para los equipos de dispositivos. Pero también tenemos múltiples equipos de funciones. De hecho, están divididos por dominios. Entonces, diferentes equipos de dominio trabajan en todas las características de ese dominio, lo que significa que tenemos varios tableros Jira aquí y también algunos tableros Jira aquí. Por lo tanto, responder a la pregunta de cuándo se lanzará esta característica no es tan fácil. Porque tienes que armar un rompecabezas con todas estas piezas dispersas en varios lugares. El tercer desafío es que los equipos de dispositivos no pueden solucionar los problemas correctamente. ¿Por qué? Porque no son dueños de la característica. En cierto sentido, si un equipo de funciones es dueño de su base de código con esa característica, luego entregan esa característica al equipo de dispositivos para asegurarse de que funcione en el Firestick, por ejemplo, en el Amazon Firestick, y el equipo de dispositivos dice que no funciona bien, intentaron solucionar algo, pero hay un error. Y esto significa que no son dueños de esa característica, tienen que volver al equipo de funciones. Por lo tanto, la propiedad para el equipo de dispositivos es realmente un problema. Quiero resumir los desafíos antes de continuar. En primer lugar, el ciclo de retroalimentación lento, este ping pong de errores y características entre estos dos equipos, uno está probando en dispositivos, el otro está trabajando en una característica más genérica. Pero también tenemos la visibilidad del trabajo, que no es muy clara cuándo se lanzará una característica o al menos no es tan sencillo como nos gustaría que fuera. Y luego hablamos de la propiedad del equipo de dispositivos, porque esta propiedad compartida entre la característica y los dispositivos no funciona muy bien, porque es una propiedad compartida, lo que generalmente significa que nadie es dueño de nada. Esta configuración nos lleva al viaje hacia DevOps. Y quiero comenzar el viaje como cualquier viaje con un primer paso. Y el primer paso es una cita del manual de DevOps que dice que el primer camino enfatiza el rendimiento de todo el sistema. Por lo tanto, no solo nos enfocamos en los silos de diferentes partes del trabajo o departamentos, sino en todo el sistema. Y si aplicamos esto, que es como la página uno del manual de DevOps, tenemos nuestro antiguo sistema que va desde el desarrollo de una característica hasta el cliente, que tiene un traspaso entre los equipos de funciones y los equipos de dispositivos. Entonces preparamos algo, lo entregamos y este equipo verifica que todo esté bien. Si eso funciona, si pueden decir, está bien, llegamos al cliente. Pero hemos estado aquí antes, hemos visto esto, y ¿qué pasa si llamo a este equipo aquí desarrollo? ¿Y qué pasa si llamo a este equipo aquí operaciones? ¿No es eso muy similar? ¿No es eso exactamente lo que estaba sucediendo, digamos, hace 10, 15 años cuando los equipos de desarrollo se trataban de compartir su código lo más rápido posible sin importar si ese código estaba rompiendo la producción o si era demasiado costoso para que esa máquina funcionara las 24 horas del día, los 7 días de la semana, para tener tantas horas de tiempo de actividad? Y luego teníamos operaciones que tenían que lidiar con los equipos de desarrollo que enviaban características que ni siquiera estaban funcionando en algunos de los dispositivos, algunos de los servidores que estaban soportando. Y así teníamos este problema de traspaso y mi verdadera pregunta aquí es que, bueno, estos son muy similares, pero para impulsar este arreglo similar, ¿cómo llegamos al DevOps que conocemos hoy? Hemos mejorado mucho en los últimos diez años, pero ¿cómo llegamos a lo que conocemos como el DevOps de hoy? Y creo que hay muchos factores contribuyentes, uno de los cuales para mí son las abstracciones.

QnA

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
NPM workspaces help manage multiple nested packages within a single top-level package, improving since the release of NPM CLI 7.0. You can easily add dependencies to workspaces and handle duplications. Running scripts and orchestration in a monorepo is made easier with NPM workspaces. The npm pkg command is useful for setting and retrieving keys and values from package.json files. NPM workspaces offer benefits compared to Lerna and future plans include better workspace linking and adding missing features.
Vue: Actualizaciones de Características
Vue.js London 2023Vue.js London 2023
44 min
Vue: Actualizaciones de Características
Top Content
The Talk discusses the recent feature updates in Vue 3.3, focusing on script setup and TypeScript support. It covers improvements in defining props using imported types and complex types support. The introduction of generic components and reworked signatures for defined components provides more flexibility and better type support. Other features include automatic inference of runtime props, improved define emits and defined slots, and experimental features like reactive props destructure and define model. The Talk also mentions future plans for Vue, including stabilizing suspense and enhancing computer invalidations.
Automatizando Todo el Código y las Pruebas con GitHub Actions
React Advanced 2021React Advanced 2021
19 min
Automatizando Todo el Código y las Pruebas con GitHub Actions
Top Content
We will learn how to automate code and testing with GitHub Actions, including linting, formatting, testing, and deployments. Automating deployments with scripts and Git hooks can help avoid mistakes. Popular CI-CD frameworks like Jenkins offer powerful orchestration but can be challenging to work with. GitHub Actions are flexible and approachable, allowing for environment setup, testing, deployment, and custom actions. A custom AppleTools Eyes GitHub action simplifies visual testing. Other examples include automating content reminders for sharing old content and tutorials.
Ajustando DevOps para las Personas sobre la Perfección
DevOps.js Conf 2022DevOps.js Conf 2022
33 min
Ajustando DevOps para las Personas sobre la Perfección
Top Content
DevOps is a journey that varies for each company, and remote work makes transformation challenging. Pull requests can be frustrating and slow, but success stories like Mateo Colia's company show the benefits of deploying every day. Challenges with tools and vulnerabilities require careful consideration and prioritization. Investing in documentation and people is important for efficient workflows and team growth. Trust is more important than excessive control when deploying to production.
¿Por qué es tan lento el CI?
DevOps.js Conf 2022DevOps.js Conf 2022
27 min
¿Por qué es tan lento el CI?
Slow CI has a negative impact on productivity and finances. Debugging CI workflows and tool slowness is even worse. Dependencies impact CI and waiting for NPM or YARN is frustrating. The ideal CI job involves native programs for static jobs and lightweight environments for dynamic jobs. Improving formatter performance and linting is a priority. Performance optimization and fast tools are essential for CI and developers using slower hardware.
La filosofía de Yarn
DevOps.js Conf 2022DevOps.js Conf 2022
31 min
La filosofía de Yarn
Let's talk about React and TypeScript, Yarn's philosophy and long-term relevance, stability and error handling in Yarn, Yarn's behavior and open source sustainability, investing in maintenance and future contributors, contributing to the JavaScript ecosystem, open-source contribution experience, maintaining naming consistency in large projects, version consistency and strictness in Yarn, and Yarn 4 experiments for performance improvement.

Workshops on related topic

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.
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.
Azure Static Web Apps (SWA) con Azure DevOps
DevOps.js Conf 2022DevOps.js Conf 2022
13 min
Azure Static Web Apps (SWA) con Azure DevOps
WorkshopFree
Juarez Barbosa Junior
Juarez Barbosa Junior
Las Azure Static Web Apps se lanzaron a principios de 2021 y, de forma predeterminada, pueden integrar su repositorio existente y implementar su aplicación web estática desde Azure DevOps. Este masterclass demuestra cómo publicar una Azure Static Web App con Azure DevOps.
Seguimiento de errores y ralentizaciones en Node + JavaScript utilizando Sentry
Node Congress 2022Node Congress 2022
53 min
Seguimiento de errores y ralentizaciones en Node + JavaScript utilizando Sentry
WorkshopFree
Neil Manvar
Neil Manvar
Repasaremos la configuración de Sentry paso a paso para obtener visibilidad en nuestro frontend y backend. Una vez integrado, rastrearemos y solucionaremos errores y transacciones que se muestren en Sentry desde nuestros servicios para comprender por qué/dónde/cómo ocurrieron errores y ralentizaciones en nuestro código de aplicación.
Cómo desarrollar, construir e implementar microservicios Node.js con Pulumi y Azure DevOps
DevOps.js Conf 2022DevOps.js Conf 2022
163 min
Cómo desarrollar, construir e implementar microservicios Node.js con Pulumi y Azure DevOps
Workshop
Alex Korzhikov
Andrew Reddikh
2 authors
El masterclass ofrece una perspectiva práctica de los principios clave necesarios para desarrollar, construir y mantener un conjunto de microservicios en el stack Node.js. Cubre los detalles específicos de la creación de servicios TypeScript aislados utilizando el enfoque de monorepo con lerna y yarn workspaces. El masterclass incluye una descripción general y un ejercicio en vivo para crear un entorno en la nube con el framework Pulumi y los servicios de Azure. Las sesiones están dirigidas a los mejores desarrolladores que deseen aprender y practicar técnicas de construcción e implementación utilizando el stack Azure y Pulumi para Node.js.