Nuevo Motor de Renderizado de React de AG Grid

Mi nombre es Niall. Soy el tipo que inició el proyecto AG Grid. Es genial estar aquí. Hoy, voy a hablar sobre el nuevo motor de renderizado de React que tenemos en AG Grid.

Ahora, antes de comenzar, solo una breve introducción sobre qué es AG Grid en caso de que algunos de ustedes no lo sepan. Aquí arriba hay un pequeño ejemplo usando AG Grid. Este ejemplo tiene, aguántalo. Uno, dos, tres, lo siento. Este ejemplo tiene 10,000 filas y 1,000 actualizaciones por segundo. Entonces, esas luces llamativas que ven son las 1,000 actualizaciones por segundo que llegan. Ahora, somos un componente empresarial. Así que venimos con muchas características geniales de tipo empresarial. Como poner tu pantalla en negro. Esto es agrupación de filas. Hemos agrupado los datos y notarán que en el nivel de grupo, los números siguen siendo, lo siento, los niveles de grupo tienen la suma de los valores debajo. Entonces, 1,000 actualizaciones por segundo, 10,000 filas y los grupos se están recalculando en tiempo real dentro del navegador. La agrupación es bastante genial. También hacemos algunas otras cosas realmente, realmente geniales como esto aquí. Esto es gráficos directamente desde la cuadrícula. Entonces, si quieres, hey. Si quieres que tu aplicación tenga gráficos como estos, solo tienes que usar A-G grid y no escribir más código. Todo esto viene gratis. Así que, la forma en que me gusta

como puedes ver, A-G grid potencia tu aplicación. A menudo nos preguntan cuál es la diferencia entre A-G grid y la tabla de React. Antes de responder a eso, ¿Taner todavía está aquí? ¿Estás en la audiencia? Taner, ¿se ha ido? No, se ha ido. Oh, tenía su sesión de preguntas y respuestas. Si hubiera un premio para alguien que ha contribuido más a la comunidad de código abierto de React, tendría que decir que se lo llevaría Taner, con TANstack. Es simplemente increíble con la tabla de React, React query. Es muy bueno. Pero Taner y yo decidimos trabajar juntos porque A-G grid y la tabla de React son cosas diferentes. Verás, A-G grid viene con muchas cosas incluidas de serie. Tiene una interfaz de usuario. Es muy potente. Es como tener todas las armas cargadas. Y eso es genial cuando estás desarrollando aplicaciones empresariales. La tabla de React no tiene una interfaz de usuario. Tienes que crearla tú mismo. Requiere más código. Pero a veces, menos es más. Y menos es más cuando las páginas que estás entregando tienen que estar en la web, donde la optimización para los motores de búsqueda es algo que te preocupa. Así que si buscas una biblioteca ligera que esté en la World Wide Web, entonces deberías considerar la tabla de React. Pero si buscas un componente empresarial para una aplicación empresarial, entonces deberías considerar A-G grid. Bien. ¿De qué estaba hablando de nuevo? Ah, sí. Como desarrolladores de componentes, tenemos un desafío. ¿Cómo soportamos todos los diferentes frameworks sin tener que escribir nuestra aplicación de nuevo para cada framework? Bueno, descubrimos que todos estos diferentes frameworks, Vue, React, Angular, todos hacen exactamente lo mismo. Todos resultan en DOM y CSS. Tienen que hacerlo porque eso es lo que los navegadores entienden. La diferencia está en cómo lo hacen. Así que lo que decidimos hacer en A-G grid es hacer nuestros componentes lo más simples posible. Todo lo que hacen nuestros componentes ahora es tener una plantilla y establecer estilos y clases CSS. No saben por qué, simplemente los establecen. Toda la inteligencia está dentro de los servicios compartidos que tenemos en A-G grid, entonces cuando llevamos A-G grid a un nuevo framework como en React, lo que podemos hacer ahora es arrancar el

motor de renderizado que tenemos y poner un motor de renderizado de React en su lugar. Así que ahora, cuando se utiliza A-G grid en React, se utiliza React al 100% en todo el grid. Ahora, eso se explica mejor con una demostración. Y para ayudarme con la demostración, voy a invitar al escenario a uno de nuestros mejores desarrolladores, Mana. Aplaudan a Mana. Mana puede hacer muchas cosas maravillosas, incluyendo sostener micrófonos. Esto se siente por encima de mi nivel salarial.

OK. Este es el ejemplo que vimos antes, pero está en vivo en mi portátil. Puedes ver aquí que hay una columna de producto. Esto es A-G grid. Está escrito en React. Esta aplicación está en React, y este es el código. Entonces, el grid tomaría un montón de columnas como esta. Puedes ver que la primera columna es la columna de producto. Lo que voy a hacer es configurar esa columna de producto para que use un componente de React. Entonces, en tu aplicación, podrías proporcionar un componente como este. Este es un componente simple de React. Solo muestra una imagen. Ups. Estoy usando un touchpad. Es un poco complicado. Una imagen y un valor. Voy a poner eso en la primera columna aquí. Guardar. Volver a mi navegador. Actualizar. Rezar. Y funciona. Así que el pequeño robot bailarín aquí, eso está en React. Pero se vuelve realmente interesante si abro las DevTools y voy a la sección de componentes de React. Haré clic en el inspector. Seleccionaré mi nuevo componente, y puedes ver aquí a la derecha que este componente de React proporcionado por la aplicación vive dentro del componente de celda de AG grid, que vive dentro del componente de fila de AG grid, y así sucesivamente hasta llegar al grid y llegar a la aplicación. Así que se utiliza React desde tu aplicación, dentro de React, y dentro de las personalizaciones de AG grid. Y eso es todo. Así que muchas gracias por su tiempo. Disfruten del resto de su conferencia. Cuídense.