Over the last one month, I've got a lot of queries on what Popfly is, what it can do and what it is going to do in the future. Instead of repeating myself over and over again, I thought I'll save myself some typing by compiling a few blog posts.

Unlike most of my friends who started off with C/C++ or Java or GW-Basic, I learnt programming with Visual Basic. I actually had tried to learn C and C++ but I just didn't find that interesting back then. Most tutorials focused on the syntax of the language, how to write simple math applications or how to draw circles or simple graphics. None of that stuff excited me - so I had made up my mind that programming and computers were just not my thing.

All that changed one sunny afternoon in mid-2000. I had just installed Windows 2000 on my first home computer and I fired up VB6 for the first time. I gingerly drag-dropped a button onto the main form and then hit 'Run'. What followed was pure bliss. I actually saw an application *I* had created running. Not Microsoft. Not Adobe or some professional. *Me* .It looked just like any other Windows application and the button was clickable ! This was a huge moment for me and probably the pivotal moment which changed me from just a computer user to someone who could create software.

Popfly tries to recreate this 'aha' moment for a new generation of computer users.

The Past

Two great technologies have done in the past what Popfly is trying to do now for a new generation.

The first is Visual Basic. VB let users create GUI applications without having to learn how Win32 worked. A lot of the features made popular by VB have stuck around. You see VB's influence in current day Visual Studio and even frameworks like Winforms which were built years after VB. I would credit VB with features like Intellisense, controls and being able to generate code for them by drag-drop, a WYSIWYG GUI tool with code generation and everything surrounding data access (ADO, the data designers, data binding, etc).

The second is the combination of HTTP+HTML+Javascript+the webbrowser. There are a couple of features from this world which stand out for me. The first is 'View Source'. Like I said in a previous post, this let everyone learn web development by just picking apart a webpage they liked. The second is the forgiving nature of the web browser world. If the smallest HTML mistake had just shown an empty page and a parsing error, a lot of web developers would have never become at what they do today.¹

What is Popfly?

Let me copy-paste from the official description page (which you should definitely read)

Popfly is the fun, easy way to build and share mashups, gadgets, Web pages, and applications. Popfly consists of two parts:

1. Popfly Creator is a set of online visual tools for building Web pages and mashups.

2. Popfly Space is an online community of creators where you can host, share, rate, comment and even remix creations from other Popfly users.

You can get a good overview of all the features here but let me try and point out the highlights.

• Blocks
  
  You can think of blocks in two ways. One way to think of them is as a component which provides some functionality. Blocks usually provide one or more of three types of functionality. Blocks that let you display stuff (like in a carousel, sphere or one of the mapping blocks), blocks that wrap around a web site and let you access data from that site (Flickr, Digg, Twitter, etc) and blocks which do some sort of transformation on their input (Sort, Combine, etc). Of course, there are a lot of blocks which don't fall into this neat classification (e.g. Calculator, the Block Inspector block) but they're (currently) few in number.
  
  Another way to think of them is as arbitrary chunks of Javascript code. Since it is Javascript, blocks are free to (and often) use HTML and/or XAML for Silverlight. Every block on the site maps to a Javascript class². Blocks are represented throughout the site with a spinning red 'block' shown on the right. You can use any of the default blocks provided (written by the Popfly team) or over a hundred blocks (as of writing this) created by Popfly users. You can create your own - from scratch or by 'rip'- ing some other block's which lets you see how another block works and lets you build upon/modify it.
  
  Blocks by themselves aren't that interesting - they're like the individual characters in Super Human Samurai³. It's when they join together that true magic happens!
  
• Mashups
  
  Like I said in the previous section, the blocks by themselves aren't that powerful - like the individual characters in an old TV show. A better analogy is components (COM/ActiveX/Corba/beans/pick-your-poison). When you put these blocks together, you create what we call 'mashups'. An example of a mashup would be joining the Soapbox block (which generates video output) and the video player block (which, well, lets you play videos) and voila! You instantly have your own mashup which plays Soapbox videos. Another popular type are ones involving maps. One slightly advanced mashup you can create using the Virtual Earth, Timer and GeoNames service lets you replicate Twittervision in seconds.
  
  The primary tool used to create these mashups is the mashup design surface (shown on the right). Most people would agree that this is one of the most visually intense development environments created ⁴ . You can search for blocks and add and connect them. When you connect blocks, Popfly tries to match the right output to the right input. We try to do this using the 'type' of the input/output (more on that in a later post).You also have the ability to customize all the Javascript and HTML generated by the designer using the custom HTML view.
  
  Currently, adding custom Javascript to mashups (as opposed to blocks) is slightly difficult - we're working on making this easier in future releases.
  
• Web Page Creator
  
  Popfly includes a WYSIWYG web page creator which was built off the Office Live Web Designer. This is very popular - users can easily create pages, change themes, styles and colors without writing any HTML. You also have the ability to embed Popfly mashups and share them externally just like mashup projects. When I initially came across this feature, I was surprised by the huge number of themes available - over 150!
  
• Popfly Space
  
  'Popfly Space' is the umbrella term we use to refer to all the social network aspects of the site. You can add friends, look at anyone's projects, rip anyone's projects, etc. There are a lot of interesting features that this lets us do. Every person gets a 'rating' which is an aggregation of how their projects have been rated - so you can see who the best creators on Popfly are, what the top projects are and so on. I personally use it as a sort of 'geek social network' :-)
  
  
• Embedding and publishing
  
  Popfly lets you embed Popfly mashups/webpage pretty much everywhere. Here are some of the places you can embed your mashup in

• Any TypePad/MetaWebLog API blog
• Live Spaces
• As a gadget which you can embed in your Vista sidebar
• As an iframe which you can embed..well..anywhere.
  
  I've already seen bloggers embed Popfly mashups in their site. One frequently asked question is - do my blog readers also have to be Popfly users to view these embedded mashups? The answer is no - the embedded mashups are opened up for anonymous viewing. Since you're using an iframe to embed the mashup, you're also ensuring that there are no potential security issues. The mashup runs in its own iframe sandbox and hence can't do bad things to your site.
  
• Popfly Explorer
  
  This lets you upload and share projects built with Visual Studio Express. Note - you can share *any* type of project- Winforms/ConsoleApp/whatever. When you share it, your friends can access it and pull it down to their machines. The only limitation is that you have a 25 mb space limit on our servers currently. This is a great way to share projects without having to send zip files back and forth - a process I'm sure a lot of you are familiar with.

Resources

I plan on writing a series of blog posts to dig into various parts of Popfly. There's some great content available on the web about Popfly - I've linked to a few below.

• Overview page and video
• Tutorial videos (you need to be a Popfly member to view this). The 'Create a Mashup in 30 seconds' blew me away the first time I saw it.
• The official Popfly FAQ
• Popfly team blog. You can find links to the blogs of all the team members here. ⁵
• Mike Ganotti's post on integrating Sharepoint and Popfly
• Chris Craft's collection of Popfly links
• Popfly Forums - for any questions, suggestions and bug reports. We monitor these forums very closely and you'll frequently see Popfly team members in the forum threads.

Notes

1. I've spoken about this a long time ago in 'Tyranny of the geeks'.

2. I know that Javascript doesn't have 'classes' per-se but now is not the time to quibble about prototype-based languages.

3. Does anyone else remember this show? I loved this as a kid!

4. Adam Nathan is the man!

5. I just noticed that my blog isn't up there. Need to go around and beat up some people into adding it (or sneak in the change myself ;-) )

# Saturday, June 23, 2007 12:54 AM