Native App
Definition:
A native app is built specifically for a particular platform (e.g., Android, iOS, Windows) using
that platform’s native programming languages:
• Android → Java/Kotlin
• iOS → Swift/Objective-C
Key characteristics:
• Installed directly on the user's device.
• Has full access to the device’s hardware and software capabilities (e.g., camera, GPS,
sensors).
Web App
Definition:
A web app is accessed via a web browser and built using web technologies:
• HTML
• CSS
• JavaScript
Key characteristics:
• Platform-independent (runs on any device with a browser).
• Does not require installation.
• Runs within the browser (example: online forms, eCommerce sites).
Native Web App
Definition:
A native web app is a web app that behaves like a native app, offering a similar user experience.
Key characteristics:
• Built using HTML, CSS, JavaScript.
• Single codebase for multiple platforms.
• Can be added to home screens and run in full-screen mode.
• Uses frameworks like:
o React Native
o Flutter
o Progressive Web App (PWA) technologies.
Scenarios to Create Native App
Developing a native app is preferred in the following scenarios where performance, user
experience, or device integration are critical:
1️⃣ Performance-Critical Applications
• When: The app requires high performance, fast responsiveness, and smooth
animations.
• Why: Native apps can fully utilize the device’s hardware/software for maximum
performance.
• Examples:
o Graphics-intensive games
o Real-time communication apps
o Video editing apps
3️⃣ Offline Functionality
• When: The app must function in offline mode or in areas with limited internet.
• Why: Native apps can store data locally and offer offline capabilities.
• Examples:
o Productivity apps
o Offline games
o Field data collection apps
5️⃣ App Store Distribution
• When: You want to distribute the app via official app stores (Google Play, Apple App
Store).
• Why: Native apps are well supported by app stores and benefit from:
o Broad user reach
o Easy discoverability
o Seamless update mechanisms
6️⃣ Security and Data Protection
• When: The app handles sensitive data and requires strong security.
• Why: Native apps can:
o Better implement platform-level security features
o Follow strict security guidelines of iOS/Android
o Protect user data more effectively
7️⃣ Complex Business Applications
• When: Enterprise-grade apps require integration with complex backend systems.
• Why: Native apps support:
o Advanced APIs
o Custom libraries
o Secure enterprise integrations
• Examples:
o ERP apps
o Enterprise productivity tools
o Custom business workflow apps
Tools and Popular Native App Development Frameworks for Creating Native App
There are various tools and frameworks available for building native apps across different
platforms. These tools aim to improve development efficiency and enable the creation of high-
performance apps.
1️⃣ React Native
• Developed by: Facebook
• Language: JavaScript + React
• Type: Cross-platform
• Features:
o Large community and rich third-party libraries.
o Single codebase for iOS and Android.
o Near-native performance.
o Hot reloading for fast development.
2️⃣ Flutter
• Developed by: Google
• Language: Dart
• Type: Cross-platform
• Features:
o Single codebase for iOS, Android, and more.
o Rich set of pre-built widgets.
o High-performance rendering engine (Skia).
o Expressive, customizable UIs.
3️ Xamarin
• Owned by: Microsoft
• Language: C#, .NET
• Type: Cross-platform
• Features:
o Native performance with platform-specific APIs.
o Code sharing across Android, iOS, Windows.
o Integration with Visual Studio.
4️⃣ NativeScript
• Open-source framework.
• Languages: JavaScript, TypeScript, Angular.
• Type: Cross-platform
• Features:
o Direct access to native APIs.
o High-performance apps with native UI components.
o Support for various popular JavaScript frameworks.
5️⃣ Kotlin Multiplatform Mobile (KMM)
• Developed by: JetBrains
• Language: Kotlin
• Type: Cross-platform (shared business logic)
• Features:
o Code sharing across Android and iOS.
o Platform-specific UIs.
o Excellent interoperability with existing native code.
6️⃣ Ionic
• Open-source hybrid framework.
• Languages: HTML, CSS, JavaScript.
• Type: Hybrid (WebView inside native container)
• Features:
o Cross-platform compatibility.
o Pre-built UI components.
o Easy to integrate with Angular/React/Vue.
8️⃣ PhoneGap / Cordova
• Open-source hybrid framework.
• Languages: HTML, CSS, JavaScript.
• Type: Hybrid (WebView)
• Features:
o Wraps web apps in a native container.
o Supports multiple platforms.
o Quick prototyping for simpler apps.
9️⃣ SwiftUI
• Developed by: Apple
• Language: Swift
• Type: Native (Declarative UI framework)
• Features:
o Build UIs across all Apple platforms (iOS, macOS, watchOS, tvOS).
o Simplified UI development.
o Full integration with Swift ecosystem.
o Live previews and hot reloading in Xcode.
Java & Kotlin for Android
1️⃣ Java
• Traditional and official language for Android app development for many years.
• Supported by the Android platform.
• Large ecosystem and many existing apps are written in Java.
• Good community support and extensive libraries.
• Pros: Mature, stable, lots of learning resources.
• Cons: Verbose syntax, lacks some modern language features.
2️⃣ Kotlin
• Introduced by: JetBrains.
• Modern programming language, officially supported by Android.
• Fully interoperable with Java — can be used together in the same project.
• Concise syntax, null safety, improved readability.
• Announced as official Android language at Google I/O 2️01️7️.
• Rapidly growing adoption in the Android community.
• Many developers now prefer Kotlin for new projects or when migrating old Java
codebases.
Summary:
• Android Studio supports both Java and Kotlin seamlessly.
• Choice depends on:
o Developer preference.
o Project requirements.
o Team expertise.
Swift & Objective-C for iOS
1️⃣ Objective-C
• Original programming language used for iOS app development.
• Mature ecosystem with many libraries and tools.
• Many early iOS apps are written in Objective-C.
• Pros: Stable, powerful, backward compatibility.
• Cons: Verbose, less modern syntax, steeper learning curve.
2️⃣ Swift
• Introduced by Apple in 2️01️4️.
• Modern, safe, fast, expressive language.
• Easier to read and write than Objective-C.
• Rapidly gaining popularity → now the preferred language for iOS app development.
• Features:
o Type safety.
o Optional chaining.
o Improved memory management.
o Excellent performance.
React Native Basics
React Native is a popular open-source mobile framework developed by Facebook (now Meta)
that enables developers to build mobile apps for iOS and Android using a single codebase
written in JavaScript and React.
Key Concepts:
1️⃣ JavaScript and React
• JavaScript is the core language used to build React Native apps.
• React is a JavaScript library for building user interfaces. React uses a declarative and
component-based approach.
• React Native allows you to create mobile UIs using React components, rather than
working directly with platform-specific APIs.
2️⃣ Components
• Components are reusable, self-contained UI building blocks.
• Each component encapsulates its UI structure, style, and behavior.
• Components can be either functional or class-based.
• There are two types:
o Presentational Components: Focus on UI.
o Container Components: Manage state and behavior.
3️⃣ Cross-Platform
• With React Native, you can write one codebase and deploy it on both iOS and Android.
• Some platform-specific adaptations can be made using Platform-specific code or
Platform module.
4️⃣ Native Modules
• For advanced functionalities not supported by React Native (like accessing certain device
sensors or native SDKs), you can write native modules in:
o Java/Kotlin (Android)
o Objective-C/Swift (iOS)
• These modules are then exposed to React Native via a bridge to be used in JS code.
5️⃣ Hot Reloading
• Hot Reloading allows developers to see instant changes when they modify the code.
• Saves time and improves productivity because there’s no need to rebuild the entire app
after every change.
6️⃣ Styling
• React Native uses a CSS-like styling system.
• Uses Flexbox for layout:
o Responsive and flexible design.
o Works well with different screen sizes and orientations.
• Styles are written as JavaScript objects:
javascript
CopyEdit
const styles = {
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
};
7️⃣ Community and Libraries
• React Native has a large community and an extensive ecosystem of third-party libraries:
o Navigation → React Navigation
o Animations → React Native Reanimated
o API calls → Axios
o Forms → Formik
o State management → Redux, MobX
8️⃣ Performance
• React Native apps offer near-native performance for most use cases.
• For highly complex and graphics-intensive applications (games, 3D apps), fully native
development may still be better.
• Ongoing work such as React Native Fabric and TurboModules is further improving
performance.
Native Components
Native Components are React Native components that map directly to platform-native UI
views:
Component Purpose
<View> Acts like <div> in web; container for layout and grouping elements
<Text> Displays text content
<Image> Renders images
<ScrollView> Enables vertical/horizontal scrolling
<TextInput> For capturing user input (text fields)
<Button> Renders a button that responds to user taps
<StatusBar> Allows customization of the status bar
Touchable Components Adds touch/tap interactions to components: <TouchableOpacity>, etc.
Benefits:
• Native look and feel → matches the platform’s design language.
• Performance → components are rendered using native platform views.
JSX (JavaScript XML)
JSX is a syntax extension that allows writing HTML-like code inside JavaScript.
Example:
jsx
CopyEdit
const element = <div>Hello, JSX!</div>;
Features of JSX:
• You can write HTML-like code in JavaScript files.
• JSX expressions can include dynamic values using {}:
jsx
CopyEdit
const name = 'John';
const greeting = <h1>Hello, {name}</h1>;
• JSX will be transpiled to React.createElement calls.
Benefits:
• Makes code more readable.
• Provides a declarative way to describe UI.
States in JSX
State is a built-in concept of React components. It allows components to have dynamic data
that affects rendering.
1️⃣ State in Class Component:
jsx
CopyEdit
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
counter: 0,
};
handleIncrement = () => {
this.setState({ counter: this.state.counter + 1 });
};
render() {
return (
<div>
<p>Counter: {this.state.counter}</p>
<button onClick={this.handleIncrement}>Increment</button>
</div>
);
2️⃣ State in Functional Component (with Hooks):
jsx
CopyEdit
import React, { useState } from 'react';
function MyComponent() {
const [counter, setCounter] = useState(0);
const handleIncrement = () => {
setCounter(counter + 1);
};
return (
<div>
<p>Counter: {counter}</p>
<button onClick={handleIncrement}>Increment</button>
</div>
);
Key Points about State:
• Managed internally by the component.
• Triggers re-render when updated.
• Use useState() hook in functional components.
• Use this.setState() in class components.
Props in JSX
Props (Properties) allow a parent component to pass data to child components.
Props:
• Are read-only.
• Help in reusing components with different data.
Example:
ParentComponent.jsx
jsx
CopyEdit
import React from 'react';
import ChildComponent from './ChildComponent';
function ParentComponent() {
const name = 'John';
const age = 30;
return (
<div>
<ChildComponent name={name} age={age} />
</div>
);
export default ParentComponent;
ChildComponent.jsx
jsx
CopyEdit
import React from 'react';
function ChildComponent(props) {
return (
<div>
<p>Name: {props.name}</p>
<p>Age: {props.age}</p>
</div>
);
export default ChildComponent;
Key Points about Props:
• Props are immutable → child components cannot modify them.
• Used to:
o Pass data
o Pass functions (for event handling)
• Enable component reuse.
