¿Cómo se implementa el cliente web de Quip?

El cliente web de Quip tiene un diseño bastante novedoso. No utilizamos ningún marco en nuestro código JavaScript, que no sea Protobufs de Closure. En cambio, escribimos un conjunto liviano de bibliotecas JavaScript en casa, que manejan las utilidades básicas que todos esperan, como manipulación DOM, selectores CSS y una interfaz de selección jQuery como $ (…).

La representación HTML de nuestra aplicación se realiza en el servidor, utilizando un marco de plantillas Python simple. Luego enviamos una página completamente renderizada al cliente. Cuando un usuario realiza una acción, como agregar a alguien a un documento o enviar un mensaje, incluimos un fragmento HTML representado en la respuesta POST de AJAX, junto con instrucciones de dónde colocar la actualización en el documento. También enviamos estos fragmentos HTML actualizados en la conexión WebSocket. De esta manera, podemos actualizar la visión del mundo del cliente web sin tener que volver a implementar plantillas en el cliente, o volver a renderizar toda la página, solo enviamos exactamente el segmento que el cliente necesita para actualizar su pantalla.

Para nuestro editor de documentos, utilizamos ProtocolBuffers en JavaScript para enviar datos hacia y desde el servidor. El uso de PB en lugar de JSON nos ayuda a reducir el tamaño de las respuestas, pero lo más importante es que garantiza que todos nuestros datos estén correctamente escritos y bien estructurados, ya sea que los usemos en el servidor, iOS, Android o la Web.

En cuanto a las herramientas, utilizamos el Compilador de cierre de Google junto con anotaciones de tipo en todo nuestro código JavaScript. (Como no usamos frameworks, casi todo nuestro código está escrito). Usamos LESS para organizar y compilar nuestro CSS.