Meryl – A thin web layer for NodeJS

Lately, there has been a rising star that succeeded to attract quite a bit of IT people’s attention with its powerful and natural support for developing server-side applications using JavaScript in an event-driven manner. Yes it’s the new (for about one year?) fun platform NodeJS which is neatly written by Ryan Dahl, the nice guy who helps the community gracefully and accepts the contributions modestly.

nodejs

I know, you’re not the only one saying that there are already plenty of event-driven platforms like Twisted (Python), Event Machine (Ruby) or even programming languages with their first-class support for non-blocking processes like Erlang and Scala. So then, what is in the name of NodeJS? Because it is JavaScript, which is the programming language of web that is already widely accepted very much by web crew and this time it is fast.  It is fast why because it is tightly adapted on Google’s new V8 JavaScript engine , which really boosts JavaScript execution speed with its innovative internals.  And one of the most important reasons in my humble opinion is that NodeJS has a very active and helpful community around it. Day by day, new modules, libraries and frameworks are coming and people around them get really excited to be part of this formation and interaction. Please experiment this by subscribing the NodeJS mailing group, I really find it hard to follow every thread. Also check out the amount of NodeJS IRC channel’s activity with Mathias Pettersson‘ s genius NodeJS application that displays incoming messages around the world as dots on a well-designed map
interface.

By the way there is another reality that rising of html5 has boosted NodeJS popularity, that’s because with html5, web browsers are now becoming complete and perfect platform for programmable user interfaces. They provide solutions for every kind of requirements more with already implemented features on popular browsers like ‘web workers’, ‘web socket’, ‘canvas drawing’ and ’storage’ etc. recently. Browsers has just become the ‘Earth’, a unique, organic and complex platform to live in which are already available for everyone, under their feet. So, while the browsers’ logic managed by JavaScript, using JavaScript on server side makes us use one army-knife for every kind of application development safari. Dealing with one programming language of course also makes us feel more comfortable, professional and cheerful. I won’t dive into the features of JavaScript but “it is not a dsl converting dom objects into sliding menus” (thanks Manoj Mathai for this http://gianttweet.com/18688351371) and strongly recommend obtaining this book if you haven’t got a copy already.

While the jargon ‘event-driven development‘ tells much for programmers, nowadays it has a special meaning for serious corporation’s serious server-side applications with its ability of handling plenty of concurrent tasks easily. Dealing with more requests with higher throughput using same hardware resources is almost the key purpose of scaling horizontally for ‘hot’ server applications. This is where NodeJS appears under the spotlights because it has just become one of the biggest buster candidate for these issues. This quote from NodeJS web site is quite lean and mean.

Node’s goal is to provide an easy way to build scalable network programs.

If you’re confused with platforms dealing concurrency with non-blocking processes that they can use the only one core of modern multi-core processors, you’re right. But there are opportunities for NodeJS codebase to overcome this issue. Also there are helper projects like spark (thanks goes Tim Caswell) that forks your NodeJS processes to maximize the core usage of multi-core CPUs with plenty of options.

Ok, in fact this write up was planned to introduce my own simplistic and minimalistic web framework Meryl written on top of NodeJS, but how much NodeJS get me excited, I wanted to introduce it you briefly (Yes, I know it was a long brief :) ). Don’t wait, go obtain the latest NodeJS release here and build it for your own box. As this entry posted, the version of NodeJS is:

> node -v
  v0.1.101

Meryl is a minimalistic web framework for NodeJS. Yes, it is minimalistic because it is only 140 lines of code with restricted amount of simple features. You can go for project homepage on GitHub http://github.com/coffeemate/meryl/ . Since Meryl has the motto of ‘minimalistic’ it promises quite amazing set of features.

Meryl has:

  • Router implementation with path expressions.
  • Handler implementation which has a context object carrying easy access information about requests.
  • Middleware implementation for filtering every request for applying generic logics.
  • Easy to extend small codebase.
  • Simple usage.

Let’s break down for some real examples. If you obtained NodeJS already, you’d also better install npm (Node Packaging Manager). Npm is conventionally accepted current package manager for NodeJS modules and you’re so lucky that Meryl has already bundled for it. Go install npm with a few easy steps published here.
Thanks to author of npm Isaac Z. Schlueter who’s provided us installing and publishing NodeJS modules flawlessly.

Once you install npm, simply grab meryl by typing:

> npm install meryl

If you see the ‘ok’ at the end of the output of installation process, you are ready to go with Meryl. As this posted Meryl has the version of ‘0.2.0′ and not tested well with a poor documentation. However it has enough base to be introduced. Here is a simple ‘hello world’ example.


// app.js

var meryl = require('meryl');

meryl.h('GET /', function (req, resp) {
	return "<h1>Hello, World</h1>";
});

require('http').createServer(meryl.cgi).listen(3000);
require('sys').debug('serving http://localhost:3000');

This usual but useless example demonstrates the basic usage of Meryl. On the first line we import Meryl and obtain an instance of it. The function ‘h’ declares a handler which sends a simple html response to client, when client requests an url that matches with ‘METHOD path’ pattern expression given in the first parameter. Finally we attach meryl to the NodeJS’s built-in http module and put it into listening state on port 3000. You should run the code using NodeJS executable.

> node app.js
  serving http://localhost:3000

Once the code runs, you are ready to hit running server by your http client, mostly your browser pointing address http://localhost:3000. If you see the ‘Hello, World!’ you are done. Also you should try requesting a non-exisitng url and see what happens.

Since you are given the simplest usage, Meryl has more. Let’s try a more complex example.


// app.js

var meryl = require('meryl');

meryl.h('POST /users/{userid}', function (req, resp) {
	return '<h1>User of id: '
		+ this.userid + ' updated with data'
		+ this.postdata + '</h1>';
});

require('http').createServer(meryl.cgi).listen(3000);
require('sys').debug('serving http://localhost:3000');

This time we have a RESTful path and a variable named ‘userid’ inside it. When Meryl matches and routes request to this handler, handler can access path, get (query string) and post parameters within the current function execution object context. Also notice that this time we are trying to handle http post requests.

By the way there are two types of path variables,

  • { … } – curly braced parameters are partial, they match until the meet ‘?’, ‘/’ or ‘.’ character
  • < ... > – tagged(!) parameters are greedy, they match whatever they meet until you denote a block character.

To explain more, i want to show you sample usages of that two kind of path parameters.


// Won't match http://localhost:3000/static/common/css/style.css
meryl.h('GET /static/{filepath}', function (req, resp) {
	...
});

// Will match http://localhost:3000/static/common/css/style.css
meryl.h('GET /static/<filepath>', function (req, resp) {
	// common/css/style.css
	var filepath = this.filepath;
	...
});

Also you are free to mix your usual regular expression in path matching patterns.

Meryl has a simple middleware implementation implies a basic interface. Take the example below.


// app.js

var meryl = require('meryl');
var sys = require('sys');

// Works on all requests
meryl.p('.*', function() {
		this.headers.Server = 'Node - Meryl';
		return true;
	}
);

// Works on all GET request
meryl.p('GET <whatever>', function() {
		sys.debug('page requested: ' + this.whatever);
		return true;
	}
);

// Works on all requests under virtual path 'protected'
meryl.p('GET /protected/<filepath>', function() {
		throw new Error('Access denied: ' + this.filepath);
	}
);

meryl.h('GET /', function (req, resp) {
	return '<h1>Welcome, Meryl.</h1>';
});

// rest is omitted for brevity
// ...

require('http').createServer(meryl.cgi).listen(3000);
require('sys').debug('serving http://localhost:3000');

We declare a filter by using the function ‘p’. It almost works like any proper handler but they are responsible for processing every request they match before any handler matches. There can be more than one filter that executes on the same request in order they declared in the code. If one filter returns the boolean of ‘false’, the next declared filter won’t be called. If every filter returns the boolean of ‘true’ the handler matched is executed at the end of the chain. In the example we declare three filters. The first one match every requests comes into server and attaches an header to be sent to the client, it returns ‘true’ by default and let Meryl to call second declared filter. The second one works on every http ‘GET’ request and logs the paths to the standart output. And the last one works on every request under the virtual directory ‘protected’. As you guess it denies incoming requests and breaks the chain by throwing an exception. Once the chain broken down, the matched handler for the current route won’t be called.

Meryl currently shows two error pages. It shows ‘404′ document not found page when it can not match a handler for an incoming request and ‘500′ server error page when an error occured on the server side. You are free to define your custom handlers for both.


meryl.err = function(req, resp) { ... }

meryl.notFound = function(req, resp) { ... }

Meryl is really small and funny. I’m spending so enjoyable times while playing with it. I know it’s too experimental and featurless for in production use. But don’t stop here. There are plenty rock solid, full stacked web frameworks for production use like TJ Holowaychuk‘ s ExpressJS (On Connect), Geddy, Grasshopper etc.

Also you should checkout the great amount of existing modules written for NodeJS http://wiki.github.com/ry/node/modules

This has become quite a long post. It’s done for now but I will continue propaganding NodeJS and Meryl with my plain English :) . Please do feedback, it is greatly appreciated.

Find me on twitter http://twitter.com/kadirpekel

Good luck with NodeJS.

Proxifying Objects in Javascript

While filling my spare times with my future startup project implementation, i needed a simple framework that exchanges my model objects to my persistence layer and vice versa.

My development stack for the project goes for Nodejs, Express and Redis and love them very much as such as Javascript. So with these tools in the hand, mapping my model objects to a Redis instance was not so challenging, was so funny though. But as a performance optimization i did not want all my model objects’ attributes mapped, instead i considered to reflect only the modified ones to Redis. To do this, i had to know which attributes of my model object had changed. So i decided to write a helper class that tells me which attributes of my model have just been modified. Below it’s shown a quick’n dirty solution for the problem run on Google’s v8 engine.

function Proxy (target, onchange) {
	this.__proto__ = target;
	var proxy = this;
	function proxifyPropery (p) {
		Object.defineProperty(proxy, p, {
			get: function() { return target[p]; },
			set: function(val) {
				if(val != target[p]) {
					if(!onchange
						|| (onchange && onchange(target, p, target[p], val))) {
						target[p] = val;
					}
				}
			}
		});
	}
	for(var p in target) {
		if (target.propertyIsEnumerable(p)) {
			proxifyPropery(p);
		}
	}
}

Here Object.defineProperty comes into the spotlight. It helps us to define getter/setter implementations programmatically. You can google it for the different Javascript engine implementations. I won’t dive into details for it.

Using the helper class above, proxying a custom object to determine attribute changes become pretty easy. The code below demonstrates common use cases of the Proxy class above.

function Point (x, y) {
	this.x = x;
	this.y = y;
}

Point.prototype.add = function (other) {
	this.x += other.x;
	this.y += other.y;
}

var a = new Point(3, 4);
var b = new Point(6, 8);

var p = new Proxy(a,
	function (target, prop, oldValue, newValue) {
		print(prop + ' changed from ' + oldValue + ' to ' + newValue);
		return true;
	}
);

p.x = 11;

// output:
// x changed from 3 to 11

print(p.x);
print(a.x);

// output:
// 11
// 11

p.add(b);

// output:
// x changed from 11 to 17
// y changed from 4 to 12

You can see how the proxified object a inherited and it’s attributes transparently masked by the new proxy object p. Please note that you shall also want to cancel the attribute assignments by returning false from the callback. And of course you may want to add your own hooks to the Proxy class and improve it as your needs.

Now it’s up to your imagination how you could use it. Please notice me if anything broken.

Hope this helps, happy coding…


Sample IPhone Application: Drawing Routes onto MKMapView Using Unofficial Google Maps Directions API

In my last IPhone project i needed to draw driving routes between two locations on a map. To accomplish this, as a startup you should use the great component named MKMapView that already exists in IPhone SDK since the version 3.0.0.

It is so easy to implement some map related requirements with this useful component as long as you need to draw routes between two locations. Yes, the MkMapView component is great but if it would have got a directions support it should be a perfect piece of the SDK. You already know that the built-in Google Maps applications on IPhone has the directions support somehow but the feature lacks on the MKMapView component.

IPhone Google Maps

To have the work done, two problems must be solved. First thing is how to obtain route drawing data, and the second one is that if we found one how we should visually draw it onto the map. Messing around the web over Google i found an unofficial Google Maps wiki Google Mapki which documents lots of unknown Google Maps API features. So you should take a look at this page http://mapki.com/index.php?title=Google_Map_Parameters to find out what should do with Google’s less known back doors.

Anyway, according to Google Mapki we could grab routing data between two locations by requesting the url below with a parameter set which are lean and mean.

http://maps.google.com/maps?saddr=41.029598,28.972985&daddr=41.033586,28.984546&output=dragdir

The parameters are self explaning

saddr: Source location’s latitude and longtitude
daddr: Destination location’s latitude and longtitude
output: Passing the value ‘dragdir’ forces http response to be in json format (I guess)

The response must be like shown below

{tooltipHtml:" (2.7\x26#160;km / 8 mins)",polylines:[{id:"route0",points:"_rlyFcxyoDn@BrEs@??VXpA~F??e@d@kAY??O@QR??i@m@kBS}C|@}@Ia@Y]i@c@uBeC_EkJ_EiAB{Dx@??SEi@e@g@oA}A{Iy@oIoAmHw@uJeBaHeB}F??@iALa@rAuBXG??j@Zj@~@f@ZdCf@zHp@|At@??Ru@",levels:"B?BB?BB?BB?BB???@???@@?BB????????BB???BB?????BBB",numLevels:4,zoomFactor:16}]}

The part that we interested in is the polylines field which contains a weird data that seems to be encoded. After some research i found Peter Chng’s blog post that points a php script that decodes encoded polyline data. I’d tried to port the script to Objective-C and fortunately it worked like a charm.

After all, i owned a NSArray instance with full of location data for the given route data :) and what a luck I completed the first task.

The second task completed not as hard as the first one, with the chance of facing a nice post solved my second problem. Thanks goes to Craig Spitzkoff as publishing this post which draws a bunch of location data onto MKMapView. I worked a bit to port the code as my needs and with a snippet like below it gives the screen shot shown afterward.

- (void)viewDidLoad {
    [super viewDidLoad];

	MapView* mapView = [[[MapView alloc] initWithFrame:
						 CGRectMake(0, 0, self.view.frame.size.width, self.view.frame.size.height)] autorelease];

	[self.view addSubview:mapView];

	Place* home = [[[Place alloc] init] autorelease];
	home.name = @"Home";
	home.description = @"Sweet home";
	home.latitude = 41.029598;
	home.longitude = 28.972985;

	Place* office = [[[Place alloc] init] autorelease];
	office.name = @"Office";
	office.description = @"Bad office";
	office.latitude = 41.033586;
	office.longitude = 28.984546;

	[mapView showRouteFrom:home to:office];
}

The result is:

I guess you’ve scrolled here immediately to download the sample project. Sorry if you’d expected more detailed explanations but it’s really hard to touch every edges. You should investigate the sample project instead. Here you are;

Download Sample Project

Hope this post helps.


Debugging through Maven Tomcat plugin by Eclipse

If you like to use Tomcat or Jetty plugin for Maven to run your web applications on the fly without installing any of standalone versions of these servlet containers, you may want to debug your code through these plugins. Personally i like using these plugins for development phase of a project in a team because it eliminates the time you spend for running the applications painlessly as soon as checking out the project from it’s code base. But debugging the running code under maven process can be tricky if you don’t know how to.

So I wrote a very simple bash script which starts maven in debug mode, so by using this you can freely connect to debugger from a remote debugging client from anywhere. In this case i’ll use Eclipse IDE to debug our running application. Before begin, please note that all commands i’ll share with you is all applied on a unix based environment (Linux). So on another operating system you may have to migrate given instructions.

First of all, we’ll create the small bash script which has the only duty of setting MAVEN_OPTS environment variable and take your later arguments as mvn arguments. You can build the script like shown below:

 $YOUR_MVN_PRJ_HOME $> echo -e 'export MAVEN_OPTS="-Xdebug -Xnoagent -Djava.compiler=NONE -Xrunjdwp:transport=dt_socket,server=y,suspend=y,address=8000"\nmvn $@' > mvn-debug
 $YOUR_MVN_PRJ_HOME $> chmod +x mvn-debug

From now you have the ability for debugging your project. You should run your web applicaton by using the script like:

 $YOUR_MVN_PRJ_HOME $> ./mvn-debug tomcat:run

Or if you use jetty:

 $YOUR_MVN_PRJ_HOME $> ./mvn-debug jetty:run

Later you execute command above you must see an output like below.

 $YOUR_MVN_PRJ_HOME $> ./mvn-debug tomcat:run
 Listening for transport dt_socket at address: 8000

This output indicates that you could connect to this listening debugging server instance to start it. The remote debugging client we will use as i mentioned before is our old buddy Eclipse IDE. As using Eclipse IDE in this case i assume that you already know how to open your maven projects in the Eclipse IDE by Eclipse Maven Plugin (http://m2eclipse.sonatype.org/) or Maven Eclipse Plugin (http://maven.apache.org/plugins/maven-eclipse-plugin/) . You should read the installation instructions and related documentations from plugins’ home pages.

If everything else is now ready to continue, let’s debug our project by Eclipse IDE. Left click on your project’s root node and from the context menu click ‘Debug As > Debug Configurations’. From the opened dialog find ‘Remote Java Appliaction’ node in the list left and double click on it to create an instance from selected configuration template.

That’s all! Now you can click ‘Debug’ button in the bottom right corner of the dialog to start your listening debugging server instance. Now you’re ready to put your breakpoints in your code and inspect through the lines.

Also there is a more detailed remote debugging documentation here http://docs.codehaus.org/display/MAVENUSER/Dealing+with+Eclipse-based+IDE if you wonder further details. Here it notes that if you have Maven version 2.0.8 or newer you could use built-in mvnDebug script which is more appropriate to go with.


Facebook Connect Integration With Spring Security 3.x

facebook_springIt’s so popular that nowadays almost all web applications on the internet use Facebook Connect to attract their potential users to move their pre-built social networking structure to on their own systems. It’s no exception that our new social networking based project at work wants to adopt this feature so since we use Spring 3.x as the main framework of our project, as team we’ve spend some time to inject the Facebook Connect structure into the Spring Security (F.K.A Acegi Security). As a nice side effect, i decided to extract this integration information from our in house project to contribute and rearranged the structure to share with you in a more easy and convenient way.

While sharing this experiment with Facebook Connect with you, i assume that you already know or ready to investigate the Facebook Connect API and Spring Security. You should find a significant amount of information about Spring Security from it’s official documentation http://static.springsource.org/spring-security/site/ and Facebook Connect again its own documentation wiki http://wiki.developers.facebook.com/index.php/Facebook_Connect

So as you know the Spring’s solution for securing web applications is an implementation of core security api across the stack of a few servlet filters. Due to stateless nature of http protocol spring keeps the information of authentication and authorization requests with help of browser session cookies and make some magic behind to keep your resources secure. You should refer to the picture given to take a look at Spring Security from a bird’s eye view with the help of a UML sequence diagram published here https://twiki.auscope.org/twiki/pub/Grid/AuScopePortalSecurity/PortalAuthorisation_details.jpg. Another resource for understanding spring security is the section 5.4 in the official technical documentation http://static.springsource.org/spring-security/site/docs/3.0.x/reference/technical-overview.html#tech-intro-web-authentication.

OK, you say shut up. So let’s do some stuff.

The integration code can be obtained from http://code.google.com/p/spring-security-facebook. You should checkout code with svn scm like shown below.

~$ svn checkout http://spring-security-facebook.googlecode.com/svn/trunk/ spring-security-facebook-read-only

This is a maven project so later you enter the project directory you could type

~$PROJECT_HOME$ mvn install

After build operation completes, you should use the library in your spring project by declaring dependency in your own project’s pom file. It’s something like:

	<dependency>
		<groupId>org.springframework.security</groupId>
		<artifactId>spring-security-facebook</artifactId>
		<version>1.0.0-ALPHA</version>
	</dependency>

And also you must also have facebook-java-api dependency in your pom file. You could find more information about this api from here http://code.google.com/p/facebook-java-api. It’s used in our library to talk with Facebook Connect Api.

	<dependency>
		<groupId>com.google.code.facebookapi</groupId>
		<artifactId>;facebook-java-api</artifactId>
		<version>2.1.1</version>
	</dependency>

Now you’re ready to go with real stuff. Here instead of trying to tell how to use this library, i prepared a sample web application. It’s the best way IMHO that you spring users could understand how library integrates Facebook Connect Api well with the Spring Security, because it will take too much time to visit all details while showing you how to accomplish this. But for you as spring users, i can provide the minimal Spring application context file here to show that how it’s clean to configure the integration.

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:context="http://www.springframework.org/schema/context"
	xmlns:security="http://www.springframework.org/schema/security"
	xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-3.0.xsd
           http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-3.0.xsd
           http://www.springframework.org/schema/security http://www.springframework.org/schema/security/spring-security-3.0.xsd">

	<security:http entry-point-ref="authenticaionEntryPoint">
		<security:intercept-url pattern="/static/login*/**" access="IS_AUTHENTICATED_ANONYMOUSLY" />
		<security:intercept-url pattern="/static/secure*/**" access="ROLE_FACEBOOK_USER" />
		<security:logout logout-success-url="/static/index.html" />
		<security:custom-filter before="FORM_LOGIN_FILTER" ref="facebookAuthenticationFilter" />
	</security:http>

	<bean id="authenticaionEntryPoint" class="org.springframework.security.web.authentication.LoginUrlAuthenticationEntryPoint">
		<property name="loginFormUrl" value="/static/login.html" />
	</bean>

	<bean id="facebookAuthenticationFilter" class="org.springframework.security.facebook.FacebookAuthenticationFilter">
		<property name="authenticationManager" ref="authenticationManager" />
		<property name="authenticationSuccessHandler">
			<bean class="org.springframework.security.web.authentication.SimpleUrlAuthenticationSuccessHandler">
				<property name="defaultTargetUrl" value="/static/secure.html" />
				<property name="alwaysUseDefaultTargetUrl" value="true" />
			</bean>
		</property>
		<property name="authenticationFailureHandler">
			<bean class="org.springframework.security.web.authentication.SimpleUrlAuthenticationFailureHandler">
				<property name="defaultFailureUrl" value="/static/login.html" />
			</bean>
		</property>
	</bean>

	<bean id="authenticationProvider" class="org.springframework.security.facebook.FacebookAuthenticationProvider">
		<property name="roles" value="ROLE_FACEBOOK_USER" />
	</bean>

	<bean id="facebookHelper" class="org.springframework.security.facebook.FacebookHelper">
		<property name="apiKey" value="YOUR_API_KEY" />
		<property name="secret" value="YOUR_SECRET" />
	</bean>

	<security:authentication-manager alias="authenticationManager">
		<security:authentication-provider ref="authenticationProvider" />
	</security:authentication-manager>

</beans>

You can download the sample web project here: http://code.google.com/p/spring-security-facebook/downloads/detail?name=spring-security-facebook-web.zip

You can browse project details here: http://code.google.com/p/spring-security-facebook/

This is a hot new blog entry in the late night. But if anything broken, i’ ll try to fix it ASAP.

Well also if you intend to contribute to code, you’re welcome. Please contact with me.

Hope this helps.