My last side project, LeFeed.com got techcrunched on April 5th by John Biggs.

It’s a great thing because of several reasons;

• you’ll get lots of feedback instantly, right after you launch your project
• first users will be highly interested in Tech and latest stuff.
• users will sign up from all around the world, so if it’s a social product, you’ll see lots of reaction from different countries.
• and hey it is TC!

As long as it is working, and you can’t see really major bugs on your app, I don’t think there are lots of things to do before submitting your project to TC.

I mean, if design looks good on major modern browsers (and yeah including IE8&9), functionalities are ok, you are sure about server, and all other things like logs etc., it is ready to go.

But in my case, I forgot something, and that caused lots of nightmares. Make sure your memory is sufficient!

Ok, if it’s a new project, a VPS with a 1GB RAM is just fine. But if your project is something like LeFeed, I mean it does heavy job on backend, processes millions of records, and lots of things while running learning and recommender algorithms, then get a bigger RAM, at least 2GB.

Because of this issue, I had to manually control whether users data processed correctly, checked log files to see if something went bad (memory allocation problems, facebook graph API connection timeout problems and some others).

After second day, I increased my mem so problems are solved. So do it before launching yours if you do lots of calculations, cause you’ll need that when hundreds of users come your website in an hour from TC.

And lastly, there are some other things that needs to be done after getting coverage,

• Be responsive! Follow your company name on twitter, facebook and google (click to see some samples for LeFeed), try to respond questions or concerns.
• Make sure it runs fine. Regularly check logs and get notified if something goes wrong, (like apache down), and try to fix it fast.
• Take action fast! If you see something is wrong, fix it and deploy to production fast.

For example, I noticed that users think they will get recommendations right after they just signed up. (naturally)

But some users have 1000+ users (so 1001 users data + 1001 users’ likes data in total) and it is *really* not easy to fetch that huge data from Facebook quickly. (yes even by using batch request which lets you merge up to 50 requests). So I simply checked if users get recommendations or not, if not I’ve added a text to inform user by some js and css help. So I prevent users thinking that it is broken.

Finally about TC effect, it is not overrated. It is a great thing for new projects by many aspects, so build something great, they will be happy to cover it!

That’s all for now, let me know if you have any questions, about this process or LeFeed app.

Getting recommendations is an important part of the decision making. Suggestions for books on Amazon, or movies on Netflix are real- world examples of recommender systems.Design of such recommendation engines depends on the domain and the available data.

Recommender systems can be categorized as Content Based Recommendation Systems, Collaborative Filtering Recommendation Systems and Hybrid Recommendation Systems.

In short,

Content Based Recommendation: Generates recommendations according to the items active user liked before. Recommender system analyzes the content of recent items of user, and recommends new ones according analyzed data.

Collaborative Filtering Recommendation: Generating recommendations based on active user’s previous preferences, checks all users who liked similar items. (or checks all items which are liked by users.)

Hybrid Recommendation: Generates recommendations by combining above 2 methods.

There are several techniques for each category, and it is impossible to show examples for each category/approach.

I am mainly interested in Collaborative Filtering (CF) Approach, and in this post you can find some implementation examples of CF Approach.

Why Collaborative Filtering?

For me, I made long hours of research before implementing few algorithms, but in short the approach you should choose is really depends on your data and application domain.

If you are thinking about creating your own recommendation system (RecSys), first analyze your data, and decide what features you’ll need in your application, can you go with a content based RecSys or not.

According to my data and my project details, I decided the best option for me is CF, specifically Incremental SVD is a great match for me.

Why Collaborative Filtering Is So Popular?

Netflix! In my opinion (and I think many others may agree with me) The Nexflix Price is the locomotive for CF Approaches and maybe matrix factorization.

Netflix Prize was a competition to improve Netflix’s own algorithm by at least 10%, and the winner took $1M (waow!), it ended in 09′.

Ok enough history, lets talk about a bit on CF.

Collaborative Filtering recommendation systems work by collecting users’ preferences, and generating predictions by user-based similarities or item-based similarities.

CF methods can be divided into 2 categoeries as, Memory (Neighborhood) Based and Model Based Approaches.

Memory (Neighborhood) Based Recommendation Systems

User-based or item-based techniques can be used. For user-based technique, number of similar users are found by calculating similarity (we’ll get there soon -Jaccard Index, Euclidean…-) and with a basic loop inside similar users’ items, all non-rated items are found with a weighted estimated rating value. A very similar method also works for item-based technique.

I implemented both item-based and user-based techniques while working on recommender systems, neighborhood approach is easy to understand and implement, takes only 3 steps.

1. Find similarity for active user to all other users, and pick top k users (called k-Nearest Neighborhood).

2. Select all items that active user hasn’t rated yet.

3. Compute a weighted prediction rating for items

There are several methods to calculate similarities between items or users, and I implemented only few of them including Pearson Correlation Coefficient, Euclidean Distance, Jaccard Index and Cosine Based Similarity. Again, it is best to choose similarity method according to your data and application.

You can see math formulas for these methods at the end of the post.

Model Based Recommendation Systems

Model can be developed using matrix factorization techniques, data minin, machine learning algorithms to find the patterns based on the data. This model is used to make predictions on the real data afterwards.

There are various Collaborative Filtering modelling algorithms including Bayesian Networks, Latent Semantic Models, Clustering Models, Singular Value Decomposition and others.

So what’s the pros and cons over Neighborhood Based Approach?

The main disadvantage that is worth to mention is, they are difficult to implement. (but not that much, don’t give up )

So the advantages are, it handles data sparsity better, provides scalability on large datasets, increases the performance of prediction.

I implemented Item-based SVD, User-based SVD and Incremental SVD matrix factorization techniques to see what approach suits my data more. You can check all codes from github project linked below.

I won’t go into details for these implementations, SVD or matrix factorization, but you can check below useful links, including the my implementations. And you should search academic materials for new developments on topic in IEEE or somewhere else, especially Munir Sarwar and Yehuda Koren (winner of Netflix Price)

My implementations in Ruby, including SVD, Memory Based Collaborative Filtering on Github

Incremental SVD by Simon Funk

Incremental SVD-Based Algorithms for Highly Scalable Recommender Systems

G. Adomavicus and A. Tuzhilin – Next Gen RecSys

Prem Melville and Vikas Sindhwan – Recommender Systems

Advances in Collaborative Filtering – Koren Y., Bell R.

And finally, I used publicly available MovieLens test data (mostly the package that has 100K ratings), you can download a test data here: http://www.grouplens.org/node/73

—

Similarity Methods Math Formulas

Pearson Correlation

Euclidean Distance

Jaccard Index

Cosine Based

Genetic Algorithm is great, it is lots of fun to write GA codes.

GA is very useful on optimization problems, but in many cases, you won’t get a huge optimization if you use only GA on a problem (at least that is my experience).
I started adding a Local Search Algorithm (2-opt) with Genetic Algorithm (thanks to AI Prof. Ugur), and the results are better now.

I am not gonna go into detail on Genetic Algorithm here. Cause there are already lots of great resource about Genetic Algorithm. Instead I’ll share some of my experience on GA.

Here, I shared one of my Genetic Algorithm project that is written with Ruby.
It is not a simple program, so you may find this a little complex if you are new to GA.

Group People

Shortly, it finds sub-groups that have similar people from a large group.

Let’s say you have a list of 100 people, and want to create sub groups that have most similar people to each other.

There are various ways to achieve that, and GA is one of them.

So here is the details..

I created a test class (group_people_test.rb) to test the program. As you can in that file, I created random people and interests (all configurable).

With these people, I created an instance of GroupPeople class and let that run and find the sub-groups.

In GroupPeople class (group_people.rb), there are various Constant values that you can play and see the difference of results.

Some of them are: Population size, Generation count, crossover type, selection type and muration rate.

In this class, I created an initial population with some chromosomes include random people.

After this simple step, program generates new generations as much as the specified generation count.

In each generation process, there are lots of things going on, but mainly;

1. Choose the elitist chromosome (if ELITISM is activated on GroupPeople)
2. Select 2 parent chromosomes by a selection type to apply crossover. (selection type is specified on GroupPeople)
3. Apply crossover according to crossover type. (crossover type is specified on GroupPeople)
4. Apply mutation to new chromosomes according to mutation rate if mutation is activated
5. Eliminate worst chromosomes if population size is bigger than old population size (this may occur if elitism is active)

For each step, execution may be changed according to Genetic Algorithm parameters that are defined in GroupPeople class.

There are 2 different chromosome selection type, rank_selection and random.

random is just for experimental, it perform *really* not good on big populations.

There are 3 different crossover types, 1point, 2point and uniform

You can try them all and decide what best fits for your project.

Mutation rate is 3% as default, it may be disabled by changing to zero or a different value.

The last step is actually about elitism.

When you choose the best chromosome in a population as elitist, there will be 1 additional chromosome at the end of all chromosomes are crossoverred. So I removed the worst chromosome from population if elitism is active.

Currently, it only performs crossover on people. My initial thought was to apply all actions (crossover, mutation and elitism) on groups as well.

i.e: chromosome1: Group1 (FitnessValue=5) , Group2 (FV=3), Group3 (FV=1), Group4 (FV=2.5), Group5 (FV=2)

Choose Group1 as elitist group, apply crossover and mutation over groups etc.

Maybe I can add that feature in future version to see the differences and possible improvements.

So what is the result?

As you can see there is varying improvement on latest fitness values of chromosomes. But not as much as I thought.

I already mentioned about applying a local search algorithm (2-opt, 3-opt..) increases the effect of algorithm but I did not apply here.

Crossover Type                  Initial Fitness Value         Improved Fitness Value     Generation Count            Group Size          RunningTime (secs)

As always, you can fork the source code on github, and feel free to browse my repo.

Any feedback { :question / :comment / :correction / :etc } is highly appreciated, thanks for reading.

Backbone.js is a javascript framework and I just started using backbone along with coffeescript for my new 2 projects.

In this tutorial, I’ll develop a simple backbone javascript application that fetches logged in facebook user’s news feed and lets the user share a new status message.
I used koala gem for facebook open graph.

You can use coffeescript instead of pure javascript, I’ll probably add coffeescript version of this simple app in part 2.

Backbone is a great framework if you will create a heavy-js app. It may have some differences than traditional MVC pattern, like views can be used as controllers. But if you know MVC pattern, it won’t take too much time to learn backbone.

I assume you know the basics of rails, so I will not add rails related stuff all the time.

In short, backbone has Model, Collection, Router and View.
Model is just like rails models.
Collection provides some extra functionality to model groups like sorting and filtering.
Router acts as rails controllers and routes definitions to map urls to actions.
Views = rails views. We can (should) use a templating library something like mustache, haml or jquery templates to separate html from javascript views.

I’ll structure js codes in assets/javascript/backbone, just like:

app
–assets
—-javascripts
——backbone
——–models
———-feed.js
——–routers
———-feeds_router.js
——–views
———-feeds
————new_view.js
————show_view.js
————index_view.js
——myfeed.js
——backbone-min.js
——underscore-min.js

p.s: if you’ll use coffeescript, I strongly recommend backbone-rails gem which creates this structure (and more) for you with a simple command.

After creating this folder structure, we need to add some require and require_tree directives to application.js and myfeed.js file.
You can see all the requires directives on github, now lets start the application with a rails controller and feed model.

Lets create first controller, the main entry point of app, home controller with a simple index action and make it homepage via routes.rb file.

Now, change the index.html.erb view under home controller to call our app’s init function.

<h1>
	<a href="#">My Facebook Feeds</a>
</h1>

<div id="notice"></div>
<div id="app"></div>

<script type="text/javascript">
    $(function() {
        App.init();
    });
</script>

Model

App.Models.Feed = Backbone.Model.extend({
	defaults: {
		from_name: null,
		from_id: null,
		message: null,
		feed_type: null,
		like_count: null
	}
});
App.Collections.Feeds = Backbone.Collection.extend({
	model: App.Models.Feed,
	url: '/feeds'
});

I just defined the default values for the feed model properties and created a feeds collection which has a model property points Feed and a url points /feeds (we’ll create a feeds controller in a moment)

Router
The only router will be feed_router for this app. We’ll add the routes to call related actions.

App.Routers.FeedsRouter = Backbone.Router.extend({
	feeds: {},
	initialize: function() {
		// create a new object to hold feeds collection
		feeds = new App.Collections.Feeds();
	},
	routes: {
		''      : 'index',
		'/index': 'index',
		'/new'  : 'newFeed',
		'/:id'  : 'show'
	},
	index: function() {
		var view = new App.Views.IndexView(feeds);
		$('#app').html(view.render().el);
	},
	show: function(id) {
		console.log('index'+id);
	},
	newFeed: function() {
		console.log('newFeed');
	}
});

So after creating this router, if you wanna try your app, you may get “Backbone.history is undefined” error on your console. I have spent 15 mins to resolve that, the reason is you don’t have any routes on your controller. (I had routes but I mistyped as ‘routers’, so that resulted an error)

View

App.Views.IndexView = Backbone.View.extend({
	initialize: function() {
		this.feeds = this.options.feeds;
	},

	addAll: function() {
		if (this.feeds === undefined || this.feeds.length < 1) {
    		$(this.el).find("tbody").append('no feeds yet');
    		return;
		}
		// TODO: use haml-js or jquery templates
		var view = '';
		var template = '<tr><td>[from_name]</td><td>[message]</td><td>[feed_type]</td><td>[like_count]</td><td><a href="#/[id]">Show</td></tr>';
		for (var i = 0; i < this.feeds.models.length; i++) {
			var feed = this.feeds.models[i].attributes;
			view += template.replace('[from_name]', feed.from_name).replace('[message]', feed.message)
				.replace('[feed_type]', feed.feed_type).replace('[like_count]', feed.like_count).replace('[id]', feed.id);
		}

    		$(this.el).find("tbody").append(view);
	},

	render: function() {
		var table = '<h1>Feeds</h1><a href="#/new">New Feed</a><table><tr><th>From</th><th>Message</th><th>Type</th><th>Like count</th></tr></table>';
		$(this.el).html(table);
		this.addAll();
		return this; // chain
	}
});

At this point, you should get the index view with an empty table and a warning, as ‘no feeds yet’.
So it’s clear that we need feeds to try index page and show page. I could add facebook open graph related codes here but it may distract the backbone subject, so I’ll just create a feeds controller and a dummy json feeds response for now.

Feeds Controller

class FeedsController < ApplicationController
  def index
    #dummy
    feeds = [{ :id => 1, :from_name => 'dummy from1', :message => 'dummy message1', :feed_type => 'dummy feed_type1',
      :like_count => 'dummy like_count 1' },
      { :id => 2, :from_name => 'dummy from2', :message => 'dummy message2', :feed_type => 'dummy feed_type2',
      :like_count => 'dummy like_count 2' }]

    render :json => feeds
  end
  def create
  end
end

Now, we should have a working feed listing page. Let’s add a separate show page for items.
Show View

App.Views.ShowView = Backbone.View.extend({
	render: function() {
		var template = '<b>From name:</b><em>[from_name]</em><b>message:</b><em>[message]</em><a href="#">home</a>';

		var view = template.replace('[from_name]', this.model.attributes.from_name).replace('[message]', this.model.attributes.message);
		$(this.el).html(view);
		return this;
	}
});

Router – Show Action

App.Routers.FeedsRouter = Backbone.Router.extend({
...
	show: function(id) {
		var feed = feeds.get(id);
		var view = new App.Views.ShowView({ model: feed });

		$('#app').html(view.render().el);
	}
...
});

Now lets implement javascript part of the create action, then we need to start coding facebook open graph stuff to finalize the app.

New View

App.Views.NewView = Backbone.View.extend({
	initialize: function() {
		this.collection = this.options.collection;
		this.model = new this.collection.model();
	},
	events: {
		'submit #new-feed' : 'save'
	},
	render: function() {
		var template = '<h1>New feed</h1><form id="new-feed" name="feed"><div><b> message:</b><input type="text" name="message" id="message" /></div><div><input type="submit" value="Create Feed" /></div></form><a href="#">Home</a>';

		$(this.el).html(template);
		return this;
	},
	save: function() {
		this.collection.create({ message: $('#message').val() }, {
			success: function(feed) {
	  			this.model = feed;
	  			//window.location.hash = '#/' + this.model.id
	  			window.location.hash = '#'
  			},
  			error: function(feed) {
  			}
  		});
  		return false;
	}
});

Router – New Action

App.Routers.FeedsRouter = Backbone.Router.extend({
...
	newFeed: function() {
		var view = new App.Views.NewView({ collection: feeds });

		$('#app').html(view.render().el);
	}
...
});

Connect to Facebook Open Graph
Now we need to let users connect app via their facebook account and fetch their news feed, update their status.
To provide this, I’ll use awesome koala gem.

1. create a new facebook app and get app_id, app_secret.
2. add koala gem to Gemfile
gem “koala”

3. create a new rails controller with connect_fb and fb_callback actions
rails g controller sessions connect_fb fb_callback
4. check if the user is logged in. Do this for all the actions for all controllers, so add a before_filter to ApplicationController method to main controller.

class ApplicationController < ActionController::Base
  before_filter :authorize
  protect_from_forgery

  protected
  def authorize
    is_user_logged_in
    # TODO: redirect to root_url if not authorized
  end
  private
  def is_user_logged_in
    @user_logged_in = session[:fb_access_token] != nil
  end
end

5. Add a facebook login link to home/index view.

..
<% unless @user_logged_in %>
	<%= link_to 'Connect Facebook', sessions_connect_fb_path, { :class => 'fb_connect_btn' } %>
<% end %>
..

6. Add routes for session controller to routes.rb file

Then the only thing left is creating callback action and redirecting user to facebook with a callback url. So here it is:

class SessionsController < ApplicationController
  def connect_fb
    app_id = '' # Your app_id
    app_secret = '' # Your app_secret
    session[:oauth] = Koala::Facebook::OAuth.new(app_id, app_secret, sessions_fb_callback_url)

    redirect_to session[:oauth].url_for_oauth_code(:permissions => "publish_stream,read_stream")
  end
  def fb_callback
    if params[:code].blank?
      redirect_to root_url, :notice => 'You should allow app to connect your Facebook account'
      return
    end
    session[:fb_access_token] = session[:oauth].get_access_token(params[:code])
    redirect_to root_url, :notice => 'FB Connected!'
  end
end

I've added below code piece to application.js, it is a facebook connect hotfix. When facebook call-backs your app, it adds an hash and some chars, so we need to remove it to start our js app.
$(function() {
// fb connect redirect hotfix
if (window.location.hash === '#_=_') {
window.location.hash = '';
}
});

Now our app can connect to facebook, so we can actually fetch user's news feed and post user's status messages to facebook open graph API.

FeedsController - working with real facebook news feed data

class FeedsController < ApplicationController
  def index
    unless session[:fb_access_token]
      render :json => {}
      return
    end

    begin
      graph = Koala::Facebook::API.new(session[:fb_access_token])
      result = graph.get_connections('me', 'home')
      feeds = create_feed_objects(result)
    rescue Exception => ex
      session[:fb_access_token] = nil
      logger.error "Exception - #{ex}"
    end

    render :json => feeds
  end

  private
  def create_feed_objects(result)
    feeds = []
    result.each do |feed|
      from_name = feed['from'].is_a?(Hash) ? feed['from']['name'] : ''
      from_id = feed['from'].is_a?(Hash) ? feed['from']['id'] : ''
      like_count = feed['likes'].is_a?(Hash) ? feed['likes']['count'] : 0
      message = (feed['type'] == 'link' or feed['message'].blank?) ? feed['story'] : feed['message']

      feeds.push({ :id => feed['id'], :from_name => from_name, :from_id => from_id, :like_count => like_count,
        :feed_type => feed['type'], :message => message })
    end
    feeds
  end
end

FeedsController - post status messages to facebook open graph

class FeedsController < ApplicationController
...
  def create
    return unless session[:fb_access_token]

    begin
      graph = Koala::Facebook::API.new(session[:fb_access_token])
      obj_id = graph.put_wall_post(params[:feed][:message])

      #feed = create_feed_objects(graph.get_object(obj_id))[0]
      feed = {}
    rescue Exception => ex
      session[:fb_access_token] = nil
      logger.error "Exception - #{ex}"
    end

    render :json => feed
  end
...

So with these latest changes, a simple backbone javascript mvc app is ready.
It displays the news feed of logged in user, post new status messages as logged in user, by using facebook open graph API.

koala gem is used for facebook graph calls and authentication, backbone framework is used to organize the js code.

Please check the source code of backbone news feed on github, and let me know your thoughts!

Recently I needed to create a basic javascript web application that is written with Model-View-Controller Architecture.

There are some good JS tools (MVC-MVVM) that lots of startups and bigger companies use, such as knockout, javascriptmvc.

But if you don’t need something that complex, or you just want to write your own js mvc structure app from scratch, unfortunately, there isn’t lots of resource about this, so I created a mini notebook javascript MVC app.

It is not using any external libraries, such as jquery. It is purely written with javascript and I tried to avoid any non-crossbrowser built-in functions, like Array.indexOf. So I suppose it should work on most browsers.

Notebook App has around 400 LoC, so I’m not gonna add whole app here, but you can check from github. Please feel free to add your comments/corrections.

NoteBook Javascript MVC App

I’m not gonna explain MVC architecture here in detail, but here is some important points;
view should know nothing about the models and model should be about the data.
If you need to fetch data from server or insert/change data on server, this should be done in models.
And when a model changes, it should notify all the related view(s) about the changes.
Observer Pattern can be used to provide this functionality.

EventObserver

I created below EventObserver class to provide this notification system, flow is generally as follows:
- when the model is created, it adds events that are related.
- view attaches observers to an event.
- when a model changed (a method may be triggered on model etc.), it notifies the attached observers for the event, with optional data parameter.

var EventObserver = function(events) {
	var _eventObservers = {};
	// adds an event if it is not added before
	var addEvent = function(event) { };

	// notifies the attached observers to the event with data param
	var notify = function(event, data) { };

	// attaches an observer to the event if it is not already attached
	var attach = function(event, observer) { };

	// public methods for notifying and attaching observers
	return {
		notifyObservers: function(event, data) {
			notify(event, data);
		},
		attachObserver: function(event, observer) {
			attach(event, observer);
		}
	};
}

Models

I created 2 models for notebook app.

First one is Note Model. Class has _id and _content properties, which is very basic.
It has a private setter for id and some public methods such as save(), remove(), toString() and getters.
I have added 2 dummy methods (saveDummy() and removeDummy()) for testing purposes. In a real production app, save and remove methods will probably make an ajax call to server and methods will change the object state according to the operation result on server.
But in these dummy methods, it simply makes the value of _id -1 after removeDummy() called and assigns an incremental value to _id when saveDummy() method called.

// note model
var Note = function(content) {
	// private vars
	var _id;
	var _content = content;

	// setter
	var setId = function(id) {
		_id = id;
	};

	return {
		// getters

		// saves the current note
		save: function() {
			// all model validations go here
			if (_content === undefined || _content === '') {
				return false;
			}
			/*
			Make an ajax call to server, save the note and get id, i.e.:
			$.ajax({
				url: 'note/create',
				... });
			*/
		},

		// removes the note, returns the result
		remove: function() { },

		// used for testing the app without tiding an actual db,
		// identifiers are set by externally from the list
		saveDummy: function(dummyAutoId) {
		},

		// removes the note, returns the result
		removeDummy: function() {
		},
		toString: function() { }
	};
};

Second model is NoteList Model which holds a list of notes and an eventObservers object.
NoteList object provides the functionality to add / remove new notes and attach observers to the list events.

var NoteList = function() {
	var _list = [];
	// add the events which will be used to attach and notify observers
	var _eventObservers = EventObserver(['noteAdd', 'noteRemove']);
	return {
		// getter for the list
		getList: function() { },

		// adds a note to the list
		addNote: function(note) { },

		// removes a note from list
		removeNote: function(note) { },

		// used to attach an observer to an event
		attachObserver: function(event, observer) { },

		toString: function() { },

		// adds dummy notes to the list -- used to test the listing feature
		addDummyNotes: function(limit) { }
	};
};

Ok now lets create some views and a controller for the app.
I created 2 views for the app, a list view class and an add note view class.

Views

addEventListener functions are used to call the controller methods when a remove note link is clicked or a new note form is submitted. See the usage for submit form button below,

	// submit button for the add form
	var addButton = document.createElement('input');
	addButton.type = 'submit';
	addButton.value = 'add note';
	addButton.addEventListener('click', function(e) {
		e.preventDefault(); // prevent the link element's default behavior.
		noteController.handleAddEvent(textboxElement.value, noteList);
	}, false);
	// the last false parameter is about an event bubbling cross browser issue.
	//No need to detail right now.

List View has 3 major methods,
displayAllNotes: displays all the notes in the list. Called when the app is initialized.

updateListAfterRemoving: updates the note list on browser when user triggered remove a note event.
This observer is attached for noteRemove event when the view is created. So when noteRemoved event is triggered by the user, controller calls the appropriate method (NoteList.removeNote in this case), and the method notifies this function by using EventObserver object.

updateListAfterAdding: updates the note list when user submits a new note.
Same as updateListAfterRemoving, this observer method is called when the model changed.

var NoteListView = function(noteList, noteController) {
	// empties list wrapper and displays all of the user's notes.
	// if user has no notes, then displays a warning message
	var displayAllNotes = function() {
		var listWrapper = document.getElementById('list_wrapper');
		for (var i = 0; i < list.length; i++) {
			listWrapper.appendChild(createNoteElement(list[i]));
		}
	};

	// called from EventObserver class when user removed a note from the list
	// gets data from model, removes the note if it is removed successfully
	// adds a feedback message to browser
	var updateListAfterRemoving = function(data) { };

	// called from EventObserver class when user added a note to the list
	// gets data from model, adds the note to the end of the list, if it is added successfully
	// adds a feedback message to browser
	var updateListAfterAdding = function(data) { };

	// attach add and remove observers for the related events
	noteList.attachObserver('noteAdd', updateListAfterAdding);
	noteList.attachObserver('noteRemove', updateListAfterRemoving);

	return {
		// a public method to display the whole note list
		displayList: function() {
			displayAllNotes();
		}
	};
};

Note Add View has just 1 method which displays the “add a new note form”.
Method is called when the app is initialized.

var NoteAddView = function(noteList, noteController) {
	return {
		// displays the add form
		displayForm: function() {
		}
	};
};

Controller

Note Controller is the main controller for this basic app.
It has 2 handlers for addEvent and removeEvent and a displayNoteList public method to display all notes when the app starts.

var NoteController = function() {
	return {
		// handles the add event when a new form is submitted
		// creates a new note instnace and add to the notelist if it is valid
		handleAddEvent: function(content, noteList) {
			var note = Note(content);
			noteList.addNote(note);
		},
		// handles the remove event when user click the remove button
		// gets the note as param, remove it from the list
		handleRemoveEvent: function(note, noteList) {
			noteList.removeNote(note);
		},
		// triggered from webpage. Creates an empty list, shows add form and the note list to user.
		displayNoteList: function() {
			var noteList = NoteList();
			var noteAddView = NoteAddView(noteList, this);
			noteAddView.displayForm();
			var noteListView = NoteListView(noteList, this);
			noteListView.displayList();
		}
	};
};

A basic html markup for this app might be as follows.
It creates a new NoteController object and displays all the notes.

<html>
<head>
  <title>Javascript MVC Notebook</title>
  <script type="text/javascript" src="notebook.js"></script>
</head>
<body>
	<div id="wrapper">
		Javascript MVC Application - NoteBook
		<div id="message"></div>
		<div id="new_note_wrapper"></div>
		<div id="list_wrapper"></div>
	</div>
	<script type="text/javascript">
		var controller = NoteController();
		controller.displayNoteList();
	</script>
</body>
</html>

2 great blog posts, you should also check them out:
MVC Architecture for JavaScript Applications
Javascript mvc

That’s it!
If you have any questions, fixes or suggestions, please add your comments.
Thanks for reading!

Source code: https://github.com/serdary/massfollow
Demo: Twitter Mass Follow

This basic twitter mass follow/unfollow app has been created for working with twitter API and oauth.

omnioauth library is used for oauth communication, configatron gem is for creating a site config and the famous will_paginate gem is used.

DOMAINS
person = symbol
people_list = symbol*

FACTS
human(person)	%used to store found friend of friend for the goal person

PREDICATES
nondeterm has_friend(person, people_list)
nondeterm write_possible_friends(person)
nondeterm is_member(symbol, people_list)
nondeterm check_friends(person, people_list, people_list)
nondeterm find_friends_of_friends(person, person)
nondeterm set_friends_of_friends(person, people_list, people_list)
nondeterm set_possible_friend(person)
nondeterm may_be_friend(person)

CLAUSES
%Define relationships
has_friend(serdar, [don, bob, jessica]).
has_friend(don, [sam, serdar]).
has_friend(bob, [serdar]).
has_friend(jessica, [mary, serdar]).
has_friend(sam, [don]).
has_friend(mary, [jessica]).

%Write found possible friends.
write_possible_friends(GoalPerson) :-
	findall(Person, human(Person),L),
	write("Goal Person is: "), write(GoalPerson), nl,
	write("Friends of friends / Possible Friends are: "), write(L), nl,
	retractall(_, dbasedom).

%Check if a person exists in a list
is_member(Person, [Person|_]).
is_member(Person, [_|Tail]):-
	is_member(Person,Tail).

%Check recursively a friend of friend is already a friend or the goal person
%If not, add him/her to to DB.
check_friends(Person, [], []).
check_friends(Person, [H|T], Tail) :-
	has_friend(Person, FL),
	not(is_member(H, FL)),
	not(Person = H),
	!,
	%write("*** Friend of friend is: "), write(H), nl,
	assertz(human(H)),
	check_friends(Person, T, Tail).

check_friends(Person, [H|T],[H|Tail]):-
	check_friends(Person, T, Tail).

%Finds friend list of goal person's friend (Person2)
%and check possible friends of current friend(Person2)
find_friends_of_friends(Person1, Person2):-
	has_friend(Person2, FriendList),
	check_friends(Person1, FriendList, ProcessedList),

%Traverse every friend of goal person and sets fof
set_friends_of_friends(Person, [], []).
set_friends_of_friends(Person, [H|T], Tail) :-
	%write("Processing friend: "), write(H), nl,
	find_friends_of_friends(Person, H),
	set_friends_of_friends(Person, T, Tail).

set_friends_of_friends(Person, [H|T],[H|Tail]):-
	set_friends_of_friends(Person, T, Tail).

set_possible_friend(Person):-
	has_friend(Person, FriendList),
	set_friends_of_friends(Person, FriendList, ProcessedList).

%Sets possible friends of friends to DB and writes them to the screen.
may_be_friend(Person):-
	set_possible_friend(Person);
	write_possible_friends(Person).

GOAL
%may_be_friend(mary).	mary, bob, don, jessica, sam, serdar
may_be_friend(serdar).

P.S: I’m using visual prolog for development.
There is a great document for learning prolog inside DOC folder. (LANGUAGE.doc)

I used MySQL to store data, will_paginate gem for pagination, configatron gem for custom configuration files, mechanize gem to traverse html of the target webpage’s source file and some others.

I had some difficulties while deploying to my server. My server has CentOS 4 so that causes some problems on passenger.
I used passenger module on apache to deploy, but passenger 3.x did not work on my CentOS 4 machine so I had to install passenger 2.x.
But for some reason rails 3 did not work on passenger 2.x. So I was blocked. I upgraded my CentOS to 5 and installed passenger 3.x, and that worked!

The only gem I had problems is nokogiri gem. It isn’t installed when I try bundle install/update or gem install nokogiri. The error I get:

ERROR: Error installing nokogiri:
ERROR: Failed to build gem native extension.

/usr/local/bin/ruby extconf.rb
checking for libxml/parser.h… yes
checking for libxslt/xslt.h… no
—–
libxslt is missing. please visit http://nokogiri.org/tutorials/installing_nokogiri.html for help with installing dependencies.
—–
*** extconf.rb failed ***

installing libxml2 and libxslt by below commands also did not worked.

sudo yum install -y libxml2 libxml2-devel libxslt libxslt-devel
sudo gem install nokogiri

So I had to remove libxml2 and libxslt through yum, and then manually installing them from source. Then simple gem install nokogiri worked.

That’s it for now, now it’s time to work on a real project with rails 3.1 and maybe mongodb..

Ok let’s say you detached your rails server to use the same terminal, but later you need to stop rails server, how? (surprise!)

The solution I found is simply finding Webrick server process id and kill it!

ps -ef | grep script/rails

now, kill the process id which is the first integer on the line

———————-

If you follow a “rails 3 tutorial” just like me, you probably have problems with ajax.

That’s because now jquery is default js framework in 3.1, not prototype. Prototype is a gem which you need to add your Gemfile to use that.

That’s why you should write partial templates in a .erb file not .rjs

An example change:
page.replace_html(‘item’, render(@item))

$(‘#item-holder’).html(“<%= j render @item  %> “);

———————-

And lastly, If you installed MAMP and using MySql for your rails app, that’s a good chance that you will have issues while connecting the DB.
Below is my database.yml which works for me for a rails 3.1 app

adapter: mysql2
host: localhost
database: railsapp-dev
username: mamp_username
password: mamp_pass
socket: /Applications/MAMP/tmp/mysql/mysql.sock

———————-

That’s all for now, probably more rails posts will appear here..