adventures in facebook®: lessons learned from a landmark webos app
DESCRIPTION
The Facebook app team shares tips and tricks directly from the Facebook playbook that will help make your own webOS apps easier to create and maintain. Get the inside scoop on techniques they developed for debugging, data management, and common webOS tasks. Open source included.TRANSCRIPT
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