• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Mobile web without framework (completed slides)
 

Mobile web without framework (completed slides)

on

  • 770 views

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

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

Statistics

Views

Total Views
770
Views on SlideShare
688
Embed Views
82

Actions

Likes
1
Downloads
0
Comments
0

2 Embeds 82

http://repo.itsix.com 73
https://twitter.com 9

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

    Mobile web without framework (completed slides) Mobile web without framework (completed slides) Presentation Transcript

    • 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 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
    • 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
    • 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
    • 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. 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
    • 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+, 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
    • 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
    • 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
    • Getting to native feeling withCSS Animationshttp://www.greensock.com/transitions/Mobile web without frameworks, @posabsoluteWednesday, 12 June, 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
    • fuck youAndroid...Mobile web without frameworks, @posabsoluteAs of december 2012....http://developer.android.com/about/dashboards/index.htmlWednesday, 12 June, 13
    • 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
    • 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. Unfortunately not that good on android.Wednesday, 12 June, 13
    • 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
    • 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
    • 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
    • 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
    • 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 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
    • 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
    • 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
    • DEMO TIME!Mobile web without frameworks, @posabsoluteWednesday, 12 June, 13