JS is not that bad…
Let’s understand and explore what is there already. I will use as an example the most common pattern of calling an asyncronous function with jQuery and doing something on “success”. This is such a common operation, but did you know you can improve how you do it by using jQuery’s Deferreds and Promises?
To the point: Imagine you want to write a function that executes something asyncronously (fetch from a DB or whatever) and needs to return the result. I will emulate the asyncronous nature of the function by using
setTimeout. Is this what you would do?
1 2 3 4 5 6 7 8 9 10 11 12 13
In version 1.5 jQuery introduced the notion of deferred and promise. Compare the above to the following code using those:
1 2 3 4 5 6 7 8 9 10 11
Take some time to figure it out and think for a start if you find it cleaner…. It is, isn’t it? First we create a
$.Deferred. At the end we return the deferred’s
promise. Inside the asyncronous part we resolve the deferred, which in turn triggers the promise’s
done. Apart from being neater there are a number of additional advantages. To name a couple that I find interesting, a promises’s
done will trigger even after the deferred has been resolved. That is, if later you did
this would trigger immediately since the promise has been fulfilled already. Additionally, you can easily chain deferreds and promises, or say if you wanted something to happen after a few promises have been fulfilled you could do
Choose your frameworks
Let’s stop writing spaghetti code taken from random examples. It does not help us and others understand what we do. It is not maintainable. It is error-prone. My own stuff jarn.xmpp.core although better than average is a good example of what to avoid. The UI and logic are (not loosely enough) coupled together. While the use of namespaces gives an impression of structure, the different modules are not decoupled and they really require the total to be present to function. When I get the time (or clients) to rewrite it I will.
For this to happen it helps a lot if you have frameworks. The ones I chose, but this depends a lot on what one values, are Underscore and Backbone. I find them both indispensable tools in my daily routine.
Underscore gives you all these utilities that you have come to depend upon. Map, reduce, filter, and the likes are the core of the framework. Then there are some additional things I like, especially the function binding and the minimal and powerful template engine.
Backbone is my choice for structuring my code and doing MVC. Its primary use is to support you writing models, collections and views for these. Additionally it gives you a super extensible way with sane defaults to push/pull data to the server that does not get in your way.
Others might choose different tools like Ember.js. I like Underscore and Backbone because they are small, they are readable (check out the annotated source and try to remember when was the last time you read through a framework and actually understood what it was doing on your first read?) but mostly and this is super important they don’t get in your way. When you want to do things differently they allow you to do so without a fight. Coming from Plone, I can’t feel but relieved.
I looked at QUnit, JUnit and selenium (in all its variants and collection of Python drivers). I found them cumbersome and restrictive. Then I came across Jasmine and fell in love. Jasmine is a BBD (Behavior-Driven Development) framework with these advantages:
- Readable, simple and fast.
- Powerful mocking and spies built-in (took me 15 lines to create a mock for an XMPP connection;))
- No requirements on other frameworks, just works with whatever you use.
- It can run either on the browser or headless and there is abundance of drivers for it.
I find that the combination of the above is hard to find together. Use it, it’s good!
There you go. Hopefully you will get the same pleasure I got exploring all that and will find it as rewarding…