Hybrid OR Native App development with JavaScript

When I started planning to write this article the idea was to do some VS comparison of both Apache Cordova and NativeScript. But while I was writing notes for this article I figured that it’s not only the technical aspect for comparing any technology, sometime it’s business requirement which override the technical aspect, also when we are comparing 2 technology stack it’s really helpful if you knows what are the pros and cons of two different tech stack, sometimes it’s not the end result which matters more but the overall process using which you arrive at the end result. So I have changed it from VS to OR.

cordova ORphoto

When we talk about process for creating any kind of projects, it involves both business (all the entities who are involved in human resource process or money aspect of project), there are certain decision which are taken at business level so if they are more clear on problems involved upfront they can take better decision. Technical (developers who will bring the app/project to life), will go through some technical details so that developer can take a better decision on whether to go for Hybrid model using ApacheCordova or NativeScript based upon their strength and technical expectations from the project.

We can broadly define mobile app development in 4 different categories:

  1. Native Apps: using pure languages such as Java, Objective C, Swift or C#, entry level is high, cost of development is high and startup cost can be high based upon availability of good skilled developer in pure languages.
  2. Cross – Compiled: You create your application in language like C# and then using a tool it will compile the same code to native mobile code example Xamarin. (Not purely sure how this works you can visit this website to learn more about it).
  3. Web Based Hybrid model: It’s a kind of hybrid app development technology where app is deployed in container app not on Native Layer tools and languages you need to create web based hybrid apps are PhoneGap/Apache Cordova, Supersonic, Ionic, Bootstrap, AngularJS, jQuery Mobile. Basic requirement to create app is you should know HTML5, JavaScript and CSS (all the skills which a web site developer has to know). So this hybrid model of development brings down the entry level barrier for mobile app developers. Will discuss the pros and cons in detail later.
  4. Native App development using JavaScript runtime: Mobile app is created in JavaScript and runs in JavaScript Virtual Machine. Some of the examples are Appcelerator Titanium, Facebook react Native, Telerik NativeScript. Both Appcelerator Titanium and Facebook React Native use API wrapper to do the communication between App Code and Native Layer. NativeScript doesn’t use any wrapper and its open source as well. Will focus on only NativeScript in this model.

Focus of this article is last 2 ways of creating mobile apps. Both model of app creation requires a developer with good JavaScript knowledge i.e. the better you know how JavaScript works/behave the better app you can create on performance level).

Let’s first understand the technical aspect of both Hybrid and Native App development using JavaScript:

Hybrid App development or Web Based app development using JavaScript:

  • User interface is created and styled through HTML5 and CSS3 and JavaScript
  • An instance of platform-specific browser (Web View) is embedded within the application and is used to visualize the HTML and CSS
  • Cordova (Phone gap) provides a “native bridge” to access the native resources on the device.
  • Cordova plugins are used to provide access to some of the native APIs in the underlying platform, most of the dynamic functionality or plugin code is handled using JavaScript.
  • Resulting applications are hybrid meaning that they are neither truly native mobile application (as all layout rendering is done via Web views instead of platform’s native UI framework) nor purely Web-based (as they are not just web-apps, but packaged as apps for distribution and have access to native device APIs).
  • User Input is handled by the embedded browser instance and delegated further as JavaScript events to the currently focused DOM element.
    • WebView :-
    • WebView is a chromeless browser which is configured to run in full screen mode.
    • All hybrid mobile app frameworks rely on standard implementation of WebViews for the app presentation tier.
    • There are different types of WebViews available depending on the framework we choose.
    • The System WebView is a native component provided by the operating system to be able to load web content

NativeScript App development using JavaScript:  NativeScript is unique because it allows you to access the native elements of the host platform via JavaScript. It allows access to full operating system libraries and third-party libraries from JavaScript code.

  • User interface is created using XML based layout language and styled through stripped down version of CSS3.
  • All business logic such as data models, view models/controllers etc. can be written in JavaScript.
  • NativeScript has set of libraries that enables calling APIs in the Android and iOS framework using JavaScript code.
  • It’s built upon several major parts including a JavaScript virtual machine to interpret and execute the JavaScript code and a “bridge” module is included to translate the calls to underlying platform specific APIS or marshaling service that handles data transfer to/from JavaScript to/from native layer.
  • Virtual machine used on Android is Google’s V8 and on iOS 7.0+ is WebKit’s JavaScriptCore.

NativeScript Apps vs Hybrid Apps:

  • Major difference between the two types of app creation is UI Stack and User Input.
  • UI are instances of the corresponding native widgets/visual – e.g. android.widget.Button on android or UIKit.UIButton on iOS whereas in Hybrid apps UI instances are HTML5 instances which are rendered based upon HTML5 rendering in the WebView supported on particular platform.
  • NativeScript Runtime provides full access to the underlying native APIs such as Camera, Location, File System etc. In Hybrid app development access to native APIs is through Cordova Plugins and HTML5 feature set’s available in the particular WebView in the platform.
  • User Input is handled by native handlers (delegates) declared in JavaScript – e.g. View.OnClickListener or UIControl.addTarget implementation whereas in Hybrid mode it’s all being handled by the WebView.
  • Ease of development if you are more at ease with development for websites using desktop browser with your editor where you make a change in editor and you can see the changes using some livesync or real time update of view in browser, or you can use desktop browser to tweak/make UI changes with dev. tools in your Chrome/Firefox browser. You can do almost all those things if you are creating your app using phonegap.
  • With Nativescript you can debug your app and push the changes using a tns livesync command with –watch mode but the only problem I found was I was not able to make real time UI updates or I was not able to debug the app in browser view using chrome:\\inspect so you have to be bit extra careful with your UI design.
  • If you are familiar with MXML (UI schema used by adobe to create Flex) or XAML a schema used by Microsoft to for creating UI interface for Silverlight apps. You will be at ease with the XML schema Nativescript is using for its UI layer. Or if you have done any development for Android using Java then you are good. In Phonegap you can create your UI layer same way as you would do for your desktop website. The only catch from my existing experience with doing that is the markup schema for desktop web apps is bit complex and you should avoid mapping exact same schema for mobile app it drag down the speed.


  • NativeScript implementation: NativeScript is adding additional layer of abstraction via JavaScript code interpretation and data marshaling. So it will definitely not going to be as fast as apps created in pure Native code directly. But it’s definitely faster than hybrid apps.
  • Hybrid implementation:
    • Use of web-based technologies leads some Apache Cordova applications to run slower than native applications with similar functionality.

Adobe Systems warns that application maybe rejected by Apple for being too slow or not feeling ‘native’ enough. This can be issue for some Apache Cordova Applications.

Business aspect of creating mobile apps using either of model: For business (especially small organizations) the call is always if more developers are available to work in particular technology or not. In this case both models (NativeScript or Hybrid model) requires good knowledge of JavaScript.

If you have some good UI developers who can create nice optimized mobile UIs in HTML/CSS3 for you then you have good combination of team which can create good looking apps for you using Apache Cordova/Hybrid model of mobile app development as the learning curve in moving from desktop website development to mobile app development is not that steep. Same team can create mobile apps using Apache Cordova framework but focus has to be on optimized UIs as my experience with Cordova apps suggest that most of the time it’s the bloated UIs which drags the performance of the app and make it unusable in most of the cases.

In case of NativeScript as the UI is not HTML5 based and you can’t use all the CSS3 functionalities your JavaScript developers has to be little more experienced with UI stuff as well so that they can use XML based UI and manage it through JavaScript. Learning curve here is bit high and your normal web development team can’t be put straight for mobile app development in NativeScript. Even if you are good with JavaScript as a Freelance consultant you have to learn a bit of XML based UI designing with all the stripped down CSS3 styling you can use, here if you are OLD Flex/Sliverlight developer or you have done some of mobile app development using XML UI creation for Android/iOS with native app development you are good to go for NativeScript mobile app development as well.

In this article I tried to cover the two mobile app development models and I tried to share my experience on how we should approach different model, it can vary from team to team or organization to organization. The idea is to know it better before you pick any tech stack  for development. All the Best with your mobile app development.

Nativescript app with Angular2: Listing phone contacts

This is a phone contacts listing app created using Nativescript and Angular. The concept for the app is almost similar to the other app I have created using PhoneGap where I have used Phonegap/Cordova plugins to fetch phone contacts and list them, you can get that project from github. In this app I am using Nativescript plugin to fetch phone contacts and list them. (currently it doesn’t have search functionality as the one I have in PhoneGap app).

If you are new to Nativescript I would suggest you first go through a nicely written tutorial post by TJ VanToll and linked repo on github. This tutorial has covered lot’s of basics for both Anuglar2 and Nativescript developers.

I will be sharing my learning during creation of this app, you can find the repository on github

I will not walk through the project step by step but I will list some of the lessons I have learned in this project and how I was able to resolve the issues I came across.

  • Naming convention is important: When you are creating your templates in xml/html (you can name the template file as html as most of the editors will give you better help) make sure you either use CamleCase or kebab-case styling to name the tags for e.g. either <StackLayout> or <stack-layout> not like <stacklayout> or <textfield> I was using all small case with any hyphen and for some reason my ngModel was not working. I tried to raise this issue at multiple places but couldn’t find any answer to it. But I see in one of the tutorial its updated now that you should be using either of the 2 naming conventions to name your tags in xml/html template markup nothing else or you might be wasting lot of time like I did.
  • Permission model for Android SDK 23: if you are developing app using android SDK 23 and you are using device features for which you need user permission. You have to initiate permission dialog from within the app when you will be initiating the call for that functionality and only on it’s successful acceptance you can do that activity on phone. To achieve this functionality in your nativescript app you have to take help of nativescript-permission plugin created by Nathan a very senior developer and very approachable. He helped me on Nativescript slack channel to quickly set this plugin up for Typescript as it’s originally created and setup for JavaScript only, and I was having problem in using it my Angular/Typescript Nativescript app.
    other than what’s listed in plugin usage on npmjs page you have to declare android variable in your typescript project to use it. Something like

    declare var android:any;
  • Use fat arrow within your promises: when you will use .then() in your promise you can’t use “this” access variables declared at class level or functional level because of scoping issue. Your best bet is to use fat arrow “=>” and then use this to access local variable declared at class or outer functional level. It will save lot of headache on figuring out how to return value to variable outside or how to access variable inside .then().
  • Debugging Nativescript app: you can debug your nativescript app using visual studio code integration with debug option, you have to install a Nativescript extension for visual studio code and go through the article on how to debug Nativescript app. But I found it hard to make design tweaks in debug mode as I can do in phonegap/cordova apps in Google chrome using chrome://inspect/#devices but I think that’s the trade of you have to do when you want to go to native level.
  • Useful Nativescript commands: The one I liked most is “tns livesync –watch” it just don’t compile whole code again on every save, it just push the differential on every save. Only issue is sometimes you will suddenly see whole set of error on your screen not because of error in code, but for reasons other then change in code, like the view on the particular page is getting derived from some value from previous screen and when it refresh the view it doesn’t have the value.
  • Nativescript Contacts plugin: For fetching contacts from my android device in this nativescript app I am using nativescript – contacts.
  • As is the case with Permission plugin this plugin also returns promise. all the possible usage of the plugin are explained in detail with proper example. I am just using getAllContacts API.
  • Other good thing I liked in this plugin detail is that author has given a complete data structure  returned by the API. So you can pick what you need.
  • If you are new/beginner to Nativescript and Angular2 development I will suggest you should use use the Nativescript tutorial chatper 1. This chapter covers all the aspect of installing Nativescript, and you can use Nativescript CLI to create project from command line and use –ng to set it up with angular and typescript e.g.
    tns create my-app-name –ng 
  • I have setup contact listing app using default project created with Nativescript CLI as a base. It saves you from lot’s of other details of setting up and preparing your project to be used with npm modules and compilation of native apk file.
  • The idea of this project was that someone who wants to list all contacts or do some manipulation with contacts on phone where the app is install can be done.

I hope you find this post and project useful. Have fun coding apps in Nativescript to get maximum performance without coding a single piece of line in Java or Objective C.


Offshore developers and Onshore Clients – Part 2

As explained in Part 1 of this topic Onshore Clients are all those project owners or project managers who are working in developed countries handling projects done by thee Offshore (remote) developers, who are mostly operating from developing countries.

What I will try to address here is what you should keep in mind while dealing with developers from that part of world. What all criteria’s you should have in mind while awarding a contract to someone remotely operating in developing countries.

For Onshore Clients:

  • As a client you have to set clear expectations and not deviate too much from those commitments.
  • If you are deviating from your previous agreed deliverable (for any reason) it’s always best to provision for that in your budget and timelines. Because developer most of the time may not be saying no to you, out of fear of loosing you as a client or (some other personal reasons), and in order to complete your extra requirements he will compromise on quality and may not feel the same level of commitments to your project as he felt when he started on it.
  • Sometimes when you communicate with developers offshore on messenger’s or Skype audio/video, it’s best to record the commitments and communicate that in email as well, as sometimes what you have communicated verbally may not be translated same in developer’s language (especially if English is not his first language).
  • If you are getting your project done in developing countries because of cost advantages please keep in mind the work culture/problems those countries have as a part of their infrastructure (electricity, internet, turnaround time in case of natural calamities like flood or sever storm causing electricity breakdown).
  • Always be proactive with your communication through email and set clear dates for deliverable, as sometimes if you just say do this task and you expect to hear result in next call but the developer assumes that they haven’t been given any timeline so they will wait until you ask him for deliverable.
  • Try to get a fair idea of how much work your project needs in terms of hours/weeks/months, It’s best if someone locally can give you good time estimate on time/efforts, price can be varied based upon where you are getting it done, but never expect same project to be done on same price in all the countries/or from all consultant.
  • When you post your projects on websites where you ask developers to bid, most of the time in order to outbid other bidders developers make bids too attractive to deliver/believe (I remember one incident where I saw bidding’s for a project, which was suppose to be a replica of a project, which I had managed in one of my company in the past and we had developed that project for our client in 5 months with 4-6 developers + 2 testers working over time and 2-3 analyst/tester from client side,  I saw bids by developers as low as $500 with time of 1 month) I am still not sure if anyone can make that project in 1 month even if you put 10 developers, even if you had to rip of the existing project from the internet.
  • Just beware of these hard to believe commitments.

In the end it’s all about how well you are communicating with the person/team on the other side, and how well you understand his/her work environment limitations and work culture and how quickly or best you adapt to get best out of your offshore team. Communication is the key, as even if you have the best developers in your development team and if the things are not communicated properly to them they wont be able to deliver as per your expectations.


Offshore developers and Onshore Clients – Part 1

Just to clarify here by Offshore Developer I mean all those developers who are working in developing countries on less money and with lesser infrastructure compared to what developed counties has and Onshore Clients are all those project owners or project managers who are working in developed countries handling projects done by these Offshore developers.

Offshore developer: “my client keeps on changing his requirement”, “as soon as I show him something he starts asking for different variation with same budget”, “requirements document doesn’t list the requirement but he says it was obvious”, “too much of work/expectation for too less money and too short time”.

Onshore client: “Hard to track developers sometimes they suddenly disappear for days”, “can’t understand what they are saying sometimes”,  “not good at communication” (especially in English), “promise too much but don’t deliver on their promise”, “internet/electricity(connectivity) problems are too frequent”

These are the most heard complaints, or focus of conversation when you are talking to a person who is working in one of the above mentioned roles. The quotes listed above are the things I have heard from time to time from different peoples based upon the roles they are playing.

It’s not a technical post, it’s for offshore/freelance developers and onsite clients/managers on how to address the complaints. As I have been part of both sides of these roles where I have worked as a freelance consultant or as an Offshore developer and now on other side of fence working in companies who has to deal with offshore developers or on freelance project on sidelines.

Just to keep it short I will break this post in 2 parts and in first part I will deal with Offshore developers/freelancers/consultants.

For Offshore Developer/Freelancers/Consultants:

  • If you are trying to be a consultant for someone, you better be good at what you show in your profile.
  • Try to set clear expectation to your client. Make sure you always communicate your commitments in writing.
  • Never promise anything verbally as there can be a miscommunication in terms of what you are trying to say and what the other person is saying.
  • Be prompt with your communication, at least try to send over daily status on the progress you are making on the project.
  • Always keep scope for days’ off during project development.
  • If you are working on a project as a side project after your regular day job. Make it clear to your client and don’t assume you will always be able to spend full weekend days for client project (especially if you are married you might have other family commitments).
  • You might be able to spend 2-4hrs/day on client project after your regular job but it can’t be committed as well as it’s highly possible you have sudden requirement at your regular job and that’s your primary responsibility.
  • Most of the time you will be over-committing and under delivering to client, try to avoid that.
  • Don’t pick a project in a technology you have never worked in before, just hoping that you will find help from your friend or from internet and deliver the project quickly (every project has it’s own variations).
  • The other problem with picking up project in technology you are not good at is, you have to spend too much time in figuring out things either with the help from friends or from internet and you will spend more time in figuring out things then doing/implementing those. You wont be able to justify your hours/time spent on project vs. things you have completed to your client as client is expecting you to be good at what you have have committed to him.
  • If it’s a fixed price project you will make less money in the end even if you have completed it, as you had spent more time compared to time you quoted for client.
  • If you are working on hourly based rates with client make it clear upfront that particular piece of module/project needs you to investigate things. Most of the clients know that as a developer you have to do those things but when he is clear upfront and not kept in dark he is always happy to adjust his timelines and you as a developer don’t have to lie to him on deliverable or extra time it is taking for you to deliver on things.
  • Developing countries: Most of us (not all) developers are coming from countries like India, Pakistan, Bangladesh etc. We have some infrastructural problems which are totally out of our controls like – electricity, internet connectivity issue or sudden family commitments.
  • If you are working as a freelance/consultant try to have a backup plan for all these issues if you can, like having extra electricity backup, working from internet cafe’s, or have extra internet connection, or go to some broadband internet cafe if you need to do high bandwidth work in between. Always keep a backup days in your commitments just for those days where you suddenly has to take off from the project to fulfill your family commitments, but make sure you communicate clearly to your client upfront. (it’s little dicey but it’s good to have a good friend who can back you up during those times in these assignments).

Other things which I have noticed and it’s for all my younger colleagues whether you are working in all those big MNCs or small companies or as a freelance consultant, focus on your English comprehension if you can’t speak good English it’s not a big issues at lest try to be more pro-active in emailing or documenting the stuff and communicating in writing regularly. Try not to be afraid to speak in English if given a chance, grammar is not important while you are talking to someone in English but the information (content) you are trying to convey is more important, and higher you go up or more years you accumulate on your CV you better start getting good at communication (especially English) as you will be spending less time on coding and more time on managing clients and developers who might not be good at your local language and English might be the only one common language among your team and client. Write better and clear code as that reflects your personality to peoples who deals with your code. And it also shows how mature you are as a coder. Just don’t copy paste code from help websites, at least try to understand first what you are writing because if you had to explain the code to someone or debug it for any error you wont be able to do so if you don’t know what you have coded. Improve your coding and communication skills over the time. And try to spend some time on forums or read blogs especially in your core technical domain. Most of the time answering questions or helping other developers on forums helps you in getting free marketing/publicity and that helps, if you wants to be a consultant or freelancer.

There are lot of other things which can be written for all those who wants to make their mark in this software development industry as a Software Developer/Consultant or Freelancer. But I will end this post saying “Stay Focused” and “be clear” and “write better code” and All the best with all your projects you will be handling.

In Part 2 I will try to cover the onsite developer or clients and things to keep in mind while dealing with developers working in developing countries.


Angular2: 5min quickstart project setup with Visual Studio 2015

This post is a beginner level post for all those users who does their development mainly for enterprise applications and loves to code in Visual Studio and wants to do Angular2 development using Visual Studio Currently Visual Studio doesn’t have any Angular2 template out of the box. So we will be using a HTML Application Template with Typescript.

There are many nice lite editors (Sublime/Visual Studio Code/Atom/Bracket) available in market for doing all front-end development and you can install additional plugins to ease your development and help in quick coding. Coding editor preference is more of your comfort level and ease of use with the features, which editors provides by default/or with add on plugins.

Microsoft has started releasing their Visual Studio enterprise editor as a community editor with some limited features for last few years, for details you can visit Microsoft website. To download the free community edition, you have to register it with your live/hotmail email account. (That’s what I had to do).

Editors like Web Storm, or Visual Studio  are great editor for creating and managing enterprise apps compared to lighter JavaScript/HTML5 editors cited above, because of additional enterprise management tool these editors provide out of the box for your day to day development.

Angular2 is a framework/platform to create enterprise application not a simple website with 4-5 pages, because if you want to do that you will be better off avoiding it, as carrying over so much payload for that small work is not recommended for a good programmers

Create a new Angular Project: We will be using angular.io 5 min quick start sample project to show how to setup Angular2 project in it. You can download the whole project from github. To start creating Angular2 project in Visual studio we will use a HTML Application with Typescript template: typescript-template as it doesn’t have default template to setup Angular2 project yet.

Next go to 5 min quick start sample project page and start following the steps listed in the tutorial. Create tsconfig.json, typings.json & package.json file at root of project and copy paste the code from the page and copy paste the code from the page.

Install modules automatically: As soon as you will save the package.json file Visual studio will start downloading all the node modules into node_modules folder. package_jsonYou can varify that from output tab in visual studio or you can visit the file explorer and see the files and folders there.

Add all ts files, html files and css files as instructed. You can remove app.ts & app.css from folder as that’s not part of this quick start sample. If you don’t see anything listed in Task Runner explorer task_explorertab click refresh icon (marked in orange rectangle image above) in that it will automatically update the Task runner explorer tab with all available npm commands from package.json file. You can right click – install and click Run to make sure all the npm modules and typings files are installed for the project.

Run project from editor: Double click start or right click start and then click Run command from it. It will launch the angular2 sample app in default associated browser.start_project_from_vs

It will be linked with BrowserSync so any update you will make in app.component.ts file will automatically refresh the browser and you can view all the task runner in Task Runner explorer at the same time.

Real-time error listing: You can view the errors in error list tab as soon as you will make any kind of error in your ts/css/html file and that too without you saving the file.error_list

By clicking on a variable definition with ctrl+click when it turned into hyperlink it will display the definition of that variable there itself for quick help with file name appearing in window as where that definition is coming fromvariable_definition.

Hide files not needed in development: One other quick feature which I liked is when I create a project with Typscript template it doesn’t show me Javascript files or other node_modules folder automatically, you don’t have to do anything extra.


files/folders listed in brown rectangle will show/hide if you click on icon highlighted with orange rectangle at top of above image.

There are many other additional features which Visual Studio editor provides out of the box like checking code coverage and other great features which helps you in validating your code or it’s efficiency which are beyond the scope of this article, but they are definitely nice features to help in small or big projects.

You can download the whole project from github.


Phonegap/Cordova app– Reading and Listing phone contacts

This blog post is for explaining how we can list all the phone contacts in our android phonegap app. For details regarding phonegap phone-contacts API you can refer to npmjs page of plugin which list almost all the API’s you can use to extract out information from the device on which app is installed. I will try to cover some of the points which I wasn’t able to figure out from their help docs and had to debug my app in chrome using emulator.

In this sample app the targeted max Android SDK version is 23 and Cordova version to compile app is 6.1.1. With SDK version 23 and above it seems you have to prompt device user every time you want to fetch some information from his device. (If I will get some more information on that I will post how we can achieve that.)

Sample app for this app can be found here https://github.com/lakhanpalv/phone-contact-app. Assumption in this post are that you are already aware how to configure phonegap/Cordova app on windows machine with everything setup like android-sdk and Java sdk. (it’s possible the same code will work on iOS devices but never tried). Some of the 3rd party APIs I have used in my sample app which are not required for fetching contacts from android devices, such as Handlebar and jQuery. They are purely used for display and ease of manipulating markup or JavaScript objects you can do that with pure plain JavaScript.

Here are some learning:  You have to wait for deviceReady event being fired by app on launch and it is being handled by Cordova API. As I am using sample-phonegap app to start my project index.js file which comes with sample project already has that thing handled. You should initialize your application code only after deviceReady event is fired successfully. As there can be some plugins, and phonegap APIs which you want to use in your app code and if you don’t initialize your code after deviceReady event it’s possible that you will see some error and spend hours to figure out why it’s happening. Below is the listing code from index.js and I am initializing my application code in last line of function.

receivedEvent: function(id) {
        var parentElement = document.getElementById('get-phone-contacts');
        //var listeningElement = parentElement.querySelector('.listening');
        //var receivedElement = parentElement.querySelector('.received');

        //listeningElement.setAttribute('style', 'display:none;');
        parentElement.setAttribute('style', 'display:block;');

        console.log('Received Event: ' + id);
        MySampleApp.init(window, document, window.jQuery, Handlebars);


code snippet of my sample application modular code. To make sure it doesn’t bleed any variable or method to global scope, and also this way it’s easier to initialize all of my application code when I want to, not when it get’s loaded in app in sequence.

var MySampleApp = {
    init: function (window, document, $, Handlebars) {


Coming to real problem:

Phone contacts are stored under navigator object and you can supply some options parameters using ContactFindOptions() and supplying filter and other options as for example if you don’t want to fetch contacts which doesn’t have any number stored against them you can supply .hasPhoneNumber=true;(it seems to work only in Android, find detailed here) it will filter only contacts with number. You can limit extracted information for a contact by supplying information you you want to pick from contact for a user like in below snippet I am just trying to extract displayname, phonenumbers and emails of contact. You have to supply success callback and error callback methods in .find() method along with filter and options object.

var options = new ContactFindOptions();
      options.filter = "";
      options.multiple = true;
      //options.hasPhoneNumber = true;
      var filter = ["displayName", "phoneNumbers", "emails"];
      navigator.contacts.find(filter, onContactsFetchSuccess, onContactsFetchError, options);

Below is the code listing of success callback method, will explain it below code snippet:

var onContactsFetchSuccess = function(contacts) {
            for (var i = 0; i < contacts.length; i++) {
                if(contacts[i].displayName !== null){
                    if(contacts[i].phoneNumbers !== null){
                        for(var j=0; j<contacts[i].phoneNumbers.length;j++){
                            //select number only if it's mobile number
                            if(contacts[i].phoneNumbers[j].type === 'mobile'){
                                if(contacts[i].emails !== null){
                                    for(var k=0; k < contacts[i].emails.length; k++){
                                        phoneContactsData.push({'name' : contacts[i].displayName, 'number': contacts[i].phoneNumbers[j].value, 'email':contacts[i].emails[k].value});
                                } else {
                                    phoneContactsData.push({'name' : contacts[i].displayName, 'number': contacts[i].phoneNumbers[j].value});
                        if(contacts[i].emails !== null){
                            for(var k=0; k < contacts[i].emails.length; k++){
                                phoneContactsData.push({'name' : contacts[i].displayName, 'number': '', 'email':contacts[i].emails[k].value});
var onContactsFetchSuccess = function(contacts) {
            for (var i = 0; i < contacts.length; i++) {
                if(contacts[i].displayName !== null){
                    if(contacts[i].phoneNumbers !== null){
                        for(var j=0; j<contacts[i].phoneNumbers.length;j++){
                            //select number only if it's mobile number
                            if(contacts[i].phoneNumbers[j].type === 'mobile'){
                                if(contacts[i].emails !== null){
                                    for(var k=0; k < contacts[i].emails.length; k++){
                                        phoneContactsData.push({'name' : contacts[i].displayName, 'number': contacts[i].phoneNumbers[j].value, 'email':contacts[i].emails[k].value});
                                } else {
                                    phoneContactsData.push({'name' : contacts[i].displayName, 'number': contacts[i].phoneNumbers[j].value});
                        if(contacts[i].emails !== null){
                            for(var k=0; k < contacts[i].emails.length; k++){
                                phoneContactsData.push({'name' : contacts[i].displayName, 'number': '', 'email':contacts[i].emails[k].value});


Phone contacts and emails are stored as an array of objects in returned object, when you call contacts.find().

In my use case I am interested in getting all contacts who has either their emailid or mobile phone number and name as must.  Name of user is stored as “displayName” so I have started filtering the looped object at top with if name exist and then moved to phone number which is stored as “phoneNumbers” array of phone number objects. phone number object has “type” attribute which store information if number is ‘mobile’ or not. Similarly “emails” are also stored as array of email objects. I just restricted my information to one email so stopping my loop as soon as I get first email. Just ignore the phoneContactsData.push() line if you are not interested in storing and displaying the information as it’s specific to my use case i.e. not related to contacts extraction from device.

some of other lessons learned during this sample project creation and not related to phone contacts information extraction:

  • I was trying to limit plugin inclusion in config.xml for this sample project only to phone-contacts, but found some interesting conversation on the phonegap Google group (Removing unneeded features/plugins doesn’t have any effect on app performance https://groups.google.com/forum/?fromgroups=#!topic/phonegap/VBsWphi8ydA) not sure how authentic this information is though.
  • Create your application JavaScript code as a separate modular code so that you can initialize it when you receive onDeviceReady event and doesn’t bleed your code to global scope as well at the same time.
  • Best way to debug your phonegap/Cordova is to use android emulator and launch chrome://inspect/#devices in chrome browser where your launched emulator app will appear as soon as you compile your project and run it in emulator.
  • Using above way you can debug through your application code by stepping through each line and use console.log or all other features which you will normally use with your web app in chrome way better then weinre in which you simply can just put console.log() message to trace out the outputs at different steps, can’t really step through your code with that.

I hope this post is of some help in if not for phone contact listing, there are some other options I have explored in the code listed at github. Where I have tried to display the contacts as you can see in your Contacts options in phone with filter contact information option. I have used Handlebar to loop through my contacts object and then I have used jQuery/JavaScript to filter contacts and update contacts display accordingly.


Learning Angular2 online – my experience…

To start with I would like to say that I am fairly new to Angular framework but knows JavaScript for a while now and knows a bit of JavaScript (SPA) frameworks as well,

I have started learning Angular2 back in December 2015, started with going through quite a few blogs, most of these blogs had same TodoMVC example with bit different design examples and most of them were written by developers who were already working with previous version  of Angular i.e. AngularJS and most of the time they skipped the basic explanations.
With Angular2 I realized that sometimes it would be hard for even an AngularJS developer to grasp few things which are totally new in Angular2. For example the concept of Annotation, no Scope and Component based architecture. No more MV* pattern, concept of web component is used.

I watched quite a few online videos, introducing Angular2 in the best possible way you can introduce some of the concept within 30min to 1hr long live presentations.

1 hr lunch session/webinar

Thanks for rangle.io they conducted quite a few sessions during January which I attended.

  • 1 hour lunch time sessions
  • Gave you the links to the recordings of sessions which you can watch again later.
  • Some of these sessions were covered from the standpoint of how you can jump to or convert your existing projects to Angular2.
  • They wrote a wonderful Angular 2 Training book available for free.
  • They still do lunch time 1 hr sessions from time to time. you can check on their website.

And then in last 2 months I attended 2 different types of online courses/events in Angular2 with both of them covering almost all the topics with bonus topics of Typescript and Packaging and unit testing.

1 to 2 days workshops/live event

Thanks to a free tickets to attend live event online from https://frontendmasters.com. It was great 2 day event from 9-5 and luckily I was off from office for whole week. So I was able to attend this live event online from home un-interrupted. Here is my assessment of attending the event:

  • Great introduction to almost all the topics which you need to know to work in Angular2. Presenter (Lukas Ruebbelke) were great, very knowledgeable.
  • They covered almost everything you can think of in straight 2 days with one or two bonus topics covered on 3rd day but it wasn’t available for online view.
  • It was a too much to consume in 2 days on the trot with no break(except for lunch break or 5/10min break between sessions) in between to retrospect upon stuff you are learning.
  • I would say It was great session to all the folks who had intermediate to advance knowledge of JavaScript and MV* frameworks. Presenters did explain every topic nicely but if you are new to some of the stuff it sometimes take time to really make a mental picture of concept and how it will work in the whole context of web app development.
  • Presenters did provide with github repository url and plunker url for all the solutions they covered in the event so for all developers who were not that good with npm stuff they had the option to go and get final solution from Github and try it later.
  • They also gave url to plunker for all the solutions/topics the presented in event so that if you were not able to grasp something you can go later and pick up the stuff from there.
  • For all registered paid members all the recorded videos of event were available for later dates.

6 weeks online course

In Feb 2016, I enrolled for a 6 week course with http://faratasystems.com/upcoming-training/ . It was done by Yakov and Anton they have written a book on angular 2 on meap

  • It was a great 6 week course with classes every Sunday morning for 3hours and 1hour every Saturday you go over the past week lesson project assignment.
  • All the topics of Angular2 were covered with detailed Introduction to the usage of Typescript and Webpack bundling and Unit testing in Angular2.
  • One of the best thing I liked was no prior knowledge of AngularJS was required, so you were explained everything as if you don’t know how things were working earlier in Angular and how it will work now. But you definitely needs to know how JavaScript works and what’s SPA(Single Page Application) architecture.
  • You had a full week within every new topic/lesson to go over what you have covered in the last topic and you can always discuss with presenter about the topic during project assignment go over on next Saturday.
  • The pace of course was slow if you are not new to some of advance concepts of JavaScript, so I would say it was best course for beginners with Angular2 with some JavaScript knowledge.
  • If you are coming from Java Enterprise background(server side developers) and trying to get up to speed with these SPA architecture of Angular2 in Front end space this course is best as you are not expected to know a lot of front end technologies during this course.

Some of the interesting blogs with better Angular2 insight:

All the best for all the developers who are looking forward to working with Angular2 and I hope some of the information provided above will be of some help to folks looking for some information to learn Angular2.