These are the slides of Emiels presentation about how Hyves supports multiple mobile frameworks with minimal effort by use of html5 and javascript. Topics are mobile architecture, buildsystems, testing frameworks and how Hyves uses phonegap.

1. Cross platform
mobile apps
with javascript/html5
Emiel van Liere
Mobile Development Team Leader
Hyves
(emiel@hyves.nl)
Friday, March 9, 12 1

2. Friday, March 9, 12 2

3. Friday, March 9, 12 3

4. Friday, March 9, 12 4

5. Friday, March 9, 12 5

6. Friday, March 9, 12 6
overview of all our apps

7. Hybrid?
Friday, March 9, 12 7

8. Hybrid?
Application that can be installed on a device and has
access to native components (camera, push notifications)
but most -if not all- of the logic and UI is implemented
with html, css and javascript
Friday, March 9, 12 8

9. Hybrid
• Hyves: camera, image library, photo upload,
push notifications, (dialogs, keyboard)
• Hyves: UI and logic implemented with html
and javascript
• Linkedin, Facebook: native UI controllers
9
Friday, March 9, 12 9

10. Why?
Friday, March 9, 12 10
- already have native apps for ios, android, blackberry so why hybrid?

11. But why?
• Cross platform development: build once, run
anywhere
• Release when you want
• Mobile website for “free”
• Easier to get developers
11
Friday, March 9, 12 11
- xplatform example: predictions, lays campaign
- release: AGILE no more appstore approval, easy bugfixes
- app is actually a bundled website, nice for notifications in email
- hyves: lots of experience with web

12. How we did it
Friday, March 9, 12 12

13. How we did it
• Rolled our own Javascript framework
(http://code.google.com/p/hyves-hybrid/)
• Design pattern library in CSS
• Phonegap for native functionality
13
Friday, March 9, 12 13
- framework: open source
- design pattern library: show
- phonegap

14. Framework
Friday, March 9, 12 14

15. Framework
• jQuery (and a little bit of jQuery mobile)
• Client-side templates with jq templates
• Sass for css (http://sass-lang.com/)
• Build script in Python with Google Closure
Compiler, JSLint etc
15
Friday, March 9, 12 15

16. Design pattern library
Friday, March 9, 12 16
- mention cross platform compatibility
- widgets
- building blocks for making UI

17. Phonegap
Friday, March 9, 12 17
- phonegap: third pillar of dev environment
- ideally: assembly line
- develop own plugins, many available

18. Code reuse
Over 90% of js/html/css is shared between
mobile and tablet
Friday, March 9, 12 18
- shared between mobile platforms and tablet

19. Example:
mobile vs tablet
Friday, March 9, 12 19

20. Performance
Friday, March 9, 12 20

21. Performance:
load times
• Minimize number of requests:
• Minify Javascript
• JS, html templates, css in one .js file
• Base64 encode images and include in css
• Load features on demand
21
Friday, March 9, 12 21

22. Modules
result: inbox.{md5}.{i18n}.js
Friday, March 9, 12 22
- resulting javascript module contains code, templates, (base64) images and css
- we build modules per language (nl_NL, en_US)

23. First request
Friday, March 9, 12 23
- empty cache, no localstorage
- still too big, working on it

24. Performance: caching
• “Everything you thought you knew about
caching is wrong!”
• Doesn’t work on mobile
• Use localstorage
• Use cache manifest (wisely...)
24
Friday, March 9, 12 24
- quote from souders? I can’t remember... but it applies to mobile of course :-)
- doesnt work consistently
- doesnt work for homescreen apps
- max cache
- cache manifest is powerful but also dangerous, so we don’t use it (yet...)

25. Local storage
Friday, March 9, 12 25
- store our stringified js modules in localstorage

26. Performance: UI
• Kill the 300ms click delay (jq mobile, zepto)
• IOS: native scrolling with -webkit-overflow-
scrolling: touch (or iscroll on IOS4)
• Blackberry: kill your darlings
26
Friday, March 9, 12 26
- don’t wait for the doubleclick and save 300ms
- “scrolls like butter”
- decapitated smiley

27. Leverage GPU
• -webkit-transform: translate3d(x,y,z)
• Verify on Safari or IOS simulator:
CA_COLOR_OPAQUE=1 /Developer/Platforms/
iPhoneSimulator.platform/Developer/Applications/
iPhone Simulator.app/Contents/MacOS/iPhone
Simulator
27
Friday, March 9, 12 27
- kick hardware acceleration

28. GPU?
Friday, March 9, 12 28
- left: cpu rendered spinner
- right: gpu rendered spinner => fast!!

29. Debugging:
weinre
Friday, March 9, 12 29

30. Debugging:
iWebinspector
Friday, March 9, 12 30
- this one is great for ios

31. Debugging:
Charles Proxy
Decrypts https:// W00t!!
Friday, March 9, 12 31

32. Debugging:
Ripple
Friday, March 9, 12 32

33. Testing
• Selenium, Jasmine
• Jenkins
• By hand (eat-your-own-dogfood)
33
Friday, March 9, 12 33
- selenium on a grid (about 30 vm’s, fast!!)
- jasmine for testing native functionality on actual device or on simulator

34. Deployment
• Build script generates tarball with
versioned JS files (about 4mb)
• Copy tarball to static servers & unpack
34
Friday, March 9, 12 34
- actually the easiest of everything :-)

35. ?
(emiel@hyves.nl)
35
Friday, March 9, 12 35