Mobile Application Related Technologies

While web development involves writing a language that communicates with the web browser rather than directly with the computer hardware and its operating system (to what extent?), native development, on the other hand, uses a language that directly interacts with the hardware and operating system of the mobile phone.

1. Mobile versions of websites appeared first. These were not yet applications in large numbers but rather “Responsive” websites.

1. These are websites that adapt to the screen size of the device being used, whether it’s a computer (large or medium screens), a tablet, or a smartphone.

2. The mobile version of a site is accessed via a web browser installed on the mobile phone.

3. The human and financial costs are lower than for mobile applications, as this allows companies to focus on a single platform, allocating all budget and communication, marketing, and advertising efforts towards it.

2. Then came mobile applications in two types:

1. Native: Developers must design and program an application in a specific language for each mobile operating system, and thus for each app store.

• Android: Kotlin, Java

• iOS: Swift (previously Objective-C)

• Windows Phone: C#

2. Shortly after native development, the hybrid era emerged:

Faced with the challenges of time and cost, several companies and developer communities worked on hybrid solutions. These allow developers to create applications for multiple mobile operating systems with a single codebase, or almost (some development still requires hardware-specific customizations). These solutions use technologies familiar to all developers, eliminating the need for separate Android and iOS developers.

• Hybrid programming languages:

• React Native

• Flutter

• Kotlin Multiplatform

3. Progressive Web Apps (PWA)

1. PWAs started gaining popularity in 2015, with many new libraries and frameworks emerging.

2. Apple refers to PWAs as HTML5 Apps or Homescreen Web Apps.

3. A PWA enables the creation of web applications that run on both mobile and desktop with a user experience close to that of native applications.

4. This means developing an application and making it usable on all devices and platforms through the web platform, which is based on universal standards maintained by all major market players. The web platform relies on three primary languages: HTML, CSS, and JavaScript.

5. Frameworks like Angular, React, and Vue.js can be used to create a Progressive Web Application.

6. [READING MATERIAL]:

1. What are PWAs?

2. Drive business success with PWAs

3. Case study: Gravit Designer

4. Exercise:

• Question: Are Telegram Web or WhatsApp Web considered PWAs?

• Answer: They are advanced web applications but not fully Progressive Web Apps (PWAs).

• Since 2007, with the introduction of iOS and Android, the mobile app market has exploded.

• In 2018, Android held 88% of the market, while iOS had 11%.

By 2024, the global smartphone market experienced significant growth after two years of decline. Estimates suggest that around 1.2 billion smartphones were sold that year.

In terms of market share by operating system, Android maintained its dominant position with approximately 70.1% of the global market share, while iOS accounted for about 29.2%.

Regarding manufacturers, Apple sold approximately 225.9 million iPhones in 2024, representing an 18.7% market share. Samsung closely followed with 223.4 million units sold (18.0% market share). Xiaomi ranked third with 168.5 million smartphones sold, capturing 13.6% of the market.

These figures indicate that Android devices, produced by various manufacturers, continue to dominate the global smartphone market in terms of sales volume, while Apple maintains a strong position with its iOS devices.

Differences Between Android and iOS

At the Application and Operating System Level

React Native supports the differences between Android and iOS. Some features do not behave the same way on both platforms, and some functionalities are available on one system but not on the other.

React Native provides specific features depending on whether the application is running on iOS or Android. This allows developers to implement different functionalities based on the platform.

With React Native, you can create a single interface for both systems.

Alternatively, you can design two separate and system-specific interfaces. These interfaces adapt to the platform and ensure that the application fully integrates with the device. This approach requires more effort but results in a more refined and optimized user experience.

At the Store Level

Google Play and the Apple App Store are the two main application marketplaces.

By 2018, these stores hosted more than 2 million applications.

• Apple App Store

• Google Play

Mobile application development relies on specialized tools and environments to create, test, and deploy applications on Android, iOS, and other platforms.

• IDE and Tools for Native Development
  • Android
    • Android Studio
      • Languages: Kotlin (recommended), Java.
      • Integrated tools: Android Emulator, Profiler, Compose UI.
    • iOS (Apple)
      • Xcode
        • Apple’s official IDE for iOS, macOS, tvOS, and watchOS.
        • Languages: Swift, Objective-C.
        • Integrated tools: Interface Builder, iOS Simulator.

• IDE and Tools for Cross-Platform Development (Hybrid & Native)
  • Visual Studio Code
    • Mainly used for React Native, Ionic.
    • Extensions available for multiple frameworks.

• Additional Tools for Mobile Development
  • UI/UX Design & Prototyping
    • Figma → Design and app mockups.
    • Material Design, SwiftUI → UI kits for Android and iOS.

• Debugging & Testing
  • Firebase Test Lab → Automated testing on multiple Android devices.
  • Xcode Simulator, Android Emulator → Test apps without a physical device.

• Deployment & App Stores
  • Google Play Console → Publish apps on Android.
  • Apple App Store Connect → Deploy iOS apps.

Summary: Mobile Application Design Issues and Considerations Mobile application development shares similarities with traditional software development but involves unique challenges related to the specificities of mobile devices, such as reduced screen size, limited battery life, and interactions with various sensors. This text explores the main design issues to consider.

1. Mobile Application Design

1. Adapting the design to the capabilities and constraints of mobile devices is crucial for providing a good user experience.

2. Differences in operating systems (iOS and Android) influence how applications should be designed.

2. Application Lifecycle

1. Mobile applications do not function like traditional software: they go through several states (active, paused, background, stopped, destroyed).

2. Android: Lifecycle management via methods like onCreate, onPause, onResume to handle interruptions and state changes.

3. iOS: Uses one lifecycle for the application and another for each screen (ViewController), with similar methods to manage transitions.

3. Hardware and Software Constraints

1. Screen size and orientation: Design must take into account the limited available space and orientation changes.

2. Connectivity: Applications must be designed to handle connection losses and avoid interruptions due to network slowdowns.

3. Battery: Optimize the use of sensors (GPS, camera) and limit energy-intensive tasks.

4. Sensors and hardware: Verify the availability and efficient use of hardware components to avoid bugs and improve user experience.

4. Differences Between Android and iOS

1. Android uses hardware or virtual navigation buttons, while iOS primarily relies on gesture navigation.

2. Design and interaction approaches differ between the two platforms, requiring specific adjustments.

5. Application Example: MyContactList

1. Learning Android and iOS development involves creating a common application, MyContactList.

2. The application includes several screens: contact entry, contact list, map to display their location, and settings to manage the display.

Conclusion Designing mobile applications requires taking into account the particularities of operating systems and hardware. Good planning and optimized management of the lifecycle, connectivity, and energy consumption are essential to provide a smooth user experience and avoid frustrations.

Exercises

1. Find an application that works on both platforms. Download and run it. Identify the similarities and differences between the platforms.

2. Find out what consumes the most battery on the mobile device. On Android, find the battery usage information. This can be found in different places on different Android devices, but is typically found in the Settings app. Scroll through the list of power consumers. What consumes the most? What consumes the least? Note: This feature is not available on iOS.

3. Open an application that uses GPS (e.g., Google Maps). Look at the status bar at the top of the device. What icons are there? What do they do? Observe until the device screen turns off, then turn it back on. What changes occurred in the status icons? Now, go to the home screen. What happened to the status icons?

Mobile Application Lifecycle The mobile application lifecycle refers to the set of states an application goes through from launch to closure. Unlike traditional computer software, mobile applications are subject to frequent interruptions (calls, notifications, multitasking, screen locking) and must efficiently manage these transitions to ensure a good user experience.

1. Lifecycle States A mobile application can be in several states during its use:

1. Created/Launched: The application is started by the user.

2. Running/Foreground: The application is in use and visible on the screen.

3. Paused/Inactive: The user interacts less with the application (e.g., display of a pop-up) but it is still partially visible.

4. Background: The application is no longer visible but runs in the background (e.g., music listening, download in progress).

5. Stopped: The application is completely put to sleep, ready to be restarted.

6. Destroyed/Killed: The application is closed and removed from system memory. Each operating system handles these states differently.

2. Android Lifecycle On Android, the application lifecycle is controlled by the operating system, which can decide to close it to free up memory. It is essential to manage transitions between states using the following methods:

1. onCreate(): Executed only once when the application launches, allows initializing components.

2. onStart(): Called when the application becomes visible to the user.

3. onResume(): The application is in the foreground and the user can interact with it.

4. onPause(): The application is partially hidden (e.g., switching to another application).

5. onStop(): The application is no longer visible and can be put in the background.

6. onDestroy(): The application is closed definitively. Good development requires saving critical data when going to the background to avoid any loss of information.

3. iOS Lifecycle The operation is similar to Android but iOS distinguishes between the application lifecycle and that of displayed screens (ViewControllers):

1. didFinishLaunchingWithOptions(): Corresponds to onCreate() on Android, initializes the application environment.

2. applicationWillResignActive(): The application goes into pause, similar to onPause().

3. applicationDidEnterBackground(): The application goes into the background.

4. applicationWillEnterForeground(): The application returns to the foreground before becoming active.

5. applicationDidBecomeActive(): The application becomes fully active again.

6. applicationWillTerminate(): The application is closed. Each iOS screen (ViewController) also has its own lifecycle with methods viewDidLoad(), viewWillAppear(), viewWillDisappear(), allowing management of its display and transitions.

4. Importance of Good Lifecycle Management Properly managing the lifecycle is crucial for:

1. Avoiding data loss when going to the background.

2. Optimizing battery by disabling unnecessary sensors (GPS, camera).

3. Ensuring a smooth experience so that the user can resume where they left off. By understanding and properly implementing state transitions, a developer can significantly improve the reliability and efficiency of their application.

5. How does React Native handle the lifecycle? React Native adapts to the lifecycle of mobile applications for Android and iOS, but with some differences compared to native development. React Native provides specific APIs to manage application and component state transitions, but it relies on the underlying native lifecycle.

1. Application Lifecycle in React Native React Native allows detecting if an application goes to the background or returns to the foreground thanks to the AppState API. This API is compatible with Android and iOS and allows executing actions when the application changes state.

Using AppState

import React, { useEffect, useState } from 'react';
import { AppState, Text, View } from 'react-native';

const App = () => {
  const [appState, setAppState] = useState(AppState.currentState);

  useEffect(() => {
    const handleAppStateChange = (nextAppState) => {
      console.log('State change:', nextAppState);
      setAppState(nextAppState);
    };

    const subscription = AppState.addEventListener('change', handleAppStateChange);

    return () => {
      subscription.remove(); // Cleanup event listener
    };
  }, []);

  return (
    <View>
      <Text>Current state: {appState}</Text>
    </View>
  );
};

export default App;

Possible states in AppState:

1. "active": The application is in the foreground.

2. "background": The application is in the background.

3. "inactive": The application is paused (e.g., temporary interruption like an incoming call on iOS). Note: Unlike native development, React Native does not directly manage the onCreate(), onResume(), onPause(), etc. lifecycles. But AppState allows responding to global changes.

2. React Native Component Lifecycle In addition to the global application state, each React Native component follows its own lifecycle, similar to React on the web.

Method | Description constructor() | Initialization of states and props. componentDidMount() | Executed after the component is displayed (ideal for API calls and subscriptions). componentDidUpdate(prevProps, prevState) | Called after each component update. componentWillUnmount() | Executed before component removal (cleanup of subscriptions and timers).

Example:

import React, { useEffect, useState } from 'react';
import { Text, View } from 'react-native';

const ExampleComponent = () => {
  const [counter, setCounter] = useState(0);

  useEffect(() => {
    console.log('Component mounted');

    return () => {
      console.log('Component unmounted');
    };
  }, []);

  return (
    <View>
      <Text>Counter: {counter}</Text>
    </View>
  );
};

export default ExampleComponent;

3. Managing iOS and Android Specific Events Some native features require specific management depending on the platform.

Managing application exit

1. On Android, we can listen to BackHandler to detect a back press and avoid accidentally quitting the application.

2. On iOS, there is no "Back" button, but AppState is sufficient.

import { BackHandler, Alert } from 'react-native';

useEffect(() => {
  const handleBackPress = () => {
    Alert.alert("Warning", "Do you want to exit the application?", [
      { text: "Cancel", style: "cancel" },
      { text: "Yes", onPress: () => BackHandler.exitApp() }
    ]);
    return true; // Blocks the default action
  };

  BackHandler.addEventListener("hardwareBackPress", handleBackPress);

  return () => BackHandler.removeEventListener("hardwareBackPress", handleBackPress);
}, []);

4. Differences Compared to Native Applications 

5. Conclusion React Native does not exactly copy the native lifecycle, but offers tools (AppState, useEffect, BackHandler, etc.) that allow efficient management of state transitions on iOS and Android.

If your application requires more precise control of the native lifecycle, you can integrate native code in Java/Kotlin (Android) and Swift/Objective-C (iOS) thanks to:

1. Native Modules (to expose native functions to React Native)

2. Native Event Listeners (to listen to operating system events)

React Native thus allows compatibility between Android and iOS while offering solutions adapted to the differences between the two systems.