Mobile Modernization: Architect Playbook

Strategies for Migrating to Mobile

Any mobile modernization effort will consist of two discrete chunks of effort, the mobile apps and associated systems, and mobilizing data through cloud-based APIs and services. In this section, we’ll discuss strategies for your mobile app migration, first via the types of apps available to you, and then architectural considerations for the apps themselves.

Mobile Application Approaches

The first architectural decision you need to make for a modernization effort, whether you’re creating a single mobile app or several, is the development approach you want to take. In particular, there are four major approaches you’ll want to consider:

  • Native Mobile App
  • An app purpose-built for mobile operating systems, using native languages, tools, and distributed as a native, installable package. Has full access to native device APIs and features.

  • Cross-platform Native Mobile App
  • A native mobile app built from a single cross-platform codebase. Has full access to native device APIs and features, while leveraging cross-platform languages (i.e. JavaScript) and tools to support the creation of a single app.

  • Hybrid Mobile App
  • A mobile app built with web technologies, hosted in a native app shell. Hybrid technologies (Cordova, PhoneGap, Ionic) embed full-screen browsers and use plugins to access native device APIs.

  • Mobile Web App
  • A responsive web app tailored to mobile browsers (Safari, Chrome, Firefox). Can leverage native features of these browsers (Geolocation, Local Storage, etc.), but do not have access to native device APIs and features.

  • Progressive Web App (PWA)
  • PWAs are mobile web apps that leverage emerging mobile web standards to look, feel and behave more like native apps. They are an evolution of traditional hybrid and mobile web apps. Currently, PWAs have more support in the Android ecosystem, but coming improvements to Safari on iOS make this an option worth monitoring and evaluating in 2018.

Each choice has pros and cons, and you should make your selection based on your organizational context (like skills), as well as the needs of your app or apps. And while you may wish to standardize on one approach for most or all of your apps, you should also consider allowing one-off cases where the needs of the app are uniquely suited to a non-standard approach.

NativeScript

NativeScript is an open source framework from Progress for creating cross-platform native mobile applications with JavaScript.

This is not hybrid.

NativeScript produces truly native apps, complete with native performance, while enabling complete code reuse across iOS and Android. It does this while still integrating deeply with the technologies and concepts web developers already know: JavaScript/TypeScript, CSS, Angular, Vue, NPM and WebPack.

When used with Angular, a significant portion of an app’s code can even be shared between the native mobile clients and the web.

Learn more

The table below summarizes some key factors to consider when choosing an approach based on your organizational context and the needs of your app

Factor Approaches to consider
I need access to native device features and APIs not available in mobile browsers Native, Cross-Platform Native, Hybrid
Our app needs to function as a desktop web app and a mobile web app from the same deployed location Mobile Web, PWA
I need to be able to quickly deploy updates to my apps without relying on a 3rd party approval process Mobile Web, PWA, Cross-Platform Native†, Hybrid
Our app is targeting a single mobile OS Native, Cross-Platform Native, Hybrid
I need to standardize on an approach that matches the existing JavaScript skills of my web or backend teams Cross-Platform Native, Hybrid, Mobile Web, PWA
I need 60fps performance across devices Native, Cross-Platform Native
I need reliable offline and local device storage Native, Cross-Platform Native, Hybrid
I need to be able to encrypt and decrypt local data on the device Native, Cross-Platform Native, Hybrid
I need maximum access to device APIs and the best app performance Native, Cross-Platform Native

Table 3. Mobile Application Factors

Only true if you chose a cross-platform framework that supports these types of updates. NativeScript, for example, supports this kind of hot patching.

Mobile Application Architecture

Once you’ve determined your mobile app approach, you’ll want to spend some time planning the architecture of the apps. Like traditional enterprise apps, this includes things like source control, branching procedures, coding standards, and other factors. While these are in your purview as an architect, they are out of scope for this article.

That said, mobile apps are architecturally unique in many ways, and introduce new considerations that fall within the application architecture heading, and which you’ll want to consider. Table 4 below summarizes many of these, as well as options for native mobile and cross-platform or web projects:

Note on hybrid

While hybrid has been a popular option for building cross-platform mobile apps, as an approach, it is rapidly fading. With the rise of PWAs and native cross-platform frameworks, there are simply better options for cross-platform mobile apps today. New projects should generally avoid hybrid.

Category Native Cross-Platform Native Mobile Web, PWA
Application patterns and practices MVC, MVP, MVVM. Largely driven by the patterns of vendor development stacks MVVM, often referred to as MV*. Largely driven by best-practices in the broader web community and popular JavaScript frameworks, like Angular, Vue and React.
Device Application Runtime Native Native w/ cross- platform interop (i.e. NativeScript) Mobile Browser
UI Frameworks UIKit (iOS), Material (Android) Access to native UI frameworks via cross- platform interop. Kendo UI, Bootstrap, Foundation, etc.
Application Frameworks iOS, Android Angular, Vue, React (via JavaScript) Polymer, Ionic (PWA)
Code-Sharing Approaches N/A; Not possible at the native code (UI, business logic, etc) level Business logic, networking and state management code can be shared between native mobile and web apps; some frameworks support UI code sharing Business logic, networking, state management and UI components can be shared between web apps/PWAs
Deployment & Management Public or Internal Store Deployment Public or Internal Store Deployment; Exception for JavaScript-based runtimes, which can live update non- native code without full deployments Server-based deployments
Plugin & SDK Management Cocoapods (iOS) and/ or Gradle (Android) npm, Cocoapods and/ or Gradle N/A; Native plugins and SDKs are not available with these approaches; Limited to browser APIs

Table 4. Mobile Application Architecture Considerations

The Bottom Line

Given the considerations above, unless outweighed by other, contextual factors, we suggest a strategy that favors a mix of cross-platform native apps and PWAs, depending on the specific needs of each app. Not only does cross-platform native provide skills reuse that extends to web, cross-platform frameworks like NativeScript make it easy to share code across mobile app platforms (iOS and Android) and with your PWAs/web apps.

Once you’ve determined the approach for your app, and planned for your app architecture, you can turn your attention to the other side of the modernization coin: mobilizing the data your app needs.

mobile-modernization-ebook-patch

Want to learn more about mobility solutions?