SummerOfCode/2012/Meemoo

Meemoo is "the Arduino for Web"

Meemoo (Hackable Web Apps)

Meemoo is a framework for hackable web apps by Forrest Oliphant and an incredible tool for web making. My main goal in the project is to extend Meemoo to make modules creation easier. Based on a collaborative live code editor I want people creating new modules for hackable web apps inside their own browsers, without external tools.

Give Meemoo a try! Go http://meemoo.org/iframework

Fork Meemoo! Go http://github.com/meemoo

Weekly Report

A daily log of my activities around Meemoo GSoC 2012 project is at: http://etherpad.mozilla.org/meemoo2012. Here is a resume of those activities week by week.

Before GSoC period

My first contact with Meemoo was by Alex McLean, who presented Meemoo as an interesting livecoding environment on Web. This was around middle of March and after some days I knew Meemoo was part of Moz GSoC.

At March 29 through April 23 I was in contact with Forrest. First of all I created a hello-world module (now we are calling this external modules by "NodeBox-Iframe") to understand how modules communicates inside Meemoo. I was surprised how easy was that! This first contact with Meemoo generated this tutorial: https://github.com/meemoo/iframework/wiki/Creating-a-Module.

I was amazed with Meemoo and started to write my proposal to Moz GSoC. I read about Moz focus on "creating webmakers" by Mark Surman, Dave Humphrey and others mozillians, so I wanted to integrate to join the initiative, and Meemoo seems to be an amazing tool around that. In this meantime I studied Backbone.js, window.postMessage and all the Meemoo's architecture: iframework (the environment) and meemoo.js (the embeddable module lib).

In this period I reported some issues on iframework and created a bunch of simple modules and apps:

• http://meemoo.org/iframework/#gist/2248496
• http://meemoo.org/iframework/#gist/2248582
• http://meemoo.org/iframework/#gist/2306646

I also fixed an issue around actions history:

• http://github.com/meemoo/iframework/issues/24

And at April 23 I was crossing my fingers :-)

Community bonding period

Week 1 (Apr 23 - Apr 30)

For this period I originally proposed:

   April 23 - May 21 (4 weeks): discussing with my mentor about the exact features and 
   means of implementation around Meemoo, syncing with my mentor works and doing 
   some prototypes.

I started thinking about the live code editor (how to implement that? as a module? how to evaluate the generated code?) and decided to go with an iframe editor using Ace: and

Week 2 (May 1 - May 7)

I discussed some ideas around the live code editor with Forrest and at the end of week Forrest pointed me to Meteor. I studied Meteor planning to use it to make the live code editor collaborative. And with Forrest we planned to use Meteor as a way to make the whole Meemoo (iframework) collaborative! I created a test app using Meteor and feel surprised. I just didn't liked all the magic needed to generate DOM, but we can use something in the middle to make the "view source" work.

Week 3 (May 8 - May 14)

Renato Fabbri invited me to use Meemoo on "Cúpula dos Povos" at "Rio+20" conference, here in Brazil. I planned to create some modules to do photo sequencing and 3D forms synthesis based on parameters extracted from <audio>. I started creating a supershape.js module: http://meemoo.org/iframework/#/gist/2644999

Forrest pointed me to toolness' friendlycode (now the editor behind Moz Thimble) and I got some ideas for the live code editor (mainly the tips thing).

I started to plan how to use the audio APIs (Web Audio, Audio Data, MediaStream) in a compatible manner inside Meemoo. I decided to create a Web Audio API module.

We discovered RecursiveDrawing.com and some ideas exploded :-)

Jussi pointed me to his mike.js (https://github.com/jussi-kalliokoski/mike.js) to get raw data from mic while the W3C Audio spec isn't defined.

Week 4 (May 15 - May 21)

We were getting more and more ideas for apps and modules so we decided to store everything here:

• https://github.com/meemoo/iframework/wiki/Module-ideas
• https://github.com/meemoo/iframework/wiki/Share-your-apps

Forrest was working at Hackable Clock app to Moz Summer of Code Party meeting (https://etherpad.mozilla.org/May22 ) and I forked the app with some audio thing: http://meemoo.org/iframework/#gist/2765356 ;-)

I also started to study the Web Audio API (https://gist.github.com/2728285)

Forrest started to design the Native Nodes for iframework and it make my ideas to change a bit. I decided to make the live code editor and the audio nodes as native nodes.

Coding period

Week 5 (May 22 - May 28)

Talked with Joe, the creator of Audiolet, about Web Audio API integration and he gave me some good ideas. But I still need to understand how to use the native Web Audio nodes instead of JavaScriptAudioNode.

Forrest presented Meemoo as a demo day at his University and meet Sebastian, the creator of an awesome WebPd fork!

For this week I originally proposed for GSoC:

   May 22 - May 28 (1 week): fixing the remaining bugs on iframework and meemoo.js, 
   getting them ready to work on the live code editor.

But Forrest was working on a refactoring, so I delayed the work on iframework and focused on the live code editor and audio nodes. I thought a lot about them and I decided:

• Having the live code editor as a friendlycode fork (livecode branch) and as a native node invoked by "view source" and "create new module" events inside iframework
• Having the audio nodes using Web Audio API or Audiolet (selected by browser type, for now) and as native nodes. As we got more resolution from W3C Audio spec we can remove the specific code

Week 6 (May 29 - Jun 4)

For the next two weeks I proposed:

   May 29 - June 11 (2 weeks): extending iframework to create the code editor. 
   I already have a simple editor implemented using Ace [1] and  another using 
   CodeMirror [2]. I will integrate one of those editors inside iframework.

I implemented some changes on live code editor (now a fork of friendlycode, the core of Moz Thimble).

I created some use cases (see http://etherpad.mozilla.org/meemoo2012, beginning of pad) and tested those with Web Audio API and everything worked well but just in a Chrome canary build. We need to have a node inside Audiolet to get raw data from <audio>/<video> sources. I have to discuss more with Joe about that.

Google launched Blockly and I planned to use that inside the live code editor, as an optional "mode" (like Emacs modes).

Forrest created a new branch for native nodes and I fetched. Things started to get a form!

Week 7 (Jun 5 - Jun 11)

I worked in the audio nodes and the live code editor. They are not native nodes of Meemoo yet, but standalone pages. I'm planning to integrate them with iframework in 2 or 3 days.

= Week 8: (Jun 12 - Jun 18)

Originally proposed:

   June 12 - June 18 (1 week): integrating the editor with share.js or etherpad-lite, 
   to make possible collaborative coding.

I have to discuss with Forrest because we planned to make the whole iframework collaborative. But for now, maybe we could have just the live code editor collaborative, based on Meteor.

I'm planning to have the editor and audio nodes as native nodes this week too.

More information

The official Meemoo page is: http://meemoo.org

The official project details is in: http://www.google-melange.com/gsoc/project/google/gsoc2012/automata/14001

And the accepted proposal is publicly available at: http://www.google-melange.com/gsoc/proposal/review/google/gsoc2012/automata/1

About the authors

Forrest Oliphant (mentor): http://forresto.com ___ @forresto

Vilson Vieira (student): http://automata.cc ___ @aut0mata