That syncing feeling.
Before proceeding, it seems prudent to load the component modules asynchronously. Modules are rendered as partial views within the main wrapper. Up to now, the actions to populate them have been been called prior to the page load event. In other words, all content is complied before the page is rendered. To the user, that looks like a fully populated page that loads after a lengthy period of inactivity. Resolving this is usually trivial; build the page with content placeholders, and sprinkle a little AJAX on the load event. The result of this will be a static page with progressive data loaded asynchronously.
The Meta-wing module worked fine. Page loads immediately with a "Loading Meta-Wing" notice, which is promptly replaced with the Top Pilot and Top Archetype modules. The Events module, however, threw an immediate spanner. Schoolboy Error: Any calls to the Facebook API require an access token. This is fine when we're populating on page build - The Action is tagged as secure, and as such all calls are routed via OAuth. As the code is still pretty much proof of concept, there's nothing keeping a track of the token between calls. Essentially, keeping the action secure forces the page to reload as soon as the events list is requested. The list is then returned, on it's on, devoid of CSS. Yuck!
We need to recycle the access token, or request a new one when we request the event list. I don't really want to store the access token, as there won't be a huge amount of content speaking to Graph, so we'll form a new one that we can discard. Remove the authorization tag from the method, tweaking the Facebook App settings to reflect the new URL, and amending the code slightly is enough. We simple create a new instance of the client class, populate with relevant data and request a new auth token. I've refactored the code a little bit. Here's how it looks now:
The rest of the code remains more or less unchanged (using a strongly-typed view for events now)
We now get the page loaded and responsive while each module loads. Don't worry about the look, it's only a placeholder for now.


Comments
Post a Comment