Demo Lab 1_tasneem Sayeed_symbian Foundation

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

Copyright © 2009 Symbian Foundation.

3

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

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

Copyright © 2009 Symbian Foundation.

6

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

Web Technologies for Symbian

Copyright © 2009 Symbian Foundation.

8

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”

Copyright © 2009 Symbian Foundation.

9

SEE 2009 Demo Walkthrough

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

Copyright © 2009 Symbian Foundation.

10

SEE 2009 Widget Demo – index.html <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <script type="text/javascript“ src="WRTKit/WRTKit.js"> <script type="text/javascript" src="main.js"> <script type="text/javascript" src="utils.js"> <script type="text/javascript" src="autoupdate.js"> <script type="text/javascript" src="session.js"> <script type="text/javascript" src="schedule.js"> <script type="text/javascript" src="twitter.js"> Copyright © 2009 Symbian Foundation.

11

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, ""); schedule = new Schedule(); schedule.Init(scheduleFile, function(event){ ShowMainView(); }); if ( !window.widget ) { // for firefox / firebug testing CheckForUpdates(); } }

Copyright © 2009 Symbian Foundation.

12

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", ""); 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(); } Copyright © 2009 Symbian Foundation.

13

Sending AJAX Requests and Retrieving Data using Nokia WRT

Copyright © 2009 Symbian Foundation.

14

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", ""); 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..."); }

Copyright © 2009 Symbian Foundation.

15

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

Copyright © 2009 Symbian Foundation.

16

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;

Copyright © 2009 Symbian Foundation.

17

Parsing the RSS Data: DoUpdate() 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("" + date + " " + title + ""); this.buttons[i].setImage("tweet.png"); } // end if (xmldoc == null) } // end try

Copyright © 2009 Symbian Foundation.

18

Parsing the RSS Data: DoUpdate() catch (x) { this.buttons[0].setText( "Uh-Oh! Tweetz right now.");

not tweeting

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

Copyright © 2009 Symbian Foundation.

19

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 = "";

Copyright © 2009 Symbian Foundation.

20

Parsing the data: getTextofNode() if ( endind == -1 ) { url = buf.substring(ind); } else { url = buf.substring(ind, endind); } tmp += ""; if ( endind != -1 ) { tmp += buf.substring(endind); } buf = tmp; } return buf; }

Copyright © 2009 Symbian Foundation.

21

Performance Rules

Copyright © 2009 Symbian Foundation.

22

14 Performance Rules (Yahoo) 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14.

Make Fewer HTTP Requests Use a Content Delivery Network Add an Expires Header (or Cache-control) GZip Components Put CSS (Stylesheets) at the Top Move Scripts to the Bottom (inline too) Avoid CSS Expressions CSS Make JavaScript and CSS External Reduce DNS Lookups Minify JavaScript and CSS (inline too) CSS Avoid Redirects Remove Duplicate Scripts Configure ETags Make AJAX Cacheable


Copyright © 2009 Symbian Foundation.

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

23

content server server server CSS javascript CSS 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

Copyright © 2009 Symbian Foundation.

24

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.

25

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

Copyright © 2009 Symbian Foundation.

26

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 <script src=“script.js” …/>

Copyright © 2009 Symbian Foundation.

27

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.

28

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.

29

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>, , and • 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.

30

Performance Rules

•

•

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

Copyright © 2009 Symbian Foundation.

31

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.

32

Newer Performance Rules

Copyright © 2009 Symbian Foundation.

33

20 New Performance Rules for Faster Web Pages (Yahoo) 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19. 20.

Flush the buffer early Use GET for AJAX requests Post-load components Preload components Reduce the number of DOM elements Split components across domains Minimize the number of iframes No 404s Reduce cookie size Use cookie-free domains for components Minimize DOM access Develop smart event handlers Choose over @import Avoid filters Optimize images Optimize CSS sprites Don’t scale images in HTML Make favicon.ico small and cacheable Keep components under 25K Pack components into a multipart document

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

Copyright © 2009 Symbian Foundation.

34

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.

35

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.

36

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.

37

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 pngoptimizer) Remove gamma chunks which helps with crossbrowser colors Strip comments jpegtran – lossless JPEG operations can be used to optimize and remove comments

Copyright © 2009 Symbian Foundation.

38

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

Copyright © 2009 Symbian Foundation.

39

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.

40

Performance Rules: Pack components into a multipart document

• •

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

Copyright © 2009 Symbian Foundation.

41

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

Copyright © 2009 Symbian Foundation.

42

Join the Symbian Community Silicon Valley Symbian Programming SIG http://www.meetup.com/Silicon-Valley-Symbian-Developers-Meetup/ Symbian SIG Mailing List [email protected] 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.

43

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.

44

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.