The JavaScript blog.


android iOS react

React Native

Posted on .

React Native

The developers at Facebook have been showing off React Native for a few months, but it's finally been released on GitHub: facebook/react-native. I went to a Facebook tech talk about React Native earlier this month, and as someone who has experience developing iOS apps, I was extremely excited about it.

React Native lets you write React components with JSX that are converted to native views. In the Facebook tech talk, they basically described it as being close to ReactJS but with a few functions changed to output native view code instead of DOM elements. That means React Native apps include a JavaScript runtime. It also uses a flexbox layout model and styling. Styles are not written in CSS but instead use JavaScript objects that will make you think of a JSON version of CSS. Here's an example:

tyles = StyleSheet.create({  
  row: { flexDirection: 'row', margin: 40 },
  image: { width: 40, height: 40, marginRight: 10 },
  text: { flex: 1, justifyContent: 'center'},
  title: { fontSize: 11, fontWeight: 'bold' },
  subtitle: { fontSize: 10 },

Working with React Native has several benefits:

  • You can write components with JavaScript
  • Changing views doesn't require recompilation, you see live updates in the iOS simulator
  • No recompilation is necessary after fixing crashes that are limited to the JavaScript portion of the project

The way I understood React Native was that it would replace the view and "view model" layer of an application. You could theoretically write a lot of JavaScript instead of Objective-C, but it seems better to treat it more like front-end development in a web application. The React Native documentation states that it's designed to work with custom native views:

It is certainly possible to create a great app using React Native without writing a single line of native code, but React Native is also designed to be easily extended with custom native views and modules - that means you can reuse anything you've already built, and can import and use your favorite native libraries. To create a simple module in iOS, create a new class that implements the RCTBridgeModule protocol, and add RCT_EXPORT to the function you want to make available in JavaScript.

There's a getting started guide which should help you if you just want to try it out right now, but you'll need to be familiar with Xcode and iOS development.

An Android version is coming, and but will require that your Android apps include the JavaScript runtime. The iOS version is slightly slicker in that the JavaScript runtime is available as part of Apple's standard libraries (JavaScriptCore).


libraries node modules android streams io iterator-protocol

Node Roundup: node-android, typed-morph, stdio

Posted on .


node-android (GitHub: InstantWebP2P / node-android, License: MIT) is a Node port for Android. It uses libuvpp and libuv-java, and is mostly compatible with Node 0.10.x. The authors haven't yet implemented the crypto modules, but it supports most of the other core modules as far as I can tell.

To use it you need to open the source in the Android Developer Tools plugin for Eclipse.

The people behind this project are based in Shanghai, and have also created some interesting peer-to-peer modules for Node. I don't know what kind of commercial work they do, but there's a lot of activity on the InstantWebP2P GitHub organisation.


typed-morph (GitHub: pjsteam / typed-morph, License: MIT, npm: typed-morph) by Damian Schenkelman is a set of iterators implemented using the iterator protocol so you can map, reduce, and filter typed arrays without using intermediate arrays.

The evaluation is delayed until the results are consumed, so chained calls are basically lazy:

var elements = new Uint16Array([1,4,7,10]);  
var iter = wrap(elements)  
  .map(function(e) { return e + 1; })
  .filter(function(e) { return e % 2 === 0; });

// at this point no processing has taken place
iter.reduce(function(value, current) { return value + current; }, 0);



stdio (GitHub: sgmonda / stdio, License: MIT, npm: stdio) by Sergio García is a module for general standard input/output management. You can use it for things like supporting command-line options, reading input by line, and prompting for input.

Command-line options are specified using a nice JavaScript object format:

var stdio = require('stdio');  
var ops = stdio.getopt({  
  check: {key: 'c', args: 2, description: 'What this option means'},
  map: {key: 'm', description: 'Another description', mandatory: true},
  kaka: {key: 'k', args: 2, mandatory: true},
  ooo: {key: 'o'}

And options can also have a multiple flag, so you can support expressions like -f a.txt -f b.txt -f c.txt.

stdio can also automatically generate help, and it comes with Jasmine tests and documentation in the readme.


frameworks libraries touch android iOS

Gestures, Scopeleaks, Wink, JLS, JavaScript Blogs

Posted on .

The Node tutorials will continue next week, in the meantime I have a
backlog of news from our Twitter friends to catch up with.


When I was writing gesture event support for the Let's Make a
series, quite a few readers got in touch to say gesture
recognition had been a sticking point for them during development of
web-based iOS or Android apps. Tait Brown, who made my favourite jQuery
UI theme Aristo,
has now made
Gestures which is a proof-of-concept library for gesture recognition.

The Gesture demo
shows how the library works -- gestures are recognised as shapes. At the
moment this is based on the \$1 Unistroke Recognizer in

I'm hoping Tait can add a simple multitouch API and release Gestures as
a library soon.


scopeleaks.js by Rui Lopes is a browser and CommonJS module for detecting global variable leaks. Once
loaded with a script tag or through a require, the global
variable state can be recorded and analysed:

var snapshot = scopeleaks.snapshot();

It's a simple library but might be useful for giving scripts a once-over
before release.

A similar project is
detect-global by Juriy Zaytsev (kangax).

Wink 1.2.3

Jérôme Giraud sent me a note that Wink
has been released, which adds
support for Android (2.2, 2.3) devices. Jérôme wrote a Wink
for DailyJS back
in September.


JavaLikeScript, or jls, is an interesting framework based on Prototype that runs on NSPR and
SpiderMonkey for Windows and Linux. It includes a GUI library, CommonJS
modules, file system access, a unit testing framework, and a network

The author hasn't yet released the native source code yet, but it looks
like he's just preparing the build chain and documentation before
releasing it. The API
gives an
overview of the APIs if you'd like to dig a little deeper.

ecmazing JavaScript Blogs

Šime Vidas wrote in to let us know about ecmazing JavaScript Blogs, a JavaScript blog viewer. It
feels very fast and makes it easy to quickly switch between blogs. Of
course, most of those blogs are in my news reader, but I thought the
fact it's all client-side might interest readers who are front-end


frameworks libraries server games opera node android

Crafty, Opera Widgets for Android, Exceptional and Node

Posted on .


Crafty (dual MIT and GPL license) is a JavaScript game engine by Louis Stow with a jQuery-inspired API.

Crafty.init(50, 580, 225);

var player = Crafty.e('2D, DOM, gravity, controls, twoway, image')
    .attr({x: Crafty.viewport.width / 2, w: 16, h: 16})
    .image('favicon.png', 'no-repeat');

var floor = Crafty.e('2D, floor')
    .attr({x:0, y: 225, w: 580, h: 5});

As you can see, the API uses chained calls like jQuery. At the moment
Crafty is an early release (version 0.1), but the Crafty
has a post about upcoming

The author is keen to point out that the project is a game framework,
rather than an engine. Typically game engines are less general than the
types of frameworks we're used to working with as web developers, so
this probably suits our way of working (and should suit many types of

Opera Widgets for Android

Opera Labs has announced an Android runtime that can run WAC
(Wholesale Applications Community):
WAC 1.0 - Supporting runtime for Android: Installation instructions and release
. This
means Android devices can now run a type of widget that's designed
around open, standardised specifications.

More details on about WAC Widgets can be found in: Introduction to
Widget Handset APIs in WAC

It's not just a superficial cross platform library, however:

Using these new APIs we can take pictures, check GPS location, browse our address books, access accelerometer information, and even send SMS, MMS and E-Mail messages

Exceptional and Node

Exceptional, a service that manages exception notifications from web
applications, now supports Node. In Exceptional and
the developers announced a new library called
exceptional-node that makes exception reporting a breeze:

var Exceptional = require(./'exceptional');
Exceptional.API_KEY = **YOUR-API-KEY**

process.addListener('uncaughtException', function(err) {

try {
  // Your Code
} catch(error) {
  // Your own error processing

It has a package.json file so you should be able to install it with
npm. It's released under the MIT license.