Building Mobile Apps With JavaScript

Building Mobile Apps With JavaScript

Years ago if you wanted to create an Android app or an IOS app you had to learn Java or Objective-C which are high level compiled languages that are relativity hard to learn. That has all changed now. There are more and more technologies coming out that allow web developers/JavaScript programmers to create great mobile apps for all of the popular platforms including iOS, Android and Windows. Lets take a look at some options for web developers to start building great mobile applications.

Cordova / PhoneGap

Cordova (also known as PhoneGap) is an open source mobile development framework that allows web applications built with HTML/CSS/JS to execute within containers that can target each mobile platform. It uses standard API bindings to access specific capabilities of mobile devices such as cameras, sensors and storage.

Cordova is made up of a few different parts. The WebView provides the application with an interface. It differs a little depending on the platform. On some platforms, it can be a component within a bigger hybrid app that also works with native components. The Web App is where the code lives. It is implmented as a web page named index.html and can reference javascript, CSS and resources. The Web App runs within the WebView in the native container. Your app can be distributed to app stores just like a real native app.

Cordova also has an eco-system of plugins for all types of purposes. These plugins enable us to invoke native code from JavaScript. There is a large set of “core” plugins that allow us to access device capabilities such as the camera, contacts and battery. There are also 3rd party plugins and you have the ability to create your own custom plugins.

There are many advantages to Cordova but compared to a native app, some hybrid apps feel a bit clunky. This should improve over time as the software gets better. To install and try out Cordova/PhoneGap us this guide

Ionic / Ionic 2

Ionic is a free and open source HTML5 framework and mobile SDK for building mobile apps. Ionic  uses the AngularJS framework and Ionic 2 uses Angular 2. So in order to build Ionic apps, you will need to know at least the basics of the Angular framework.

Ionic does requires Cordova/PhoneGap to run. Think of Ionic as the front-end framework that deals with the user interface and interactions. It is similar to Twitter Bootstrap but for mobile along with support for a broad range of common native components.

To use Ionic, install Cordova and install the Ionic CLI tool through NPM. Once you do that it’s as simple as running “ionic start MyApp” to generate a web application which can then be exported to an iOS or an Android app.

Click here for a project based tutorial using Ionic 2

React Native

React Native is the latest JavaScript->Mobile technology. It is based on the React.js library which is a library for creating powerful and dynamic user interfaces. React Native is different from something like Ionic, in that it does not just run a web app inside of a WebView, but builds real native components in Java and Objective-C. So it is essentially a real native app and not a hybrid app. This means that the user experience is much closer to that of a native application. It gives us better performance and a smoother interaction

In order to build React Native apps, you will need to learn some basic React concepts such as components, state, properties and the virtual DOM. All that can be learned in my free React.js Crash Course. There are some additional things you will need to learn that are React native specific such as some of the native components.

React Native uses a CLI tool for generating an application which you can read about here. If you are wokring on Windows, you will need Android Studio installed along with the SDK and virtual device.

Conclusion

With these technologies, you can create great mobile applications using only HTML/CSS/JavaScript. You do not have to spend months learning a high level language like Java or Objective-C. This saves us incredible amounts of time and money. Not only that, but it allows us to have a single JavaScript codebase and not have to maintain 2+ versions of the same app on different platforms. It allows small businesses and startups to be able to create great cross-platform mobile apps without breaking the bank. Yes there are also some drawbacks, but the technology is getting better and better.

Comments

  • That is nice. I would like to know your recommendation for me between ionic and react-native. Though, I have not seen you published any course on ionic but just saw react-native course on eduonix.

  • Write a Reply or Comment

    Your email address will not be published. Required fields are marked *