Smashing Podcast Episodio 40 con Mike Cavaliere: ¿Qué es Chakra UI para React?

Este episodio ha sido amablemente apoyado por nuestros queridos amigos de Wix, quienes son conocidos por brindarte la libertad de crear, diseñar, administrar y desarrollar tu presencia web exactamente de la manera que deseas. ¡Gracias!

En este episodio, estamos hablando de Chakra UI. ¿Qué es y cómo puede ayudarte con tus proyectos React? Drew McLellan habla con el experto Mike Cavaliere para averiguarlo.

Mostrar notas

• Interfaz de usuario de Chakra
• Mike en Twitter
• Sitio web personal de Mike
• Cortar en el libro Jamstack

Actualización semanal

• Diseñar con código: un enfoque moderno del diseño
  escrito por Mikolaj Dobrucki
• Automatización de la prueba del lector de pantalla en macOS usando Auto VO
  escrito por Cameron Cundiff
• El auge del pensamiento de diseño como estrategia de resolución de problemas
  escrito por Josh Singer
• Cómo ejecutar una auditoría de UX para una importante plataforma EdTech
  escrito por Mark Lankmilier
• Creación de un blog de varios autores con Next.js
  escrito por Dom Habersack

Transcripción

Drew McLellan: es ingeniero de software sénior en una agencia llamada Echobind. Ha estado escribiendo código durante dos décadas y usando JavaScript todo el tiempo. Le encanta el Jamstack, y su nuevo libro, Cut Into The Jamstack, le enseña al lector cómo crear una aplicación de software como servicio desde cero. Sabemos que conoce bien el Jamstack, pero ¿sabías que una vez se perdió en el pasillo de la mantequilla de maní? Mis grandes amigos, denle la bienvenida a Mike Cavaliere. Hola Mike. ¿Cómo estás?

Mike Cavaliere: Estoy absolutamente genial hoy.

Drew: Es bueno escuchar eso. Quería hablarles hoy sobre un proyecto del que realmente no había oído hablar, de alguna manera, hasta que lo encontré en su libro Jamstack. No estoy seguro de cómo me lo perdí porque parece estar madurando y bien documentado y un real... Simplemente un gran proyecto. Espero que hoy podamos hablar de eso, y puedo ponerme al día para averiguar lo que debería haber sabido todo el tiempo. Estoy hablando de Chakra UI, por supuesto. Dime, ¿qué es Chakra UI? ¿En qué espacio está y qué problema nos está resolviendo?

Mike: Chakra UI es un marco de UI para React o un kit de herramientas de UI, supongo que lo expresan así. En cualquier pila de aplicaciones, hoy en día no desea inventar una interfaz de usuario desde cero. Quieres agarrar un juego de herramientas. Ese ha sido el caso por un tiempo.

Mike: Chakra UI es un gran enfoque en un kit de herramientas de React UI. Tiene una serie de ventajas, pero una es que es... Por un lado, es robusto. Eso significa que tiene todos los elementos de la interfaz de usuario que puedas imaginar. Tiene interruptores. Tiene envoltorios alrededor de las rejillas. Tiene todo tipo de cosas que forman elementos.

Mike: Está hecho para ser muy componible, por lo que todo usa accesorios de estilo. Sus componentes, son geniales desde el primer momento. Puede soltarlos y usarlos tal cual. Pero si desea hacer un ajuste, es muy fácil pasar algunas propiedades de estilo. Son totalmente accesibles. La accesibilidad, de la que todo el mundo habla pero siempre se olvida de implementar o requiere un poco de esfuerzo para implementarla, está integrada para usted.

Mike: No es raro para mí armar algo con Chakra UI y obtener una muy buena puntuación de Lighthouse. En realidad, estaba revisando el sitio web de Cut Into The Jamstack hoy, y el puntaje de accesibilidad es muy alto. También es muy totalmente tematizable. Puede establecer la configuración del tema desde el principio. Solo hay una larga lista de ventajas.

Mike: Hace que se desarrolle muy rápido, que fue lo que me atrajo originalmente. Echobind, lo usamos internamente. Pero para mí, no tengo sentido del diseño. Un poco, pero no soy diseñador de ninguna manera. Puedo tomar componentes de Chakra y alterar las cosas ligeramente para que sean consistentes y las cosas se vean bien desde el primer momento. Eres capaz de desarrollar rápido. La experiencia del desarrollador es genial. Es simplemente impresionante en tantos niveles.

Mike: Lo último que diré antes de seguir divagando. Pero también tiene muchos React Hooks que son ayudantes para funciones muy comunes que vienen con estos elementos que estás usando. Por ejemplo, en modo oscuro. Hay ganchos incorporados para usar el modo oscuro más claro que le permiten alternar colores en su tema de manera muy molesta.

Mike: Hay otro para divulgación usada que es para alternar cosas como módulos. Que siempre necesitas un estado de encendido, apagado. Pero Hook simplemente simplifica eso aún más para que pueda concentrarse en las cosas que el marco no puede inferir automáticamente. Lo cortaré allí, porque eso fue mucho.

Drew: Eso es realmente bueno. Solo para que entendí bien, en primer lugar, ¿es Shakra, no Chakra? ¿Shakra?

Mike: Yo no sería el experto en eso. He estado diciendo Shakra solo por el yoga. Pero tendremos que pedirles a los fundadores que verifiquen dos veces.

Drew: Es un sistema de diseño listo para usar que puede utilizar para crear la interfaz de usuario para su proyecto.

mike: si

Drew: Es específicamente para proyectos React.

mike: si Hay un proyecto de Chakra Vue por ahí. No soy muy una persona de Vue, pero sé que existe. También puede haber para otros marcos, pero estoy muy, muy centrado en React, así que he estado usando el React predeterminado de Chakra.

Drew: Sí. He estado familiarizado con React en el pasado. Usé React cuando trabajaba en Netlify. Ahora hago todo en Vue. Esa fue una de las primeras cosas que miré. Oh, ¿hay un Vue? Esto luce bien. ¿Existe una versión de Vue? Encontré una versión de Vue y parece estar bastante atrasada. Creo que está en 0.9 o algo así, en lugar de 1.6 o cualquiera que sea la versión actual de React. No estoy seguro de qué tan actual es eso.

Drew: Tenemos marcos bastante obsoletos por ahí. Cosas como Foundation UI, Bootstrap, Bulma. Han existido durante mucho tiempo y parece que son una generación anterior de marcos. Luego tenemos algunos enfoques más modernos. Creo que muchos oyentes estarán familiarizados con Tailwind y el proyecto Tailwind UI. ¿Dónde cae Chakra UI en ese paisaje? Está más cerca de algo que Tailwind podría... Un enfoque que Tailwind podría tomar. ¿Es eso correcto?

mike: eso creo Es cierto que tenía la intención de profundizar mucho más en Tailwind solo porque es muy popular en este momento. Pero no puedo hablar inteligentemente sobre los entresijos de Tailwind y cómo... Mi sensación es que Chakra y Tailwind son enfoques alternativos. Agarras uno, no ambos al mismo tiempo, obviamente.

Mike: Todavía no sé cuáles son los pros y los contras de ambos. He estado tan enamorado de Chakra que sigo usándolo por defecto. Estoy como, “Está bien, ahora lo sé muy bien. Me encanta. Voy a llegar a aprender el otro más tarde. Pero Tailwind obviamente, extremadamente popular. Creo que Tailwind tiene su marco base en un conjunto de herramientas de interfaz de usuario. ¿Es eso justo?

Drew: Cierto. Si.

Mike: Está bien. Esto probablemente estaría más a la par con el conjunto de herramientas de interfaz de usuario de Tailwind. En la página de inicio de Chakra, tienen una comparación sobre por qué es posible que desee alcanzar uno u otro, pero no lo tengo internalizado.

Drew: Sí. Eso es bueno. Como mencionamos, para los proyectos React y la forma en que se manifiesta en lugar de algunos de estos sistemas de diseño más tradicionales que le brindan una gran cantidad de nombres de clase para poner en su HTML y tiene que usar alguna estructura HTML, coloque las clases correctas en eso. Esa es la forma en que obtiene la interfaz de usuario que se manifiesta en su proyecto. Con Chakra, debido a que se basa en React, le brinda una gran cantidad de componentes para cada uno de esos elementos. Simplemente puede importar en su proyecto. Esos componentes encapsulan su propio marcado y estilo, ¿verdad?

mike: si En realidad, no tendrás que escribir una clase usando Chakra. no lo he hecho Ni siquiera sé si es posible. Todo el paradigma de React es la composición y las propiedades de un componente. La encapsulación de componentes significa que pasa ciertas propiedades al componente. En Chakra, tienes esta noción de un tema que es un paradigma global. Hay un tema predeterminado y tiene valores de color y espaciado y ciertas unidades para todas las cosas comunes.

Mike: Puedes personalizar ese tema. Lo personaliza globalmente. Puedes aumentarlo como lo necesites. Cuando llama al componente en sí, por ejemplo, una entrada de texto. Un componente de entrada. Eso tendrá colores predeterminados y radio de borde, relleno y margen según lo definido por el tema. Cuando desee darle más estilo, si no desea hacerlo de forma global, por ejemplo, cuando especifico los márgenes inferiores, lo hago caso por caso. No lo hago a nivel global porque eso puede conducir a una catástrofe. Simplemente pásalo como un aviso.

Mike: Hay mensajes de acceso directo. Si tengo un componente de entrada, solo digo, MB es igual, y luego un valor y aplicará la parte inferior del margen. O tienen MX y MY para vertical y horizontal. O simplemente puede especificar M y pasar la cadena como lo haría con la propiedad margin CSS. No hay nombres de clase. Hace todos los nombres de clase dinámicamente y los ofusca lejos del usuario.

Drew: Sí. Creo que ahí es donde debe entrar la comparación con Tailwind. Porque la forma en que funciona Tailwind te da un montón de clases. Si desea aumentar el margen, hay una clase que puede poner para aumentar el margen. Parece que en realidad estás tomando lo mismo... Es una implementación diferente, pero el mismo enfoque de cómo está diseñado. De hecho, estamos usando accesorios y tú estás pasando un accesorio para ajustar esas cosas.

Drew: ¿Qué tan fácil es personalizar un diseño? ¿Se trata simplemente de poder modificar los colores, los márgenes y el relleno y hacer que se vea un poco diferente? ¿O realmente puedes marcar un tema con Chakra?

Mike: Oh, puedes hacer lo que quieras. Es genial. Puede diseñar a nivel de componente o de tema. Solo depende de cuán creativo quieras ser con él. Me las arreglé para tomar algunos componentes y hacer algunas cosas salvajes con ellos. Parte de lo que lo hace realmente elegante es que estos componentes son bastante atómicos.

Mike: Utilizando de nuevo el ejemplo del cuadro de texto, si desea un cuadro de texto, su componente es exactamente eso. Puede diseñar todo a su alrededor o puede diseñar el cuadro de texto en sí. O puedes cambiar el tema. Configuración de los colores para cambiar la marca de todo a nivel mundial.

Mike: De hecho, le envié un tweet al creador de Chakra UI, Seg, diciendo que deberían poner una galería en el sitio porque es realmente genial. Puedes crear hermosos diseños con él. Son muy variados y es posible que no los conozcas en la superficie. No sé si la interfaz de usuario de Chakra tiene algún indicador que haga obvio que estás usando una interfaz de usuario de Chakra para tu sitio.

Mike: He visto algunas cosas muy buenas con él. Pero puedes hacer cualquier cosa con él. He hecho sitios web estáticos. La página de inicio de Cut Into The Jamstack está lista. Solo como un ejemplo. Lo hemos usado en Echobind mucho. No recuerdo si lo hemos usado para echobind.com. Pero sin duda muchos de nuestros clientes sitios. Luego, la aplicación que he estado creando, JamShots, es una aplicación. Todavía no tiene páginas de marketing. Pero todo es solo interfaz de usuario y toda esa interfaz de usuario se crea utilizando Chakra.

Mike: Otra cosa, justo mientras estoy alabando a Chakra, es que hay otro sitio web que he estado usando mucho últimamente, y lo uso en… también lo introduciré en el libro. Chakratemplates.net. Chakra-templates.net. Es un patrón de diseño común que cualquiera que esté contribuyendo está encontrando una unidad de héroe o una unidad de precio. Solo tienen que copiar y pegar el código de Chakra.

Mike: Lo uso por completo para la página de inicio del libro porque me ahorró mucho tiempo en su desarrollo. Es como, oh, tienes un modelo de precios. Déjame copiar y pegar eso. Permítanme ajustar un poco los accesorios de estilo para que todo sea consistente en mi sitio. Eso es todo. Es solo otra cosa que está separada de Chakra en sí, pero simplemente ahorra mucho tiempo porque necesita estas cosas en tantos sitios web y quién quiere reinventar la rueda cada vez.

Drew: Parece que puede ser un verdadero ahorro de tiempo, no solo para proyectos personales en los que desea implementar algo rápidamente, sino también en el contexto de una agencia.

Mike: Ah, sí. Absolutamente.

Drew: ¿Eso se aplica tanto a las interfaces de aplicaciones como a los sitios de marketing? ¿Se inclina hacia un lado o hacia el otro o generalmente es útil para lo que sea que estés construyendo?

Mike: Yo diría que son ambos. Definitivamente lo es. Lo he usado para ambos. Nuestra empresa lo ha utilizado para ambos. Construimos, diría que nos inclinamos mucho hacia la creación de aplicaciones de pila completa y aplicaciones móviles. Definitivamente tenemos mucha más necesidad de interfaz de usuario que de marketing. Aunque a veces también construimos eso. Es útil para ambos.

Mike: Hay algo en el sitio que mencionan, como ¿cuándo no querrías usar Chakra? Lo dicen por la forma en que simplifica esta interfaz CSS. Puede haber desafíos cuando tiene una gran cantidad de datos en la pantalla. Si está creando montones y montones de elementos DOM y realizando muchas actualizaciones en tiempo real, es posible que se enfrente o no a problemas de rendimiento.

Mike: Nunca he visto un problema de rendimiento. Pero tampoco he construido algo que sea tan intensivo en datos en tiempo real. es preocupación Si fuera a crear una aplicación como esa, probablemente me gustaría agregar dos enfoques diferentes de todos modos, solo para ver cómo funcionan con mucho. Pero sí. Es universalmente útil para ambos casos.

Drew: Supongo que siempre hay una compensación, ¿no es así con las opciones tecnológicas? Algo que lo hace muy, muy simple. Realmente rápido de implementar. La compensación podría ser una vez que esté creando 1,000 puntos de datos o lo que sea en una página, ese método de trabajo no funcionará bien y lo ralentizará.

Drew: Sí. Creo que eso es justo. Tiendo a encontrar opciones tecnológicas, lo más importante es saber. Solo para saber cuáles son las ventajas y desventajas y cuáles son las limitaciones. Ninguno de ellos es bueno o malo. Solo necesita encontrar un equilibrio apropiado para su propia situación.

Drew: Como es de esperar con un sistema de diseño de este tipo, viene con componentes para tipografía. Para el diseño. Luego, al meollo de los botones y elementos de formulario, hay una biblioteca de iconos. Hay prácticamente todo lo que esperaría ver en la página de fregaderos de cocina de Design Systems. Tienes todo ahí. Todo me parece bastante moderno. Noté que el componente de la cuadrícula de diseño en realidad usa la cuadrícula CSS, lo que siempre es agradable de ver. No es solo da una caja flexible.

Mike: Ah, sí. Totalmente.

Drew: ¿Es generalmente muy flexible trabajar con él? ¿Considera que los elementos de diseño son capaces de crear cualquier tipo de interfaz de usuario que necesite?

mike: si Si. Absolutamente. Lo bueno de esto es que, en algunos casos, proporcionan más de un nivel de abstracción. En el caso de la cuadrícula CSS, tienen una cuadrícula simple que dice, está bien. Quiere colocarlo y aquí está su cuadrícula. Simplemente pones cosas dentro y especificas, creo que el número de columnas o algo así. Entonces tienes una cuadrícula.

Mike: Pero si necesita tener un poco más de flexibilidad en el comportamiento de la cuadrícula, entonces tiene un componente de cuadrícula genérico, que es probablemente... El componente de cuadrícula simple probablemente envuelve al otro componente de cuadrícula. Es solo otra fachada encima de sí misma.

Mike: Ese enfoque hacia la composición de componentes, es un paradigma valioso en el mundo de React por la misma razón. Si tiene un componente que es muy versátil y tiene muchos accesorios, entonces, puede haber un conjunto de casos de uso en los que desee usar el componente de una manera bastante común. Simplemente lo envuelve con otro componente con accesorios estáticos o preespecificados para los componentes más robustos.

Mike: Usan ese enfoque muy bien en Chakra. Todavía no me he encontrado con nada que no pueda hacer con él. Estoy seguro de que está por ahí en alguna parte. O algo que es un poco más complicado de hacer. Pero, en general, aún no ha sucedido. No que yo pueda pensar al menos.

Drew: Bueno, una de las cosas que me complació mucho ver y algo que también mencionaste anteriormente, es que parece haber un enfoque bastante fuerte en la accesibilidad.

Mike: Sí.

Drew: Ciertamente en la información promocional. ¿Eso nace en el propio código? ¿Practican lo que predican? ¿Tiene realmente una buena accesibilidad integrada?

mike: eso creo Lo más cercano que he hecho para ponerlo a prueba es ejecutar Lighthouse en su contra. Constantemente proporciona puntuaciones altas en accesibilidad. Por lo general, usaré Chakra Next.js. Next.js es rendimiento justo en el cuadro. Es bastante frecuente que veas puntajes altos y todo. Acabo de twittear hoy sobre cómo la página de inicio del libro tiene tres de los cuatro puntajes de Lighthouse. Hay accesibilidad, mejores prácticas, rendimiento y un cuarto. No estoy pensando en este momento.

Mike: Todo menos el rendimiento salió cerca del 100%. La parte del rendimiento está en mí solo porque puse mucho en la página y aún no la he optimizado. Tiende a hacer eso. Los puntajes de accesibilidad en Lighthouse son excelentes cada vez que uso la interfaz de usuario de Chakra.

Drew: Eso es genial. Mencionaste que están usando la representación del lado del servidor y lo que tienes. Cosas como Next y Gatsby y lo que te tengo, no es absolutamente ningún problema, ¿verdad? ¿No hay ningún obstáculo para saber usar Chakra con eso?

Mike: Ah, no. Para nada. no lo he usado Tiendo a centrarme en Next.js. No me he conectado a Gatsby ni a ninguna de las otras herramientas de SSR. Pero siempre que el marco no tenga nada que impida que se use como tal, entonces debería estar bien.

Mike: Para React, Chakra proporciona un proveedor de API de contexto. Un proveedor de temas para que cuando... En mis aplicaciones Next.js, por ejemplo, tenga... Next.js tiene un archivo JS o TS de aplicación de subrayado que simplemente envuelve cada página de la aplicación. Simplemente conecta el proveedor de temas allí y Chakra hace el resto del trabajo y está disponible en todas partes. Ciertamente, no hay obstáculos para agregar a Next.js. Pero me imagino que a Chakra tampoco.

Drew: ¿Chakra usa TypeScript? Yo creo que sí, ¿no?

Mike: Lo apoya. Sí.

Drew: Lo apoya. Esa es una gran ventaja para las personas que ya usan TypeScript en sus proyectos. ¿Hay alguna desventaja si las personas aún no usan TypeScript?

mike: no lo creo Uso TypeScript de forma predeterminada en todos mis proyectos, al igual que Echobind. Pero cuando hago cosas a nivel personal, uso... me gusta decir una pizca de TypeScript. Typescript es extremadamente valioso para reducir errores mediante la creación de tipos estáticos. Sin embargo, hay un operador para él, donde, dependiendo de su conocimiento, TypeScript puede ser un verdadero obstáculo.

Mike: Mi umbral mínimo para... La rigurosidad de TypeScript que uso es bastante baja simplemente porque puede obtener mucho valor de TypeScript con escritura básica. Evitará muchos percances comunes. Cuando ingresa a la escritura más avanzada, si no se siente muy cómodo con eso, realmente puede ralentizarlo y frustrarlo.

Mike: Eso es solo para decir lo mismo con Chakra y TypeScript. Tiendo a usar una pequeña cantidad de TypeScript, al menos al principio hasta que realmente estoy desarrollando y estabilizando un proyecto. Pero no presenta desafíos en el uso de Chakra, ya sea con o sin TypeScript. Es genial con. Me encanta con, pero ciertamente también puedes usarlo sin él.

Drew: Sí. Encuentro con TypeScript que obtienes el 80% de los beneficios, como dices, con solo unos pocos tipos. Si se adentra demasiado en la madriguera del conejo, terminará con un script que es principalmente TypeScript. Luego un poco de JavaScript hasta el fondo.

Mike: O pasas tanto tiempo tratando de descubrir la forma correcta de escribir algo y tu cerebro explota. Así es como acabas de poner cualquiera o desconocido. Lo abrevias. Lo cual abogo por en casos como ese. Si te está tomando demasiado tiempo hacer algo, entonces hay una palanca que puedes jalar.

Drew: La documentación de Chakra parece estar muy bien presentada, pensé, con... Tiene una descripción general de cada componente. Luego, incluye notas técnicas sobre las consideraciones de diseño que se hicieron al implementar ese componente. Lo cual, como ingeniero front-end, creo que es genial. Están hablando mi idioma. Entiendo. Sé lo que está haciendo el componente ligeramente debajo del capó.

Drew: Eso es solo desde mi perspectiva, examinando la documentación sin un proyecto real en el que esté trabajando. Cuando en realidad estás trabajando en un proyecto y en lo más profundo de él, ¿solo se sostiene la documentación? ¿Es tan útil como parece?

Mike: Ah, sí. Absolutamente. Mi perspectiva es un poco diferente. No siempre necesito saber lo que sucede debajo del capó, pero siento que puedo inferir por lo general. Si estoy viendo un componente de caja, solo estoy viendo los documentos ahora mientras hablamos para refrescarnos. Si miro un componente de la caja, estoy como, “Está bien. Eso es probablemente un div por defecto. Lo veo pasar en las propiedades de gradiente, lo que sea”.

Mike: Puedo tener una idea de lo que está pasando en el barrio sin entender completamente su magia para traducir CSS. Traduce los accesorios a CSS. Pero la documentación es excelente porque es muy lineal. Es muy consistente. Enumera todo con ejemplos. Un pequeño copia y pega.

Mike: Utiliza muy buenos espacios en blanco, por lo que mirar la página no parece abrumador. Puedes encontrar lo que necesitas fácilmente. Su búsqueda también es genial. Su búsqueda es útil. El 90% de las veces, creo que eso es lo que voy a hacer allí. Puede ser entrar allí y ver si existe un componente para hacer algo. Por lo general lo hace. Y tropezar con algo más que era útil y que yo no conocía. O simplemente refrescarme en algunos de los principios. Siempre puedo encontrar lo que necesito aquí.

Drew: Lo único que no me gustó de los documentos después de echar un vistazo fue la cantidad de anuncios que contenía. En cada página de su oferta comercial de Chakra UI Pro.

Mike: No los había visto. Interesante. Lo he visto. Definitivamente lo he visto. Pero no lo estoy viendo ahora. Oh sí. Bueno. Está Chakra UI Pro. Supongo que lo filtré mentalmente. Te escucho. Al menos no es demasiado grande y en tu cara.

Drew: No es demasiado grande. Simplemente está en el lugar equivocado. Es justo donde estás buscando la información. Supongo que por eso lo han hecho. Eso vale la pena mencionarlo al considerar el ecosistema y todo lo relacionado con el proyecto, hay un conjunto profesional de componentes que es... Supongo que es equivalente a algunas de las cosas que están en la interfaz de usuario de Tailwind que está allí. Páginas de marketing y aquí hay componentes y más de estas secciones compuestas de páginas y páginas enteras y diseños y cosas. That you, está disponible a través de los creadores de Chakra, pero como una oferta comercial.

mike: si Solo echando un vistazo rápido ahora. Algunos de estos están realmente disponibles. O versiones de ellos están disponibles de forma gratuita como plantillas de Chakra. Las plantillas de Chakra, supongo, son la solución de código abierto para Chakra Pro o el competidor de código abierto. Estoy seguro de que obtendrá una tonelada pagando por esto. Parece que Chakra Pro es extremadamente robusto y tiene un precio razonable si tiene una necesidad profesional de pago para estos. Parece que hay un par de opciones para su proyecto.

Drew: Sí. Parece que hay un gran ecosistema construido a su alrededor. ¿Sabes cuánto tiempo lleva el proyecto y qué seguimiento hay? ¿Es de uso generalizado en la comunidad React?

Mike: Quiero decir que sí. no sé en qué grado. Tendría curiosidad por ver cuál es, supongo, la cuota de mercado de Tailwind frente a Chakra en la actualidad. Sé que Chakra recibió un premio hace relativamente poco tiempo. Premio GitNation React al proyecto más impactante para la comunidad. Yo diría que es bastante grande y bastante bien aceptado. Con buena razón, lo cual es genial. La gente definitivamente lo está disfrutando. No soy el unico.

Drew: Una cosa en la que siempre vale la pena pensar al incorporar una dependencia a su proyecto es lo que sucede cuando necesita actualizar esa dependencia.

mike: si

Drew: Chakra se está mejorando todo el tiempo, me imagino. ¿Es un caso de que una vez que lo haya importado y construido con él, lo deje bloqueado en una determinada versión? ¿O generalmente es seguro mantenerse actualizado? ¿Es relativamente estable en términos de diseño y las cosas de su sitio no cambian a medida que se actualiza Chakra?

Mike: Lo ha sido hasta ahora. Si. Principalmente, diría que se debe al progreso del desarrollo. Están en la versión 1.6.3 en este momento. Hace unos meses, pasaron de cero a uno. Esa fue la única vez que tuvieron cambios de última hora. Desde entonces, han estado constantemente lanzando funciones y corrigiendo errores.

Mike: Durante los últimos al menos un par de meses, todo ha sido solo adiciones. Adiciones y arreglos. No hay cambios importantes involucrados. No sé cómo es la hoja de ruta, pero me imagino que seguirá siendo así. Cada vez que lo he actualizado, una de estas versiones menores, ha estado bien. Nunca he visto que se rompa algo. Pero cuando salieron con 1.0, hubo algunos cambios importantes. Aunque no recuerdo que haya sido catastrófico.

Drew: ¿Sabes cuál es la situación con los tamaños de los paquetes y la capacidad de sacudir el árbol de Chakra? ¿Agrega mucho peso a su proyecto o las cosas solo se importan a medida que las usa?

Mike: Sinceramente, no recuerdo nada. Probablemente debería saber eso. No he notado que agregue mucho peso. Principalmente porque está importando los componentes individualmente. No importar todo Chakra ni nada por el estilo. Diría que está en línea con soporte para sacudir árboles, pero no lo he puesto a prueba. Sin embargo, hasta ahora, no he tenido cosas que tuvieran un peso enorme viniendo específicamente de eso.

Drew: Sí. Esa es siempre una consideración importante, ¿no?

Mike: Sí.

Drew: ¿Hay algo más que debamos saber sobre la interfaz de usuario de Chakra antes de sumergirnos y usarla en un proyecto?

Mike: No. Es genial. También hay una comunidad bastante activa. Veo actualizaciones a menudo. Estoy mirando la documentación ahora y veo componentes que no había visto antes. Veo que se están agregando muchas funciones. Eso es genial.

Drew: Sí. eso es genial Tienes un libro llamado Cut Into The Jamstack, que es un lanzamiento preliminar. Una versión beta en este momento. Estás autopublicando eso. ¿Está bien?

mike: si Si. Soy. Fue mi primer intento de un libro técnico. Solo quiero sacarlo a la luz sin comprometerme con algo como, es formal, supongo. También soy alguien a quien le gusta la informalidad, sobre todo a la hora de crear cosas. Me da la capacidad de hacerlo a mi manera haciéndolo así.

Drew: El libro guía literalmente al lector a través de la creación de una aplicación de software como servicio.

Mike: Sí.

Drew: Todo en el Jamstack. ¿Por qué decidió escribir esto ahora y adoptar este enfoque con el libro?

Mike: Buena pregunta. He estado programando durante unos 20 años y creo que intenté escribir un libro hace un tiempo y simplemente no tomó forma. Estoy en un punto de mi carrera en el que realmente quiero compartir más conocimientos. Lo he estado usando durante tantos años y siento la necesidad de realmente sacar más y ayudar a otros.

Mike: Alrededor de octubre del año pasado, tenía esto... Quería publicar algo que fuera un producto. Un libro electrónico se sintió como una muy buena manera de comenzar. Me apasiona Next.js y las cosas que puedes hacer con él. Utilizo el término Jamstack y considero Next.js como parte de Jamstack porque tiene una generación de sitios estáticos por defecto.

Mike: Pero creo que es una cosa de la que no se habla lo suficiente, en mi opinión, o que podría necesitar más explicación es la creación de aplicaciones de software como servicio con él. Porque Jamstack no es solo para sitios web. Funciona muy bien para sitios web impulsados ​​por contenido debido a que es estático, ágil y compatible con SEO.

Mike: Pero hay tanta funcionalidad rica allí, especialmente en Next.js, donde Vercel tuvo su conferencia Next.js ayer y están lanzando más y más funciones increíbles allí. Me apasiona construir software como servicio. Los sitios web de software son geniales, pero el software está destinado a hacer cosas.

Mike: Esta pila para mí es en gran medida el futuro del desarrollo de software como servicio. Me recuerda a lo que era Ruby on Rails cuando salió. Fue una evolución, en cuestión de hablar. Automatizó y simplificó muchas cosas que antes tenía que hacer manualmente. Aceleró el ritmo de desarrollo y aumentó la calidad del mismo.

Mike: Next.js y Jamstack y Vercel y Chakra UI, todos están produciendo cosas que simplifican muchas cosas para ti. Next.js, simplifica muchos problemas relacionados con la velocidad y problemas relacionados con la accesibilidad. Instalación. Eso es todo, el enrutamiento se hace por usted. No tiene que preocuparse por el enrutamiento del lado del cliente o del lado del servicio. es automatico Chakra UI hace eso con accesibilidad y tematización. Estas herramientas juntas, simplemente… La experiencia del desarrollador se vuelve realmente genial y todo simplemente… Te da libertad para crear software de verdad.

Mike: Para responder a tu pregunta. La razón por la que lancé un libro ahora es por el momento adecuado en el que realmente quería publicar algo y con el ecosistema Jamstack comenzando a dar frutos y creciendo. También me dio la oportunidad de escribir más código en Jamstack, lo cual me encanta.

Drew: Creo que, como dices, es fácil aceptar la idea de Jamstack cuando piensas en sitios web y, por lo general, en sitios web ligeros. Pero dar el siguiente paso para pensar en cómo puede usar el enfoque para crear una aplicación web completa, es mucho más difícil. Creo que es un obstáculo mayor que superar si estás acostumbrado a pensar en la mentalidad del lado del servidor.

mike: si

Drew: Es un salto mucho más grande de ver, está bien. Puedo enviar mi autenticación a un servicio-

Mike: Sí.

Drew: … y puedo… Supongo que para los lectores, desde el punto de vista del lector de su libro, solo con revisar y construir este ejemplo, seguirlo junto con usted, probablemente sea una excelente manera de superar ese obstáculo para ayudar. cambia suavemente tu mentalidad a, está bien. Así es como pude hacer todas estas cosas, pero en el Jamstack. ¿Estarías de acuerdo con eso?

mike: si Eso es lo que espero. Creo que sí. Eso es realmente lo que se pretende. Estaba firmando una charla recientemente, una charla de conferencia que... Parte de mi motivación para el tema y la forma en que decidí enseñar en este libro es que podría enseñarle un lenguaje de programación. Un marco, pero se siente mejor presentarle la pila de una manera práctica porque todos los desarrolladores que tienen mucha experiencia son buenos para buscar documentación, buscar en Google y usar el desbordamiento de pila. ¿Por qué perdería tu tiempo enseñándote eso?

Mike: Quiero darte una inmersión rápida y profunda en la pila y lo que puedo hacer con ella. Vas a recoger lo bueno de cada una de las piezas individuales. SiguienteOFF y Prisma. Next.js y Chakra. Lo vincularé a la documentación solo para ahorrarle un par de clics. Pero vas a ver a través de un ejemplo interactivo, cómo estas piezas se conectan entre sí. También obtendrá una comprensión de las partes difíciles.

Mike: Una cosa en la que voy a profundizar, por ejemplo, es esta función que estoy creando para la carga asíncrona de varios archivos. Next.js tiene un front-end y un back-end. Aunque en la parte frontal del front-end y en la parte posterior del front-end, si usa esa analogía, tiene la capa React. Entonces tienes la capa de nodo. Hay estas rutas API.

Mike: Si desea cargar varios archivos con eso y usar un servicio, uso Cloudinary en el libro. Pero si usa un servicio API para su imagen y carga de medios, lo cual debería hacer, hay muchas piezas en movimiento allí. Está el lado del cliente, con el que interactúa el usuario. Están las solicitudes de API a Cloudinary o al otro proveedor. Pero luego debe realizar varias solicitudes de API para que sea eficiente. Debe realizar algunas firmas en Cloudinary, para lo cual necesita una llamada API.

Mike: Debe tomar ese signo y debe hacer la carga, que va desde el navegador y elude su API y va directamente a Cloudinary. Luego, debe guardar eso en su base de datos, que usa su interfaz de usuario. Hay muchas piezas y Next.js… En la comunidad de Next.js, todavía no hay un complemento de código abierto para eso. Que puedo extraer de la aplicación ahora que la he creado y la he puesto en una porque otras personas van a tener esto.

Mike: Anyway, all that's just to say that, I think that's something really valuable to teach to people. Even if you're a senior engineer, for a few dollars, you get all this wrapped up for you with a bow on it to be like, okay. This is a series of tools that worked really well together for building SaaS apps with a stack. This hurdle, I don't have to figure out a solution for writing custom. Here's an approach that works.

Mike: I just, I take a lot of joy in trying to prevent people from having to reinvent the wheel. Even though it's fun to reinvent the wheel, if you wanted to just ship something, the more you can reduce that, the better,

Drew: That sounds very, very helpful. The book is in beta now. If people buy it now, do they get updates as it improves?

Mike: Yep. Si. It's immensely discounted. It's $10 now. When I finish, it will be 30. Whoever gets it now, will just get updates for the life of the book.

Drew: Fantástico.

Mike: I've got another one coming up in probably a couple of weeks. Si. Si. It's already 107 pages and it's got a source-code repo that will be shipped with it. That comes along with it now. It's already like you can do… In the first 107 pages, it goes through setup to build a new first full stack page to building a CRUD for photo galleries. Create, Read, Update, Delete. So the front end and backend components. Then shipping a deployment to railway and Vercel. It's pretty practical right away. Then the further, other couple of 100 pages are going to be more in depth with the coding topics.

Drew: Great. That's available now at cutintothejamstack.com.

Mike: Yep. Eso es todo.

Drew: I've been learning all about Chakra UI. What have you been learning about lately, Mike?

Mike: I've been digging deeper on the stack. It constantly teaches me new things. One example is just with the Vercel Conference yesterday. The Next.js Conf. Next.js 11 is now out and it's just got a ton of great things with it. There's a real-time collaboration tool built in so when you ship a preview deploy, you can have people commenting on it and moving their mouse around the screen, even it looks like.

Mike: In addition, their performance is getting better and better. Next.js' image component, which I use heavily now is going to have automatic placeholders. It's going to be even more streamlined. I'm constantly learning the better and better ways to do things in this stack. There are always more. It seems like.

Drew: Always. Always more to learn. If you dear listener would like to hear more from Mike, you can follow him on Twitter where he's @mcavaliere, and his personal website is mikecavaliere.com. The book Cuts Into The Jamstack, which amongst other things shows a practical implementation of Chakra UI, is again at cutintothejamstack.com. Thanks for joining us today. Mike. ¿Tuviste alguna palabra de despedida?

Mike: Nope. Thanks so much for having me, Drew, and keep smashing out there. Maybe I should rephrase that.