CCS332 App development R-

2021

unit-I
Basics of Web and Mobile application development

 Basics of Web Development

Frontend Development
Backend Development
 Frontend Development
Frontend Roadmap:

Frontend may be HTML, CSS, JavaScript, BootStrap.

Hyper Text Markup Language

Cascading Style Sheets
Bootstrap
JavaScript
Front End Road Map
 Backend Development
Backend may be PHP, Java , Python and Node.js

PHP is a server-side scripting language

Java is one of the programming languages
Python is a programming language
Node.js is an open source and cross-platform
runtime environment for executing JavaScript
code outside a browser.
Backend Roadmap
 Basics of MobileApp Development
Mobile apps are majorly developed for 3 Operating
System.
Android
IOS
Windows

There are 3 different ways to develop Mobile apps:

1 st Party Native App development

Progressive web Application
Cross-Platform Application
 Native App
Native app refers to platforms such as
Mac And Pc

Example for Native App

Photos
Mail
Contacts applications
 Native App Development

Native app development is the process of creating

mobile applications specific to a single platform.

Examples are Google’s Android and Apple’s Ios.

 Flawless Performance
Benefits of Native App Development

Superior UI and UX
Access to Device Features
Better Store Support
More Security
Easy Testing
Fewer Bugs
Instant Updates
Challenges of Native App Development

Higher Development Costs

More Development Time
Need for Skilled Developers
Require Constant Updates
Lengthy Downloading Process
 Tools and Technologies Used in Native App
Development

Native App Development for Android

Native app development for Android uses tools

like
Android SDK combined with Android Studio
Firebase
Android Jetpack
Mockplus
Command-line tools for Windows, Mac, and Linux.
Native App Development for iOS

The tools and resources that support the development

mobile apps for iOS are

 iOS SDK integrated with Cocoa Touch UI

framework
 XCode (official IDE)
 Swift Playgrounds
 TestFlight (for beta testing)
 Hybrid application (Hybrid app)
A hybrid application is a software app that combines
elements of both native and web applications.

Working of Hybrid Apps:

Developers build hybrid apps using web technologies

such as JavaScript, CSS and HTML.
Five Best Examples of Hybrid Apps

Five hybrid mobile apps that is extremely

popular among users across the globe:
 Example #1: Instagram

 Example #2: Uber

 Example #3: Gmail

 Example #4: Evernote

 Example #5: Twitter

 Benefits & Disadvantages
of Hybrid App Development
 Hybrid apps cost less, take less time to create, and are easier to manage
than native ones. Other significant benefits of hybrid app development
include:
Easier scalability .
Single codebase to manage.
Faster build time.
Low cost of development.
 Hybrid app development has a few disadvantages as well: Offline
availability.
User experience.
Lower performance.
Availability of features.
Errors. Hybrid software can come with hidden errors.
 Cross-platform mobile development
 Cross-platform mobile development is an approach to developing
software applications that are compatible with multiple mobile
operating systems (OSes) or platforms.

 Multiple frameworks could be used for cross-platform app

development.

Titanium
React Native
Xamarin
Flutter
Native Script
Ionic
Js
PhoneGap(Cordova)
Examples for cross-platform mobile applications

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)
Pros of cross-platform mobile apps development
Faster development
Lower costs
Wider audience
Consistency between platforms
Reusable code

Cons of cross-platform mobile apps

development
Lower performance
Harder code design
Long wait time for new features
 Progressive Web Applications(PWA)
PWA is a web application like a mobile application that is
stored directly on the mobile from the website.

It creates an icon in the form of a website app, and that

icon feels like a mobile application upon opening.

develop that application for different platforms, such as

iOS, Android, and Windows.
 Characteristics of PWA
 Progressive: The term progressive means, a PWA
application must work on any device and improve the
performance of the user's mobile browser and design.
 Discoverable: A PWA is a website with some extra
features. It can be searched via mobile searching
applications like Google Chrome. App Store or Play Store
is not required for this.
 Responsive: The UI of a progressive web app should fit
the form factor and screen size of the device.
 App-like: A PWA application should look like a native
application. Although the methods for creating, sharing,
launching, and updating of the PWA are completely
different from the original application.
 Connectivity: independent: It works even when
connectivity is very low.
Advantages of PWA

PWA works like an app on mobile and looks very

impressive.
It does not need an update.
It is easily saved in the device.
It's immediately loads on your mobile.
It saves money and time compared to creating applications
separately for android, iOS, and other platforms.
Post can be read even if there is no internet.
Internet data is less used in it.
PWA is cheaper than the other applications.
Disadvantages of PWA

It supports a limited mobile browser. It does not run on

the safari, edge, and IE browser.
iPhone users cannot establish connections securely in it.
It makes maximum use of the battery of the device.
It needs to be hosted on the server because it is a web app.
It cannot be downloaded from popular app stores such as
Google Play and Apple App Store.
PWA does not provide the same level of support for all
devices. For example, push notifications in PWA work on
Android, but not on iOS.
It supports limited hardware functionality
Difference between PWA and Native Application
 Technical components of PWA

Progressive Web Applications (PWA) has five

components.

Web App manifest

Application shell

Service worker

Webpack

Transport Layer Security (TLS)

 Web App manifest
The web app manifest is the first component of the PWA. It is a
simple JSON file that controls a user's application. Usually, it is
named "manifest.json".
 Service Worker
A service worker is a web worker. It is a JavaScript file that runs aside
from the mobile browser.
 Application Shell
The application shell is the third technical component of the PWA.
It is specialized to split the static and dynamic content of the
application.
 Webpack
The webpack is the fourth component of the PWA. It is used to
design the PWA front-end.
 Transport Layer Security (TLS)
The transport layer security is the fifth component of the PWA. This
component is a standard for all robust and secure data exchange
Some popular examples of
Progressive Web Apps

AliExpress
Flipkart
Twitter Lite
Instagram
BookMyShow
MakeMyTrip
 Responsive Web Design

Responsive web design makes your web

page look good on all devices.
Responsive web design uses only HTML
and CSS.
Responsive web design is not a program
or a JavaScript.
 Designing for the best experience for all users
Web pages can be viewed using many different
devices: desktops, tablets, and phones. Your web page
should look good, and be easy to use, regardless of the
device.
Desktop Tablet
Phone
 Responsive Web Design - The Viewport
Viewport
The viewport is the user's visible area of a web page.

Setting the Viewport

HTML5 introduced a method to let web designers take control over
the viewport, through the <meta> tag.

You should include the following <meta> viewport element in all

your web pages:

<meta name="viewport" content="width=device-width, initial-

scale=1.0">

This gives the browser instructions on how to control the page's

dimensions and scaling.
Without the viewport meta tag With the viewport meta tag