Cross platform web development

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

Contents Cross platform application development Web development in Spotify - Why and how - Beneﬁts and learnings Key web technologies that we use - IFrames and postMessage: security and performance - Communication between diﬀerent tabs Summary Questions

Slide 3

Slide 3 text

Spotify <3 web Cross platform application development

Slide 4

Slide 4 text

Beginnings of Spotify Cross platform application development

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

Giving web a try (2) Cross platform application development

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

Architecture of the Platform - all clients Cross platform application development

Slide 14

Slide 14 text

Multiple platforms Cross platform application development CapturFiles_25.png

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

Beneﬁts 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

Slide 17

Slide 17 text

Only beneﬁts? Cross platform application development • Performance in views with a lot of data on mobile • Time to render

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

Spotify Embedded Platform Cross platform application development

Slide 20

Slide 20 text

Spotify Embedded Platform Cross platform application development

Slide 21

Slide 21 text

Content Cross platform application development Platform architecture - IFrames and postMessage: security and performance Remote control technology - Communication between diﬀerent tabs - Performance of the communication channel Performance improvements

Slide 22

Slide 22 text

Architecture of the Platform Cross platform application development

Slide 23

Slide 23 text

Sandboxed platform using IFrames Cross platform application development Good - Separated execution context - Better security and privacy - We control the release process Bad - More diﬃcult communication - IFrames are expensive

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

Custom widgets in partner pages Cross platform application development

Slide 26

Slide 26 text

Custom widgets in partner pages Cross platform application development

Slide 27

Slide 27 text

Cross-origin communication using postMessage Cross platform application development

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

postMessage transfer rate Cross platform application development

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

Is localStorage always available? Cross platform application development window.localStorage Storage constructor: StoragetorageConstructor length: 0

Slide 33

Slide 33 text

Is localStorage always available? Cross platform application development localStorage.setItem('key', 'value') DOMException code: 22 constructor: DOMExceptionConstructor message: "QUOTA_EXCEEDED_ERR: DOM Exception 22"

Slide 34

Slide 34 text

Communication between diﬀerent tabs Cross platform application development

Slide 35

Slide 35 text

Communication between diﬀerent tabs Cross platform application development

Slide 36

Slide 36 text

localStorage locks Cross platform application development The UI Thread is stopped for some operations Firefox and Chrome wait until the ﬁrst read is requested, then load all the items

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

localStorage notiﬁcations 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}

Slide 39

Slide 39 text

Can we trigger the event manually? Cross platform application development Yes... although not to communicate between diﬀerent windows. var evt = document.createEvent('StorageEvent'); evt.initStorageEvent('storage', ...); window.dispatchEvent(evt);

Slide 40

Slide 40 text

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)

Slide 41

Slide 41 text

Notiﬁcation delay Cross platform application development Chrome ~2 milliseconds IE10 ~34 milliseconds

Slide 42

Slide 42 text

Performance improvements Cross platform application development Prefetch / Prerender • Rendering pages • Fetching static resources

Slide 43

Slide 43 text

Potential improvements Cross platform application development Batching postMessages Webworkers

Slide 44

Slide 44 text

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.

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

Thanks! Cross platform application development