JavaScript Y Combinator

20 Sep 2013 | By Michael Hurley | Comments | Tags functional guest-posts
This is a guest post by Michael Hurley. The original is here: JavaScript Y Combinator.

At the end of The Little Schemer, the authors lead you step-by-step through the process of deriving the Y combinator. They do this repeatedly abstracting a length function–and then magically, the Y combinator appears. It is a pretty neat trick, and certainly mind-bending on your first read through the book.

Since JavaScript has first-class functions, we can derive the Y combinator in JavaScript as well. I will take a different approach than The Little Schemer. This approach owes a lot to a couple of blog posts I read on the subject1.

Since this is a post about recursive functions, then we can use that old chestnut, factorial. Here is a possible implementation of factorial in JavaScript:

function basicFactorial(n) {
  return n === 0 ? 1 : n * basicFactorial(n-1);
}

Let’s start by making a non-recursive basicFactorial, which we’ll call nonRecursive:

function nonRecursive(f) {
  return function(n) {
    return n === 0 ? 1 : n * f(n-1);
  }
}

All we’ve done here is replace the recursive call of basicFactorial. Instead, we pass in a function that will get called. We can pass any function that returns something that supports the * operator:

nonRecursive(function(x) { return 0; })(100); // => 0
nonRecursive(function(x) { return 1; })(100); // => 100
nonRecursive(function(x) { return 10; })(100); // => 1000
// ... etc.

But it starts to get a little interesting when we pass basicFactorial in there. Then we get back … basicFactorial!

nonRecursive(basicFactorial)(4) === basicFactorial(4); 
nonRecursive(basicFactorial)(10) === basicFactorial(10); 
nonRecursive(basicFactorial)(17) === basicFactorial(17);
// ... etc.

In other words, basicFactorial is a fixed point of the function nonRecursive.

This is pointless here, since we have already defined basicFactorial. But suppose we had not defined basicFactorial. Wouldn’t it be nice if there was a function that we could pass nonRecursive to that would return the fixed point of it, i.e. the factorial function?

That is what the Y combinator does. Pass nonRecursive to Y, and out comes the factorial function:

Y(nonRecursive)(100); // 9.33262154439441e+157

Note that:

Y(nonRecursive)(100) === nonRecursive(basicFactorial)(100);

Or in other words:

Y(nonRecursive)(100) === nonRecursive(Y(nonRecursive))(100);

So if we have Y, we do not need to define basicFactorial at all, we let Y derive it from the non-recursive function nonRecursive. Now let’s look at it from the other direction, and build up to Y. Here again, is the functional nonRecursive that we want to calculate the fixed point of:

function nonRecursive(f) {
  return function(n) {
    return n === 0 ? 1 : n * f(n-1);
}
}

As noted above, pass basicFactorial in, and nonRecursive returns basicFactorial. Notice that we have pretty much defined factorial in the body of nonRecursive: return n === 0 ? 1 : n * f(n-1);–why not use that? So here’s our next try: Apply nonRecursive to itself. This requires a small change to the body of nonRecursive, to self-apply the passed-in function to get the body out and apply it to the inner argument.

function nonRecursive(f) {
  return function(n) {
    return n === 0 ? 1 : n * f(f)(n-1); 
  };
}
nonRecursive(nonRecursive)(5); // => 120

Now we want to isolate the fixed point function. Let’s wrap that in a function g:

function nonRecursive(f) {
  return function(x) {
    var g = function(q) {
      return function(n) {
        return n === 0 ? 1 : n * q(n-1);
      };
    };
    return g(f(f))(x);
  };
}

Since inner function g does not depend on anything in closure, we can pull it out:

function g(f) {
  return function(n) {
    return n === 0 ? 1 : n * f(n-1);
  };
}

The pulled-out function may look familiar–it’s nonRecursive again. Here’s what’s left over after g (a.k.a. nonRecursive) is pulled out; let’s call it almostY:

function almostY(f) {
  return function(x) {
    return g(f(f))(x);
  };
}
almostY(almostY)(5); // => 120

We’ve pulled g out of almostY, but almostY still depends on g. The final step is to wrap almostY in a function that takes the functional g as an argument. Then almostY will have no dependencies.

So, let’s wrap it in a function that takes our non-recursive factorial functional and returns the fixed point of it. And since this is the last step, let’s call that function Y:

function Y(f) {
  var p = function(h) {
    return function(x) {
      return f(h(h))(x);
    };
  };
  return p(p);
}

Y(g)(6); // => 720

Holy crap! It works! But it’s not just for factorial–Y will provide a fixed point for any unary function, e.g.

function nonRecursiveFibonacci(f) {
  return function(n) {
    return n < 2 ? n : f(n-1) + f(n-2); 
  };
}
Y(nonRecursiveFibonacci)(10); // => 55

As presented, this version of Y can only handle unary functions, and it will blow up the stack for relatively low values of n. It is straightforward to extend Y to handle functions of any arity, and to memoize it.

Notes

  1. I found these articles helpful: Fixed-point combinators in JavaScript: Memoizing recursive functions and Deriving the Y combinator.

Underscore, Array.prototype, and You

19 Sep 2013 | By The Angry JavaScript Nerd | Comments | Tags node underscore

What’s the most dependent module on npm? Underscore.js! Why do people use it? Presumably because they can’t be bothered to learn how JavaScript works.

There are things I like about Underscore. No global meddling, sane internals – it’s a solid piece of work. But I occasionally find myself working with programmers who are probably better than me yet have weaker JavaScript skills, and they reach for Underscore like a drunk reaching for cheap gin.

At this point I stay their hand and point to Annotated ECMAScript, highlighting the superpowers baked into Array.prototype. Granted it lacks some of the things Underscore has, but it often does what you want.

Mozilla’s documentation is also good because it shows you how to duplicate the functionality with lengthy code samples, which is educational if you take the time to read it.

If this is new to you or you’re a little uncomfortable with Array.prototype, start with forEach then map and some. They’re the methods that crop up in my own code a lot.

Another related JavaScript quirk is array type checking. Because JavaScript says typeof [1, 2, 3] is 'object' you might want to pack your bags and give up altogether. I don’t blame you. But hiding in that ES5 documentation is a beastie called Array.isArray. You’ll find it in util in Node, which is puzzling – you’ll be OK using Array.isArray([1, 2, 3]).

I don’t think it’s a bad thing to depend on Underscore, but it makes me feel like people don’t learn Node or indeed JavaScript well enough before flinging their modules up on npm.

Node Roundup: Bedecked, Knockout.sync.js, express-promise

18 Sep 2013 | By Alex Young | Comments | Tags node modules npm apps express knockout mvc

Bedecked

Who wants to write presentations in Keynote or PowerPoint? No one! That’s why Justin Russell made Bedecked (GitHub: jtrussell / bedecked, License: MIT, npm: bedecked):

A small module for quickly and simply authoring snazzy presentations in Markdown - or Jade, or vanilla HTML. Inspired by hackynote (thiagofelix/hackynote), Bedecked splits your Markdown into slides and spits them out as a single html file that you can share with Dropbox, S3, or whatever you like.

The command-line tool allows you to transform Markdown files into presentations. It uses stdout, so you can redirect the output into a .html file.

It can also run as a server which supports live reloading.

Knockout.sync.js

Knockout.sync.js (GitHub: imrefazekas / knockout.sync.js, License: MIT, npm: knockout.sync.js) by Imre Fazekas adds syncing to Knockout, supported by a Node server. This allows data to be persisted to a server and shared between clients as desired.

Timestamps can be used to allow clients to respond to outdated data, and Socket.IO is used in the client.

express-promise

express-promise (GitHub: luin / express-promise, License: MIT, npm: express-promise) by Zihua Li is middleware for folding repetitive asynchronous operations into leaner synchronous-style operations.

This is the kind of thing you’re probably used to writing:

app.get('/users/:userId', function(req, res) {
  User.find(req.params.userId).then(function(user) {
    Project.getMemo(req.params.userId).then(function(memo) {
      res.json({ user: user, memo: memo });
    });
  });
});

But with express-promise you can do this:

app.use(require('express-promise')());

app.get('/users/:userId', function(req, res) {
  res.json({
    user: User.find(req.params.userId),
    memo: Project.getMemo(req.params.userId)
  });
});

The readme has more documentation, with examples for Mongoose and Sequelize.

jQuery Roundup: persistState, CLNDR.js

17 Sep 2013 | By Alex Young | Comments | Tags jquery plugins widgets calendars time forms
Note: You can send your plugins and articles in for review through our contact form or @dailyjs.

persistState

persistState (GitHub: togakangaroo / persistState, License: MIT) by George Mauer saves the state of UI widgets. It can be applied to a selector, so you can save the state of a specific set of widgets rather than all of them.

I like the idea of using this to save the state of form controls, particularly in a multi-stage form that’s handled client-side. Values are saved to localStorage, and the API of persistState allows you to swap in your own serialisation handler.

Saving the state of form controls looks like this:

$.ow.persistState.elementPersistence['textarea,input:not(:checkbox),select'] = {
  saveState: function($el) {
    return { val: $el.val() };
  },

  restoreState: function($el, state) {
    if (!state) return;
    if ($el.val() !== state.val)
      $el.val(state.val).trigger('change');
  }
};

CLNDR.js

CLNDR.js (GitHub: kylestetz / CLNDR, License: MIT) by Kyle Stetz is a calendar plugin:

There are wonderful and feature-rich calendar modules out there and they all suffer the same problem: they give you markup (and often a good heap of JS) that you have to work with and style. This leads to a lot of hacking, pushing, pulling, and annoying why-can’t-it-do-what-I-want scenarios.

CLNDR doesn’t generate markup (well, it has some reasonable defaults, but that’s an aside). Instead, CLNDR asks you to create a template and in return it supplies your template with a great set of objects that will get you up and running in a few lines.

CLNDR requires Moment.js, which is OK because I don’t leave home without it!

Writing for DailyJS

16 Sep 2013 | By Alex Young | Comments | Tags news

Every day we receive many submissions for Node modules, jQuery plugins, and weird and wonderful JavaScript projects. However, we’re also interested in your articles about JavaScript. They can be tutorials for projects you’ve created, or tutorials on well-known projects like AngularJS, Backbone.js, Express, and so on.

Articles don’t need to be long – three to five paragraphs is more than enough given how often we post. You can cross-post from your own blogs. We pay for original articles, and will negotiate a fee: as a guide we’ve paid $25 for short articles in the past.

If you’d like to write for us, send article ideas to contact.dailyjs.com.

Zephyros and node-zephyros

13 Sep 2013 | By Alex Young | Comments | Tags node modules mac

Intuitive, friendly, fast: none of these things describe window management on a Mac. Particularly if you use more than one screen with a laptop and occasionally unplug the second screen. What a mess! Anyway, those of us in such situations have adopted a variety of tools for forcing windows to behave. I currently use Spectacle, which is free and open source!

What about a programmatic API? Daniele Polencic sent in node-zephyros (GitHub: danielepolencic / node-zephyros, License: MIT), which is a Node module that talks to Zephyros:

The OS X window manager for hackers. At its core, Zephyros just runs quietly in your menu bar, and listens for your script. You typically write a script that binds global hot keys to do stuff, like moving or resizing windows.

You can bind keys to JavaScript callbacks, and even call the Zephyros API:

var Zephyros = require('zephyros');

var z = new Zephyros();

z.bind('t', ['Cmd', 'Shift']).clipboardContents().then(function(clipboard) {
  console.log('clipboard:', clipboard);
});

Daniele’s project originated from a talk at LNUG about Zephyros:

Originally the library was a nice excuse to get my hands dirty with Michael Fogus’ book, Functional JavaScript. It features lazy chains, promises and mixins, and the tests are written in Mocha.

If you’re wondering how the tests work, then take a look at mockServer.js. The module communicates with Zephyros using sockets, so it can be tested by creating a mock server that generates the expected responses.

Now you should be able to get those windows under control.

Static Site Generators for Yeoman

12 Sep 2013 | By The Angry JavaScript Nerd | Comments | Tags node modules yeoman rants

I often find myself being the only guy in the team who can make (or wants to make) a good ol’ fashioned website. No dynamic stuff, just a simple static marketing site to sell a product. “No problem,” I say confidently, dreaming up designs I can implement rapidly with Vim, Bootstrap, and Glyphish.

The problem I’ve ran into consistently over the last year or so is Yeoman doesn’t do what I think it does. This is what it does in my head:

  • Unites Grunt, Bower
  • Runs a little web server so I can see my site without having to run a web server
  • Doesn’t install any Ruby nonsense
  • Uses idiomatic Node

Here’s what it actually does when I use generator-webapp:

  • Installs loads of weird stuff I don’t need to do with testing and image optimisation
  • Make a Gruntfile.js that isn’t formatted using the coding style of most community Node projects
  • Seems to need Ruby due to Sass when I make it install Bootstrap

Then I realise generator-webapp might not be for me, so I try starting a project from scratch. Then I get into an incredible mess trying to automate the minimization of each Bower component’s JavaScript, CSS, and copying assets to a suitable location with Grunt.

I Miss Makefiles

Here’s how you copy a file in the shell:

* cp tmp/*/*.min.js site/js/

Here’s how you do it with Grunt:

copy: {
  dist: {
    files: [{
      expand: true,
      cwd: 'tmp/',
      src: ['*.min.js'],
      dest: 'site/js/',
      filter: 'isFile'
    },

Not only is it a whole bunch of lines to do something that should be simple, it also has weirdly named properties. I see isFile and start an internal monologue about everything being a file because it’s Unix.

I could write a Makefile in two lines that does this.

Yeoman Static Site Generators

This time I decided to persevere: I tried a bunch of static site generators for Yeoman.

  • Armadillo: Installed lots of stuff I didn’t need, and needed Ruby
  • Go Static: Was more for blogs than simple sites, and seemed to make files indented with tabs

There were more but I only have bad things to say about them. What I ended up with was this:

  • grunt-contrib-connect for running a web server. It was more complex than it needed to be because it defaults to exiting automatically rather than running a server, you need to specify a keepalive setting
  • grunt-contrib-concat for concatenating Bootstrap’s CSS, JavaScript, and any other dependencies in bower_components
  • grunt-contrib-copy for copying the files from bower_components to my website’s asset directories

The Shit Sandwich

I think the reason I have difficulty with Yeoman and Grunt is I see client-side development as “open source stuff” and “my stuff”. I want open source stuff poured out into buckets that I never look at, in a way that’s easy for other people to repeat should they want to install the dependencies fresh (I keep the files in the repository), or experiment with upgraded versions of each module.

Conversely, my stuff should be elegantly encapsulated with a module loader like RequireJS, kept separate and decoupled.

Instead of a neatly organized bento box with very clear sections I end up with a shit sandwich.

Node Roundup: 0.11.7, 0.10.18, npm-check-updates, social-cms-backend

11 Sep 2013 | By Alex Young | Comments | Tags node modules express npm

Node 0.11.7, 0.10.18

Node 0.11.7 and 0.10.18 were released last week. The unstable branch has seen changes across many of the core modules, particularly buffer and stream.

Meanwhile, 0.10.8 has fixes for stream and updates uv.

npm-check-updates

npm-check-updates (GitHub: tjunnone / npm-check-updates, License: Apache 2.0, npm: npm-check-updates) by Tomas Junnonen is a module for displaying out of date modules in your package.json. It can also automatically update package.json.

I tried it against a few projects and it works OK, but it struggled with private repository URIs – it just shows the 404 npm returns.

social-cms-backend

social-cms-backend (GitHub: dai-shi / social-cms-backend, License: BSD, npm: social-cms-backend) by Daishi Kato is Express middleware that provides REST APIs for creating a social networks using AngularJS.

It uses passport for authentication, so it can work with various social networks.

Once it’s installed you can set up persistence using MongoDB, and Facebook with passport’s Facebook strategy:

var express = require('express');
var SCB = require('social-cms-backend');
var app = express();
app.use(SCB.middleware({
  mongodb_url: 'mongodb://localhost:27017/socialcmsdb',
  passport_strategy: 'facebook',
  facebook_app_id: process.env.FACEBOOK_APP_ID,
  facebook_app_secret: process.env.FACEBOOK_APP_SECRET
}));
app.listen(3000);

jQuery Roundup: Mapael, Velge

10 Sep 2013 | By Alex Young | Comments | Tags jquery plugins widgets tags maps
Note: You can send your plugins and articles in for review through our contact form or @dailyjs.

Mapael

Mapael

Mapael (GitHub: neveldo / jQuery-Mapael, License: MIT) by Vincent Brouté is a Raphael-based vector map plugin:

With Mapael you can display a map of the world with clickable countries. You can build data visualisations by setting some parameters in order to automatically set a color to each area of your map and generate the legend. Moreover, you can plot cities on a map with their latitude and longitude.

The basic API looks like this:

$('.container').mapael({
  map: {
    name: 'world_countries'
  }
});

Vincent has some examples in the readme, for example, this map of France on JSFiddle.

Velge

Velge (GitHub: dscout / velge, License: MIT, bower: velge) by Parker Selbert is a tag widget, inspired by the tagging UI found in Pivotal Tracker.

It supports sorting, validation, data normalization, pattern matching, keyboard shortcuts, and callback methods for things like tag addition and removal.

The API is based around a constructor:

var velge = new Velge($('.container'), { single: true });

The instance will then accept callbacks like this:

velge
  .onAdd(addCallback)
  .onRem(remCallback)

It’s tested with Mocha and installable with Bower!

Drake: Password Syncing with Google Drive

09 Sep 2013 | By Alex Young | Comments | Tags google-drive security

Drake (GitHub: marksteve / drake, License: MIT) by Mark Steve Samson is a password management tool. It syncs with Google Drive, and uses SJCL for client-side encryption.

Drake

It has a simple password generation feature – it just creates a random string, so you can select a portion from it. It would be nice if it had some options for length and punctuation like 1Password.

The interesting thing about Drake is it’s entirely client-side. It uses Google’s APIs to sync data, but runs in your browser. Mark said he developed it using Chrome, so it could be a password management solution for Chromebook users who don’t want to sync all of their passwords using Chrome’s built-in system.

The code is organised using TJ Holowaychuk’s Component project, and can be built locally using make.

New Features in npm

06 Sep 2013 | By Robert Kowalski | Comments | Tags node npm

npm is moving fast, so here are some features you might have missed since 1.3.7.

Remove devDependencies

We’ve noticed people running into situations where ./node_modules gathers cruft. For example, installing devDependencies during deployment due to various reasons.

To clean up in npm 1.3.10 and above, just run: npm prune --production

Repository Shorthands

Use the shorthand "username/repo" for the field repository in your package.json.

People generally use a full Git URL in the repository field:

  "repository": {
    "type": "git",
    "url": "git@github.com:robertkowalski/npm-registry-mock.git"
  },

However, GitHub is the default, so you don’t need to write the full URL. This just got merged and is available in npm 1.3.10. Here’s an example:

  "repository": {
    "type": "git",
    "url": "robertkowalski/npm-registry-mock"
  },

Open Repositories Directly in a Browser

Since npm 1.3.8 the new command npm repo will open the repository website in your browser for the specified package. For example, npm repo express will open the Express GitHub page.

Conclusion

In npm 1.3.7 and up a huge amount of functionality has been added – which is why you should always keep Node up to date! I hope you learned something new about npm. You can find me on Twitter @robinson_k and GitHub at robertkowalski.

Home Automation with Node

05 Sep 2013 | By Alex Young | Comments | Tags node modules hardware
Heimcontrol to Major Tom...

I don’t post much about hardware on DailyJS, but I really should! I like tinkering with Arduino and small board computers like the Raspberry Pi – so far I’ve managed to use one as a cheap NAS, an IR control (by wiring up an IR sensor to the GPIO pins), and a 96khz/24bit audio player. Naturally I was interested when I saw the heimcontrol.js project (GitHub: ni-c / heimcontrol.js, License: MIT) by Willi Thiel.

It’s currently being debated on Hacker News, but hasn’t been updated for five months – hopefully the publicity will get people contributing to the project. It uses an Arduino board with the Pi, and provides access to the GPIO pins so you can communicate with both analogue and digital systems.

There’s a video on the project page that shows the HTML/WebSocket/MongoDB-based interface in use. The user is able to view and change a temperature control, turn a radio light switch on and off, and also operate a TV by IR through the Arduino board.

The user interface is responsive, so it looks good on a desktop or phone. If you get this running and have USB ports spare, you could always add some other stuff to it like ASIC miners!

Node Roundup: Forky, dsjslib, Node-huxley

04 Sep 2013 | By Alex Young | Comments | Tags node modules testing cluster data-structures

Forky

Forky (GitHub: brianc / node-forky, License: MIT, npm: forky) by Brian M. Carlson is a wrapper around the cluster module to make it easier to use and test.

The forky function loads workers based on the number of cores on your system. If any of the workers dies, Forky will spawn another one:

The best way to handle unexpected errors in node is to shut down your process and spawn a new one. Forky makes clean process shutdown and respawn easy as pie.

dsjslib

dsjslib (GitHub: monmohan / dsjslib, License: MIT, npm: dsjslib) by Monmohan Singh is a collection of common data structures and utility functions.

It includes:

  • Cache: An in-memory cache implementation, inspired by Google’s Guava project
  • AVL Tree: Map-like functionality backed by a balanced tree
  • BTree
  • RWayTrie: A data structure for fast retrieval of values associated with string keys
  • TernarySearchTrie: Similar to RWayTrie, based on Algorithms, 4th Edition by Robert Sedgewick and Kevin Wayne

It includes unit tests, so you can get a feel for each API and see how the classes are meant to be used.

Node-huxley

Node-huxley (GitHub: chenglou / node-huxley, License: MIT, npm: huxley) by Cheng Lou is a port of Instagram’s Huxley project. It allows sequences of events in a web application to be recorded and compared against screenshots.

Huxley was originally designed for tracking “visual regressions in web applications”:

Huxley is a test-like system for catching visual regressions in Web applications. It was built by Pete Hunt with input from Maykel Loomans at Instagram.

jQuery Roundup: Recurrence Widget, HeapBox

03 Sep 2013 | By Alex Young | Comments | Tags jquery plugins ui widgets
Note: You can send your plugins and articles in for review through our contact form.

Recurrence Widget

Dealing with recurring dates isn’t easy, but one way of adding a layer of structure to projects that must deal with them intelligently is by following standards like iCalendar. Johannes Raggam sent in jquery.recurrenceinput.js (GitHub: collective / jquery.recurrenceinput.js, License: MIT), which is a UI widget that is compatible with RFC5545.

The widget allows various repeat rules to be selected and then outputs a string that should be usable in ICS files.

HeapBox

HeapBox (GitHub: FilipBartos / heapbox, License: MIT) by Filip Bartoš is a select replacement. It has an event-based API, supports standard features like disabling the control, and has some nice flat UI themes.

Bobun, Backbone Eye, Rssi

02 Sep 2013 | By Alex Young | Comments | Tags node modules backbone templating

Bobun

Bobun (GitHub: neoziro / bobun-ui, License: MIT) by Greg Bergé is a simple UI-focused data-binding library for Backbone.js:

Bobun provides a simple way to bind a model to a view, or a view to model, a view to a view, or even a model to a model. It adds the ability to call set, get, and validate on the view. Bobun a simple way to manage and clean subviews thanks to Backbone.babysitter.

Binding a model looks like this: Bobun.Binding.bind(modelA, modelB, 'symetricAttribute'); – everything is namespaced under Bobun. There’s also Bobun.Binding.bindTo for one-way bindings, and there are also some view-specific features in Bobun.View:

Bobun.View.extend({
  events: {
    'click': 'domEventTriggerProxy'
  }
});

Backbone Eye

Backbone Eye (GitHub: dhruvaray / spa-eye, License: Simplified BSD) by Dhruva Ray is a Firebug extension for debugging Backbone applications:

Backbone Eye presents application specific models and views to introspect. Models show only application specific properties and shield away internal Backbone framework details. Search for models having certain attribute values, pin interesting models or use most-used models list to dig deeper.

The project’s homepage has screenshots with examples of how it handles models, collections, and views. It has some interesting features for visualising data flows. For example, interaction trails shows a sequence of interactions which have occurred on the selected model as a result of standard Backbone write operations.

Rssi

Rssi (GitHub: mvasilkov / rssi, License: MIT, Bower: rssi) by Mark Vasilkov is a string interpolation library inspired by Ruby’s syntax.

There are many template engines in JS, many unbelievably slow, while others (like doT) are quite fast but use unsafe evaluation: try . Rssi is 10x faster than Mustache, and 25-30x faster than Underscode and Lo-Dash templates (Rssi does about 1,300,000 ops/sec on my old Mac Mini, with Mustache scoring 130,000 and Lo-Dash about 45,000). Rssi is also marginally slower than doT, the upside being: it’s perfectly safe to use, won’t access global variables, call functions etc. (in fact, you can use rssi in an untrusted environment, e.g. let users customize their profile page).

If you’re looking for something secure without the more abstract features of larger templating libraries, then Rssi might be a good choice. It has unit tests and can be installed from npm or Bower.

ChocolateChip-UI, Bootstrap Grid Builder, Bootstrap 3 Performance

30 Aug 2013 | By Alex Young | Comments | Tags libraries bootstrap performance benchmarks ui mobile

ChocolateChip-UI

ChocolateChip-UI

ChocolateChip-UI (GitHub: sourcebitsllc / chocolatechip-ui, License: BSD) from Sourcebits is a new UI framework for mobile web applications that is designed to look like iOS 7, Jelly Bean, and Windows Phone 8.

ChocolateChipUI uses specific HTML5 tags for structural markup. The article element is the “basic building block of ChocolateChip-UI”:

Every article should have a unique id so that it can be identified by the navigation system. These must be valid HTML ids. At load time, ChocolateChip-UI checks to see if you have manually set the navigation state of your articles. If not, it will set the first article as current and the others as next. This will mean that initially you app may momentarily load in a state of disarray before it is arranged properly. As such, we strongly recommend that you always put a state on each article so that it loads correctly.

It uses its own JavaScript framework instead of a more established library, and is based around event-based widgets. It has some low-level features like touchscreen gesture recognition, but also includes higher-level widgets like UISegmented, UIPopup, and so on.

The authors have written a guide on how to transition from jQuery:

ChocolateChipJS is very similar to jQuery. But it’s also much smaller. Uncompressed it’s just 60kb and compressed, 26kb. In contrast, jQuery is 2.0.3 uncompressed is 242kb and compressed, 84kb. ChocolateChip was designed for modern mobile browsers. It has no legacy code for browser not on current mobile devices.

Bootstrap Grid Builder

Jay Kanakiya’s Bootstrap Grid Builder (GitHub: kanakiyajay / bootstrap-grid-builder, License: Apache 2.0) is a tool for exploring and generating column/row grids based on Bootstrap 3’s new markup.

It allows you to switch between different devices so you can see what a given layout will look like on a phone, tablet, or desktop.

Bootstrap 3 Performance

Parashuram Narasimhan sent in Bootstrap Performance using telemetry and an article about it: Bootstrap - Evolution over two years:

The performance drop seems to stop at 2.3.2 release and looks like the latest 3.0.0 release was aimed at making things faster. A lot of components in 3.0.0 are way better than their 2.3.2 counterparts.

There are significant performance changes between the RC and the final versions of 3.0.0. This could be due to incorrect CSS files I generated, or was there something different in the final release?

The telemetry page allows you to view performance metrics for each Bootstrap component for each point release.

Dropping Legacy IE Is No Panacea

29 Aug 2013 | By Alex Young | Comments | Tags browser ie dojo chrome

The presiding sentiment of client-side developers seems to be that dropping legacy IE support fixes cross-browser issues. While it does reduce a lot of rendering quirks, it doesn’t mean you can stop browser testing altogether.

The reality is that there are four popular browsers with a wide range of versions. Using DailyJS’s readership during August as an example, Chrome’s versions break down like this: Chrome 28 has 53%, and Chrome 29 is at 13%. Firefox has 43% on version 22 and 41% on version 23. That means we see very few Firefox and Chrome readers on older versions, so they’re doing an excellent job of keeping users up to date. Digging into the IE stats, I can see 50% using IE 10, and 0.33% on IE 6!

Why am I bothering you with browser stats? It was because I saw this bug in Dojo earlier today: #17400: Chrome 29 breaks dojo.query in Dojo 1.4.4 through Dojo 1.6. The Dojo developers quickly fixed the bug. It seems someone had used array-style accessors on a DOM node instead of the children and childNodes properties.

Even though IE 10 is far better than its predecessors, and Chrome and Firefox see fast upgrade rates due to their update mechanisms, you can’t leave out proper cross-browser testing. It’s hard work and dull, but unfortunately still important. I have a feeling the disparity in mobile browser technology will be the new IE 6, but that’s another story…

Node Roundup: 0.10.17, Defining Global Scripts in npm, loadtest

28 Aug 2013 | By Alex Young | Comments | Tags node modules http benchmarking npm

Node 0.10.17

Node 0.10.17 is out, so it seems like we’re back to weekly releases again. This version updates uv, tls, stream, dgram, and readline. The stream module fix makes errors raise exceptions when 'error' listeners are removed, which seems like a slight oversight to me…

Defining Global Scripts in npm

Joe Sullivan sent in his post about how global scripts are defined in popular npm modules. This is the kind of thing I like to see – learning from the pros. Joe summarises the common approaches at the end of the post.

loadtest

loadtest (GitHub: alexfernandez / loadtest, License: MIT, npm: loadtest) by Alex Fernández is a load testing module inspired by and partly compatible with Apache ab. It can be invoked as a command-line script or used as a module.

var loadtest = require('loadtest');
var options = {
    url: 'http://localhost:8000',
    maxRequests: 1000,
};

loadtest.loadTest(options, function(error, result) {
  if (error) {
    return console.error('Error:', error);
  }

  console.log('Tests run successfully');
});

The callback is run when the requests have been made, or the specified number of seconds have elapsed.

Do You Use the jQuery Plugin Site?

27 Aug 2013 | By Alex Young | Comments | Tags jquery plugins

The jQuery Plugin Registry was released in January 2013. It uses its own JSON format for defining a plugin and requires that you add http://plugins.jquery.com/postreceive-hook as a post-receive hook. This lets the repository collect information about new and updated plugins. The plugin site’s code is open source, and the authors use GitHub to manage feature requests and bugs.

jQuery was released in 2006, and since then a lot has changed on the web. In the JavaScript community there is a vocal group that has moved away from more monolithic frameworks, now that tools like npm, Bower, and Grunt have made it easier to manage dependencies and build client-side projects. That doesn’t mean jQuery isn’t still influential, and it’s still hugely popular.

What concerns me is despite jQuery’s continued popularity, the number of new releases on plugins.jquery.com is lacklustre. It’s far from stagnant, but npm leaves it in the dust. Not a fair comparison? Perhaps, but I know for a fact most of the plugins readers send DailyJS do not have jquery.json manifest files. I find it increasingly common to see package.json or bower.json files.

Do you use the jQuery plugin site for publishing or discovering plugins? If not, please discuss your issues with the service in the comments. Also, if you’ve been writing client-side scripts without the jQuery dependency let us know your reasoning.

Embedded JavaScript: Your Next Career Move

26 Aug 2013 | By Alex Young | Comments | Tags v8 microsoft google embedding

Most of us started out writing JavaScript for web pages. Even if you’re a server-side developer focused on Node, you probably wrote client-side JavaScript first. We see JavaScript as a language closely integrated with the DOM, and as a relatively lightweight server-side language, but you can flip this around and think of it as en entirely embedded language: after all, it’s embedded within web pages – it’s bridged to native data structures and functionalities that are required by the runtime.

Why Embed?

Why are scripting languages embedded in other software at all? If you think about a large C++, C#, or Objective-C project, then build time and deployment are major issues. Certain programming chores lend themselves well to scripting languages, so rather than rebuilding a huge project every time a small tweak is required, changing a script might be more productive.

In game development Python and Lua are typical choices for scripting. They’re used for game interfaces, logic, asset loading, AI, and more. Part of the success of the modding community based around Unreal engine games came from the use of UnrealScript.

Binding

You’re probably wondering: why Python and Lua? It’s mainly because these languages are widely adopted and suitable for embedding. Boost.Python and Luabind are examples of libraries that help with binding. Without bindings to the underlying native code it’s impossible for the scripting language to communicate, so this has to be fast and easy.

Web UI

An alternative to low-level binding is to use a web view that hosts JavaScript code, with some event-based bindings to the underlying application. Many mobile and desktop applications use web views for chunks of UI that are easier to implement with HTML, so this is happening more often than you might realise.

Once you’ve got large amounts of UI written with HTML, the required JavaScript starts to become messy. That’s where modern MVC frameworks like Backbone and AngularJS come in: but writing this code properly is a whole skill in itself, so that’s when the C++/Objective-C developers call us for help!

Unfortunately, embedding JavaScript as a runtime isn’t simple as it should be. There are many different ways to do it for each language.

.NET

In the .NET world there are lots of projects for running JavaScript inside your applications. IronJS is an ECMAScript 3.0 implementation built on Microsoft’s Dynamic Language Runtime. ClearScript allows multiple scripting languages to be added to .NET applications: it supports JavaScript through V8 – imagine being able to add using Microsoft.ClearScript.V8 to a C# program and then do engine.Execute("Console.WriteLine(lib.System.DateTime.Now)"). There’s also Jurassic – another ECMAScript runtime.

C++

The general wisdom seems to be that embedding V8 is the way to go. There are also SpiderMonkey-based projects like libjspp.

Objective-C

Apple’s Introduction to WebKit Objective-C Programming Guide explains how to access JavaScript from Objective-C.

Another approach is to embed JavaScriptCore. Apparently, Appcelerator Titanium uses JavaScriptCore for iOS projects – you should be able to figure this out by looking at Appcelerator’s GitHub projects.

Job Opportunities

I’m currently contracting at a particularly eclectic office: my team has Objective-C, C++, C#, and JavaScript developers. The shared wisdom amongst the non-JavaScript developers is they want to embed JavaScript in their projects: whether they’re games, desktop software, or mobile applications.

That’s great for us, but it’s worth remembering that JavaScript isn’t good at everything – the type system might not suit certain projects, its scope and coercion rules can be a source of frustration for people from other backgrounds. It looks C-like, but that doesn’t mean it’s C: and that’s the problem when you’re working with people who are more fluent in C than JavaScript.

If you’re wondering how people see JavaScript from the other side, then I found Choosing a scripting language by David Rosen interesting: he struggled with JavaScript’s readability because he couldn’t overload operators, and wanted to write maintainable linear algebra code.

However, it seems like there’s a huge amount of momentum behind JavaScript in a growing number of platforms, so it’s an area you should take seriously. Don’t be surprised to find yourself writing scripts for games or apps in the near future.