blog
An Overview of Mobile Application Development Frameworks
Posted 22 November 2023
Written by Wei-Meng Lee
E-commerce websites started gaining traction beginning in the late 90s, and by the early 2000s, web apps were an integral part of any business and defined how companies interacted with their customers.
Today, a similar trend is emerging – no business can afford not to have mobile applications (or simply known as apps). With changing customers’ behaviors, businesses must adapt to the new ways their customers access their services.
Today, mobile apps provide businesses with:
- Improved accessibility and reach
- Improved customer engagement
- Enhanced customer experience
- Strategic competitive advantage
- Improved operational efficiency
- Data collection and analysis
Mobile apps development used to be a time-consuming affair, with so many different platforms in the market. In the late 2000s, these were just some of the mobile platforms that developers must develop for:
- iOS
- Android
- Symbian
- BlackBerry
- Windows Mobile/Phone
- Palm
- Java ME
Due to market consolidation, today the two dominant platforms are just iOS and Android. Even with these two platforms, there exists different ways to develop apps on them. In this article, I will walk you through the main types of mobile apps you can develop, and the different types of tools, frameworks and languages that you need to learn and use.
Types of Mobile Development Frameworks
Mobile Apps Development can be broadly classified into two categories:
- Native app development
- Cross-platform app development
A native app is an application that is developed for a specific platform, such as iOS or Android. These apps are designed to run on a particular device or OS and can take full advantage of the platform’s features and capabilities. Native apps are optimized for the platform and have access to the platform’s native APIs. As such, native apps are more efficient, have better security, and have UI that adheres to the design guidelines and standards of the platform.
Cross platform on the other hand, aims to minimize the need to maintain separate code bases for each target platform. The mantra of cross platform development is – Write Once, Run Everywhere.
In the following sections, you will learn some of the tools and frameworks that you can use for mobile development:
XCode
Xcode is an integrated development environment (IDE) created by Apple for developing software applications on its various platforms, including iOS, macOS, watchOS, and tvOS. It is the official and most widely-used development tool for Apple ecosystem development.
To develop iOS apps, you can use the Objective-C or the Swift programming language. For new projects, it is recommended that you start with Swift due to its modern language constructs, improved performance, and enhanced code readability. While Swift has become the primary language for Apple platform development, Objective-C codebases are still being maintained due to the use of legacy code and third-party libraries. Hence, expect to see Objective-C continue to have a presence in the Apple app ecosystem for years to come.
Xcode provides two approaches to building your apps’ user interfaces:
- Storyboard
- SwiftUI
Storyboard is a visual interface design tool that allows developers to build the UI of their applications by arranging and connecting components and screens. Storyboards are useful when you need to have an overview of your app’s flow and is a very useful prototyping tool. The following figure shows Storyboard in Xcode:
Each View (think of it as a screen in your iPhone) in the storyboard is backed by a ViewController, which is the class that contains the functionality of each View window:
In more recent years, Apple has introduced SwiftUI as a modern way to build the UI of your apps. SwiftUI is a declarative framework that is deemed to be more intuitive and efficient in building your UI. With SwiftUI, you describe the UI’s appearance and behavior using code, and SwiftUI takes care
Each View window in your app is now encapsulated within a ContentView class:
SwiftUI and Storyboard can both be used together in the same project. For new projects, it is recommended that you use SwiftUI, but in reality, a lot of applications are still being written and maintained using Storyboard.
To use Xcode for iOS development, you need a Mac. Xcode comes with iOS simulators that you can test your applications without using a real device:
Android Studio
Android Studio is the official integrated development environment (IDE) for Android app development. It is a powerful and feature-rich IDE provided by Google to make it easier for developers to create, test, and publish Android applications.
For Android development, you can use the following programming languages:
- Java
- Kotlin
Kotlin is a modern, statically-typed programming language that runs on the Java Virtual Machine (JVM). It was developed by JetBrains and officially endorsed by Google for Android app development. Kotlin is fully compatible with Java and can work with existing libraries or frameworks written in Java. For new projects, the recommended language is Kotlin.
For building UI, Android Studio comes with the Layout Editor, where you can build your Android UI visually using drag-and drop:
In traditional Android UI, a screen in Android usually comprises of an XML file coupled with a Kotlin (or Java) file containing the app logic:
Besides building your UI using the Layout Editor, Google recommends you build your UI using Jetpack Compose. Jetpack Compose is a modern Android UI toolkit developed by Google for building native user interfaces in Android applications. It represents a significant departure from the traditional Android UI development model, which relies on XML-based layouts and a complex view hierarchy. Jetpack Compose allows developers to build Android UIs using a more declarative and functional approach. Using Jetpack compose, a screen in Android only needs a single file:
The following figure shows Android Studio using Jetpack Compose to create UIs for your Android apps:
You can draw the following equivalent comparing the UI development for iOS and Android:
Android Studio comes with the Device Manager which allows you to test your applications using various Android emulators:
React Native
React Native was first introduced by FaceBook (now called Meta) in 2015 as a way to build natively rendering mobile applications using the popular React JavaScript library. It is an open-source UI framework created for developers to write apps that run on the following platforms:
- iOS
- macOS
- tvOS
- Android
- AndroidTV
- Web
- Windows, and UWP (Universal Windows Platform)
The key advantage of React Native is you can maintain a single code base to target multiple platforms.
React Native works almost identical to React, except that React Native does not manipulate the DOM via Virtual DOM.
React Native apps are written using a mixture of:
- JS (JavaScript)
- CSS (Cascading Style Sheet)
- JSX (JavaScript XML)
In particular, JSX allows developers to write HTML-like code within their JavaScript code, making it easier to create and manipulate the UI of their applications.
Here is a sample React Native component that comprises of JS, CSS, and JSX:
import React from ‘react’;
import { View, Text, Button, StyleSheet } from ‘react-native’;
function App() {
const handleButtonPress = () => {
alert(‘Button tapped!’);
};
return (
<View style={styles.container}>
<Text style={styles.heading}>Welcome to React Native</Text>
<Button title=”Tap Me” onPress={handleButtonPress} />
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: ‘center’,
alignItems: ‘center’,
},
heading: {
fontSize: 24,
marginBottom: 20,
},
});
export default App;
During compilation, React Native uses a tool called Metro to bundle all your code, dependencies, assets, and bundles into a single file, and then transpiles (translate-and-compile) your JSX code into ES5. They are then used to generate platform specific code for the platforms you are targeting. So, when you define a <Button> in React Native, the button will translate to platform-specific button styles on iOS and Android to maintain a consistent look and feel on both platforms.
To develop React Native mobile apps, you need the following:
- Node.js
- Xcode (requires a Mac)
- Android Studio
According to Wikipedia, React Native is currently maintain by Microsoft.
Flutter
Another cross-platform mobile development framework that is gaining a lot of popularity is Flutter. Like React Native, Flutter is a mobile framework for building natively compiled applications for mobile, web, and desktop from a single codebase. Flutter is created by Google, and uses Google’s Dart programming language.
Flutter supports developing apps for the following platforms:
Flutter has the following major components:
- Flutter engine – written in C++, provides low-levels rendering support using
- Google’s Skia graphics library Foundation Library – written in Dart, provides a base layer of functionality for apps and APIs to communicate with the engine
- Widgets – basic building blocks for UI
Widgets are the basic building blocks of a Flutter application. Here’s an example widget:
import ‘package:flutter/material.dart’;
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text(‘Simple Flutter App’),
),
body: Center(
child: Text(
‘Hello, Flutter!’,
style: TextStyle(fontSize: 24),
),
),
),
);
}
}
Unlike React Native, Flutter does not use the platform’s native widgets. Instead, Flutter provides a set of widgets (including Material Design and Cupertino (iOS) widgets), managed and rendered by Flutter’s framework and engine. Using this approach, it is much easier to maintain UI consistencies for your applications across platforms.
To develop Flutter mobile apps, you need the following:
- Flutter SDK
- Xcode (requires a Mac)
- Android SDK, Android Studio (optional)
Summary
I hope this short article has given you a better idea of the mobile apps development landscape at the moment. Here is a quick summary of the key features of each of the tool/framework I have discussed in this article:
About the author
Wei-Meng Lee
View Wei-Meng Lee’s profile
