Adventures in Facebook®:

Lessons Learned from a Landmark webOS App

Kevin DeckerDeveloper Relations Engineer

April 24, 2010

Best Practices

Debugging

Tools

Classes and Libraries

Open Source

Agenda

Best Practices

Widgets

• Problem• Duplicated UI and

backing logic throughout the app

• Maintenance nightmare

• Solution• Custom Mojo™ widgets

Widgets

• Class in Mojo.Widget namespace• setup function

•Renders HTML

•Registers events

• cleanup function•Unregisters events, etc.

• All Mojo APIs available• Reference class by name in x-mojo-element

attribute

Widgets—Advanced

• Subwidgets• controller.instantiateChildWidgets(controller.element)

• controller.exposeMethod• Mojo.Event.send

Avoid Document References

• Multiple stage = multiple documents• Execution occurs in data document • Consequences:

• References to document object will fail•document.getElementById

•document.querySelector

• Mojo.Controller.stageController• Prototype extensions may fail

Multiple stage readiness

Avoid Document References

• Fixes:• document.getElementById

•sceneController.get

• document.querySelector•sceneController.sceneElement.querySelector

• Mojo.Controller.stageController•sceneController.stageController

•Mojo.appController.getActiveStageController

• $(elId).x()•Form/Element.x(sceneController.get(elId))

Multiple stage readiness

Periodic Tasks

• Two methods:• palm://com.palm.power/timeout service• setInterval

• Limited to app lifetime: setInterval• Outliving app: Timeout service

Debugging

Inspecting Multistage Applications

• Process/document under Multistage• Data document• Stage documents

• applicationManager service• bit.ly/aQFnuF

• stage-inspect script• github.com/kpdecker/stage-inspect

Logging

• Error.prototype.toString• Function wrappers

• wrapInLogger• wrapInErrorHandler

•DebugLogging.wrapInErrorHandler(

"Mojo.Controller.SceneController”,

[ "assistantSetup", "assistantCleanup" ]);

• traceWrapper• Exceptions are not logged in API callbacks

DEBUGGING ONLY

Tools

Tools

• palm-run• Build+execution utility

•Build

•Deploy

•Launch

•Log

• github.com/dalmaer/palm-run

• i18nScanner• Scans for untranslated JavaScript and HTML strings• Generates report of i18n tokens• github.com/kpdecker/i18nScanner

Classes and Libraries

Operation Queue

• Frequently need to block multiple calls on a method• Init callbacks• Dataset refresh

• OperationQueue• queue• getSuccessHandler• getErrorHandler

Login

Notify

Status

Observer Manager

• Alternative to sendEventToCommanders and sendToNotificationChain APIs

• Notifications while scene/stage inactive

• Deferred notifications

• ObserveManager• setup• cleanup• observe• stopObserving

Service Request Wrapper

• Mojo.Service.Request maintain weak reference• Garbage collection can

prevent callback

• ServiceRequestWrapper• request

• Same signature as Mojo.Service.Request

• Maintains references

• Cancels completed requests

• Similar to scene serviceRequest

Caching Data

• Remote data sources• Potentially broken

connections• User expectations

• CacheManager• Depot wrapper• Simplifies init, access,

and expiration• load

• store

Paging Data Source

• Many data sources only differ in a few places

• Examples• Event List• Profile Wall

• Common needs:• Paging• Arbitrary size• Caching

• DataModelBase• getRange

• Look ahead algorithm

• refresh• Subclasses:

• loadRange• getCacheName

Continuously Loading Paged List

• UI companion to paged data list• Transparently handles page loading

• Refresh indicator

• Mojo.Widget.PagedList• <div id=“listName”

x-mojo-element=“PagedList”></div>• this.controller.setupWidget("listEvents", {

itemTemplate: "events-list/events-item-template”,

emptyTemplate: "events-list/events-empty-template”,

hasNoWidgets: true

}, this.eventList);

Open Sourced

• All of the libraries open sourced• github.com/palm/webos-samples

• Further details (to come)• incaseofstairs.com

&Q A