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

on

  • 1,660 views

 

Statistics

Views

Total Views
1,660
Views on SlideShare
1,625
Embed Views
35

Actions

Likes
2
Downloads
8
Comments
0

3 Embeds 35

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

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Sebastian Burkhart — Berlin.apps.js Nov 2012 Talk Presentation 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