Sebastian Burkhart — Berlin.apps.js Nov 2012 Talk
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

Sebastian Burkhart — Berlin.apps.js Nov 2012 Talk

  • 1,695 views
Uploaded on

 

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,695
On Slideshare
1,660
From Embeds
35
Number of Embeds
3

Actions

Shares
Downloads
8
Comments
0
Likes
2

Embeds 35

http://lanyrd.com 32
https://twitter.com 2
http://192.168.0.108 1

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. Copilot Creating a mobile web app in 8 days: What we learned.Friday, November 30, 12
  • 2. Sebastian Burkhart github: opyh twitter: opyh app.net: hypo working at bitcrowd.net, BerlinFriday, November 30, 12
  • 3. Content: Technical & Design pitfalls to avoidFriday, November 30, 12
  • 4. = Checklist for your mobile projectsFriday, November 30, 12
  • 5. http://m.moviepilot.comFriday, November 30, 12
  • 6. Friday, November 30, 12
  • 7. Friday, November 30, 12
  • 8. Friday, November 30, 12
  • 9. Friday, November 30, 12
  • 10. Friday, November 30, 12
  • 11. App specsFriday, November 30, 12
  • 12. App specs Minimal Rails app Backbone.Events Backbone.Router ZeptoFriday, November 30, 12
  • 13. swipe.js Used for -like drill-down navigation and -like side-bar menuFriday, November 30, 12
  • 14. swipe.js Has touch event handlers + transform / transition CSSFriday, November 30, 12
  • 15. swipe.js Remove display: table-row for speed!Friday, November 30, 12
  • 16. Micro MVC frameworkFriday, November 30, 12
  • 17. Micro MVC framework Inspired by iOS UIKit ViewController classesFriday, November 30, 12
  • 18. Micro MVC framework UITabBarController + UINavigationControllersFriday, November 30, 12
  • 19. Technical lessonsFriday, November 30, 12
  • 20. Your desktop browser lies. :)Friday, November 30, 12
  • 21. Test every browser / device combination.Friday, November 30, 12
  • 22. Test every browser / device combination. Chrome/Nexus 4 ≠ Chrome/Galaxy S III ≠ built-in browser/Samsung S IIIFriday, November 30, 12
  • 23. Test every browser / device combination. In our case: iPhone 3G faster than Galaxy S3 WTFFriday, November 30, 12
  • 24. → Dont develop with only one device type. → You will need to debug directly on your devices (see Emmas talk).Friday, November 30, 12
  • 25. iOS • Use Safaris Inspector via USB • Enable debugging in your phone settings • Enable Develop menu in desktop Safari preferences • Connect phone via USB • Open inspector via Develop menu item Android • Download Android SDK • Enable USB web debugging on phone (Settings > Advanced > Developer tools) • Connect phone via USB • Use adb forward tcp:9222 localabstract:chrome_devtools_remote on the command line to start a debugging server • Get a remote inspector running inside your desktop browser by navigating to localhost:9222 • Often proposed on the web, but: adb logcat is not reliable for seeing console.log outputFriday, November 30, 12
  • 26. Loading too many images will crash your browserFriday, November 30, 12
  • 27. What’s cool: overflow: scroll is working now.Friday, November 30, 12
  • 28. What’s cool: overflow: scroll is working now (Almost.)Friday, November 30, 12
  • 29. overflow: scroll Avoid more than one top elementFriday, November 30, 12
  • 30. overflow: scroll Use it together with -webkit-overflow- scrolling: touch to enable native scrolling with bounce and momentumFriday, November 30, 12
  • 31. overflow: scroll Build a fallback solution if you need to support older devicesFriday, November 30, 12
  • 32. scrollTop is broken on Android (You can’t set it via JS.) https://code.google.com/p/android/issues/detail?id=19625Friday, November 30, 12
  • 33. scrollTop is broken on Android No good solutions available: Libs like iScroll-4 don’t work reliably Fallback to a non-single-page app? Ignore and wait for browser updates? Use transforms instead?Friday, November 30, 12
  • 34. scrollTop is broken mkII = Many Android browsers reset the scrollTop property to 0 when appending a DOM element.Friday, November 30, 12
  • 35. 300ms lag on tap events Mobile browsers wait for double-tap events. If you want a native app-like feeling: create your own tap event handling.Friday, November 30, 12
  • 36. Expect weird bugs Some examples following…Friday, November 30, 12
  • 37. Expect weird bugs Swallowed events (many browsers)Friday, November 30, 12
  • 38. Expect weird bugs A specific <div> had to wider than 355px to not break performance down completely (iOS)Friday, November 30, 12
  • 39. Expect weird bugs Touch events were delivered to wrong elements (Android, S III, built-in browser)Friday, November 30, 12
  • 40. Expect weird bugs Facebooks new mobile comment widget seems not to work on mobile (the desktop version does, though)Friday, November 30, 12
  • 41. About performance…Friday, November 30, 12
  • 42. About performance… Dont forget your HTML/JS apps compete with native apps.Friday, November 30, 12
  • 43. Requests may be very slowFriday, November 30, 12
  • 44. Requests may be very slow Have HTML content preloaded if possible. HTML strings in a JS map worked well for us.Friday, November 30, 12
  • 45. Add caching on server-sideFriday, November 30, 12
  • 46. Add caching on server-side Make your served content state-independent. Use caching services, e.g. fastly.Friday, November 30, 12
  • 47. Make rendering fastFriday, November 30, 12
  • 48. Make rendering fast Prefer native scrolling and positioning over transformsFriday, November 30, 12
  • 49. Make rendering fastFriday, November 30, 12
  • 50. Make rendering fast Avoid z-indexFriday, November 30, 12
  • 51. Make rendering fastFriday, November 30, 12
  • 52. Make rendering fast Avoid big <div>s, their content may have to be cached in graphics memory as bitmapFriday, November 30, 12
  • 53. Make rendering fastFriday, November 30, 12
  • 54. Make rendering fast Avoid jQuery/Zeptos DOM manipulation methods like append() etc., as they traverse/copy whole DOM structures on JS level.Friday, November 30, 12
  • 55. Make rendering fastFriday, November 30, 12
  • 56. Make rendering fast Use exactly sized images for smoother scrolling (might be much effort if you have to support many display sizes…)Friday, November 30, 12
  • 57. Make rendering fastFriday, November 30, 12
  • 58. Make rendering fast Good news: CSS box-shadows and gradients are fast on most devices.Friday, November 30, 12
  • 59. Make rendering fastFriday, November 30, 12
  • 60. Make rendering fast Good news: CSS box-shadows and gradients are fast on most devices. (...but make them <10px wide. And use inset shadows sparingly, and not over images.)Friday, November 30, 12
  • 61. Design for small displaysFriday, November 30, 12
  • 62. iOS Human Interface GuidelinesFriday, November 30, 12
  • 63. “44 x 44 points is the comfortable minimum size of a tappable UI element.” http://bit.ly/V6OmO9Friday, November 30, 12
  • 64. Touchable UI areas should be bigFriday, November 30, 12
  • 65. Responsive designFriday, November 30, 12
  • 66. Responsive design background-position: 50% 30% background-size: cover …fits landscape and portrait images.Friday, November 30, 12
  • 67. Responsive design Don’t forget to vary screen height when testing CSS media queriesFriday, November 30, 12
  • 68. Responsive design Don’t forget to vary screen height when testing CSS media queries very low in landscape modeFriday, November 30, 12
  • 69. Responsive design Don’t forget to vary screen height when testing CSS media queries very low in Facebook appFriday, November 30, 12
  • 70. Responsive design Don’t forget to vary screen height when testing CSS media queries low because of toolbars :(Friday, November 30, 12
  • 71. Responsive design Don’t hide the address bar just because you can.Friday, November 30, 12
  • 72. Sebastian Burkhart github: opyh twitter: opyh app.net: hypo working at bitcrowd.net, BerlinFriday, November 30, 12