¿Cuál es la pila de tecnología detrás del cliente web de Spotify?

TL; DR: muchas tecnologías JavaScript y HTML5, con una pizca de PHP y Flash.

Tenemos una capa PHP que se ocupa del inicio de sesión (y alguna otra lógica del lado del servidor), así como de servir aplicaciones en diferentes dominios (por razones de seguridad). El resto es todo JavaScript.

Para que JavaScript se comunique con el back-end, lo hace a través de lo que llamamos un “punto de acceso” (AP), un servicio C ++ altamente optimizado que puede manejar muchas conexiones activas a la vez. Este servicio es responsable de enrutar las solicitudes al servicio de fondo correcto. Este servicio es capaz de ejecutarse sobre los puertos 80 y 443 para superar las restricciones de firewall. La comunicación se realiza a través de WebSocket (o Flash para algunos navegadores).

Para comunicarnos con servicios de backend específicos, enrutamos las solicitudes a través del AP utilizando nuestro propio transporte llamado “Hermes”. Esto es básicamente un esquema de URL que le permite al AP saber dónde enviar la solicitud. Las cargas útiles están codificadas como Protobuf. Hermes tiene un buen sistema de almacenamiento en caché (lo llamamos “Mercury”) que almacena los resultados en IndexedDB para los navegadores que lo admiten (tenemos el mismo sistema en el cliente de escritorio, pero implementado en C ++), para evitar solicitar los mismos datos dos veces. Esto es muy útil para recursos que se vuelven a solicitar mucho, como artistas, álbumes y pistas.

Para la interfaz de usuario, hemos escrito un marco de aplicación bastante avanzado (llamado “Stitch”) para permitir que cada vista sea desarrollada independientemente por diferentes equipos sin tener que preocuparse por romper nada. Las vistas se ejecutan en un de espacio aislado, pero aún pueden depender de bibliotecas compartidas para cosas comunes como cargar metadatos de pistas, etc. A partir de este escrito, tenemos ~ 35 vistas únicas (o aplicaciones) en el reproductor web.

Las vistas obtienen datos y realizan acciones a través de lo que llamamos un “puente” (básicamente, una API) usando postMessage, por lo que no necesitamos reinicializar todo el código común para cada aplicación. Lo realmente genial de esto es que muchas de esas ~ 35 vistas que mencioné antes también pueden ejecutarse dentro del cliente de escritorio sin modificación. Por supuesto, en lugar de postMessage, usarán un gancho en Chromium Embedded Framework y nuestro núcleo C ++.

Intentamos utilizar las tecnologías HTML 5 tanto como sea posible, pero en algunos casos dependemos de Flash. Creo que tenemos una pila tecnológica realmente genial para nuestro reproductor web en general.

Andreas Blixt dio una excelente respuesta, así que haré todo lo posible para agregarla. Los productos que componen la pila tecnológica de Spotify incluyen:

Amazon (CloudSearch, CloudFront, S3) Android Wear SDK, Apache (Cassandra, Kafka, CloudStack, Web Server), Babel, Bootstrap, DbVisualizer, Fabric, Genymotion, Java, jQuery, Mashape, Modernizr, Objective-C, PostgreSQL, PyCharm, Python, Raml, Reveal, SQLite, Testflight, Underscore.js, UpSource, Bynder, Carpathia by QTS, Crashlytics, Datadog, DigiCert, Disqus, Docker, Domaininfo Domain Registration, eNom Hosting, Fastly, GoDaddy SSL, Kount, New Relic, nginx , Pingdom, PractiTest, TeamCity, Tumblr y WordPress.

Además, aquí hay una lista de otros productos de software que Spotify está usando internamente:

  • Comercialización : 4C Insights, AdRoll, Embajador, Chute
  • Ventas y soporte : ROKT, Salesforce Sales Cloud, Lithium, Qualaroo
  • Producto y diseño : ActiveInbox, Blossom, LeanKit, Splash
  • Análisis : ajuste, Apache Ambari, Google Analytics, Hortonworks
  • HR : Beamery, Jobvite, Piazza
  • Finanzas y contabilidad : Digital River, PayNearMe
  • Productividad : Slack, Dropmark, Siftery, Knotable

Para obtener una lista completa del software utilizado por Spotify, consulte: Pila de Spotify | Siftery

(Descargo de responsabilidad: los datos anteriores se obtuvieron de Siftery y han sido verificados por personas que trabajan en Spotify)

La aplicación de escritorio utiliza el “Chromium Embedded Framework” (CEF), que es una forma de incluir la funcionalidad de un navegador web (basado en Chrome) en la aplicación; esto nos permite desarrollar funciones en lenguajes de programación modernos y nos brinda la posibilidad para solucionar problemas más rápido.

Esta actualización incluye una actualización importante, de CEF1 a CEF3.

CEF 1 era un “proceso único” y si se atascaba haciendo algo, toda la aplicación “sufriría”.
CEF 3 es una versión “multiproceso”, lo que significa que puede hacer más cosas al mismo tiempo, y si algo de lo que está haciendo se ralentiza, el resto de la aplicación puede continuar normalmente.
CEF 3 también nos permite utilizar la aceleración de hardware en las tarjetas gráficas; al igual que los navegadores más recientes, básicamente utiliza el hardware de la computadora de manera más inteligente y rápida. Los usuarios deberían ver un rendimiento mucho más uniforme en áreas que requieren muchos gráficos, como desplazarse por largas listas.

Sin embargo, lo que vale la pena mencionar es que este es un cambio importante “bajo el capó” (los técnicos pueden estar interesados ​​en leer más sobre Chromium Embedded Framework – Wikipedia
Además, siempre existe el riesgo de problemas inesperados con cambios tan “grandes”, pero estamos seguros de que es lo que debemos hacer, y esperamos que nuestros usuarios entiendan que obtendrán una experiencia mucho mejor gracias a esto.