Saher El-Neklawy A blog

Processing.js:Reinventing the wheel

HTML5 is the new standard for web pages. One of the most exciting features that it introduces is the canvas tag. This component allows rendering vector graphics on the browser. This was not previously possible with older HTML versions.

With that advancement in HTML, new JavaScript libraries emerge to be able to create vector visualizations at the client side. One of these libraries is Processing.js, which is a port of the java processing library.

For a first look at processing, the examples show very exciting examples. But the week point of the framework shows when try to develop an application that required much interaction week. To reach such an application, the "processing.js" written has to be highly optimized. No room for unnecessary code execution, use of floats or doubles, cache as much as you can, etc....

My other issue with Processing.js is the fact that they ported from the java library everything, even the syntax. This comes to be very frustrating to web developers. The first reason for that is most web developers are used to the syntax of JavaScript, so having things like int x=0; and int [] arr = new int[4]; come as a big surprise. This could be good for the java developer, but not the the web developer.

My other bone to pick with Processing.js is how primitive it is relative to the current state of the web. There are no components, and you can't define events on specific components. Everything  has to be done from scratch. Further strengthening the point of needing highly optimized code.

Backing to the title of my post, Processing.js tries to provide an alternative for Flash. In the web, the major disadvantage of Flash is it's isolation from the rest of the webpage, making it an independent entity. Processing.js does not over come this problem, as the visualization code for each canvas is a world of it's own. It can only access normal JavaScript code in the same page (which is possible with ActionScript 3's ExternalInterface). This problem even escalates with lack of direct communication between different canvases directly using Processing.js code. Furthermore, Flash is currently cross browser compatible, unlike the canvas tag due to it's new addition to the HTML standard.

Putting all the above factors in mind, I feel that using a the much mature flash plugin libraries which are closer to web developers is the best option currently in the market until the canvas tag matures more with richer libraries.