Developer Pitfalls & Strategies for Improving Mobile Web Developer Experience

Mobile 2.0 Conference 2009 Developer Pitfalls and Strategies for Improving Mobile Developer Experience Tasneem Sayeed Mobile Technologist October 16, 2009

Outline  Definition of Mobile Web  Mobile Device Constraints  Mobile Development Challenges  Tools and Trends  Performance Rules and Web Development Strategies  Bridging the Mobile Web Tools Gap  Conclusion Copyright © 2009 Symbian Foundation. 2

Definition of the Mobile Web “Mobile Web”  W3C pushing the idea of “One Web”  Making the same information and services available to users irrespective of the device they are using  Does not mean exactly the same information is available in exactly the same representation across all devices  The context of mobile use, device capability variations, bandwidth issues and mobile network capabilities all affect the representation  Some services and information better suited for and targeted at particular user contexts Source: W3C Mobile best practices „One Web‟ page Copyright © 2009 Symbian Foundation. 3

Mobile Device Constraints • Screen Size/Resolution • Keep Layout as simple and fluid as possible • Keep your page contents all in a single column stacked on top of each other so regardless of screen size/resolution, information simply wraps • Test with and without CSS and JavaScript Copyright © 2009 Symbian Foundation. 4

Mobile Device Constraints • Limited Memory • Limits amount of processing that can be handled • Limited battery power • Limits implementations of JavaScript, Flash and other technologies • Drains battery • Creates a slower user experience • Increases the bandwidth (i.e. can be more costly to download web content) Copyright © 2009 Symbian Foundation. 5

Mobile Web Development Challenges • “Code once, run anywhere” is a foreign concept • Many browser and device types to accommodate • Unresolved connectivity and caching issues to contend • On our 5th Generation of HTML with WML, XHTML, and cHTML still alive • Constellation of mobile platforms • Symbian (Symbian OS-based) • Java ME • BREW • Windows Mobile • Blackberry • iPhone (Objective-C based) • Linux-based Android • Palm Web OS • and more on the way! Copyright © 2009 Symbian Foundation. 7

Tools and Trends • Issues that are gradually finding resolution in the mobile Web world either via ingeniuty of the developer community or market drivers • Device and Platform Proliferation • Coding Standards • Testing Ubiquity • Caching Capabilities • Mobile Web development has more tools available today • J2ME Polish • .NET Compact Framework for Windows Mobile devices • PhoneGap (Cross platform mobile framework) • Rhomobile (open mobile framework) • Titanium Appcelerator and many others • Mobile Complete (remote handset testing) • iLoop (resolves device compatibility by doing heavy lifting for identifying device profile information to enable device detection and automatically serving the right data and format Copyright © 2009 Symbian Foundation. 9

Tools and Trends • W3C Mobile Web initiative continues to drive best practices & standards • HTML5 • Web Forms 2.0, and is expected to be a game-changer in Web application development, making obsolete such plug-in based rich internet application (RIA) technologies such as Adobe Flash, Microsoft Silverlight and Sun JavaFX • New caching capabilities and so on Copyright © 2009 Symbian Foundation. 10

14 Performance Rules (Yahoo) content 1. Make Fewer HTTP Requests 2. Use a Content Delivery Network server server 3. Add an Expires Header (or Cache-control) server 4. GZip Components CSS 5. Put CSS (Stylesheets) at the Top javascript 6. Move Scripts to the Bottom (inline too) CSS 7. Avoid CSS Expressions CSS Javascript 8. Make JavaScript and CSS External content 9. Reduce DNS Lookups 10. Minify JavaScript and CSS (inline too) CSS Javascript 11. Avoid Redirects content Javascript 12. Remove Duplicate Scripts sserver 13. Configure ETags content 14. Make AJAX Cacheable  Source: http://developer.yahoo.com/performance/rules.html Copyright © 2009 Symbian Foundation. 12

Performance Rules: Make Fewer HTTP Requests • Less components = fast page • HTTP Request overhead • Combine scripts • Combine CSS stylesheets • Combine images into CSS sprites Copyright © 2009 Symbian Foundation. 13

Performance Rules: GZip Components • When you send zipped content over the internet, the browser unpacks it • Modern browsers understand compressed content • Request header Accept-Encoding:gzip,deflate • Response header Content-Encoding: gzip • All text components should be sent gzipped: html (php), js, css, xml, txt… Copyright © 2009 Symbian Foundation. 14

Performance Rules: Put CSS at the Top • Firefox and IE will not render anything until the last piece of CSS reaches the wire • Place stylesheets as early as possible in the document <head> <title>Your page here</title> <link href=“styles.css” …> </head> <body> <!– content --> </body> Copyright © 2009 Symbian Foundation. 15

Performance Rules: Move Scripts to the Bottom (inline too) • Scripts block downloads • Since the script can do location.href or document.write at any time, browser blocks rather than downloading possibly useless components • Inline scripts too <body> <!– content --> <script src=“script.js” …/> </body> </html> Copyright © 2009 Symbian Foundation. 16

Performance Rules: Avoid CSS Expressions CSS expression #content { position: absolute; left: expression(document.body.offsetWidth + „px‟); } • In IE, this is the only way to have Javascript in CSS • CSS expressions tend to get executed more often than was intended, think about onmousemove • Smart expressions overwrite themselves Copyright © 2009 Symbian Foundation. 17

Performance Rules: Make Javascript and CSS External • Helps with caching, “never expire” policy • Share with other pages • However, this is two more HTTP requests • May want to consider inlining for homepages Copyright © 2009 Symbian Foundation. 18

Performance Rules: Minify JavaScript and CSS (inline too) • Minify, but still Gzip • JSMin (Written in Javascript, but has a PHP port) • YUI compressor – minifies CSS too • Inline styles and scripts should also be minified • Minification • Removes unnecessary characters from code to reduce its size, thus improving load times • When JS/CSS code is minified, all comments are usually removed as well as unnecessary “white space” characters like <space>, <newline>, and <tab> • With respect to JavaScript, this improves load time performance because the size of the file downloaded is often significantly reduced • Two Popular Tools for Minifying JavaScript code are: • JSMin • YUI Compressor To learn more on Minification tools, see MinifyJS.com and MinifyCSS.com Copyright © 2009 Symbian Foundation. 19

Performance Rules: Make AJAX Cacheable • Content returned from XMLHttpRequest is like any other component • Returned content must be Gzipped • Could be cached • Cache-control: max-age=? Copyright © 2009 Symbian Foundation. 21

20 New Performance Rules for Faster Web Pages (Yahoo) 1. Flush the buffer early 2. Use GET for AJAX requests 3. Post-load components 4. Preload components 5. Reduce the number of DOM elements 6. Split components across domains 7. Minimize the number of iframes 8. No 404s 9. Reduce cookie size 10. Use cookie-free domains for components 11. Minimize DOM access 12. Develop smart event handlers 13. Choose <link> over @import 14. Avoid filters 15. Optimize images 16. Optimize CSS sprites 17. Don‟t scale images in HTML 18. Make favicon.ico small and cacheable 19. Keep components under 25K 20. Pack components into a multipart document Source: http://developer.yahoo.com/performance/rules.html Copyright © 2009 Symbian Foundation. 23

Performance Rules:Use GET for AJAX Requests • GET is for retrieving data • POST is a two-step process (send headers, send data) • GET request is one TCP packet, except in the case you have a lot of cookies • Max URL length is 2K (because of IE) • POST without actually posting data is the same as GET Source: http://developer.yahoo.com/performance/rules.html Yahoo!Mail Research) Copyright © 2009 Symbian Foundation. 24

Performance Rules: Post-Load Components • Determine the components absolutely required initially to render the page. • Rest of the components (i.e. drag and drop, animations, hidden content, images below the fold) can all wait • JavaScript is ideal candidate for splitting Source: http://developer.yahoo.com/performance/rules.html YUI Image Loader YUI Get Utility Copyright © 2009 Symbian Foundation. 25

Performance Rules: Minimize DOM Access • DOM access is the slowest • Cache • Update nodes “offline” and then add them to the tree • Avoid fixing layout with JavaScript Source: http://developer.yahoo.com/performance/rules.html Copyright © 2009 Symbian Foundation. 26

Performance Rules:Optimize Images • GIF – don‟t use a bigger palette than you will need • Use PNGs instead of GIFs • Use pngcrush tool (or optipng or pngoptimizer) • Remove gamma chunks which helps with cross- browser colors • Strip comments • jpegtran – lossless JPEG operations can be used to optimize and remove comments Copyright © 2009 Symbian Foundation. 27

Performance Rules: Optimize CSS Sprites • Choose horizontal over vertical sprites whenever possible • Combine similar colors • Keep color count low (<256) to fit in a PNG8 • “Be mobile-friendly” – don‟t leave big gaps • Filesize doesn‟t increase much, but the image needs to be decompressed into a pixel map Copyright © 2009 Symbian Foundation. 28

Performance Rules: Do not scale images in HTML • Scaling images in HTML downloads unnecessary bytes • If you need <img width=“200” height=“200” src=“myPic.jpg” /> • Better to just have myPic.jpg 200x200 not 1000x1000 Copyright © 2009 Symbian Foundation. 29

Performance Rules: Keep components under 25K • Because mobile phones may generally not cache them • Uncompressed size under 25K • Minify HTML in addition to JavaScript and CSS Copyright © 2009 Symbian Foundation. 30

Web Technologies • Web Runtime (WRT) for S60 devices • A set of componenets based on the WebKit architecture that enables you to apply your skills at creating web content – to createfull mobile web applications that are simple, powerful and optimized for mobile devices • Widget development is simplified with plug-ins for Aptana Studio, Adobe Dreamweaver, and Microsoft Visual Studio • The plug-ins enable developers to create, edit, test, package and deploy widgets all from within their web development tool of their choice For more information:: http://www.forum.nokia.com/Technology_Topics/Web_Technologies/Web_Runtime/ / See Mobile 2.0 Developer Talk on “Developing Web Runtime Widgets with Aptana” Copyright © 2009 Symbian Foundation. 33

Case Study: Twitter mobile client • Design methodologies • Prototype Twitter client for basic twitter functionality using standard Web Services • Download XAMPP (LAMP stack) • Configure Apache Server and PHP (.ini ) • Implement PHP script using cURL and test for • Getting tweets • Updating status • Download Prototype JavaScript standard-compliant library for enabling interactive Web 2.0 development • AJAX.Request() for „get‟ requests • AJAX.Updater() (to make an AJAX request and use the returned data to update a Form element) Due to security constraints, AJAX XMLHttpRequest API's usage is limited by the “same-origin” policy, which means that the hostname of the url you are sending the XMLHttpRequest cannot be different from the hostname of the web server. In order to bypass this AJAX llmitation was necessary to interpose a PHP proxy between the mobile twitter client and the Twitter Server XAMPP: http://www.apachefriends.org/en/xampp.html Prototype.js: http://www.prototypejs.org/ cURL: http://curl.haxx.se/ Copyright © 2009 Symbian Foundation. 34

Case Study: Lessons Learned • Mobile Web Development Tools could be further enhanced to enable a better mobile Web development experience • Mobile Web UI challenges • AJAX cross-domain limitations • JSLint Plugin for JavaScript code validation is helpful • Better debugging capabilities needed Copyright © 2009 Symbian Foundation. 35

Bridging the Mobile Web Tools Gap • Develop an Eclipse Plug-in for Web Development on Symbian to support Nokia‟s Web Runtime (WRT) • Open Source Eclipse Plug-in Alpha with the below features to enable tool developer collaboration by December 2009 • Based on JSDT (part of Eclipse Web Tools Project) • Incremental Project Builder • Creates built state based on project contents, and keeps it synchronized to project changes • Integrated Debugger with basic debugging capabilities Copyright © 2009 Symbian Foundation. 36

Join the Symbian Community Silicon Valley Symbian Programming SIG http://www.meetup.com/Silicon-Valley-Symbian-Developers-Meetup/ Symbian SIG Mailing List Silicon-Valley-Symbian-Developers-Meetup-list@meetup.com Symbian Developer Group http://developer.symbian.org Symbian Exchange & Exposition (SEE 2009) (Oct 27-28), London, UK http://www.see2009.org/ Copyright © 2009 Symbian Foundation. 37

Summary • Make the experience feel like a native application • Take advantage of the enhanced features • Don‟t simply release a hybrid version of the mobile web site • Optimize performance • Collaborate with the developer community to further enhance the mobile Web development experience! Copyright © 2009 Symbian Foundation. 38

More Information My Blog http://mymobilecorner.blogspot.com Follow me on Twitter http://www.twitter.com/twitmymobile Symbian Developer Group http://developer.symbian.org Copyright © 2009 Symbian Foundation.

Developer Pitfalls & Strategies for Improving Mobile Web Developer Experience

0 comments

Notes on slide 1

6 Favorites