Mobile Ajax andthe Future of the Web

Daniel K. Appelquist, Senior Technology StrategistVodafone Group Research & Development

2

41 Partner Markets1)

64 Countries

1) Affiliate and non-affiliate Partner Markets

Vision Thing +

News You can Use

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

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

“Mobile 2.0”• SMS -> IM, mobile blogging

• MMS -> Media sharing

• Operator Portals -> Content Search and Discovery

• Premium SMS billing -> Mobile stored value Accounts

• Java Games -> Connected Applications

• Presence & Push-To-Talk -> VOIP applications

• WAP sites -> Web sites that adapt for mobile browsers

• WAP push -> RSS readers

• Wallpaper -> Idle screen applications

• Location-based services -> Proximity and location-aware services

• Content consumption -> Content creation (e.g. mobile blogging)

• Per KB data tariffs -> Flat data tariffs

• Carrier / Operator chooses -> User chooses

Top 11 Mobile 2.0 Trends

• Smart mobile browsers

• Mobile Web Standards

• Mobile Ajax & Widgets

• Mobile Search

• Mobile Ads

• Mobile Mashups & Open APIs

• Mobile RFID & 2D Barcodes

• Location and Geotagging

• Mobile Social Networks

• Mobile User Generated Content

• Smart Web Devices

Why is Mobile Different?Limitations on Mobile

• Small memory footprint

• Lower CPU speeds

• Small screen in varying sizes

• Different input modes

• Slow / high latency network

• Browser fragmentation

Unique device features

• Make and receive calls

• Send/receive an SMS, MMS

• Take pictures

• With you anywhere

• Always on

• Uniquely personal

Mobile phones and other mobile connected devices are personal communication and information tools.

W3CMobileWeb

Initiative

http://w3.org/Mobile/

Mobile Web Best Practices

Best Practice

Detail

MobileOK

• Trust-mark for mobile-friendly content

• Signifies compliance to the best practices

• Machine-readable

Mobile Acid Test1. CSS2 min-width2. Transparent PNG

3. GZIP support4. HTTPS

5. Content-type application/xhtml+xml6. Static SVG7. XMLHTTPRequest8. CSS Media Queries9. Dynamic SVG

http://snurl.com/25n2s

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

Mobile Ajax

JavaScript

DOM Style

Phone Resources

Browser Framework

BETA

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

Mobile AJAX performance

• Progressive rendering• Script tuning• Boosting image loads• Connection strategies• Caching content• Other Ajax tips

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

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

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.

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

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

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

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

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

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.

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

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…

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

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

The Web is Evolving

Thanks!

Thanks to:

• Óscar Gutiérrez Isiégas, Vodafone

• Scott Hughes, Vodafone

• 전종홍 (Jonathan Jeon)ETRI&W3C, South Korea

Daniel Appelquist

Vodafone Group Services Limited

daniel.appelquist [at] vodafone.com

http://torgo.com/blog/

http://mobile2event.com