PhysicsToy – halfway there…

Recently, I’ve been working on a 2D physics editor called PhysicsToy. It makes it possible to create these kinds of simulations, without coding:

Cogwheels

Silly car

Before I get bored and want to start a new cool hobby project, I wanted to report the current status of the web app.

Frontend: Angular.js and Pixi.js

I used the p2.js debug renderer and polished it up a bit. Then I added some Angular.js magic. I’ve wanted to learn Angular for a while, and PhysicsToy was a great project to use it in. I hooked up Angular and connected it to a simple list-like menu. Then added some code for updating the p2.js world as the angular data changes. Viola, PhysicsToy was born.

Backend: Node.js and Postgres on Heroku

Another thing I wanted to try was Postgres. I’ve been using MySQL in other projects, but why not try something new, and at the same time choose open source.
Postgres didn’t let me down. It offered a JSON data type, which is convenient for my Angular scene data. Postgres seems more consistent and in general more thought through than MySQL, even though they are based on the same SQL language.

Before pushing the data to Postgres, I do some validation using JSON-schema. I use an interesting solution for version handling of the JSON: I store the scene data as it is and never upgrade it in the database, but I do on-the-fly upgrading when serving to the clients. The benefits of this solution are that the original scenes can be in all servers forever. And it’s ideal when the app is under development, with a constantly changing data model. The only bad part is that the upgrading takes some server juice.

Had a fun time coding this, I hope that it will grow to something big!

Recent Node.js development

Code frequency plot

Recently I’ve been working a lot on the Node.js version of friendship-bracelets.net. Here’s a quick status report.

Code reduction

I’ve reduced the code to less than half its size by abstracting key parts of the code and compressing a few static JS files. I really love JavaScript – abstracting code has never been easier (and dirtier).
One interesting abstraction I made was an “edit resource” page. For each resource I have a Schema class instance that can help create an HTML form and then validate input from the client.

Nginx

Other news is that I’ve started using Nginx to serve static files and proxy to Node. It was really easy to set up so I will probably continue using Nginx. The only drawback is that I really want PHPMyAdmin for administrating my database, so I still have to run an instance of Apache… Perhaps I’ll find a solution to this later on. I will post instructions about my setup when it’s stable.

Chat using Server-Sent Events

Another thing I’ve done is a chat client. I was really excited while doing this because it is a whole new concept to the site. This way we can get even closer interaction with the users.
The tech behind the real-time chat is server-sent events, or more specifically, EventEmitter in HTML5. Earlier I was determined to use WebSocket, but since server-sent events is more well supported (on both client and server) and good enough for the purpose, I went that way.

Caching of Express views

I’ve probably mentioned how to do this earlier, but now I’ve tried it. When starting the Express app with the environment variable NODE_ENV set to “production”, I simply run
app.configure("production",function(){
  app.enable("view cache");
});
This makes Express cache the templates inside the app, and it makes the app faster. By also relieving the app from serving static files (using Nginx), this makes the web app perform really well. It almost feels like running the app locally when it in reality it’s on a virtual machine in a datacenter somewhere else.

Mobile app thoughts

I’ve already started using jQuery mobile for the mobile site, but it will probably only make it more difficult for me to maintain the site. Using that will need different HTML for the layout, which duplicates that amount of code. I’m starting to think maybe it’s better to just add some CSS when on mobile instead.

Express: multi-language site

A question from a user came in, and he asked if the site could be translated into russian (he even offered help). Making an Express app support multiple languages is easy using e.g. i18n-node. However, making friendship-bracelets.net in multiple languages is probably not that easy. As I see it, we have 3 options for multi-language implementation.

  1. Just translating the menu buttons and some of the text. This will encourage people comment in their own language (if the site is in your language, you will probably write text in your own language). I think it would be really confusing if everyone posted stuff in mixed languages.
  2. Separating the languages into own sites with separate content. One site will have its own set of content and the other won’t have it. Not really cool and not really a good option in this case.
  3. Let’s say we have two sites of different language, A and B, and they share all content. Should all content in A also be visible for users in B? For some content, yes. What if you post content in your own language site A (english) and get a comment on it in site B (russian)? It gets more complicated than this when you think about it, and there will be special rules for just about everything.

Discussing this with the mods lead to a decision to do nothing about the multi-language question. However, It would be really cool to try out i18n in the future (I never tried it before).

How to serve Node.js apps on port 80 via Apache2

You’ve probably made several apps in Node.js, perhaps via Express, and now you want to show them to the world. The URL to your app is yourdomain.com:3000, but this looks quite ugly with the port number in the end. To solve this, you may have tried to make the HTTP server listen to port 80, but it needs root access and it does not feel right.

I know many of you already have Apache2 running on Linux, so I’ve made a recipe for you on how to fix this problem in a better way. The trick is to make a proxy so Apache2 redirects things on port 80 to and from your Node.js app port. For example: if your app runs on yourdomain.com:3000, the proxy will make it available via yourdomain.com. You can also proxy sub-urls such as yourdomain.com/myapp to another Node.js app.

Start off with enabling the needed Apache2 module, mod_proxy:
sudo a2enmod proxy

I assume that you’ve already have set up a virtual host for port 80 and enabled it. If not, then please do.

To create the proxy, add the following code to your virtual host site file (somewhere inside the <VirtualHost> element):

ProxyPass / http://yourdomain.com:3000
<Location />
  ProxyPassReverse /
</Location>

That’s it! Restart apache2 and you should be able to access the app via http://yourdomain.com/.

To proxy things to and from some sub-urls, do this:

ProxyPass /myapp http://yourdomain.com:3000
<Location /myapp>
  ProxyPassReverse /
</Location>

If you get errors about the proxy module (see the apache2 error log), then you may want to look at this blog post.

To learn more about reverse proxies and how they work, see this.