Kuba Suder's blog on Cocoa and web development

Backbone and Ember

Categories: Frontend, Javascript 0 comments

I’ve read a post comparing Backbone to AngularJS recently, and another that ended with similar conclusions about Backbone, and since I’ve been working with Backbone for the last year or so, I thought it would be a good idea to share my own experiences with it.

In 2012 I’ve been working with a few other developers at Lunar Logic on a new webapp. We’ve decided from the beginning to build it as a single page application, based on an API that was being developed for an existing mobile app. We have considered EmberJS for a moment, but we’ve decided it probably wasn’t stable enough at that point, so we went with Backbone instead.

Looking back I think we made the right choice back then – EmberJS has changed a lot since then (some important parts were still being changed a couple of months ago in 1.0-pre versions), and they still haven’t released a final 1.0, though it seems it’s getting close to that. I’m also glad I had a chance to learn Backbone and get to see its pros and cons. Still, if I was starting the same project right now, I’d probably choose Ember instead.

So what have I learned about Backbone during this year?

Read more »

Extending asset pipeline with custom preprocessors

Categories: Javascript, Ruby/Rails 3 comments

If you’ve read the Rails 3.1 asset pipeline docs, you’re probably aware that you can add preprocessors to your asset files by appending extra file extensions. For example, to write your JS files in CoffeeScript you need to add the suffix .coffee, and if you also want to pass something from Rails to those files, like paths to image files, you also need to add the .erb suffix. All the extensions are added together, so you end up with e.g. profile.js.coffee.erb (it’s simpler with stylesheets, because by adding a Sass preprocessor you get a bunch of asset path helpers for free).

What the docs don’t tell you is that Sprockets can also be configured to include preprocessors implicitly based on a content type.

Read more »

Psionides Blog: Sinatra Edition

Categories: Frontend, Javascript, Ruby/Rails 2 comments

I started this blog almost 3 years ago. It was a bit of an experiment, as I wasn’t sure if that actually made sense, if I would want to keep writing it a few months later – so I put it on Jogger (Polish Jabber-based blog service) and I used the classic Kubrick design.

Since I’m rather happy with how this experiment ended up, it was time for a change. The new version is hosted on Linode (definitely the best hosting I have used), and uses a custom-made engine based on Sinatra. Hopefully with this new design I’ll have a bit more motivation to write, because I just couldn’t look at the old one anymore…

If I find some more time, later this year I’m planning to learn some NodeJS and rewrite the engine using it (e.g. with Express).

There’s a few things that I’ve learned while working on the redesign:

Read more »

RipTip - pretty tooltips for RightJS

Categories: Frontend, Javascript 11 comments

I’m working on a new version of this blog, in which I want to use RightJS. This week I wanted to add some kind of pretty Javascript tooltips there; there is a Tooltip class in RightJS, but I don’t like the way these tooltips look. However, I know a jQuery library called “TipTip” which adds very attractive black tooltips. So I took the TipTip code and rewrote it using RightJS (and renamed to RipTip, for obvious reasons) – code is available on GitHub, as usual.

This is how the tooltips look:

Read more »

JSLint on Rails available as gem

Categories: Javascript, Ruby/Rails 0 comments

I released version 1.0 of JSLint on Rails yesterday. It has a few new options (see Github project page for more info), but the biggest change is that it’s now available both as a plugin and as a gem, so it can be used also with Merb and other frameworks which don’t support Rails plugins.

To use JSLint as a gem:

  • install the gem (gem install jslint_on_rails, or via bundler)
  • include JSLint’s tasks in your Rakefile: require 'jslint/tasks'
  • also in the Rakefile, set path to your config file: JSLint.config_path = "config/jslint.yml" (put it anywhere you want)
  • create a sample config: rake jslint:copy_config

After that, you can update your config and run the test as described in the previous post (rake jslint).

Check your scripts with JSLint on Rails

Categories: Javascript, Ruby/Rails 1 comment

This year, for several months I’ve been working on a project which involved quite a lot of JavaScript. I’ve already written about how this prompted me to start writing JavaScript unit tests. But as I found out later, there were some kinds of JavaScript errors which the unit tests didn’t help me find. Let me give you an example…

(TLDR: link to the Github project page)

When I work on a Rails web app, I don’t usually test the project in Internet Explorer all the time – if I did that, I’d have gone mad long time ago. Instead, I do everything in Firefox, and leave IE testing for more patient people – either our tester, or even the client in smaller projects. This seems to work well most of the time; however, in this project every 2 weeks or so I used to get such bug report: “The site crashes in IE”. Crashes here means that it doesn’t load at all. You see, if JavaScript is just a nice optional add-on to your project, it’s not a big thing if something doesn’t work; but if your entire application depends on JavaScript for everything it does, then one tiny mistake and you’re screwed.

The problem is that IE has this nasty habit of breaking on code that has a comma at the end of a hash – you know, something like this: { a: 1, b: 2, c: 3, }. And I do this mistake surprisingly often, because that tiny little comma is so easy to miss, and no one ever complains about it except IE – Firefox works fine, unit tests work fine, but next morning I get that dreadful bug report that IE just explodes. Then I wait for VirtualBox to boot Windows and eat all remaining memory, and spend half an hour debugging, only to find that this was all because of one comma…

Read more »

Javascript template libraries

Categories: Frontend, Javascript 3 comments

For the last 3 months I’ve been working on a new web application at work. It’s quite unique in some regards, from the architecture perspective; the biggest difference from other projects that I’ve worked on is that almost entire page is one huge embeddable “widget”. This requires a completely different approach than I usually use:

  • a lot of the code above the model layer is moved to the client side (i.e. Javascript); this means that controllers and helpers are rather simple, controllers mainly return JSON, and there’s quite a lot of Javascript to write
  • since a significant part of the system is written in Javascript, it needs to be unit-tested too
  • I have to be very careful not to cause any JS, CSS or DOM id conflicts between the embedding site and the “widget“ (which includes such things as keeping all JS code in a single global namespace, and using jQuery in the “noConflict extreme“ mode through an alias)

Another thing, which I’d like to write about today, is the way the views were implemented in this project. Since entire GUI is created dynamically by Javascript, I had basically two options:

  • render the views in Rails with ERB and send big chunks of HTML via AJAX to Javascript;
  • or make Rails send only data as JSON, and render the views on the Javascript side.

Read more »

Javascript unit testing

Categories: Javascript, Ruby/Rails 6 comments

I’ve read a lot about good programming practices recently. I’ve read the “Pragmatic programmer” book (which is awesome, one of the most useful books I have read, seriously); I’ve watched a great presentation “Craftsmanship and ethics” by Robert C. Cooper. And it seems that everyone seems to emphasize that one thing that is extremely important to write good software is writing unit tests (and writing them “all the fucking time”, as that black dude said in that presentation ;). I must admit I still haven’t had the courage to switch to TDD (although I try it for single tasks from time to time), and my test coverage is nowhere near what it should be ― it ranges from 20% to 80% depending on the project and its layer. But I know it’s important and I’m working on it…

Anyway, one day I had a thought: even if I test all models and controllers thoroughly, am I not leaving something out? Didn’t I forget about something that is a quite important part of the application ― about my Javascript code? After all, it’s code too, right? And sometimes it’s very important code; and not having any tests for it means the code is very fragile, it’s easy to break things, already fixed bugs may reappear again, and so on. Of course, Javascript may be harder to test, because it’s sometimes very closely coupled to HTML, but at least some part of it could surely be tested.

But how do you unit test Javascript?… I had no idea how to do this.

So I started googling, and I found that there are plenty of different unit test frameworks for Javascript. Of course I couldn’t resist and I had to take a look at every single one and compare them to choose the best one :) (I heard that it’s called “maximiser” and that it’s bad…). The result of this looking is the list below.

Read more »