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

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

• 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

• 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

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

src="WRTKit/WRTKit.js"></script>

src="autoupdate.js"></script>

id="stylesheet">

</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) {

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

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

javascript

Javascript

content

Javascript

content

Javascript

sserver

content

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 headerAccept-Encoding:gzip,deflate

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

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

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

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

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

Source: http://developer.yahoo.com/performance/rules.htmlYUI Image LoaderYUI 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

• 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

SEE 2009: Improving Mobile Web Developer Experience

Technology

Transcript of SEE 2009: Improving Mobile Web Developer Experience

Developer Services Construction Details€¦ · options and details see developer services detail 10 (stnd/19/010). double steps shall be plastic encapsulated carbon steel. double

Do you see yourself as a Software Developer? · Do you see yourself as a Developer? Software Further study into computer science can help you build the foundation of your future career.

Using Oracle® SQL Developer Web...Oracle SQL Developer Web provides features to support accessibility. See SQL Developer Web Accessibility Guide. Related Documents For the desktop

Improving the performance of light-sensitive developer ...€¦ · Improving the performance of light-sensitive developer-soluble anti-reflective coatings by using adamantyl terpolymers

Improving the Drupal Developer Experience with DevCloud, Managed Cloud and the Acquia Network

Developer Culture (at least as I see it)

Scaling Oracle with pNFS: Improving Database …...2012 Storage Developer Conference. © Insert Your Company Name. All Rights Reserved. Scaling Oracle with pNFS: Improving Database

Improving Automation in Developer Testing: Test Oraclesprolangs.cs.vt.edu/rutgers/meetings/seday2008/slides/Xie/slides.pdf · Test Case = Test Input + Test Oracle T. Xie. Improving

Learning to See Improving Work Flow LCJ_11_005

VOYAGER Data Explorer: Architecture and Technologies See also the the Voyager Developer Website and early ApplicationsDeveloper WebsiteApplications Layered.

Developer Contributions for Transportation Facilities ... Report.pdf · Alternative Funding Strategies for Improving Transportation Facilities 4 When considering the creation of a

Index [editorial.mcpressonline.com]editorial.mcpressonline.com/web/mcpdf.nsf/wdocs/... · Application developer. See IBM Certified Application Developer, DB2 9.7 Application period,

Developer Guide - PayPal...PayPal Here Android SDK ~ Developer Guide • Each request must contain an authentication token; see . Authenticating SDK operations. The workflow . An app

Developer - download.microsoft.comdownload.microsoft.com/.../Chart_your_Career_-_Developer_-_Poste… · Developer Enterprise Application Developer Web Developer Windows Developer

Full Stack Developer - topofminds.com · Full Stack Developer The Full stack-end Developer focuses on the further development of both front- and back-end of the Lepaya platform (improving

Mobile developer is Software developer

MySQL Connector/J 5.1 Developer Guide · your issues with other MySQL users. Licensing information. This product may include third-party software, ... See MySQL Connector/J 8.0 Developer

Retrospec)ves+– Tips,+Tricks+and+Traps+files.meetup.com › 2974112 › LouisvilleAgileForum... · Earl!Evere(! • Enterprise!Agile!Coach!!!!!with!Improving!Enterprises! • Developer,!Tester,!Manager,!Director!

Improving OpenSSL* performance white paper - Intel® Developer

Developer Pitfalls & Strategies for Improving Mobile Web Developer Experience