Cross platform web development

Cross platform web development

This talk presents how Spotify uses web technologies to develop and maintain key features in the different platforms that compose the Spotify experience: desktop client, mobile apps and the Web Player.

Hybrid apps is a hot topic nowadays, and we explain how our architecture abstracts a web developer from the platform, making it possible to share code across multiple devices.

In addition, we talk about how we communicate with the Spotify clients, using web technologies such as localStorage to sync between different tabs and postMessages to achieve cross domain communication. We will also analyze some browser inconsistencies and will show work-arounds to solve them.

43b3d09e5d13d076f5e120383702c04f?s=128

José M. Pérez

July 05, 2013
Tweet

Transcript

  1. Cross platform web app development Tomás Pérez - @tomasperezv José

    M. Pérez - @jmperezperez
  2. Contents Cross platform application development Web development in Spotify -

    Why and how - Benefits and learnings Key web technologies that we use - IFrames and postMessage: security and performance - Communication between different tabs Summary Questions
  3. Spotify <3 web Cross platform application development

  4. Beginnings of Spotify Cross platform application development

  5. Giving web a try Cross platform application development • Using

    CEF to move features to web • Write features as webapps • Sandboxed environment
  6. Giving web a try (2) Cross platform application development

  7. What is a Spotify app? Cross platform application development •

    HTML • CSS • JS • manifest.json
  8. What is a Spotify app? - Developer tools Cross platform

    application development
  9. What is a Spotify app? - Developer tools Cross platform

    application development
  10. What is a Spotify app? - Developer tools Cross platform

    application development
  11. Architecture of the Spotify Apps Platform - overview Cross platform

    application development
  12. Architecture of the Spotify Apps Platform - desktop Cross platform

    application development
  13. Architecture of the Platform - all clients Cross platform application

    development
  14. Multiple platforms Cross platform application development CapturFiles_25.png

  15. Releasing Spotify Apps • Decoupled system • Provides gradual roll-out,

    and availability depending on platform and country Cross platform application development
  16. Benefits Cross platform application development • Feature ownership by teams

    • Fast development pace due to fewer dependencies • Less hassle to deploy. Makes it easy to tweak a feature after being released • 3rd party app development
  17. Only benefits? Cross platform application development • Performance in views

    with a lot of data on mobile • Time to render
  18. Spotify Embedded Platform Tomás Pérez twitter.com/tomasperezv github.com/tomasperezv

  19. Spotify Embedded Platform Cross platform application development

  20. Spotify Embedded Platform Cross platform application development

  21. Content Cross platform application development Platform architecture - IFrames and

    postMessage: security and performance Remote control technology - Communication between different tabs - Performance of the communication channel Performance improvements
  22. Architecture of the Platform Cross platform application development

  23. Sandboxed platform using IFrames Cross platform application development Good -

    Separated execution context - Better security and privacy - We control the release process Bad - More difficult communication - IFrames are expensive
  24. How expensive are IFrames? Cross platform application development (*) http://www.stevesouders.com/blog/2009/06/03/using-iframes-sparingly/

    A lot(*):
  25. Custom widgets in partner pages Cross platform application development

  26. Custom widgets in partner pages Cross platform application development

  27. Cross-origin communication using postMessage Cross platform application development

  28. Cross platform application development Sending: content of the message frame.contentWindow.postMessage(message,

    ...); msg [in] Type: any One of the following: •JavaScript primitive, such as a string •object •Array •...
  29. Cross platform application development Security frame.contentWindow .postMessage(..., 'https://embed.spotify.com'); window.addEventListener('message', function(messageEvt)

    { if (messageEvt.origin === 'https://valid-domain.com') { ... } });
  30. postMessage transfer rate Cross platform application development

  31. Remote controlling Spotify Clients Cross platform application development Client Desktop:

    based on long polling + https Webplayer: communication with another browser window or tab - server side - postMessage - Cookies - localStorage
  32. Is localStorage always available? Cross platform application development window.localStorage Storage

    constructor: StoragetorageConstructor length: 0
  33. Is localStorage always available? Cross platform application development localStorage.setItem('key', 'value')

    DOMException code: 22 constructor: DOMExceptionConstructor message: "QUOTA_EXCEEDED_ERR: DOM Exception 22"
  34. Communication between different tabs Cross platform application development

  35. Communication between different tabs Cross platform application development

  36. localStorage locks Cross platform application development The UI Thread is

    stopped for some operations Firefox and Chrome wait until the first read is requested, then load all the items
  37. localStorage locks Cross platform application development http://calendar.perfplanet.com/2012/is-localstorage-performance-a-problem/

  38. localStorage notifications via the storage event Cross platform application development

    window.addEventListener('storage', function() {}, false); The event change is only emitted when the values actually change: use a timestamp if needed. {key: 'command', value: 'play', timestamp: 1373021690574}
  39. Can we trigger the event manually? Cross platform application development

    Yes... although not to communicate between different windows. var evt = document.createEvent('StorageEvent'); evt.initStorageEvent('storage', ...); window.dispatchEvent(evt);
  40. localStorage communication strategies Cross platform application development Options: A) Create

    a new item every time, but remove it once it’s received. B) New item, don't remove once it’s received, instead do it regularly. C) Reuse always the same item (use timestamp)
  41. Notification delay Cross platform application development Chrome ~2 milliseconds IE10

    ~34 milliseconds
  42. Performance improvements Cross platform application development Prefetch / Prerender •

    Rendering pages <link rel="prerender" href="..."> • Fetching static resources <link rel="prefetch" href="...">
  43. Potential improvements Cross platform application development Batching postMessages Webworkers

  44. Conclusions Cross platform application development - Web apps have been

    a good choice to extend our functionality in multiple platforms. - Web technologies make relatively easy to create complex integrations to improve the user experience. - It is very important to monitor and analyze carefully the performance.
  45. Questions? Cross platform application development Tomás Pérez @tomasperezv José M.

    Pérez @jmperezperez Slides, code examples and reference github.com/tomasperezv/spainjs-2013
  46. Thanks! Cross platform application development