How far have cross platform app development approaches come in 2020

Sonika Malloth
Sonikblasts
Published in
4 min readMar 29, 2020

--

Comparison of traditional, hybrid and cross-platform approaches to make iOS and Android versions of an app

What are these different approaches?

Traditional approach

Architecture diagram credits

Traditional apps are built in 2 different languages in completely different ecosystems. iOS app is built in Objective C or Swift languages. Android app is built in Java or Kotlin languages. iOS/Android native code talk to respective platform SDKs to render widgets on screen canvas and access services like Bluetooth, Camera.

To develop iOS and Android versions of a single app in traditional approach you need to know at least 2 languages and 2 different development ecosystems end to end.

Hybrid approach

Architecture diagram credits

In this approach only a responsive web version of the app is developed which is called in webviews of native apps. Webviews render the HTML just like browser canvas and JS talks through a “bridge” when it needs to access native services like Bluetooth or Camera. The bridge does the context switch between JS realm and Native realm. Examples of this approach are PhoneGap, Cordova, Ionic etc.

Cross platform approach — Reactive web frameworks

Architecture diagram credits

Reactive web frameworks like ReactJS and VueJS borrow concepts of reactive programming pattern simplifying the creation of web views. They use JS template syntaxes to define UI components which are converted to pure HTML at browser rendering stage.

Reactive native frameworks like React Native and NativeScript emerged as wrappers over existing web frameworks to extend the power of reactive development to native apps ecosystem. Since the rendering is also done in JS templating syntax, these apps access both platform widgets and services through the bridge.

Cross platform approach — Flutter

Architecture diagram credits

Flutter comes with its own widget library and rendering mechanisms which directly render the screen canvas of native apps without any bridge. The flutter apps connect to native services using an interface written in Dart language. Since DART compiles directly to C++ it is considered to be faster than JS bridge used by other reactive native frameworks.

Comparison of approaches

PFB my findings and comparison for development of a iOS and android versions of an app.

What is the best choice?

The choice of approach depends on what your are trying to achieve and how quickly you are trying to achieve it. The native approach’s support for multi threading and background services makes it best suited for apps which need to use native services extensively and do tasks which are computationally heavy.

Hybrid approach has relatively less development time but can be used for apps whose critical features don’t depend on native services. The UI rendering is done on webviews like a browser which lets the app be compatible with any version of mobile OS. But these apps are oblivious of native support of OS and pick native services based on their availability in the mobile.

Cross platform reactive native framework approaches are classic “write once, use everywhere” model. Frontend developers who work with reactive frameworks like Reactjs or Vuejs can pick up their native versions with very less learning curve. These apps are very performant as long as the passes over the JS bridge are kept to minimum.

Flutter approach is gaining popularity rapidly amongst cross platform frameworks but it requires you to learn a new programming language — Dart. While it promises amazing features and performance, currently it still hasn’t developed as much community support yet. This framework is perfect for apps which needs to have very sleek but elegant visualisations/animations and UI/UX with elaborate layouts and complex layers.

--

--

Sonika Malloth
Sonikblasts

Web full stack developer — freelancer / Trinity Grade 8drummer / amateur poetess. www.sonikblasts.com own publication at @Sonikblasts