AG Grid es la cuadrícula de datos estándar de la industria en JavaScript para construir aplicaciones empresariales centradas en datos. Recientemente, el equipo de AG Grid rediseñó la cuadrícula para implementar el Motor de Renderizado de React en un código 100% React. Dada la complejidad de una cuadrícula de datos, esta fue una tarea muy desafiante. Escucha a Niall, el fundador de AG Grid, hablar sobre el proceso de migración, incluyendo cómo se logró, las lecciones aprendidas en el camino y cómo afectará a tus aplicaciones de React que utilizan AG Grid.
Nuevo Motor de Renderizado de React de AG Grid
Video Summary and Transcription
La charla de hoy presenta el nuevo motor de renderizado de React de AG Grid, destacando sus características y beneficios. Se explica la diferencia entre AG Grid y la tabla de React, haciendo hincapié en la potente interfaz de usuario y las capacidades empresariales de AG Grid. Se discute la integración de AG Grid y React, mostrando cómo se utiliza React en toda la cuadrícula y sus personalizaciones.
1. Introducción a AG Grid y React Rendering
Mi nombre es Niall. Hoy, voy a hablar sobre el nuevo motor de renderizado de React que tenemos en AG Grid. AG Grid es un componente empresarial con características geniales como agrupación de filas y gráficos directamente desde la cuadrícula. Pone tu aplicación en esteroides.
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
2. Diferencia entre A-G grid y React table
A menudo nos preguntan cuál es la diferencia entre A-G grid y React table. A-G grid viene con muchas cosas incluidas de serie, incluyendo una potente interfaz de usuario. Por otro lado, React table no tiene una interfaz de usuario y requiere que la crees tú mismo. Si buscas una biblioteca ligera para la web, considera React table. Pero si necesitas un componente empresarial, elige A-G grid. Como desarrolladores de componentes, nuestro desafío es soportar diferentes frameworks sin tener que reescribir la aplicación. Todos los frameworks resultan en DOM y CSS, pero difieren en su enfoque. En A-G grid, hacemos nuestros componentes simples y confiamos en servicios compartidos para la inteligencia.
3. Integración de AG Grid y React
Cuando se utiliza A-G grid en React, se utiliza React al 100% en todo el grid. El ejemplo mostrado está en vivo en mi portátil, con la columna de producto configurada para usar un componente de React. El pequeño robot bailarín está en React. Es interesante ver cómo el componente de React proporcionado por la aplicación vive dentro del componente de celda de AG grid, que forma parte del componente de fila de AG grid, y así sucesivamente, hasta llegar al grid y a la aplicación. React se utiliza desde la aplicación hasta las personalizaciones de AG grid.
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.
Comments