developer pitfalls & strategies for improving mobile web developer experience

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

Upload: tasneem-sayeed

Post on 15-Jan-2015

2.248 views

Category:

Technology


2 download

DESCRIPTION

This talk will provide strategies to identify common developer pitfalls for web developers developing on a mobile platform. It will further provide coding strategies for improving performance and reducing footprint when developing for a mobile Web platform.The talk will conclude highlighting the activities of the Symbian Foundation Tools team including a roadmap of how the Symbian tools are being evolved to further improve and enhance the mobile web developer experience.

TRANSCRIPT

Page 1: Developer Pitfalls & Strategies for Improving Mobile Web Developer Experience

Mobile 2.0 Conference 2009

Developer Pitfalls and Strategies for Improving

Mobile Web Developer Experience

Tasneem Sayeed

Mobile Technologist

October 16, 2009

Page 2: Developer Pitfalls & Strategies for Improving Mobile Web Developer Experience

Outline

Copyright © 2009 Symbian Foundation. 2

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

Page 3: Developer Pitfalls & Strategies for Improving Mobile Web Developer Experience

Definition of the Mobile Web

Copyright © 2009 Symbian Foundation. 3

“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

Page 4: Developer Pitfalls & Strategies for Improving Mobile Web Developer Experience

Mobile Device Constraints

Copyright © 2009 Symbian Foundation. 4

• 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

Page 5: Developer Pitfalls & Strategies for Improving Mobile Web Developer Experience

Mobile Device Constraints

Copyright © 2009 Symbian Foundation. 5

• 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)

Page 6: Developer Pitfalls & Strategies for Improving Mobile Web Developer Experience

Mobile Web Development Challenges

Copyright © 2009 Symbian Foundation. 6

Page 7: Developer Pitfalls & Strategies for Improving Mobile Web Developer Experience

Mobile Web Development Challenges

Copyright © 2009 Symbian Foundation. 7

• “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!

Page 8: Developer Pitfalls & Strategies for Improving Mobile Web Developer Experience

Tools and Trends

Copyright © 2009 Symbian Foundation. 8

Page 9: Developer Pitfalls & Strategies for Improving Mobile Web Developer Experience

Tools and Trends

Copyright © 2009 Symbian Foundation. 9

• 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

Page 10: Developer Pitfalls & Strategies for Improving Mobile Web Developer Experience

Tools and Trends

Copyright © 2009 Symbian Foundation. 10

• 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

Page 11: Developer Pitfalls & Strategies for Improving Mobile Web Developer Experience

Performance Rules

Copyright © 2009 Symbian Foundation. 11

Page 12: Developer Pitfalls & Strategies for Improving Mobile Web Developer Experience

14 Performance Rules (Yahoo)

Copyright © 2009 Symbian Foundation. 12

1. Make Fewer HTTP Requests

2. Use a Content Delivery Network

3. Add an Expires Header (or Cache-control)

4. GZip Components

5. Put CSS (Stylesheets) at the Top

6. Move Scripts to the Bottom (inline too)

7. Avoid CSS Expressions

8. Make JavaScript and CSS External

9. Reduce DNS Lookups

10. Minify JavaScript and CSS (inline too) CSS

11. Avoid Redirects

12. Remove Duplicate Scripts

13. Configure ETags

14. Make AJAX Cacheable

Source: http://developer.yahoo.com/performance/rules.html

server

server

server

CSS

CSS

javascript

Javascript

content

Javascript

content

Javascript

sserver

content

content

CSS

Page 13: Developer Pitfalls & Strategies for Improving Mobile Web Developer Experience

Performance Rules: Make Fewer HTTP Requests

Copyright © 2009 Symbian Foundation. 13

• Less components = fast page

• HTTP Request overhead

• Combine scripts

• Combine CSS stylesheets

• Combine images into CSS sprites

Page 14: Developer Pitfalls & Strategies for Improving Mobile Web Developer Experience

Performance Rules: GZip Components

Copyright © 2009 Symbian Foundation. 14

• When you send zipped content over the internet, the browser unpacks it

• Modern browsers understand compressed content

• Request headerAccept-Encoding:gzip,deflate

• Response headerContent-Encoding: gzip

• All text components should be sent gzipped: html (php), js, css, xml, txt…

Page 15: Developer Pitfalls & Strategies for Improving Mobile Web Developer Experience

Performance Rules: Put CSS at the Top

Copyright © 2009 Symbian Foundation. 15

• 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>

Page 16: Developer Pitfalls & Strategies for Improving Mobile Web Developer Experience

Performance Rules: Move Scripts to the Bottom

(inline too)

Copyright © 2009 Symbian Foundation. 16

• 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>

Page 17: Developer Pitfalls & Strategies for Improving Mobile Web Developer Experience

Performance Rules: Avoid CSS Expressions

Copyright © 2009 Symbian Foundation. 17

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

Page 18: Developer Pitfalls & Strategies for Improving Mobile Web Developer Experience

Performance Rules:

Make Javascript and CSS External

Copyright © 2009 Symbian Foundation. 18

• Helps with caching, “never expire” policy

• Share with other pages

• However, this is two more HTTP requests

• May want to consider inlining for homepages

Page 19: Developer Pitfalls & Strategies for Improving Mobile Web Developer Experience

Performance Rules: Minify JavaScript and CSS (inline

too)

Copyright © 2009 Symbian Foundation. 19

• 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

Page 20: Developer Pitfalls & Strategies for Improving Mobile Web Developer Experience

Performance Rules

Copyright © 2009 Symbian Foundation. 20

• Avoid Redirects

• A wasted HTTP Request

• Causes a Restart

• Remove Duplicate Scripts

• IE may decide to download them again

Page 21: Developer Pitfalls & Strategies for Improving Mobile Web Developer Experience

Performance Rules: Make AJAX Cacheable

Copyright © 2009 Symbian Foundation. 21

• Content returned from XMLHttpRequestis like any other component

• Returned content must be Gzipped

• Could be cached• Cache-control: max-age=?

Page 22: Developer Pitfalls & Strategies for Improving Mobile Web Developer Experience

Newer Performance Rules

Copyright © 2009 Symbian Foundation. 22

Page 23: Developer Pitfalls & Strategies for Improving Mobile Web Developer Experience

20 New Performance Rules for Faster Web Pages (Yahoo)

Copyright © 2009 Symbian Foundation. 23

1. Flush the buffer early2. Use GET for AJAX requests3. Post-load components4. Preload components5. Reduce the number of DOM elements6. Split components across domains7. Minimize the number of iframes8. No 404s9. Reduce cookie size10. Use cookie-free domains for components11. Minimize DOM access12. Develop smart event handlers13. Choose <link> over @import14. Avoid filters 15. Optimize images16. Optimize CSS sprites17. Don‟t scale images in HTML18. Make favicon.ico small and cacheable19. Keep components under 25K20. Pack components into a multipart document

Source: http://developer.yahoo.com/performance/rules.html

Page 24: Developer Pitfalls & Strategies for Improving Mobile Web Developer Experience

Performance Rules:Use GET for AJAX Requests

Copyright © 2009 Symbian Foundation. 24

• 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)

Page 25: Developer Pitfalls & Strategies for Improving Mobile Web Developer Experience

Performance Rules: Post-Load Components

Copyright © 2009 Symbian Foundation. 25

• 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.htmlYUI Image LoaderYUI Get Utility

Page 26: Developer Pitfalls & Strategies for Improving Mobile Web Developer Experience

Performance Rules: Minimize DOM Access

Copyright © 2009 Symbian Foundation. 26

• 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

Page 27: Developer Pitfalls & Strategies for Improving Mobile Web Developer Experience

Performance Rules:Optimize Images

Copyright © 2009 Symbian Foundation. 27

• 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

Page 28: Developer Pitfalls & Strategies for Improving Mobile Web Developer Experience

Performance Rules: Optimize CSS Sprites

Copyright © 2009 Symbian Foundation. 28

• 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

Page 29: Developer Pitfalls & Strategies for Improving Mobile Web Developer Experience

Performance Rules: Do not scale images in HTML

Copyright © 2009 Symbian Foundation. 29

• 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

Page 30: Developer Pitfalls & Strategies for Improving Mobile Web Developer Experience

Performance Rules: Keep components under 25K

Copyright © 2009 Symbian Foundation. 30

• Because mobile phones may generally not cache them

• Uncompressed size under 25K

• Minify HTML in addition to JavaScript and CSS

Page 31: Developer Pitfalls & Strategies for Improving Mobile Web Developer Experience

Performance Rules:

Pack components into a multipart document

Copyright © 2009 Symbian Foundation. 31

• For UAs that support it

• For example,

• Email with attachments

• MMS

Page 32: Developer Pitfalls & Strategies for Improving Mobile Web Developer Experience

Web Technologies for Symbian

Copyright © 2009 Symbian Foundation. 32

Page 33: Developer Pitfalls & Strategies for Improving Mobile Web Developer Experience

Web Technologies

Copyright © 2009 Symbian Foundation. 33

• 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”

Page 34: Developer Pitfalls & Strategies for Improving Mobile Web Developer Experience

Case Study: Twitter mobile client

Copyright © 2009 Symbian Foundation. 34

• 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/

Page 35: Developer Pitfalls & Strategies for Improving Mobile Web Developer Experience

Case Study: Lessons Learned

Copyright © 2009 Symbian Foundation. 35

• 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

Page 36: Developer Pitfalls & Strategies for Improving Mobile Web Developer Experience

Bridging the Mobile Web Tools Gap

Copyright © 2009 Symbian Foundation. 36

• 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

Page 38: Developer Pitfalls & Strategies for Improving Mobile Web Developer Experience

Summary

Copyright © 2009 Symbian Foundation. 38

• 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!

Page 39: Developer Pitfalls & Strategies for Improving Mobile Web Developer Experience

More Information

Copyright © 2009 Symbian Foundation.

My Blog

http://mymobilecorner.blogspot.com

Follow me on Twitter

http://www.twitter.com/twitmymobile

Symbian Developer Group

http://developer.symbian.org