In the next couple of weeks, I will post a series of blogposts about how I created WeTweetApp.
In this first blogpost I will describe the base app structure, starting a Simulfy session using the client, creating the files and how to create the collaborative Tweet editor.
I plan to annotate the source of WeTweetApp in the next couple of weeks, but the CoffeeScript source is already available at http://docs.simulfy.com/sources/wetweetapp/app.html.
Secondly, to post the collaborated text to Twitter, I’ve used Twitter’s Web Intents. Using web intents, it’s easy to hook Twitter’s API into WeTweetApp.
WeTweetApp = require('./app/js/app');
window.app = new WeTweetApp();
WeTweetApp is a Coffeescript class containing all the app logic. With the client I can easily initiate a Simulfy session, by calling the
startSimulfy method in the class constructor. The
onConnect callback does all the specific app magic.
#require provided by nodejs
extensionMap = require ‘./extensionmap’
simWidgets = require ‘simulfy-widgets’
#allows you to call ‘new App()’
constructor: () ->
start: () =>
onConnect: () =>
#do WeTweetApp stuff
As you can see in the screenshot above, at the left there’s the Tweet text, at the right is a comment thread. For Simulfy this translates to two files. For the Tweet I created the file index.tweet, for the comments the file index.comments. Both files are public by default, allowing everyone who has access to the web url, can be added to the files. So, in the
onConnect method I open these two files.
onConnect: () =>
#simletId is provided by the client, bound to window and grabbed from the hash in the browser url...
@tweetFile = simulfy.openFile(simletId, 'index.tweet')
@commentsFile = simulfy.openFile(simletId, 'index.comments')
Because the files are public, I can add the current user to the files without permission. In a next blogpost I’ll describe how I obtained the current user.
#@address = 'email@example.com'
The tweetFile is just a piece of text, so I can create a tweet scope on the file content in the extensionMap, create it with an empty string and pass it to the Simulfy textarea widget.
class TweetFile extends SimOp
structure: (key) ->
when 'tweet' then Tweet
@tweet = @scope 'tweet'
tweet = @tweetFile.content.tweet
#jquery ($) provided by the client...
@tweetArea = $('#tweet-area')
simWidgets.textarea.bind @tweetArea, tweet
As Twitter allows 140 characters per Tweet, I’ve added a simple characters left counter. Using the
live method on the tweet scope, I can simply calculate the characters left.
tweet.live (str) =>
@tweetCounter = $('#tweet-counter')
@tweetCounter.html 140 - str.length
If there are no characters left, I bounce the change by not sending it to the server, using the simOp’s
isAllowed method in the extensionmap.
class Tweet extends SimOp
#override simulfy isAllowed api method, use for content validation not permission checking
isAllowed: (method, val, cb) ->
if val.length <= 140
Finally, I use Twitter’s Web Intents to post the composed Tweet text to Twitter. Off course the Twitter API is in the HTML.
@tweetButton = $('#tweet-button')
@tweetButton.on 'click', (event) =>
text = @tweetArea.val()
#change the text string of the Twitter iFrame, the click propagates and triggers the Twitter popup to be opened...
So, that’s it for this first blogpost. Next up is how I obtain the username, how to invite users and authentication.
Off course, don’t forget to check out WeTweetApp now!