
Before you start reading this article, I'd suggest to take a look at the [Route Planner application](https://veerasundar.com/route-planner) to understand what I am talking about. This post explains the process/code behind the route planner JavaScript application. You can fork/star [the project in Github](https://github.com/vraa/route-planner) if you wish.

[![Route Planner](http://i.imgur.com/BwVt4y2.png?1)](https://veerasundar.com/route-planner)

Having [photography as a hobby](https://500px.com/vraa) makes me travel to places whenever I get a chance. When planning such trips, I needed a tool that assist me in analysing different routes. **Google Maps** is good, but it did not have the feature that I wanted. I.e. showing distance and time between individual destinations. Having a hammer called [React](http://facebook.github.io/react/), this problem really started looking like a nail to me.

I have been using React for a while at work. In short, **I love it**. For a couple of my other side projects, I was using [Backbone](http://backbonejs.org/), which was good. However, with the added knowledge of React, I was really looking for an opportunity to unleash its power :). So I decided to make a simple React application that uses the **Google Maps API and helps me to plan routes for my trip**.

## Laying the foundation - browserify and npm

It is very important to have a good build system and module framework to organize your code. As your project grows, you'll thank yourself for laying a good foundation in the beginning of your project. I decided to use [Grunt](http://gruntjs.com/) and [Browserify](http://browserify.org/) as by build system and bundler. Moreover, there's a JSX transform called [Reactify](https://www.npmjs.com/package/reactify) which makes it easy to use React and Browsrify together. With this, here's my `package.json` with all my project dependencies.

```json
{
    "name": "routeplanner",
    "version": "0.0.1",
    "description": "Google Maps Route Planner",
    "main": "index.js",
    "dependencies": {
        "backbone": "*",
        "underscore": "*",
        "react": "*",
        "react-backbone": "*",
        "react-mixin-manager": "*",
        "google-maps": "*",
        "domready": "*",
        "promise": "*",
        "classnames": "*",
        "vent": "*"
    },
    "devDependencies": {
        "grunt": "*",
        "browserify": "*",
        "grunt-browserify": "*",
        "grunt-cli": "*",
        "grunt-contrib-sass": "*",
        "grunt-contrib-cssmin": "*",
        "grunt-contrib-watch": "*",
        "grunt-contrib-connect": "*",
        "reactify": "*"
    },
    "scripts": {
        "dev": "watchify --ignore-watch=node_modules/** -v -d -t reactify src/js/index.js -o resources/js/routeplanner.js"
    },
    "author": "Veera"
}
```

I have also added `grunt-contrib-sass` and `grunt-contrib-connect` as my dev dependencies. These two helps in compiling my `.scss` files to `.css` and serving static files during development.

As you can see I have also added a **npm script** for auto compiling my project -
```
watchify --ignore-watch=node_modules/** -v -d -t reactify src/js/index.js -o resources/js/routeplanner.js
```

This script, when running, makes sure to take all the JavaScript files referenced from `src/js/index.js`, transform them from JSX to pure JavaScript and then bundle all of them together into `resources/js/routeplanner.js`.

## Grunt build system

After you have your dependencies defined in a `package.json`, next step is to create your build pipeline. For my project, all I needed is three simple tasks.

1. Watch all my `.scss` files for changes.
2. When they change, compile them into `.css` files.
3. A static web server for my development.

Here's my `Gruntfile.js` that include the above said tasks.

```javascript
module.exports = function (grunt) {

    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        watch: {
            options: {
                atBegin: true
            },
            sass: {
                files: ['src/scss/**/*.scss'],
                tasks: ['sass']
            }
        },
        sass: {
            dist: {
                files: {
                    'resources/css/main.css': 'src/scss/main.scss'
                }
            }
        },
        connect: {
            server: {
                options: {
                    port: 8888,
                    keepalive: true
                }
            },
            keepalive: true
        }
    });

    grunt.loadNpmTasks('grunt-contrib-sass');
    grunt.loadNpmTasks('grunt-contrib-watch');
    grunt.loadNpmTasks('grunt-contrib-connect');

}
```

With the bundler and build system is in place, now its time to write the real code.

## The React application

**React** provides the **View** part of the **MVC** model. All it needs a DOM element to render the React component. You can design your application to be a React component that contains other sub components. That's exactly how I designed the route planner. A single `<Application/>` component that contains all my sub components such as `<Header/>`, `<Map/>` etc.

Here's a code snippet of my application.

### HTML Markup

```html
<div class="app" id="app"></div>
<script src="resources/js/routeplanner.js"></script>
```

### Render the React component into the DOM

```javascript
React.render(<Application />, document.getElementById('app'));
```

### The Application component

```javascript
var Application = React.createClass({
	render: function () {
        return (
            <div className='route-planner'>
                <Header/>
                <Map />
                <div className='panel'>
                    <RouteTabs />
                    <RoutePlan />
                </div>
            </div>
            );
});
```

With this structure, all you have to do is, create each components and define the `render()` method for each of them. For example, here's the `<Header/>` component.

```javascript
var Header = React.createClass({
    render: function () {
        return (
            <header>
                <h1><Route Planner</h1>
            </header>
            );
    }
});
```

## Handling the state

When designing a React application, it is very important to consider where you hold your application state. React suggests to have your components **stateless**. But if you want to have states, then hold the state as high as possible in the component hierarchy and pass it along to the child components as **props**. This way, there will be only one source of truth and data flow will be unidirection.

For my application, I decided to hold my state in the `<Application/>` component which is the top level component.

```javascript
var Application = React.createClass({
    getInitialState: function () {
        return {
            routes: this.load() || SeedData.routes,
            previousRoute: -1,
            activeRoute: 0,
            selectedPlace: null
        };
    },
    render: function () {
        var mapService = this.props.mapService,
            route = this.state.routes.at(this.state.activeRoute);
        return (

            <div className='route-planner'>
                <Header/>
                <Map mapService={mapService} route={route}/>
                <div className='panel'>
                    <RouteTabs
                    routes={this.state.routes}
                    active={this.state.activeRoute}
                    />
                    <RoutePlan
                    routeIndex={this.state.activeRoute}
                    fadeOut={this.state.hideActiveRoute}
                    />
                </div>
            </div>
            );
    }
});
```

The `getInitialState()` function returns the initial state of my application. Whenever there's some data changes, I have methods that update the `<Application/>` component's `state` object. When the state changes, React calls the `render()` method of the `<Application/>` component, inside which I pass the current state object to the child components.

## Conclusion

I believe I showed you the basic structure of the Route Planner application. If you'd like to see more code, feel free to fork [the route-planner project in Github](https://github.com/vraa/route-planner). If you have any questions or wants to know more about any piece of code in this project, please leave a comment.


Google Maps Route Planner using ReactJS


Today, I am very happy to announce the launch of [countrack.me](http://countrack.me "A tool to track your activities anonymously").

> Countrack.me is a HTML5 / JavaScript application to track your daily activities anonymously.

It's been developed out of my own need to keep track of my activities. The idea-to-app happened in just 2 weeks, as 13 days ago I made [the first commit](https://github.com/vraa/countrack/commit/85f66b46476dba790e73ccf928ee4069ae4d2b8f). I designed the application, primarily keeping Mobile as the platform of choice.

Here's what the application looks like.

<a
  href="http://countrack.me"
  title="countrack.me - A tool to track your activities anonymously"
>
  <img
    src="http://farm8.staticflickr.com/7452/9654303220_fbe8facf08_c.jpg"
    width="800"
    height="600"
    alt="countrack.me screenshot"
  />
</a>

Here are some of the bullet points that tries to explain you about the application.

- Its 100% `JavaScript` application with no server code (except for the `nginx` that serves the static files).
- Its Free & [Open Source](http://github.com/vraa/countrack).
- There are no signup / signin BS (that makes one less password to remember). You can start using the application right now, as everything is client side, including your activity data which gets stored in browser's `localStorage`.
- Optionally, you can upload your data to [Firebase](http://firebase.com) if you happen to clear your browser cache often and want to keep a backup of your data. This is completely **opt-in** and without you uploading, the application won't send any of your data to any server.
- Offline mode enabled. Lost the internet connection? You can still use [countrack.me](http://countrack.me "A tool to track your activities anonymously")

It would be great if you [try out this tool](http://countrack.me "A tool to track your activities anonymously") and let me know your feedback.

This is just a start and I am hoping to add few more features to the app in the upcoming releases. If you happen to have any suggestion, please feel free to contact me or [open an issue](https://github.com/vraa/countrack/issues).


Launching Countrack.me - my new side project


**tldr; **

It all started when I asked the following question to my twitter friends:

> Juts checking: If there's a service that sends you a Thirukkural every day, would you be signing up for it?
>
> '€ Veera (@vraa) [January 31, 2012][1]

[1]: https://twitter.com/vraa/status/164394058238799873

My idea was simple: to send out Thirukural poems everyday to the people that are signing up for the service. Instead of sending it to email addresses, I decided to use Twitter and Facebook as my medium since that's where most of the people are hanging out these days.

There were few tweeples responding to it positively. Even though there are already few other alternative services available, I decided to move on and build it as I thought the new service will be different and be a learning experience.

It took a weekend to code the 80% of the site and I hosted it on App Engine platform. And the site is live for the past few weeks -

[![][3]][3]

[]: http://twikural.veerasundar.com

Now, the service has [31 followers in Twitter][3] and [37 Likes in Facebook][4]. It has already sent out 120 Thirukurals till date. ![:)][5]

[3]: https://twitter.com/#!/twikural
[4]: https://www.facebook.com/twikural
[5]: https://veerasundar.com/blog/wp-includes/images/smilies/icon_smile.gif

And, I'm now open sourcing the code. The project is now [hosted @ Github][6]. You are welcomed to check it out and if you'd like to contribute, feel free to send a pull request / contact me.

[6]: https://github.com/vraa/twikural

I would like to thank my fellow tweeples - [@iGhillli][7], [@anandhame][8], [@mgobi_php][9]   for their continuous support to this project.

[7]: https://twitter.com/#!/iGhillli
[8]: https://twitter.com/#!/anandhame
[9]: https://twitter.com/#!/mgobi_php


Open sourcing Twikural - an App Engine project


Sometime back, I wrote about [Java web application hosting][1], in which I listed out the different options available to you to [host your Java web applications][2]. Now, let's look at the different solutions to **host your code**.

[1]: https://veerasundar.com/blog/hosting-java-applications-in-the-web "Java web hosting"
[2]: https://veerasundar.com/blog/hosting-java-applications-in-the-web "java web hosting"

Before you dive in, please note that:

1.  Most (if not all) of the services provide the free plan only with basic features. Want more, pay them! ![:)][3]
2.  The focus is on Subversion hosting only (because at the end you might wonder why Github wasn't be seen in the list!).

[3]: https://veerasundar.com/blog/wp-includes/images/smilies/icon_smile.gif

Let's list the [best web hosts][4] for your code!

[4]: http://www.hostingobserver.com/ "Hosting Observer - Your Guide to Finding the Best Web Host Online"

---

## Assembla

[![assembla-code-hosting][6]][6]

[]: http://www.assembla.com/

**Beanstalk**

[![beanstalk-code-hosting][7]][7]

**BerliOS**

[![][8]][8]

## Bootstrap Today

[![][9]][9]

## Bounty

[![bounty-source-code-hosting][10]][10]

## Codesion

[![][11]][11]

## Gna

[![][12]][12]

## Google Code

[![][13]][13]

## My Version Control

[![][14]][14]

## Project Locker

[![][15]][15]

## Slik SVN

[![][16]][16]

## SourceForge

[![][17]][17]

## Unfuddle

[![][18]][18]

## Versionshelf

[![][19]][19]

- - \*I'll be updating this list in future, if I come to know about a free code hosting solution. In case if you want to add anything to this list, please feel free to

[contact me][19].

[]: http://beanstalkapp.com/
[]: http://developer.berlios.de/
[]: http://bootstraptoday.com/
[]: https://www.bountysource.com/
[]: http://codesion.com/
[]: http://gna.org/
[]: http://code.google.com/hosting/
[]: http://www.myversioncontrol.com/
[]: http://www.projectlocker.com/
[]: http://www.sliksvn.com/
[]: http://sourceforge.net/
[]: http://unfuddle.com/
[]: http://www.versionshelf.com/
[19]: https://veerasundar.com/contact "contact me"


#project (4)