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