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).


node apps iOS

A Node Interpreter for iOS

Posted on .

Nodeapp: Node for JavaScriptCore.

Back in December I wrote about Nodelike, which aims to bring Node to iOS 7 and Mac OS X through JavaScriptCore. The iOS app has now been released as Node - JavaScript Interpreter, which you can download from the App Store. You can also view the source at node-app / Interpreter.

The app itself is currently quite simple. You can load most of the core modules, like assert, events, and net, but executing code removes it from the editor. It's literally an interpreter -- a GUI REPL, rather than a way to write Node on the go.

It includes browsable documentation, so you could use it to verify ideas, or more importantly to help you learn Node. It has a lot of potential as a learning tool -- combined with an eBook it would be a great way to execute examples on an iOS device, particularly as you could tweak the code to figure it out.

Interpreters in iOS. Now I've seen everything.

This would also let people take back those wasted commuter hours. Rather than playing Candy Crush Saga you could boost your Node skills!


ui browser iOS graphs

Switchery, circles

Posted on .



Switchery (GitHub: abpetkov / switchery, License: MIT, bower: switchery) by Alexander Petkov is a checkbox replacement, inspired by iOS 7, complete with animations.

The basic usage is new Switchery(elem). You can pass extra options for the disabled state, the colour, and the animation speed.

Switchery is written using CommonJS modules, but Alexander builds a standalone version that doesn't need require.



Circles (GitHub: lugolabs / circles, License: MIT) by Artan Sinani is a small script for creating circular graphs. It doesn't have any dependencies, and can be used like this:

  id:         'circles-1',
  percentage: 43,
  radius:     60,
  width:      10,
  text:       7.13,
  colors:     ['#D3B6C6', '#4B253A']


reviews apps iOS

Review: Kodiak JavaScript

Posted on .

Kodiak JavaScript (iTunes: Kodiak JavaScript, Price: $4.99) is an iOS IDE created by @becomekodiak, a group of developers that apparently really like bears.

Kodiak's file browser and editor views, and the sidebar.

This app comes bundled with over 50 libraries and frameworks familiar to JavaScript developers, and most of the features you might expect: syntax highlighting with various themes, a tabbed editor, a file navigator, and a preview mode that uses the built-in WebKit browser. It also supports Retina displays and external keyboards.

The settings panel allows the theme, font, and font size to be changed. I found DejaVuSansMono looked best. A preview is displayed in the same view so you can easily see what each option does.

The IDE settings and the impress.js demo being previewed.

I tried it out with some of the bundled libraries -- impress.js for example worked fine, and I made a quick scratch project just to get a feel for the basics.

One of the best features in the app is the keyboard. Much like other text or terminal apps, it includes a bar with commonly used keys along the top. It has a button in the centre which can be used to move the cursor around easily, and the other keys have gesture-based punctuation shortcuts which are great for quickly inserting quotes and brackets.

Kodiak doesn't like loading large files which I suspect is a limitation of their editor design -- for your own files it should be fine, but if you try to open a 40 KB JavaScript library it'll make the device slow down quite a bit. Also, large files can't be edited, they open in a read-only mode instead.

I don't remember VimTouch having limitations like that, but it's a very different application. In fact, I think the strength of Kodiak JavaScript lies in its educational value -- if you're starting out learning JavaScript it could be a great companion application to a suitable Kindle/iBooks eBook.

I noticed that one of the Kodiak developers has a GitHub account with some polished-looking Objective-C projects: Adam Horacek. This includes the cool keyboard found in the Kodiak apps, which is KOKeyboard. Adam's work is definitely worth taking a look at if you do any iOS development.


games node iOS images

Spaceship Pilot, CARPE Slider, CasperJS, lazyload

Posted on .

Spaceship Pilot

Spaceship Pilot screenshot

Spaceship Pilot from Webdigi is a browser-based game that's controlled by tilting an iOS device. A QR code can be used to easily launch the site that's used to collect accelerometer data -- the Google iOS app is a relatively painless way of doing this (using the image search).

The authors have written a blog post about the client and server-side code -- the server uses Node and Socket.IO.

CARPE Slider

CARPE Slider by Tom Hermansson Snickars is a cross-browser slider widget with no dependencies. It doesn't require any image files, and works well with both the mouse and keyboard.

When used with HTML5, data attributes can be used to configure sliders without extra JavaScript. Multiple sliders can safely coexist on a single page as well.

The project is distributed free for open source or non-commercial projects, otherwise it costs $99 for a license.


CasperJS (GitHub: n1k0 / casperjs, License: MIT) by Nicolas Perriault is a testing tool for PhantomJS.

Using PhantomJS seems like the ideal solution for creating advanced browser-like scripting environments, and CasperJS has an appealing API:

casper.start('http://google.fr/', function() {  
  // search for 'casperjs' from google form
  this.fill('form[action="/search"]', { q: 'casperjs' }, true);

casper.then(function() {  
  // aggregate results for the 'casperjs' search
  links = this.evaluate(getLinks);
  // now search for 'phantomjs' by filling the form again
  this.fill('form[action="/search"]', { q: 'phantomjs' }, true);

The author has written a tutorial including installation instructions on the CasperJS homepage, and the project includes tests.


lazyload (License: MIT) by Vincent Voyer and St├ęphane Rios is an image loader that uses a temporary base64 image:

  onload="lzld(this)" />

The authors opted to use the inline onload so each image effectively registers itself with the lazy loading system, rather than calling something like getElementsByTagName or querySelectorAll.