Rebuilding Outkept

Outkept DashboardLast November I did a talk at Codebits about a private project that ended to be Outkept, it was basically a project that was build for a  specific use case and then I generalized it.

At the time I developed it in Java, but after the talk I decided to rebuild it for more generalist use cases and start everything entirely from scratch in node.js.

Outkept allows you to control and monitor a large server cluster, without needing to manually specify which and what servers to monitor/control. Instead you just define which subnets you want to control and then, using SSH, Outkept‘s crawlers will look for servers and what do they support.

Rebuilding it in node.js was awesome, allowing me to tackle my node.js skills and dig more into node’s scene while using a lot ‘earlier adopter’ tech.

Right now Outkept v2 supports everything the old version supported and even more, things are quicker and more fluid. New dashboard connects using shoe (sockjs) and the new system relies entirely in multiple node.js processes.

I will talk more about this project later, but right now I would love some feedback. The codebase is big and mostly uncommented, in the next posts will fix this and talk a bit about it.

If you want to give it a try just follow these instructions. If you need help you can reach me at petermdias@gmail.com

Advertisements

Disrupting Java apprentices with node.js

I started lecturing a few years ago, for a while it was a fulltime job. I lectured mainly in two programming languages: C in introductory classes (first semester) and Java for OOP, data structures and distributed systems classes (equally distributed along the bachelor degree).

After a while I got bored and nowadays being a lecturer is not a fulltime job, my main contribution now is to bring fresh tech into the play and introduce it to seniors and other lecturers and this is where this story starts.

nodejs_logo

About one year ago I started diving into node.js. Initially I only used it for non critical stuff, still using Java as my main language.
I really liked node from the first day but I just didn’t have the time to dive into it at the time.
About 6 months ago everything changed, I’m really hooked into it and now I finally feel that I acquired enough skill to allow it to replace Java in my head.
Node ecosystem is awesome and it doesn’t have all that clutter that Java has, it is so clean and agile…

This semester I decided to bring node.js into a senior class and simultaneously a few senior projects.

Remember how I started this post?

In here almost every design/programming topics are taught Java, when I gave the first class about JavaScript and node.js everyone was like “WTF”?
A few students even looked at me thinking I was drunk because in their heads Javascript was for browsers and nothing else.

In order to sell them node.js I live coded a drag-n-drop DIV element that moved simultaneously in all browsers using socket.io. Instantly everyone on the room was curious about this, even the more sceptic ones. (if you want to disrupt someone show them something very graphic/explicit and that I did)
Code available at https://github.com/apocas/psi2013-node (it uses prototype based objects, modules, and events)

It’s true that I could have implemented that in almost any other language, but the lack effort needed to implement it in node.js is really impressive and that was what disrupted the audience (npm awesomeness helped :-D).

Right now seniors are starting to put their hands on node.js at multiple projects (https://github.com/portugol – Portugol rewritten in node.js) so far I feel that the hardest thing for them is the asynchronous architecture.

Although one big advantage I felt was the fact that they came from a language where everything is an Object (Java), because of this they quickly understood objects in JavaScript and how can events be used for message passing in an asynchronous environment.

In my opinion this is one of the most important thing to understand in the Javascript/node.js world.

Backbone.js and i18n


backbonei18n
A few weeks ago I had to support i18n in a backbone.js project I’m developing. Many doubts quickly appeared, when to load the i18n’ed content? how? where to define it? in which format? …

I started looking into JavaScript i18n libraries/frameworks, and decided to take a look at three: i18next, jed and jsperanto.
Jed looks really good and is truly the closest thing you can get to gettext in JavaScript.

But this time I needed something simpler which could allow me to quickly delegate translations to someone without explaining all these concepts about pluralization and interpolation since the i18n that needed to be done was really simple and small.

From my perspective jsperanto is like i18next on steroids. (edit: not that jsperanto supported more features, but it felt more complex due to the lack of documentation in comparison to i18next)

I ended up using i18next, it was clean and simple solution for a simple problem with basic i18n necessities.

Initialization

Since i18next features async initialization, it is the first thing initialized and then the main backbone.js router is initialized in its callback. Something like this:

$.i18n.init({
    lng: "en-US",
    ...
}, function(t) {
    app = new Router();
    Backbone.history.start();
});

Since the main router is initialized in i18next initialization callback, I will have i18next initialized inside the app scope allowing me to call the i18n main method.

Translation

With initialization done, the only thing left was content translation.
Which in i18next is accomplished by inner html replacement in DOM elements that contain the specified i18next attribute.

I didn’t want to blind translate everything. Instead I decided to translate each backbone.js view in its rendering final stage.
Something like this:

window.ProfileView = Backbone.View.extend({
    ...
    render: function() {
        $(this.el).html(this.template(this.model.toJSON()));

        $('#profile_container', this.el).html(new ProfileInfoView({
            model: this.model
        }).render().el);

        $('.content_sub_menu', this.el).i18n();

        return this;
    }
});

From SWF to HTML5

A few months ago I challenged our team if we could, convert/rebuild our big flash-based animation in our entry page to HTML5.

Well this was one of those challenges that backfired 🙂

Our designer is an awesome graphic designer, but he is still sharpening his “web skills”. Which was a problem since he could only deliver that animation in SWF format.

I started looking into painless solutions to convert the SWF file to HTML5, Adobe had some stuff (can’t remember its name) still in beta which didn’t work quite well at the time.

Then I found Google Swiffy, Swiffy is a project from Google’s DoubleClick team which converts SWF to HTML5 using their library to interpret things along the way.

First problems we encountered was performance and some conversion issues, we rebuilt the Flash and ActionScript which solved all those issues.

The second major issue was library compatibility with jQuery. Dont know why (since it is a really bad idea) they used a “$” to define variables inside their code base.

Well I could easily redefine jQuery caller on my side, but I wasn’t starting something from scratch so this was not an option.

Instead I swapped the problematic variables in Swiffy, solving the compatibility issues. This was really an easy fix.

You may my find a jQuery compatible Swiffy version at  https://github.com/apocas/swiffy-jquery

It worked pretty well, although the generated JS file is 50% bigger than the initial SWF file, it was a tradeoff we could handle.

This is related to our SWF graphic/visual complexity, if your SWF isn’t graphically complex the end result could be entirely different.