Upload
tomasperezv
View
1.253
Download
3
Embed Size (px)
DESCRIPTION
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 will explain how our architecture abstracts a web developer from the platform, making it possible to share code across multiple devices. In addition, we will talk about how we communicate with the Spotify clients, using web technologies such as local storage to communicate between different tabs and post messages to achieve cross domain communication. We will also analyze some browser inconsistencies and will show work-arounds to solve them.
Citation preview
Cross platform web appdevelopment
Tomás Pérez - @tomasperezvJosé M. Pérez - @jmperezperez
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
Spotify <3 web
Cross platform application development
Beginnings of Spotify
Cross platform application development
Giving web a try
Cross platform application development
• Using CEF to move features to web
• Write features as webapps
• Sandboxed environment
Giving web a try (2)
Cross platform application development
What is a Spotify app?
Cross platform application development
• HTML
• CSS
• JS
• manifest.json
What is a Spotify app? - Developer tools
Cross platform application development
What is a Spotify app? - Developer tools
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
Cross platform application development
CapturFiles_25.png
Releasing Spotify Apps
• Decoupled system
• Provides gradual roll-out, and availability depending on platform and
country
Cross platform application development
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
Only benefits?
Cross platform application development
• Performance in views with a lot of data on mobile
• Time to render
Spotify Embedded Platform
Tomás Péreztwitter.com/tomasperezvgithub.com/tomasperezv
Spotify Embedded Platform
Cross platform application development
Spotify Embedded Platform
Cross platform application development
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
Architecture of the Platform
Cross platform application development
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
How expensive are IFrames?
Cross platform application development
(*) http://www.stevesouders.com/blog/2009/06/03/using-iframes-sparingly/
A lot(*):
Custom widgets in partner pages
Cross platform application development
Custom widgets in partner pages
Cross platform application development
Cross-origin communication using postMessage
Cross platform application development
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
•...
Cross platform application development
Security
frame.contentWindow.postMessage(..., 'https://embed.spotify.com');
window.addEventListener('message', function(messageEvt) {if (messageEvt.origin === 'https://valid-domain.com') { ...}
});
postMessage transfer rate
Cross platform application development
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
Is localStorage always available?
Cross platform application development
window.localStorageStorageconstructor: StoragetorageConstructorlength: 0
Is localStorage always available?
Cross platform application development
localStorage.setItem('key', 'value')DOMExceptioncode: 22constructor: DOMExceptionConstructormessage: "QUOTA_EXCEEDED_ERR: DOM Exception 22"
Communication between different tabs
Cross platform application development
Communication between different tabs
Cross platform application development
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
localStorage locks
Cross platform application development
http://calendar.perfplanet.com/2012/is-localstorage-performance-a-problem/
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}
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);
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)
Notification delay
Cross platform application development
Chrome ~2 millisecondsIE10 ~34 milliseconds
Performance improvements
Cross platform application development
Prefetch / Prerender
• Rendering pages<link rel="prerender" href="...">
• Fetching static resources<link rel="prefetch" href="...">
Potential improvements
Cross platform application development
Batching postMessages
Webworkers
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.
Questions?
Cross platform application development
Tomás Pérez@tomasperezv
José M. Pérez@jmperezperez
Slides, code examples and referencegithub.com/tomasperezv/spainjs-2013
Thanks!
Cross platform application development