The art of mobile web without optimized frameworks...Getting started with vanilla mobile webWednesday, 12 June, 13
JoETC...The frameworksMobile web without frameworks, @posabsoluteWednesday, 12 June, 13
At facebookMobile web without frameworks, @posabsoluteNot that long AGOWhen I’m introspective about the last few years Ith...
Reasons to use theWEBMobile web without frameworks, @posabsolute1. No money for an IOS, android blackberry dev2.Want fast ...
Mobile web without frameworks, @posabsoluteI’m actually, on long-term, really excited about it. Oneof the things that’s in...
Mobile web without frameworks, @posabsoluteWednesday, 12 June, 13
Problems Facebook faced1. Fixed Toobars2. Scrolling in overflown content (problems coming form the fixd position issue)3. ...
You won’t solve everything so...Choose your battle!Mobile web without frameworks, @posabsoluteWednesday, 12 June, 13
Getting to know CSSPosition: FixedMobile web without frameworks, @posabsoluteWork perfectly on Android 4.0+, iOS 5+, Windo...
Getting to native feeling withCSS AnimationsMobile web without frameworks, @posabsolute1. Abuse GPU rendering with 3D tran...
Getting to native feeling withCSS AnimationsMobile web without frameworks, @posabsolutehttp://www.html5rocks.com/en/mobile...
Getting to native feeling withCSS Animationshttp://www.greensock.com/transitions/Mobile web without frameworks, @posabsolu...
Crap...infinite ScrollingMobile web without frameworks, @posabsolute1. Use paging or load more button (sorry)2. Be creativ...
fuck youAndroid...Mobile web without frameworks, @posabsoluteAs of december 2012....http://developer.android.com/about/das...
fuck youAndroid...Mobile web without frameworks, @posabsoluteAs of december 2012....http://developer.android.com/about/das...
fuck youAndroid...Mobile web without frameworks, @posabsoluteTheir lab one year agoWednesday, 12 June, 13
Hello Nokia!mapsMobile web without frameworks, @posabsolute1. Nokia was shown as an alternative for Applemaps screw up2. U...
AbuseLOCAL STORAGEMobile web without frameworks, @posabsolute1. Hard-limit of about 2.5mb on android, ie10, ios62. Cache d...
HTML5 app at it’s bestLinkedin APPMobile web without frameworks, @posabsolutehttp://engineering.linkedin.com/linkedin-ipad...
Mobile web without frameworks, @posabsoluteHTML5 app at it’s bestLinkedin APPIT’S DEADhttp://venturebeat.com/2013/04/17/li...
Don’t do it all yourselfUse some toolsMobile web without frameworks, @posabsolute1. Multi touch gesture : http://eightmedi...
Helping you along the wayDebugging ToolsMobile web without frameworks, @posabsoluteWednesday, 12 June, 13
A litle help is comingRemote DebugMobile web without frameworks, @posabsoluteYou can debug easily chrome for android conne...
A little help is comingRemote DebugMobile web without frameworks, @posabsolute* Check your memory usage* Optimize paints* ...
A little help is comingRemote DebugMobile web without frameworks, @posabsoluteFind JS errors you arent even aware of.http:...
DEMO TIME!Mobile web without frameworks, @posabsoluteWednesday, 12 June, 13
Upcoming SlideShare
Loading in...5
×

Mobile web without framework (completed slides)

854

Published on

The art of doing mobile web apps without the use of optimized frameworks like jQuery Mobile

Published in: Technology, Design
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
854
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Mobile web without framework (completed slides)

  1. 1. The art of mobile web without optimized frameworks...Getting started with vanilla mobile webWednesday, 12 June, 13
  2. 2. JoETC...The frameworksMobile web without frameworks, @posabsoluteWednesday, 12 June, 13
  3. 3. At facebookMobile web without frameworks, @posabsoluteNot that long AGOWhen I’m introspective about the last few years Ithink the biggest mistake that we made, as acompany, is betting too much on HTML5 asopposed to native… because it just wasn’t there.Wednesday, 12 June, 13
  4. 4. Reasons to use theWEBMobile web without frameworks, @posabsolute1. No money for an IOS, android blackberry dev2.Want fast market penetration on all devices3. Leverage your current web team4. Prototypes5. Have a small default mobile app when the app is hit with a phone.Wednesday, 12 June, 13
  5. 5. Mobile web without frameworks, @posabsoluteI’m actually, on long-term, really excited about it. Oneof the things that’s interesting is we actually havemore people on a daily basis using mobileWebFacebook than we have using our iOS or Android appscombined. So mobileWeb is a big thing for us.Wednesday, 12 June, 13
  6. 6. Mobile web without frameworks, @posabsoluteWednesday, 12 June, 13
  7. 7. Problems Facebook faced1. Fixed Toobars2. Scrolling in overflown content (problems coming form the fixd position issue)3. Content animations4. Infinite data scrolling (like an never ending page usinf the timeline)5. ajax slow,down connection hickup (interface just freeze), handling offline, etc6. Android compatibility (poor phones, poor hardware)7. maps8. other minor stuffYou probably going to face them too...Mobile web without frameworks, @posabsoluteWednesday, 12 June, 13
  8. 8. You won’t solve everything so...Choose your battle!Mobile web without frameworks, @posabsoluteWednesday, 12 June, 13
  9. 9. Getting to know CSSPosition: FixedMobile web without frameworks, @posabsoluteWork perfectly on Android 4.0+, iOS 5+, Windows 8,Blackberry 7.0.Attempting to make it work on older versions is a hugepain 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 withCSS AnimationsMobile web without frameworks, @posabsolute1. 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 inanimations)4. watch out on the number of anims5. watch out when animating heavy listhttp://www.html5rocks.com/en/mobile/optimization-and-performance/2 ways of using itWednesday, 12 June, 13
  11. 11. Getting to native feeling withCSS AnimationsMobile web without frameworks, @posabsolutehttp://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 withCSS Animationshttp://www.greensock.com/transitions/Mobile web without frameworks, @posabsoluteWednesday, 12 June, 13
  13. 13. Crap...infinite ScrollingMobile web without frameworks, @posabsolute1. Use paging or load more button (sorry)2. Be creative3. Watch out for CSS gradients on all rows for a maximum ofperformances4. Watch out for box-shadows5. Unload images and reload them.http://engineering.linkedin.com/linkedin-ipad-5-techniques-smooth-infinite-scrolling-html5Wednesday, 12 June, 13
  14. 14. fuck youAndroid...Mobile web without frameworks, @posabsoluteAs of december 2012....http://developer.android.com/about/dashboards/index.htmlWednesday, 12 June, 13
  15. 15. fuck youAndroid...Mobile web without frameworks, @posabsoluteAs of december 2012....http://developer.android.com/about/dashboards/index.htmlRemember my toolbars friends? yeah about that...Wednesday, 12 June, 13
  16. 16. fuck youAndroid...Mobile web without frameworks, @posabsoluteTheir lab one year agoWednesday, 12 June, 13
  17. 17. Hello Nokia!mapsMobile web without frameworks, @posabsolute1. Nokia was shown as an alternative for Applemaps screw up2. Unfortunately not that good on android.Wednesday, 12 June, 13
  18. 18. AbuseLOCAL STORAGEMobile web without frameworks, @posabsolute1. Hard-limit of about 2.5mb on android, ie10, ios62. Cache data (backbone sync work really well with that)3. Cache entire pagesWednesday, 12 June, 13
  19. 19. HTML5 app at it’s bestLinkedin APPMobile web without frameworks, @posabsolutehttp://engineering.linkedin.com/linkedin-ipad-5-techniques-smooth-infinite-scrolling-html5Wednesday, 12 June, 13
  20. 20. Mobile web without frameworks, @posabsoluteHTML5 app at it’s bestLinkedin APPIT’S DEADhttp://venturebeat.com/2013/04/17/linkedin-mobile-webThe primary reason for that is, we’re seeingthat more and more people are spendingmore time in the app, and the app is runningout of memory. It’s not performance issues,like speed or rendering, but it’s still a bigproblem.Wednesday, 12 June, 13
  21. 21. Don’t do it all yourselfUse some toolsMobile web without frameworks, @posabsolute1. 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/fastclick4. HTML5 mobile boilerplate : http://html5boilerplate.com/mobile/Wednesday, 12 June, 13
  22. 22. Helping you along the wayDebugging ToolsMobile web without frameworks, @posabsoluteWednesday, 12 June, 13
  23. 23. A litle help is comingRemote DebugMobile web without frameworks, @posabsoluteYou can debug easily chrome for android connecting viausb to your desktop.https://developers.google.com/chrome-developer-tools/docs/remote-debuggingYou 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 comingRemote DebugMobile web without frameworks, @posabsolute* Check your memory usage* Optimize paints* Optimize your animationshttp://www.youtube.com/watch?v=Vp524yo0p44Wednesday, 12 June, 13
  25. 25. A little help is comingRemote DebugMobile web without frameworks, @posabsoluteFind JS errors you arent 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, @posabsoluteWednesday, 12 June, 13

×