Adventures in Facebook®: Lessons Learned from a Landmark webOS App


Published on

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.

Published in: Technology
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • Little background on myself.Initial impressions of webOS.Something along the lines of rapid development with a few quirksAnd we’re here to help you out with some of those common problemsInherited codebaseComplex codeComplex problemsAssist You
  • Adventures in Facebook®: Lessons Learned from a Landmark webOS App

    1. 1.
    2. 2. Adventures in Facebook®:Lessons Learned from a Landmark webOS App<br />Kevin Decker<br />Developer Relations Engineer<br />April 24, 2010<br />
    3. 3. Best Practices<br />Debugging<br />Tools<br />Classes and Libraries<br />Open Source<br />Agenda<br />
    4. 4. Best Practices<br />
    5. 5. Widgets<br />Problem<br />Duplicated UI and backing logic throughout the app<br />Maintenance nightmare<br /><ul><li>Solution
    6. 6. Custom Mojo™ widgets</li></li></ul><li>Widgets<br />Class in Mojo.Widget namespace<br />setup function<br />Renders HTML<br />Registers events<br />cleanup function<br />Unregisters events, etc.<br />All Mojo APIs available<br />Reference class by name in x-mojo-element attribute<br />
    7. 7. Widgets—Advanced<br />Subwidgets<br />controller.instantiateChildWidgets(controller.element)<br />controller.exposeMethod<br />Mojo.Event.send<br />
    8. 8. Avoid Document References<br />Multiple stage = multiple documents<br />Execution occurs in data document <br />Consequences:<br />References to document object will fail<br />document.getElementById<br />document.querySelector<br />Mojo.Controller.stageController<br />Prototype extensions may fail<br />Multiple stage readiness<br />
    9. 9. Avoid Document References<br />Fixes:<br />document.getElementById<br />sceneController.get<br />document.querySelector<br />sceneController.sceneElement.querySelector<br />Mojo.Controller.stageController<br />sceneController.stageController<br />Mojo.appController.getActiveStageController<br />$(elId).x()<br />Form/Element.x(sceneController.get(elId))<br />Multiple stage readiness<br />
    10. 10. Periodic Tasks<br />Two methods:<br />palm://com.palm.power/timeout service<br />setInterval<br />Limited to app lifetime: setInterval<br />Outliving app: Timeout service<br />
    11. 11. Debugging<br />
    12. 12. Inspecting Multistage Applications<br />Process/document under Multistage<br />Data document<br />Stage documents<br />applicationManager service<br /><br />stage-inspect script<br /><br />
    13. 13. Logging<br />Error.prototype.toString<br />Function wrappers<br />wrapInLogger<br />wrapInErrorHandler<br />DebugLogging.wrapInErrorHandler(<br /> "Mojo.Controller.SceneController”,<br /> [ "assistantSetup", "assistantCleanup" ]);<br />traceWrapper<br />Exceptions are not logged in API callbacks<br />DEBUGGING ONLY<br />
    14. 14. Tools<br />
    15. 15. Tools<br />palm-run<br />Build+execution utility<br />Build<br />Deploy<br />Launch<br />Log<br /><br />i18nScanner<br />Scans for untranslated JavaScript and HTML strings<br />Generates report of i18n tokens<br /><br />
    16. 16. Classes and Libraries<br />
    17. 17. Operation Queue<br />Frequently need to block multiple calls on a method<br />Init callbacks<br />Dataset refresh<br /><ul><li>OperationQueue
    18. 18. queue
    19. 19. getSuccessHandler
    20. 20. getErrorHandler</li></ul>Login<br />Status<br />Notify<br />
    21. 21. Observer Manager<br />Alternative to sendEventToCommanders and sendToNotificationChain APIs<br />Notifications while scene/stage inactive<br />Deferred notifications<br /><ul><li>ObserveManager
    22. 22. setup
    23. 23. cleanup
    24. 24. observe
    25. 25. stopObserving</li></li></ul><li>Service Request Wrapper<br />Mojo.Service.Request maintain weak reference<br />Garbage collection can prevent callback<br /><ul><li>ServiceRequestWrapper
    26. 26. request
    27. 27. Same signature as Mojo.Service.Request
    28. 28. Maintains references
    29. 29. Cancels completed requests
    30. 30. Similar to scene serviceRequest</li></li></ul><li>Caching Data<br />Remote data sources<br />Potentially broken connections<br />User expectations<br /><ul><li>CacheManager
    31. 31. Depot wrapper
    32. 32. Simplifies init, access, and expiration
    33. 33. load
    34. 34. store</li></li></ul><li>Paging Data Source<br />Many data sources only differ in a few places<br />Examples<br />Event List<br />Profile Wall<br />Common needs:<br />Paging<br />Arbitrary size<br />Caching<br /><ul><li>DataModelBase
    35. 35. getRange
    36. 36. Look ahead algorithm
    37. 37. refresh
    38. 38. Subclasses:
    39. 39. loadRange
    40. 40. getCacheName</li></li></ul><li>Continuously Loading Paged List<br />UI companion to paged data list<br />Transparently handles page loading<br />Refresh indicator<br />Mojo.Widget.PagedList<br /><div id=“listName” x-mojo-element=“PagedList”></div><br />this.controller.setupWidget("listEvents", {<br />itemTemplate: "events-list/events-item-template”,<br />emptyTemplate: "events-list/events-empty-template”,<br />hasNoWidgets: true<br />}, this.eventList);<br />
    41. 41. Open Sourced<br />All of the libraries open sourced<br /><br />Further details (to come)<br /><br />