Working With Social Network APIs

Creating Vicinity Buzz naturally involved working with a the APIs of social networks. That information seemed worth sharing for those of you interested in writing any type of application that would integrate with a social network.

Developer Documentation

Any of the social networking sites you probably want to integrate with have developer api’s that are well documented. Here’s the starting points for a variety of services:

Working With JSON

All of these APIs are best used with JSON. If you’re not familiar, you can read up at json.org. It’s the notation for serialization of javascript objects, and object literals.

Where To Make the Call From

If you are working in a standard web page, you could call the api from document.ready (assuming you are using jquery). This is the approach I take on hoolihan.net, my personal homepage. There is a twitter feed on the right side.

If you have a bit more of an application, you may want to look at one of the many javascript frameworks that help you route events to actions. These are frameworks like backbone, knockout, spine, etc. There are also commercial variants like kendo, dojo, and sencha.

jQueryMobile is commonly paired with PhoneGap, and in that scenario, using something like backbone is a bit tricky. You may want to bring in a template binding library, but avoid routing.

Binding

jQuery.templates was one of the first good javascript template binders that I’m aware of, but there are now many different options. In the jQuery world, most of the momentum seems aimed at jsrender. Recently I’ve considered bring in knockout and only using the binding part, but I’m not far enough in to evaluate that direction.

API Keys

Unless you’re using the most basic parts of the API, you’ll probably need to register your app and get an API key. It’s a token that identifies your application. In the event of API abuse (too many calls, etc), they have information to contact you and analytics around the issue.

Open Authentication

This is a big topic, but if your application wants to use a social network to identify your users, this is possible via open authentication. If you are interested in this, get started here.

What Do You Think?

Are there any particular areas of the APIs that you’d like to see more detail about? Any conceptual parts that would warrant their own post? Let me know what you think below.

Flex is a Relic and Silverlight is a Zombie

…or some other catchy metaphor that will grab your attention. These technologies were hot over the last 5 years. Flex gained a particular amount of popularity in the Java community where UI technologies have a bit of a spotty record (that’s like saying my Bengals have a bit of a spotty record over a lifetime). Silverlight gained a lot of traction among Microsoft developers who actually cared about design and UX. Many alpha-geeks of the Microsoft space were running around giving conference talks about the MVVM pattern, and sharing code on codeplex. So what happened?

Both of these technologies are going to fade on the public web. Tablets and mobile devices are too big a share to ignore. Html5, phones and tablets did them in. The heavy hand of Steve Jobs probably gets credit for the coup de grĂ¢ce. The browser vendors and phone OS creators have really put their weight behind Javascript and Html5. If you have have that skill-set right now you can create:

  • Web Content
  • Mobile Web Content
  • Mobile Apps via Appcelerator
  • Mobile Apps via PhoneGap
  • Windows 8 Metro Apps

That’s a pretty wide reach for a markup / scripting language set.

So what do you do if that’s your trade? You work as an AIR/Flex developer or Silverlight developer, what do you do? There are good options for each camp, and some universal options.

Flex Developers

I think this is the slightly less promising path in the long term (despite it hitting a much higher peak than Silverlight). That said, Flash and Air will live on for a while, and you have some time to make a transition. Additionally, the ability to use the Adobe tools to make mobile applications provides a bridge to the hot mobile market. And you can make long term plans to transition to another cross-platform tool (PhoneGap, Appcelerator, etc), or go native. If you’re in the Adobe camp, new tools like Edge are likely to ease the transition to the standards-based technologies of the web.

Silverlight Developers

Similarly, Silverlight won’t be gone tomorrow. Intranet applications that need rich functionality (and simple deployment) are still a nice fit for Silverlight Desktop applications. And the adjustment to WindowsPhone 7’s flavor of Silverlight is straightforward, though I would be cautious and investigate the financial realities of that market. Finally, while Windows 8 Metro Apps don’t specifically use Silverlight, they can use C# with XAML and a subset of the .Net libraries that emphasize a security sandbox and async data connections. Sound familiar? That’s because they re-animated the corpse of Silverlight and made it an option for writing Metro apps. Long term, you should probably learn to use the Html5 / JavaScript hooks for Metro due to the ubiquitous nature of those skills. But isn’t it nice that you can learn the new API (WinRT) while keeping C# and XAML, and then make the languages switch at your leisure.

For Everyone

Both camps should embrace these newer web technologies and the UI skills they picked up during their time with the respective technologies. Good user experience and design are rare skills in developers, and retraining the languages and tools should be the easy part. Keep your black turtlenecks and invest in the next tools rich applications. You already have a leg up.

Popup Overlay Auto-Applied to an Anchor with jqModal

Working on a relatively straightforward page, I want to have some of the simpler static contact come up as an overlay style of popup. Following web standards, it would be nice to have this code automatically work based on a CSS class. This would provide two benefits: easy to add more such links without writing new code and it will work without javascript.

I worked through a solution using a variety of samples. The project uses html5, jquery, and the jqModal plugin.

The footer code where I have the link I want to change gets the “popup” css class added to it.

          <a href="terms.html" class="popup">Terms</a>

terms.html itself is a simple static html page with a header and some paragraphs, so I won’t show it here. I’ll only mention that it can still have html and body tags of it’s own.

In css, I have some simple styling in place for jqModal to use.

.jqmWindow {
    display: none;
    
    position: fixed;
    top: 17%;
    left: 50%;
    
    margin-left: -300px;
    width: 600px;
    height: 600px;
    overflow:auto;
    
    background-color: #EEE;
    color: #333;
    border: 1px solid black;
    padding: 12px;
}

.jqmOverlay { background-color: #000; }

Finally, here’s the javascript that sets it all up. If you were going to use this on multiple pages, you might want to move it into it’s own file.

      <script type="text/javascript" 
            src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.2.min.js">
      </script>
      <script type="text/javascript" src="jqModal.js"></script>

      <script type="text/javascript">
        var dialogs = {}; // cache for dialogs keyed by url

        $().ready(function() {
          $('a.popup').click(function(event){
            event.preventDefault();
            var url = $(this).attr('href');
            if(!(url in dialogs)) {
              dialogs[url] = 
                $("<div class='jqmWindow'>Loading content</div>");
              $(dialogs[url]).jqm({ajax:url});
              $('body').append(dialogs[url]);
            }
            $(dialogs[url]).jqmShow();
          });
        });
      </script>

First, you’ll notice the code references jquery via the Microsoft CDN. It also pulls in a local copy of jqModal.

Then, I declare a page level variable. “Global” variables are not something to use often, but as a page level cache, this is actually an appropriate use. If this was off in it’s own file, you may want to use namespacing tricks in javascript to avoid name collision (outside the scope of this example).

Next, in jquery’s document ready function, we add a click handler for any anchor (link) with the class popup. It stops the default behavior (which for a link is to submit a get request). Then, the function tests to see if it has already setup a dialog div for that url. If not, it creates the html for the div with the proper jqModal class, and adds it to the body. Finally, it sets up the dialog div to load the url from the associated anchor via ajax.

The final step after either creating or fetching the dialog div, is to call it’s jqmShow() method.

Interesting Assignment Related to Rich Internet Controls

One or my recent projects was to work with a client to create a Silverlight control for reporting purposes that has some general flashiness, and is reusable across several sections of the site. It has brushed into some interesting areas. I have used Silverlight for some media and imaging applications before, but this was the first that the control had to integrated with the authorized users profile and other security related server side settings.

In particular, the first thing to keep in mind is that as long as the Silverlight Enabled WCF endpoint is within the web application on IIS, then the service code has access to the users profile info. It’s just as if making a jquery request from a page, there is no need for the Silverlight control to re-authenticate.

The really interesting part is where the project goes from here. The client has asked me to create an equivalent control using HTML 5 technologies. There will be some lunch and learn sessions on how both of these projects were done, and comparing and contrasting both the user experience and developer experience.

I’m excited about doing this type of work for a variety of reasons. First, the training aspect really helps our company differentiate from other consulting companies, especially from rent-a-coder staff augmentation type shops. And I enjoy the challenges and rewards that come with helping other developers work with tools that are new to them. Finally, the very question we’re addressing (plugin vs standards based RIA controls) is on the forefront of lot of minds, given the current state of browser and mobile applications.

Anyway, this is just a general update of what I’m up to, but I hope this work will spin off some presentations I can do locally, and some blog posts.