How-To Understand Developing Native, Hybrid and Progressive Web Apps

Full swing into 2019, and we see how the world of app development has continued to grow. Web apps are making a huge comeback, with more progressive browsers built to support them.

Mobile apps are still, and will continue to be, a massive part of culture and how we live our day to day. From ride sharing, food delivery, productivity, and gaming - there is no shortage of mobile applications.

This piece will dive into how you can understand the cost of developing between Native, Hybrid and Progressive. Giving you a breakdown into possible costs, features and the unique options offered with each platform.

Naturally, you'll have a ton of questions - as you should! Here are things to keep in mind:

• It's more expensive to go with native code for mobile devices, as they require more time and specs
• A package called React-Native web, which allows you to bring native to the web
• Using React Native depends on the complexity of the app - a developer could write the app once and use it in various ecosystems
• Cost depends on the hourly rate of the agency or developer
• Know the functionality of the app, than build out the feature list
• For a number of apps, using Hybrid for an initial MVP can be a good idea
• If you need to use firmware or hardware functions, save yourself the headache and go Native from the beginning

It's imperative to take into account a few things:

• Progressive Web
• Hybrid
• React-Native & NativeScript
• Native [iOS, Android]
• Cost of all the above

A formula that is used in the industry:

No matter what type of application you're building, we've found the best process is to follow the 7 points below:

1. Defining Requirements, Estimation and Budgeting
2. Designing Wire-frames
3. Setting up the Project
4. Implementing wire-frames for an MVP
5. Iterative improvements
6. Production Deployment
7. More Iteration and tests

Design costs and types of design for your app range from simple icons, to full site wide UX. This can add up, and it's good to know a breakdown of what the most common elements of app design are:

• Icons, Font, Illustrations, Branding, Navigation, Cards or Tiles.

Make sure to layout all of the possible app design principles and patterns you'll want throughout the app, and if need be - spend time with the designer getting it perfect. UX and UI are everything on mobile, and are becoming everything to web.

Some apps maybe simple, with very few to no features. The user may be able just to browse through certain info, and filter that info - but not much else. These could cost anywhere from $1500 - $5000

Dynamic apps combine many variables. They would have API connections to Instagram or a payment provider. You'll have a lot of moving parts going at once, with the back-end and front-end constantly communicating. It's also possible the app will need to connect to firmware + hardware. If written in Native code, you can call on these features. These applications could range from $10K - $70K

Gaming apps are a different beast all-together. You're talking CR, AR, 3D graphics, gamification, sprites, and online connectivity. These apps are at least $100K starting, on the low end.

Also important to note maintenance of your app, which can be anywhere from 10-20 percent of the total app development cost.

Lets dive into some features that an application can have, be it Native, Hybrid or Web

Progressive Web Apps

It's good to note the difference: Progressive Web apps are an application accessed solely through the browser, with extensive features and functions. Hybrid apps, are apps written for mobile devices, that use a single code base (React-Native) and don't need to be approved by an app marketplace.

Progressive Web apps have gone through an up and down of usefulness. We now see that they are as important as ever, and can save you a lot of time and money. They are now seen as reliable, fast and engaging. You can easily add them to your home screen and have web push notifications that keep users coming back.

Loading instantly with very little network downtime, fast responsiveness and no weird scrolling or animations, and it can feel like a natural app - without even downloading it! Devs are using tools like Lighthouse to improve overall quality.

These can be the best initial option, allowing for the quickest feedback loop and ability to make iterations. They'll be no need to have users update, as the moment they use the app - it already has updates that have been made in the back-end.

Unfortunately, most progressive web apps are not yet fully supported on all browsers or software. Therefore, you won't get the ability to use most native features.

Hybrid Apps

Hybrid is also a solid option for a mobile MVP.  A hybrid app can use WKWebView , which is essentially placing a browser within an app for iOS, and for Android it's called WebView .

A great example of hybrid, is what BaseCamp is doing. They use Xcode + Swift, compiling their building blocks using UINavigationController , UITabViewController , UISplitViewController , UIViewController , as well screens where the content is built using UITableView or UICollectionView .  Going a little further, BaseCamp is has a significant portion of the content being rendered using web technology.

You can read about it all here & here

Ionic also offers a completely hybrid development experience. The offer a free, open source mobile UI toolkit for developing high-quality cross-platform apps for native iOS, Android, and the web.  With Automated native builds, live updating and CI/CD - Ionic Appflow addresses the entire mobile DevOps life-cycle.

Plus they offer their own Ionic Studio . Which is a powerful, locally-installed, visual development environment that makes it easy to build Ionic apps.

Special mention should also go to Crosswalk

React-Native & NativeScript

Using React-Native , you're able to build out a single code base in JavaScript for portability, while reaching the largest audience without much resistance. You're able to keep development costs relatively low while still being able to run on all operating systems.

It uses the same design as React, letting you compose a rich mobile UI using declarative components.

React-Native has incredible layout components, so developers can create user interfaces that are almost indistinguishable from those written in native technologies. You can also get use of some native components and a bunch of specific APIs. To access those components, developers have created 'Native Modules' to allow for native code to be implemented. Testing also goes much quicker, and updating things like a button - are much easier.

Apps built with React Native aren't mobile web apps because React Native uses the same fundamental UI building blocks as regular iOS and Android apps. Instead of using Swift, Kotlin or Java, you are putting those building blocks together using JavaScript and React.

Below is an example of basic scrolling with an image + text. Notice this example importing Image, ScrollView and Text components from the React-Native package. Basically, the magic in action :)

import React, {Component} from 'react';
import {Image, ScrollView, Text} from 'react-native';

class ScrollingImageWithText extends Component {
  render() {
    return (
      <ScrollView>
        <Image
          source={{uri: 'https://facebook.github.io/react-native/img/header_logo.png'}}
          style={{width: 66, height: 58}}
        />
        <Text>
          On iOS, a React Native ScrollView uses a native UIScrollView.
          On Android, it uses a native ScrollView.

          On iOS, a React Native Image uses a native UIImageView.
          On Android, it uses a native ImageView.

          React Native wraps the fundamental native components, giving you
          the performance of a native app using the APIs of React.
        </Text>
      </ScrollView>
    );
  }
}

It's simple to drop down to native code if you need to optimize a few aspects of your application. It's also easy to build part of your app in React Native, and part of your app using native code directly - that's how the Facebook app works.

import React, {Component} from 'react';
import {Text, View} from 'react-native';
import {MapViewComponent} from './your-native-map-implementation';

class CustomMapView extends Component {
  render() {
    return (
      <View>
        <MapViewComponent />
        <Text>
          MapViewComponent could use native Swift, Java, or Objective-C -
          the product development process is the same.
        </Text>
      </View>
    );
  }
}

NativeScript is an open source framework for building truly native mobile apps with Angular, Vue.js, TypeScript, or JavaScript.

NS performance allows for vibrant, platform-native UI without the use of WebViews. You can define once and NS will compile and run it everywhere. They give you 100% direct access to all iOS and Android APIs . You can easily reuse CocoaPods and Android SDKs, and deploy native mobile apps for iOS and Android from a single codebase. Use Angular or Vue to share existing web-based code.

NativeScript - How it Works

You can also see sample apps built with NativeScript here

Native [iOS, Android]

Complex applications need great performance and user experience. They also most times, need to access to directly communicate with the hardware (camera, flashlight, etc). The code base will be in Swift, with Elixir being the best option for a back-end.

It's best to start with the iOS platform. It can take up to 2x-3x times longer to make an Android app, with costs being almost double. Look to test the market through iOS first, and if a good response if given - look into possibly developing for Android.

Aspect ratio is a big pain point a lot of people overlook. We're talking here about the width to height of different screen sizes. A lot of non-native apps crash while trying to change size and shape based on the device.

The type of app you're building plays a large part into the cost. You'll want to take into account some of the following, for example;

• Do users need to login? Via email or social?
• Are there user profiles?
• API connection?
• Custom Design or Stock?

Native will give you better positioning on the app store, as well as unmatched performance. Direct 3rd party app integrations are also a breeze with other Native apps. If you're not looking to save a buck and have time (which you should, as rushing any project of a technical nature is a no-no) - Native is the way to go.