A presentation at Spain.js 2013 in in Madrid, Spain by José M. Pérez
Cross platform web app development Tomás Pérez - @tomasperezv José M. Pérez - @jmperezperez
Cross platform application development Contents 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
Cross platform application development Spotify <3 web
Cross platform application development Beginnings of Spotify
Cross platform application development Giving web a try ● Using CEF to move features to web ● Write features as webapps ● Sandboxed environment
Cross platform application development Giving web a try (2)
Cross platform application development What is a Spotify app? ● HTML ● CSS ● JS ● manifest.json
Cross platform application development What is a Spotify app? - Developer tools
Cross platform application development Architecture of the Spotify Apps Platform - overview
Cross platform application development Architecture of the Spotify Apps Platform - desktop
Cross platform application development Architecture of the Platform - all clients
Cross platform application development Multiple platforms CapturFiles_25.png
Cross platform application development Releasing Spotify Apps ● Decoupled system ● Provides gradual roll-out, and availability depending on platform and country
Cross platform application development Benefits ● 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
Cross platform application development Only benefits? ● Performance in views with a lot of data on mobile ● Time to render
Spotify Embedded Platform Tomás Pérez twitter.com/tomasperezv github.com/tomasperezv
Cross platform application development Spotify Embedded Platform
Cross platform application development Content Platform architecture - IFrames and postMessage: security and performance Remote control technology - Communication between different tabs - Performance of the communication channel Performance improvements
Cross platform application development Architecture of the Platform
Cross platform application development Sandboxed platform using IFrames Good - Separated execution context - Better security and privacy - We control the release process Bad - More difficult communication - IFrames are expensive
Cross platform application development How expensive are IFrames? A lot(): () http://www.stevesouders.com/blog/2009/06/03/using-iframes-sparingly/
Cross platform application development Custom widgets in partner pages
Cross platform application development Cross-origin communication using postMessage
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 ● ... (*)[object Object]
Cross platform application development Security frame.contentWindow .postMessage(..., 'https://embed.spotify.com'); window.addEventListener('message', function(messageEvt) { if (messageEvt.origin === 'https://valid-domain.com') { ... } });
Cross platform application development postMessage transfer rate
Cross platform application development Remote controlling Spotify Clients Client Desktop: based on long polling + https Webplayer: communication with another browser window or tab - server side - postMessage - Cookies - localStorage
Cross platform application development Is localStorage always available? window.localStorage localStorage.setItem('key', 'value') Storage DOMException constructor: StorageConstructor code: 22 length: 0 constructor: DOMExceptionConstructor message: "QUOTA_EXCEEDED_ERR: DOM Exception 22"
Cross platform application development Communication between different tabs
Cross platform application development localStorage locks The UI Thread is stopped for some operations Firefox and Chrome wait until the first read is requested, then load all the items http://calendar.perfplanet.com/2012/is-localstorage-performance-a-problem/
Cross platform application development localStorage notifications via the storage event 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}
Cross platform application development Can we trigger the event manually? var evt = document.createEvent('StorageEvent'); evt.initStorageEvent('storage', ...); window.dispatchEvent(evt); Yes...although not to communicate between different windows.
Cross platform application development localStorage communication strategies 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)
Cross platform application development Notification delay Chrome ~2 milliseconds IE10 ~34 milliseconds
Cross platform application development Performance improvements Prefetch / Prerender ● ● Rendering pages <link rel="prerender" href="..."> Fetching static resources <link rel="prefetch" href="...">
Cross platform application development Potential improvements Batching postMessages Webworkers
Cross platform application development Conclusions - 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.
Cross platform application development Questions? Tomás Pérez @tomasperezv José M. Pérez @jmperezperez Slides, code examples and reference github.com/tomasperezv/spainjs-2013
Cross platform application development Thanks!
This talk presents how Spotify uses web technologies to develop and maintain key features in the different platforms. Hybrid apps is a hot topic nowadays, and we will explain how our architecture abstracts a web developer from the platform, making it possible to share code across multiple devices.
In the second part of the talk we will describe the architecture of the Spotify Embedded Platform, that allows external developers to include Spotify entities inside their webpages, including a technology for remote controlling Spotify clients, the web player and the desktop client.
The following resources were mentioned during the presentation or are useful additional information.
Here’s what was said about this presentation on social media.
for free. You
can too.