I’m very pleased to announce the birth of WebHookIt !

Visual scripting for the web, Pipes for hackers, using Node.js, and mongoDB

WebHookIt is kind of an open-source Yahoo! Pipes, but with a wider scope of applications. The idea is to have a very HTTP-centric visual language to write glue-code between web-services using Node.js.

It’s made to be customized/modified/enhanced :

• easily add core modules (written in Node.js)
• customize UI (forms and modules, using WireIt and inputEx)
• customize the execution engine
• composability, reuse modules

It’s perfect for :

• Notifications (email, sms, IM, social networks)
• services integration and communication
• plugins for web applications (Webhooks)
• chaining web-services
• providing simple webservices

It’s not a hosted service like Yahoo! Pipes, but you can install it on your local machine, your servers, on Joyent Node.js SmartMachines, and maybe even on your Palm Pre devices (lucky you!)

We are not there yet

This first version of WebHookIt is still alpha software. APIs may change and some basic features are still missing. Those are going to be adressed in the first stable release :

• loop control
• conditional execution
• Community, pipes sharing, leverage the pre-existing package manager npm

All the links

• The online demo : http://webhookit.no.de (hosted @Joyent)
• Source obviously hosted on GitHub
• The documentation uses the awesome GitHub pages
• Forum here
• Report any Issue on GitHub issues

Here is a video of WebHookIt in action against the Prowl API : (sorry for the music… it won’t happen again !)

The long awaited release of WireIt is finally here ! Awaited indeed, since a major bug was still present in version 0.3.0, preventing it to work on IE. It has been fixed for a long time on the repository but has discouraged many people using WireIt (hopefully not too much…).

What’s new in version 0.4.0 ?

• inputEx integration: inputEx is another of my YUI libraries, to create fields and forms. Through a new class called “FormContainer”, you can now build WireIt containers using the advanced forms options from inputEx. The value is saved at the layer level for you through Layer.getWiring

• WiringEditor: This is my favorite feature. While still largely incomplete, the Wiring Editor provide a full-blown interface to create visual languages. It takes care of most of the interface you might want to build a visual editor on top of WireIt. The language definitions are written in JSON, I hope this will greatly reduce the learning curve of WireIt.  The transparent ajax communication with the database is handled through a SMD webservice using YUI-RPC. WireIt provides a simple php backend that stores the JSON wiring states in MySql (used for the demos on wireit’s website).

• new options:
  • terminals position in containers: {top: , left: , right: , bottom: } instead of [x,y]
  • Terminal.alwaysSrc : force this terminal to be the source element in every connected wires
  • Container.preventSelfWiring : prevent connections between two terminals of this container

• Four Wire methods for handling mouse events. You can override them for a custom use :
  • onWireClick
  • onWireIn
  • onWireOut
  • onWireMove

• API Documentation with YUI Doc (much more precise on properties and events)

• Layer Map is now clickable and draggable. It will move the linked layer accordingly.

• IE Bug fix ! (finally)

• Moved to github for git repository and better wiki

It’s now pretty easy to build visual languages applications. (or at least, prototype them…).

You can follow some projects on http://github.com/neyric/wireit/network. I’m especially looking forward to LeifW XProc Visual Editor

Here is a little presentation that I published on WireIt’s homepage :

We received queries on the inputEx forum to switch our repository to Git.

The YUI library recently moved to GitHub, so I decided to move both of the YUI-based libraries, inputEx and WireIt, to the same plateform.

Here are the two new repositories: inputEx and Wireit.

The GitHub interface is friendly, it displays nice stats, has a cool API, and Git ! (But I’m missing a ticket system)

The good news is that it is really easy to import a SVN repository, and keeps the commit history.

See you on GitHub !

Ah… and Happy New Year !

I made a few updates this week-end. They mostly concern the Container
and Layer classes.

Here are the changes:

• new Layer.getWiring function to save the state of the wiring. It
  can be customized by overriding Container.getConfig
• jsBox updated to use the Layer.getWiring function
• no default width for containers so they can auto-adjust to the
  content
• Layer.addContainer and Layer.addWire now returns the created
  instance
• Added the method Container.redrawAllWires and
  Terminal.redrawAllWires
• Added Layer.removeAllContainers
• adds a “body” div to the container
• CSS updates on Containers and Layers
• adds a focus CSS class on the last mousedown-ed container in the
  layer
• bugfixes (events “addWire” and “removeWire” added to WireIt.Layer,
  offset in the connections)

I just released the new 0.2.0 version. You can download it here.

Here are the main changes:

• 2 new classes were added: WireIt.Container and WireIt.Layer
  Every project you might start using WireIt needs a widget that could contain Terminals, and that could be moved around. This is the goal of WireIt.Container.
  The Layer class creates a DIV element that can contain multiple containers and wires. It will be useful to save the state of the containers and connections between the terminals. (It also provide an extensible frame with scrollbars.)
• Custom events added to create richer interactions when editing the wires.
• A minified version built with YUI Compressor.
  This javascript minifier is almost perfect: I just wish you could have multiple input files…
  The result file is just below 20k.
• jsBox: This is a sample application using WireIt.
  Create boxes containing javascript functions, connect them together, and run your program !
• Many new configuration options, configurable CSS class names, and some new methods in the Wire and Terminals classes.

Don’t forget to give your feedback in the forum !

Have fun !

I’m pleased to announce the first release of WireIt (version 0.1) !

WireIt is a javascript library that allows you to create cool wires like Yahoo Pipes. It is built upon:

• the CANVAS tag to render the wires
• the YUI Library v2.3.1
• excanvas for IE support

It comes with some examples (see the home page) and an application example, the Planar Game.

Why would you make such a library ? After playing a lot with Yahoo! Pipes, I realized how powerful it was to create mashups. I was already used to visual programming Languages like PureData or Mac OS Automator, but they’re definitly not able to do mashups.

However, Yahoo Pipes has this big inconvenient to run your pipes on their web servers. It has at least two disadvantages. First, it means we will always be restricted to the modules and types they implemented. You could always create a restful webservice and wrap it into a pipe, but the execution time blows up. Second disadvantage, you have to be careful with your data privacy. Indeed, I would like to create some Mashups that could mix with my private data in a more secure way.

That’s how I started to develop a Yahoo pipes-like application, and how I ran into this stumble block: “How the hell did they do those pipes ?”.

Waiting for your feedback,
Eric