Your SlideShare is downloading. ×
0
Hyves: Mobile app development with HTML5 and Javascript
Hyves: Mobile app development with HTML5 and Javascript
Hyves: Mobile app development with HTML5 and Javascript
Hyves: Mobile app development with HTML5 and Javascript
Hyves: Mobile app development with HTML5 and Javascript
Hyves: Mobile app development with HTML5 and Javascript
Hyves: Mobile app development with HTML5 and Javascript
Hyves: Mobile app development with HTML5 and Javascript
Hyves: Mobile app development with HTML5 and Javascript
Hyves: Mobile app development with HTML5 and Javascript
Hyves: Mobile app development with HTML5 and Javascript
Hyves: Mobile app development with HTML5 and Javascript
Hyves: Mobile app development with HTML5 and Javascript
Hyves: Mobile app development with HTML5 and Javascript
Hyves: Mobile app development with HTML5 and Javascript
Hyves: Mobile app development with HTML5 and Javascript
Hyves: Mobile app development with HTML5 and Javascript
Hyves: Mobile app development with HTML5 and Javascript
Hyves: Mobile app development with HTML5 and Javascript
Hyves: Mobile app development with HTML5 and Javascript
Hyves: Mobile app development with HTML5 and Javascript
Hyves: Mobile app development with HTML5 and Javascript
Hyves: Mobile app development with HTML5 and Javascript
Hyves: Mobile app development with HTML5 and Javascript
Hyves: Mobile app development with HTML5 and Javascript
Hyves: Mobile app development with HTML5 and Javascript
Hyves: Mobile app development with HTML5 and Javascript
Hyves: Mobile app development with HTML5 and Javascript
Hyves: Mobile app development with HTML5 and Javascript
Hyves: Mobile app development with HTML5 and Javascript
Hyves: Mobile app development with HTML5 and Javascript
Hyves: Mobile app development with HTML5 and Javascript
Hyves: Mobile app development with HTML5 and Javascript
Hyves: Mobile app development with HTML5 and Javascript
Hyves: Mobile app development with HTML5 and Javascript
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Hyves: Mobile app development with HTML5 and Javascript

1,261

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, …

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,261
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
2
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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 6overview 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 javascriptFriday, 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 9Friday, 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 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. How we did itFriday, 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 13Friday, March 9, 12 13- framework: open source- design pattern library: show- phonegap
  • 14. FrameworkFriday, 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 15Friday, March 9, 12 15
  • 16. Design pattern libraryFriday, March 9, 12 16- mention cross platform compatibility- widgets- building blocks for making UI
  • 17. PhonegapFriday, 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 tabletFriday, March 9, 12 18- shared between mobile platforms and tablet
  • 19. Example: mobile vs tabletFriday, March 9, 12 19
  • 20. PerformanceFriday, 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 21Friday, March 9, 12 21
  • 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. First requestFriday, 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...) 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. Local storageFriday, 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 26Friday, 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 27Friday, 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: weinreFriday, March 9, 12 29
  • 30. Debugging: iWebinspectorFriday, March 9, 12 30- this one is great for ios
  • 31. Debugging: Charles Proxy Decrypts https:// W00t!!Friday, March 9, 12 31
  • 32. Debugging: RippleFriday, March 9, 12 32
  • 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. 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. ? (emiel@hyves.nl) 35Friday, March 9, 12 35

×