Successfully reported this slideshow.

Mobile web without framework (completed slides)

1

Share

1 of 26
1 of 26

More Related Content

Related Books

Free with a 14 day trial from Scribd

See all

Mobile web without framework (completed slides)

  1. 1. The art of mobile web without optimized frameworks... Getting started with vanilla mobile web Wednesday, 12 June, 13
  2. 2. Jo ETC... The frameworks Mobile web without frameworks, @posabsolute Wednesday, 12 June, 13
  3. 3. At facebook Mobile web without frameworks, @posabsolute Not that long AGO When I’m introspective about the last few years I think the biggest mistake that we made, as a company, is betting too much on HTML5 as opposed to native… because it just wasn’t there. Wednesday, 12 June, 13
  4. 4. Reasons to use the WEB Mobile web without frameworks, @posabsolute 1. No money for an IOS, android blackberry dev 2.Want fast market penetration on all devices 3. Leverage your current web team 4. Prototypes 5. Have a small default mobile app when the app is hit with a phone. Wednesday, 12 June, 13
  5. 5. Mobile web without frameworks, @posabsolute I’m actually, on long-term, really excited about it. One of the things that’s interesting is we actually have more people on a daily basis using mobileWeb Facebook than we have using our iOS or Android apps combined. So mobileWeb is a big thing for us. Wednesday, 12 June, 13
  6. 6. Mobile web without frameworks, @posabsolute Wednesday, 12 June, 13
  7. 7. Problems Facebook faced 1. Fixed Toobars 2. Scrolling in overflown content (problems coming form the fixd position issue) 3. Content animations 4. Infinite data scrolling (like an never ending page usinf the timeline) 5. ajax slow,down connection hickup (interface just freeze), handling offline, etc 6. Android compatibility (poor phones, poor hardware) 7. maps 8. other minor stuff You probably going to face them too... Mobile web without frameworks, @posabsolute Wednesday, 12 June, 13
  8. 8. You won’t solve everything so... Choose your battle! Mobile web without frameworks, @posabsolute Wednesday, 12 June, 13
  9. 9. Getting to know CSS Position: Fixed Mobile web without frameworks, @posabsolute Work perfectly on Android 4.0+, iOS 5+, Windows 8, Blackberry 7.0. Attempting to make it work on older versions is a huge pain in the ass (not worth it, seriously) Don’t forget your metas!!! <meta name="viewport" content="width=device-width"> Wednesday, 12 June, 13
  10. 10. Getting to native feeling with CSS Animations Mobile web without frameworks, @posabsolute 1. Abuse GPU rendering with 3D transformation transform: translateZ(0); 2. Do not get carried away about using more battery (native apps use the gpu anyway) 3. Sometimes it’s going to jerk a bit (Android text antialiase bug is comming in animations) 4. watch out on the number of anims 5. watch out when animating heavy list http://www.html5rocks.com/en/mobile/optimization-and-performance/ 2 ways of using it Wednesday, 12 June, 13
  11. 11. Getting to native feeling with CSS Animations Mobile web without frameworks, @posabsolute http://www.html5rocks.com/en/mobile/optimization-and-performance/ CSS classes (pre-computed) JS animations (not-precomputed) <div id="home-page" class="page"> <h1>Home Page</h1> </div> <div id="products-page" class="page stage-right"> <h1>Products Page</h1> </div> page.style.WebkitTransition = 'all .4s ease-out'; TweenLite.to($overlay[0], 0.35, {css:{opacity:0.5}});! TweenLite.to($popup[0], 0.45, {css:{scale:1, opacity : 1}, onComplete : function(){ ! // DO STUFF }});! Enable gpu rendering -webkit-transform: translate3d(0, 0, 0); translateZ(0) Ameliorate performance trick: -webkit-backface-visibility: hidden; -webkit-perspective: 1000; -webkit-transform: rotateZ(360deg); Wednesday, 12 June, 13
  12. 12. Getting to native feeling with CSS Animations http://www.greensock.com/transitions/ Mobile web without frameworks, @posabsolute Wednesday, 12 June, 13
  13. 13. Crap... infinite Scrolling Mobile web without frameworks, @posabsolute 1. Use paging or load more button (sorry) 2. Be creative 3. Watch out for CSS gradients on all rows for a maximum of performances 4. Watch out for box-shadows 5. Unload images and reload them. http://engineering.linkedin.com/linkedin-ipad-5-techniques-smooth-infinite-scrolling-html5 Wednesday, 12 June, 13
  14. 14. fuck you Android... Mobile web without frameworks, @posabsolute As of december 2012.... http://developer.android.com/about/dashboards/index.html Wednesday, 12 June, 13
  15. 15. fuck you Android... Mobile web without frameworks, @posabsolute As of december 2012.... http://developer.android.com/about/dashboards/index.html Remember my toolbars friends? yeah about that... Wednesday, 12 June, 13
  16. 16. fuck you Android... Mobile web without frameworks, @posabsolute Their lab one year ago Wednesday, 12 June, 13
  17. 17. Hello Nokia! maps Mobile web without frameworks, @posabsolute 1. Nokia was shown as an alternative for Apple maps screw up 2. Unfortunately not that good on android. Wednesday, 12 June, 13
  18. 18. Abuse LOCAL STORAGE Mobile web without frameworks, @posabsolute 1. Hard-limit of about 2.5mb on android, ie10, ios6 2. Cache data (backbone sync work really well with that) 3. Cache entire pages Wednesday, 12 June, 13
  19. 19. HTML5 app at it’s best Linkedin APP Mobile web without frameworks, @posabsolute http://engineering.linkedin.com/linkedin-ipad-5-techniques-smooth-infinite-scrolling-html5 Wednesday, 12 June, 13
  20. 20. Mobile web without frameworks, @posabsolute HTML5 app at it’s best Linkedin APP IT’S DEAD http://venturebeat.com/2013/04/17/linkedin-mobile-web The primary reason for that is, we’re seeing that more and more people are spending more time in the app, and the app is running out of memory. It’s not performance issues, like speed or rendering, but it’s still a big problem. Wednesday, 12 June, 13
  21. 21. Don’t do it all yourself Use some tools Mobile web without frameworks, @posabsolute 1. Multi touch gesture : http://eightmedia.github.io/hammer.js/ 2. Better js animations : http://www.greensock.com/gsap-js/ 3. Fast Click : https://github.com/ftlabs/fastclick 4. HTML5 mobile boilerplate : http://html5boilerplate.com/mobile/ Wednesday, 12 June, 13
  22. 22. Helping you along the way Debugging Tools Mobile web without frameworks, @posabsolute Wednesday, 12 June, 13
  23. 23. A litle help is coming Remote Debug Mobile web without frameworks, @posabsolute You can debug easily chrome for android connecting via usb to your desktop. https://developers.google.com/chrome-developer-tools/ docs/remote-debugging You can do the same with ios6 and safari. http://moduscreate.com/enable-remote-web-inspector-in- ios-6/ Wednesday, 12 June, 13
  24. 24. A little help is coming Remote Debug Mobile web without frameworks, @posabsolute * Check your memory usage * Optimize paints * Optimize your animations http://www.youtube.com/watch?v=Vp524yo0p44 Wednesday, 12 June, 13
  25. 25. A little help is coming Remote Debug Mobile web without frameworks, @posabsolute Find JS errors you aren't even aware of. http://errorception.com/ http://www.muscula.com/ Multiple other choices.. Wednesday, 12 June, 13
  26. 26. DEMO TIME! Mobile web without frameworks, @posabsolute Wednesday, 12 June, 13

×