#100DaysOfCode Day 25: Examining Options for Mobile App Development

I’m in the Hong Kong University full stack web development specialization that has consumed the majority of my free time since September.  It’s a new specialization, and I’m a part of the first cohort.  Because of this, I get a lot of questions about the specialization on Quora about my experience.  Since I count the coding I do for the course towards the #100DaysOfCode challenge, I want to spend the next couple of days discussing what I’m learning and building.  The purpose for doing so will be two-fold: it will provide commentary for those seeking a detailed review of the course from me, and I’ll get to  share content, insight, and sample code for my challenge readers.

Just to give you some background, I’m now in course 4 of the specialization, which focuses on multi-platform mobile development.  For the course, we are taking the web app we build in course 3 and making it into a mobile app for iOS and Android deployment. You can read about the web app I built in course 3 here if you’re interested.  We use two tools in the course: the Ionic framework and Cordova.  I will write more about using these two tools specifically in future posts, but today I want to just provide an intro on approaches in mobile app development, using my course notes to guide me.

Mobile Web vs. Mobile (Native) Apps

There are two ways developers have built web apps for mobile: (1) by developing a full client-side mobile app and installing on mobile devices, or (2) by developing a web app that allows users to access it via a mobile device using web standards.  From what I’ve seen, the second approach has been more widely used among front-end developers, but mobile web apps run slower on phones because the code is not native. Knowing this, we discussed all approaches for developing mobile apps in the course on the first day which I summarized below.

App Implementation Approaches

Native Apps: With mobile native apps, developers would need platform specific skills in order to create a functional app for iOS or Android. Think Objective-C, Xcode, or Swift for iOS, or Java, Eclipse and XML for Android.  Using native device code allows for the highest performance of the app and gives developers full access to device capabilities.  This is great for developers who know those select languages. Others not willing to learn have to choose another approach.

Mobile Web Apps: A mobile web app is basically a responsive web site hosted in the mobile browser.  Some of you may remember when the “mobile-first” approach became popular, and when it was a best practice for developers to run scripts in the site <head> to detect what device a user was browsing from.  The user may be taken to a separate site if browsing a web app from their phone that is designed to be mobile-specific, such as m.twitter.com or m.cnn.com.  Emphasis on responsiveness is important for those who take this approach and just stick to web apps.  HTML5 apps that utilize jQuery mobile also fit into this category, providing developers with a way to build Javascript-based mobile apps.  Like I said earlier, this approach is slower, but works.

Hybrid Apps: These type of apps combine embedded webview (browser) with partial native code implementation.  With this approach, HTML5 apps are embedded inside a native wrapper so to speak.  Since this is the approach we’re using in the course, this will be the one I focus on for the rest of this post.

Hybrid Mobile App Development

How does one build a hybrid mobile app? First, examine both of your options: (1) building an HTML5 app in a native wrapper, or (2) building an app in one language and compiling into native code.  For both options, there are tools to use.  Cordova (formerly known as PhoneGap) and Trigger are used as native wrappers, and Xamarin, Titanium, and FireMonkey are compilers. The native wrapper, or mobile framework we are building with in the course is Cordova, which targets HTML5 content, exports JavaScript, works well with Ionic,  and allows for app store distribution.

architecture

photocredit: codecentric.de

According to Prof. Muppala (the HKU instructor for the course), the hybrid approach is best for content-driven apps such as those that focus on business enterprise, productivity, or media.  This is because they don’t rely so much on accessing native capabilities.  Our app is for a restaurant which will allow users to login, make reservations, see special promotions for the week, submit reviews of each dish, and add particular dishes to a list of favorites.  It should be perfect for Ionic and Cordova conversion.

In the post for Day 26, I will dive more into using Ionic and how to install dependencies for getting your app started.

*** Day 25 Recap ***

  1. Finished first module of the course Multiplatform Mobile App Development with Web Technologies
  2. Finished first week of London U’s MOOC on web design, see code in the #100DaysOfCode github repo here

 

 

Advertisements

2 thoughts on “#100DaysOfCode Day 25: Examining Options for Mobile App Development

    • Gregory, hybrid mobile dev is what I’m learning based on the stack I have the most experience in (MEAN). While I did mention in the post that native apps provide the highest performance, I also mentioned at the beginning that I would be focusing on Ionic and Cordova. Ionic and Cordova are hybrid mobile dev tools specifically. This post was not written to persuade, just to provide an intro on what I’m learning and discussing. As far as the question of “which way to go”, that should be based on the developer, their means, the end goal, and what they want to do. Consumer trends are not discussed on this blog.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s