Upload
daniel-appelquist
View
21.579
Download
2
Embed Size (px)
DESCRIPTION
My presentation at Web 2.0 Expo San Francisco on 24 April 2008.
Citation preview
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.
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
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