Once upon a time, I was part of a software development project that had an Angular-based front-end connected to a Java-based API. The decoupled layer made it possible to reuse the back-end in other spaces, and our Java dev did that cleanly for our mobile Android app ... until that person left the team.

What happened next was, in perfect timing, our boss decided we needed to add on iOS app to our suite – one that would launch alongside a refresh of our Android app. Since everyone remaining on our team was Angular-based, the way to get this done would obviously be to hire a couple of new native app developers, right? Wrong. The task fell to us. And though we all knew how to read and write Java, jumping into an Android development environment when we’ve been working on the front-end for so long seemed like it would have been a potential recipe for spaghetti code. Never the less, the team and I had to buckle down and make these new mobile apps a reality – and in a reasonable timeframe.

Hybrid apps became our solution.

Related: When task automation is worth your time

Hybrid apps in a nutshell

For the uninitiated, a hybrid app is a mobile app that is installed natively on a mobile device. However, rather than being developed specifically for Android or iOS, it's created on a different platform that compiles to be compatible with the native and operating system.

These hybrid apps often come with wrappers that allow them to be installed on the device, but under the hood, it is actually something else. For example, Ionic and React Native are JavaScript-based frameworks that have the ability to create cross-platform native mobile apps without the need to code in Java or Swift.

The idea behind hybrid apps is that they are coded once and deployable across different platforms. It is often used to cut down costs and development time required to create and deploy a feature or change. Parts of this code-once, deploy everywhere setup can also be extended to other platforms such as web and wearables.

While all this sounds great, how does it really stack up in real life? Back to my story...

Getting up and running

In our hybrid app scenario, we already had the Angular modules and a fully functioning suite of APIs. This meant that all we had to do was put our elements into Ionic, our platform of choice.

What did it look like in code?


Structurally, every layer of the Angular app that was available on the web application was good to go in the Ionic app. To do this, we installed and ran Ionic's tooling, which allowed us to tap into Ionic's CLI.

 npm install -g @ionic/cli native-run cordova-res

We then created a blank Ionic Angular app using the --type=angular flag. For example, starting up a hypothetical shopping Ionic app would look something like this:

ionic start shopping --type=angular

This will generate the scaffold files required to get you started. Once this is done, the Angular app sits inside the src folder. This allowed us to leverage our Angular knowledge and continue with the code as per usual.

So rather than building everything up from scratch, we just transposed all the other layers – the component, the factory, and service layers – over and created a new interface that was more geared for a mobile experience.

The good news: With only minimal bits of new Angular code needed to polish things off, we delivered on time.

Hybrid apps: Better than just an in-a-pinch solution?

Now, despite this easy, breezy experience, I'd never go so far as to claim that native app development (and native app developers) don't have their merits. For one, the ease and accessibility of a native mobile app provides additional business opportunities, like simple push notifications. There's also no arguing that performance and design can be best optimized in native Android and iOS app builds.

Like most programming things, your choice in mobile app-building method depends on what you value – or value at the moment. Our team was up against the wall, thus making the prospects of not having to upskill on mobile languages on the fly and being able to reuse a ton of front-end code very attractive. But even for those with more resources and time at their disposal, there are still definite things about the hybrid app approach to love.

The ability to rapidly develop for both Android and iOS by using a hybrid app platform was something that let us easily experiment and create A/B testing campaigns for visuals through external connections and configurations that didn't require any code updates. When data is king, testability is the queen.

But I suppose what was most important for us about the hybrid application setup was that it made it possible for us to work at what we did best – create solutions in Angular. Your mileage may vary!

Discussion

Categories
Share Article

Continue Reading