MIDORI, another javascript framework worth checking out…

Most developers are comfortable working with the leading framework to achieve different functionality that uses javascript whether it’s a web 2.0 or mobile related projects; we have the elegance of Mootools, cool effects of Dojo, standard look/feel using Yahoo User Interface(YUI) library and of course, every programmer/developer sweetheart…jQuery!

Above mentioned are just a few of them and checking Wikipedia alone…we still have several on the list that is worth evaluating and add in our web development arsenal, some are open source others are not. Yesterday, I’ve stumbled upon MIDORI created by Aycan Gulez which checking the examples given; IMHO, it would surely be another framework that any developer can use on their application or project. Based on the introduction from the site, below are some of the things that the framework can offer…

What is midori?
midori is an ultra-lightweight JavaScript framework that gets the job done without getting in your way.

• Use CSS selectors to quickly access matching elements on a page: midori.get(‘div.serious’).apply(‘className += ” fun”‘) anyone?
• Ajax without breaking the back button. People don’t like to go back to the homepage after clicking 30 links (“what do you mean they weren’t actually links?!”), nor do they like broken bookmarks.
• Auto complete. Thanks to social networking, everyone on the planet knows about a million people on average now. So, make it easy for them to find the right “John” in your next-gen address book app.
• And more which checking the site is a must to know more on what MIDORI can offer!

After minutes of reading the examples, I’ve open up my Intype and do some basic codes to evaluate the framework. Voila, after a few minutes…got a basic example which basically access DOM element and it’s quite really easy! Just like the leading framework that most developers are already using, MIDORI had several functionality that is ready to use; DOM Manipulation, FX effect, Autocomplete, AJAX..and more.

HTML:

"Use CSS selectors to quickly access matching elements on a page..."

 Trigger:

 

CSS:

body {
 margin:0;
 padding:0;
 font-family:"Lucida Grande", Verdana, Arial, sans-serif;
 font-size: 12px;
}

a:link,
a:visited { text-decoration: none; color: #cd5500; }
a:hover { color: #147DB6; }

#container {
 margin-top: 50px;
 margin-left: 100px;
 margin-bottom: 50px;
 margin-right: 100px;
}

#el-example {
 padding: 5px;
 border: gray dotted 1px;
 color: white;
 background-color: black;
}

#el-trigger {
 padding-top: 10px;
 padding-left: 0;
 padding-bottom: 10px;
 border-bottom: black solid 3px;
}

#el-output {
 margin-top: 5px;
 padding-top: 20px;
 padding-left: 10px;
 padding-bottom: 20px;
 padding-right: 10px;
 border: orange solid 1px;
}

.el-demo {
 color: white;
 background-color: orange;
}

JS:

midori.addEventListener(window,'ready',function(e) {
midori.addEventListener(midori.get("#el-button"),'click',function(e) {
var oOutput = midori.get("#el-output");
oOutput.innerHTML = "Welcome midorijs!";
oOutput.className = 'el-demo';
});
});

Source code can be downloaded MIDORI Demo. Some JS library achieve things in shorter line of codes with probably better/faster implementation but there’s no harm in trying so checking it out is definitely worth it. The only minus point on my very short evaluation of the framework is that I can’t minify/pack the library and there seems to be no forum or basic support at least within the site.