Skip to content

1. Introduction to Mobile Applications, Platforms, and Frameworks

Introduction

  • 98% of mobile devices run on Android or iOS 1.

1 Market Players

  • GAFAM (Google, Apple, Facebook, Amazon, Microsoft) are the main players in the mobile market.
  • Google:
    • Android: Android Go, Android, Wear Os, Android TV, Android Auto (for cars).
    • AOSP (Android Open Source Project) which open sources the core of Android OS.
    • Flutter which is a cross-platform framework spans across Android, iOS, Windows, macOS, and the web.
    • Fuchsia OS.
  • Apple:
    • iOS, created in 2007.
    • Apple Store, created in 2008.
  • Samsung:
    • Biggest Smartphone manufacturer.
    • Mostly uses Android OS, but they have their own OSes like Tizen and Dex.
    • Runs the Galaxy Store.
  • Huawei:
    • The second biggest Smartphone vendor.
    • Runs mostly on Android OS, but they have their own OS called Harmony OS.
  • Facebook: Has a set of apps that are used by billions of people.
  • Amazon:
    • Uses Android variant called FireOS.
    • AWS, Amazon AppStore.
  • Microsoft:
    • Windows Phone was a failure.
    • Has a big share in desktop and gaming: Windows, Xbox.
    • Azure.
  • TenCent:
    • Owns WeChat, QQ, and many other apps in China.
    • WeChat Pay.
    • WeChat Mini Programs.
  • KaiOS:
    • An OS for low cost phones and based on Firefox OS.
    • KaiStore allows for distribution of HTML5 apps.
  • SailFish OS:
    • Compatible with Android apps.

1 Market Situation

  • Mobile experience can be carried across new areas like: in-car systems, Tvs, PCs, Game consoles, AR/VR, IoT, wearables, Smart home, etc.
  • People are less likely to install new apps, there is a shift towards multi-purpose apps over single-purpose apps.
  • With multi-purpose apps, the focus would be on developing extensions to existing apps rather than developing new apps.
  • Adding interactivity to notifications is a new trend.

1 Types of Mobile Apps

  • Native Apps:
    • Programmed in platform-specific languages (Java, Kotlin, Swift, Objective-C) with platform-specific APIs.
    • Distributed through the platform-specific app stores.
    • Offer the best performance, users experience, and deepest integration with the platform.
    • Complex to develop and maintain.
    • Use Kotlin for Android and Swift for iOS.
    • Avoid using Java and Objective-C.
  • Websites and Web Apps:
    • Usually Single Page Applications (SPAs) that run in the browser.
    • Progressive Web Apps (PWAs) are websites that can be installed on the home screen and can work offline.
    • Not distributed through app stores.
  • Cross Platform Apps:
    • Write once, run anywhere.
    • Less effort to develop and maintain.

2 From Idea to Prototype

  • Job to be Done:
    • principle tries to analyze the reason why people use a product to achieve unmet needs.
    • People have unmet needs or goals and constraints that prevent them from achieving their goals.
    • There must ba catalysts that trigger (motivate) people to start working on their goals.
    • Once the catalyst is triggered, people start looking for Choice set of solutions (products) that can help them achieve their goals.
    • Evaluating the choice set, will lead to a purchase decision and the outcome of the purchase decision is the job done.
  • Switch Interviews:
    • Interviews with people at the time of the switch (purchasing your product).
    • Conducted to understand people’s needs and the story behind their purchase decision.
    • Think about their unmet goal and the constraints that goal.
    • Ask about the catalyst that triggered them to start looking for a solution.
    • Try to understand the choice set they considered and why they chose your product (in detail).
    • The focus is the customer journey, not the product.
  • Analyzing data gathered from switch interviews produces a Job Statement that describes the unmet goal, constraints, and catalysts and then defines the problem that needs to be solved.
  • The Job Statement has two parts:
    • The old state: the state of the customer before purchasing the product.
    • The new state: the state of the customer after purchasing the product and get the job done.
  • Job statements are short, high-level, and abstract. use Job Stories to get into the details.
  • Job stories can be analyzed to produce User Stories(user journeys) or Use Cases.
  • Assemble the user stories to create a User Interfaces, or Prototypes, Visual Design.
  • Testing can be done on the prototype to get feedback and improve the design as early as possible.
  • Test Helper Tools:

Prototyping Tools

3 Android Development

  • Created in 2007 by the Open Handset Alliance (OHA) led by Google.
  • Runs on more than 2.5 billion devices, and 75% of the smartphones in the world.
  • F-Droid: https://f-droid.org is an alternative app store for open source apps that does not involve Google.
  • Disadvantages of Android:
    • The fragmentation of the used versions: as you can not be sure that your device works 100% on all versions, however, targeting Android 5.0 allows you to reach 90% of the devices.
  • Advantages of Android:
    • Flexibility and Wide adaptation: Android runs on a wide range of devices, from low-end to high-end devices.
  • Android versions: released once a year, named after sweets and desserts
    • Pie (Android 9): released in 2018, includes app actions, auto brightness adjust, usage stats, new image decoder, better media and neural network APIs, and more.
    • Android 10: released in 2019, includes dark theme, new sharing options, more permissions and privacy, floating panels, new thermal API, and more.
  • Variations of Android:
  • Android is flexible, which lead to companies heavily modifying it creating inconsistencies. Google is providing Vendor interfaces to allow for more flexibility while keeping the core of Android consistent.
  • Vendor Versions:

Android Development starter Kit

4 iOS Development

  • IOS Created in 2007 by Apple as gesture based OS, and the App Store increased the popularity of the platform.

Android vs IOS

  • IOS is less fragmented than Android, as Apple controls the hardware and software:
    • Ten months after releasing IOS 12, 80% of the devices were running it.
    • 1 year after releasing Android 9, only less than 10% of the devices were running it.
  • Apple attaches great importance to, is security and privacy.
  • Apple devices have a longer life span than Android devices.
  • To develop iOS apps, you need a computer running macOS. Apple restricts access to its development tools, since these can only be used on its platform.

IOS Development starter Kit

  • Xcode is the official IDE for iOS development, and it is only available on macOS.
  • JetBrains AppCode is an alternative IDE for iOS development.
  • The main language is Swift, but Objective-C is still supported.
  • CocaPods is a tool that lets you integrate third-party libraries into your project.

5 Cross-Platform Development

Key Differences Between Platforms

  • Programming languages: Java/Kotlin for Android, Swift/Objective-C for iOS, and JavaScript for Web.
  • UI/UX: Android uses Material Design, iOS uses Human Interface Guidelines, and Web uses Responsive Design.
  • Desktop/Luncher Integration: IOS only allows for badge with a number on the app icon, Android allows for widgets, and Web has no integration.
  • Lock Screen Integration.
  • Multitasking: run the app in the background, pop-up, or split screen.
  • Fragmentation: Android has the most fragmentation, iOS has the least, and Web has none.
  • Platform services: push notifications, in-app purchases, and more.

Advantages of Cross-Platform Development

  • Reducing codes.
  • Increasing productivity and cost-effectiveness.
  • No platform-specific knowledge is required, which makes it easier to find developers.
  • As it is a single codebase, this increases consistency across platforms.

Disadvantages of Cross-Platform Development

  • Some features require native integrations, which may be difficult to implement and increase the complexity of the code.
  • Using the same UI/UX across platforms prevents using the platform-specific UI/UX optimizations.
  • The code may be slower than native code.
  • When a new native feature is released, it may take time for the cross-platform framework to support it.

Cross-Platform Strategies

  • Direct Support:
    • Assemble a team for each platform.
    • This gets the most out of each platform, but it is the most expensive.
    • Ideally, start with one platform and then expand to others when the app is successful.
  • Asset Sharing:
    • You still have separate teams for each platform, but assets are shared.
    • Assets can be static assets, algorithms and data structures, business logic, or event abstracted UI components.
  • Player And Virtual Machines.
  • Cross-Language Compilation:
    • Develop in one language and compile it to the native language of each platform.
    • The translation has its own complications and approaches:
      • Direct source-to-source translation (e.g. React Native to Swift/Kotlin).
      • InDirect by translating to an intermediate language (e.g. React Native to Assembly).
      • Compilation to the native language binary (e.g. React Native to Machine Code).
  • (Hybrid) Web Apps:
    • Embed a web view in a native app.
    • The standard is Apache Cordova, which is a framework that allows you to use the native web related APIs.
    • You write the app in HTML, CSS, and JavaScript, and then you use Cordova to compile it to a native app.
    • When App lunches, it loads a minimal native browser, and then it loads your web app in it.
    • Allows using the same codebase for web and mobile.
  • ANSI C:
    • Using C is relevant for complex and performance-critical apps like audio and video decoders.
    • You don’t have access to the platform-specific APIs, nor the UI/UX components.
    • The code usually runs across platforms without any changes.
  • Xamarin:
    • C# and XAML based framework.
    • Supports Mobile Apps, and Windows Desktop Apps.
  • Cordova:
    • HTML, CSS, and JavaScript based framework.
    • Easily integrate web apps into native apps.
    • The platform will run your web app in a native browser.
  • Flutter:
    • Dart based framework.
    • Supports Mobile Apps, Web Apps, and Desktop Apps.
  • React Native:
    • JavaScript based framework.
    • Supports Mobile Apps, and Web Apps.

6 Mobile Web

  • The differences between Web Apps and native apps are getting less with native apps have access to the WebView browser component.
  • With modern web features such as Device APIs, push notifications, installable apps, 60 fps animations, discoverability, the mobile web is a platform both capable and formidable.
  • The mobile web has far more users than native apps, and it is easier to reach them.

Browsers and Rendering Engines

  • Geko: used in Firefox.
  • WebKit: used in Safari and Chrome (formally). Built in 2001 by Apple for Safari, and open sourced in 2005.
  • Blink: used in Chrome, Opera, Edge, and all chromium based browsers. Forked from WebKit in 2013 by Google.
  • Presto: used in Opera before 2013. It was replaced by Blink.
  • EdgeHTML: used in Edge. It was replaced by Blink.
  • Trident: used in Internet Explorer. It was replaced by Blink.

HTML5, CSS3, and JavaScript

  • Javascript APIs included in HTML5:
    • Canvas Element.
    • Touch Events.
    • Web Storage.
    • Hardware APIs that are useful for mobile web, where it give the browser access to device hardware like GPS, Camera, and Accelerometer.
  • HTML5 brought Web Apps to the same level as native apps, as your websites can access the device hardware and sensors similar to native apps.
  • Interesting HTML5 APIs:
    • Geolocation API: it uses various device sensors (GPS, A-GPD, Wf-Fi) and exposes lots of data including lat/lng, speed, heading, etc.
    • Orientation API: it uses sensors (accelerometer, gyroscope, compass) to determine the device orientation in space and exposes orientation in 3D space, acceleration, and rotation rate.
    • Service Workers:
      • It allows web pages to run scripts in the background.
      • Those scripts work as proxy servers for their web pages, means they can intercept and modify requests/responses by/to their web pages.
      • Purpose: facilitate offline capabilities, background synchronization, and push notifications.
    • Push API: allow web pages to receive push notifications from a server.
    • Notifications API: allow web pages to display notifications to the user outside the context of the web page (like native apps).
    • Web Payments API: allow web pages to accept payments from the user and removes the need to share payment information with websites with unknown security.
    • Touch Events: allow web pages to respond to touch events.
    • Web RTC and media capture: allow web pages to access the device camera and microphone.
  • Combining Push API, Service Workers, and Notifications API, you can build a web app that can receive push notifications even when the app is closed.

Approaches to Modern Web Development

  • Responsive Web Design: Ship the same page to all devices, once the app is loaded, the view is adjusted to the device using CSS.
  • Progressive Enhancement: Ship a minimal page that works on all devices, and then enhance it with more features for more capable devices using JavaScript.
  • Mobile-First Responsive Design: The same as RWD, but the page is designed for mobile first, and then enhanced for larger screens.
  • Adaptive Web Design (Server-Side): The server detects the device and sends a different page for each device according to its capabilities.
  • RESS: Responsive Design + Server-Side Components: The server detect the device category, then it sends a different page for each category, at the device side, the page is adjusted according to the device.

Hybrid Apps

  • Hybrid apps are web apps that are wrapped in a native app.
  • Hybrid apps are distributed through the app stores, and installed like native apps.
  • They consist of a WebView or thin native app wrapper that loads the web app from the server (as if you are opening a web page in a browser).
  • Cordova, Flutter, and React Native can be used to build hybrid apps.

Progressive Web Apps

  • Started in 2015 by Alex Russell.
  • The characteristics of PWA:
    • Progressive: it works on any device and browser, functionality is enhanced based on the capabilities of the device and browser.
    • Responsive.
    • Connectivity independent: it works offline or on low-quality networks.
    • App-like: SPA without page reloads.
    • Fresh: always fetches latest data in the background.
    • Secure: Https only.
    • Discoverable: can be found by search engines.
    • Re-engageable: push notifications and other features that bring users back to the app.
    • Installable: can be installed on the home screen.
  • PWA can be installed from the browser, or from the app store.

Accelerated Mobile Pages (AMP)

  • Started as news and articles style content, but now it is used for all types of content.
  • Focus on speed and performance, all pages must load in less than 1 second.
  • AMP has three parts:
    • AMP HTML: a subset of HTML with custom tags and properties.
    • AMP JS: a JavaScript library that manages resource loading and rendering.
    • AMP CACHE: supports speedy delivery of AMP pages.
  • All valid AMP pages must include a canonical link tag that points to the non-AMP version of the page or itself if it is the non-AMP version.

Web Performance

  • Performance goals:
    • During planning, set a performance budget for the app.
    • Durning development, measure the performance of the app and adapt by optimizing code/images, and reduce the number of network requests.
    • The budget can put a limit on the number of requests, the size of the page, or the time it takes to load the page, etc.
  • RAIL: Response, Animation, Idle, Load.
    • Response: 100ms, give immediate feedback to the user input.
    • Animation: 10ms, animation should produce frames in less than 10ms to achieve 60fps.
    • Idle: 50ms, non critical work should be done in less than 50ms.
    • Load: 1s, the page should be interactive in less than 1s.

Web Testing

References

  1. Tabor, M., & Vrdoljak, M. (Eds.). (2019). Mobile developer’s guide to the galaxy (18th ed.) (pp 1-128). Open-Xchange. https://f.hubspotusercontent40.net/hubfs/9391640/Imported%20files/Mobile_Developers_Guide_18th_edition_web.pdf licensed under Creative commons 2.5. Chapter 1: The Galaxy of Mobile. ↩↩↩↩

  2. Tabor, M., & Vrdoljak, M. (Eds.). (2019). Mobile developer’s guide to the galaxy (18th ed.) (pp 1-128). Open-Xchange. https://f.hubspotusercontent40.net/hubfs/9391640/Imported%20files/Mobile_Developers_Guide_18th_edition_web.pdf licensed under Creative commons 2.5. Chapter 2: From Idea to Prototype ↩

  3. Tabor, M., & Vrdoljak, M. (Eds.). (2019). Mobile developer’s guide to the galaxy (18th ed.) (pp 1-128). Open-Xchange. https://f.hubspotusercontent40.net/hubfs/9391640/Imported%20files/Mobile_Developers_Guide_18th_edition_web.pdf licensed under Creative commons 2.5. Chapter 3: Android Development. ↩

  4. Tabore, M., & & Vrdoljak, M. (Eds.). (2019). Mobile developer’s guide to the galaxy (18th ed.) (pp 1-128). Open-Xchange. https://f.hubspotusercontent40.net/hubfs/9391640/Imported%20files/Mobile_Developers_Guide_18th_edition_web.pdf licensed under Creative commons 2.5. Chapter 4: iOS Development. ↩

  5. Tabore, M., & & Vrdoljak, M. (Eds.). (2019). Mobile developer’s guide to the galaxy (18th ed.) (pp 1-128). Open-Xchange. https://f.hubspotusercontent40.net/hubfs/9391640/Imported%20files/Mobile_Developers_Guide_18th_edition_web.pdf licensed under Creative commons 2.5. Chapter 5: Cross-Platform Development. ↩

  6. Tabore, M., & & Vrdoljak, M. (Eds.). (2019). Mobile developer’s guide to the galaxy (18th ed.) (pp 1-128). Open-Xchange. https://f.hubspotusercontent40.net/hubfs/9391640/Imported%20files/Mobile_Developers_Guide_18th_edition_web.pdf licensed under Creative commons 2.5. Chapter 6: Mobile Web. ↩