SEE 2009: Improving Mobile Web Developer Experience

SEE 2009

Improving Mobile Web Developer Experience

Tasneem Sayeed
Technical Lead, Web Tools Platforms
October 27, 2009

Outline
 Definition of Mobile Web
 Mobile Device Constraints
 Mobile Development Challenges
 SEE 2009 Widget Demo Walkthrough
 Sending AJAX Requests and Retrieving Data
 Performance Rules & Mobile 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


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


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)


Mobile Web Development Challenges


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!


Web Technologies for Symbian


Web Technologies
• Web Runtime (WRT) for S60 devices
• A set of components based on the WebKit architecture
that enables you to apply your skills at creating web
content – to create full 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”


SEE 2009 Demo Walkthrough

Demo source code based on SEE 2009 Widget developed by Ivan Litovski, Symbian Foundation


SEE 2009 Widget Demo – index.html
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"
/>
<script type="text/javascript“
src="WRTKit/WRTKit.js"></script>
<script type="text/javascript" src="main.js"></script>
<script type="text/javascript" src="utils.js"></script>
<script type="text/javascript"
src="autoupdate.js"></script>
<script type="text/javascript" src="session.js"></script>
<script type="text/javascript" src="schedule.js"></script>
<script type="text/javascript" src="twitter.js"></script>
<link rel="stylesheet" href="WRTKit/Resources/UI.css“
id="stylesheet">
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body onload="javascript:init();"
onShow="javascript:SetViewMode();“
onResize="javascript:SetViewMode();" >
<div id="main" style="margin: 0px 0px; padding: 0px 0px;
border: none; overflow: hidden;"></div>
<div id="mini" style="margin: 0px 0px; padding: 0px 0px;
border: none; overflow: hidden;"></div>
</body>


SEE 2009 Widget Demo – main.js
function init() {

if (window.widget) {
widget.setNavigationEnabled(false);
menu.showSoftkeys();
var updateMenuItem = new MenuItem("Check for updates", 0);
updateMenuItem.onSelect = CheckForUpdates;
menu.append(updateMenuItem);
// wrt bug fix
setInterval("if ( IsHSViewMode() ) UpdateMiniView();", 30000);
}

// create UI manager
uiManager = new UIManager(document.getElementById("main"));
:
:
twitterView = new ListView(null,
"<img style='margin: 0px 0px; padding: 0px 0px; border: none‘ src='home.png'>");

schedule = new Schedule();
schedule.Init(scheduleFile, function(event){
ShowMainView();
});

if ( !window.widget ) {
// for firefox / firebug testing
CheckForUpdates();
}
}


SEE 2009 Widget Demo – main.js
// Called when the data is loaded
function ShowMainView(){
if (mainView == null) {
UpdateMiniView();
mainView = new ListView(null, header);
var currentSessions = schedule.GetCurrentSessions();
if (currentSessions != null) {
// todo
}

:
:

twitterView.previousView = mainView;
var twitterTitle = new NavigationButton(null, "tweetz-icon.png",
"<img src='tweetz.png' border=0>");
twitterTitle.addEventListener("ActionPerformed", function(event){
if ( twitter == null ) {
twitter = new Twitter(twitterView);
}
twitter.Update(10);
twitterView.show();
});
mainView.addControl(twitterTitle);
//twitter = new Twitter(mainView);
//twitter.Update(10);
mainView.previousView = null;
}
mainView.show();
}


Sending AJAX Requests and
Retrieving Data using Nokia WRT


Update Twitter Status using WRT
Twitter.prototype.Update = function(numToShow){
this.numToShow = numToShow;
if ( this.buttons == null ) {

// add the separator
var separator = new NavigationButton(null, "tweetz-icon.png",
"<img src='tweetz.png' border=0>");
separator.setEnabled(false);
this.parentView.addControl(separator);

// create buttons
this.buttons = new Array();
for( var i = 0 ; i < this.numToShow; i++ ) {
var button = new NavigationButton("twitter_button_"+i,
null , "");
this.parentView.addControl(button);
this.buttons.push(button);
}
this.buttons[0].setText("Loading twitter feed...");
}


Sending AJAX Requests using Twitter API

// Twitter API for getting a user’s RSS feed
var twitterurl =
"http://twitter.com/statuses/user_timeline/TwitMyMobile.rss";

// Get the rss feed
// Prepare for asynchronous download
this.http = new Ajax();

// true means asynchronous request
this.http.open("GET", twitterurl , true);

// When the AJAX request is done, it will call self.DoUpdate()
this.http.onreadystatechange = function()
{ self.DoUpdate(); };

// send the AJAX request
this.http.send(null);


Parsing the RSS Data: DoUpdate()
Twitter.prototype.DoUpdate = function(){
if (this.http.readyState == 4) {

try {
// Get parsed Doc
var xmlDoc = this.http.responseXML;
if (xmlDoc == null) {
// if the content type is not set correctly,
// we get the response as text
var xmlparser = new DOMParser();
xmlDoc =
xmlparser.parseFromString(this.http.responseText,
"text/xml");
}
var itemElements =
xmlDoc.getElementsByTagName("item");
var loopEnd = Math.min(this.numToShow,
itemElements.length);
// traverse elements and create buttons
for (var i = 0; i < loopEnd; i++) {
// iterate through child nodes of this item
// and gather tweets
var title = null;
var date = null;


node = itemElements[i].firstChild;
while (node != null) {
if (node.nodeType == Node.ELEMENT_NODE){
if (node.nodeName == "title") {
// item title
title = getTextOfNode(node);
}
else if (node.nodeName == "pubDate" ||
node.nodeName == "dc:date") {
// item publishing date
date = getTextOfNode(node);
}
} end while
node = node.nextSibling;
} // end for

this.buttons[i].setText("<font size=0.6em><i>" +
date + "</i> " + title + "</font>");
this.buttons[i].setImage("tweet.png");
} // end if (xmldoc == null)
} // end try



catch (x) {
this.buttons[0].setText(
"<font size=0.6em>Uh-Oh! Tweetz not tweeting
right now.</font>");

for (var i = 0; i < this.numToShow; i++) {
this.buttons[i].setText("");
this.buttons[i].setImage(null);
} // end for

} // end catch
} // if (this.http.readyState == 4) {
}


Parsing the data: getTextofNode()
// Returns the text of a node.
function getTextOfNode(node) {
var buf = "";
// iterate through all child elements and
// collect all text to the buffer
var child = node.firstChild;
while (child != null) {
if (child.nodeType == Node.TEXT_NODE ||
child.nodeType == Node.CDATA_SECTION_NODE)
{
// append text to buffer
if (buf != "") {
buf += " ";
}
buf += child.nodeValue;
}
child = child.nextSibling;
}
// make link if there is a url
var ind = buf.indexOf("http://");
var endind = buf.indexOf(" ", ind);
if ( ind != -1 ) {
var tmp = buf.substring(0,ind);
var url = "";


Parsing the data: getTextofNode()

if ( endind == -1 ) {
url = buf.substring(ind);
} else {
url = buf.substring(ind, endind);
}

tmp += "<div class="FeedItemLink">";
tmp += "<a href="JavaScript:void(0)"
onclick="openURL('" + url + "');
return false;">";
tmp += url + "</a></div>";

if ( endind != -1 ) {
tmp += buf.substring(endind);
}

buf = tmp;
}
return buf;
}


Performance Rules


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


Performance Rules: Make Fewer HTTP Requests

• Less components = fast page
• HTTP Request overhead
• Combine scripts
• Combine CSS stylesheets
• Combine images into CSS sprites


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…


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>


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>


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


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


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


Performance Rules

• Avoid Redirects
• A wasted HTTP Request
• Causes a Restart
• Remove Duplicate Scripts
• IE may decide to download them again


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=?


Newer Performance Rules


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


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


Yahoo!Mail Research)


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

YUI Image Loader
YUI Get Utility


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



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


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


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


Performance Rules:
Pack components into a multipart document

• For UAs that support it
• For example,
• Email with attachments
• MMS


Bridging the Mobile Web Tools Gap

• Develop an Eclipse Plug-in for Web Development on
Symbian to support Web Runtimes
• 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


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/


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!


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.

SEE 2009: Improving Mobile Web Developer Experience

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Ähnlich wie SEE 2009: Improving Mobile Web Developer Experience

Ähnlich wie SEE 2009: Improving Mobile Web Developer Experience (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

SEE 2009: Improving Mobile Web Developer Experience