Hyves: Mobile app development with HTML5 and Javascript

1,633 views

Published on

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.

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,633
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
0
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Hyves: Mobile app development with HTML5 and Javascript

  1. 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. 2. Friday, March 9, 12 2
  3. 3. Friday, March 9, 12 3
  4. 4. Friday, March 9, 12 4
  5. 5. Friday, March 9, 12 5
  6. 6. Friday, March 9, 12 6overview of all our apps
  7. 7. Hybrid?Friday, March 9, 12 7
  8. 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 javascriptFriday, March 9, 12 8
  9. 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 9Friday, March 9, 12 9
  10. 10. Why?Friday, March 9, 12 10- already have native apps for ios, android, blackberry so why hybrid?
  11. 11. But why? • Cross platform development: build once, run anywhere • Release when you want • Mobile website for “free” • Easier to get developers 11Friday, 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. 12. How we did itFriday, March 9, 12 12
  13. 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 13Friday, March 9, 12 13- framework: open source- design pattern library: show- phonegap
  14. 14. FrameworkFriday, March 9, 12 14
  15. 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 15Friday, March 9, 12 15
  16. 16. Design pattern libraryFriday, March 9, 12 16- mention cross platform compatibility- widgets- building blocks for making UI
  17. 17. PhonegapFriday, March 9, 12 17- phonegap: third pillar of dev environment- ideally: assembly line- develop own plugins, many available
  18. 18. Code reuse Over 90% of js/html/css is shared between mobile and tabletFriday, March 9, 12 18- shared between mobile platforms and tablet
  19. 19. Example: mobile vs tabletFriday, March 9, 12 19
  20. 20. PerformanceFriday, March 9, 12 20
  21. 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 21Friday, March 9, 12 21
  22. 22. Modules result: inbox.{md5}.{i18n}.jsFriday, March 9, 12 22- resulting javascript module contains code, templates, (base64) images and css- we build modules per language (nl_NL, en_US)
  23. 23. First requestFriday, March 9, 12 23- empty cache, no localstorage- still too big, working on it
  24. 24. Performance: caching • “Everything you thought you knew about caching is wrong!” • Doesn’t work on mobile • Use localstorage • Use cache manifest (wisely...) 24Friday, 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. 25. Local storageFriday, March 9, 12 25- store our stringified js modules in localstorage
  26. 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 26Friday, March 9, 12 26- don’t wait for the doubleclick and save 300ms- “scrolls like butter”- decapitated smiley
  27. 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 27Friday, March 9, 12 27- kick hardware acceleration
  28. 28. GPU?Friday, March 9, 12 28- left: cpu rendered spinner- right: gpu rendered spinner => fast!!
  29. 29. Debugging: weinreFriday, March 9, 12 29
  30. 30. Debugging: iWebinspectorFriday, March 9, 12 30- this one is great for ios
  31. 31. Debugging: Charles Proxy Decrypts https:// W00t!!Friday, March 9, 12 31
  32. 32. Debugging: RippleFriday, March 9, 12 32
  33. 33. Testing • Selenium, Jasmine • Jenkins • By hand (eat-your-own-dogfood) 33Friday, 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. 34. Deployment • Build script generates tarball with versioned JS files (about 4mb) • Copy tarball to static servers & unpack 34Friday, March 9, 12 34- actually the easiest of everything :-)
  35. 35. ? (emiel@hyves.nl) 35Friday, March 9, 12 35

×