The JavaScript blog.


desktop atom articles electron isomorphic

Awesome Electron, Modernising Client-Side Code

Posted on .

Awesome Electron


Electron is the web-based desktop framework that was originally developed for GitHub's Atom editor. It seems to be catching on, so Sindre Sorhus is compiling a list of Electron applications in Awesome Electron.

The list includes Monu by Max Ogden, which is a process monitoring menu bar application for Mac OS X, and some simpler tools like a Gulp task runner.

Sindre has also made generator-electron, a Yeoman generator for Electron applications. To create your own desktop application with Yeoman, just run:

npm install --global generator-electron  
yo electron  

Modernising Client-Side Code, the Isomorphic Way

Kevin Grager from Algolia (Search API - YC14) shared an article about how they modernised a Node application: Modern JavaScript libraries: the isomorphic way:

Our JavaScript and Node.js API clients were implemented 2 years ago and were now lacking of all modern best practices ... This blog post is a summary of the three main challenges we faced while modernizing our JavaScript client.

It's pretty detailed and tells a story that you don't usually hear: the team looked at weaknesses in their project's design by writing tests. Then they rewrote parts of it using newer techniques, finally converting client-side code to be isomorphic.


libraries node modules generators articles

Node Roundup: 0.10.37 and io.js 1.5.1, Node and Real-time Finance, comws

Posted on .

0.10.37 and io.js 1.5.1

Node 0.10.37 was released on Saturday. This updates uv, domains, buffer, console, v8, and http. The uv update fixes a security issue which allowed attackers to gain elevated privileges due to the way setuid and setgid were used.

io.js 1.5.1 also came out last week. The blog post has some useful community updates, including a talk by Tony Pujals about the future of io.js.

There's also an npm weekly post about fixes for npm shrinkwrap --dev, changes to shrinkwrap in npm 3, and a screencast by Ben Clinkinbeard about using npm link.

Node and Real-time Finance

Imre Fazekas sent in two articles about Node and real-time finance:

The first part covers the background and architecture of the project, and the second part goes into the build system. It sounds like the third part will expand on client/server code sharing, so presumably it'll feature some of the author's experiences with isomorphic templates and view models.


What if you like Koa's generator-based middleware but don't want to use Koa? Andrea Parodi has created Comws (GitHub: shes/comws, License: MIT, npm: comws), a library based on co that you can use with any Node application.

To use it, create an instance of CoMws and then add generators to the middleware stack:

var CoMws = require('comws');  
var mws = new CoMws();

mws.use(function *(next){  
  this.result += ' hello';
  yield next();

mws.use(function *(next){  
  this.result += ' world';
  yield next();

var ctx = { result: 'yet another' };

mws.run(ctx).then(function() {  
  //ctx.result === 'yet another hello world' 

If you're using Node 0.11.x or 0.12.x you'll need to run node with --harmony-generators or --harmony, but io.js should work without the flags.

I'd like to try this with Express, but it also seems like a useful module for non-web Node programs.


libraries ui deployment articles

Slideout.js, Shipit vs Flightplan

Posted on .


Slideout.js (GitHub: mango/slideout, License: MIT, npm: slideout) by Guille Paz is a touch-based slideout navigation menu for mobile applications. It doesn't use any dependencies, and the markup is sensible. It has CSS transforms and transitions, and uses native scrolling.

The markup is based on HTML5 tags, so you can define the navigation panel with a nav element. It works in most browsers, and the base version of IE is 10.

The JavaScript API uses a Slideout constructor function, and it accepts options for animations, duration, and the necessary DOM elements.

One nice thing about this library is there are lots of ways to install it: npm, spm, bower, and component are all supported.

Shipit vs Flightplan

I've written about Shipit and Flightplan, but I haven't yet used both deployment solutions for anything serious. John Munsch has written a long post about his experiences using both Shipit and Flightplan with a DigitalOcean server:

I did everything from start to finish myself and I felt duly proud about having built something from scratch and launched it no matter how small it was. The tasks covered by my scripts were: initial machine configuration, updating of Ubuntu (mainly to get security fixes), deployment, and creating a SSH shell to the remote server.

Using a cheap VM can be very affordable if you want to host your own email, web services, and maybe use it for IRC. Deployment is naturally more work than something like Heroku, but Shipit and Flightplan can really streamline things.

John's article compares the pros and cons of each library, and he's included the scripts he used for deployment.


frameworks firefox tools backbone articles

Web Servers in Firefox OS, Marionette Inspector

Posted on .

Embedding an HTTP Web Server in Firefox OS

Justin D'Arcangelo sent in a detailed article about web servers in Firefox OS: Embedding an HTTP Web Server in Firefox OS.

... we've been looking at harnessing technologies to collectively enable offline P2P connections such as Bluetooth, NFC and WiFi Direct.

By utilizing HTTP, we would already have everything we'd need for apps to send and receive data on the client side, but we would still need a web server running in the browser to enable offline P2P communications. While this type of HTTP server functionality might be best suited as part of a standardized WebAPI to be baked into Gecko, we actually already have everything we need in Firefox OS to implement this in JavaScript today!

The article uses justindarc/fxos-web-server which is a JavaScript web server built with TCPSocket, a raw TCP socket API in JavaScript.

The possible use cases enabled by embedding a web server into Firefox OS apps are nearly limitless. Not only can you serve up web content from your device to a desktop browser, as we just did here, but you can also serve up content from one device to another. That also means that you can use HTTP to send and receive data between apps on the same device! Since its inception, FxOS Web Server has been used as a foundation for several exciting experiments at Mozilla.

So it seems like Firefox OS is getting the kind of advanced features that we've seen appear (and in some cases disappear) in Chrome OS, where you get access to native APIs to create desktop-like experiences.

Marionette Inspector

Jason Laster wrote to me about the Marionette Chrome Extension, known as the Marionette Inspector. There's a video about it, and you can download it from the Chrome web store.

It has some features that are pretty unique, like visualisations for the view hierarchy with the UI tree, and more friendly handling for inspecting Backbone models and events. Rather than seeing a complex JavaScript object, you'll see properties grouped under UI, Events, Model, and Properties.

It makes building apps with Marionette more like using the tools you might expect from an IDE, so you should try it out if you already use Marionette or are a Backbone fan that hasn't yet tried it.


libraries knockout articles lo-dash

Lo-Dash v3, g5-knockout.js

Posted on .

Harder, Better, Faster, Stronger Lo-Dash v3

I've noticed that Lo-Dash is a popular module on npm, and it's recently had a major release for version 3.0. This version brings some new features and interesting internal changes.

Gajus Kuizinas sent in Harder, Better, Faster, Stronger Lo-Dash v3, a post that explores version 3, like lazy evaluation, pipeline computing, deferred execution, and newly available methods.

Version 3 is the biggest update to Lo-Dash ever3. With ever increasing user base, modular code base, and cross-browser compatibility, Lo-Dash is the go-to utility library for years to come. With that in mind, there is an going competition with lazy.js and undescore.js, both of which are in active development.

Knockout/Browserify Base App with Events

Working with Knockout and Browserify is a pretty solid choice for many client-side projects, but because these are libraries rather than frameworks you need to know what you're doing before getting started. Greg Babula has created g5-knockout.js which you can use as a foundation for your next MVVM project. It includes an event bus for decoupling, and this is based on Node's events module, which is made possible thanks to Browserify. I also noticed Greg uses Lo-Dash.

Greg included a blog post in his submission which explains the concept and decisions behind the main dependencies. You can look at the source to see things like how view models are made.