Ionic 1 or Ionic 2: Anatomy of the decision to upgrade!

Let us take a case where you have an app on production. The app uses some framework and a new version with major architecture changes in the framework is released. Do you upgrade?? Or continue with the old framework version. This problem becomes even more complex if,

  • The product is in early stages, which essentially means there would be a lot of changes, with a very less turn around time.
  • The framework itself at the first place is relatively newer to your team.

This exactly happened with me. Thought, I will share my though process and how I made the decision. It may help somebody perhaps!!

My company excels in Ruby, Ruby on Rails & Angular. Recently one of our esteemed client threw a technical challenge on us. They wanted us to build a MOBILE app using the Ionic framework to complement the Web application we were developing. We had never done this, did not have any in-house expertise, so we were reluctant and pushed back. But, given to the client’s faith and confidence in us, we gave it a thought. Given that we had Angular expertise, this was not completely off the track and took up the challenge.

The team had a learning curve for Ionic-1, but we got the first version out to production (Google play) in 3 months. In next couple of months we had more versions released. But, a product has a life cycle!! We had redesigned the UI.

The catastrophe – by this time Ionic-2 (which uses Angular-2) was released.

It was time to decide whether to continue with Ionic-1 OR switch to Ionic-2. Any one in mind would say UPGRADE (There are many blogs that do a descent comparison). But this wasn’t an easy decision to take –

  • The team had just learnt Ionic-1, now time to learn Ionic-2, huh??
  • The bigger problem, need to first learn Angular-2. It has a completely different architecture & scripting language.
  • The app is on production and in dire need for an UI upgrade.
  • The product had just entered the marked so timing was the key. Any delays could have extreme impact, to the extent that we may lose business and most importantly our reputation.
  • We did not know if all the plugins (e.g. cordova-plugin-sms, razorpay-cordova, cordova-plugin-push etc.) would work out of the box. And if they do whether the way to use would be same or different.
  • The UI was so different that it made no sense to change the existing code but redevelop the UI (Views ONLY). If we live with existing framework, the changes to controllers and models (Angular term) would be negligible. But, this would go haywire if we use Ionic-2/Angular-2 as it would then be completely new architecture of components & providers. Essentially, it would mean more time spent and thus MONEY!!
  • New framework supports Android 4.4 and above.
  • Stable build of Ionic 2 was still not out. The community was hoping it would be out soon but….

The thought process: Key considerations

  • Ionic 1 would soon be deprecated and so the related libraries. Surely wanted to use Ionic 2+Angular 2 for being latest technology and leverage its benefits, like performance, code maintenance etc.
  • Technically we needed to decide which one we should go for and understand the differences between Ionic 1+Angular 1 and Ionic 2+Angular 2 and evaluate technically which is better.
  • Cost benefit analysis –
    • How much time we need to understand Angular 2 and Ionic 2.
      • This involves understanding the new scripting language
      • How to design the UI components.
      • How do the UI components interact with providers and in turn how to call APIs.
      • Critical changes to architecture that will need converting controllers & models to providers.
    • Essentially, how much extra time will be needed, i.e. how much cost of development goes up!
  • Is the team willing & capable of taking the pressure?

The Decision

The entire development team was very excited to learn the new framework and ready to put in the extra efforts to learn and mitigate the risk of running way out of schedule. So I went ahead and did a detailed estimation, figured out that the upgrade would cost us a month and half. Now, it was easy, I had to weigh the cost of these hours against the benefit of getting latest version. The answers was – UPGRADE. The internal decision was made.

But, now comes the most important factor discuss the pros and cons with the client and suggest the approach that is beneficial for the project in long run. Our client is very understanding and he readily approved the additional cost.

The end result – in less than 3 months we are production ready for the Ionic 2 build. Kudos to the efforts of the entire team too!!

Summary

Indeed it was a very good decision to go with Ionic 2.

  • The team now knows Angular 2 and tending to be an expert.
  • The new build is much faster.
  • Last but not the least, the new build is out in estimated time. Well before the New Year, begins.

In the next post, I shall detail out more about the “Things to keep in mind while migrating to Ionic-2”

That’s all folks !!

Posted in Angular | Tagged , | Leave a comment

ProTips: Google calendar one-way sync (from google to application)

Learn with fun

In this blog post, I will walk you through my experience of google calendar one-way sync (from google to my application) and will tell you some key points which I understood about google calendar recurring events and normal events.

Google documentation for this is very nice but you need to experiment a lot to understand this so thought of writing it down.

Recently, I was working on one rails backend API only app which has iOS and angular as frontend. In this project one of the feature was syncing user’s google/salesforce/exchange calendar and send push notification as and when meeting is created or updated and that meeting can be single or recurring. Of course, the  user has given permissions to do so 🙂

The obvious question – why not do it in iOS app?

Yes, but we cannot because the user can login using the web app too. And the…

View original post 1,000 more words

Posted in General | Leave a comment

Create multiple flavors of an Android app using gradle script

Product Flavor is a very powerful feature available in the Android gradle plugin that allows us to manage different “flavors” of an application.

In this blog, we are going to learn, how to design and build a single application with multiple flavors, which can be pushed to the Play Store and deployed on the same device simultaneously.

Android Experience

I’ve been asked sometimes on how to work with different hosts, different icons, or even different package names, deppending on different versions of the same app.

There are lot of reasons to do this and one easy way to go: Product Flavors.

Product Flavor is a very powerful feature available in the Android gradle plugin that allows us to manage different “flavors” of an application.

In this blog, we are going to learn, how to design and build a single application with multiple flavors, which can be pushed to the Play Store and deployed on the same device simultaneously.

You can use the productFlavors closure of your app/build.gradle file to define different variants of your product.

In addition to flavors, there is another very important concept regarding building android apps, called “build types”.

Once the changes have been made on app/build.gradle file, a yellow warning bar will appear across the…

View original post 403 more words

Posted in General | 2 Comments

First hustle at Ruby Rampage

Ruby Rampage Experience! Excellent read.

Innocent Blogging

Ruby Rampage brings about a challenge of building an application within the time span of 48 hours. A challenge that galvanized me into participation. It was my first experience. As the competition approached, my levels of excitement and anxiety kept scaling up.; not because I was creating an application for the first time, but it was the first time I had a tight time constraint to build an entire end-to-end application.

Questions like “What could be built?”, “Who should I team up with?” started storming in my head. Right when I was trying to figure out my ways, one of my colleagues approached me with an opportunity to be the fourth member in their existing group of three “Rampagers”.  There you go – problem-1 solved! Now, it was time to tackle problem-2; What should we develop?

During a gift exchange event in our office, the idea of GIFT GALORE had…

View original post 641 more words

Posted in General | Leave a comment

Sending Multiple Push Notifications Simultaneously with Ionic framework

I am an experienced Web developer mostly working on Ruby on Rails, Mysql, Javascript, AngularJs. I was curious if this knowledge will be enough to help me in developing a native mobile app!

I Googled and found a few frameworks like Ionic, PhoneGap, Kendo UI, etc. that I could play around with. Using these frameworks, I assumed that I will become a “Mobile Developer”. But wait… using these frameworks will make one a Hybrid Mobile App Developer– which suits me just fine! 🙂 Of all the frameworks I was toying around with, I was impressed with Ionic because of good documentation and availability of lots of plugins.

After starting development in Ionic, everything was going smoothly until I hit the requirement to integrate Push notifications! I checked for an Ionic plugin for Push Notifications. I found phonegap-plugin-push which is well documented but has some glitches. I shall discuss these below to save others from the issues I faced.

Associating a page to a notification

Usually, on receiving a mobile notification, tapping on it should open the screen of  the relevant app. Though this is a basic need for any mobile app, the documentation for phonegap-plugin-push plugin did not mention anything about it. Even after spending a few hours reading through various posts and articles, I did not find any solution. I was quite surprised! Finally, I decided to resolve this myself. The web developer in me triggered a thought of trying it the AngularJS way because the requirement was similar to redirect to page.

Maybe, this is the way to do this in Ionic but I haven’t found any documentation on this. If you know of some better way, please educate everyone by commenting on this post. Nevertheless, I am putting down my way in this blog. Lets get started.

In the section below, I am going to explain how to setup push notifications and then how to open the respective page after clicking the Notification.

Installation

$ cordova plugin add phonegap-plugin-push --variable SENDER_ID="XXXXXXX"
  • SENDER_ID is your Project Number in the Google Developer Console. Please check the installation step here.

After installation and configuring the SENDER_ID, we can use PushNotification.init()

Below is my app.js code added in $ionicPlatform.ready(). The method reads the deviceID and sends it to the server every time the application is launched. Now, the registered mobile is ready to received push notifications.

var push = PushNotification.init({
   android: {
   senderID: SENDER_ID,
   forceShow: true
 },
 ios: {
   alert: 'true';,
   badge: 'true';,
   sound: 'true';
 },
 windows: {}
 });

push.on('registration', function(data) {
   console.log(data.registrationId)
   // you need to send this registrationId to server 
   // to store to send push notification and require 
   // for to generate ARN
   // I am storing this Id in $rootScope and sending 
   // to server after login
});

push.on('error', function(e) {
 console.log(e)
 // e.message
})

In push.on(‘notification’, function(data) {}) , we open the relevant page on notification click.

push.on('notification', function(data) {
  switch (data.count) {
    case 'records':
      $state.go('dashboard.index', {file: data.additionalData.file});
      break;
    case 'handouts':
      $state.go('dashboard.records', {activeTabIndex: 1, file: data.additionalData.file});
      break;
    case 'vaccinations':
      $state.go('dashboard.vaccines');
      break;
    default:
      $state.go('dashboard.index');
  }
});

On receiving the notification, push.on(‘notification’, callback) will be executed. In callback you get data parameters. Here  is list of callback parameters.

I am passing data.count value and using that value, we  open the required page.

In above example, check case 2 – I am passing extra parameter that opens the relevant.

Sending Multiple Push Notification Simultaneously On Mobile

In one more scenario, I had to simultaneously send more than one push notification to user. This adds a little more complexity if the user has installed the app on more than one device (mobiles).

The problem is that if more than 1 notification is generated by the server at the same time, then notifications randomly get dropped (Basically not all were delivered to the mobile).

The solution is to pass the data.notId parameter in the values as an integer and for each notification and  it should always be incremented 😉

This may seem trivial for seasoned Ionic developers, but for a newbie it could be a nightmare.

Hope this blog may help to save few hours.

Posted in Javascript, Mobile Development | Tagged , | Leave a comment

Design Patterns used in mina gem

How often do we look inside a Gem to see what’s inside it? Well – there is SO MUCH to learn from the code. Sanjiv digs inside the Mina gem and unearths the various design patterns that it uses.

An excellent article for developers to learn design patterns not from the book but directly from the implementation. It’s always easy to relate to something concrete that just read about it.

narutosanjiv

Mina is popular gem for fast deployment of simple ruby on rails apps. I found these design patterns being used in mina and we can learn how to use them from these real live implementations.

  1. Singleton Design Pattern.
  2. Delegation Pattern

If you are unfamiliar with Design patterns, I strongly recommend reading  Gang Of Four’s Design Pattern book. You can also have a quick wiki reference.

Singleton Design Pattern

In simple terms, Singleton design pattern mean there should be single instance of class, hence mostly used to provided global state of app.

The Singleton module implements the Singleton pattern. We include this module in a class for implementing singleton pattern. Mina gem uses the singleton pattern for storing configuration options to accessed data globally.  Here is the code from `lib/mina/configuration.rb`

1: require 'singleton' 2: module Mina 3: class Configuration 4: include Singleton 5: 6: module DSL 7: def self.included(base) 8: [:set, :fetch, :remove, :set?, :ensure!…

View original post 570 more words

Posted in General | Leave a comment

Pro-tip: Scaling properly with Nginx worker_process and max_pool_size

Sometimes, it the things around us that work but need to be configured properly to scale up. Nginx configuration are just like that.

Shweta talks about her experience with scaling up performance by tweaking the nginx parameters to improve API performance drastically.

Learn with fun

This post talks about worker_process and passenger_max_pool_size options for nginx and how these configurations play an important role for scalability.

Recently our client reported that API performance was  bad and it was taking a few minutes to respond! But, when we tested this API this was quite efficient and was responding in few milliseconds. What was wrong? As the number of users increased, the number of concurrent requests to the server had also increased. Initially, it was only 100’s of request per second coming to a server but now it was about 4 k requests per second and we realised that we had not scaled our server to handle this load.

When this problem arrived I thought of breaking down the problem in steps.

  • First I checked RDS instance. It was using 20%
  • I revisited all queries they were optimized enough. So database was not bottleneck
  • Sent unauthorized request to the server so with less processing…

View original post 578 more words

Posted in General | Leave a comment