Su API primitiva permite la programación para Internet, y su cliente es una obra maestra de la restricción. Cómo funciona Google Calendar y qué podemos aprender de él como ingenieros. Arquitectura Sólo unas pocas bibliotecas internas para cosas como la autenticación y las utilidades compartidas. Frontend framework Nombres de clase CSS, invocados por JS. Frontend Styling : Almacenamiento en caché, IndexedDB (modo offline), CDN (imágenes y fuentes). Frontend Storage Especificaciones de Spanner DB. API Storage Google Meet, Google Contacto y Google Auth. External APIs : latido del corazón, eventing, notificaciones. Services Un compilador interno que hace que JS se descargue y se ejecute más rápido. Other Problemas interesantes Por supuesto, un calendario es una gran aplicación CRUD, pero no dejes que te engañe: había muchos problemas técnicos exigentes que tenían que ser resueltos. Calendario de fuego REST+JSON desde 2011 (originalmente REST+RSS-style feed) El modelo de datos se apoya fuertemente en las cadenas de recurrencia de RFC 5545 iCalendar (Microsoft y Apple usan objetos propietarios) Los clientes pueden ver / suscribirse para recibir una notificación de webhook cuando los eventos cambien Soporta sincronizaciones incrementales para la velocidad... pero también requiere que trate de expiraciones y re-sincronizaciones por su cuenta Utiliza las cuotas y los límites de tasa para reducir los problemas de rendimiento Poderosos pero primitivos: te darán lo suficiente para hacer lo que necesites, pero no lo descubrirán para ti. Desarrollo HTML Sí, estructurar HTML puede ser realmente interesante! Dado que las vistas de calendario son ricas en contenido, Si los elementos no están aislados. Se producen grandes problemas de rendimiento Aquí están las capas HTML más importantes: La red: línea de todos los días, columnas del día, eventos programados, contenedor El evento de vista previa, que no se puede bloquear en una fila/columna La capa de arrastre. Esto le permite enviar tareas DND a la red Formularios: flotando junto a eventos en la red y expandido en un diálogo de pantalla completa Toasts: para mensajes de confirmación Los algoritmos frontales Cada cliente de calendario tiene algunos algoritmos jugosos : the length, height, and coordinates (X, Y) of each event div. To compute this, you need to account for the event duration and view scale. Event position : The width and Y coordinates, which need to be adjusted based on the surrounding events. All-day event lengths : how to adjust events when they share times. Gcal’s implementation is more sophisticated compared to Outlook’s (which halves each event). Pseudo-code below. Overlapping events // overlapping events logic if start or end of targetEvent overlaps with any(events): if start and end of targetEvent = start and end of any(events): orderEventsAlphabeticallyByTitle() if start of targetEvent = start of any(events) and end != end of any(events): orderByDuration() //longest events go behind shorter events if start or end of targetEvent != start or end of any(events): if targetEvent overlaps multiple events: targetEventGoesInFrontOfEvents() else: orderEventsByStart() //events that start earlier go behind este para la implementación completa de estos algoritmos. El compás repo Servicios Estos son los caballos de trabajo externos que permiten que el código del cliente permanezca simple y fiable Servicio Heartbeat - Permite que GCal sea confiable y regrese al modo offline graciosamente Servicio de eventos — eventos de estilo pub/sub que alimentan los webhooks para clientes. Esto permite que otras aplicaciones se basen en la API de GCal. Servicio de notificaciones: coordina el timing de las notificaciones previas al evento.El cliente podría hacer esto solo en teoría, pero sería menos fiable. [ Takeaways Construir una aplicación CRUD a escala global podría parecer sencillo desde el diagrama de arquitectura, pero esa simplicidad todavía requiere un alto nivel de ejecución. Fiabilidad de la API: Dado que muchas aplicaciones dependen de la sincronización bidireccional con el GCal de un usuario, la API debe ser simple, extensible y fiable. Seguridad de datos: Los datos del calendario son extremadamente sensibles y dependen en gran medida de roles basados en el alcance para garantizar que solo las personas/aplicaciones que autorice puedan acceder a sus datos. Servicios de monitoreo: los controles de salud, el registro y la sincronización ocurren sin cesar detrás de los escenarios. Dadas las exigencias de la escala, puedes hacer la vida más fácil para ti mismo simplemente . not doing things No hacer las cosas Usted no necesita usar la pila de tendencias. Imagina si dejaron todo para reescribir su aplicación en Angular. Luego reaccionar. Luego Svelete. Luego NextJS. Luego HTMX. Todos ellos vinieron después de que Google Calendar se envió. GCal escogió JS, se retiró a la línea derecha, y ha estado costando a 64MPH durante décadas. Nadie se importa. No es necesario publicar en todas las plataformas. póngase la aplicación de escritorio de Google Calendar ahora mismo. No tienes que seguir las tendencias del estilo. Bootstrap. Bulma. componentes estilizados. Tailwind. nombres de clases CSS. No necesita tener el mejor UX. Modo oscuro. Formularios que conservan espacio. #FFFFFF modo de luz. Formularios de página completa. No es necesario tener el mejor rendimiento. Su puntuación de lujo en el rendimiento es 31/100. Al igual que en la vida, vale la pena conocerte a ti mismo cuando envías un producto. Google Calendar no está tratando de ser la aplicación moderna que los asistentes ejecutivos usan para programar 40 reuniones al día (Eso es lo que Vimcal es para). Google Calendar tiene como objetivo ser una aplicación sencilla que cualquiera de sus 2 mil millones de usuarios pueda operar sin manejar. Tiene una puntuación de 88/100 en accesibilidad. La interfaz de usuario no cambia. No desciende, y tiene soporte offline si lo hace. Simplemente funciona Eso es abundancia. Para obtener estos profundos buceos en su buzón de entrada, suscríbete a mi newsletter, . Ingeniero completo
