React CSS with Radium, React D3 Components

27 Feb 2015 | By Alex Young | Comments | Tags react d3 graphics ui css

Radium

Ken Wheeler sent in Radium (GitHub: FormidableLabs/radium, License: MIT, npm: radium) from Formidable Labs. Radium is a module for managing inline styles on React elements, allowing you to use CSS features that aren’t usually possible with inline styles.

You can use modifier styles based on component props, media queries, and handle pseudo classes.

Radium offers a standard interface and abstractions for dealing with these problems.

When we say expressive, we mean it: math, concatenation, regex, conditionals, functions–JavaScript is at your disposal. Modern web applications demand that the display changes when data changes, and Radium is here to help.

Radium provides a mixin called StyleResolverMixin which will generate the styles that you want to add to a component. The style objects it uses look like this:

var radStyles = {
  padding: '1.5em',
  border: 0,
  borderRadius: 4,
  background: 'blue',
  color: 'white'
};

You can then call this.buildStyles in the render method, and add the styles to the style attribute. Radium also supports modifiers – CSS properties that are applied based on the component’s props and state. Take a look at the getting started guide to learn more.

Ken also mentioned React: CSS in JS by Christopher Chedeau, who works at Facebook in the front-end infrastructure team.

React D3 Components

React 3D Components

react-d3-components (GitHub: codesuki/react-d3-components, License: MIT, npm: react-d3-components) by Neri Marschik is a library for working with D3 in React. Imagine being able to include elements like BarChart in your render methods, which generates charts based on the ReactD3.BarChart class.

You can even add tooltips and CSS classes. The project’s readme includes lots of charts, but not every D3 chart is supported yet. The author is also working on animations.

I much prefer the idea of giving D3 charts some added structure with React – usually my D3 code ends up a little bit on the less maintainable side!

Transpilers: This Time It's Different

26 Feb 2015 | By Alex Young | Comments | Tags transpilers estree es6

JavaScript is changing. It’s not just the wealth of great libraries that forces us to constantly learn new techniques, but the development of the language specification itself. If you’re excited about ES6 modules, arrow functions, template strings, or ES6 classes, then you’re probably already using these technologies. We don’t have to wait years for the major browser manufacturers to keep up because we have transpilers.

One reason many of us stuck with JavaScript rather than CoffeeScript and TypeScript is we wanted to keep the stack simple. Adding extra layers can cause issues for debugging, and learning new languages takes time. However, polyfills and projects like 6to5 (now Babel) let us work with emerging standards. Some of these language changes help us deal with the way we now use JavaScript, so I’d argue that ES7’s await proposal and generators could help us to be more productive for asynchronous programming, and classes will help design more maintainable projects.

For example: I find Browserify helps me structure client-side code to be more reusable and easier to navigate. And, during development my browsers show the right file and line number for errors, because I use Source Maps. When I read about 6to5 being renamed to Babel the thing that interested me the most was ESTree:

Recently a number of people from Mozilla, Esprima, The jQuery Foundation, Acorn, 6to5, ESLint, and others have come together to create ESTree, a standard upon which all parser and transpiler tooling will be based on.

The ESTree Spec could be what takes the pain away from our constant quest to use the latest and greatest standards without having to wait for legacy browsers to catch up. Now we can take transpilers seriously:

We want for 6to5 to solve the transpiler story. If the community could rally around a tool that provides a solid foundation for dealing with a lot of shared issues then we’ll all be much better off.

Babel will continue to serve as a JavaScript transpiler for using the very latest standards, but will also begin to open up its API for other tools. Anyone who has worked on the project internally knows that Babel is incredibly easy to work with.

This time it’s different: it’s no longer about browsers and instead about how we choose to write JavaScript. We won’t know what works until we start to use the new standards for serious projects, but now there are more reasons than ever to be an early adopter.

References

Node Roundup: npm jQuery, io.js 1.3.0, proginoskes

25 Feb 2015 | By Alex Young | Comments | Tags sponsored-content recruitment apps

npm and jQuery

It’s finally happened: jQuery is recommending npm for distributing plugins. My preferred client-side workflow is npm and Browserify, but I know many readers use Bower. Hopefully this shift will encourage more people to use npm for client-side libraries.

Lin Clark mentioned this in this week’s npm Weekly, and also that npm has hit 1,000,000,000 downloads in a single month. Very impressive!

io.js 1.3.0

io.js 1.3.0 is out. As usual the details are in the nicely marked up changelog, which now contains links to commits. That makes it easier to look up what the commits actually do, because the one line descriptions can’t always communicate the subtleties of the pull requests. You’ll probably think I’m being sarcastic, but I was happy to see these changes:

It’s all about attention to detail! In general this release feels like it’s focused on quality control – there are lots of JavaScript code quality fixes and documentation tweaks.

The new changelog formatting also lets you easily see which commits come from Node:

I think it’s @rvagg who writes this document, so thanks Rod for making it easier for us to see what’s going on.

proginoskes

Jason Gerfen sent in proginoskes (GitHub: jas-/proginoskes, License: MIT, npm: proginoskes), a module for monitoring logs from multiple sources by using SSH as the transport. It gives you an object stream, so you can format the results however you want. You can also easily see each source, because the objects have a server property.

This will work really well if you’re used to writing ~/.ssh/config with aliases for servers and keys. The configuration options for proginoskes allow you to define the port, username, private key, and log file location. You could easily pipe your server logs to multiple locations for archival purposes, stats, and error notifications.

This project is based on the ssh2 module which is actually an SSH client by Brian White that’s written in JavaScript. The ssh2 module also exposes a stream-based API, but for the underlying SSH protocol.

Find Your Next Developer with this JavaScript Online Test

24 Feb 2015 | By Alex Young | Comments | Tags sponsored-content recruitment apps

Hiring programmers is hard work. Finding candidates takes time, and then figuring out if they’ve really got the right skills can be tricky as well. I’ve done technical tests as part of interviews before, and some have actually been enjoyable, but most have been quite poorly conducted. Tests for Geeks is a service that aims to improve the technical testing process, by providing high-quality tests with reports that are easier for recruiters to understand, and tests that programmers can undertake and attach to their CVs.

Tests are timed, and the default JavaScript test is designed to take 45 minutes. There are some rules: you can’t press any keys or copy questions, and it tries to discourage candidates from circumventing these rules. If the candidate attempts to press any keys they’ll see a prompt warning them – then the test can be continued by pressing a button.

There’s a JavaScript online test that includes questions that would be useful for testing client-side developers. Your HR manager or recruiter can easily create unique links to send to candidates. Because there are so many JavaScript tools and frameworks, you might find this test works well for judging a candidate’s general JavaScript skills.

To actually test candidates, you’ll need a paid plan. Plans start at $29.95 for three tests, but you can buy unlimited tests for a month for $99.95. If you were looking to hire someone quickly and had lots of applicants, then naturally the unlimited plan would make sense. Also, the paid plans support custom branding, so you can use your own domain name and logo. Tests for Geeks have many other programming tests and the last one which they launched was iOS and Objective-C test.

One thing I like about Tests for Geeks is the recruiters I’ve worked with before can easily understand the reports. The coding test reports explicitly show the strength in each area, so if they’ve got better knowledge of the DOM you should see that on the report with a higher ranking. This is what the report looks like:

Sample report

I’ve seen a few online test sites before, but this is the first one that I’ve used that is specifically designed for technical tests. If you haven’t done a technical test before then you might like to try it out, or you could even create some new questions.

Many thanks to Tests for Geeks for sponsoring DailyJS!

Dockunit, easy-livereload

23 Feb 2015 | By Alex Young | Comments | Tags testing docker express middleware

Dockunit

Dockunit (GitHub: tlovett1/dockunit, License: GPL, npm: dockunit) by Taylor Lovett is a Node command-line tool for running tests in Docker containers. You can define a set of containers for tests to run against, which makes it running tests against multiple environments a lot easier.

This is useful if you maintain open source projects. For example, a blog engine could be tested against Node 0.10.x and 0.12.x, or you could even switch framework versions for Express/Rails/Django/etc.

The author includes examples for PHP, Node, and Python, and it seems like you could hook it up to a CI server easily enough.

easy-livereload

Are you still searching for the perfect Express middleware for live reloading your app? Daishi Kato sent in easy-livereload (GitHub: dai-shi/easy-livereload, License: BSD, npm: easy-livereload), a new module that uses LiveReload protocol 7.

If you haven’t seen it before, then you might want to check out the LiveReload homepage. It’s basically a protocol for updating client-side assets. With Daishi’s module, you’ll get almost instant updates to client-side assets, but also server restarts as well.

Server restarts are managed with node-dev. One interesting thing about node-dev is it’s compatible with node-notifier, so you can get desktop notifications when the server restarts.

Fltspc, Mustache-Wax

20 Feb 2015 | By Alex Young | Comments | Tags templating angularjs apps ui

Fltspc

Clint Heyer from the IT University of Copenhagen sent in Fltspc, which is a collaborative whiteboard. If you do group meetings where you want to work on snippets of text in a way that Google Docs doesn’t quite cope with, then you might like to try this project out.

It can be extended with JavaScript and a REST API – there’s a GitHub repository with more information at ClintH/fltspc-client, and I also found an Android example.

Clint also shared a project they use to get students started with modern JavaScript development. It’s called Kattegat, and it uses Yeoman and Express to get a server running with fun things like Socket.IO and Tessel.

If you’re interested in Clint’s Android work, then also take a look at Anders Bech Mellson’s Kiosker project. This is a generator for Android kiosk applications that displays a single web page, and it’s configurable through JSON. It sounds like this is what the students have been using to demo their interactive experiments on tablets.

Mustache-Wax

Mustache-Wax

Mustache-Wax (GitHub: jvitela/mustache-wax, License: MIT) by Jonathan Vitela is an extension for Mustache.js which allows you to use formatters inside expressions, in a style inspired by AngularJS. By defining a list of methods on Mustache.Formatters, you’ll be able to pass values through the filters.

The expressions use pipes, and you can chain them like this: ten | add : 3.14159 | add : twenty | add:-3. The expression syntax supports arguments, which are denoted with :.

The documentation is nicely presented, and the project is well-tested.

ForerunnerDB, rdb

19 Feb 2015 | By Alex Young | Comments | Tags node libraries databases

ForerunnerDB

ForerunnerDB

Rob Evans sent in ForerunnerDB (GitHub: Irrelon/ForerunnerDB, License: MIT, npm: forerunnerdb), a new database written with Node that uses MongoDB’s query language.

ForerunnerDB was created primarily to allow web application developers to easily store, query and manipulate JSON data in the browser via a simple query language. It provides the ability to store data passed by an API to the front-end and query it throughout your application making handling JSON data client-side significantly easier.

Furthermore, if you use the optional data-binding module, changes to your JSON data stored in ForerunnerDB are automatically propagated to the DOM. Some web application frameworks provide similar functionality which is why data-binding is an optional module.

The data-binding layer is optional, and is provided through a separate module. It depends on jQuery, and works using data attributes. It’s a little bit like KnockoutJS.

This project seems ideal if you’re trying to create single page applications that receive initial chunks of JSON from the server, and if your team is used to MongoDB. Browser-based persistence is available through IndexedDB, WebSQL, and LocalStorage.

One unique feature of ForerunnerDB is iOS support. It’s still experimental, but sounds like it could be useful for transitioning single page apps to native iOS applications:

The iOS version is part of the roadmap and will include data-binding for list structures like UITableView, as well as individual controls like UILabel. Data-persistence is already working as well as inserting and basic data queries, update and remove.

rdb

rdb (GitHub: alfateam/rdb, License: MIT, npm: rdb), a new ORM module, was posted to Hacker news today, and got lots of interest. Finding the right ORM is always difficult, but this one already has support for transactions, lazy loading, and promises. It supports PostgreSQL and MySQL. Someone on Hacker News mentioned the lack of SQLite support, but I always run a local version of the database I’m going to deploy against, just because I don’t trust ORMs to work seamlessly between databases.

If you like promises, you may prefer rdb to the Active Record-inspired ORMs that most people seem to use. Given some suitable functions, you can write clean statements like this:

db.transaction()
  .then(insert)
  .then(getById)
  .then(verifyInserted)
  .then(rdb.commit)
  .then(null, rdb.rollback)
  .then(onOk, onFailed);

I’ve taken this from the rdb documentation and examples. The main developer, Lars-Erik Roald, has been working on this module since May 2013, and he said it’s used commercially on Hacker News, so you should give it a try if you haven’t found the right ORM yet.

Node Roundup: Unifying Node with io.js, JSON Object to JSON Schema, conveyor-belt

18 Feb 2015 | By Alex Young | Comments | Tags node libraries modules connect express iojs json-schema

StrongLoop on Unifying Node with io.js

The StrongLoop blog has a post by Issac Roth about the unification of Node and io.js:

Unification is something you can help with! The io.js repository and the Node Google group are open to all. Get involved, post issues and comments, let people know your ideas and solutions. Tell people where you stand on the issue. I’ve worked with all of the contributors in small or large ways and they are each kind people–if they hear from a wide swath of the community something you want, it will surely get considered, as everyone I’ve met likes to serve the community.

Issac is involved with both the Node Advisory Board and Node Forward. Bert Belder, also at StrongLoop, is also involved with these groups as well, and works with Issac. This post gives a good insight into what’s happening with Node and io.js, which is sometimes bewildering to outsiders, particularly if you pay attention enough to see core contributors switching to io.js with seemingly no explanation.

And, according to Issac, the technical divergence between the projects might not be as extreme as some people make out:

Having witnessed some of the early discussions between the io.js technical committee and the Joyent contributors, there are only a small number of points of disagreement on both governance (stuff like how voting would happen if needed) and technical decisions (stuff like which version of v8 to use in the next release.)

He ends saying that he’s confident that we’ll end up with a single Node project. I don’t personally have a problem with forks existing, but it would make my life easier if I only had to write about one “Node”.

JSON Object to JSON Schema

Nijiko Yonskai, who has sent in several small but perfectly well-formed Node modules, has recently published JSON Object to JSON Schema (GitHub: Nijikokun/generate-schema, License: MIT, npm: generate-schema). This project helps you to convert JSON objects to schemas:

var GenerateSchema = require('generate-schema')
 
console.log(GenerateSchema({
  "_links": {
    "self": {
      "href": "/gists/42"
    },
    "star": {
      "href": "/gists/42/star"
    }
  },
  "id": "42",
  "created_at": "2014-04-14T02:15:15Z",
  "description": "Description of Gist",
  "content": "String contents"
}));

This outputs an object with the types based on the content, so in this case it’s mostly { "type": "string" }. I’ve recently been creating JSON schemas from existing JSON data sets, so this would have made my job easier!

conveyor-belt

Svilen Gospodinov sent in conveyor-belt (GitHub: svileng/conveyor-belt, License: MIT, npm: conveyor-belt). It’s designed to switch client-side assets based on the current environment, so you can easily load development mode client-side scripts with lots of logging.

It looks like it’ll work well with Connect/Express-based applications, but you could use it with other frameworks as well.

Wallaby, React and Node at the BBC

17 Feb 2015 | By Alex Young | Comments | Tags react node libraries bbc sponsored-content testing

Wallaby

Wallaby.js is a continuous test runner that outputs results directly into your editor. It includes code coverage, so you’ll get a visual indication of blocks of code that aren’t tested. It also uses dependency analysis to only run tests affected by changes, and runs tests in parallel to improve performance.

The supported editors include:

  • WebStorm
  • IntelliJ IDEA Ultimate
  • PhpStorm
  • RubyMine
  • PyCharm Professional

The authors are working on Visual Studio support as well.

The following screenshot shows the line covering test feature:

There’s an example project that you can use to see how Wallaby works in practice.

Wallaby currently supports PhantomJS, and plans to support Node and io.js. The developers are working on supporting compile-to-JavaScript languages like TypeScript, CoffeeScript, and React JSX.

The project is commercial but is currently free to try out. Wallaby’s creator, Artem Govorov, has written a blog post about the motivation behind starting the project.

The New BBC Homepage

If you’re overwhelmed by JavaScript frameworks, then you might be interested to hear about the BBC’s new homepage, which has been built with React, Express, and Node. There’s a detailed post about it by Andrew Hillel: How we built the new BBC Homepage.

This allows us to serve more simultaneous requests, increasing the performance of the application. As a result, we can serve multiple variants of the page without needing to rely on HTTP caches such as Varnish; we cache each module on the page in Redis and construct the page using the cached fragments instead.

When I was working on Node.js in Practice, the development team at the publisher kept pushing us to prove why Node is fast. They were concerned that it was all hyperbole, so we were constantly challenged to argue our performance assertions. I was encouraged to read that the programmers at the BBC have found Node to perform well enough for their large scale site, so if this project goes well it’ll be a great testimonial for Node.

Andrew also mentions that they’ve used React and Browserify. I’ve increasingly found Browserify to be the right choice for front-end work:

On the front end we have embraced new technologies such as isomorphic Javascript using ReactJS. This allows us to execute our Javascript templates on both the server and the client meaning that users without Javascript can still load a basic version of the page. The technology will also allow us to quickly develop modules that can periodically update themselves with live data from around the BBC. All our scripts are bundled together using Browserify, which allows us to mix both the AMD and the CommonJS module loading systems. Utilising a mix of these two loading systems means we are not restricted in our choice of open source libraries because of the mechanism implemented in a particular module.

The post has some good comments, so it’s worth at least reading through the top ones. One by “Twirrim” suggests that the site could be further optimised to reduce the amount of separate JavaScript files:

In the US, 3G & 4G typically see 90-100ms latency per request. Mobile Yslow is reporting that you’ve got 21 javascript scripts on the page. IIRC The android browser will limit itself to 4 threads retrieving content typically so that’s (21/4 * 100ms) 525ms just lost in latency requesting the javascript, let alone actually downloading it and the overhead of the javascript renderer.

For those of us who are investing in React, Browserify, and Node, this article is encouraging and interesting. And if you’ve got your own successful server-side JavaScript stories that you’d like to share, why not get in touch?

TRY.js, MightyEditor

16 Feb 2015 | By Alex Young | Comments | Tags games tools education

TRY.js

When I was at school we had a turtle graphics game that was meant to teach the rudiments of programming. It also had a turtle robot that you could drive around. There are many attempts to update this type of educational software, but one that impressed me is TRY.js (GitHub: s-a/TRY.js, License: MIT/GPL) by Stephan Ahlf:

TRY.js is supposed to program a virtual robot which moves in a 3D environment and is able to pick up and unload objects. The program gives beginners a first insight into the world of computer programming.

Due to the ease of use and the limited instruction set TRY.js is well suited for the introduction to programming, especially for learning the programming language JavaScript. It gives an overview about synchronous and asynchronous codes as well as test driven development.

It uses Google Drive so you can save your experiments and share them. There’s also a project for sharing TRY.js packages.

If you want to try programming the robot, there’s a Robot API on GitHub. Rather than trying to present a fake educational DSL, TRY.js embraces modern JavaScript idioms, so beginners would need assistance but it might help them to learn how people actually write web-based software – complete with tests!

MightyEditor

MightyEditor

Guntis Smaukstelis sent in a powerful web-based game level editor for Phaser games called MightyEditor (GitHub: TheMightyFingers/mightyeditor, License, Demo). It supports asset management for organising textures, and there’s a map editor so you can paint levels, with tools for scale and rotate. It also has a physics editor and code editing, so you can alter the behaviour of the game without exporting it first.

It’s open source with the limitation that you can’t create paid services on top of the MightyEditor, and you must reference the project’s creator (mightyfingers.com) in your work. The company behind the editor also sells paid subscriptions, so you can support them if you use it for building your own games. Otherwise the licensing is flexible, and it seems like a powerful tool.

ReactShadow, npm Subreddit

13 Feb 2015 | By Alex Young | Comments | Tags react libraries communities

ReactShadow

If you use React but would rather put CSS in separate files, then now you can with Adam Timberlake’s ReactShadow (GitHub: Wildhoney/ReactShadow, License: MIT, npm: react-shadow, Bower: react-shadow).

With ReactShadow you can apply a Shadow DOM root inside of your component. Under normal React.js conditions, your styles are written inline for style encapsulation – with ReactShadow your styles can now be moved into their rightful place – within CSS documents!

There’s a demo of ReactShadow that displays a few simple section elements that are styled using CSS files. The files specific to each section are loaded with @import using style elements. This works by declaring a cssDocuments property on the relevant react classes. It seems easy to use and potentially better than using inline styles, particularly if you’ve got existing stylesheets.

npm Subreddit

Daniel Bugl sent me reddit.com/r/npm, a subreddit all about Node modules. I receive lots of Node modules to write about on DailyJS but I don’t have time to cover everything, so it’s a good idea to post them places like this as well.

Another good way to promote your modules is EchoJS. I find it useful for getting a shapshot of the community right now – recently it’s all been about the Node/io.js drama.

You should always share your JavaScript projects. The old adage “if you build it they will come” is complete nonsense, don’t be afraid to promote things you’ve worked hard on!

Web Servers in Firefox OS, Marionette Inspector

12 Feb 2015 | By Alex Young | Comments | Tags firefox tools frameworks articles backbone

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.

Node Roundup: 0.12.0, vmd, NtSeq

11 Feb 2015 | By Alex Young | Comments | Tags node libraries modules bioinformatics

Node 0.12.0

A new day, a new branch (a new fork?)! Node 0.12.0 is out, and it includes some major changes:

  • Streams 3
  • Core module changes: HTTP, Cluster, TLS, Buffer, child_process, Crypto
  • The sandboxing is now magical

I tried 0.12.0 with some of my production projects and found several dependencies didn’t work, so you need to be careful before switching from 0.10.x.

Obviously the streams 3 API is interesting, and I seem to remember reading several discussions about it on the Node Google Group and IRC. I kind of forgot about it, so now I’m scrambling to figure out what new stuff it’ll let us do. I’m also half-way through Wolf Hall so it may take a few weeks…

The Streams implementation now works the way you thought it already should, without introducing any changes to the API. Basically this means no more getting stuck in “old mode”, there are only streams that are flowing or not.

There’s a good StrongLoop post that explains how it relates to the two previous APIs:

Streams 1 introduced push-streams to allow developers to consume data efficiently. Streams 2 added pull-streams in addition to push-streams to allow advanced use-cases, however, the two styles could not be used together. Streams 3 solves this issue in an elegant manner and allows the same stream to be used in both push and pull mode. Streams3 is available in Node v0.11/v0.12 and io.js.

Very soon after, io.js 1.2.0 was released. Again the io.js release includes patches that aren’t present in Node. JavaScript programmers are increasingly switching to io.js because of these patches and the fact it very openly adopts ES6, so the pressure is definitely growing on the Node maintainers.

In the bizarre world of Node/io.js politics, you’ll also find Joyent reiterating the importance Node.js Foundation. This translates to “IBM, Microsoft, PayPal love us, and so should you”. And elsewhere Nodejitsu joins GoDaddy, which is another corporate move I’m not impressed by:

Nodejitsu products will continue to run for the next seven months, then shutdown. As an added bonus our Open Source contributions are going to get a serious boost through the added engineers and resources of a world-class organization like GoDaddy. OSS at GoDaddy has grown significantly in the last few years and we’re excited to be on board to help it continue to evolve.

I thought Nodejitsu had a reasonable PaaS service and was a viable alternative to Azure and Heroku. I think Azure and Heroku are great, but it’s we need other options. There are still some independent PaaS services out there, but will they all fall to acquihiring?

vmd

vmd (GitHub: yoshuawuyts/vmd, License: MIT, npm: vmd) by Yoshua Wuyts is a desktop Markdown preview tool. Yes, another desktop app that you can install with npm! It’s made with atom-shell, so if you’re interested in building desktop apps with Node then you should check out atom-shell and vmd to see how they work:

Atom Shell is a javascript runtime that bundles Node.js and Chromium. You use it similar to the node command on the command line for executing javascript programs. This module helps you easily install the atom-shell command for use on the command line without having to compile anything.

NtSeq

NtSeq (GitHub: keithwhor/NtSeq, License: MIT, npm: ntseq) by Keith William Horwood is a bioinformatics library that provides DNA sequence manipulation. You can use it in Node and the browser, and it comes with some Node-friendly benchmarks so you can install and test it fairly painlessly.

More specifically, it’s a library for dealing with all kinds of nucleotide sequences, including degenerate nucleotides. It’s built with the developer (and scientist) in mind with simple, readable methods that are part of the standard molecular biologist’s vocabulary.

It’s always good to see Node modules for science!

JSX-TypeScript, Reapp

10 Feb 2015 | By Alex Young | Comments | Tags node modules libraries react typescript

JSX-TypeScript

JSX-TypeScript (GitHub: fdecampredon/jsx-typescript, License: Apache 2.0, npm: jsx-typescript) by François de Campredon is a fork of TypeScript that allows you to use React’s JSX syntax. There’s a port of the TodoMVC that uses JSX-TypeScript that shows how it works. The app.ts file, for example, has fragments of JSX in a render method, just like a typical React application.

Because React seems influenced by some of the trends in the modern .NET world, the marriage of TypeScript and React seems like an obvious move, and it may appeal to people who like React but would like to try TypeScript.

Reapp

Reapp

Reapp (GitHub: reapp/reapp, License: MIT, npm: reapp) is a new React-based UI toolkit for making mobile applications that feel more like native apps. It uses ES6 modules, and comes with a command-line tool for managing projects, so you can create a quick test app without too much trouble.

The authors say it isn’t a framework, but it does come with a set of modules that makes React and ES6 more accessible:

What we found was this: if you can subscribe so a certain file structure, you can avoid the framework. With that file structure, we can provide helpers via a CLI. Bootstrap your app in one command and you have a mature build system built in, without having to do anything.

The project’s features and future goals are a good mix of web and mobile technologies: it has a fast animation API, with support for themes, and React modules for things like routing. The mobile-style views and widgets remind me of UIView in iOS, in terms of API and look and feel. The UI documentation has an overview of the various widgets, including popovers, menus, and titlebars.

It’s still billed as an alpha release, but I think Reapp seems like a very useful blend of UI components and React utilities that could be used for rapid mobile development.

DefiantJS, Mprogress.js

09 Feb 2015 | By Alex Young | Comments | Tags json ui libraries

DefiantJS

DefiantJS (GitHub: hbi99/defiant.js, License: MIT) by Hakan Bilgin is a library for searching JSON documents with XPath expressions.

Do you need to query large JSON structures? Do you end up coding loops to parse the JSON and identify the data that matches your query? DefiantJS offers a better way. DefiantJS extends the global JSON object with a “search” method that enables lightning-fast searches using XPath expressions.

It comes with something called “snapshot search” that allows you to quickly search large documents. It’s used like this:

var snapshot = Defiant.getSnapshot(data);
// Snapshot search - this is more than 100 times faster than 'regular search'
found = JSON.search(snapshot, '//item');

You can also use DefiantJS to apply JSON to XSLT. This may be useful if you have existing XSLT documents that you want to use with a newer JavaScript project.

The project’s documentation has interactive examples that you can try out, so you can get a feel for how XPath expressions work.

Mprogress.js

Mprogress.js (GitHub: lightningtgc/MProgress.js, License: MIT) is a Material Design-inspired progress bar. It can display a progress bar at the top of the screen like Android applications, but you can also place it within other page elements as well.

It uses a simple constructor function called Mprogress, and you can start the progress indicator animation with start. When the task has finished you call end:

var mprogress = new Mprogress();
mprogress.start();
// Slow things happen here
mprogress.end();

It has other methods as well, like set for changing the position, and it supports video-style “buffering” indicators where two bars are used to show the current playback position and the point at which the data has been buffered. The project’s GitHub page has animated gifs that illustrate each of the animation types.

Fuel UX Tutorials, JS Unconf

06 Feb 2015 | By Alex Young | Comments | Tags scraping node libraries modules

Fuel UX Tutorials

Stephen James from Salesforce Marketing Cloud sent in a tutorial about Fuel UX 3’s datagrid. It’s split up into sections with sample code and a demo, so it’s easy to follow along:

In this month’s tutorial, we introduce the repeater control (v3). The repeater is a datagrid that can do tasks such as paging, sorting, and searching. It supports multiple views and custom-rendered cells. This tutorial showcases the most basic setup with a static source of data. In production, you would likely get data through API requests. The tutorial guides the user in defining and manipulating a data-providing and a column-rendering function.

Stephen also sent in some general information about Fuel UX, which is actually a pretty cool set of extensions for Bootstrap 3 that you can use to build things like web apps, admin areas for content management systems, and so on:

Fuel UX (GitHub: ExactTarget / fuelux, License: BSD-3) extends Bootstrap 3 with additional lightweight controls including combobox, datepicker, infinite scroll, loader, pillbox, placard, repeater, scheduler, search, selectlist, spinbox, tree, and wizard. The extensive documentation site even has a form builder to speed up markup placement.

I’ve used Fuel UX for a large project and found it worked pretty well, so it’s worth trying out if you’re looking for a consistent set of controls like wizards and date pickers.

JS Unconf

Philipp Hinrichsen wrote in about JS Unconf, an event that will take place in April in Hamburg. Here are the full details:

  • Location: Universität Hamburg, Hamburg
  • Tickets: €79 (includes entrance to the conference, two parties, and food)
  • Size: 300 people

So, what is an “unconf”? Philipp sent in this definition:

Unconf means unconference. The JS Unconf is a non-profit unconference from the community for the community. There is no schedule or speaker list in advance. Everybody can apply with a talk. Everybody can vote for talks at the beginning of each day of the unconference. The talks which got the most votes from the attendees will be picked. The JS Unconf is organized by the BOOT e.V. and the FSR Informatik der Universität Hamburg.

If you want to contribute to the conference you can find out how at contriboot.jsunconf.eu>.

X-Ray: A Scraper by the Author of Cheerio

05 Feb 2015 | By Alex Young | Comments | Tags scraping node libraries modules

x-ray

My favourite general-purpose web scraping utility has to be cheerio, a module that provides the simplicity of CSS selectors with fast and forgiving HTML parsing. The author, Matthew Mueller, has now released x-ray (GitHub: lapwinglabs/x-ray, License: MIT, npm: x-ray), a module specifically built for scraping.

The x-ray module depends on Cheerio, but includes some methods to automate common scraping tasks: it can convert collections of items into JavaScript objects, select objects based on flexible schemas, and it can even paginate based on CSS selectors.

Each of these features is well thought out: pagination supports a delay between requests, and you can set a limit to avoid following too many pages. It also integrates well with Node: you can stream to files, for example.

The data sources are flexible as well. If you need to scrape dynamic pages, then you can use x-ray’s PhantomJS driver, otherwise superagent is used.

Matthew’s example fetches a user’s “stars” page from GitHub and then extracts metadata like the repository link, description, and date:

xray('github.com/stars/matthewmueller')
  .select([{
    $root: '.repo-list-item',
    title: '.repo-list-name',
    link: '.repo-list-name a[href]',
    description: '.repo-list-description',
    meta: {
      $root: '.repo-list-meta',
      starredOn: 'time'
    }
  }])
  .paginate('.pagination a:last-child[href]')
  .limit(10)
  .write('out.json');

One other cool feature of x-ray is it supports output formats. That means you can easily download a page, structure it, then generate JSON, XML, RSS, Atom, CSV, etc.

When compared to using a chaotic mix of HTTP and DOM-parsing modules, x-ray gives scraping a more rigorous structure while remaining flexible. That means it would be possible to share x-ray schemas as Node modules, so the community could collaborate on wrapping useful websites with poor or non-existent APIs. It’s true that some people regard scraping as a dark art that borders on copyright theft (if used without permission), but Matthew carefully calms this notion by using the slogan “structure any website”.

Node Roundup: 0.11.16, io.js 1.1.0, Faster async, HTTP Tests

04 Feb 2015 | By Alex Young | Comments | Tags node iojs modules libraries

Node 0.11.16 and io.js 1.1.0

Node 0.11.16 is out, bringing an update to OpenSSL, npm, and some core modules: url, assert, net, and url. The util.inspect patch is interesting because errors generated by the assert module now get formatted with util.inspect instead of JSON.stringify. The idea behind this patch was to avoid errors due to circular references.

io.js 1.1.0 also has this patch, but there are again lots of unique commits that aren’t in Node. Using my limited Git forensic skills, I tried to compare commits between both projects, but I haven’t found a good way to do it yet. This is what I tried:

git clone https://github.com/joyent/node
cd node
git remote add iojs https://github.com/iojs/io.js
git fetch iojs
git checkout iojs/v1.x -b iojs
git branch --contains df48faf
git cherry -v origin/master iojs

I noticed that git branch showed a commit that I know is only in iojs actually in the iojs branch I made based on the v1.x branch from iojs/io.js. However, cherry shows commits that are in both Node and io.js, so I’m not sure what the best way of tracking unique commits to each project.

neo-async

I use the async module all the time without really worrying too much about performance, but Shunsuke Hakamata sent in neo-async (GitHub: suguru03/neo-async, License: MIT, npm: neo-async), a drop-in replacement for async created by Suguru Motegi which aims to improve performance.

The benchmarks have been made on major browsers, Node (stable), and io.js. Not every method is implemented, but the results the author has generated look compelling. If you take a look at the async.waterfall benchmarks, async appears to get slower based on the number of tasks, while neo-async stays flat.

Testing Node Unit Tests

Jani Hartikainen sent in an article about HTTP testing with Node. It covers Mocha, Sinon, and uses stubs for the built-in http module:

Let’s start by adding a test that validates the get request handling. When the code runs, it calls http.request. Since we stubbed it, the idea is we’ll use the stub control what happens when http.request is used, so that we can recreate all the scenarios without a real HTTP request ever happening.

To make sure the expected data is written into it, we need a way to check write was called. This calls for another test double, in this case a spy. Just like real secret agents, a spy will give us information about its target – in this case, the write function.

You could use this as the basis for faking requests to third-party APIs in your tests.

JSData

03 Feb 2015 | By Alex Young | Comments | Tags data cache rest localStorage

Asaf Katz sent in JSData (GitHub: js-data/js-data, License: MIT, npm: js-data, Bower: js-data) by Jason Dobry, a model layer for caching data. It supports adapters for sending data to persistence layers, so you can install DSHttpAdapter (npm/Bower: js-data-http) to send data to a REST server or DSLocalStorageAdapter (npm/Bower: js-data-localstorage) for browser-based storage. There are even adapters for RethinkDB, Firebase, and Redis.

One nice thing about JSData is it uses Object.observe to watch for changes to data, so it doesn’t need any special getters or setters. It also supports promises, so you can use then after finding or inserting data.

It also has more advanced ORM-style features like relations, computed properties, lifecycle methods, and data validation. The schema and validation API isn’t based on JSON-Schema, but it has the kinds of features you’ve probably seen in other ORMs and ODMs like Mongoose:

var store = new JSData.DS();

var User = store.defineResource({
  name: 'user',
  schema: {
    id: {
      type: 'string'
    },
    name: {
      type: 'string',
      maxLength: 255
    },
    email: {
      type: 'string',
      nullable: false
    }
  }
});

User.create({
  name: 'John'
}).catch(function(err) {
  // Email errors will be in err.email.errors
});

This is an example I adapted from the Schemata and Validation documentation.

JSData was originally written for AngularJS, but is now framework-agnostic. However, there is an Angular integration guide which shows how it can be used with Angular applications.

Because JSData can be used with Node and browsers, you could use it to define reusable models for single-page apps that sync when the server is available. It’ll also work well if you’re used to Rails-inspired frameworks like Ember, and you’re used to working with fat models that include data validation and lifecycle methods.

Syphon, json-schema-benchmark

02 Feb 2015 | By Alex Young | Comments | Tags node modules libraries react json json-schema

Syphon

Syphon (GitHub: scttnlsn/syphon, License: MIT, npm: syphon) by Scott Nelson is an implementation of the Flux architectural pattern for React. It helps you to structure applications around a single immutable state value, and implements the dispatching of actions to various state-transitioning handler functions.

The application’s state is stored in an immutable data structure that you create with the atom method. To access a value, you deref it, and you can also modify it by using swap:

var state = syphon.atom({ foo: 'bar' });

state.swap(function(current) {
  console.log(current.toJS());

  return current.set('foo', 'baz');
});

console.log(state.deref().toJS());
// => { foo: 'baz' }

Responding to state changes involves writing handlers, which takes the form of functions with two arguments: value and currentState. The application’s state is available in the second argument.

Syphon’s author recommends using the multimethod module to deal with handlers that branch on multiple values.

Syphon includes the root method for mounting your component hierarchy, and a mixin for adding helpers to components for accessing application data and dispatch values.

json-schema-benchmark

I may need to create some JSON schemas in the near future, so it was fortunate that Allan Ebdrup sent in json-schema-benchmark. This is a benchmark for JSON schema validators, and covers the following modules:

It also shows test failures when run against the official JSON Schema Test Suite. One cool addition is a summary of tests that caused side-effects, so you can see which validators altered values.