Cross platform web app development
•
4 likes•3,694 views
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.
Report
Share
Cross platform web app development
- 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