Taking a Native-Centric Approach to Hybrid Mobile App Development

Over the past year, I have been exploring Cordova/PhoneGap, React Native, and NativeScript for hybrid/cross platform mobile development with JavaScript. As part of this exploration, my key question was, “Can I access the power of the native mobile platform while also leveraging the openness of JavaScript to maximize code reuse across platforms?”.

This led me down the road of a taking what I call a native-centric hybrid approach to developing iOS and Android apps. The philosophy behind this approach is that since Users expect an intimate UX on their devices, Developers should be diligent to get intimate with the platforms they are targeting while also striving to maximize code reuse to reduce overall development costs. The essence then is to mix native code (i.e. iOS, Java) with JavaScript code in the “right way” and strike a balance between UX and code reuse. In general, I discovered that things can get tricky mixing native code and JavaScript code, especially if there is a high degree of interaction between components.

However there are merits to this approach if care and attention is followed. In general,

  • Consider using native tech for app flow, transitions, animations, UI components with rich, complex interaction
  • Consider using HTML/CSS/JS for content rich UI components, services & business logic
  • React Native is a friendlier option for mixing Pure Native and Cross-platform JavaScript than Cordova
  • NativeScript with TypeScript/Angular 2 is an opinionated framework that takes a JavaScript first approach to cross platform mobile development
  • In the end, not sure the added complexity of mixing Cordova and Native is worth it. If you need to mix, React Native is a better option.

Presentation Slides and Demo Code

You can further explore my discoveries through the presentation slides and demos I put together by cloning the publicly accessible GitHub repository located at Native-Centric Hybrid GitHub Repository.

Once you clone the repository, checkout the README file for details on setting up your Macbook to run the demo examples.

I also encourage you to review the slides as context before going through the demo code. For convenience, the most recent slide deck (pdf format) can be found at Presentation Slides – 2016.

Places to Look for Inspiration

About the Author

Torey Lomenda profile.

Torey Lomenda

VP - Solution Delivery

Torey has over 26 years of software development experience.  As VP of Solution Delivery he blends his skills as a solution architect and pragmatic hands-on technologist to deliver working software solutions. He enjoys collaborating with clients and team members to develop enterprise software systems that provide right-fit solutions for the business.

 

As an architect he has expertise working with key stakeholders to drive common understanding leading to structured solutions that meet business, technical, and operational objectives. He follows a practical approach to modeling systems, applications, components, data and the flows between them to frame solutions that are feasible to implement.

 

As a technologist he has a solid foundation in web and mobile, cloud native APIs, and enabling modern platforms with the help of AWS and Kafka technologies. He has led the development of many mission-critical, end-to-end applications using a diverse set of technologies and supports a pragmatic delivery approach leveraging agile methodologies

 

Expertise: iOS and Android development, Web technologies (HTML, CSS, JavaScript, Ionic/Angular, Vue.js), APIs and enterprise applications (Spring Boot, Kotlin, Node.js, SQL, NoSQL).

 

Practical Experience: Cloud infrastructure (AWS, Google) and container orchestration (Docker, Rancher, Kubernetes), messaging (RabbitMQ) and data streaming (Kafka)

 

Interests: Micro-services architecture, cloud-based platforms and services, native & hybrid mobile development

Leave a Reply

Your email address will not be published. Required fields are marked *

Related Blog Posts
Up to Spec: JavaScript Numeric Separators
Let's take a look at the proposal to add Numeric Separators to the JavaScript specification.
Using Conftest to Validate Configuration Files
Conftest is a utility within the Open Policy Agent ecosystem that helps simplify writing validation tests against configuration files. In a previous blog post, I wrote about using the Open Policy Agent utility directly to […]
SwiftGen with Image & Color Asset Catalogs
You might remember back in 2015 when iOS 9 was introduced, and we were finally given a way to manage all of our assets in one place with Asset Catalogs. A few years later, support […]
Tracking Original URL Through Authentication
If you read my other post about refreshing AWS tokens, then you probably have a use case for keeping track of the original requested resource while the user goes through authentication so you can route […]