There are over 6.5 billion smartphone users across the world and it is forecasted to further grow to 7.6 billion by 2027, as per Statista. It’s no surprise that the mobile app industry is growing very fast.
Statista also reports that worldwide mobile application revenues have risen dramatically throughout the past two years from 255.5 billion in 2019 to 400.7 billion in 2021. It is one of the most profitable industries, the growth rates are increasing rapidly, and as more and more people own smartphones, the market is expanding.
If you take a look around you, I am sure you will notice that everyone has their eyes glued to a mobile device, including you 😂. In fact, studies show that people are becoming dependent on their mobile phones, checking them every six-and-a-half minutes. In total, users check their mobile phones an average of 150 times during a waking day of 16 hours – source.
But the question is…
What’s everyone doing on their mobile phones?
88% of mobile time is spent on apps. The app percentage continues to increase year over year. The vast majority of time spent on a mobile device is spent connected to the internet.
This is exciting news for app developers, app publishers, and anyone who plans on developing an app.
In this blog, we will cover everything there is to know about app development so that you can decide whether a hybrid or native app development approach is the best fit for your business.
And we are also going to create a simple React Native Application to demonstrate to you how fast it is to develop a Hybrid application.
In this blog, we’ll cover:
- Mobile App Statistics (2022)
- Different types of Mobile Apps
- What are the main Advantages of developing Hybrid Apps?
- What are the most widely used Tools for developing Hybrid Apps?
- More on React Native
- Installation
- Hands-On
- Conclusion
Mobile App Statistics (2022)
- Through 2021, the mobile app market is expected to increase at a 385 percent annual rate – source
- Mobile users spent 90% of their time in apps compared to some 13 percent on the web – source
- Mobile apps are expected to generate over $935 billion in revenue by 2023 – source
- 49% of people open an app 11+ times each day – source
- The Google Play Store has 2.87 million apps available for download. And 2.22 million are available on Apple App Store – source
Different types of Mobile Apps
If you are planning to build an app for your business or client, you need to answer the question: Which type of mobile app do we build?
Hybrid App
The production of a single software that can run on several operating platforms, such as Windows, Android, and iOS, is known as hybrid app development.
Hybrid development adopts an approach to writing the code once and runs it everywhere to build an app.
Hybrid apps, like native apps, are available through app stores, can access hardware on your phone, and are installed on your device.
Research shows that 74% of the top 50 retail apps on the App Store are Hybrid Apps.
It is built with web technologies, which means millions of web developers already have the base skillset to build mobile apps.
Examples of high performing hybrid apps include:
Web App
A Web application is a program stored on a remote server and delivered over the internet through a browser interface.
It behaves similar to native apps, they’re not standalone apps in the sense of having to download and install code into your device. They’re actually responsive websites.
A web application reduces costs for both the end-user and the business. Because updates are applied centrally, web applications are constantly up to date.
Because all users have access to the same version, there are no compatibility difficulties. Plus, there’s nothing to download in a web application, and users don’t even need to download the update at the app.
There are many great examples of web apps that you are using right now. The following image shows a few of them:
Why should you consider creating a web application?
Web apps offer users the look and feel of a mobile app on phones and PCs and are accessible across all devices and operating systems. They are less costly and easier to build than mobile apps, making them an alternative for the right situation.
Progressive web app (PWA)
A progressive web application, commonly known as a PWA, is a type of application software delivered through the web, built using common web technologies including HTML, CSS, JavaScript, and WebAssembly.
PWA offers the look and feel of an app but is accessible via a web browser. They’re improved with APIs to deliver more features beyond standard web apps.
There are many PWA available today, so there are a lot of great examples. Here are some of the most popular PWAs.
Why you should consider Building a Progressive Web App (PWA)?
PWA provides appealing benefits similar to responsive websites and native mobile apps. It is an all-in-one solution for a site/app to be delivered across all devices without the hassle of app-store distribution. At their base, they are a webpage, but in their design, they feel like an app.
What is a Native App?
A native mobile app is a smartphone application written in a programming language particular to the platform, such as Java for Android. Native mobile apps have a high level of performance and dependability.
Native apps have the advantage of being faster and more dependable in terms of performance due to their solitary focus. They use the device’s resources more efficiently than other sorts of mobile apps. It utilizes the native device UI, giving users a more optimized customer experience.
When to use Native App development?
- Building a graphic-rich app/game need topmost performance and speed
- When your app needs full access to hardware-related features like gestures, geolocation, and touch ID
- You have the time and money and are willing to spend an extra buck for superior UI and performance
Some of the most popular Native apps are:
What are the main Advantages of developing Hybrid Apps?
We know the key benefits of Native App development, but we also know they cost a lot of money and take a lot of time to develop. The reason why so many businesses choose a hybrid over native mobile apps is that hybrid mobile apps cost less than native ones. And also takes less time to create them and it is easier to manage them.
Let’s see some major benefits of hybrid app development:
- Faster Build Time: Since there is one codebase to manage the application, it takes less time to build a hybrid than native apps.
- Low Cost of Development: Hybrid mobile apps cost less than native apps. Due to the fact that developers write one set of code for all the operating systems. As a result, they are far less expensive than the native ones.
- Wider Market Reach: Because hybrid apps use a single codebase, they can be deployed across devices. For example, when you build them for Android, you can easily launch them on iOS.
- Offline Availability: Hybrid mobile apps will work in an offline mode due to their native infrastructure. Users can still load the programme and see previously loaded data even if they can’t access real-time data.
- Enhanced UI/UX: Hybrid mobile development combines the advantages of native and web apps. It offers a consistent and flawless user experience across iOS and Android platforms.
- Easy to Maintain: Hybrid mobile app development offers simplified maintenance. A hybrid app eliminates versioning and makes app management as simple as updating a web page, that too in real-time.
What are the most widely used Tools for developing Hybrid Apps?
So far, we’ve grasped the value and significance of a hybrid app development strategy. We also listed down the basic vital considerations when selecting the most popular Hybrid mobile app development framework for your project.
React Native: It’s one of the most well-known frameworks for hybrid mobile apps. It’s capable of creating stunning mobile apps for both iOS and Android. App developers don’t have to start from scratch when using React Native. It uses building elements from the Android and iOS platforms to create cross-platform mobile apps that are effective.
Flutter: Flutter, which is funded by Google, is quickly becoming one of the most popular hybrid mobile app frameworks. Flutter enables developers to construct highly productive apps for Android and iOS using a single codebase.
Ionic: Ionic is an HTML5 mobile app framework that focuses on developing hybrid apps. Unlike most hybrid mobile app frameworks, Ionic uses numerous technological layers to create feature-rich apps with a stunning user interface.
Mobile Angular UI: It is made up of two well-known web app frameworks: Bootstrap and Angular. Both contain UI components that aid in the creation of a top hybrid mobile app in the same way that a web app does.
Onsen UI: OnsenUI is an HTML5 framework for developing user interfaces that are both unique and usable. Making UI creation simple, also allows mobile app developers to focus more on the program’s essential functions. OnsenUI was created with AngularJs in mind, however, it may easily be used with jQuery or any other framework.
Framework7: Build apps for any platform using Framework7’s gorgeous set of UI components, which lets you create web apps, progressive web apps (PWA), and iOS and Android apps with a native look and feel right out of the box.
PhoneGap: PhoneGap is an Adobe System software development framework for creating mobile applications. To create apps with PhoneGap, the developer simply has to know web-development languages like HTML, CSS, and JavaScript, not a mobile programming language.
Xamarin: It provides software development tools that allow users to create apps for Android, iOS, and Windows using the C# programming language and the.NET framework. The.NET Framework is the foundation of Xamarin. It enables the creation of programmes that can run on a variety of platforms.
More on React Native
React Native is an intriguing framework for JavaScript developers who have previously worked with React.js. To get started, they probably don’t need to know about React Native. React Native, on the other hand, is appealing if they need something with a more native look and feel and first-class support for things like TouchID and push notifications.
The following image shows the pros of using React Native:
- 95% of the code is cross-platform compatible
- React Native makes use of the GPU to improve app efficiency.
- The ability to create smooth updates in a short amount of time is aided by greater flexibility.
- It has a hot reload feature that speeds up the development process, thus saving the development cost and time
The following images are some top Apps built on React Native:
Installation
There are a couple of things you need to install to set up the environment.
You will need Node, the React Native command-line interface (CLI), a JDK, and Android Studio. While you can use any editor of your choice to develop your app, I’m going to use VS Code.
Step 1: Install Chocolatey
React Native Official documentation recommend installing Node via Chocolatey, a popular package manager for Windows.
Install with powershell.exe:
- Run PowerShell as Administration.
Now run the following command:
Set-ExecutionPolicy Bypass -Scope Process -Force; [System.Net.ServicePointManager]::SecurityProtocol = [System.Net.ServicePointManager]::SecurityProtocol -bor 3072; iex ((New-Object System.Net.WebClient).DownloadString('https://community.chocolatey.org/install.ps1'))
- Paste the above command into your shell and press Enter.
- Wait a few seconds for the command to complete.
- If you don’t see any errors, you are ready to use Chocolatey.
Step 2: Node, JDK
It is recommended to use an LTS version of Node. React Native also requires Java SE Development Kit (JDK).
Open an Administrator Command Prompt, then run the following command:
Choco install -y nodejs-lts openjdk11
Step 3: Android development environment
- Install Android Studio:
Download and install Android Studio. While on the Android Studio Installation wizard, make sure the boxes next to all of the following items are checked:
- Android SDK
- Android SDK Platform
- Android Virtual Device
Then, click “Next” to install all of these components.
- Install the Android SDK
Android Studio installs the latest Android SDK by default. Building a React Native app with native code, however, requires the Android 11 ® SDK in particular.
To do that, open Android Studio, click on the “Configure” button, and select “SDK Manager”.
Select the “SDK Platforms” tab from within the SDK Manager, then check the box next to “Show Package Details” in the bottom right corner. Look for and expand the Android 11 ® entry, then make sure the following items are checked:
- Android SDK Platform 30
- Intel x86 Atom_64 System Image or Google APIs Intel x86 Atom System Image
Next, select the “SDK Tools” tab and check the box next to “Show Package Details” here as well. Look for and expand the “Android SDK Build-Tools” entry, then make sure that 30.0.2 is selected.
Finally, click “Apply” to download and install the Android SDK and related build tools.
- Configure the ANDROID_HOME environment variable
The React Native tools require some environment variables to be set up in order to build apps with native code.
- Open the Windows Control Panel
- Click on User Accounts, then click User Accounts again
- Click on Change my environment variables
- Click on New to create a new ADNROID_HOME user variable that points to the path to your Android SDK:
The SDK is installed, by default, at the following location:
%LOCALAPPDATA%\Android\Sdk
You can find the actual location of the SDK in the Android Studio “Setting” dialog, under Appearance & Behavior -> System Settings -> Android SDK
Open a new command prompt window to ensure the new environment variable is loaded before proceeding to the next step.
- Open Powershell
- Copy and paste Get-ChildItem -Path Env:\ into PowerShell
- Verify ANDROID_HOME has been added
- Add platform tools to Path
- Open the Windows Control Panel
- Click on User Accounts, then click User Accounts again
- Click on Change my environment variables
- Select the Path variable
- Click Edit
- Click New and add the path to platform-tools to the list
Hands-On
Now let’s do a small implementation to understand how simple it is to build an app using React Native.
For this blog, we are going to build a Todo-List using React Native!
You can also download the complete source code of this hands-on.
To start with we are keeping it pretty short and simple with minimal styling. The main idea of it is to demonstrate how a to-do list can be made using react native as fast as possible. Learning how to make a TodoList app will teach you a number of fundamental React Native topics.
Prerequisites:
You need to have a working level understanding of the following things in order to fully understand the concepts.
- HTML
- CSS
- JavaScript
- ReactJs
Things we will learn in this Hands-On
- Initializing Project using React Native CLI
- Create Functional Components
- Passing props and callback functions
- Using hooks to manage state
Creating a new application
You may generate a new project with React Native’s built-in command-line interface. Let’s create a new React Native project called “todo-app”.
To create a react-native app, open your terminal, cd into the directory you’d like to create the app in, and run the following command:
npx react-native init todoapp
After that, it will ask you to install react-native, just type y and press enter.
The download of all the essential dependencies will take a few minutes.
Preparing the Android device
You will need an Android device to run your React Native Android app. This can be either a physical Android device or more commonly, you can use an Android Simulator.
We are going to use Android Studio to run the app. Open ./todoapp/android, in your Android Studio, you can see the list of available Android Virtual Devices ( AVDs )by opening “AVD Manager” from within Android Studio.
Running your React Native application
Step1: Start Metro
First, you will need to start Metro, the JavaScript bundler that ships with React Native. To start Metro, run npx react-native start inside your React Native project folder:
Step2: Start your application
Let Metro Bundler run in its own terminal. In your React Native project folder, open a new terminal. Run the following:
npx react-native run-android
If everything is set up correctly, you should see your new app running in your Android emulator shortly.
Our hello world app is up and running in an android emulator, so we can move forward and build our TodoList app.
Now we will create a new folder called “components” and add two new files called TaskItem.js and TaskInputField.js.
Now, in our AddItem.js and ListItem.js files, write the following code and import it into our main App.js file.
TaskItem.js
TaskItem component will be a separate component for each task.
This is what the UI component will look like in the app.
There is a wrapper view, which has two children, the first one is the index container and the other container will have the task text and a cancel icon.
We are accepting the index, task, and deleteTask as props to this component. deleteTask is a callback function passed from the parent component to delete a specific task
TaskInputField.js
The input field with a plus button will add a task to the list when pressed. In this component, we used one hook to handle the input field state.
This component also accepts a props callback function that adds a task to the list. After adding the task, we are clearing the input field.
This is what the UI component will look like in the app.
Now, import these two React Components into our App.js.
In App.js, we are importing those two functional components under the heading component.
We had created a hook for storing the state of tasks.
After that, we created two functions for adding and deleting a task. We also passed addTask function into TaskInputField component and deleteTask function into TaskItem component as props.
We are using ScrollView component to handle scrolling.
This is what our todoapp looks like.
If you made it at this point then congratulations, you have built a react-native app that can run on both the platform Android and iOS.
Conclusion
In this blog, we have discussed Mobile App Development, Hybrid App, Web App, Native App, most popular Hybrid App development Tools, React Native, React Native environment setup and, in the end, we have created a todo app in react-native from scratch.
I’ve tried to explain to you a lot of basic concepts of React Native by building a project so that you get comfortable with the framework.
To understand it more. Please make the app yourself after reading the blog to understand the concepts on your own. Creating the app on your own is the best experience.
We will come up with more such use cases in our upcoming blogs. Stay tuned to keep getting all updates about our upcoming new blogs on AWS and relevant technologies.
Meanwhile…
Keep Exploring -> Keep Learning -> Keep Mastering
This blog is part of our effort toward building a knowledgeable and kick-ass tech community. At Workfall, we strive to provide the best tech and pay opportunities to AWS-certified talents. If you’re looking to work with global clients, build kick-ass products while making big bucks doing so, give it a shot at workfall.com/partner today.
