Simulfy blog

Simulfy allows you to add real-time collaboration to your website or app, using our new JavaScript platform released earlier this month. In the early days of Simulfy, about a year ago, we built WeTweetApp allowing you to prepare and write a Tweet together and post it to Twitter. But while rewriting Simulfy over the past year, WeTweetApp wasn’t updated and it got broken… Since the new Simulfy Client API (the client) is released, we decided to bring WeTweetApp back to life.

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.

First off, the app is written in CoffeeScript, a language that compiles into JavaScript, and built on node.js.

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.

To create the WeTweetApp, I’ve created an HTML page containing the layout of the app and a CSS stylesheet. Then I added the client, Simulfy widgets library and the wetweetapp JavaScript via the script tag in the head. I then initiate the app by requiring the WetWeetApp JavaScript code. The require method is provided by the client.

<script src="http://simulfy.github.io/simulfy-libs/client/current/simulfy.min.js"></script> <script src="http://simulfy.github.io/simulfy-libs/client/current/simulfy-widgets.min.js"></script> <script src="/javascripts/wetweetapp.js"></script> <script> WeTweetApp = require('./app/js/app'); $(function() { window.app = new WeTweetApp(); }); </script>

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.

#app.coffee #require provided by nodejs extensionMap = require ‘./extensionmap’ simWidgets = require ‘simulfy-widgets’ class App #allows you to call ‘new App()’ constructor: () -> @start() start: () => startSimulfy onConnect: @onConnect extensionMap: extensionMap 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.

#app.coffee 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.

#app.coffee, onConnect #@address = '[email protected]' @tweetFile.participants.add(@address)

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.

#extensionMap.coffee class TweetFile extends SimOp autoCreate: true structure: (key) -> switch key when 'tweet' then Tweet else SimOp default: -> tweet: '' initialize: -> @tweet = @scope 'tweet'

#app.coffee, onConnect 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.

#app.coffee, onConnect 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.

#extensionMap.coffee class Tweet extends SimOp #override simulfy isAllowed api method, use for content validation not permission checking isAllowed: (method, val, cb) -> if val.length <= 140 cb(true) else cb(false)

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... @tweetButton.attr('href',"https://twitter.com/intent/tweet?text=#{encodeURIComponent(text)}")

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!

Moodpaste is a new Simulfy powered concept by Dutch Coast. 

Create Moodboards together in Real time. Just Copy- and Paste the urls from your favorite webservices like; Dribbble, Flickr, Instagram, Pinterest and many more to your private collaborative Moodboard. Or upload pictures with our Mobile App.

The app is available as a web app, iOS and Android App. You can sign up for beta here: www.moodpaste.com !

Let’s do some math

Last week we released Presdeck.at/tnw. It took us 30 minutes to discuss the concept. We’re not completely sure whether this is a stand-alone app, but based on a little research on real-time event coverage we suspect shared state is an interesting feature next to the push messaging and the real-time querying people are growing accustomed to.

The design took 8 hours. But in a normal situation you already have at least a company design so lets cut this in half.

Extending and integrating the conversation component took another 8 hours. Lets double this because an experienced Simulfy programmer did this part: 16 hours.

Finally we did the CSS in 4 hours.

The total development time to take this from zero to as far as you can experience yourself at http://pressdeck.at/tnw is 0.5 + 4 + 8 + 16 + 4 = 32.5 hours. That’s an average day with 4 guys in the office.

We are looking forward to the prototypes of other agencies and developers!

We're preparing to launch  Simulfy 0.9 Public Beta at The Next Web 2012, which basically means the Sandbox is working well and documentation is ready. Starting this Friday you can find all the documentation you need at github.com/simulfy/simulfy-libs/wiki

We are looking forward to your feedback to see which last additions are required to finish 1.0. 

The guys at Dutch Coast will upgrade the Javascript libraries they have developed on previous releases to fit 0.9 and open source them as soon as possible. 

After a year of development we're ready for developers test-driving our platform!

We've just opened up our Sandbox, setup a Wiki on GitHub and released some example code to get started right away.

The first example we've made available is the Conversation Client Javascript which you can use to easily integrate real-time collaborative conversations in your website or application. We've also created an example on how to integrate this client into an existing PHP and MySQL application.

In the coming weeks we will release a Todo Javascript Client example, supporting todo/list-like data structures, and open up the Simulfy Javascript Client so you can start defining your own data structures.

To really get all the insights of Simulfy we'd like to invite you to meet the Simulfy development team during our first Open Office the 19th of April. During a fully packed 3 hours session we will introduce the possibilities of the Simulfy service and the Simulfy Javascript Client. We'll show you how we've made some of the apps that are already using Simulfy and dig deep into the way you can create your own app.

We had a blast at SXSW. Special thanks to Handelsroute.nl and NBSO for the excellent organization! And of course Fellows of Amsterdam for free drinks, pumping beats and more free drinks.

The comforting thing about the event was definitely the positive feedback we got from so many developers, product managers, marketing managers and UX designers. After a brief introduction most of them immediately began to sum up concrete possibilities for Simulfy for their apps, which was exactly what we hoped for.

We got a few questions about our different brand names. So lets explain this a little bit more. About 5 years ago we started Dutch Coast with the goal to create an all round digital agency that could do both bespoke projects and launch innovative services. We started the latter with Peers.me. Peers.me is a group collaboration tool we wanted to launch besides Google Wave. Well, we all know what happened to Google Wave so we had to downsize our ambitions with Peers,me. The service is however fully developed and supports a variety of groups world wide.

In our pursuit to introduce real-time collaborative features in Peers.me we build the prototype of the services that is now presented as Simulfy. We gradually had come to the conclusion that this is potentially such a generic and powerful service, that we decided to position this first as a stand-alone service before applying it in Peers.me.

For most people Real-time and Collaborative are quit abstract things. To explain the possibilities of Simulfy we knew we had to show something concrete. That’s why we build WetweetApp on top of Simulfy; yet another name for another service.

So Simulfy, Peers.me and WetweetApp are both services made by the fine people of Dutch Coast. We got a few other apps in the pipeline at Dutch Coast so don’t be surprised if you see us with walking around with a new t-shirt at SXSW2013.

Cheers all!

What do you think of our poster?

We've been selected to participate at the "Holland Pavilion" at South by Southwest this year. We're very excited to share our ideas about "Now is better together" and we hope to meet you. We're at the "Holland Pavilion", stand no. 1215. Mail me, daniel[at]simulfy.com, to meet up.