Soluciones

Empresa

Cal.ai

Desarrollador

Recursos

Precios

Cómo Cal.com lanzó una aplicación iOS/Android utilizando Expo y Chrome/Firefox usando WXT en una sola base de código

Cómo Cal.com lanzó una aplicación iOS/Android utilizando Expo y Chrome/Firefox usando WXT en una sola base de código

Cómo Cal.com lanzó una aplicación iOS/Android utilizando Expo y Chrome/Firefox usando WXT en una sola base de código

Aprende cómo Peer y el equipo enviaron una aplicación nativa en menos de 3 semanas.

Una base de código. Cinco plataformas. Dos tiendas de aplicaciones. Cuatro navegadores.

Enviado en menos de tres semanas.

Cal.com siempre ha tratado de encontrar a las personas donde ya están.

Para la programación, eso significa en todas partes: en tu teléfono, en tu navegador, en la pestaña que nunca cierras, en la laptop que usas para trabajar, y en el dispositivo que coges cuando sales corriendo por la puerta.

Muchos de ustedes lo han pedido y finalmente decidimos intentarlo. Esta semana anunciamos:

  • Una aplicación nativa para iOS

  • Una aplicación nativa para Android

  • Una extensión de Chrome

  • Una extensión de Firefox

  • Una extensión de Safari

  • Una extensión de Edge

Y no hicimos esto durante meses o trimestres.

Enviamos todo esto en menos de tres semanas desde la idea hasta la producción.

Todo sin dividir el producto en docenas de repositorios que lentamente se separan con el tiempo.

Lo hicimos con una sola base de código.

La idea principal: enviar Cal.com en todas partes sin enviarlo cinco veces

Históricamente, “aplicación móvil” y “extensión del navegador” viven en universos diferentes.

  • Lo móvil quiere React Native, herramientas de construcción nativas, flujos de trabajo de tiendas de aplicaciones, notificaciones push, enlaces profundos, etc.

  • Las extensiones quieren scripts de contenido, trabajadores de fondo/servicio, permisos, API de almacenamiento, particularidades del navegador, y el interminable juego de “funciona en Chrome pero…”

El enfoque habitual es aceptar la división:

  • equipos separados

  • pilas separadas

  • procesos de lanzamiento separados

  • errores separados

  • inconsistencias de UI separadas

Eso no parecía ser el modo de Cal.com.

Queríamos que Cal se sintiera como el mismo producto en todas partes. Mismo UI. Mismo modelo mental. Misma velocidad de iteración.

Así que lo construimos de esa manera.

iOS + Android: impulsados por el último Expo y React Native

Nuestras aplicaciones de iOS y Android están impulsadas por el último Expo (expo.dev) y React Native (RN).

Expo ha llegado a un punto donde obtienes lo mejor de ambos mundos:

  • excelente experiencia de desarrollador

  • seria preparación para producción

  • flexibilidad cuando necesitas ir a nativo

Lo más importante, Expo se ajusta a una tesis más grande que nos importa profundamente:

La web y lo nativo no deberían sentirse como productos separados.

Deberían sentirse como diferentes superficies del mismo sistema.

Extensiones: impulsadas por WXT

Para extensiones del navegador, construimos sobre wxt.dev.

Las extensiones aún son una de esas áreas donde las herramientas pueden sentirse extrañamente estancadas en el pasado. WXT hace que se sientan modernas:

  • estructura limpia

  • ajustes predeterminados razonables

  • construcciones confiables para múltiples navegadores

Y sí, construimos para Chrome, Firefox, Safari, y Edge.

Safari solo suele ser suficiente para asustar a los equipos de admitir soporte para múltiples navegadores. Pero el objetivo nunca fue “Chrome ahora, otros después.”

El objetivo era Cal en todas partes.

La parte divertida: UI de la extensión de Chrome impulsada por Expo Web

Aquí está la parte que todavía se siente un poco surrealista:

Nuestra UI de la extensión de Chrome está impulsada por Expo Web.

Eso significa que la interfaz de usuario de la extensión no es un frontend separado con su propio sistema de componentes y desviación de estilo. Está construida utilizando el mismo enfoque de UI que ya usamos para móviles corriendo en la web dentro de la superficie de la extensión.

Así que cuando digo una base de código, lo digo de una manera que realmente importa:

  • pantallas compartidas

  • componentes compartidos

  • primitivos de diseño compartidos

  • lógica compartida

  • velocidad compartida

La propia aplicación de WXT se ejecuta dentro de /extension/entrypoints/content.ts que luego carga la aplicación expo-web como un iframe. Este es el enfoque más común para construir extensiones de Chrome tipo "barra lateral" y aprendí este truco de Wilson Wilson (@euboid). Lamentablemente, el "popup" oficial de la extensión de Chrome tiene una altura máxima de 600px.

Incluso hemos añadido algunas API solo para navegadores como inyectar nuestro widget de Cal.com en mail.google.com y calendar.google.com, lo cual puede hacerse fácilmente en la carpeta /extensions de WXT.

Según mi experiencia, esta combinación: iOS + Android nativos a través de Expo, extensiones para múltiples navegadores a través de WXT, UI de la extensión a través de Expo Web, todo unido en una base de código coherente es algo que personalmente no he visto hacer como esto antes.

Tal vez exista en algún lugar. Internet es grande.

Pero no lo he visto, y definitivamente no había un libro de instrucciones que pudiéramos seguir.

Así que hicimos el nuestro.

Menos de 3 semanas... porque la base era la correcta

Enviar esto rápido no fue cuestión de heroísmos o prisas.

Se trató de tener la base adecuada.

Todo depende de la última y mayor API v2 de Cal.com, que utiliza OAuth para la autorización. Eso significaba:

  • flujos de autenticación limpios

  • acceso seguro

  • un modelo consistente a través de aplicaciones y extensiones

  • sin trucos, sin atajos

La misma API potencia móvil, web y extensiones. Sin “endpoints solo para extensiones”. Sin “excepciones para móviles”.

Solo una API, diseñada para escalar con el ecosistema.

👉 Si estás construyendo aplicaciones o integraciones sobre Cal.com, este es tu punto de partida:
https://cal.com/help/apps-and-integrations/oauth

Esa base de OAuth es lo que hace realista enviar nuevas aplicaciones de programación tan rápidamente sin comprometer la seguridad o la cordura del desarrollador.

Por qué esto importa (más allá de “mira lo que construimos”)

Enviar a muchas plataformas solo es impresionante si se mantiene mantenible.

La verdadera victoria no es la lista de plataformas. La verdadera victoria es:

  • Consistencia: las funciones llegan a todas partes, no “móvil primero, extensión después”

  • Velocidad: un lugar para construir, un lugar para arreglar

  • Calidad: menos divergencias específicas de plataformas

  • Momentum: el equipo construye producto en lugar de código adhesivo

Las extensiones nos permiten vivir directamente dentro de los flujos de trabajo. Lo móvil nos permite vivir en el mundo real. Juntos, esa área de superficie se convierte en una ventaja de producto.

Créditos donde se deben

Esto no ocurrió por una persona. Pero dos personas fueron multiplicadores masivos:

  • Wilson Wilson (@euboid), una cantidad enorme del soporte para extensiones de navegador, casos límites entre navegadores, y “este es el truco que realmente funciona” vino de Wilson.

  • Beto (@betomoedano), toneladas de la experiencia en Expo y ayuda práctica que convierte “esto debería funcionar” en “se ve bien, se siente bien” vino de Beto.

  • y el equipo trabajador en Cal, a saber: yo mismo, Dhairyashil Shinde, Carina Wollendorfer y

    Volnei Munhoz y Claude Code.

Gracias a todos. En serio.

¿Qué sigue?

Dato curioso: nuestras aplicaciones aún no se han lanzado, lo cual es bastante hilarante. El proceso de inscripción en la App Store está tomando más tiempo que el propio desarrollo de la aplicación. Por alguna razón todavía hay problemas de KYC con nuestra empresa (nos renombramos hace unos años, desajuste del número D-U-N-S, empleado no estadounidense controlando una empresa estadounidense, bla bla bla.)

A veces desearía que el desarrollo de aplicaciones móviles pudiera experimentar el mismo ritmo al que estamos acostumbrados en la web, pero eso es muy poco probable.

De todos modos, por favor regístrate en nuestra lista de espera en cal.com/app y sé notificado una vez que las aplicaciones de producción se publiquen en las tiendas. Según el equipo de Inscripción, son solo unos pocos días más, pero se acercan las fiestas, así que nunca se sabe.

La base de código todavía está bastante desordenada con componentes grandes, pero los estamos limpiando ahora.

Al final, la parte más emocionante es llegar a “Cal.com en todas partes” con tan poco esfuerzo de ingeniería para mantener.

Es que ahora tenemos una base donde enviar lo siguiente se siente como debería:

  • constrúyelo una vez

  • envíalo a todas partes

  • itera rápido

Esa es la meta.

Y es una meta bastante divertida de alcanzar.


¡Comienza con Cal.com gratis hoy!

Experimenta una programación y productividad sin problemas, sin tarifas ocultas. ¡Regístrate en segundos y comienza a simplificar tu programación hoy, sin necesidad de tarjeta de crédito!