Loading...

RequireJS, CoffeeScript, Vimperator, and Other Fancy Stuff Comments

Topics for this post: Lots of JS, Selenium, Jailbreaking, Vimperator.

I’ve begun messing with a number of different technologies all around the same time – namely, RequireJS, CoffeeScript, and FuncUnit. I’ve managed to reconcile them with one another for the most part, which is quite fun.

RequireJS I’ve actually been tinkering with to varying degrees for a few months now, and am finally starting to put into practice across the board at CrossLoop. I’ve got a few AMD modules in use, and a number of other scripts which RequireJS loads just as well. I’m in the process of breaking a lot of complexly-ordered script tag inclusions into neat-and-tidy cascading dependencies via AMD and RequireJS’s define() and require() functions.

I started work on an article on the topic of RequireJS a couple months ago, and hope to resume writing it in the next couple days. Interestingly, RequireJS has gone through some changes (and the CommonJS list has seen some activity revolving around “casting out” RequireJS or unlisting AMD as part of the CommonJS spec/draft/whatever. (some of this revolves around treating AMD as an “authoring format” versus as a “transport format”, which is an important differentiation to some. The feasibility of the dynamically-generated [with dependencies] transport proposition is questionable…) There is some feeling the two are irreconcilable. I’m not of that opinion, but I may not be in a good position to knowingly opine. So I won’t go into much more detail here than to say I’m still digging RequireJS, and that it’s helping me to organize my day job code better.

I’ve recently tried briefly to rewrite some of our CSS as Sass, and I’ve come to a stop. I think what would be more productive right now is a complete rewrite/reorg of the CSS as-is to shorten the files from 1000+ lines to something more manageable. We can always @import additional files, and RequireJS can stitch together CSS files once I come up with a proper build/release process and we automate it for production! (right now we’re entirely manual)

I’ve also finally gotten round to writing some unit tests for much of the JS code I’ve written for CrossLoop. I’ve been using QUnit for this, which is handy enough for most basic work. Having previously used JSSpec thoroughly, I do miss proper setup/teardown across a group of related tests, and nesting these sorts of things would allow me to keep things much DRYer than I’m ending up doing currently. QUnit has “modules” as declared with the module(“module name”) call, but it doesn’t really logically group code together, merely bookends code between calls to module(). Meh.

The unit tests I’ve written thus far have all been written in CoffeeScript and loaded into the page via RequireJS’s “cs” plugin (require(["cs!test1", "cs!test2"], $.noop) for no post-test code, which is what I’ve been doing) Seems to work well and has given me good practice in writing concise CoffeeScript, as well as discovering gotchas like the “isnt is not is not” comment I made after writing more than a few asserts where I wrote something like assert x is not -1. What this actually resolves to is assert(x == !-1) which is the same as asserting x == 1, which it frequently wasn’t. (you may have guessed I was checking indexOf on strings, etc)

The CoffeeScript plugin for RequireJS is available right on the main site and works just like any other plugin; put it in the regular modules dir, no need to load it manually, etc.

I can definitely see myself writing more CoffeeScript going forward, likely it’ll be the source language for txtwax, a text adventure game library I’ve been putting off writing for some time now. It may also provide a coffee/node backend for txtwax servers. I really love a number of features in CoffeeScript, such as automatic local variables, array comprehensions, implicit returns, decomposition assignment, multiline strings, string interpolation, heregexes, function syntax, function binding, improved switches, ranges, postfix conditionals… the list really does go on a bit. Anyone who hasn’t played with it, you have no reason not to do so, this language is useful right now. Tests are the perfect use case to dip a toe in the coffee (!), since even if you do worry about CS stability or whatever, they’re not user-facing.

I do appreciate the “fixture” in recent versions of QUnit, which allows you to throw arbitrary markup into the DOM temporarily, with the understanding that QUnit will clean it up after you’re done with it. Now if only there was a way to tester higher-level application-level functionality in JS… waitaminnit, that’s what FuncUnit is for!

FuncUnit (a product of JupiterIT, the lads behind JavaScriptMVC) builds on QUnit, incorporating their Syn synthetic events library for typing in fields, tabbing into and out of fields, hovering over and dragging and dropping. Lots of heavyweight event stuff that might otherwise take quite a bit of hacking on your own to figure out. On top of this, FuncUnit adds support for opening pages in separate windows and navigating through the contents of the window via S(), a selector for running Syn methods identical to jQuery’s self-titled function or $. Like jQuery, FuncUnit uses the Sizzle selector engine for this purpose.

FuncUnit seems great, especially when you add in the ability to record tests via FuncIt, (a Selenium IDE-like recording environment) the ability to play back tests headless, (without a browser – via Resig’s env.js to mimic a browser for continuous integration) or the ability to drive Selenium RC for true multi-browser/platform automated testing. I’ve yet to give it a real run for its money, because I’ve hit a speed bump I’ve yet to find a way around, which is transitioning from http pages to https, or vice versa. Many pages, particularly logins, make this jump and I don’t believe a remote-controlled page using S() can retain control after the page switches protocols. I’m very happy to hear a workaround, though! (I’d imagine env.js or Selenium-driving wouldn’t have this problem, but I’d like to be able to run the tests raw in the browser as well..)

I also recently started using Vimperator. This software, combined with the speed Firefox 4 brings with it, have me switching back to Firefox as primary browser, both for development and general browsing as a user. Vimperator takes getting used to, for sure, but if you’re a Vim head like I’ve become over the last 6 months or so, you may never see browsing the same again. Quick hints allow you to jump to fields/click links/submit forms faster than ever before and without a mouse. Your fingers will fly, taking you from buffer to buffer (tabs), zooming with new ease, and adding macros and mapping arbitrary commands to keys. All of this is retained in a .vimperatorrc file, which feels right at home to a Vim user! Modal browsing is great, and shedding even more of the browser’s chrome is liberating as well. I occasionally still like to browse with tabs visible (:set gui=tabs) and haven’t found a handy way of launching Selenium IDE via a keybinding but am otherwise nice and clean with gui=none.

There’s a knockoff for Chrome called Vimium, which is uh… fun but not nearly as powerful as Vimperator, due to limitations in Chrome’s JS plugin architecture, I assume. There’s a newer version of Vimperator called Pentadactyl, but I haven’t found a reason to switch and some reasons to stay, such as support for apptabs in Firefox 4 (:set apptab toggles a buffer as one, and app tabs can’t be accidentally closed via d the way normal tabs can)

Speaking of Vim, I’m currently trying to find the best TextMate-like “select some text and wrap it with delimiters” plugin. This should allow me to select text in visual mode and wrap it with quotes, single or double, parens, curlies, asterisks, underscores, or what have you. Please let me know if you know of one! (would like to be able to edit the delimiters or have them correspond to those recognized by % when jumping to matching delimiters.) I’m also still really interested in getting CommandT working under Windows (and Linux for that matter) so any tips there are welcome as well.

I also finally jail broke my iPod Touch 2nd or 3rd gen, whatever it is. I’m almost ready to toss the damned thing, it’s so slow. jail breaking allows me to lock orientation and enables multitasking, though the device seems to crash under the weight of more than one app in memory at a time. Haven’t really used Cydia much, but if I do I’ll surely blog about my experiences with it. I can tell you, however, that the process of jail breaking (I used red sn0w) is needlessly littered with hurdles and makes the user feel silly at best. I’ve mostly been neglecting my iTouch in favor of my iPad, though.

Really excited to see the TouchPad (and Pre 3!) in person. Also excited about improved notifications in newer iOS, but multitasking in webOS is just so much nicer.

2 Comments

  1. Posted June 18, 2011 at 1:14 pm | Permalink

    Hey, thanks for spreading the word about CoffeeScript. I agree that using it for test code is a great way to get started, and I hope you’ll dive in more in the future. 🙂

    Oh, and I wasn’t aware of that RequireJS plugin. Sounds like much less of a hassle than what I’d been doing. Could you provide a link?

  2. Posted June 19, 2011 at 12:40 am | Permalink

    Your book is definitely the biggest motivator in my picking up the language, followed by the “Try CoffeeScript” link/form on the site.

    Have added a link above pointing to the plugin. Out of curiosity, what were you using before to load it? Including the coffee js file and calling compile(), etc?

One Trackback

  1. By » Untitled LOSTbox on June 20, 2011 at 5:59 am

    […] pretty psyched, because lately I’ve written a few blog posts on mobile devices (like this and this) and it kept me better centered than when I compose on my laptop, where there are more […]

Post a Comment

Your email is never published nor shared. Required fields are marked *

*
*