HubSpot Growth Platform Insights

Hola a todos, y bienvenidos a Acelerando el Valor con el proceso de implementación y la estructura del equipo de HubSpot. Soy Bree, una ingeniera frontend convertida en defensora de desarrolladores aquí en HubSpot, y estoy muy emocionada de ser su anfitriona durante los próximos 20 minutos mientras discutimos las formas en que HubSpot acelera el valor para sus clientes a través de prácticas de ingeniería. Soy de la zona de Atlanta, Georgia, que está en el sureste de los Estados Unidos, y cuando no estoy trabajando, generalmente me pueden encontrar creando contenido técnico divertido en línea, jugando videojuegos o acurrucada con un buen libro.

Durante los próximos 20 minutos más o menos, vamos a hablar sobre HubSpot. Discutiremos las formas en que ayudamos a nuestros clientes a crecer y la filosofía e ingeniería de principios que seguimos que nos permiten integrar continuamente. Al final de nuestro tiempo juntos, mi objetivo es dejarles con estrategias para encender un diálogo creativo sobre innovación, lo que finalmente lleva a un valor acelerado tanto para ustedes como para sus clientes.

Así que comencemos con ¿qué es HubSpot? HubSpot es una plataforma de crecimiento líder que empodera a más de 228,000 empresas de todos los tamaños en 135 países diferentes para escalar y tener éxito en la era digital. HubSpot proporciona una suite integral de herramientas diseñadas para mejorar y optimizar las ventas, el marketing, el servicio al cliente y la gestión de relaciones con los clientes. Nuestro objetivo general es ayudar a las organizaciones a atraer y comprometer a los clientes proporcionando soluciones integradas y sin fisuras que fomenten conexiones significativas y promuevan un crecimiento sostenible. La robusta suite de productos de HubSpot está diseñada para apoyar a las empresas en cada fase de su viaje de crecimiento, pero lo que realmente nos distingue no son solo las herramientas que ofrecemos. Es nuestro compromiso de poner a los clientes en el centro de todo lo que hacemos.

Así que adentrémonos en nuestro enfoque centrado en el cliente y cómo define el valor que entregamos y guía nuestra misión de empoderar a cada negocio que servimos. Esta es una cita de Whitney Sorenson, quien es el CTO de HubSpot, y creo que captura perfectamente nuestro enfoque centrado en el cliente. Dice, solo nos mantendremos en el negocio si continuamos proporcionando valor a y manteniendo la confianza con nuestros usuarios. A los clientes no les importan nuestros equipos, organización, procesos o promesas. Les importa lo que ven, usan y sienten en las herramientas que utilizan todos los días.

Entonces, ¿cómo se traduce esto en lo que hacemos todos los días? Bueno, lo primero es que nos enfocamos en la entrega de valor. La verdadera medida de nuestro éxito proviene de cuán efectivamente proporcionamos un valor real y tangible a nuestros usuarios. Lo segundo es que priorizamos la experiencia del usuario. Así que nuestra prioridad es asegurar que todo lo que creamos sea intuitivo, efectivo y beneficioso para el usuario. Priorizamos la experiencia del usuario de varias maneras, dos de las cuales son, número uno, crear herramientas que se integren sin problemas en otras plataformas que nuestros clientes ya están usando. El HubSpot Marketplace juega un papel muy importante en extender la funcionalidad de nuestras ofertas principales. Permitimos a los desarrolladores construir sobre HubSpot con herramientas familiares, como React, para crear experiencias personalizadas para nuestros usuarios.

Otra cosa que hacemos es invertir fuertemente en investigación de UX, y esto nos permite crear interfaces intuitivas. El sistema de diseño interno de HubSpot proporciona un marco fundamental para la consistencia y permite a nuestros ingenieros de front-end prototipar rápidamente y crear nuevas características. HubSpot también ha creado una biblioteca de componentes de UI para nuestros desarrolladores de aplicaciones que combina sin problemas tanto la funcionalidad nativa como la extendida. Lo tercero es que trabajamos arduamente para construir y mantener la confianza. La confianza no se construye con promesas, se cultiva a través de interacciones consistentes y confiables. Trabajamos para construir y mantener la confianza de varias maneras, dos de las cuales son, una, manteniendo líneas de comunicación abiertas con nuestros clientes, y hacemos esto proporcionando actualizaciones regulares sobre mejoras de productos, cambios y interrupciones. También construimos nuestros productos en una plataforma que escala para acomodar el crecimiento y optimizar la utilización de recursos. Esto realmente nos ayuda a asegurar que los clientes experimenten un servicio ininterrumpido y puedan confiar en un rendimiento consistente.

Para nuestros clientes, los resultados importan más que nuestros métodos, pero detrás de escena, es nuestra estructura de equipo y principios de ingeniería los que nos permiten entregar. Los ingenieros de HubSpot necesitan poder moverse rápidamente para entregar continuamente, mejorando el producto basado en la retroalimentación del cliente. Hacemos esto trabajando en equipos pequeños, especializados y autónomos, típicamente de alrededor de cinco personas o menos. Y mientras la industria tecnológica ve un aumento en los roles de desarrollo full-stack, HubSpot también ve el valor y beneficio únicos en ofrecer roles de equipo especializados. Así que muchos equipos dentro de la organización de productos de HubSpot están divididos por especialización en front-end y back-end. En equipos más pequeños, hay una mayor probabilidad de desarrollar seguridad psicológica. Un entorno de equipo seguro fomenta el aprendizaje continuo y la experimentación, que son vitales para la innovación. La autonomía de los equipos pequeños también permite a los ingenieros pensar como un gerente de producto, donde cada miembro del equipo tiene tanto la oportunidad como la responsabilidad de tomar decisiones. Trabajando en equipos pequeños, el intercambio de conocimientos y la colaboración entre equipos son absolutamente cruciales. Tener un stack tecnológico unificado entre equipos hace que eso sea mucho más fácil.

El stack tecnológico de front-end de HubSpot actualmente incluye TypeScript, React, Redux, Styled Components, y GraphQL, entre otros. Al seleccionar un stack tecnológico, podemos crear soporte, herramientas y orientación con opiniones a su alrededor para empoderar a nuestros desarrolladores a trabajar e innovar rápidamente. Al aprovechar la fuerza, el poder y la agilidad de los equipos pequeños, HubSpot crea un entorno donde la innovación realmente prospera. Esta estructura de equipo acelera el desarrollo y empodera a nuestros ingenieros para tomar posesión de la dirección del producto.

Ahora que hemos discutido quiénes somos y cómo trabajamos, profundicemos más en la magia detrás de escena. Desde una arquitectura de front-end que mantiene nuestro front-end flexible hasta la entrega continua y las herramientas de experiencia del desarrollador que hacen que el proceso de desarrollo sea rápido y fluido. A medida que HubSpot ha evolucionado como empresa, también lo ha hecho nuestra arquitectura de front-end. La UI de HubSpot está compuesta por muchas SPAs, o aplicaciones de una sola página, renderizadas por el cliente que se construyen con React, React Router y nuestro sistema de diseño interno, además de algunas otras bibliotecas centrales. A medida que desarrollamos cientos de estas aplicaciones divididas verticalmente, HubSpot ha tenido que adaptarse e innovar continuamente nuestra arquitectura y prácticas de front-end para mantener un alto rendimiento y también apoyar experiencias de usuario consistentes.

Entregar valor rápida y confiablemente es una prioridad principal, y nuestro proceso CICD está en el núcleo de esa misión. Al automatizar la integración, las pruebas y el despliegue, mantenemos un flujo rápido de mejoras de producto. Para hacer posible este proceso, confiamos en las increíbles herramientas de experiencia del desarrollador que nuestro equipo de plataforma de front-end ha creado y en estrategias de prueba estratégicas. Estos dos componentes agilizan nuestro flujo de trabajo y nos ayudan a garantizar la calidad y confiabilidad de nuestros productos.

Así que discutamos cómo nuestras herramientas internas empoderan a los desarrolladores y cómo nuestra filosofía de pruebas nos permite rápidamente detectar y resolver problemas de manera efectiva. La plataforma de front-end de HubSpot realmente hace la vida más fácil para nuestros desarrolladores. Crear nuestras propias herramientas significa que podemos diseñar todo de la manera que nos gusta, ajustándose perfectamente a nuestro flujo de trabajo. Esto asegura que, incluso a medida que nuestro equipo y productos evolucionan y se expanden, mantenemos los flujos de trabajo eficientes y consistentes en toda la organización. Quiero hablar un poco sobre algunas herramientas que nuestro equipo de experiencia del desarrollador ha creado que facilitan la vida de los ingenieros de front-end aquí en HubSpot. Así que la primera es una extensión de editor de código que conecta nuestro editor de código de desarrolladores y nuestro sistema de gestión de paquetes, y lo que hace es agilizar el proceso de desarrollo haciendo que las interacciones con las dependencias sean mucho más intuitivas. La siguiente son herramientas de linting que nos permiten mantener altos estándares de calidad de código y hacer cumplir un estilo de código unificado entre proyectos, identificando malos olores de código y asegurando un formato consistente entre equipos y aplicaciones.

A continuación, un gestor de paquetes para manejar eficientemente las dependencias estáticas, simplificando el proceso de gestión y actualización de bibliotecas, lo que permite a nuestros ingenieros centrarse más en construir características en lugar de en problemas de gestión de dependencias. También creamos una plataforma de gestión de despliegue y pruebas que supervisa los despliegues y rastrea las pruebas de aceptación. Esto nos ayuda a alinearnos con nuestra filosofía CICD para automatizar y simplificar los ciclos de lanzamiento mientras mantenemos una alta seguridad en la calidad del código. También hemos creado una herramienta de modificación de código que está diseñada para ejecutar modificaciones de código de manera uniforme a través de numerosos repos y módulos. Esta herramienta descarga sustancialmente la carga técnica para los ingenieros, permitiéndoles implementar cambios rápida y confiadamente. Con nuestras herramientas personalizadas, realmente agilizamos los flujos de trabajo y reducimos parte de la carga técnica en nuestros ingenieros.

Asegurar que nuestras características sean confiables es igual de importante, y ahí es donde entra en juego nuestra filosofía de pruebas exhaustivas. Hemos construido un marco de pruebas robusto que utiliza algunas herramientas excelentes, comenzando con Jasmine y RTL, o React Testing Library para pruebas unitarias. También aprovechamos el poder de mock service worker para simular llamadas API durante las pruebas, asegurando que podamos probar componentes en aislamiento sin necesitar servicios de back end en vivo.

Y para nuestras pruebas de extremo a extremo, utilizamos Selenium para automatizar la prueba de nuestros recorridos de usuario. Nuestros equipos de front-end en HubSpot se sumergen en tres tipos principales de pruebas. La primera son las pruebas unitarias que implican verificar que las unidades o componentes más pequeños de nuestras aplicaciones funcionen como se anticipa. La siguiente son las pruebas de integración que implican verificar las interacciones entre múltiples unidades para asegurar que funcionen como se espera, esencialmente realizando pruebas unitarias a escala de contenedor o de página completa. Y la tercera son las pruebas de aceptación o de extremo a extremo. Esto implica probar flujos de trabajo completos o caminos que el usuario tomará dentro de la aplicación.

Para ayudar a nuestros desarrolladores a navegar este panorama, nuestro equipo de pruebas de front-end ha creado documentación útil. Y lo que hace es guiarlos en la elección del tipo correcto de pruebas considerando factores como si la funcionalidad es crucial, cuán predecible y mantenible será la prueba, y si se involucra una API. Esto ayuda a asegurar que cada estrategia de prueba se alinee perfectamente con las necesidades de la base de código. En esencia, nuestra filosofía se trata de mirar el panorama general mientras nos aseguramos de que los detalles sean perfectos. Esto equilibra tanto la profundidad como la amplitud para mantener todo funcionando sin problemas para nuestros usuarios.

Junto con nuestro marco de toma de decisiones hemos desarrollado herramientas internas que te permiten ejecutar tu rama contra el código en otros repositorios. Este enfoque proactivo nos ayuda a detectar y solucionar posibles cambios disruptivos antes de que lleguen a producción. Ahora diré que los errores, por muy escurridizos que sean, a veces aún encuentran una manera de colarse. Y cuando esto sucede, las mismas herramientas son invaluables para rastrear las construcciones específicas afectadas por los cambios. Esta capacidad significa que podemos revertir rápidamente a una versión estable y abordar el error sin complicaciones, asegurando una mínima interrupción y una recuperación de usuario fluida.

Así que, mientras hemos recorrido varios aspectos diferentes del enfoque de HubSpot, desde nuestra filosofía centrada en el cliente y estructura de equipo hasta nuestra arquitectura innovadora de front-end y estrategias de pruebas exhaustivas, está claro que cada elemento está intrincadamente diseñado para acelerar el valor para nuestros clientes. Y así es como lo hacemos. Adoptamos un enfoque centrado en el cliente, manteniendo las necesidades del cliente al frente, iterando rápidamente basándonos en la retroalimentación del usuario, y asegurando que las soluciones proporcionadas ofrezcan un valor real y tangible. Fomentamos la innovación con equipos pequeños especializados al alentar la agilidad y la propiedad. Al estructurar los equipos para que sean pequeños y especializados, aceleramos el despliegue y empoderamos a los equipos para tomar decisiones impactantes. Mejoramos la eficiencia del desarrollador con herramientas personalizadas al crear herramientas internas que están adaptadas a nuestro flujo de trabajo específico. Estas herramientas agilizan los procesos, reducen los esfuerzos manuales y mejoran la productividad general del desarrollador, permitiendo a nuestros ingenieros continuar enfocándose en la innovación. Y por último, priorizamos pruebas exhaustivas para asegurar la calidad integrando una filosofía de pruebas que incluye pruebas unitarias, de integración y de extremo a extremo. Esto nos permite mantener altos estándares de calidad y fiabilidad y también abordar problemas temprano en el ciclo de desarrollo.

Quiero agradecerles a todos por tomarse el tiempo de acompañarme aquí en React Summit hoy, y quiero dar un reconocimiento a mis increíbles colegas del equipo de relaciones con desarrolladores de HubSpot. Si estás interesado en desarrollar en HubSpot o tienes curiosidad sobre las formas en que puedes usar React en HubSpot, puedes consultar nuestro código QR que te llevará a developers.hubspot.com slash react on HubSpot. También nos encantaría conectarnos contigo. Puedes seguirnos en las redes sociales de desarrolladores de HubSpot como LinkedIn, YouTube y Twitter para más información. Y si tienes alguna pregunta para mí o te gustaría conectarte, puedes encontrarme casi en todas partes en Bytes and Free. ¡Gracias!