In-App Messaging with React Primitives

Hola a todos. Soy Chris. Hoy estoy hablando sobre la construcción de primitivas de React para potenciar la mensajería en la aplicación. Soy el CTO de Nock.

Solo una breve introducción sobre qué es Nock en caso de que no hayas visto nuestros videos afuera. Ayudamos a los equipos de producto a potenciar experiencias de notificación multicanal centradas en el usuario. Piensa en cosas como enviar correos electrónicos, push, SMS, Slack, todas esas cosas buenas. Pero también potenciamos experiencias en la aplicación para cosas como feeds de notificaciones. Estoy seguro de que muchos de ustedes en esta sala y más allá han usado Vercel. Un dato curioso sobre Nock es que potenciamos todas las aplicaciones y correos electrónicos de Vercel. Así que si alguna vez has fallado una construcción en Vercel, esas notificaciones llegan a través de Nock. Este es un muy buen ejemplo del tipo de experiencia en la aplicación que puedes construir actualmente con la plataforma Nock, que básicamente potencia todo el backend, el servicio en tiempo real, y luego te damos una biblioteca de React y un montón de hooks para que puedas construir tu propia interfaz de usuario sobre ella.

Pero hoy, lo que quiero hablar contigo es sobre cómo hemos estado extendiendo las capacidades de nuestra mensajería en la aplicación mucho más allá de simplemente hacer esos tipos de feeds de notificaciones. Así que lo que estamos haciendo hoy es realmente traer la capacidad para que puedas potenciar cualquier tipo de mensajería en la aplicación, ya sea, sabes, tal vez sea un modal o un banner o como un toast que aparece a tus usuarios. Y todo eso está mapeado a componentes que posees y que introduces en tu base de código. Y Nock potencia la capa de datos cuando hacemos eso, y realmente obtienes el beneficio de nuestra infraestructura en tiempo real en la aplicación que actualmente maneja millones de usuarios a través de miles de millones de solicitudes de API. Así que mucha escala.

Pero de lo que quiero hablar hoy es un poco sobre cómo realmente abordamos las actualizaciones del SDK para introducir estos cambios. Así que realmente nos propusimos algunos principios de diseño sobre cómo introducir esto. Así que realmente queríamos asegurarnos de que estamos optimizando para la flexibilidad en torno a los casos de uso. Así que pensando en los clientes que están usando estos componentes preconstruidos listos para usar, pero también personas que vienen y construyen componentes personalizados sobre lo que estamos proporcionando, hasta Shocker para esta sala, personas que están usando otros marcos de Vue que no son React. Y tal vez necesiten vincularse y hacer algo dentro de Vue o Svelte o algo más así.

Y también queríamos asegurarnos de que todo sea súper personalizable. Así que si estás usando nuestros componentes listos para usar tal como vienen, puedes sobrescribir todo el estilo y traer tu propio tipo de sistema de diseño y conjunto de estilos a ello. Y luego, por último, queríamos este tipo de curva de aprendizaje baja, para hacerlo realmente fácil para las personas comenzar con los componentes que proporcionamos. Así que es la mínima cantidad de cambios dentro de tu base de código para comenzar a funcionar con estos componentes preconstruidos listos para usar.

Así que aquí hay un poco sobre cómo abordamos nuestro diseño. Así que esta diapositiva no es una pila, pero si te imaginas un poco más como una pila, esto tiene más sentido. En la parte inferior, tenemos nuestro SDK de bajo nivel, que es nuestro SDK de cliente. Ese es un envoltorio de bajo nivel que realmente expone clases de JavaScript simples y luego gestiona toda la lógica de negocio asociada con la mensajería en la aplicación. ¿Cuándo debería mostrarse ese mensaje? ¿A quién debería mostrarse? Marcarlo como leído, cosas así. Eso está respaldado por una tienda que realmente usamos TANstack Store para, lo cual es fantástico porque nos da esta capacidad de plataforma cruzada de Vue para vincularnos a estas actualizaciones de estado. Realmente, realmente genial.

Luego, a continuación, realmente exponemos un conjunto de hooks que hacen uso de ese cliente de bajo nivel. Eso es lo que nuestras bibliotecas de React pueden consumir. Esos hooks hacen que todo sea agradablemente reactificado, lo que facilita mucho la vinculación a esa tienda de estado para que puedas recibir estas actualizaciones. Luego, finalmente, en la parte superior de la pila hay un conjunto de componentes listos para usar que proporcionamos. Esos están construidos sobre Radex UI, las primitivas que proporciona. Asegúrate de que tengamos un buen conjunto de componentes accesibles desde el principio. Luego, también entregamos estos tipos de componentes inteligentes y tontos. El componente inteligente se vincula a nuestros hooks, proporciona toda la funcionalidad. Estos componentes tontos son más de la capa de vista donde las personas pueden entrar y tal vez quieras usar nuestro modal, pero quieres sobrescribir la forma en que funciona el botón o algún otro aspecto del modal, y puedes hacerlo. Luego, todo dentro de aquí, puedes realmente actualizar las variables CSS o las clases pueden ser sobrescritas. Es realmente fácil adaptarlo a cualquier estilo que tengas dentro de tu producto.

Genial. Aquí hay un pequeño vistazo a cómo se ven nuestros componentes preconstruidos de React. Proporcionamos un banner, un modal, una tarjeta, este feed de notificaciones también.

Todo esto viene listo para usar. Todo es compatible con el modo claro y oscuro también. Este es un muy buen ejemplo de, ya sabes, solo quieres comenzar realmente fácil. Quieres mostrar a tus usuarios un modal cuando algo sucede, o tal vez tienes un nuevo anuncio de producto que quieres mostrar a un subconjunto de tus usuarios, algo más así.

Así es como se ve esto en el código real que podemos producir. Lo que puedes ver aquí es que tenemos un par de proveedores que estamos inyectando en nuestra aplicación. Luego, estamos agregando nuestro componente de banner. Todo eso simplemente funciona ahora mismo. Entonces, cuando el usuario recibe un banner como mensaje, un banner simplemente se mostrará en su aplicación sin código adicional para que escriban. Así que, realmente fácil, y de nuevo, todo esto está en tu base de código.

Si contrastas eso con las herramientas que ya existen, la mayoría de esas herramientas están enviando HTML a través del cable que ha sido inyectado en tu capa de vista. Con este enfoque, realmente estás poseyendo los componentes que se renderizan para asegurarte de que tu equipo pueda pensar en el rendimiento y las optimizaciones y cosas así. Y luego, si quieres construir un componente personalizado, así que, piensa en algo que no ofrecemos listo para usar, o algo más a medida para las necesidades de tu producto, este es un tipo de ejemplo del conjunto mínimo de código que necesitas para hacerlo.

Aquí, puedes ver que estamos usando nuestro hook. El hook básicamente se asegura de que estamos obteniendo todos los datos, manejando actualizaciones en tiempo real, todo de esa naturaleza. Y luego, lo que incluso podemos hacer aquí es realmente escribir el contenido del mensaje también. Y en el lado de Noc, proporcionamos un esquema que puede cambiar con el tiempo para que tu equipo pueda asegurarse de que hay una fuerte garantía entre este componente y los datos que realmente vienen del servidor también. Genial. Así que, esa es una visión realmente breve de lo que estamos haciendo con la mensajería en la aplicación. Muchas gracias. Puedes ver más en noc.app, o estamos en el stand si quieres hablar sobre más que solo mensajería en la aplicación y notificaciones en general también. Genial. Gracias.