Skip to content

Butter.js 0.2 “GhostBusters” and Popcorn.js 1.2

March 9, 2012

Last week was pretty eventful as we released new iterations of both Popcorn and Butter.  Popcorn was mostly focused on bringing Internet Explorer 8 support and polishing up the YouTube code ( as much as we could ). Butter on the other hand focused on completely revamping the API, making the UI more tied into the modules, and removing a LOT of code.

After the roadmap was released our 0.2 version of Butter ( creatively dubbed “Ghostbusters” ) had a pretty clear goal of what was needed: make Butter good again.  What I mean when I say this is that Butter has gone through a ton of API changes, most of which went by without a lot of us knowing.  This is mostly due to the fact that Butter was never really a priority in the past, we would touch it up before event’s from time to time, but never really gave it the attention it deserved.  This time is different as Butter has a clear goal of 1.0 for Mozilla Festival in November of this year and we have a team of us making it a priority this time.

The first major change that we did was attempt to revamp the API.  We figured out where we went wrong before and decided to fix these mistakes once and for all, rather than continuing to patch it with hacky fixes.  This meant that the previewer no longer lived in an iFrame and is now actually the page itself.  We build the UI on top of the previewer, which might bring some unique CSS issues in the future, but definitely cleaned up the code a ton.  The main benefit to doing this was that we no longer needed a system in place to communicate with the iFrame ( the Comm module ) via POST messages.  This is great because the Comm module was beginning to turn up in a lot of aspects of our code, which definitely adds another layer of complexity.  We were actually able to completely remove the Comm module from our code, which cleaned it up quite a bit. We also cleaned up all of our modules, trashing the old and busted for the new and shiny. We removed a ton of cruft from our code base and in turn made it a lot easier for someone to jump into the middle of a module and begin hacking.  Some of our modules even got dragged into the core ( previewer, target stuff, page scraper ) because butter depends on them so heavily. In the end we removed about 970 lines from our code and made a lot more manageable.  Butter is really starting to take shape, and it’s showing with the new features that we added.

Some of the new features in the 0.2 version of Butter are the ability to drag trackevents directly onto the page, which is a lot more intuitive and user friendly. This means that a user can set up a target for a trackevent and set it’s start time to the scrubbers current time just by dragging onto the page.  We also added in some UI cue’s to notify users which trackevent is associated with which target and which elements on the page are valid targets.  This is a feature we’ve been wanting for a while and I’m sure everyone is glad that it’s finally in.  We’ve also made some huge strides in the performance department.  Mathew Schranz has been working on a project using the old Popcorn-Maker/Butter with 30+ minute video, over a 1500 trackevents, and custom templates.  This was great for us because we got a ton of feedback on what was a problem and where our attention was needed.  One of the main things Mathew found was that once a large number of trackevents were added, Popcorn-Maker became extremely unresponsive, to the point where it was unuseable.  This was something that we wouldn’t have found through our normal testing, as we have never had a use case for a 1500+ trackevents and probably wouldn’t have seen this.  The good news is Butter is faster than ever with new custom scroll and zoombars ( which are much nicer looking than before as well ). We have also been working on a server side component, Cornfield, which will allow users to sign in and save their projects.

Cornfield was prototyped this release and definitely got us all excited as to the future of Butter.  Cornfield is still early on in it’s development, but we can currently log in ( via browser ID ) and save a blob of data. The data that we are saving isn’t actual user data yet, but it proves that we are on the right track.  Cornfield ties into Butter via the io module, and allows users to log in, log out, save a project and view projects. The server currently doesn’t have a final home yet and requires local node server to run to test off of, but is great proof of concept. Some future features that we are looking to bring along with the implementation of a server are being able to share projects, fork someone elses project and remix it yourself, and also have plans for some crazy collaborative editing.  Keep an eye on Cornfield over the next few releases, it should be ready for harvesting by then.

The next release for Butter, dubbed “The Breakfast Club” will be focused on rolling out a version that is useable by the public again. This means being able to save and load from Cornfield, reliable startup Butter, and solving any glaring UI related problems.  We are also going to be focusing on getting our unit tests back up to par and integrated with both TestSwarm and Selenium. It’s going to be an intense month, but Butter is the most awesome it’s ever been, so expect it to only get better and better.

p.s Thanks for the awesome cake!

Advertisements
5 Comments
  1. That cake rules.

  2. I keep an eye on both butter and popcorn-maker and sure, it’s a bit hard to dive in. So it’s definitvely a good news. I’m very intersted in the track / timeline component to make some cool app with that kind of stuff!
    Another thing that could help other dev to jump in Butter is a small dev note on how things a architectured 🙂

    Lionel

    • Yea one thing we are definitely lacking at this point in Butter is any sort of documentation. It’s great to know other people are looking at what were making, can’t wait to see what comes out of it!

  3. Although I will glad to help with documentation when I’ll dive more deeply in butter !

Trackbacks & Pingbacks

  1. Butter: Bugs 256 and 290 | Mohammed Buttu

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: