JS goes mobile – Native Apps with JavaScript

Have you ever heard of ‘Mobile Native JavaScript‘? – No? It’s about writing native Apps with a native look & feel, but purely in JavaScript and the web technologies you love.

The past

We as developers had to make the hard decision, about writing a new app either native for each platforms or a hybrid app for all the platforms at once. As always there are some drawbacks:

• native Apps
  • the developer need to know how every platform works
  • its hard for a web-developer
  • we have more technologies, so it’s harder to fix bugs
• hybrid Apps
  • it’s rendered in a WebView (we have to take care that the WebView works on every device)
  • no native look & feel
  • no native UX (User Experience)

Mobile Native JavaScript

In early 2015 Facebook and Telerik both contributed a new style of writing apps to the open source community, the apps are written in JavaScript, but the create native components. The apps Look & Feel like native apps, they behave like native apps and you get all  the native UX.

The frameworks don’t use a WebView like in hybrid apps. In short, they start a JavaScript Engine (like V8) in the background which generates native Java / Objectiv-C code at runtime.

They offer a subset of native components on all supported platforms like buttons, labels, etc. Another benefit is, it’s possible to directly access the native platform code and make native function calls to each device. So you don’t need an abstraction layer like Cordova to access native hardware.

At the moment there are two open source frameworks for the job:

• React Native from Facebook:
  • Android 4.1 & iOS 7
  • cool if you already know React
  • “learn once, write anywhere” -> write a app for each platform, but with one technology
  • they use JSX to write JavaScript
  • Layouts are generated with flexbox
  • no out of the box native Styling
• NativeScript from Telerik:
  • Android 4.2 & iOS 7.1 (& Windows announced)
  • can work with pure JavaScript, HTML, CSS
  • TypeScript and Angular 2 is supported
  • know Layouts (GridLayout, StackLayout, DockLayout, etc.)
  • out of the box native Styling

Example with NativeScript

I made a example NativeScript app with TypeScript and Angular 2 to show, how it could work.

It’s a small app which shows some conferences where we’re giving talks this year. You can select a conference, a talk and than rate this talk. The example code can be found on github. The only difference between Angular 2 web-app, is the router and the HTML-Tags and CSS-Syntax.

The future

Mobile Native JavaScript is a nice alternative to native development, with the advantages of performance and native UX over hybrid apps. NativeScript works perfectly together with Angular 2 and gives you the chance to reuse your “services” from your web-apps.