Artlung Rosetta

Several Versions

Open each of the following six pages in browser tabs. The HTML source code of the page should be identical. The way the items look and interact when you click or hover over them should be equivalent. Each one loads a different JavaScript library. On each page, the implementation code loads into the bottom of the page as plaintext.

• dojo
• Ext Core
• Glow
• jQuery
• MooTools
• Prototype

Purpose

Artlung Rosetta is intended as a tool to explore the syntax of JavaScript libraries. Basic page manipulations, adding, showing, hiding content, appending text and html, adding events, etc.

Since learning a new syntax can be daunting, a "Rosetta Stone" would be helpful to compare and contrast code from the syntax of a library you know, versus a library you don't know.

How to compare

My suggestion is to open each page in a different tab in your browser and editor and watch the interactions. The source code for the main script will load at the bottom of the page, compare and contrast the code from page to page. If anyone has a better idea as to how to document these differences I'm all ears. Perhaps it would be better to have individual pages with each kind of action, but I think having all the syntax for a single HTML page aids learning. Again though, I'm all ears.

Resources

Dojo Toolkit

dojotoolkit.org

@dojo → @dojoframework

Ext Core → Sencha

extjs.com

@ExtJS → @Sencha

Glow

Glow

jQuery

jquery.com

@jquery

MooTools

mootools.net

@Mootools

PrototypeJS

prototypejs.org

@prototypejs

Created by: Joe Crawford joe@artlung.com in 2010.

Hosted on GitHub at http://github.com/artlung/Artlung-Rosetta/

Artlung Rosetta

Compare how to do the same thing with the same HTML with different JavaScript libraries. Behaviors and display should be as alike as practical. Libraries include:

• Dojo
• Glow
• ExtCore
• jQuery
• MooTools
• Prototype

tl;dr:

• Same HTML code
• Same behaviors
• Different JavaScript library loaded
• Thus different implementation code

For Example:

The following code adds a click event to any <input> inside an element with an id of interactionExperiments. On click, it will make that input disappear. You can see some libraries implement a hide() method, while some don't (seem) to have one available, so you have to set style.display = 'none' or in the case of MooTools you do .setStyle({'display':'none'}). I'm not sure I'm speaking these libraries as idiomatically as I could, and I look forward to your contributions, via email or GitHub.

jQuery:

$('#interactionExperiments button').click(function(){
   $(this).hide();
   return false;
});

Dojo:

dojo.query('#interactionExperiments button').forEach(function(item){
   dojo.connect(item, 'onclick', function(e){
      item.style.display = 'none';
      dojo.stopEvent(e);
   });
});

ExtCore:

Ext.select('#interactionExperiments button').on('click', function(e, target){
   Ext.get(target).hide();
}, null, {preventDefault:true});

Glow:

glow.events.addListener('#interactionExperiments button', 'click', function(e){
   glow.dom.get(this).hide();
   return false;
});

MooTools:

$$('#interactionExperiments button').addEvent('click', function(e){
   this.setStyle('display','none');
   e.stop();
});

Prototype:

$$('#interactionExperiments button').each(function(item){
   item.observe('click', function(evt){
      item.hide();
      Event.stop(evt);
   });
});