5 Años de Construcción de React Table

Rate this content
Bookmark

Únete a mí mientras me sumerjo en la historia de React Table y discuto todo lo que me ha enseñado (¡tanto éxitos como fracasos!) desde que construí la primera versión basada en componentes hace 5 años. Cubriremos muchos subtemas, incluyendo, pero no limitado a: .... toma aire ... Headless UI, React Hooks, TypeScript Avanzado, Branding y Nomenclatura, Pipelines de Construcción, Software de Código Abierto, Diseño de API, Rendimiento de React/JavaScript e incluso Herramientas Agnósticas de Framework!

24 min
17 Jun, 2022

Comments

Sign in or register to post your comment.

Video Summary and Transcription

React Table es una popular biblioteca de tablas que comenzó con tablas HTML5 y se trasladó a React. Enfrentó desafíos con la integración y las solicitudes de los usuarios, lo que llevó al desarrollo de React Table. La introducción del patrón Headless UI y el soporte de TypeScript mejoraron las capacidades y la calidad de la biblioteca. Los genéricos y TypeScript jugaron un papel importante en la reducción del tamaño del código y la mejora del desarrollo. React Table ahora es agnóstico de framework y se está asociando con AG Grid.

Available in English

1. Introducción a React Table y Nozzle

Short description:

Estoy emocionado de estar aquí. Amo React y el código abierto. Hablemos de los últimos cinco años de React Table y lo que he aprendido. En 2015, cofundé Nozzle, una startup que rastrea los resultados de búsqueda de Google. Servimos los datos a especialistas en SEO y a los profesionales del marketing. Tuvimos que lidiar con muchas tablas.

Muy bien. Estoy emocionado de estar aquí. Tengo mucho que cubrir. Estoy desfasado y cansado, pero tengo que traer la energía, así que ayúdenme. Tenemos que traer la energía, ¿de acuerdo? Tengo algunas camisetas que tengo que repartir rápidamente y algunas personas que me van a ayudar. Así que vamos a ello. Aquí, toma esta también. ¿Alguien quiere una camiseta? ¡Por aquí! Bien, el que más aplauda se lleva la camiseta. ¡Sí! ¡Fue exactamente esa persona! ¡Perfecto! Me voy. Lo siento.

Muy bien, espero que les guste Jurassic Park. Puede que no les guste al final de mi charla porque, no sé, ya verán. Mi nombre es Tanner Lindsley y estoy aquí porque amo React y amo el código abierto y estoy un poco adicto a ello. Es una adicción mala pero muy divertida. Normalmente estaría hablando sobre React Query hoy. No lo haré. Prefiero hablar sobre Take It Back Old School, la primera biblioteca que construí y que tuvo éxito y ahora es React Table. Quiero hablar sobre los últimos cinco años de React Table y algunas cosas que he aprendido a través de este proceso loco de construir una biblioteca de código abierto y tal vez puedan aplicar algo de ello a lo que hacen, o tal vez no. Es solo una charla divertida. Pero tenemos que retroceder aún más hasta 2015.

Me invitaron a cofundar una startup llamada Nozzle con algunos amigos. Y Nozzle es básicamente Google pero en contra de Google. Estamos rastreando los resultados de búsqueda de Google en reversa a gran escala. Estamos hablando de miles de millones de resultados al día. Los estamos midiendo y extrayendo todos los datos y los estamos almacenando en BigQuery, aunque no lo crean, y se los estamos proporcionando a los especialistas en SEO y a los profesionales del marketing que quieren esos datos. Es bastante genial. Parte de ese producto es que tenemos que hacer mucha visualización de datos, muchas consultas, y por supuesto muchas tablas. Todo está empezando a encajar ahora. Ojalá nuestras tablas en 2015 se vieran así. Pero no fue así.

2. Transición de las tablas HTML5 a Angular y React

Short description:

Comenzamos con las tablas HTML5 y luego pasamos a Angular. Finalmente, cambiamos a React y nos enfrentamos al desafío de no tener una biblioteca de datagrid. Afortunadamente, aggrid tenía un adaptador para React, lo cual nos salvó. Pudimos migrar y seguir utilizando aggrid, pero encontramos algunos problemas menores. React facilitó todo con su enfoque basado en componentes.

Estábamos trabajando con tecnología un poco más antigua aquí. No exactamente así, pero aquí es donde todo comienza. Todos comienzan con la tabla HTML5 porque es increíble. Realmente es un gran elemento. Intenta construir una tabla con divs y lo apreciarás.

Necesitábamos enviar y vender y con suerte, como Sweizek Teller pudo enseñarnos, tener la oportunidad de mejorar. Así que fue como ir, ir, ir tan rápido como pudimos. Estábamos usando Angular en ese momento. Booo. Y estábamos usando herramientas como ngGrid y uigrid, que honestamente eran fantásticas. Estaban construidas en Angular, para Angular, gran integración, y finalmente pudimos usar aggrid, que también es una herramienta increíble. Ahí vamos, tenemos algunos fanáticos de aggrid.

Algo sucedió que no esperábamos. Este framework aparece de la nada, y es como, esto es todo. Aquí es donde debes estar. Y nosotros decimos, OK, hagámoslo. Es hora de invertir. Movimos todo a React. Estoy hablando de todo, en como tres semanas. Y luego llegamos allí y decimos, maldición. No tenemos una biblioteca de datagrid. Y yo digo, espera, espera, espera. aggrid tiene un adaptador para React. Y nosotros decimos, estamos salvados. Y adivinen qué. Lo estábamos. Pudimos migrar y seguir utilizando aggrid, y fue sinceramente genial. Pero encontramos algunos problemas pequeños aquí y allá. Estábamos trabajando con un componente de React. Es solo React. Todo son solo componentes.

3. Desarrollo y desafíos de React Table

Short description:

Bajo el capó, aggrid no se estaba renderizando usando React. Tenía su propio motor de manipulación de DOM personalizado, lo que lo hacía rápido. Pero carecía de la integración que queríamos. Ahora aggrid tiene un renderizado React integrado. En 2017, necesitábamos una biblioteca de tablas y comenzamos a trabajar en React Table. Ganó popularidad, pero enfrentamos numerosos problemas en GitHub. Los usuarios tenían muchas preguntas y solicitudes, pero no teníamos las opciones. Así que agregamos más props a la versión 6 de React Table.

Pero algo fue interesante. Bajo el capó, notamos que aggrid no se estaba renderizando usando React. Estaba utilizando su propio motor de manipulación de DOM personalizado, lo que explicaba por qué era tan increíblemente rápido. Pero en el proceso de utilizar ese motor tan rápido, React quedó un poco afectado. No había el nivel de integración que estábamos buscando. Estoy realmente feliz de que hoy en día, aggrid tenga un renderizado React integrado. Es asombroso. Niall de aggrid hablará de eso en unos minutos. Quédate si quieres escuchar sobre eso.

Esto fue en 2017. Eso aún no existía y necesitábamos una biblioteca de tablas de inmediato. Obviamente, comencé a trabajar en la tabla de React. Era un componente único. Era 100% React. Pude delegar muchas cosas a React. Tuvimos que hacer todo el renderizado, la gestión del estado. Aún estábamos usando this.setState, pero aún era bastante bueno. Incluso teníamos paquetes más pequeños porque React estaba haciendo mucho por nosotros.

Lo lanzamos pensando que sería lo que fuera. La tabla de React comenzó a crecer. La gente quería que las tablas y React funcionaran juntos. Mientras disfrutábamos del éxito que teníamos en el gráfico de descargas de NPM, se estaba gestando una tormenta en el repositorio de GitHub en forma de problemas. Toneladas de problemas. Nos inundaron con problemas, y todos se veían así. ¿Puedo mover la paginación? ¿Dame props personalizadas? ¿Puedo usar mi propio componente de fila? ¿Puedo usar cualquier biblioteca de CSS y JS que esté de moda esta semana? ¿Puedo hacer algo con el marcado? La realidad es que no podía responder ninguna de esas preguntas. No tenía las opciones para hacerlo. Honestamente, era solo un montón enorme de basura. Fue terrible. Hice lo único que sabía hacer, y eso es agregar más props. ¿Alguna idea de cuántas props agregué a la versión 6 de la tabla de React? Cinco.

4. Desarrollo de React Table e Integración de Downshift

Short description:

130. 137 props. Para personalizar cada pequeño detalle de React Table. Afortunadamente, mi amigo Kent estaba construyendo una nueva biblioteca llamada Downshift. Te proporcionaba el estado, te proporcionaba la API y tenías que conectarlo tú mismo. Vi esto y pensé que era la respuesta. Eliminé todo lo innecesario y escribí una nueva versión. El equipo central de React le encantó y lo lanzamos lo antes posible.

¡Vamos! 130. 137 props. Para hacer de todo. Todos están ahí. Para personalizar cada pequeño detalle de React Table porque era solo un componente único.

Me estaba ahogando. Sinceramente, me estaba ahogando. Afortunadamente, no morí. Pero, afortunadamente, mientras me estaba ahogando en mi miseria, mi amigo Kent estaba construyendo una nueva biblioteca llamada Downshift.

Downshift era una biblioteca para construir menús desplegables y autocompletados. Pero era realmente interesante. No generaba ningún marcado por ti. Simplemente te proporcionaba el estado, te proporcionaba la API y tenías que conectarlo tú mismo. Vi esto y pensé, esta es la respuesta. Así es como voy a resolver este problema. Inmediatamente, me sumergí en el código fuente de la tabla de React. Pensé, elimina todo esto, vamos a utilizar este enfoque de API, invertir el control al usuario para que renderice todo por sí mismo.

Algunas personas decían, ¿me vas a hacer renderizar mi propia tabla? Y yo decía, sí, lo haré. Porque va a ayudar. Solo confía en mí. Te lo prometo. Casi he terminado de escribir esta nueva versión. El equipo central de React estaba como, boom, enganchado. En serio, eliminó todo, funciones como hijos, render props. Yo estaba como, sí. Validó el enfoque exacto que estaba tratando de tomar. Así que pude tomar este componente insignificante como hijos como una función y convertirlo en este increíble gancho de uso de tabla donde podías devolver el marcado que quisieras. Fue fantástico. Y lo lanzamos. Lo lancé lo antes posible, tan pronto como estuvo listo.

5. React Table Version 7 y el Patrón Headless UI

Short description:

La versión 7 de React Table introdujo el concepto de Headless UI, que separa la lógica del marcado y los estilos. Este enfoque promueve la capacidad, la inversión de control, la reutilización y un código de mayor calidad. A pesar de la resistencia inicial, los usuarios finalmente adoptaron el poder de escribir sus propias tablas. React Table se volvió ampliamente adoptado, con proyectos como la nueva versión beta de GitHub que lo utilizan en su núcleo mientras mantienen sus propios componentes y estilos. Sin embargo, el código abierto nunca termina realmente y la demanda de soporte para TypeScript presentó un nuevo desafío.

Y la versión 7 de React Table fue increíble. Pero debido a esta inversión de control, pude cerrar, como, el 95% de los problemas de GitHub que teníamos, básicamente respondiendo a todos con lo mismo. ¿Quieres mover la paginación? Hazlo tú mismo, te desafío. Y más tarde aprendí que este patrón tiene un nombre. Se llama Headless UI.

Y Headless UI no es el producto de tailwind que estás pensando. Pero conceptualmente, lo es, sabes, es un proceso de tomar toda tu lógica y todo lo que conforma las partes lógicas de tu aplicación y separarlas de tu marcado y tus estilos. Creo que esto fomenta, como, mucha más capacidad, inversión de control, reutilización. Creo que resulta en un código de mayor calidad. Resulta de la misma manera que mover tu estado a una máquina de estados. Así que lanzamos la Versión 7 y fue genial. Tomó un poco de tiempo convencer a la gente de que tenían que escribir sus propias tablas. Pero una vez que lo probaron, les encantó el poder.

De acuerdo. Eso duró dos años. E incluso empecé a ver algunos proyectos como la nueva versión beta de GitHub que utiliza React table en su núcleo para renderizar todas sus tablas. Pero están utilizando sus propios componentes. Es todo Headless. Así que siguen utilizando su biblioteca de componentes y todos sus estilos, y todo a lo que están acostumbrados. Vi esto y pensé, lo logré. React table está terminado. Me retiro. Voy a construir React query. Básicamente hice eso. El código abierto tiene una forma de jugar contigo. Nunca terminas con el código abierto, y tampoco tus usuarios. Realmente desearía tener sonido para esta siguiente diapositiva, pero estoy bastante seguro de que Paramount Pictures cerraría la transmisión. De todos modos, aquí estoy disfrutando de mi código abierto y de la nada, ¡boom!, los usuarios de TypeScript aparecen de la nada. Simplemente dicen, danos TypeScript, ¡vamos, vamos, vamos!, y yo digo, ¡empecemos! No tenía idea de qué hacer. Es una historia real.

6. Aceptando TypeScript en el Desarrollo de React Table

Short description:

Tenía miedo de TypeScript en el código abierto. No sabía lo que estaba haciendo. Pero las bibliotecas que usaban TypeScript tenían una mayor calidad. Eventualmente, tuve que aceptarlo y mejorar mi nivel.

Estaba como cerrando problemas y ocultando cosas, como, mantente alejado, ¿verdad? Si alguien ha trabajado en código abierto, como, cuando tienes TypeScript acercándose, da miedo. Si no conoces TypeScript, simplemente piensas, no sé de qué estás hablando. Lo siento, alguien más puede encargarse de los tipos. Yo solo seguiré jugando aquí. No tenía idea de lo que estaba haciendo. Pero era aún más aterrador porque sabía que TypeScript era casi inevitable. Estaba llegando a mí y en algún momento tendría que enfrentarlo.

7. Aceptando TypeScript en el Desarrollo

Short description:

Me resistí tanto, incluso lo criticaba en Twitter. Pero empecé a notar que las bibliotecas que usaban TypeScript generalmente tenían una mayor calidad, más que la mía. Eventualmente, tuve que aceptarlo. Fue una decisión difícil porque significaba frenar para aprender algo nuevo y aterrador. Pero lo abracé por completo.

Me resistí tanto, incluso lo criticaba en Twitter. Todos lo hacemos. Todos, levanten la mano. Todos lo hacemos. Pero empecé a notar que las bibliotecas que usaban TypeScript generalmente tenían una mayor calidad, más que la mía. Tenían menos problemas y, sinceramente, los desarrolladores que trabajaban en ellas y usaban TypeScript, era síndrome del impostor. Eran verdaderas estrellas. No sé cómo lo hacían. Eventualmente, tuve que aceptarlo. Era hora de subir de nivel. Fue una decisión difícil porque significaba frenar para aprender algo nuevo y aterrador. Pero lo abracé por completo.

8. Reescribiendo React Table con TypeScript

Short description:

Hace dos años, comencé a reescribir React Table versión 8 con TypeScript y pensé: tendré una nueva versión en dos semanas. Será como una versión alfa, dos semanas, será fácil. De ninguna manera. No sabía lo que estaba haciendo. Me había metido de lleno y aprendí que escribir bibliotecas en TypeScript es algo muy avanzado.

TypeScript realmente es increíble. Y prometo que esto no es una charla sobre TypeScript, pero tal vez algunos mensajes literales. Hace dos años, comencé a reescribir React Table versión 8 con TypeScript y pensé: tendré una nueva versión en dos semanas. Será como una versión alfa, dos semanas, será fácil. De ninguna manera. No sabía lo que estaba haciendo. Me había metido de lleno y aprendí que escribir bibliotecas y TypeScript, esto es algo muy avanzado. Ni siquiera sabía cómo usar TypeScript como desarrollador de aplicaciones y estaba intentando escribir una biblioteca. Estaba en problemas.

9. Aprendiendo TypeScript y el Poder de los Genéricos

Short description:

Prepárate. La biblioteca TypeScript es increíble. Los genéricos te sorprenderán, te harán llorar y luego te harán muy feliz. Te permiten canalizar tipos en tu sistema y devolverlos a tus usuarios. La función create column de React table utiliza diez genéricos. React table tiene al menos 36 funciones, cada una consumiendo una cantidad similar de genéricos. Es como 5,000 líneas de código, o más bien, líneas de tipos. Esto me llevó a la idea de usar una bolsa de opciones para manejar una gran cantidad de argumentos.

Así que lancé la señal de murciélago en Twitter, y tuve a algunas personas increíbles que vinieron a mi rescate, ofrecieron su tiempo y toda su energía para ayudarme a aprender TypeScript de todas las formas posibles, como revisar sus patrones, llamadas en vivo con todos, soporte a través del mantenimiento. Este es mi equipo de TypeScript, y solo quería agradecerles públicamente porque son increíbles. Pero todos básicamente dijeron lo mismo, sí, gracias. Gracias. Todos básicamente dijeron lo mismo. Prepárate. Porque la biblioteca TypeScript es increíble. Oh, también, los genéricos, van a sorprenderte. Te harán llorar, y luego te harán muy feliz. Son geniales.

De hecho, hablemos de los genéricos muy rápido. Básicamente, es el proceso de tomar algo que se escribiría estáticamente, como una cadena, y darle a tus tipos variables para que puedas canalizar esos tipos en tu sistema y devolverlos a tus usuarios. Esta es una función muy simple, pero también puedes usar múltiples genéricos para extraer información de los tipos y proporcionarla al usuario en forma de autocompletado. A todos les encanta eso de VS Code, ya seas usuario de TypeScript o no. en otro nivel, ¿verdad? Mira la función create column de React table. Eso son diez genéricos. Ejecutémoslo a través de Prettier. Eso es lo que vamos a ver. Está bien, tenemos algunas opciones y una columna y no sé si alguien se dio cuenta, pero ni siquiera estamos devolviendo, ni siquiera estamos haciendo la implementación todavía. Esto es la cantidad de código que tenemos. Hay al menos 36 funciones en React table y todas consumen aproximadamente la misma cantidad de genéricos. ¿Alguien sabe cuántas líneas de código son? Son como 5,000 líneas de código. En algunas líneas de código, son líneas de tipos. Esto fue algo con lo que tuve dificultades para entender con los tipos, como, ¿por qué estoy haciendo esto, verdad? Sí, ni siquiera se había terminado la implementación. Así que estaba bastante triste, pero tuve esta idea. ¿Alguien más se ha encontrado con esta situación con JavaScript? Como vaya, eso es una gran cantidad de argumentos. ¿Qué hacemos? Lo pones en una bolsa de opciones. Boom. Bolsa de opciones. Empacándolo.

10. Usando Genéricos y TypeScript en React Table

Short description:

Así que podemos hacer lo mismo con los genéricos. Podemos tomar todos estos genéricos, sacarlos y reutilizarlos como una variable. Pude reducir el código fuente de React Table en un 70 por ciento al implementar este patrón. Todas las cosas geniales sobre TypeScript comenzaron a destacar. Es capaz de tomar todas las cosas que normalmente solo están en tu cabeza y meterlas en TypeScript. Es una tecnología ganadora.

Así que podemos hacer lo mismo con los genéricos. Podemos tomar todos estos genéricos, sacarlos y reutilizarlos como una variable. Esto es algo muy nuevo y no lo he visto mucho en la práctica. Espero que funcione, porque es increíble.

Después de hacer este cambio, pude acceder a todos mis genéricos como una lata de objetos JavaScript. Se llama mapas genéricos y no sé por qué se llama mapas genéricos. Creo que debería llamarse bolsas genéricas. Pude reducir el código fuente de React Table en un 70 por ciento al implementar este patrón. Probablemente tenga que hablar más sobre esto en una charla sobre TypeScript. Pero este fue el punto en el que empecé a sentirme seguro. Pensé, está bien. Soy peligroso y sé un poco de genéricos. Me siento bien.

Todas las cosas geniales sobre TypeScript comenzaron a destacar. Todo el refactorizado, menos errores, mejor diseño. Es capaz de tomar todas las cosas que normalmente solo están en tu cabeza y que se desvanecerán si te alejas dos semanas de tu proyecto, meterlas en TypeScript y simplemente dormir tranquilo porque no estoy recordando los árboles de dependencias de mi código. Creo que es una necesidad. Hay mucho más de lo que necesitamos hablar sobre TypeScript. Simplemente no puedo hacerlo. Es una tecnología ganadora. Créanme, lo necesitan. Tienen que probarlo. Tienen que usarlo.

11. React Table Going Framework Agnostic

Short description:

React Table ahora se llama TanSeqTable y se está volviendo independiente del framework. Se enviará con adaptadores para todos los frameworks, lo que facilitará la construcción de tablas en React. Los últimos cinco años han sido interesantes, con dos años dedicados a implementar y aprender TypeScript. Queda una cosa más por hacer, pero no estamos conectados a Wi-Fi.

No queda mucho tiempo, pero hay una cosa más de la que quiero hablar que es un poco una historia de batalla con React Table, pero también es el futuro. Solo quiero tranquilizar a todos en este momento. Lo prometo, amo React. Estoy aquí para quedarme. Pero seríamos muy ingenuos si pensáramos que React es una especie superior y es lo único capaz de producir aplicaciones y UI increíbles, ¿verdad? Sé que nos encanta, pero debemos quitarlo del pedestal de vez en cuando. Hay otros frameworks por ahí. Solid, Vue, Svelte. Muy bien. Pasen. Creo que también merecen tablas. Creo que merecen una tabla mejor que pueda construir en React.

Y, siguiendo la tradición de empujar los límites en el último momento, decidí tomar React Table y volverlo independiente del framework. Así que, React Table ahora se llama TanSeqTable y se enviará con todos los adaptadores para todos los frameworks. ¿Quieres trabajar en el adaptador de Angular? Ven a hablar conmigo. ¿De acuerdo? Pero es independiente del framework. Y esto normalmente sería muy difícil, pero al parecer, estar sobre los hombros de la interfaz de usuario sin cabeza lo hace mucho más fácil. Ya estamos separando el marcado y los estilos, y eso soluciona muchas de las diferencias entre muchos de nuestros frameworks desde el principio. Y resulta que solo necesitábamos algunos adaptadores para conectar internamente la reactividad y el contexto. Este es el adaptador de tabla sólida. Eso es todo. Y todos los demás adaptadores básicamente se ven exactamente iguales, incluso React.

Así que los últimos cinco años han sido realmente interesantes con TanSeqTable. Dos años se han dedicado solo a implementar y aprender TypeScript. Fue una locura. Realmente solo queda una cosa por hacer. ¿Deberíamos hacerlo? Muy bien. Hagámoslo. Espera. Espera. Ni siquiera estamos conectados a Wi-Fi.

12. TANStack Table and AG Grid Partnership

Short description:

En los próximos 30 días, nos convertiremos en TANStack Query, virtual y Ranger. AG Grid ahora es un socio de TANStack OSS. Educaremos a todos sobre cómo construir mejores tablas y cuándo usar cada herramienta. Cambiar al paradigma sin cabeza en React Table se sintió extraño al principio, pero es como debería ser. Puedes hacer preguntas a Tanner en Slido.com.

Lo haré después de la charla. Está bien. También hay algunas otras cosas de las que quiero hablar rápidamente.

Así que en los próximos 30 días, vamos a convertirnos en TANStack Query, virtual, y Ranger, y el resto de las bibliotecas vendrán pronto.

Quiero agradecer sinceramente a todos los que han ayudado con estos proyectos, a todos los virtuales. Hay muchos mantenedores y colaboradores trabajando, especialmente en otros frameworks, y creo que eso es realmente impresionante. También a todos mis patrocinadores de GitHub. No habría podido hacerlo sin ellos.

Quiero hablar de un patrocinador en particular, que es nuevo y que no esperarías, pero AG Grid. Normalmente, TANStack Table, es un poco extraño decirlo ahora, y AG Grid se han visto como competidores. Resulta que eso no es realmente cierto. Son muy diferentes. Resuelven problemas únicos y tienen paradigmas muy diferentes. Dependiendo de tu caso de uso, es posible que desees usar uno u otro. Al igual que en un momento usé AG Grid y me encantó. Llegamos a esta realización y sabíamos que era hora de trabajar juntos. Así que hoy, anuncio que AG Grid es el primer socio de TANStack OSS con TANStack Table y juntos, trabajaremos arduamente para educar a todos en el ecosistema, independientemente del framework, sobre cómo construir mejores tablas, cuándo usar cada herramienta, y compartiremos todo el conocimiento posible a través de este abismo y nos aseguraremos de que todos podamos ser amigos. Puedes leer más al respecto en TANStack.com. Eso es todo. ¡Woo! ¡Woo! Sí.

Bueno, muchas gracias Tanner. Como usuario de React Table, lo usé en un proyecto anterior. Tengo que decir que fue realmente, como dijiste, que cambiar al paradigma sin cabeza, fue algo extraño al principio, pero tan pronto como te acostumbras, dices, sí, así es como debería ser, ¿verdad? Sí. Así que puedo, sí, puedo decirle a todos los que piensan que es extraño. Básicamente fue lo mismo para mí cuando vi React por primera vez. Se siente extraño, ¿verdad, escribir tu marcado en JavaScript? Se siente extraño, pero se siente tan bien cuando comienzas a usarlo. Cierto. Sí.

Entonces, si tienes alguna pregunta para Tanner, puedes hacerla en Slido.com.

13. Accepting TypeScript and Overcoming Challenges

Short description:

Cuando comencé a aprender TypeScript, me llevó alrededor de seis meses aceptarlo por completo y no sentirme ralentizado por él. Al principio, no veía los beneficios y parecía una cápsula de lanzamiento retrasada. Pero después de aproximadamente dos semanas, empecé a ver la luz y solo mejoraba. Sin embargo, todavía hay frustraciones y desafíos, como el error 'no se encuentra ninguna sobrecarga que coincida con esta llamada'.

Hay una pregunta de Metin Persinski, parece ser una buena persona. Entonces, cuando comenzaste a aprender TypeScript, ¿cuánto tiempo te llevó aceptarlo y no sentirte ralentizado por él? Para mí, fueron como seis meses antes de sentir, oh, entiendo esto. Sí, honestamente, es como una cápsula de lanzamiento retrasada que tomas, ¿verdad? Al principio, piensas, ah, no siento realmente los beneficios. Siento que alrededor de dos semanas comienzas a ver la luz y simplemente sigue acelerando hasta llegar a los seis meses, ¿sabes? Todavía aprecio las cosas que estoy aprendiendo sobre TypeScript. Oh, seguro. Y todos los días también hay nuevas frustraciones. No se encuentra ninguna sobrecarga que coincida con esta llamada. ¿Quién ha estado allí, verdad? Sí, doloroso, ¿verdad? Sin idea de cómo resolverlo, todavía después de tres años.

QnA

React Table Journey Q&A

Short description:

El mejor momento de revelación en mi viaje con la tabla de React fue Headless UI. Convencer a un equipo de cambiar a TypeScript se puede lograr a través de una sesión de programación en pareja. Mantener la cordura mientras se trabaja en código abierto implica encontrar distracciones. Para beneficiarse de TypeScript sin conexión a internet, leer la documentación y profundizar en el código fuente puede ser útil.

Siguiente pregunta de Golub. ¿Cuál fue el mejor momento de revelación en tu viaje con la tabla de React? Headless UI. Es fácil. Genial, cubierto.

Siguiente pregunta de GN. ¿Cómo convencerías a tu equipo de cambiar a TypeScript? No lo sé. Haz una sesión de programación en pareja refactorizando algo en varios archivos. Esa experiencia es cien veces mejor con TypeScript. Puedes hacer un cambio y te dice en todas partes de tu aplicación que necesitas actualizar. No puedes tener todo eso en tu cabeza. Incluso el autocompletado mejora mucho. Hay tantos beneficios. De acuerdo. Pero esto no es una conferencia de TypeScript. No, y esta no fue una charla sobre TypeScript. Tal vez un poco. Así que siguiente pregunta.

¿Cómo mantienes la cordura trabajando en código abierto? Eso no es todo lo que hago. Tengo una startup. También me ocupa mucho tiempo. Hago varias cosas a la vez. Si puedo hacer algo que beneficie a ambos, eso es lo que hago. Tengo una familia que me distrae lo suficiente como para no sumergirme demasiado en problemas de desplazamiento infinito y todo eso. Sí, solo encuentra distracciones. Esas son las preguntas que tenemos. Así que cualquier pregunta que tengas, debes hacerla ahora mismo. Hay una llegando. Imagino que te resultó fácil encontrar ayuda con TypeScript. Dado tus contactos y tu imagen pública, pero ¿cómo pueden hacerlo otras personas que no tienen tu red para obtener ese beneficio? Primero, lee toda la documentación, la documentación de TypeScript es increíble. Y sabes, me di cuenta más tarde de que todo lo que mis amigos me estaban ayudando a aprender, probablemente podría haberlo aprendido por mi cuenta si hubiera profundizado en el código fuente de las bibliotecas de código abierto y simplemente hubiera empezado a armarlo todo.

Learning Advanced TypeScript and Q&A

Short description:

No es necesario aprender TypeScript avanzado a menos que escribas una biblioteca. Por lo general, la documentación del manual es suficiente. Cuando hay un error, puedes encontrar fácilmente soluciones buscando el código de error. Sin embargo, los errores de asignación de tipos pueden ser desafiantes. Eso es todo el tiempo que tenemos para preguntas y respuestas.

No es necesario aprender tanto advanced TypeScript a menos que escribas una biblioteca de algún tipo. La mayoría de las veces, la documentación en el manual te llevará prácticamente hasta el final.

Lo que me gusta, y esto fue una revelación para mí cuando comencé con React, TypeScript, es que cuando hay un error, obtienes un código de error y puedes copiarlo y pegarlo en Google y ¡boom! Así que eso fue realmente fácil para mí. Solo TS y algún número, y encontrarás una publicación en Stack Overflow que explica el mismo problema. A menos que sea un tipo que no se puede asignar a otro tipo. Sí, eso es doloroso.

Bueno, eso es todo el tiempo que tenemos para preguntas y respuestas. Si quieres continuar la conversación con Tanner, puedes hacerlo en el stand de los oradores o en spatialjet. Tanner, muchas gracias. Sí. Lamento arruinar Jurassic Park. Nunca lo verás de la misma manera.

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

React Advanced Conference 2022React Advanced Conference 2022
25 min
A Guide to React Rendering Behavior
Top Content
React is a library for "rendering" UI from components, but many users find themselves confused about how React rendering actually works. What do terms like "rendering", "reconciliation", "Fibers", and "committing" actually mean? When do renders happen? How does Context affect rendering, and how do libraries like Redux cause updates? In this talk, we'll clear up the confusion and provide a solid foundation for understanding when, why, and how React renders. We'll look at: - What "rendering" actually is - How React queues renders and the standard rendering behavior - How keys and component types are used in rendering - Techniques for optimizing render performance - How context usage affects rendering behavior| - How external libraries tie into React rendering
React Summit Remote Edition 2021React Summit Remote Edition 2021
33 min
Building Better Websites with Remix
Top Content
Remix is a new web framework from the creators of React Router that helps you build better, faster websites through a solid understanding of web fundamentals. Remix takes care of the heavy lifting like server rendering, code splitting, prefetching, and navigation and leaves you with the fun part: building something awesome!
React Advanced Conference 2023React Advanced Conference 2023
33 min
React Compiler - Understanding Idiomatic React (React Forget)
React provides a contract to developers- uphold certain rules, and React can efficiently and correctly update the UI. In this talk we'll explore these rules in depth, understanding the reasoning behind them and how they unlock new directions such as automatic memoization. 
React Advanced Conference 2022React Advanced Conference 2022
30 min
Using useEffect Effectively
Top Content
Can useEffect affect your codebase negatively? From fetching data to fighting with imperative APIs, side effects are one of the biggest sources of frustration in web app development. And let’s be honest, putting everything in useEffect hooks doesn’t help much. In this talk, we'll demystify the useEffect hook and get a better understanding of when (and when not) to use it, as well as discover how declarative effects can make effect management more maintainable in even the most complex React apps.
React Summit 2023React Summit 2023
32 min
Speeding Up Your React App With Less JavaScript
Too much JavaScript is getting you down? New frameworks promising no JavaScript look interesting, but you have an existing React application to maintain. What if Qwik React is your answer for faster applications startup and better user experience? Qwik React allows you to easily turn your React application into a collection of islands, which can be SSRed and delayed hydrated, and in some instances, hydration skipped altogether. And all of this in an incremental way without a rewrite.
JSNation 2022JSNation 2022
28 min
Full Stack Documentation
Top Content
Interactive web-based tutorials have become a staple of front end frameworks, and it's easy to see why — developers love being able to try out new tools without the hassle of installing packages or cloning repos.But in the age of full stack meta-frameworks like Next, Remix and SvelteKit, these tutorials only go so far. In this talk, we'll look at how we on the Svelte team are using cutting edge web technology to rethink how we teach each other the tools of our trade.

Workshops on related topic

React Summit 2023React Summit 2023
170 min
React Performance Debugging Masterclass
Featured WorkshopFree
Ivan’s first attempts at performance debugging were chaotic. He would see a slow interaction, try a random optimization, see that it didn't help, and keep trying other optimizations until he found the right one (or gave up).
Back then, Ivan didn’t know how to use performance devtools well. He would do a recording in Chrome DevTools or React Profiler, poke around it, try clicking random things, and then close it in frustration a few minutes later. Now, Ivan knows exactly where and what to look for. And in this workshop, Ivan will teach you that too.
Here’s how this is going to work. We’ll take a slow app → debug it (using tools like Chrome DevTools, React Profiler, and why-did-you-render) → pinpoint the bottleneck → and then repeat, several times more. We won’t talk about the solutions (in 90% of the cases, it’s just the ol’ regular useMemo() or memo()). But we’ll talk about everything that comes before – and learn how to analyze any React performance problem, step by step.
(Note: This workshop is best suited for engineers who are already familiar with how useMemo() and memo() work – but want to get better at using the performance tools around React. Also, we’ll be covering interaction performance, not load speed, so you won’t hear a word about Lighthouse 🤐)
React Advanced Conference 2021React Advanced Conference 2021
132 min
Concurrent Rendering Adventures in React 18
Top Content
Featured WorkshopFree
With the release of React 18 we finally get the long awaited concurrent rendering. But how is that going to affect your application? What are the benefits of concurrent rendering in React? What do you need to do to switch to concurrent rendering when you upgrade to React 18? And what if you don’t want or can’t use concurrent rendering yet?

There are some behavior changes you need to be aware of! In this workshop we will cover all of those subjects and more.

Join me with your laptop in this interactive workshop. You will see how easy it is to switch to concurrent rendering in your React application. You will learn all about concurrent rendering, SuspenseList, the startTransition API and more.
React Summit Remote Edition 2021React Summit Remote Edition 2021
177 min
React Hooks Tips Only the Pros Know
Top Content
Featured Workshop
The addition of the hooks API to React was quite a major change. Before hooks most components had to be class based. Now, with hooks, these are often much simpler functional components. Hooks can be really simple to use. Almost deceptively simple. Because there are still plenty of ways you can mess up with hooks. And it often turns out there are many ways where you can improve your components a better understanding of how each React hook can be used.You will learn all about the pros and cons of the various hooks. You will learn when to use useState() versus useReducer(). We will look at using useContext() efficiently. You will see when to use useLayoutEffect() and when useEffect() is better.
React Advanced Conference 2021React Advanced Conference 2021
174 min
React, TypeScript, and TDD
Top Content
Featured WorkshopFree
ReactJS is wildly popular and thus wildly supported. TypeScript is increasingly popular, and thus increasingly supported.

The two together? Not as much. Given that they both change quickly, it's hard to find accurate learning materials.

React+TypeScript, with JetBrains IDEs? That three-part combination is the topic of this series. We'll show a little about a lot. Meaning, the key steps to getting productive, in the IDE, for React projects using TypeScript. Along the way we'll show test-driven development and emphasize tips-and-tricks in the IDE.
React Advanced Conference 2021React Advanced Conference 2021
145 min
Web3 Workshop - Building Your First Dapp
Top Content
Featured WorkshopFree
In this workshop, you'll learn how to build your first full stack dapp on the Ethereum blockchain, reading and writing data to the network, and connecting a front end application to the contract you've deployed. By the end of the workshop, you'll understand how to set up a full stack development environment, run a local node, and interact with any smart contract using React, HardHat, and Ethers.js.
React Summit 2023React Summit 2023
151 min
Designing Effective Tests With React Testing Library
Featured Workshop
React Testing Library is a great framework for React component tests because there are a lot of questions it answers for you, so you don’t need to worry about those questions. But that doesn’t mean testing is easy. There are still a lot of questions you have to figure out for yourself: How many component tests should you write vs end-to-end tests or lower-level unit tests? How can you test a certain line of code that is tricky to test? And what in the world are you supposed to do about that persistent act() warning?
In this three-hour workshop we’ll introduce React Testing Library along with a mental model for how to think about designing your component tests. This mental model will help you see how to test each bit of logic, whether or not to mock dependencies, and will help improve the design of your components. You’ll walk away with the tools, techniques, and principles you need to implement low-cost, high-value component tests.
Table of contents- The different kinds of React application tests, and where component tests fit in- A mental model for thinking about the inputs and outputs of the components you test- Options for selecting DOM elements to verify and interact with them- The value of mocks and why they shouldn’t be avoided- The challenges with asynchrony in RTL tests and how to handle them
Prerequisites- Familiarity with building applications with React- Basic experience writing automated tests with Jest or another unit testing framework- You do not need any experience with React Testing Library- Machine setup: Node LTS, Yarn