RAD
LOW CODE /NO CODE TOOLS
Mobile App Development Trends in 2024
● AI & ML Integration
● Extended Reality (XR) Experiences
● 5G-Powered Apps
● Privacy and Security Enhancements
● Low-Code and No-Code Development Platforms
● Voice-First Interfaces
● Sustainability and Ethical Design
COURSE OUTCOMES:
CO1:Develop Native applications with GUI Components.
CO2:Develop hybrid applications with basic event handling.
CO3: Implement cross-platform applications with location and data storage capabilities.
CO4: Implement cross platform applications with basic GUI and event handling.
CO5:Develop web applications with cloud database access.
COURSE OBJECTIVES:
To learn development of native applications with basic GUI Components
To develop cross-platform applications with event handling
To develop applications with location and data storage capabilities
To develop web applications with database access
UNIT I FUNDAMENTALS OF MOBILE & WEB APPLICATION DEVELOPMENT 6
Basics of Web and Mobile application development, Native App, Hybrid App, Cross-platform App,What is Progressive Web
App, Responsive Web design,
UNIT II NATIVE APP DEVELOPMENT USING JAVA 6
Native Web App, Benefits of Native App, Scenarios to create Native App, Tools for creating Native App, Cons of Native App,
Popular Native App Development Frameworks, Java & Kotlin for Android, Swift & Objective-C for iOS, Basics of React
Native, Native Components, JSX, State, Props
UNIT III HYBRID APP DEVELOPMENT 6
Hybrid Web App, Benefits of Hybrid App, Criteria for creating Native App, Tools for creating Hybrid App, Cons of Hybrid App,
Popular Hybrid App Development Frameworks, Ionic, Apache Cordova,
UNIT IV CROSS-PLATFORM APP DEVELOPMENT USING REACT-NATIVE 6
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,Native Components, JSX, State, Props
UNIT V NON-FUNCTIONAL CHARACTERISTICS OF APP FRAMEWORKS 6
Comparison of different App frameworks, Build Performance, App Performance, Debugging capabilities, Time to Market,
Maintainability, Ease of Development, UI/UX, Reusability
UNIT I FUNDAMENTALS OF MOBILE &
WEB APPLICATION DEVELOPMENT
UNIT I
UNIT I FUNDAMENTALS OF MOBILE & WEB APPLICATION DEVELOPMENT 6
Basics of Web and Mobile application development, Native App, Hybrid App, Cross-platform App,What is Progressive Web
App, Responsive Web design,
What is web development?
Web development is the work involved in developing a website for the Internet(simple
static page of plain text to complex web applications,e-businesses and social network
services)or an intranet.
What is Web App Development?
Web application development is the creation of application programs that
reside on remote servers and are delivered to the user’s device over the
Internet.
Web Application Development refers to the process of using client-side and
server-side programming to develop an application that is accessible over
the web browser.
A web app is a client side program(client side+server-side)
How does a web application work?
Web applications are accessed through a web browser and need not be
downloaded.
A web application is built around 3 components-a web server,a application
server and a database
Types of web /web app development
Front-end development for web applications is accomplished through
client-side programming(HTML, CSS and JavaScript).
Back end -Server-side programming powers the client-side programming
and is used to create the scripts(ruby,java,python)
A database such as MySQL or MongoDB can be used to store data in web
application development.
Mobile App Development?
Mobile application development is the process of making software for smartphones, tablets
and digital assistants, commonly for the Android and iOS operating systems(Java, Swift,
C# and HTML5).
Mobile First Approach for Digital transformation
Whether the application will be a web-based one, a hybrid one, or a
native one?
1.2 Native App
● A native application is a software program developers build for
use on a particular platform or device.
● It has the ability to use device-specific hardware and software.
● Native apps can provide optimized performance and take
advantage of the latest technology, such as a GPS
why?
Understanding Native App Development
● Creating a native mobile application- develop a program that
will run on a specific device or platform(Android and iOS).
● The native software is coded(iOS- Swift or
Objective-C,Android application-Java and Kotlin) in its
dedicated programming framework compatible only on a
particular mobile platform.
● guidelines are generally related to the platform’s graphics styles,
typography, data entry, visual effects, etc.
If anyone wants to use a platform-specific app, then they will have to
download the app from the platform’s app store such as Android’s Google
Play or Apple’s App Store.
Benefits of native App
★ Seamless Performance Delivered
★ The Speed That An App Needs
★ Intuitive User Experience
★ Strong Data Protection And Security
★ When Flexibility Is A Priority
★ Tailor-Made Development Experience
Drawbacks of Native Apps
Time Consuming development
High Cost
Complex Update
1.3 HYBRID APP
● a single app that can run on multiple operating systems like Android, iOS and
Windows
● Hybrid Mobile Apps can be compiled and transformed into native apps
● Hybrid apps are essentially web applications that have been put in a native app shell.
why?
● Hybrid apps are able to do this by programming the app’s functionality in common
languages such as HTML, CSS, and JavaScript, combined with a small amount of
native code to work with device-specific nuances, such as sensors, data, and
networks.
Benefits of Hybrid App
● Faster but not as native apps
-Shared code = less time
-Developers building hybrid apps are also able to use well-defined and
documented APIs
● Cheaper
● Better
-iPhonography — photography using the iPhone.
-Hybrid apps can easily be configured and deployed as a Progressive Web App
(PWA)
Drawbacks of Hybrid Apps
Graphics and animation
hybrid apps are easily able to translate common elements like
buttons, forms, and checkboxes into the native UI, implementing
complex animations, graphics, and hardware interface is more
difficult.
Plugins and bug-ins -plugins are used to interface with
platform-specific requirements.
Limits in production-not fast as native app
1.4 CROSS PLATFORM APP DEV
Cross-platform apps work on different OS (e.g., Android and iOS) as the code is shareable
and reusable. After writing it once, developers transfer 70-95% of it to other platforms.
You create these apps using cross-platform frameworks, which use platform-specific SDKs
(Android SDKs and iOS SDKs) from a unified API. This enables you to easily access the
different platform SDKs and libraries.
Private companies create these frameworks. Examples of popular cross-platform
frameworks include:
● React Native by Meta. It uses JavaScript as the programming language.
● Flutter by Google. It uses Dart as the programming language.
● .NET MAUI by Microsoft (formerly Xamarin). It uses C# and XAML as the
programming language.
Cross-platform mobile apps are usually compiled to use native UI elements that make the
app feel native. As mentioned earlier, they provide an abstraction to the underlying
platform SDKs. The exposed sensors include access to GPS, battery level, camera, and
microphone.
Well-known examples of cross-platform mobile applications include:
● Instagram, Skype, Walmart, and Airbnb (React Native)
● Google Ads, My BMW App, eBay Motors, and the New York Times (Flutter)
● The World Bank, Fox Sports, Alaska Airlines, and BBC Good Food (Xamarin)
Why Airbnb revert back to Native App from cross platform ?
Top Cross-Platform Development Frameworks
Benefits
● Low costs
● Code reusability
● Rapid development
● Easier maintenance
Drawbacks
● Larger digital footprint: Cross-platform apps are usually larger.
● Difficult integrations: Cross-platform frameworks do not integrate all
platform-specific features. Some hardware-specific integrations like using GPUs
might need skills in native app development.
● Lower performance: Cross-platform frameworks usually bundle a custom runtime to
run your app.
● Delayed platform features: New SDK releases typically include new features and
updates. With cross-platform frameworks, you have to wait for a separate update to
access these newer features.
What is Progressive Web App
● a type of app software delivered through the web, built using common web
technologies including HTML,CSS,JavaScript and WebAssembly. It is intended to
work on any platform with a standards-compliant browser, including desktop and
mobile devices.
● Developers can simply publish the web application online, ensure that it meets
baseline installation requirements(Apple App store and Google Play is optional)
● PWA features are supported to varying degrees by Google Chrome,Apple
Safari,Firefox for Android, and Microsoft Edge but not by Firefox for desktop
In 2007-steve Jobs -web apps(HTML using AJAX architecture)would be the standard format for
iPhone apps -the apps would be fully integrated into the device through the Safari browser engine
Jail breakers -October 2007 Jobs announced to launch SDKs the next year
App Store
● 2010-dynamic web pages
● Responsive web design (fluid proportion based grids,flexible images,CSS3 media
queries)
● Continued enhancements to HTML, CSS, and JavaScript allowed web applications to
incorporate greater levels of interactivity, making native-like experiences possible on
a website
● In 2013-2016 Mozilla released Firefox(Gecko rendering engine ) for running web
apps as native apps on mobile devices.
● In 2015 Frances Berriman and Google Chrome engineer Alex Russell coined the
term "progressive web apps" taking advantage of new features supported by modern
browsers, including service workers and web app manifests for upgrades.
● To varying degrees, the major app stores support the publication of PWAs. Google
Play, Microsoft Store, and Samsung Galaxy Store support PWAs
● Progressive web apps employ the progressive enhancement web development
strategy.
● Some progressive web apps use an architectural approach called the App Shell Model.
Development Blocks -runs over HTTPS or the localhost
1. A secured connection (HTTPS)
2. A service worker -has a manifest.json file
3. The manifest file provides infor about -has a service worker
the application
-is responsive,smooth and app-like
https://developer.mozilla.org/en-US/d
ocs/Web/Manifest
Service Worker
The Application Shell architecture facilitates caching
your app shell, the user interfaces so that it runs
offline and populates the content utilizing JavaScript.
Drawbacks of PWAs
● PWA Cannot Do Everything
● Access Restrictions
● Issues with legacy devices
Func of native apps Native app
Stand alone apps
Load instantly
browser/window ora desktop computer(paint)
Offline
Web app
Support for push notifications
Easy to share n maintain
App window
To make it public publish ur web app in the web server
Req no need to run update as the users access from the
web server
with the url
Progressive web app
Angular,react or blazor
Responsive Web Design
● Responsive web design (RWD) is a web design approach to make web pages
render well on all screen sizes and resolutions while ensuring good usability-for a
multi-device web.
● HTML is fundamentally responsive, or fluid
● it is an approach with a set of best practices used to create a layout that can
respond to any device being used to view the content.
● The term responsive design, coined by Ethan Marcotte in 2010, described using
fluid grids, fluid images, and media queries to create responsive content
Responsive Web Design is about using HTML and CSS to automatically resize,
hide, shrink, or enlarge, a website, to make it look good on all devices (desktops,
tablets, and phones)
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<img src="img_girl.jpg" style="width:100%;">
Responsive Text Size
The text size can be set with a "vw" unit, which means the "viewport width"(1vw
= 1% of viewport width,If the viewport is 50cm wide, 1vw is 0.5cm)
<h1 style="font-size:10vw">Hello World</h1>
Media Queries
● In addition to resize text and images, it is also common to use
media queries in responsive web pages.
● With media queries you can define completely different styles
for different browser sizes.
<style>
.right{
.left{ background-color:brown;
background-color: width: 100%;
aquamarine; }
width: 100%; /* Use a media query to add a breakpoint at 800px: */
} @media screen and (max-width: 800px)
{
.main{ .left, .main, .right {
width: 100%; /* The width is 100%,
when the viewport is 800px or smaller */
background-color:blueviolet;
}
width: 100%; }
}
</style>
Add a breakpoint with media queries
@media screen and (max-width: 800px) {
.left, .main, .right {
width: 100%; /* The width is 100%, when the
viewport is 800px or smaller */
}
}
Web resources
How to build cross-platform mobile apps? - AppMySite
https://www.fingent.com/blog/web-application-development-a-detailed-guide/
Everything about Android - TECHurosity | new technology 2016 | TECH News | Latest Gadgets
Native app
https://www.tigren.com/blog/advantages-and-disadvantages-of-native-app-development/
https://www.mightynetworks.com/resources/native-app
React Native
https://youtu.be/YJicco3jXBA
Full stack
http://video.k7cloud.in/
https://kesavaraja.wordpress.com/zoho-rural-youth-empowerment-training/
Progressive web Apps
Progressive Web Apps: 7 Features, Architecture, Pros & Cons (monocubed.com)
