cross platform web app development
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.TRANSCRIPT
![Page 1: Cross platform web app development](https://reader033.vdocument.in/reader033/viewer/2022061218/54b7b66f4a7959bf688b470f/html5/thumbnails/1.jpg)
Cross platform web appdevelopment
Tomás Pérez - @tomasperezvJosé M. Pérez - @jmperezperez
![Page 2: Cross platform web app development](https://reader033.vdocument.in/reader033/viewer/2022061218/54b7b66f4a7959bf688b470f/html5/thumbnails/2.jpg)
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
![Page 3: Cross platform web app development](https://reader033.vdocument.in/reader033/viewer/2022061218/54b7b66f4a7959bf688b470f/html5/thumbnails/3.jpg)
Spotify <3 web
Cross platform application development
![Page 4: Cross platform web app development](https://reader033.vdocument.in/reader033/viewer/2022061218/54b7b66f4a7959bf688b470f/html5/thumbnails/4.jpg)
Beginnings of Spotify
Cross platform application development
![Page 5: Cross platform web app development](https://reader033.vdocument.in/reader033/viewer/2022061218/54b7b66f4a7959bf688b470f/html5/thumbnails/5.jpg)
Giving web a try
Cross platform application development
• Using CEF to move features to web
• Write features as webapps
• Sandboxed environment
![Page 6: Cross platform web app development](https://reader033.vdocument.in/reader033/viewer/2022061218/54b7b66f4a7959bf688b470f/html5/thumbnails/6.jpg)
Giving web a try (2)
Cross platform application development
![Page 7: Cross platform web app development](https://reader033.vdocument.in/reader033/viewer/2022061218/54b7b66f4a7959bf688b470f/html5/thumbnails/7.jpg)
What is a Spotify app?
Cross platform application development
• HTML
• CSS
• JS
• manifest.json
![Page 8: Cross platform web app development](https://reader033.vdocument.in/reader033/viewer/2022061218/54b7b66f4a7959bf688b470f/html5/thumbnails/8.jpg)
What is a Spotify app? - Developer tools
Cross platform application development
![Page 9: Cross platform web app development](https://reader033.vdocument.in/reader033/viewer/2022061218/54b7b66f4a7959bf688b470f/html5/thumbnails/9.jpg)
What is a Spotify app? - Developer tools
Cross platform application development
![Page 10: Cross platform web app development](https://reader033.vdocument.in/reader033/viewer/2022061218/54b7b66f4a7959bf688b470f/html5/thumbnails/10.jpg)
What is a Spotify app? - Developer tools
Cross platform application development
![Page 11: Cross platform web app development](https://reader033.vdocument.in/reader033/viewer/2022061218/54b7b66f4a7959bf688b470f/html5/thumbnails/11.jpg)
Architecture of the Spotify Apps Platform - overview
Cross platform application development
![Page 12: Cross platform web app development](https://reader033.vdocument.in/reader033/viewer/2022061218/54b7b66f4a7959bf688b470f/html5/thumbnails/12.jpg)
Architecture of the Spotify Apps Platform - desktop
Cross platform application development
![Page 13: Cross platform web app development](https://reader033.vdocument.in/reader033/viewer/2022061218/54b7b66f4a7959bf688b470f/html5/thumbnails/13.jpg)
Architecture of the Platform - all clients
Cross platform application development
![Page 14: Cross platform web app development](https://reader033.vdocument.in/reader033/viewer/2022061218/54b7b66f4a7959bf688b470f/html5/thumbnails/14.jpg)
Multiple platforms
Cross platform application development
CapturFiles_25.png
![Page 15: Cross platform web app development](https://reader033.vdocument.in/reader033/viewer/2022061218/54b7b66f4a7959bf688b470f/html5/thumbnails/15.jpg)
Releasing Spotify Apps
• Decoupled system
• Provides gradual roll-out, and availability depending on platform and
country
Cross platform application development
![Page 16: Cross platform web app development](https://reader033.vdocument.in/reader033/viewer/2022061218/54b7b66f4a7959bf688b470f/html5/thumbnails/16.jpg)
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
![Page 17: Cross platform web app development](https://reader033.vdocument.in/reader033/viewer/2022061218/54b7b66f4a7959bf688b470f/html5/thumbnails/17.jpg)
Only benefits?
Cross platform application development
• Performance in views with a lot of data on mobile
• Time to render
![Page 18: Cross platform web app development](https://reader033.vdocument.in/reader033/viewer/2022061218/54b7b66f4a7959bf688b470f/html5/thumbnails/18.jpg)
Spotify Embedded Platform
Tomás Péreztwitter.com/tomasperezvgithub.com/tomasperezv
![Page 19: Cross platform web app development](https://reader033.vdocument.in/reader033/viewer/2022061218/54b7b66f4a7959bf688b470f/html5/thumbnails/19.jpg)
Spotify Embedded Platform
Cross platform application development
![Page 20: Cross platform web app development](https://reader033.vdocument.in/reader033/viewer/2022061218/54b7b66f4a7959bf688b470f/html5/thumbnails/20.jpg)
Spotify Embedded Platform
Cross platform application development
![Page 21: Cross platform web app development](https://reader033.vdocument.in/reader033/viewer/2022061218/54b7b66f4a7959bf688b470f/html5/thumbnails/21.jpg)
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
![Page 22: Cross platform web app development](https://reader033.vdocument.in/reader033/viewer/2022061218/54b7b66f4a7959bf688b470f/html5/thumbnails/22.jpg)
Architecture of the Platform
Cross platform application development
![Page 23: Cross platform web app development](https://reader033.vdocument.in/reader033/viewer/2022061218/54b7b66f4a7959bf688b470f/html5/thumbnails/23.jpg)
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
![Page 24: Cross platform web app development](https://reader033.vdocument.in/reader033/viewer/2022061218/54b7b66f4a7959bf688b470f/html5/thumbnails/24.jpg)
How expensive are IFrames?
Cross platform application development
(*) http://www.stevesouders.com/blog/2009/06/03/using-iframes-sparingly/
A lot(*):
![Page 25: Cross platform web app development](https://reader033.vdocument.in/reader033/viewer/2022061218/54b7b66f4a7959bf688b470f/html5/thumbnails/25.jpg)
Custom widgets in partner pages
Cross platform application development
![Page 26: Cross platform web app development](https://reader033.vdocument.in/reader033/viewer/2022061218/54b7b66f4a7959bf688b470f/html5/thumbnails/26.jpg)
Custom widgets in partner pages
Cross platform application development
![Page 27: Cross platform web app development](https://reader033.vdocument.in/reader033/viewer/2022061218/54b7b66f4a7959bf688b470f/html5/thumbnails/27.jpg)
Cross-origin communication using postMessage
Cross platform application development
![Page 28: Cross platform web app development](https://reader033.vdocument.in/reader033/viewer/2022061218/54b7b66f4a7959bf688b470f/html5/thumbnails/28.jpg)
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
•...
![Page 29: Cross platform web app development](https://reader033.vdocument.in/reader033/viewer/2022061218/54b7b66f4a7959bf688b470f/html5/thumbnails/29.jpg)
Cross platform application development
Security
frame.contentWindow.postMessage(..., 'https://embed.spotify.com');
window.addEventListener('message', function(messageEvt) {if (messageEvt.origin === 'https://valid-domain.com') { ...}
});
![Page 30: Cross platform web app development](https://reader033.vdocument.in/reader033/viewer/2022061218/54b7b66f4a7959bf688b470f/html5/thumbnails/30.jpg)
postMessage transfer rate
Cross platform application development
![Page 31: Cross platform web app development](https://reader033.vdocument.in/reader033/viewer/2022061218/54b7b66f4a7959bf688b470f/html5/thumbnails/31.jpg)
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
![Page 32: Cross platform web app development](https://reader033.vdocument.in/reader033/viewer/2022061218/54b7b66f4a7959bf688b470f/html5/thumbnails/32.jpg)
Is localStorage always available?
Cross platform application development
window.localStorageStorageconstructor: StoragetorageConstructorlength: 0
![Page 33: Cross platform web app development](https://reader033.vdocument.in/reader033/viewer/2022061218/54b7b66f4a7959bf688b470f/html5/thumbnails/33.jpg)
Is localStorage always available?
Cross platform application development
localStorage.setItem('key', 'value')DOMExceptioncode: 22constructor: DOMExceptionConstructormessage: "QUOTA_EXCEEDED_ERR: DOM Exception 22"
![Page 34: Cross platform web app development](https://reader033.vdocument.in/reader033/viewer/2022061218/54b7b66f4a7959bf688b470f/html5/thumbnails/34.jpg)
Communication between different tabs
Cross platform application development
![Page 35: Cross platform web app development](https://reader033.vdocument.in/reader033/viewer/2022061218/54b7b66f4a7959bf688b470f/html5/thumbnails/35.jpg)
Communication between different tabs
Cross platform application development
![Page 36: Cross platform web app development](https://reader033.vdocument.in/reader033/viewer/2022061218/54b7b66f4a7959bf688b470f/html5/thumbnails/36.jpg)
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
![Page 37: Cross platform web app development](https://reader033.vdocument.in/reader033/viewer/2022061218/54b7b66f4a7959bf688b470f/html5/thumbnails/37.jpg)
localStorage locks
Cross platform application development
http://calendar.perfplanet.com/2012/is-localstorage-performance-a-problem/
![Page 38: Cross platform web app development](https://reader033.vdocument.in/reader033/viewer/2022061218/54b7b66f4a7959bf688b470f/html5/thumbnails/38.jpg)
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}
![Page 39: Cross platform web app development](https://reader033.vdocument.in/reader033/viewer/2022061218/54b7b66f4a7959bf688b470f/html5/thumbnails/39.jpg)
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);
![Page 40: Cross platform web app development](https://reader033.vdocument.in/reader033/viewer/2022061218/54b7b66f4a7959bf688b470f/html5/thumbnails/40.jpg)
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)
![Page 41: Cross platform web app development](https://reader033.vdocument.in/reader033/viewer/2022061218/54b7b66f4a7959bf688b470f/html5/thumbnails/41.jpg)
Notification delay
Cross platform application development
Chrome ~2 millisecondsIE10 ~34 milliseconds
![Page 42: Cross platform web app development](https://reader033.vdocument.in/reader033/viewer/2022061218/54b7b66f4a7959bf688b470f/html5/thumbnails/42.jpg)
Performance improvements
Cross platform application development
Prefetch / Prerender
• Rendering pages<link rel="prerender" href="...">
• Fetching static resources<link rel="prefetch" href="...">
![Page 43: Cross platform web app development](https://reader033.vdocument.in/reader033/viewer/2022061218/54b7b66f4a7959bf688b470f/html5/thumbnails/43.jpg)
Potential improvements
Cross platform application development
Batching postMessages
Webworkers
![Page 44: Cross platform web app development](https://reader033.vdocument.in/reader033/viewer/2022061218/54b7b66f4a7959bf688b470f/html5/thumbnails/44.jpg)
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.
![Page 45: Cross platform web app development](https://reader033.vdocument.in/reader033/viewer/2022061218/54b7b66f4a7959bf688b470f/html5/thumbnails/45.jpg)
Questions?
Cross platform application development
Tomás Pérez@tomasperezv
José M. Pérez@jmperezperez
Slides, code examples and referencegithub.com/tomasperezv/spainjs-2013
![Page 46: Cross platform web app development](https://reader033.vdocument.in/reader033/viewer/2022061218/54b7b66f4a7959bf688b470f/html5/thumbnails/46.jpg)
Thanks!
Cross platform application development