Cross Platform Text-Indexer

3 BY devrel

While working on a recent Facebook release, we ran into a performance bottleneck in the Mojo.Format.runTextIndexer API. Performance on-device was on the order of a couple of seconds to process the content for feed items 30-50. This combined with the other tasks in the formatting and rendering cycle led to poor performance in the news stream. In this post, I’ll describe a JavaScript implementation of this function we used to improve performance considerably.

Read more

Handling multiple lists and a command menu; Tips from the Facebook App

3 BY devrel

When building the events scenario for the Facebook application I saw a screen that looks like this:

Two lists. One shows the events coming up, and the other birthdays forthcoming. As a Web developer I looked at this in a simple way. Literally two lists. When you click on a different command menu button, you show one list and hide the other.

So, off I go to the races, and I will now walk through the code required to do this.

Initialization and Setup

var EventsListAssistant = Class.create(NavbarAssistant, {
  initialize: function($super) {
    $super();
    this.eventList = new EventList();
    this.birthdayList = new BirthdayList();
    this.gotoEventViewHandler = this.gotoEventView.bind(this);
    this.gotoProfileViewHandler = this.gotoProfileView.bind(this);
  },

  setup: function($super) {
    $super();

    this.setupCommandMenu();
    this.setupEventsList();
    this.setupBirthdaysList();

    this.showEventsList();
  },

First we create an assistant for this scenario, and it inherits from the Navbar giving it the Facebook top menu bar.

Then we wire up the data sources for both events (eventList) and birthdays (birthdayList).

Finally, good old bind(this) for the handlers that go off into event details and profile pages based on taps on the list.

Now we are into setup() where we make sure our super-visor gets setup too, and then tells the various lists and menus to go set themselves up too.

Command Menu

Now we setup the command menu for the events and birthday buttons at the bottom. Pretty standard:

setupCommandMenu: function() {
  this.cmdMenuModel = {
    visible: true,
    items: [
      {},
      {
        items: [
          { label: $L("Events"), command: "showEventsList" },
          { label: $L("Birthdays"), command: "showBirthdaysList" }
        ],
        toggleCmd: "showEventsList"
      },
      {}
    ]
  };
  this.controller.setupWidget(Mojo.Menu.commandMenu, {}, this.cmdMenuModel);
},

We also need to handle the commands that come in (which we named showEventsList and showBirthdaysList):

handleCommand: function($super, event) {
  $super(event);
  if (event.type === Mojo.Event.command) {
    switch (event.command) {
      case "showEventsList":
        this.showEventsList();
        event.stopPropagation();
        break;
      case "showBirthdaysList":
        this.showBirthdaysList();
        event.stopPropagation();
        break;
    }
  }
},

Notice the event.stopPropagation(). This stops the command propogation. If you ever see something like this in your logs, then remember to do this:

warning: command: Propagated up to AppAssistant, no command handler detected for showEventsList

Playing with the lists

We first setup the lists. Here is an example for birthdays:

setupBirthdaysList: function() {
  this.birthdayListEl = this.controller.sceneElement.querySelector('#listBirthdays');
  this.controller.setupWidget("listBirthdays", {
    itemTemplate: "events-list/birthdays-item-template",
    emptyTemplate: "events-list/birthdays-empty-template",
    dividerTemplate: "events-list/birthdays-divider-template",
    dividerFunction: this.eventsDividerFunction.bind(this),
    hasNoWidgets: true
  }, this.birthdayList);
  this.eventManager.register(this.birthdayListEl, Mojo.Event.listTap, this.gotoProfileViewHandler);
},

The divider aims to be smart and show the birthdays starting from today and then wrapping forward (instead of starting from Jan 1st which would be the default):

eventsDividerFunction: function(item) {
  var now = new Date();
  var birthday = new Date(item.rawBirthdayDate);

  if (birthday.getFullYear() == now.getFullYear()) { // this year differs from next year
    return Mojo.Format.formatDate(birthday, $L("MMMM"));
  } else {
    return Mojo.Format.formatDate(birthday, $L("MMMM, yyyy"));
  }
},

Now we are to a point where the commands can actually cause the lists to be shown. What we do here is manage the show/hide logic between the two lists. We also add in a bit of UX so if you tap on the event that you are already showing, it jumps to the top (a nice touch).

Also, here is where the rub comes. We saw weird behavior where the scroll state wasn’t reset as lists are shown and hidden. This means that if you scroll down in birthday and tap back to events, you may be seeing low down events (matching the scroll state of birthdays).

If you run into this, then you will want to do something like we do here:

  • stop the state for each list via this.controller.sceneScroller.mojo.getState()
  • when you show and hide, make sure to tell Mojo what you are doing via this.controller.hideWidgetContainer(this.eventsListEl)

Here is the code that puts this all together for birthdays:

showBirthdaysList: function() {
    // if you are already showing the birthdays list, go to the top of the list and exit
    if (this.showing == "birthdays") {
        this.controller.sceneScroller.mojo.revealTop();
        this.birthdayListState = this.controller.sceneScroller.mojo.getState(); // should be 0, 0
        return;
    }

    // you were showing events, so now turn on birthdays
    this.showing = "birthdays";
    this.eventsListState = this.controller.sceneScroller.mojo.getState(); // save off last state

    this.controller.hideWidgetContainer(this.eventsListEl);
    this.eventsListEl.hide();
    this.birthdayListEl.show();
    this.controller.showWidgetContainer(this.birthdayListEl);

    // if there is some saved state, go ahead and set it
    if (this.birthdayListState) {
        this.controller.sceneScroller.mojo.setState(this.birthdayListState);
    } else {
        this.controller.sceneScroller.mojo.revealTop();
    }
},

And there we have it.

Inline comments, different feeds, and more come to Facebook 1.2.30 beta

3 BY devrel

When you see a news item on your newsfeed and it has “4 comments” tagged right there, do you sometimes wish you could just see them inline? We do too. Often the conversation provides much of the entertainment around a post, and that is why we have implemented “inline comments” for you as a major feature to test in our latest Facebook beta client for webOS.

We care about customizability, so you can turn that feature on or off in the preferences.

The other major user facing feature is the ability to change which feeds you want to view. You will notice a new drop down label in the middle of the screen (probably says “NEWS FEED” right now). Tap right there to see the list of available feeds.

You will also find the following features:

  • Revised photo tagging. Users can now tag both themselves and their friends in photos. To tag someone, simply upload a photo, then view it on your profile. Tap on the photo, then tap on the tagging icon that appears below it. Begin typing someone’s name to select them from your friends list, then tap Done.
  • Clearing multiple notifications. To clear all of your existing notifications, tap on the notification globe at the top-left corner of the app, then tap See All Notifications, then perform a back gesture (by swiping from right to left below your screen).
  • Support for landscape viewing. Just tilt your Palm webOS phone to the side and Facebook for Palm webOS will switch orientations accordingly.

Finally, there is also a major refactoring as part of this release. We found that the original list implementation wasn’t holding up great as we added more and more data into the list (e.g. comment info). With the number of HTML elements created for a given list feed we were having trouble using the swap on scroll implementation that the Mojo list uses due to the HTML parsing, styling and reflows that were required. The net result was choppy scrolling performance.

The custom list implementation fixed this through custom paging buttons that require the user to manually page, but reduce the number of HTML rendering cycles, while also providing a limit to the number of HTML elements that are placed in the document.

We are really excited to add these major features, as well as a slew of other bug fixes and small improvements. As always, the beta channel isn’t fully bug free, and we are asking you the community, to help us. Give us feedback and let us know what we can do to continue to improve on the app.

We also have some exciting new features in the works, and can’t wait to show these to you in the future!

Topics  Facebook App

Palm Developer Podcast: A code walk through of the Facebook application

4 BY devrel

We kick into the new podcast talking about a panel that we were involved in discussing Flash and Canvas. After talking about gaming and platforms, we get to the meat of the podcast…. showing you details of the Facebook application that our developer relations team has been spending time on.

If you want to see what it takes to build functionality as we have in the Facebook app, follow us as we go through a variety features and walk through the code to show you how it all comes together.

For more adventures in Facebook, watch Kevin Decker’s talk about components and techniques.

Facebook 1.2.5 beta: Photo Tagging and more

8 BY devrel

We have a new beta of the Facebook app for you to try. This new release has a revamped photo area. Now you can view tags on photos, like photos, and add new tags yourself right from the app. Just tap.

We also have a fix for an issue with photo access. As always, the beta app isn’t tested as much as the production stable builds…. but this is where you come in. Help us test it out and give us feedback!

If you want to know some of the details on how we implemented the new tagging interface, read Kevin Decker’s writeup which includes position, box-flex, and more.

Topics  Facebook App

All Dev Day presentations now on-line

0 BY Fred Patton

For those of you who enjoyed the Developer Day videos uploaded earlier in the week, but were waiting for the rest to be made available, today is the day! You can now see Kevin Decker discussing development of the new Facebook app, and Kevin Hague introducing Ares fundamentals, plus more great presentations that dig deep into webOS. And be sure to watch Aaron Ardiri’s discussion of game development using the PDK and SDL, and Dave Balmer’s presentation on graphics in HTML5. Enjoy!

Dev Day Keynote

Ben and Dion give the keynote

Dev Day Video - Ares

Kevin Hague on Ares

Dev Day Video UI

The UI team dispenses wisdom

Dev Day video marketing

Joe Hayashi Discusses Marketing

Facebook 1.2: A new release for the App Catalog

2 BY devrel

f8, the Facebook developer conference, kicks off tomorrow to share platform news with the world. What better time than to share a new Facebook client for webOS users.

Some of you have hopefully been following the features in our beta channel, and now we have a new release for the official App Catalog distribution channel.

The biggest features added since 1.1 are webOS/Facebook notification support, but there is a lot more. From the last beta release we have also done a lot of polish around the user experience.

We are learning a lot building this application, and if you come to the Palm Developer Day this Friday and Saturday, you will get to hear more:

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

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.

We look forward to share these lessons and common code to help you in your apps.

If you are unable to come to the event, we will work on getting this content to you too… but it would be so much more fun for you to come and talk to us in the flesh! :)

A couple of tips from the Facebook app; 1.1.6 fixes

16 BY devrel

One of the goals of our team doing development on the Facebook app has been to learn about our webOS platform from production software. With passionate Facebook users out there, we get a great coverage and learn a lot.

A couple of issues that we found are general enough that anyone building a webOS app may get something out of hearing about them, so we wanted to quickly write them up.

Requests Dying out

We had reports of requests on the news feed and notifications scene sometimes dying out. These bugs are particularly frustrating when you can’t get a reproducible case. Kevin Decker, with the help of Mike Lee and Justin Newitter got deep into the code and found out that the problem was GC kicking in and collecting our Mojo response object aggressively before we were done with it.

Mobile devices are much more aggressive about these things as resources are so valuable, so when you develop in the more constrained world of mobile it serves you well to think about your resources. We are fortunate enough to be in the land of JavaScript and most of the time everything just works (no malloc and free!) but that doesn’t mean you should ignore software development practices.

Kevin Decker has a writeup of the issue on his own blog.

document, $(), and this.controller.document

When we added support for webOS notifications the application turned into a multistage application. At this point, code that had been working via Prototypes $() or document stopped working.

We spell this out in the best practices document that reminds you that when an application has multiple stages, there is no longer One True Document ™ but many.

To fix things, we cleaned up shop and used this.controller.document and this.controller.sceneElement.querySelector() to access what we needed. Simple changes, but I wish we had been doing “the right thing” from the beginning.

I have also been talking to the framework team to see if there is a way to make this all more transparent. My muscle memory is all around $() and the like, and I don’t want to have to change gears when I turn my application into a multi stage environment. More on this to come!

Facebook 1.1.6

Piece this together and you should see Facebook 1.1.6 in the beta channel with all of these fixes. Give it an update and let us know how it works for you! You will also notice the option to tune (and turn off) when notifications kick in.

Facebook 1.1.4; New Beta with Notifications

38 BY devrel

We have received a ton of great feedback on the Facebook app which is fantastic. It pushes us to do more, quickly! The top request is for access to Facebook notifications. Henry Levak even reached out with a mock of what he would like to see. So, notifications became the focus of our latest beta, Facebook 1.1.4.

We have actually implemented multiple levels of notifications for you, which we will detail below.

Changing the top left; Facebook notifications drop down

Until now, the top left area of the navigation bar has been for updating status. webOS devices are great at creating content (hardware keyboards and all) but it didn’t feel quite right to have that area available when we aren’t telling you anything new. Why not use that area to let you know when something has changed? E.g. notifications. A badge will show you how many new notifications are waiting for you, and when you tap on the icon, a drop down will give you access to your latest notifications…. and also give you access to the rest. We tried to mimic the website here, which also contains messages and friend requests. In the future, maybe we unify all of these for you.

But wait, what if you want quick access to the status update area? It turns out that it doesn’t take any more effort. From any scene you can tap on the Facebook logo to go to the news feed and then just start typing. We will detect that and auto focus on the “what’s on your mind” area. This also allows us to clean up the fake status area that we had before…. much nicer!

Scene is all

From the drop down, if you tap on “See all notifications” you will be sent to a full scene that allows you to scroll through your various notifications. Access the source of the notifications easier, or jump to a user profile. In the future we are playing with giving you more information here. For example, rather than “Bob Harris likes your status”, how about showing a piece of that status so you know what they are talking about without having to tap in?

Notifications Squared

There are Facebook notifications and webOS notifications. We wanted to marry them together in this release. If a new Facebook notification occurs, a banner and dashboard will alert you to the info and you can get directly to that info.

We currently show the most recent notification, and you can get to the notifications scene if you tap on the icon and badge on the left. In the future we want to provide an easy way to flip through notifications right in the dashboard so you don’t even have to go into the main app to see what is happening. Once we get to friend requests, we can allow you to accept or deny right there! The power of webOS :)

And, there’s more

There are other little features and fixes in this beta, including:

  • Keyboard shortcuts now use our native “gesture area + key” support which includes a drop down “Navigate to….” area.
  • Formatting of content has been fixed (blank lines separating content)
  • No HTML tags in Inbox (no more <br>)
  • If you launch the Facebook app when already running, refresh the feed a la Tweed

We really hope that you enjoy access to notifications, and as always, keep the feedback flowing!

UPDATE: We got some great feedback from you, and have a new beta release out today… 1.1.4 is the latest (1.1.3 had some bad info in it). Fixes for the “Facebook User” issue, and for the data wiped on tap issue are in. Keep the feedback coming!

- Ben and Dion on behalf of the Developer Relations Facebook team

Topics  Facebook App

Facebook Beta Released

38 BY devrel

When we released the Facebook app last week we talked about how we wanted to develop a nice cadence of releases. We are writing on webOS, so surely we can get features out on web time right?

When our full developer program went live, our App Catalog began supporting a Beta channel which enables you to get new versions out to a community that is willing to live on the edge.

Today we are launching our first Facebook Beta application. It is only a week after our 1.1 launch, but has some cool new features:

  • Facebook Video support: You will now see Facebook videos in your stream and can play them. Facebook started to encode their videos into the H.264 format, and for those that they have encoded, you will be able to watch.
  • Shortcut keys: Power users want to be able to access areas in an app as quickly as possible. You can now jump to different sections by holding down the SYM key and: N = news stream, P = photos, S = search, I = inbox, U = your profile, E = events. We have found this particularly handy for Pixi users where the keyboard is always just there.
  • Your Comments: You will notice that your comments in a thread are colored Facebook blue to make them stand out.
  • Access Updates in Facebook Mail: You can now access the updates messages, joining messages and sent mail

There are also bug fixes and enhanced error checking on the Facebook API side of the house.

What can you expect from Facebook Beta releases?

Beta means beta. These releases are not tested in the same way as full releases, and new features may not be fully internationalized or localized. You get to play with new features that we are working on, and hopefully give us feedback along the way.

You can help us find bugs early, give us ideas on new features, give us real world advice on how certain features and ideas feel, and help us prioritize exactly what you want out of the app.

We will update the beta channel pretty frequently, and the usage will help us cut final releases. You should note that the beta version and full version are on two different channels. You can install both versions, and they update independently.

- Ben and Dion on behalf of the Developer Relations Facebook team