Mobile Application Development : The JavaScript Way

by Sysco LABS Blog 18 April 2016

In this Innovation Session, Pasindu Perera talks about how you can develop mobile applications in JavaScript. The session covers the different ways of developing an application in JS, and its pros and cons.


The Four Methods

1. Native App Development

In Native application development, the SDK is given by the provider and applications are built for use on a particular platform or device. Native is a good approach if you have the needed manpower, resources and knowledge. You basically need three different teams to work on a single app. Native is also the best approach if your app is complex – if it  is a high performance app, focuses on usability, or if it needs to cater to different devices.

2. Cross-Compiled

When you cross-compile, you develop the app in a single language which is then cross-compiled across different vendors. Xamarine (acquired by Windows) is a good platform for cross compilation – the app is written in C# and is then cross-compiled to Java for Android, iOS and Windows. Xamarine allows you to write once, and then deploy across multiple platforms.

3. Web-based

In web based application development, the method is similar to developing a website, however it does not have the same look and feel (users do not see the browser, url etc). The framework you use contains the required components such as headers, buttons, and lists for you to build your application. Web based app development platforms include Ionic which allows you to create interactive mobile apps using HTML5 and AngularJS, Sencha which has been there for a while and is based on their own framework, and jQuery which has their own components. These are similar to UI libraries on top of JavaScript which you would use to develop a website.

4. JS Runtime

The three platforms – Titanium, React (which is more popular), and Native Script – embrace a newer approach to application building.  You will still be writing with JS, but be dealing with native components. As far as your users are concerned, their experience of the app will be similar to one that is native. In the Native Script approach, you will be developing at the platform level where you use the SDK provided for the relevant platform but write in JS.  The abstraction level of React is higher, as React is based on a virtual DOM (document object model), which renders the browser in JavaScript. In a browser, most of the time is usually taken to render content. If it is done in JavaScript and the changes are only done to the DOM, it is a faster process. Whenever you want to change the UI, you re-render the entire thing. Under the hood, they will only complete the changes that are absolutely necessary on the DOM to do the actual change. When you have a virtual DOM, there is no need for a DOM in the browser to render the components – you can have a different component, or native components that renders based on their interface. In React Native, instead of the DOM, the components will be rendered on the actual platform (if it is iOS, it will be the iOS components).  There is no official support for Windows, but it is available for Android and iOS. One of the disadvantages of this is the components need to be built beforehand for you to actually write it. For Native Script, you do not need the community to do anything; if the platform provides you with an API, you can start working on it right away.


Why Choose Native?

When you have a single code base that needs to be deployed across multiple platforms and if there is a chance bug, you only need to fix it once. The complexity is also considerably reduced with a single code-base, plus you do not need to have an in-depth knowledge regarding the individual platforms to start developing applications. These characteristics are common to both the JS Runtime and the web based approaches as well, but with the JS Runtime approach, users will not notice the difference.

The feedback loop is the time taken between applying a change and seeing it on your app. Because Native has a low feedback loop, you are able to iterate faster.


What is React Native?

React Native focuses on developer efficiency across all the platforms and enables programmers to build world-class application experiences on native platforms using a consistent developer experience based on JavaScript and React. Facebook uses React Native in multiple production apps and continues to invest in React Native.

With React Native, standard platform components such as UITabBar on iOS and Drawer on Android can be used. This gives the app a consistent look and feel with the rest of the platform ecosystem, and keeps the quality high.


About the Virtual DOM

The virtual DOM is not based in HTML, but JavaScript, which allows you to easily manipulate and apply changes. Being able to work with native elements allows you to see the actual elements that a platform supports. You will still be able to use tools that work with web apps such as the Chrome Debugger (have break points, change the DOM, etc).

At CAKE, we have two apps which are based on React native. They are very similar in terms of visual elements and UIs, and the actual components of the platform. The user would not realize that the app is written in JS, which shows the perfect native app experience for a fully fledged application. This app is available in the app store as well for both Android and iOS.




One Comment for “Mobile Application Development : The JavaScript Way”

  1. Pubudu says:

    Good Read!

Leave a Comment