Mantener automáticamente miles de ejemplos de código en múltiples variaciones de frameworks

Rate this content
Bookmark

En AG Grid, mantenemos miles de ejemplos de código, con el mismo ejemplo en Angular, React, Vue y Vanilla JS. Además, cada framework tiene diferentes variaciones que cubren JavaScript, TypeScript, Módulos, Paquetes, Hooks, Clases, Vue 2 y Vue 3. ¿Cómo lo hacemos? Automatizamos. En esta sesión se explicará cómo comenzamos con una única versión de TypeScript y la convertimos automáticamente en cada combinación que necesitamos y finalmente utilizamos Cypress para probar el ejemplo convertido.

7 min
16 Jun, 2022

Comments

Sign in or register to post your comment.

Video Summary and Transcription

La charla se centra en crear la mejor cuadrícula de datos JavaScript mediante la categorización del código utilizando árboles de sintaxis abstracta. Los archivos de código se representan como estructuras de árbol, lo que permite la extracción de diferentes secciones. Los convertidores específicos del framework generan ejemplos de código para Angular, React y Vue. La validación y prueba de TypeScript garantizan la calidad del código y facilitan las actualizaciones de los ejemplos del framework.

Available in English

1. Introducción a las Demostraciones de Código y Categorización

Short description:

Nuestro objetivo es crear la mejor cuadrícula de datos JavaScript del mundo. Tenemos alrededor de 500 demostraciones y un total de 8,000 demostraciones. Queremos escribir un solo ejemplo en TypeScript y categorizar el código utilizando árboles de sintaxis abstracta.

¿Puedo hacerles una pregunta antes de comenzar? ¿Cuántos de ustedes estarían contentos en su trabajo si les pidieran mantener miles de demostraciones de código? Para mí, eso sería felicidad. Probablemente haya un buen trabajo para ustedes en la redacción de documentación. Pero para mí, ya saben, eso no es lo que quiero hacer. Y esa es la situación en la que nos encontramos en aggrid.

Ahora nuestro objetivo es crear la mejor cuadrícula de datos JavaScript del mundo. Pero entendemos, como Rich mencionó antes, que nuestra cuadrícula solo será tan buena como lo que nuestros usuarios puedan hacer con ella, y la forma en que podemos mostrarles lo que pueden hacer es a través de nuestra documentación. Así que estamos decididos a tener una demostración de código en vivo para cada función que tenemos. Así podrán ver lo que hace la cuadrícula. Y también podrán ver el código que impulsa esa demostración.

Entonces, si simplemente comenzamos a agregar todos estos ejemplos para nuestras funciones, en realidad tenemos alrededor de 500 demostraciones ahora, y piensan que eso es lo suficientemente malo. Esperen hasta que se den cuenta de que AG grid es agnóstico. Así que admitimos JavaScript, TypeScript, Angular, React, pueden usar hooks y clases, pueden escribirlo en view two, view three. Y queremos que, cuando estén usando nuestra documentación, puedan ver el código en el framework que están utilizando. Así que multiplicamos todos estos números juntos, y terminamos con alrededor de 8,000 demostraciones. Así que no hay forma, incluso si quieren hacerlo, de que puedan mantener el ritmo y no cometer errores al copiar y pegar. Y honestamente, será bastante aburrido.

Entonces, en un mundo ideal, lo que queremos hacer es escribir un solo ejemplo, y lo vamos a hacer en TypeScript, porque para Angular, necesitamos tipos. Si quieren React con TSX, necesitan tipos. Para nuestro ejemplo de JavaScript, simplemente eliminamos los tipos y listo. Y luego podemos usar eso como punto de partida para nuestra vista y React con solo JavaScript puro. Ahora, el primer paso para lograr esto es categorizar su código. Aquí tenemos un ejemplo de código de AG grid. Tenemos una configuración estática. Tenemos un callback y también un evento externo. Y la razón por la que necesitamos categorizar esto es para poder aplicar convertidores específicos del framework a cada una de estas áreas específicas. Porque sabemos que Angular utiliza una sintaxis diferente a React. Y es diferente dependiendo de lo que estén tratando de lograr. Pero luego surge el desafío y la pregunta, ¿cómo categorizamos nuestro ejemplo de código de manera programática? Y ahí es donde entran en juego los árboles de sintaxis abstracta. Porque podemos representar cualquier fragmento de código como un árbol. Por ejemplo, la función resaltada aquí es sizeToFit.

2. Generación y Mantenimiento de Ejemplos de Framework

Short description:

Representamos los archivos de código como una estructura de árbol utilizando árboles de sintaxis abstracta. Al analizar el código con TypeScript, podemos extraer diferentes secciones como propiedades, métodos y controladores de eventos. Los convertidores específicos del framework nos permiten generar ejemplos de código para Angular, React y Vue. Validamos el código con TypeScript y realizamos pruebas para garantizar la calidad. Este enfoque nos permite actualizar fácilmente los ejemplos de framework y proporcionar a los usuarios código que coincida con el framework elegido.

Y eso se representa como una definición de función con una propiedad de nombre, parámetros y el cuerpo. Y cualquier archivo de código que tengas, puedes descomponerlo y representarlo en esta estructura de árbol.

Entonces, por ejemplo, si estás usando TypeScript para analizarlo, le das el texto fuente del ejemplo y te dará este AST. Y luego vamos a recorrer este árbol y usar coincidencias de patrones para extraer todas estas diferentes secciones. Así que encontraremos qué es una propiedad, qué es un método de instancia y qué es un controlador de eventos.

Este es un ejemplo de cómo podría verse una de estas coincidencias de patrones. Así que tenemos... ¿Es esto una llamada a función? Así que recorremos todos los nodos del árbol y si es una llamada a función, entonces lo extraemos en estos controladores de eventos externos donde tenemos el nombre, los parámetros, y el cuerpo. Así que construimos este modelo de memoria de cómo se ve realmente el ejemplo de código. Y luego usamos nuestros convertidores específicos del framework. Así que aquí podemos ver Angular y Vue. Tienes la sintaxis diferente para tratar de lograr algo similar. Y así, usamos estos convertidores específicos del framework para cada categoría. Y una vez que hayas hecho eso, puedes generar ese código en una plantilla base y encontrar que tienes tus ejemplos de Angular, React y Vue.

Y solo hemos escrito el de TypeScript junto con estos convertidores. Solo para asegurarnos de que no hemos cometido un error, lo validamos con TypeScript. Probamos cada uno de estos ejemplos con Cypress para asegurarnos de que no haya errores, un poco de captura de instantáneas para las regresiones visuales. Y si estamos muy entusiasmados y cuidadosos, podemos comparar las diferencias con git en todo el repositorio para asegurarnos de que no hemos hecho nada tonto. Y el resultado para nosotros es que podemos actualizar todos nuestros ejemplos de framework en un solo lugar. Por ejemplo, agregamos soporte para React y TypeScript, y solo tomó un día, pero hay 500 ejemplos allí. Si queremos agregar soporte para un nuevo framework, solo agregamos un convertidor. Y somos desarrolladores felices porque no estamos manteniendo todos estos ejemplos, y hay más tiempo para trabajar en características. Y creo que nuestros usuarios están más contentos porque pueden ir a nuestra documentación, decir qué framework están usando, qué variación están usando, y pueden ver el código que coincide con eso para copiar y pegar en su aplicación.

Así que como conclusiones, quiero que te des cuenta de este punto, que podemos usar árboles de sintaxis abstracta de TypeScript para generar y razonar sobre nuestro código. Y una excelente manera de comenzar con esto es astexplorer.net. Simplemente ingresa tu código allí y te mostrará cómo se ve el árbol de sintaxis abstracta. Y, finalmente, no mantengas manualmente algo que puedes generar. Si te inspiras en este trabajo, me encantaría saber qué construyes con él. Gracias.

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

TechLead Conference 2023TechLead Conference 2023
35 min
A Framework for Managing Technical Debt
Let’s face it: technical debt is inevitable and rewriting your code every 6 months is not an option. Refactoring is a complex topic that doesn't have a one-size-fits-all solution. Frontend applications are particularly sensitive because of frequent requirements and user flows changes. New abstractions, updated patterns and cleaning up those old functions - it all sounds great on paper, but it often fails in practice: todos accumulate, tickets end up rotting in the backlog and legacy code crops up in every corner of your codebase. So a process of continuous refactoring is the only weapon you have against tech debt.In the past three years, I’ve been exploring different strategies and processes for refactoring code. In this talk I will describe the key components of a framework for tackling refactoring and I will share some of the learnings accumulated along the way. Hopefully, this will help you in your quest of improving the code quality of your codebases.

React Summit 2023React Summit 2023
24 min
Debugging JS
As developers, we spend much of our time debugging apps - often code we didn't even write. Sadly, few developers have ever been taught how to approach debugging - it's something most of us learn through painful experience.  The good news is you _can_ learn how to debug effectively, and there's several key techniques and tools you can use for debugging JS and React apps.
React Advanced Conference 2021React Advanced Conference 2021
19 min
Automating All the Code & Testing Things with GitHub Actions
Top Content
Code tasks like linting and testing are critical pieces of a developer’s workflow that help keep us sane like preventing syntax or style issues and hardening our core business logic. We’ll talk about how we can use GitHub Actions to automate these tasks and help keep our projects running smoothly.
React Advanced Conference 2022React Advanced Conference 2022
22 min
Monolith to Micro-Frontends
Top Content
Many companies worldwide are considering adopting Micro-Frontends to improve business agility and scale, however, there are many unknowns when it comes to what the migration path looks like in practice. In this talk, I will discuss the steps required to successfully migrate a monolithic React Application into a more modular decoupled frontend architecture.
React Advanced Conference 2023React Advanced Conference 2023
22 min
Power Fixing React Performance Woes
Next.js and other wrapping React frameworks provide great power in building larger applications. But with great power comes great performance responsibility - and if you don’t pay attention, it’s easy to add multiple seconds of loading penalty on all of your pages. Eek! Let’s walk through a case study of how a few hours of performance debugging improved both load and parse times for the Centered app by several hundred percent each. We’ll learn not just why those performance problems happen, but how to diagnose and fix them. Hooray, performance! ⚡️

Workshops on related topic

React Summit Remote Edition 2021React Summit Remote Edition 2021
87 min
Building a Shopify App with React & Node
Top Content
WorkshopFree
Shopify merchants have a diverse set of needs, and developers have a unique opportunity to meet those needs building apps. Building an app can be tough work but Shopify has created a set of tools and resources to help you build out a seamless app experience as quickly as possible. Get hands on experience building an embedded Shopify app using the Shopify App CLI, Polaris and Shopify App Bridge.We’ll show you how to create an app that accesses information from a development store and can run in your local environment.
JSNation 2022JSNation 2022
41 min
Build a chat room with Appwrite and React
WorkshopFree
API's/Backends are difficult and we need websockets. You will be using VS Code as your editor, Parcel.js, Chakra-ui, React, React Icons, and Appwrite. By the end of this workshop, you will have the knowledge to build a real-time app using Appwrite and zero API development. Follow along and you'll have an awesome chat app to show off!
GraphQL Galaxy 2021GraphQL Galaxy 2021
164 min
Hard GraphQL Problems at Shopify
WorkshopFree
At Shopify scale, we solve some pretty hard problems. In this workshop, five different speakers will outline some of the challenges we’ve faced, and how we’ve overcome them.

Table of contents:
1 - The infamous "N+1" problem: Jonathan Baker - Let's talk about what it is, why it is a problem, and how Shopify handles it at scale across several GraphQL APIs.
2 - Contextualizing GraphQL APIs: Alex Ackerman - How and why we decided to use directives. I’ll share what directives are, which directives are available out of the box, and how to create custom directives.
3 - Faster GraphQL queries for mobile clients: Theo Ben Hassen - As your mobile app grows, so will your GraphQL queries. In this talk, I will go over diverse strategies to make your queries faster and more effective.
4 - Building tomorrow’s product today: Greg MacWilliam - How Shopify adopts future features in today’s code.
5 - Managing large APIs effectively: Rebecca Friedman - We have thousands of developers at Shopify. Let’s take a look at how we’re ensuring the quality and consistency of our GraphQL APIs with so many contributors.
DevOps.js Conf 2022DevOps.js Conf 2022
152 min
MERN Stack Application Deployment in Kubernetes
Workshop
Deploying and managing JavaScript applications in Kubernetes can get tricky. Especially when a database also has to be part of the deployment. MongoDB Atlas has made developers' lives much easier, however, how do you take a SaaS product and integrate it with your existing Kubernetes cluster? This is where the MongoDB Atlas Operator comes into play. In this workshop, the attendees will learn about how to create a MERN (MongoDB, Express, React, Node.js) application locally, and how to deploy everything into a Kubernetes cluster with the Atlas Operator.
React Summit 2023React Summit 2023
88 min
Deploying React Native Apps in the Cloud
WorkshopFree
Deploying React Native apps manually on a local machine can be complex. The differences between Android and iOS require developers to use specific tools and processes for each platform, including hardware requirements for iOS. Manual deployments also make it difficult to manage signing credentials, environment configurations, track releases, and to collaborate as a team.
Appflow is the cloud mobile DevOps platform built by Ionic. Using a service like Appflow to build React Native apps not only provides access to powerful computing resources, it can simplify the deployment process by providing a centralized environment for managing and distributing your app to multiple platforms. This can save time and resources, enable collaboration, as well as improve the overall reliability and scalability of an app.
In this workshop, you’ll deploy a React Native application for delivery to Android and iOS test devices using Appflow. You’ll also learn the steps for publishing to Google Play and Apple App Stores. No previous experience with deploying native applications is required, and you’ll come away with a deeper understanding of the mobile deployment process and best practices for how to use a cloud mobile DevOps platform to ship quickly at scale.