June 23, 2007

Microsoft Popfly - A use-case illustration

From now on, I am extending the scope of my blog from just Blogger hacks to include technology reviews also. I am planning to sign up for invite-only and beta websites/services and write posts describing the usage of the website or service (with illustrations). This is to give you an idea of what they have got to offer early enough. To start with, I am covering the Microsoft Popfly Alpha mashup and website building service for non-techies. As the service is in private alpha, you need to sign-up with your email id and they send you an invitation after some time.

Once you got the invitation and logged in to the website, you will see three options:
  • Create a webpage with the wysiwyg editor (no html knowledge required)
  • Create a mashup using the various web services available (no need to code)
  • Share your projects with others in the community
As WYSIWYG website building is not something new, I will walk you through the mashup creation only.

Microsoft provides a list of pre-built blocks to create mashups. Predominantly there are two types of blocks:
  • Data producer blocks such as Flickr, Facebook, RSS that provide photos, feeds etc as output.
  • Data consumer blocks such as PhotoTiles, Slideshow, NewsReader that take the data produced and display it in a nice way using slideshows, tiled display etc.
Here, the use-case that I am going to demonstrate is to obtain photos from Flickr and show them in a nice tiled fashion. I first select a data producer block by selecting the Flickr block.

I get a red-colored box like this for flickr (which actually rotates upon mouseover!). The message "You have a key" below the box indicates that I have provided an API key from flickr to authorize my usage. Before providing the key, you will see an error "Missing key".

Click on the Missing key message and you will get this lightbox to input the key. You can use my key if you don't want to obtain a new one from Flickr (0659eaf9c8e9830405cd87f5ccfa7dcb).

Once the key issue is resolved, you can click on the tool-like icon to the right of the block to edit the settings of the block. You will get something like this where you can edit the text that you want to search with and the number of photos that you want the block to output. After editing, click the big-size tool icon to go back.

Next, I will add another block that will display the photos nicely. You can search the blocks with the term 'photo' and you will see a few blocks named Photoshow, Photosphere etc. The one I liked (and the one that worked well) is PhotoTiles. So, I selected it.

And the block shows up in the canvas. Ignore the default display in the background (they should fix it, it's annoying!).

And the way you connect them, is by clicking on the blue-colored output point of flickr block and then clicking the yellow-colored input point of PhotoTiles block. A line forms between them indicating that they're connected (I wonder how Yahoo Pipes did the same too! Maybe this is the most logical representation).

Now if you click on "Preview", you can see the final result of your mashup. It will be something like shown below. You can click on any individual photo and it will be displayed bigger. (Clicking on customize at the bottom will take you back to the canvas).

After saving the mashup, you need to share the mashup if you need options like "embed it in your website", "Download as Gadget" etc. It will provide you with an iframe code to embed your creation to your blog or website.

You can see the mashup embedded in my blog in the second column. This is very simple mashup that I created with Popfly. It is possible to combine the data from many services and create complicated mashups. Here are my opinions about Popfly based on my experiments.

  • Stunning user interface using their Silverlight platform.
  • Once you create your mashup, you can create a website also with Popfly to embed the mashup in (I will check if there's anything to write about regarding the website building option).
  • Pages load terribly slowly, maybe because Silverlight is heavy. They should really improve the speed if they expect serious development with Popfly. Even the popfly widget in my blog will load very slowly!
  • I don't see any equivalent for the built-in operations like Sorting, Filtering etc that are supported by Yahoo Pipes.
Coming soon:
  • Review of the beta release of MyLiveSearch, a new search engine effort claiming to be an innovative approach never done before.
  • Review of the beta release of Radar Networks' semantic web services product.


Avatar X said...

There are 3 things that should be noted about Popfly, more if compared with Pipes even if you got to agree that even by default Popfly is way more powerful web app than Pipes.

1.-Popfly is in Alpha against Pipes Beta, in this case that should be quite a differentiator from one another.

2.-Given Popfly alpha nature,right now it is only using silverlight 1.0 beta in a moderate way. the really interesting stuff should be when it starts using Silverlight 1.1 so, you should do try it every month.

3.-while predefined blocks have predefined output, you can also ad custom HTML to your mash ups, and when creating entirely new blocks they can be done in its entirety with silverlight.

i do wonder when did you used it, since there was a upgrade last week that made the app way more lighter and fast.i entered again before writing you this comment, and the response was very smooth.

(i bet you knew i would stop by with this post....:P )

Unknown said...


Very good points. I will add the custom HTML to Pros. And I am definitely impressed by the looks.. I logged in today and it was taking several minutes to show my projects page. Does it require an upgrade to Silverlight to be faster?

Avatar said...

Do you mean, you don`t got the silverlight 1.0 plugin installed?, if not, it is more than important to have it, it is critical to popfly performance.

1.1 is another thing, the plugins itself is also in alpha,so you only install it if you are really into the silverlight crowd.

Even miguel de icaza is now, he is building a mono version of it called moonlight.

Singpolyma said...

No offence to Avatar, but this looks an awful lot like an MS ripoff of Pipes just to promote Silverlight over Flash. I don't even have silverlight (I haven't even bothered to see if they have a linux+firefox version, but I doubt it), so I can't try it for myself.

I find it interesting that the listed input methods are not MS services... perhaps because few MS services have a decent RESTful API to mash... or maybe because the competition is simply better... heh...

Unknown said...


No wonder you are not impressed :) And, it's mostly aimed at non-techies - those who are happy with the REST that they get in the night :)

Avatar X said...


Not offended at all.

1.- all live services are in popfly
2.-Linux version of popfly is under Miguel Icaza hands at the moment,
3.-Pipes is not even close to what Popfly intends to do.
4.-Of course it is all about silverlight, and in one way visual.
5.-why i need to remind that it is just in alpha?..bash it when it has launched.


1.-i dont agre it is just for non techies, it is more like something that has a very low entry level, but any actual live dev can create gadgets for spaces or vista directly from it.`the bonus is that you can bypass revision if you do it with popfly but you will not get direct distribution from live gallery until revised.
2.-again, in alpha, barely 1000 people(not devs) have been allowed to use it.

silverlight final launch it is scheduled for November for what it is known right now.

SL will be something that is going to be pushed very hard, MS surface OS layer apps are build with it, Photon (wm7) UI is said to be built with it. that alone seems to indicate it is not going to be a project that will just go away.

so, i say it has the rest of the year for everyone to see it evolve or grab 1.1 and check out the demo apps of what can it be.

Aditya said...

I guess I should say something too…

Well, as it all turns out. Both Steve and Avatar are right in their own regards. This does hold crazy resemblance to Pipes, and the outcome is almost the same. But not exactly.

From this review (and I don’t have a invitation to PF yet) shows with PF, you can go beyond getting just a feed. You can do something WITH that feed, and get a final product. I wouldn’t expect MS to do something revolutionary. Really, I wouldn’t … but this is typical of them. Take a rival product, make it slightly better, available to their huge user base, then stifle the competition.

But I’d like to see a worthy player in the whole custom mashups business. It’ll be interesting to see someone like Google join in on this, and allow people to use THEIR services (Google offers all of them in one form or the other).

Ah! Those good ol’ days of static HTML pages … :P

Singpolyma said...

So, I was going to go off into a rant/discussion concerning client-side formats and then decided that was better suited to a post rather than a comment : So here's the post :)