Mobile Ajax and the Future of the Web

Slide 1: Mobile Ajax and the Future of the Web Daniel K. Appelquist, Senior Technology Strategist Vodafone Group Research & Development

Slide 2: 64 Countries 41 Partner Markets1) 1) Affiliate and non-affiliate Partner Markets 2

Slide 3: Vision Thing + News You can Use

Slide 4: Within 5 years, the majority of Web usage worldwide will be mobile.

Slide 5: Mobile application developers are increasingly choosing the Web as a platform.

Slide 6: “Mobile 2.0” • SMS -> IM, mobile blogging • WAP push -> RSS readers • MMS -> Media sharing • Wallpaper -> Idle screen applications • Operator Portals -> Content Search and Discovery • Location-based services -> Proximity and location-aware • Premium SMS billing -> Mobile services stored value Accounts • Content consumption -> • Java Games -> Connected Content creation (e.g. mobile Applications blogging) • Presence & Push-To-Talk -> • Per KB data tariffs -> Flat data VOIP applications tariffs • WAP sites -> Web sites that • Carrier / Operator chooses -> adapt for mobile browsers User chooses

Slide 8: Top 11 Mobile 2.0 Trends • Smart mobile browsers • Mobile RFID & 2D Barcodes • Mobile Web Standards • Location and • Mobile Ajax & Widgets Geotagging • Mobile Search • Mobile Social Networks • Mobile Ads • Mobile User Generated • Mobile Mashups & Content Open APIs • Smart Web Devices

Slide 10: Why is Mobile Different? Limitations on Mobile Unique device features • Small memory footprint • Make and receive calls • Lower CPU speeds • Send/receive an SMS, MMS • Small screen in varying sizes • Take pictures • Different input modes • With you anywhere • Slow / high latency network • Always on • Browser fragmentation • Uniquely personal Mobile phones and other mobile connected devices are personal communication and information tools.

Slide 11: W3C Mobile Web Initiative http://w3.org/Mobile/

Slide 12: Mobile Web Best Practices

Slide 13: Best Practice Detail

Slide 16: MobileOK • Trust-mark for mobile-friendly content • Signifies compliance to the best practices • Machine-readable

Slide 17: Mobile Acid Test 1. CSS2 min- 5. Content-type width application/xhtml+xml 2. Transparent 6. Static SVG PNG 7. XMLHTTPRequest 3. GZIP support 8. CSS Media 4. HTTPS Queries 9. Dynamic SVG

Slide 20: http://snurl.com/25n2s

Slide 21: Best Practices 2.0 • How to use Web App development skills to create mobile Web Applications • Exploiting device capabilities • Use of Ajax techniques, CSS, DOM manipulation

Slide 22: Mobile Ajax DOM Style JavaScript Browser Phone Framework Resources BETA

Slide 26: Ajax on Mobile • Ajax for mobile is exactly the same as Ajax on desktop • Ajax mobile/desktop issues are mainly related to inconsistent implementations of web browser components and bad web pages design • Mobile network doesn’t work like a LAN network in several aspects • Multiple proxies mean higher latency • Key issues to keep in mind on mobile: • User perceived latency • Amount of data traffic • Battery life • Browser fragmentation and inconsistent implementations across platforms KNOW YOUR TARGET PLATFORMS

Slide 27: Mobile AJAX performance • Progressive rendering • Script tuning • Boosting image loads • Connection strategies • Caching content • Other Ajax tips

Slide 28: Progressive Render • The user perceived latency is on of the worse lack on mobile space • A blocked user interface or non sign of life can drive a web site to ruin • This effect is caused mainly loading web site resources • Applying some techniques can reduce that effect dramatically

Slide 29: Slow resource load-time…why? • The “80/20 Performance Rule” – 20% downloading html – 80% Http requests to fetch all resources • Stylesheet bad practice • Scripts take priority - blocking loading of parallel resources • Loading additional resources inside of scripts - again, it blocks the browser • Number of resources linked per webpage

Slide 30: Improving your site rendering • Obviously…don’t load unnecessary resources • Keep user informed about web site non-visible activity – “Loading…” screen message can be enough to notify user that site is still alive • JavaScript allows you make dynamic partial screen changes…Do it! • Load JavaScript files at the bottom, when it is possible • Stylesheets – Write CSS references in the document head using link tag – Don’t use CSS expressions, these are evaluated many more times than you can expect – Experiment with external vs. in-line CSS on your chosen target platforms – CSS plain-text optimization – Combine CSS into one file • Try to minimize number of references to external resources (CSS, JS, Images,…) and reduce their weight.

Slide 31: Script Tuning • Scripts contain client-side Web site logic so they are the most important elements from developer point of view • Script files are priority elements for browser on loading time • Scripts can link other resources, be careful that implies new requests, downloading and loading time. • Most of browsers are compatible with compression methods for scripts

Slide 32: Improving your scripts • Generally external JS files are more efficient than inline • In web sites dynamically adapted to different ways of execution (full, limited) load only required JS files • Combine frequently-used scripts onto one file – Side Effect: Caching issues – Side Effect: Not available balance download techniques • Minify scripts – Using compressor libraries (JSMin, Yui compressor,…) – Obfuscated scripts (Side Effect: more complex and can cause bugs) • Use Gzip compressed scripts • Reduce number of resources linked dynamically by the script, specially new script links • Put scripts at the bottom – Avoiding document.write

Slide 33: Boosting Image Loads • Certainly images make richer a web site but also slow load time • Number of parallel image downloads is bigger than other resources but still limited • Graphic transformations as bitmap images scale cause delays

Slide 34: Improving Image Loading • Use inline images to take advantage of browser cache techniques • Adapt and optimize image assets to mobile devices (size, quality, weight,…) • Use scalable images (SVG) where possible

Slide 35: Connection Strategies • Each resource reference implies a new HTTP Request • Remember the “80/20 Performance Rule” – 80% of time with Http requests to fetch all components • Http/1.1 spec suggests a limited number of connections per server • TCP handshake for each Http connection add more latency time, especially in mobile networks

Slide 36: Optimizing your connections • Remember number of concurrent connections is very limited – Around 6 concurrent connections per browser – Only 2 per domain • Reduce number of connections for resources specially scripts because these block any other connection or do that progressively • Avoid this bottleneck spreading static content over different domains or use wildcats DNS entries to same IP (SideEffect: DNS policies and DNS lookup) • Reduce DNS lookups (2-4) It takes time till get IP for a given hostname.

Slide 37: Caching Content • Cached sites reduce loading time spectacularly • Caching techniques are not supported by every browser • Keep on mind in mobile space size of cacheable content is browser dependent • Cache headers can be used to avoid cache components

Slide 38: Improving Cache-ability • If you don’t want to cache components – Use expires header in the past – Always modified – Set up modify cache-control headers. These are different in HTTP/1.0 and HTTP/1.1 • If you want to cache components – Use expires header in the future – Use if-modified-since header – Configure Etags • Testing testing testing • New local storage techniques and request diff from server – Google Gears, DOM:Storage, HTML5 local storage…

Slide 39: Device Atlas • Initiative from dotMobi • Part of dev.mobi • Database of device information + OpenAPI • Implements W3C “Device Description” API • Developed by Andrea Trasatti, one of the architects behind WURFL http://deviceatlas.mobi

Slide 41: What will the Future Bring? • Mobile applications migrate into mobile Web applications and widgets • Consumer expectation of the Web increasingly accepting of different representations on different devices • Browser consolidation and move towards standards compliance • More access to device capabilities, local storage, from within browser scripting layer enables more sophisticated mobile Web Apps

Slide 42: The Web is Evolving

Slide 45: Thanks! Daniel Appelquist Vodafone Group Services Limited daniel.appelquist [at] vodafone.com http://torgo.com/blog/ http://mobile2event.com Thanks to: • Óscar Gutiérrez Isiégas, Vodafone • Scott Hughes, Vodafone • (Jonathan Jeon) ETRI&W3C, South Korea