Sunday, September 12, 2010

-O fun || Designing for Hackability

My little side project Streamie was designed to be hackable, as in easy for somebody else to make changes on, from the ground up.
Besides the ability to run Streamie against your own github repository without running your own backend server, there are several other design decisions in the code that are supposed to make the source as approachable as possible.
I'm joining Google next month, so the obvious choice for a client framework would have been to use closure. I decided to go with jQuery instead because everybody already knows that one already.

app.js
When you want to start digging into Streamie, start by reading app.js. In this file you see two big static arrays:
streamPlugins: This is a list of "plugins" which are run on every single tweet and which can transform the tweet in any way. Currently all stream plugins are defined in streamplugins.js. If you want to extend Streamie's tweet view, like e.g. translating all tweets, this is where you want to add your own plugin.
initPlugins: This is a list of plugins which are run as soon as the connection to the backend system has been established and Streamie is basically "running".

The REST API
Twitter exposes an extensive REST API to interact with it's service. Using these APIs requires doing oAuth. Doing anything with oAuth sucks. The good thing is that Streamie provides a proxy for the REST API that does all the oAuth stuff for you. This means you can use the API just as it is documented. E.G. this is how you favorite something in Streamie. Because the main channel from Twitter to Streamie is the user stream API, you don't really have to worry about rate limits.

Tweets, Direct Messages, Retweets
Coming from the Twitter API Tweets, Direct Messages, Retweets look quite different. Streamie normalizes them to be all specialized Tweets. This makes working with them quite easy. Streamie is using the "Stream" metaphor extensively. That is why your direct messages appear in the main stream. The buttons in the navigation only activate CSS classes which filter out certain tweets.

Start up time
Streamie's startup time can be quite long (as in a couple seconds). This is mostly due to the time it takes to load initial data from twitter. (See here if you are curious how that works). In development you can append ?cache to the URL and these API calls will use sessionStorage caching which makes loading almost instant.

Learnings
Overall Streamie's software design is quite simplistic. Right now it feels like there might be a need to abstract some stuff a little more. There will likely be classes for "status inputs", custom events and maybe even tweets :)
Do you have questions or suggestions about how Streamie works or is supposed to work?

Another week in Streamie

Just a quick recap what we did in Streamie this week:
  • Your own tweets now show up with opposite orientation (thanks to @helgri)
  • You can now upload images to be included in statuses
  • We now display your direct messages and you can write them using the standard "d username" twitter syntax
  • We use fancy utf8 characters as icons. This didn't really work on Windows. @helgri added images as a fallback.
  • @joemccann made the "run your own streamie" experience a little smoother
  • If a proxy gets in the way of web sockets we now fall back to more conservative transport methods automatically. If Streamie didn't work for you before, maybe it does now.
Last but not least, @AliceLikesBob provided a patch to integrate chrome notifications into Streamie. This will be integrated shortly.

Next to the direct contributions, people continue to have fun with their own versions of streamie. There are now 27 forks on Github.

Sunday, September 5, 2010

Streaming along

In it's second week of development Streamie is starting to gain quite a few convenience features beyong the simple one like "Yes, we can actually post a status".

The new features are
  • Previews of image links
  • Click on "in reply to" shows ALL tweets of that conversation. This is awesome. Try it!
  • Auto completion of twitter names
  • A page for new users that describes what streamie is
  • Settings
  • ... and many, many small improvements
Hackability++
Streamie is aiming to be the most customizable and developer friendly Twitter client in the world (See how you can make your own version). It is starting to be an active open source project. Streamie now includes contributions from these awesome people: @helgri, @antimatter15, @mathias. Overall there are now 17 forks on github.

Wednesday, September 1, 2010

The first week of Streamie.org


Streamie.org is now one week old. It is already quite usable as a Twitter client and I personally dogfood it 100%. People also seem to like it.

People are also starting to make their own versions of the client (Learn how to do it here). E.g., we will soon get a version of Streamie that actually works well on Windows. The current version uses UTF8 characters which are not included in Windows-Default-Arial.

So what's next
  • Maybe a nice homepage
  • Nicer oAuth dialogs
  • Maybe a command line
  • jQuery style filtering of tweets e.g. $(".status.retweet contains('@phiggins')").hide()
  • Options
  • Direct Messages
If you want to do fun things with Streamie, I suggest you start in app.js and start making your own streamPlugin. E.G. you could color all tweets red that include the word Dojo.
Because Streamie was supposed to be hackable I did actually write source level docs. Let me know what extra info you need.