griffith's blog

Node.JS

Node.js is an evented I/O framework built on top of Google’s V8 JavaScript engine; its design is influenced by systems like Ruby’s Event Machine or Python’s Twisted. Node’s goal is to provide an easy way to build high performance, real-time and scalable web applications.

JavaScript has traditionally only run in the web browser. In recent years, projects such as CommonJS, Jaxer and Narwhal reflect the considerable interest in bringing JavaScript into the server side as well. In contrast to these concurrency models where OS threads are employed, Node is event-based rather than thread based. Thread based model often has the disadvantage of not scaling well with many long-lived connections necessary in real-time applications, becoming relatively inefficient and complex.
Node takes an alternative approach by telling the OS that it should be notified when a new connection is made, and then it goes to sleep. In the event of a new connection, the callback is executed; each connection is only a small heap allocation. This results in a much better memory efficiency under high-loads than systems which allocated 2mb thread stacks for each connection. Furthermore, Node is free of locks: almost no function in Node directly performs I/O, so the process never blocks. The programmers won’t need to worry about dead-locking the process.

Node’ advantage comes from the fact that most thread based models spend the majority of their time waiting for I/O operations which are much slower than memory operations. Node’s I/O operations are asynchronous, which means that it can continue to process incoming requests while the I/O operation is taking place.

The following is an example of a web server written in Node which responds with “Hello World” for every request.

var sys = require(‘sys’), http = require(‘http’);

http.createServer(function(request, response) {
response.writeHead(200, {‘Content-Type’: ‘text/plain’});
res.end(‘Hello World\n’);
}).listen(8124);

sys.puts(‘Server running at http://127.0.0.1:8124’);

This simple script imports the sys and http modules, and creates an HTTP server. The anonymous functions passed to http.createServer will be called every time a request is made to the server.

Node is a very exciting technology built on top of another powerful technology, V8. It has gathered a lot of attention within the technology community, and with its great module system, there are many third party modules available for just about everything.

jQTouch

jQTouch is a jQuery plugin with native animations, automatic navigation, and themes for mobile WebKit browsers such as iPhone, Nexus One, and Palm Pre. jQuery is a fast and concise JavaScript library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. The combination of jQuery and jQTouch allows any web application developer with little experience in jQuery to build mobile applications.

As an example, consider a simple home panel. This is the HTML for Home panel:

<html>
<head>
<title>To-Do</title>
<link type=”text/css” rel=”stylesheet” media=”screen” href=”jqtouch/jqtouch.css”>
<link type=”text/css” rel=”stylesheet” media=”screen” href=”themes/jqt/theme.css”>
<script type=”text/javascript” src=”jqtouch/jquery.js”></script>
<script type=”text/javascript” src=”jqtouch/jqtouch.js”></script>
<script type=”text/javascript”>
var jQT = $.jQTouch({
icon: ‘todo.png’,
statusBar: ‘black’
});
</script>
</head>
<body>
<div id=”home”>
<div class=”toolbar”>
<h1>To-do</h1>
</div>
<ul class=”edgetoedge”>
<li class=”arrow”><a href=”#about”>About To-Do</a></li>
</ul>
</div>
<div id=”about”>
<div class=”toolbar”>
<h1>About To-Do</h1>
<a class=”back” href=”#”>Back</a>
</div>
</div>
</body>
</html>

The HTML is simple, its body composed of two divs as children. The integration with jQuery and jQTouch is in the HTML head. An analysis of the HTML document head:

• jqtouch.css is a required file, defining structural design rules specific to mobile devices, including animation handling, and orientation.
• theme.css is a CSS theme included with jQTouch.
• jquery.js is the core file of jQuery framework. jQTouch requires jQuery, and it comes with its own copy of jQuery.
• jqtouch.js is the core file of jQTouch.
• variable jQT is the jQTouch initiated object. Two properties are defined in the Home panel: icon and statusBar.

jQTouch has several properties that allow users to customize the behavior and look of their apps. In this case, icon indicated the custom Web Clip icon, and statusBar controls the color of the strip at the top of the app in full screen mode.

All in all, jQTouch is a framework that facilitates developers to add native-looking animations to a web app.