This document discusses Spotify's use of web apps for cross-platform development. Spotify uses web technologies like HTML, CSS, and JavaScript to build apps that can run across desktop, web, and mobile clients. Key aspects discussed include using iframes for sandboxing apps, cross-origin communication via postMessage, and strategies for communication between different browser tabs using localStorage. Performance is also addressed, such as techniques to reduce iframe overhead and improve notification delays.

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

2. Contents
Cross platform application development

3. 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

4. Spotify <3 web
Cross platform application development

5. Spotify <3 web
Cross platform application development

6. Spotify <3 web
Cross platform application development

7. Spotify <3 web
Cross platform application development

8. Spotify <3 web
Cross platform application development

9. Beginnings of Spotify
Cross platform application development

10. Giving web a try
Cross platform application development

11. Giving web a try
Cross platform application development
• Using CEF to move features to web

12. Giving web a try
Cross platform application development
• Using CEF to move features to web
• Write features as webapps

13. Giving web a try
Cross platform application development
• Using CEF to move features to web
• Write features as webapps
• Sandboxed environment

14. Giving web a try (2)
Cross platform application development

15. What is a Spotify app?
Cross platform application development

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

17. What is a Spotify app?
Cross platform application development
• HTML
• CSS

18. What is a Spotify app?
Cross platform application development
• HTML
• CSS
• JS

19. What is a Spotify app?
Cross platform application development
• HTML
• CSS
• JS
• manifest.json

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

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

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

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

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

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

26. Multiple platforms
Cross platform application development
CapturFiles_25.png

27. Releasing Spotify Apps
Cross platform application development

28. Releasing Spotify Apps
• Decoupled system
Cross platform application development

29. Releasing Spotify Apps
• Decoupled system
• Provides gradual roll-out, and availability depending on
platform and country
Cross platform application development

30. Benefits
Cross platform application development

31. Benefits
Cross platform application development
• Feature ownership by teams

32. Benefits
Cross platform application development
• Feature ownership by teams
• Fast development pace due to fewer dependencies

33. 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

34. 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

35. Only benefits?
Cross platform application development

36. Only benefits?
Cross platform application development
• Performance in views with a lot of data on mobile

37. Only benefits?
Cross platform application development
• Performance in views with a lot of data on mobile
• Time to render

38. Spotify Embedded Platform
Tomás Pérez
twitter.com/tomasperezv
github.com/tomasperezv

39. Spotify Embedded Platform
Cross platform application development

40. Spotify Embedded Platform
Cross platform application development

41. Content
Cross platform application development José Manuel Pérez Pérez
Ya no estoy seguro de si
debemos incluir la 16 y la 18.
Creo que con la slide de
Contents del principio deberia
quedar claro.

42. 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
José Manuel Pérez Pérez
Ya no estoy seguro de si
debemos incluir la 16 y la 18.
Creo que con la slide de
Contents del principio deberia
quedar claro.

43. Architecture of the Platform
Cross platform application development

44. Sandboxed platform using IFrames
Cross platform application development

45. Sandboxed platform using IFrames
Cross platform application development
Good
- Separated execution context
- Better security and privacy
- We control the release process

46. 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

47. How expensive are IFrames?
Cross platform application development

48. How expensive are IFrames?
Cross platform application development
(*) http://www.stevesouders.com/blog/2009/06/03/using-iframes-sparingly/
A
lot(*):

49. Custom widgets in partner pages
Cross platform application development

50. Custom widgets in partner pages
Cross platform application development

51. Custom widgets in partner pages
Cross platform application development

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

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

54. 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
•...

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

56. Cross platform application development
Security
frame.contentWindow
.postMessage(..., 'https://embed.spotify.com');

57. Cross platform application development
Security
frame.contentWindow
.postMessage(..., 'https://embed.spotify.com');
window.addEventListener('message', function(messageEvt) {
if (messageEvt.origin === 'https://valid-domain.com') {
...
}
});

58. postMessage transfer rate
Cross platform application development

59. postMessage transfer rate
Cross platform application development

60. Remote controlling Spotify Clients
Cross platform application development
Client Desktop: based on long polling + https
Webplayer: communication with another browser window or
tab

61. 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

62. 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

63. 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

64. 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

65. Is localStorage always available?
Cross platform application development
window.localStorage
Storageconstructor:
StorageConstructorlength: 0

66. Is localStorage always available?
Cross platform application development
localStorage.setItem('key', 'value')
DOMExceptioncode: 22constructor:
DOMExceptionConstructormessage:
"QUOTA_EXCEEDED_ERR: DOM Exception 22"

67. Communication between different tabs
Cross platform application development

68. Communication between different tabs
Cross platform application development

69. localStorage locks
Cross platform application development

70. localStorage locks
Cross platform application development
The UI Thread is stopped for some operations

71. 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

72. localStorage locks
Cross platform application development
http://calendar.perfplanet.com/2012/is-localstorage-performance-a-problem/

73. localStorage notifications via the storage event
Cross platform application development
window.addEventListener('storage', function() {}, false);

74. 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}

75. Can we trigger the event manually?
Cross platform application development
var evt = document.createEvent('StorageEvent');
evt.initStorageEvent('storage', ...);
window.dispatchEvent(evt);

76. 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);

77. 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)

78. Notification delay
Cross platform application development
Chrome ~2 milliseconds

79. Notification delay
Cross platform application development
Chrome ~2 millisecondsIE10 ~34 milliseconds

80. Performance improvements
Cross platform application development
Prefetch / Prerender
• Rendering pages
<link rel="prerender" href="...">
• Fetching static resources
<link rel="prefetch" href="...">

81. Performance improvements
Cross platform application development
Prefetch / Prerender
• Rendering pages
<link rel="prerender" href="...">
• Fetching static resources
<link rel="prefetch" href="...">

82. Potential improvements
Cross platform application development
Batching postMessages
Webworkers

83. 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.

84. 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

85. Thanks!
Cross platform application development