KGiSL Institute of Technology

(Approved by AICTE, New Delhi; Affiliated to Anna University, Chennai)

Recognized by UGC, Accredited by NBA (IT)
365, KGiSL Campus, Thudiyalur Road, Saravanampatti, Coimbatore – 641035.

Department of Computer Science and Engineering

Name of the Faculty : Ms.Suriya.A

Subject Name & Code : APP DEVELOPMENT & CCS332

Branch & Department : Computer Science and Engineering

Year & Semester : III / V

Academic Year :2024-25

CCS332/AD/III CSE/VI SEM/KG-KiTE

Prerequisites

• Basic programming skills and knowledge of web technologies (HTML, CSS,

JavaScript).

• Familiarity with mobile platforms (Android/iOS) and object-oriented

programming concepts.

CCS332/AD/III CSE/VI SEM/KG-KiTE

Syllabus

UNIT IV - CROSS-PLATFORMAPPDEVELOPMENTUSINGREACT-NATIVE

What is Cross-platform App, Benefits of Cross-platform App, Criteria for creating

Cross-platform App, Tools for creating Cross-platform App, Cons of Cross-

platform App, Popular Cross- platform App Development Frameworks, Flutter,

Xamarin, React-Native, Basics of React Native, NativeComponents, JSX, State, Props

CCS332/AD/III CSE/VI SEM/KG-KiTE

Course Outcome

CO4: Explain the features of Cross-Platform App Development

Framework-K4

CCS332/AD/III CSE/VI SEM/KG-KiTE

 TOPIC

Tools for creating Cross-platform App

CCS332/AD/III CSE/VI SEM/KG-KiTE

Tools for creating Cross-platform App
Flutter

React Native

Kotlin Multiplatform

Ionic

.NET MAUI

NativeScript

CCS332/AD/III CSE/VI SEM/KG-KiTE

Tools for creating Cross-platform App
Flutter

Released by Google in 2017, Flutter is a popular framework for building mobile, web,
and desktop apps from a single codebase. To build applications with Flutter, you will
need to use Google's programming language called Dart.

Programming language: Dart.

Mobile app examples: eBay, Alibaba, Google Pay, ByteDance apps.

CCS332/AD/III CSE/VI SEM/KG-KiTE

Tools for creating Cross-platform App
Key features:
• Flutter's hot reload feature allows you to see how your application changes as
soon as you modify your code, without you having to recompile it.
• Flutter supports Google's Material Design; a design system that helps developers
build digital experiences. You can use multiple visual and behavioral widgets
when building your app.
• Flutter doesn't rely on web browser technology. Instead, it has its own rendering
engine for drawing widgets.
• Flutter has a relatively active community of users around the world and is widely
used by many developers. According to the Stack Overflow Trends, the usage of
Flutter has been trending up over time, based on the increasing use of the
corresponding tag.

CCS332/AD/III CSE/VI SEM/KG-KiTE

Tools for creating Cross-platform App
React Native

An open-source UI software framework, React Native was developed in 2015 (a bit earlier
than Flutter) by Meta Platforms, formerly Facebook. It's based on Facebook's JavaScript
library React and allows developers to build natively rendered cross-platform mobile apps.

Programming language: JavaScript.

Mobile app examples: React Native is used in Microsoft’s Office, Skype, and Xbox Game
Pass; Meta’s Facebook, desktop Messenger, and Oculus. Check out more in the
React Native showcase.

CCS332/AD/III CSE/VI SEM/KG-KiTE

Tools for creating Cross-platform App
Key features:

•Developers can see their changes in their React components immediately, thanks to the Fast Refresh
feature.

•One of React Native's advantages is a focus on the UI. React primitives render to native platform UI
components, allowing you to build a customized and responsive user interface.

•In versions 0.62 and later, integration between React Native and the mobile app debugger Flipper is enabled
by default. Flipper is used to debug Android, iOS, and React native apps, and it provides tools like a log
viewer, an interactive layout inspector, and a network inspector.

As one of the most popular cross-platform app development frameworks, React Native has a large and strong
community of developers who share their technical knowledge.

CCS332/AD/III CSE/VI SEM/KG-KiTE

Tools for creating Cross-platform App
Kotlin Multiplatform

Kotlin Multiplatform (KMP) is an open-source technology built by JetBrains that allows

sharing code across platforms while retaining the benefits of native programming. It enables
developers to reuse as much code as they want, write native code if needed, and seamlessly
integrate shared Kotlin code into any project.

Programming language: Kotlin.

Mobile app examples: McDonald's, Netflix, Forbes, 9GAG, Cash App, Philips.

CCS332/AD/III CSE/VI SEM/KG-KiTE

Tools for creating Cross-platform App
Key features:
• Developers can reuse code across Android, iOS, web, desktop, and server-side while
keeping native code if needed.
• Kotlin Multiplatform can be seamlessly integrated into any project. Developers can utilize
platform-specific APIs while making the most of both native and cross-platform
development.
• Compose Multiplatform, a modern declarative cross-platform UI framework by JetBrains,
developers have full code-sharing flexibility and the ability to share both the logic and
the UI.
• There's no need to introduce a new language to your codebase when you already use Kotlin
for Android. You can reuse your Kotlin code and expertise, which makes migrating to Kotlin
Multiplatform less risky compared to other technologies.

CCS332/AD/III CSE/VI SEM/KG-KiTE

Tools for creating Cross-platform App
Even though this cross-platform mobile development framework is one of the
youngest on our list, it has a mature community. In November 2023, JetBrains
promoted it to Stable. It's growing fast and is already making a distinct impression on
today's market.

CCS332/AD/III CSE/VI SEM/KG-KiTE

Tools for creating Cross-platform App
Ionic

Ionic is an open-source mobile UI toolkit that was released in 2013. It helps developers
build cross-platform mobile applications from a single codebase using web technologies, like
HTML, CSS, and JavaScript, with integrations for the Angular, React, and Vue
frameworks.

Programming language: JavaScript.

Mobile app examples: T-Mobile, BBC (Children's & Education apps), EA Games.

CCS332/AD/III CSE/VI SEM/KG-KiTE

Tools for creating Cross-platform App
Key features:

• Ionic is based on a SaaS UI framework designed specifically for mobile OS and provides
multiple UI components for building applications.

• The Ionic framework uses the Cordova and Capacitor plugins to provide access to device's built-
in features, such as the camera, flashlight, GPS, and audio recorder.

• Ionic has its own command-line interface, Ionic CLI, which serves as the go-to tool for building
Ionic applications.

• There's constant activity on the Ionic Framework Forum, where community members exchange
knowledge and help each other overcome their development challenges.

CCS332/AD/III CSE/VI SEM/KG-KiTE

Tools for creating Cross-platform App
.NET MAUI

.NET Multi-platform App UI (.NET MAUI) is a cross-platform framework that was released
in May 2022 and is owned by Microsoft. It allows developers to create native mobile and
desktop apps with C# and XAML. .NET MAUI is an evolution of Xamarin.Forms, one of the
functionalities of Xamarin, which provides native controls for the platforms supported by
Xamarin.

Programming languages: C#, XAML.

Mobile app examples: NBC Sports Next, Escola Agil, Irth Solutions.

CCS332/AD/III CSE/VI SEM/KG-KiTE

Tools for creating Cross-platform App
Key features:

• .NET MAUI provides cross-platform APIs for accessing native device features, like the GPS,
accelerometer, and battery and network states.

• There's a single project system which is enabled using multi-targeting to target Android, iOS,
macOS, and Windows.

• With the support for .NET hot reload, developers can modify their managed source code while the
app is running.

• Even though .NET MAUI is still a relatively new framework, it has already gained traction among
developers and has an active community on Stack Overflow and Microsoft Q&A.

CCS332/AD/III CSE/VI SEM/KG-KiTE

Tools for creating Cross-platform App
NativeScript

This open-source mobile application development framework was initially released in 2014.
NativeScript allows you to build Android and iOS mobile apps using JavaScript or
languages that transpile to JavaScript, like TypeScript, and frameworks like Angular and
Vue.js.

Programming language: JavaScript, TypeScript.

Mobile app examples: Daily Nanny, Strudel, Breethe.

CCS332/AD/III CSE/VI SEM/KG-KiTE

Tools for creating Cross-platform App
Key features:

• NativeScript allows developers to easily access native Android and iOS APIs.

• The framework renders platform-native UIs. Apps built with NativeScript run directly on a native device
without relying on WebViews, a system component for the Android OS that allows Android applications
to show content from the web inside an app.

• NativeScript offers various plugins and pre-built app templates, eliminating the need for third-party
solutions.

• NativeScript is based on well-known web technologies like JavaScript and Angular, which is why many
developers choose this framework. Nevertheless, it's usually used by small companies and startups.

CCS332/AD/III CSE/VI SEM/KG-KiTE

Tools for creating Cross-platform App
How do you choose the right cross-platform app development framework for your
project?
1. The expertise of your team

Different cross-platform mobile development frameworks are based on different programming

languages. Before adopting a framework, check what skills it requires and make sure your
team of mobile engineers has enough knowledge and experience to work with it.

For example, if your team is equipped with highly skilled JavaScript developers and you don't
have enough resources to introduce new technologies, it may be worth choosing frameworks
that use this language, such as React Native.

CCS332/AD/III CSE/VI SEM/KG-KiTE

Tools for creating Cross-platform App
2. Vendor reliability and support

It's important to be sure that the maintainer of the framework will continue to support it in the
long run.

3. UI customization

Depending on how crucial the user interface is for your future app, you may need to know how easily
you can customize the UI using a particular framework.

For example, Kotlin Multiplatform offers full code-sharing flexibility with Compose Multiplatform, a
modern declarative cross-platform UI framework by JetBrains. It enables developers to share UIs across
Android, iOS, web, and desktop (via the JVM) and is based on Kotlin and Jetpack Compose.

CCS332/AD/III CSE/VI SEM/KG-KiTE

Tools for creating Cross-platform App
4. Framework maturity

Find out how frequently the public API and tooling for a prospective framework change.

For example, some changes to native operating system components break internal cross-platform behavior.
It's better to be aware of possible challenges you may face when working with the mobile app development
framework.

5. Framework capabilities

Each framework has its own capabilities and limitations. Knowing what features and tools a framework
provides is crucial to identifying the best solution for you. Does it have code analyzers and unit testing
frameworks? How quickly and easily will you be able to build, debug, and test your app?

CCS332/AD/III CSE/VI SEM/KG-KiTE

Tools for creating Cross-platform App
6. Security

Security and privacy are especially important when building a critical mobile app for
business, such as banking and e-commerce apps that include a payment system.
According to OWASP Mobile, some of the most critical security risks for mobile applications
include insecure data storage and authentication/authorization.

You need to ensure that the multiplatform mobile development framework of your choice
provides the required level of security. One way to do this is to browse the security tickets on
the framework's issue tracker if it has one that's publicly available.

CCS332/AD/III CSE/VI SEM/KG-KiTE

Tools for creating Cross-platform App
7. Educational materials

The volume and quality of available learning resources about a framework can also help
you understand how smooth your experience will be when working with it. Comprehensive
official documentation, online and offline conferences, and educational courses are a good
sign that you will be able to find enough essential information about a product when you need
it.

CCS332/AD/III CSE/VI SEM/KG-KiTE