UNIT I FUNDAMENTALS OF MOBILE & WEB APPLICATION DEVELOPMENT 1

Basics of Web and Mobile application development, Native App, Hybrid App, Cros-platform
App, What is Progressive Web App, Responsive Web design
Basis Mobile App Development Web Development
Definition Mobile Apps are software programs that Web applications, on the other hand,
run on smart phones and tablets. are accessed through a web browser
and are very adaptable to any device.
Build process A developer is often hired by acompany HTML5, CSS, and JavaScript may all be
to produce a native or hybrid mobile app. used together.
Functionality When compared to full-fledged website Web apps provide a far broader range of
visitors, mobile app users frequently functions than mobile apps.
receive restricted functionality, and many
of these applications are focused on a
specific aim.
Platform These fall in the category of Native Web apps provide a far broader range
dependency applications that are created to work with of functions than mobile apps.
something like mobile device's Adobe Photoshop, for example, provides
operating system (0S). customers with both a mobile app and a
web version.
Connectivity The primary distinction between these Online apps require an active Internet
and Updates two applications is that Mobile apps may connection to function
frequently function when disconnected.
Skills May use the Swift programming Web development languages and
language, Objective-C, and the XCode frameworks available to developers
IDE, whereas Android developers can HTML, JavaScript, Python, PHP, and
use Java or Kothn with the Eclipse IDE. Ruby are some of the most popular
HTML, JavaScript, and CSS are the most languages. Laravel, and Rails.
often used languages for bybrid apps.

Mobile application development

e
Mobile application development is the process of making software for smartphones, tablets and digital
assistants, most commonly for the Android and iOS operating systems.

The software can be preinstalled on the device, downloaded from a hobile app store or
accessed
through a mobile web browser,

The programming and markup languages used for this kind of software development include Java,
Swift, C# and HTMLS.

Mobile app development /is rapidly growing, From retail, telecommunications and e-commnerce to
insurance, healthcare and government, organizations across industries must meet user
expectations for
real-time, conyenient ways to conduct transactions and access information.
 1
Web Application:
A web application is an interactive program that runs on a web server and is accessed through a web
browser
A web app is built so that the user interface provides data back to the development team that designed
it

This data offers insights into customer interests, usage, and preferences that can prove invaluable to
product and marketing strategies
The data can also inform optimization and other client-centered aspects of the mobile app or desktop
applications.

[Link] App Development vs Web Development: Definition

Mobile Apps are software programs that run on smartphones and tablets. They may be downloaded
and installed on the user's device through an app store such as Google Play or the Apple Store.
Apps are created to run on certain operating systems or platforms, such as iOS for Apple products
or Android for Android smartphones and tablets, and they are given access to sy stem resources
such as cameras, storage, mie, contacts, and more. Facebook Messenger, Snapchat, Instagram,
Twitter, and Tumblr are some of the most well-known applications.

Web applications, on the other hand, are acçessed through a web browser and are very adaptable
to any device. Because web applications are not native to any device and do not need to be
downloaded or installed, they look and act very identjcal to mobile apps, causing much confusion
among users. It's also vital to remember that before designing web lapps, any web developer must
master specific abilities.

2. Mobile App Developnent vs Web Development: Build process

Mobile Application Development
 6:37 59

padeep
Our Mobile App Devlopemnt Process
02 06

Strategy Analysis & U/UX Design App

Testing Deployment &
3
Planning Create products that Development Valdate your App Support
Detine stratagie quaity throughiy Launch on the
provide meaningfu Develop backend
lentify requirement &wnioyable eperiences ADI& Mobile app
with a series of a
apples store or google
for users testing certieria upport for future
hul map str sglle development
reviion
procuct map process

03 O5

and is identifiable by a build

A build is a version of aprogram that is usually a pre-release version A software build is just a
number rather than arelease number in a programming environment.
collection of computer code that is in the form of a build package ready for usage by consumers
binaries to ensure
The DevOps team compiles source code, such as Java or C++ code, into
functionality and code quality before submitting it Software is continual ly updated until the creator
and several public software
decides to stop supporting it. This might include a succession of builds
releases.

product development
Iterative builds, also known as active integration, are an important part of a basis for testing to
regular
phase for which application components are gathered and built on a application developers
ensure a stable final result. Furthermore, build tools allow web and mobile
streamlining the process
tooutsource certain programming processes, further

a native or hybrid mobile app. If you have

A developer is often hired by a conpany to produce mobile
programming abilities, you may also try your hand at app creation. Previously, you had to
iOS, or Windows Phone to create apps for
utilize the software development kit (SDKA for Android,
those platforms. In the development of mobile apps, you may now use intermediate languages such
as JavaScript.
platform's approved language The
Native mobile applications are built by developers usinginthe
the device's memory
mobile app is downloaded from an app store and saved

Different Steps in Mobile App Development Process

Strategy Planning
2. Analysis & Planning
3. UI/UX Design
4. App Development and Launch
5. Testing
6. Deployment and support
7. App Enhancement
Ap
 6:37 59)

padeepz
Steps in Strategic planning
ldentify business objectives
This could be one thing or a number of things. However, it's important to note that your mobile app
strategy should support these overall business goals. Start at the very top and engage with
stakeholders and senior execs to fully understand the company's overall strategy and work down
from there. Ask questions like
What is the mission of the company? 4
What is the company's vision?
What are the objectives? le. what is the final outcome your company's strategy wants to
achieve?

What is the scope of the strategy?

What is your competitive advantage?

Market research
Once you've got a clear understanding of the overall business strategy, it's time to get stuck
into some deep research. Look at the competitors within the specific app category you're looking to
enter - what pain point are they addressing and for who? Look at their customer demographics and
the things they aren't happy with in the current market. Is that particular market already saturated
with apps addressing those exact customer pain points? Recent findings show that the Apple App
Store received over 3,100 app submissions during March 2022 - so asking these questions is
critical to ensure the best chance of success. There's little use in developing an app that either
doesn't alleviate a customer pain point or that will only be added to an overwhelming list of other
apps that are already doing what you do, and perhaps even better.

Identify end user pain points

epz
One of the most important aspects of developing a successful mobile app strategy is
identifying
user pain points. By understanding the specific needs and wants of your target audience, you can
develop an app that provides real value and solves real problems

The three most important ways to identify user pain points inciude:
User feedbacCollecting feedback, such as interviews, surveys, or even reading customer
support tickets,an offer valuable insightful information about your app and any user
difficulties you need to fix,
App analytics App analytics data can also be helpful in identifying user pain points by
showing you areas where users are dropping off or struggling
User testing -Get real users in your target market's demographic try to accomplish tasks
within your app and see where they run into difficulty. If you don't yet have an app. you can
do user testing on competitor apps to see if there are UX problems you can try to avoid to
gain a competitive advantage.
 6:37 &&0
e49C59)

Competitor strategy analysis

padeepz
With a list of competitors to hand, you now need to look at their
product marketing, sales,
and marketing tactics, to see what they' re doing well, and avoid any
mistakes they're màking. You
will also likely discover things your competitors are not doing at all,
which may prov Ide an
opportunity to differentiate yourself in a difficult and competitive market. What stands out to you -
are they doing anything unique that you perhaps haven't seen before? If so,
why? These are all
questions to consider when conducting a competitor strategy analysis. Once you've answered thes
questions, you ll have a pretty good idea of how your competitors work and how you can ensure 5
your app will be even better.

Define your mobile app strategy

Gather data. Before you can start drafting your personas, you must do market research or user
research by gathering data you may already have on your customers
Analyze data.
Create your personas.
Add categories
Continue to update personas
Analysis & Planning
First, you' ve got to get specific with the actions that you want your mobile app to perform IEyou' re
building an app for the finance indust perhaps you'll need it to create new accounts, mánage credit
cards, make payments, generate accountstatements, and so on
The tasks that your software has to perforn yilf go into your functional requirements document That
way, you'll gain a clearer idea of what features haye obe devéloped.

Ap
Then, you will also need to think about the non-functional requirements of the software. These relate
to the quality of how your system perforns and have a big impact on the user experience
To turn your business idea intoa working solution, you need to clarify the following
Business requirements include high-level statements of goals, objectives, ànd needs of
your project.
Stakeholder requirements help to find what you expect from a particular solution
Solution requirements describe the product characteristics that will meet your
expectations and business needs. They include
o Functional requirements describe ways a product must behave
o Nonfunctional requirements, also known as quality attributes, describe the general
software characteristics
Parameters Funçtional Requirement Non-Functional Requirement

Requirement It isandatory It is non-mandatory

itis captured in the use

Capturing type case. Itis captured as a quality attribute
End-result Product feature Product properties

Capturing8 Easy to capture Hard to capture

Describe whatthe product
Documentation does Describes how the produet works
6:37

Product Info

Functional requirements
padeepz
Product Features Product Properties

Functional requirements need to be clear, simple, and unambiguous Here are some etamples of wel
written functional requirements
The system must send a confirmation email whenever an order is placed

The system must allow blog visitors to sign up for the newsletter by leaving their email
Some examples of functional requirements would include

Authentication
6
Business core
Transactions, checkouts

Authorizations
Historical data

Non-functional Requirements
Non-functional requirements are requirements that define how the app must perform acertain
function In essence, they are the quality
atifbutes of an app that define the user experience of the app.
They are also known as non-behavioral requrengents and are to be implemented according to their
priority to the app function This makes them fle ble to an extent, making it possible to skip a few in
case of time, budget or technology constraints.

Some examples of non-functional requirements wouldIinclud

Loading speed
Time taken to deliver server response
User response time
Data consumption limits

Product Roadmap

This process is much like preparing for the future and making a detailed plan of how you'll reach the
end goals you've set
On the day your Minímum Viable Product (MVP) is released, you want it to be successful and avoid
any potential faitures Hence, during the product roadmap creation, you note down all of the things
that you want your app to be able to do. Tihen, you make a ranking of the top priority functions and
consider which features can be added at a later date.
Technology Stack
The last part of the analysis and planning phase includes identifying the skills needed for your mobile
project
6:37

UI/UX design
padeepz
In order for users to get the best experience, a lot of attention has to be paid to an app's design If it
turns out messy or faulty, users willimmediatcly flock to competitors and abandon the tool you've
worked so hard on That's why this step requires a lot of effort when you want to create an app that
users love

So, your UVUX design has to be intuitive, user-friendly, engaging, and ofler a seamless experience
Let's keep that in mind while we look at each of the design areas more closcly

Information Architecture and Workflows

One of thefirst steps of the app design process is developing rules as a part of your app's inform 7
architecture. You'll need to establish what data will be present within your app, how it wil
displayed, and how the users will interact with it.

On the basis of the above, you'll then ereate workflow diagrams that can be very helpful in keeping
track of all possible user interactions. Essentially, they will let you see how your app's navigation is
implemented

Wireframes
Business analysts create digital sketches called wvireframes. These are basically conceptual layouts that
provide a visual structure of your app's functionality
Read up on The Role of Business Analysis in Mobile Projects
Wireframes usually emphasize the user experience and app aesthetics. All to ensure that the finished
application is intuitive and seamless to use.

Style Guides

epz
Style guides are created so that your company branding oan be easily found within a single document.
These records usually contain the following design aspect of yår app:
Fonts
Color scheme
Spacing and positioning instructions
Buttons

Widgets
Other relevant design elements
Style guides are essential to your app's design strategy. They help maintain consistency within your
app and ensure its look and feel are always harmonious.

Mockups
After you've created your app style guides, it's time to move on to mockups. Essentially, these are the
final renderings of your app visuals, and they are created by applying the style guide to the
wireframnes,
After completing this stage, the most important thing is to ensure that your design is consistent
throughout the app
Prototypes
Finally, the last step of the UI/UX design process is developing prototypes.
Prototypes let you simulate the user experience and the app's entire workflow. That way, you get a
good sense of how everything will work upon completion
 6:38 & Ve4 5 9 )

padeepZ
This stage of the process can be time-consuming but don't overlook it
When done properly, a
to fix
prototype can help you detect any design and functionality mishaps that you may want

App Development
prototype and
This phase starts quite early in some sense. From working on a functional
progresses
reviewing it with every step. it's all a part of the development stage. But as this stage
All
further, the core functionalities are deeply tested. The app is then moved to the deployment phasedown
application is broken
the bugs are also fixed & taken care of If it's a complex project, the large
into smaller modules and dealt with in parts before putting everything together, so that the app is ready
for release

Testing
In the mobile app development lifecycle, testing plays a very important role It's often a good
to start testing early as this could help with keeping the final costs in check The farther
one goes
idea
issues. At this stage, the
in the development life cycle, the costlier it is to fix bugs and other technical
security
app should ideally be tested for every aspect including usability, compatibility, interface,good idea.
checks, stress, and performance Inviting some of your target audience to test it would bea
situation
This feedback from beta users will indicate whether your app can work in a real-world
Maintenance and Support
the formal
Finally, at this point, your app should be ready to submit Select a day to keep
development. Keep those
launch. Launching policies will vary for android app development &iOS appprocess.
factors in check And lastly, keep in mind that this isn't the end of your In faCt, it's a new
you will need to
beginning of its own. Once the app iSs out there, feedback will start pouring in, which cycle. Keep a
accommodate into the future versions of your [Link], starting the new development
throughout this step. And
check on your resources and your long-term commitment to your project
that's it With this, you've reached the end of the final stagel
Web Application Development

Technical Proposal &

review

Business Process
Analysis
ader
Web Application
Developement
Application Development

Monitoring, Analysis &

Control

Process
Development &Training
Business Model
Identification

Maintenance &Support
 padeepz
What is Web App Development?

Web app development is the process of building an application program, to be specific, an

program that is stored ona server, delivered to users through an active internet connection,application
via a web
browser. Since web apps are accessed online, users do not need to download, or store, web apps on
their device - be it a desktop workstation, laptop, or mobile device - in order to run them.
In terms of web design, hybrid applications provide more freedom. HTMLS, CSS, and
may all be used together. This is due to the fact that they are web applications meant toJavaScript
look and
function like native apps. As a result, many developers believe that hybrid apps are faster and easier
to create While hybrid apps can utilize many aspects of your portable device, they are driven by an
internet browser, whereas native apps do not.

A mobile web app is often created by combining two types of coding languages. Client-side
scripting languages, such as JavaScript or CSS, depends on your web browser to run programr
Server-side scripting is typically written in languages such as Python, Objective-C, or Java.

This section of code is in charge of receiving, storing, and transferring data from the browser back
to the server. There's also HTML, which is a markup language.

A single developer or a team of developers lead by a software engineer can create a web app. Web
application work by receiving user nput, which is often supplied via a web form. That data is
transferred back to the app server, whigh performs the requested operation and returns the results to
the browser, which can be on a desktop-or mobile device.

There are four major development approaches whon building mobile applications
" Native Mobile Applications
Cross-Platform Native Mobile Applications
" Hybrid Mobile Applications
Progressive Web Applications épz Ap
Each of these approaches for developing mobile applications has its ow set of advantages and
disadvantages. When choosing the right development approach for their projects, developers consider
the desired user experience, the computing resources and native features required by the app. the
development budget, time targets,and resources available to maintain the app.
Native Applications

Native mobile applications are written in the programming language and frameworks provided by the
platform owner and running dirçctly on the operating system of the device such as iOS and Androd.
6:38
59)

padeepz
Native App Development Process
The term native app refers to platforms such as Mac and PC. The Photos, Mail or Contacts
applications that are preinstalled and configured on every Apple computer is the example for
Native App.

2.1. Native App Development

Native app devclopment is the process of creating mobile applications specific to a single
platform.
Examples are Google's Android and Apple's Ios.
The programming languages and tools required for developing native apps are specific to
cach platform. Android app developers would use Java or Kotlin. whereas iOS app
developers would use Objective C or Swift. A native Android application cannot run on the
iOS system, nor can a native iOS app run on the Android system.

For users to access the native applications, they have to download them Irom the platform
specific stores, i.e., App Store for iOS and Play Store for Android.

Benefits of Native App Development 11

1. Flawless Performance

Since native apps are dgyelopcd for aspecific platform they are conpletely
optimized for that particularphriarm They use the platform's core progranmning language
and APls. Further, they get complojehydware and OS support. These factors conibine to
make sure that they provide the best p performánce.
Another reason for their fast and r ve nature is that all the visual and content
clements ofa native app are downloaded and stered onthe device. So as auser navigates
through anative app, everything loads quickly, thercbygansiderably reducing the load speed.
2. Superior UI and UX
Every platform has aset of guidelines designed to enhunce the user experience. When
these platform-specific guidelines are followed, the applications behave as if tar-it for tht

platfornm. Thc hok and feel is completely consistent with the operating system, making
them fecl like aiiegralpart of the platform
Thus, for a User using a native app. the learning curve is very low. They can
understand the app layout naturally and interact with it in an intuitive manner, Their
familiarity with the actions and gestures enable them to navigate through the app quickly.
The consistent Ul and superior UX isa great benefit offerod by naive apps.
6:38 &&0 4959)

padeepz
3. Access to Device Features

Native apps can directly access all the tools and features of thc particular device and
operating system. They can access hardware components like GPS and camera without the
need for any intermediary plugins. This dircct access to device features encourages faster
execution of the apps and also opens the door for more creative solutions to be implemented.
4. Better Store Support
Since native apps adhere to the guidelines of the specific platforms, it is casier to
publish them in the respective app stores. Better compliance wih store guidelines enables
them to get ranked high on the app store. These apps receive better store support as they
deliver consistent performance.

5. More Security
Conpared to cross-platform app development, native app development is more
secure. As they are not dependent on different browsers or development platforms, they are
less vulnerable to security threats. Also, the use of platfom-specifie programming language
plays arole in increasing data protection. In hybrid apps, the use of universal languages
increases the risk clements. Native apps offer better data encryption and higher levels of
protection.

12

6. Easy Testing
Padepz Ap
Asignificant advantage of nativeapp development is the availability of inbail testing
tools. This makes app esting casier and more efficient. It enables better troubleshooting
accurate eror detection and makes it simple for developes totest apps and find bugs.
7. Fewer Bugs
In hybrid app development, there is a dependency with mobile app development
frameworks like lonic or Xamarin. This bridge adds an extra layer, which increases the
chances of bugigteurringduring development. In native apps, there are fewer dependencies
and hence fewernces for bugs to occur.
8rInstant Updates

Native apps can access the latest Android and iOS releasc updates quickly. This
allows devclopers to build native apps with the latest features,enabling Users to access new
features with an OS update.
But for hybrid apps, the developers have to wait for the dependent tools to inplement
the new features. Therefore the users of hybrid apps cannot access the latest updates
instantly. This hampers the user experience to alarge extent.
6:38
459

padeepz
Challenges of Native App Development
Despite the many wonderiul benefits of
or challenges. Let us see
1. Higher
native apps, they also have some
what they are and how they
allect native app
drawbacks
Development Costs developmen.
Since you willhave to build
will get costly. For each separate apps for dilerent
plattorm you will nced to hire platforms, the development
different
separately or cach [Link]
app maintenance also has to be done teams. Furher.
of native app This is a major
2. More
development. challenge
Development Time
Unlike hybrid apps, native apps
Separate codes need to be writen for cannot usea single codebase for multiple platfornns.
dilferent platforms. That doubles up the
development. time of app

3. Need for
Skilled Developers
The development native apps is somewhat comnplex,
developers needed to
are anda skilled cam of
crecSuccesstul
more advanced, and it isn't
easy o und
native app. Thc
progranmng languages us 13
4. Require Constant Updates developers proficient in those languages.
Whenever there is a
latest version from the new update efg fix, the users have to
update the app to the
operating the app. respective app store. Olherwse, they may experience glitches while
5. Lengthy
Downloading Process
Compared to
is that naive apps web app development, a major
have to be
downloaVed.
including going to the app store,
finding
The
Pp
an app,
app disadvantage of nativg app
development
download is a multi-step process
installing. This requires users to spend complying with its
attrition. considerable time and effort terms,
and maydownloading,
result user
in
and
Tools and
Technologies
Native app
Used in Native App
and compiling development involves writing code in the Development
thaative code to run on a processor. To native programming language
native app casier,
developers use two make this process of
integrated development toolsasoftware development kit creating a
environnment
SDK is a set of tools (IDE). (SDK) and an
that a
particular platform. These tools developer would need while writing
well as libraries, include compilers, programs for a
frameworks, header iles, ete. debuggers, profilers, and other tools, as
6:39 & &0

padeepz

An IDE is a platfornm for writing and debugging applications. It brings together all the
components needed for programming in onc place. An IDE creates aconvenicnt user
interface for developers to make programming casier.
Some SDKS have dedicated IDEincluded with them while some don't. If an SDK
does not include an IDE, developers can download and install any compatible IDE or use a
text editor to write programs.
Native App Development for Android
Native app developmnent for Android uses tools like
Android SDK combincd with Android Studio

Firebase
Android Jepe
Mockplus
Command-line tools oWindows, Mac, and Linux.
The programming language that es is Java or Kotlin. Java is a popular
aspect of
programming language uscd widely by devclopurs allover the world. A notable
code can run on
Java is its Write once, run anywhere" feature. It menns that a compiled Java
any Java supporting platform without [Link] object-oriented progranming
language and is secure, robust, and developer-Iriendly.
Native App Developnment for iOS
The tools and resources that suppdrt the development of mobile apps for ibS are
iOS SDK integrated with Cocoa Touch UI franmework
XCode (official IDE)

Swift Playgrounds
TestFlight (for beta testing)
6:39 &&0
59

padeepz
Apart from these, there are also third-party tools like
The programming language Swit is known for its
AppCode and CodeRunner.
speed, safety, and leading
advancements aimed to provide consistent and powerful performance to
well recognized for its excellent error devèlopers. Swift is
detcction and handling capabilities,

Cross-Platform Applications
Cross-platform native mobile applications can be written in variety of diflerent
languages and frameworks, but they are compiled into a native application running programming
operating system of the device
directly on the

Hybrid Applications
Hybrid mobile applications are built with standard web technologies - such as
HTML5 -and they are bundled as app installation packages. JavaScript, CSS, and
Contrary to the native apps, hybrid apps work on a'web container which provides a
browser runtime
and abridge for native device APls via Apache Cordova.
Combines elements of both native and web applications
A hybrid app is one that can be downloaded and installed on multiple mobile
platforms like Android
and iOS. I's built in a way that allevs developers to Use the same code for all
operating systems

Five Best Examples of Hybeid

Apps

1. Example #1: Instagram

2. Example #2: Uber
3. Example #3: Gmail
4. Example #4: Evernote
5. Example #5: Twitter
Áepz Ap
Five hybrid mobile apps that is extremefypopular among users across the globe:

Pros & Cons of Hybrid App Development

15

Hybrid apps cost less, take less time to create, and are casier to manage than native ones, Other
significant benefits of hybrid app development include:
6:39 &&O

padeepz
Easier scalability. Because hybrid apps use a single codebase, they can be
deployed
devices. For example, when you build hem for Android, you can quickly launch across
them on
iOS.

Single codcbase to munage. Unlike native app building, where you have to create two
with hybrid software building, you develop only one app. so you only need to manage apps.
one
database.

. Faster build time. Since there is one database to manage, it takes less time to
than native apps. make a hybrid

" Low cost of development. Hybrid mobile apps cost less than
native apps. Becausc developers
Write one set of code. the initial costs and the maintenance costs are low.

OMine availability. Hybrid apps will work in an offlinc mode due to their native
infrastructure. Users can still load the application and see the previously loadcd data if they
cantaccess real-time data.

Disadvantages

User exDerience. Considering that there is one codebase for all platforms, the user experience

might not be positive. We are talking about ditlerent operating systems, so it is ditlicultto
customize an app bascd on one platform.
Lower performance. Hybrid mobile apps load in a web view that is diilicult to reach a native
performance, and that's one of their biggest drawbacks.
Availability of features. Somg tyw features of the hybrid soltware are not available for some
platforms. What's more, some natiye features may not even exist.
Errors. Hybrid software can come ith idden errors.

Progressive Web Applications

PWAs offer an alternative approach to traditional mobile app development by sk1pping app store
delivery and app installations
PWAs are web applications that utilize aset of browser cap bilkties -such as working ofline, running
a background process, and adding a link to the device hopre sereen - to provide an 'app like' user 17
experience.

Cross-Platform Applications

Cross-platform native mobile applications can be written in variety of difierentrogramming

languages and frameworks, but they are compiled into a native application running dirètly on the
operating system of the device.

3. Cross-Platfoxpplication:
These are Iroseworks that allow developing total native applications which have access (o
all the native features of 1OS and Android but with the same code base. These apps run on both
Android and 1OS,So normally the development speeds of these apps are very fast and the
maintenancecost is low, The perfornance specd is comparatively low te lIst party native apps but
faster than PWA.

Example,
Here's an example ofa cross-platorm application:
A projcct management company wants to create aproject management tool that can be used by
teams on ditferent platforms. They develop acrosplatform application that:
6:39 Xe 49 59

padeepz
Can be uscd on WVindows, Mac, iOS, and
Android devices
Allows users to create and assign tasks, set
deadlines, and track progress
Integrates with popular tools such as Google Calendar and Trello
Has a user-friendly interlace that works scamlessly across all
platforms
"The application can be downloaded from the company's website or
from different app stores
such as App Store. Google Play Store. Microsoft Store, and Mac App Store,
depending on the
platform.
This example illustrates how the company developed a project management tool hat
can be uscd
by teams on different platforms, Windows, Mac, iOS and
Android, which is a cross-platform
application. It allows (eams to collaborate and manage their projccts seamlessly. regardless of the
Cross Platform Mobile Development
Cross-platform mobile development is an approach to developing software applications that are
compatible with multiple mobile operaling systems (OSes) or platforms.
Multiple frameworks could be used for cross-platform app devclopment.
Titanium
React Native
Xamarin
Flutter
Native Script
" lonic
" Js
PhoneGap(Cordova)

1. Faster development
Padepz Ap
Pros of cross-platform mobile apps development

With eross-platform solutions, deelopers mostly work with one codebase which handles iOS
and Android and there is no need to build separate Android or iOS projects. Everything is in one
place. Cross-platform applications are built as single projects but support diflerent devices. It is
possible to reuse a big part of an app's code between platlorms, and that's why development is much
18

quicker.

2. Lower costs

In compario native applications, across-platform one can be about 305% cheaper than
building i0Sand Android apps separately. We just have one project for both iOS and Android. and
big chunks of code and other assets can be reused between the platforms, In this way, cross-platlornm
development is faster so, as a result, the overall cost for each platform is less than developing native
mobile apps.
6:39 &&0 459)

3. Wider audience
padeepz
Many app owners face a challenge when starting with mobile app develepment: is it better to
create an Android or an iOS application firs? No matter which platform has a bigger markct, it is
always a trade-off which can cost a lot of money. Starting with a cross-platform solution we get a
much wider audience at the very beginning we can target both markets at the same time, We can
also build for one platform first to release the product faster, and then quickly iterate on adding
support for sccond platform.

3. Consistency between platforms

iOSand Android have sonme differences in terms of building navigation and design. In cross
platform development, nmost popular UIdifferences are handled by defaull. In native deyclopment.
even in a team wih great communication, there can be some diierences in implementing
functions, In cross-platform devclopment, this situation doesn't occur often, as the platforms share
the same codebase. It also allows you to build a more coherent brand identity in apps on both
platforms with less effort.

4. Reusable code

This is one of the greatest things about cross-platlornm applications - it's possible to create
onc codebase for Android and iOS at the same time. In native applications it is necessary to write
code separalely, which is usually done by two different developers or teamns. In custom obile app
development, the whole codetase is in one place. This saves a lot of time, because one developer can
handle both platforms concurrently.

Cons of cross-platform mobile apps development

1. Lower performance
Performance is one of the most inpaant characteristics of an app. It depends on many
factors but, in general, if we compare two applications where one is native and the other is cross
platform and both have the same functionalities, tbejative one will be slightly faster. However,
these differences in performance are usually small,especily when it comes to simple applications,
2. Harder code design
Cross-platformapplications have to adapt their design and functionalitiesqot onlyto specie
devices but also to platforms, which have many differences. As a result, it creatts, exIra wor'
developers who have to handle specific çxteptions for a variety of devices and platorn iflerg19
especially with more complicated features. These issues don't occur that ofen in native app,
developers can focus on solving users' problems.
3. Long wait time for new features
Every time Google or Apple introduces a new feature for Android or iOS, it akes some tine
toupdate applications to suppor this new feature. In native apps, new SDKs are provided with the
updates much faster than for cross-platform frameworks.

Progressive Web Applications

PWAs offer an alternative approach to traditional mobile app development by skipping app
store delivery and app installations
PWAs are web applications that utilize a set of browser capabilities - such as working oflinc,
running a background process, and
adding a link to the device home screen- to provide an 'app like' user experience
6:39

padeepz
Progressive Web Apps (PWA) are built and enhanced with modern APls to deliver enhanced
capabilities, reliability, and installability while reaching anyone,
anvwhere, on any device with a single codebase
Aprogressive web app (PWA) is an app that's built using web platform technologies, but that
provides a user experience like that of a platform-spccific app
" Like a website, a PWA can run on multiple platforms and devices from asingle codebase Like
a platform-specific app. it can be installed on the device, can operate while ofiline and in the
background, and can integrate with the device and with other installed apps

Characteristics of PWA

1. 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.
2. Discoverable: A PWA is a website with some extra features. It can be scarched via mobile
scarching applications like Google Chrome. App Store or Play Store is not required for this,
3. Responsive: The UI of a progressive web app should fit the form factor and screen size of
the device.

4. App-like: APWA apfiuhon should look like anative application. Although the methods
for creating, sharing, launtbing, and updating of the PWA are conpletely ditierent from the
original application.
5. Connectivity-independentyorks evenswhen connectivity is very low.
Advantages of PWA

1. PWA works like an app on mobile and look<gery impressive.

2. It does not need an update.
3. Itis easily saved in the device.
4. It's immediately loads on your mobile.
5. Itsaves money and ime compared tj creating applications separately for android. iOs, and
other platforms
6. Post can be read even if there is no intemet.
7. Intemet data is less used in it.
20
8. PWA is cheaper (han the other applications.
Disadvantages of PWA
1. ItsuppoRlimited mobile browser. It does not run on the safari, cdge, and TE browser.
2. iPhone users cannot establish connections securely in it.
3. Itmakes maximum use of the battery of the device,
4: I needs to be hosted on the server because it is a web app.
5. It cannot be downloaded from popular app stores such as Gioogle Play and Apple App Store.
6. PWA oes not provide the sane level of support for all devices. For example. push
notifications in PWA work on Android, butnot on iOS.
7. Itsupports limited hardware functionality
 Exanmple,
Here's an example ofa Progressive Web App:
experience. They develop a
A news swchsite wants to provide its users wih a better mobile
Progressive Web App that:
user's device
Allows users to access the wchsite ofline by storing contenton the
Sends push notifications to users to alert them of breaking news
Can be installed on the user's home screen like a native app
Provides a fast and snooth browsing experience
Has a responsive design that adapts to diflerent screen sizes
prompted
Users can access the PWA by visiting the website on their mobile browser. They are
the wcbsíte olline and
to install the PWA on their home screen, which allows them to access
roceive push notificat ions.

Difference between PWAand Native Application

Feature Progressive Web Application Native Application

Function offline Yes Yes

There is no need to install it in mobile Itis necessary to install it in the phone.

Installation
requirement

Padepz Ap
Push-notification.
push-notification It also supports the push-ioificatior
It suppo
feature.
feature.

It supports the crossp It supports the specific platform Exanplc

Platform iOS, Android, and Windows

22

Data consunptn Low data consumption High data consunption

Internet requirement No intemet requirement Internet requirement

Cost Low cos! High cost

Update the app It does not require to update the It requires to update the application.
application.
 Implementation Itis easy to implement Itis conplex to implement.

Indexed by google Yes No

Shareable Itis easy to share from anyone. It shares the entire application, so it
complex.

Technical components of PWA

PWA has five components.

1. Web App manifest

2. Application shell
3. Service worker

4. Webpack
5. Transport Layer Security (TLS)

1. Web App manifest

The web app manifest is the first component of the PWA. It is a simple JSON fle that controls a
user's application. Usually. it is named "[Link]". Iis the nmost important component for the
the
presence of PWA. When you first connect PWA to a network, a mobile browser reads
"[Link]" file and stores it locally in cache memory

appicatrion's address bar.

The
Padepz Ap
When there is no network access in PWA, the mobile browss the application's cache memiory
to run thc PWA program while offline.
The "[Link]" file helps the PVA to give a look of a native app. With the help of the
[Link] file, the PWA developer can control how the application is presented to the user
mobile screen. The PWA developer can also set a theme for the mobile's splash-scrn and the

"[Link]" file allows the PWA developer to search for a centralized location for the
metadata of the web application. The JSON ile defines the links to icons and icon sizes, the full and
abbreviated name of an app. types, background color, theme, locations, and other visual
details that
are required for an app-like expericnce.
2. Application Shell
The application shcll is the third technical component of the PWA, It is specialized to split the statie
and dynamic cyof the application. The minimal CSS. HTML, JavaScript, and any other
dynamic and staticources offer the structure for your web page. It reduces the actual content that 23

is unique to the webpage. This component ensures a very critical approach to the devclopnent of
progressive web apps.
It permits the PWA to be execuied without any connection. The basic design elements of this
component enable it to perfom such ae task. It drives especially for applications that are based on
JavaScript
6:40 & &0 58

3. Service Worker
padeepz
A service worker is a web worker. It is a JavaSeript file that runs aside from tbe mobile browser. In
other words, it is another technical component that promotes the functionality oF PWA. The service
worker retrieves the resources from the cache memory and delivers the messages.
Iis independent of theapplication to which they are connected, and has many conscquences:
o The service worker does not block the synchronized XHR, so it cannot be uscd in local
storage (It is designed to be completely asynchronous).
o It can receive infornation rom the server even when the application is not running. It shows
notifications in the PWA application without opening in the mobile browser.
o I cannot directly access the DOM. Therefore, the PostMessage and Message Event Listener

method is used to conyfynicate with the webpage. The PostMessage method is uscd to send
data, and the message evont listener is Used to receive data.

fádepzÀg
Things to understand about it:

o Itis a programmable-network prox hthelps you monitor how your page handles network
requests.
o It only works on the HTTPS because HTTPS is very sccure, and it intercepts nctwork
requests and modifies responscs.
Service worker lifecycle

The service worker lifecycle is the most complex part of the PWA There asc three stages in the
lifetime of a service worker:

1 Regisralion
2. Installation
3. Activation

Registration

Aservice worker is basically a JavaScript file. You need to register it in your crucial JavaScript code
te use aservice worker. Registration tells your browser location of the service worker and starts
installing it on the background. One thing that distinguishes a service worker file from a standard
JavaScript hkishat a service worker runs in the background away from the mobile's main browser.
This process issirst phase of the service workers lifecycle.

Frst, this code checks whether the browser supports the service worker. The service worker is then 24
registered with [Link] when the serviceworker returns a promise. IFthe
promise is fulfilled, the registration is successful; otherwise, the rvgistration is failed.
Seope of registration
This scope determines the web pages that are managed by a service worker The location ofthe
service worker defines the defaull scope. Whenever you register a service worker file at the main
folder of hesystem., it is not iportant to specify its scope, because it controls all wbpages.

I. avigatorservice. [Link] (/swjs, ( scope: ):

 Installation

When a new service worker is registered with the help of [Link] [Link], the
JavaScript code is downloadcd, and the installation state is entered. I the installation succccds, the
service worker further proceeds to the nextstate.

Activation

Once the service worker is successfully installed, it converts to the activation phase. If there is an
open page controlled by the previous service worker, the new service worker enters the waiting state.
The new service worker is activated only when no pages are loaded in the old service worker. A
service wvorker is not activated immediately after installation.

A service worker will only be active in these cases:

o If no service worker currently active.

o If the user refreshes the webpage.

4. Webpack
The webpack is the fourth conpgenbof the PWA. It is uscd to design the PWA front-end. It allows
the PWA-devclopers to gather allJavaeript resources and data in one location.
5. Transport Layer Security (TLS)

The transpont layer sccurity is the fith compon the PWA. This componentis astandard lor all
robust and sccure data exchange between any twaappcations. The integrity of the data requires the
website's service through the HTTPS and an SSL goniieueinstalled on the server.
6. Responsive Web Design
Responsive web design makes your web page look good un ldevices,
Responsive web design uses only HTML and CSS.
" Responsive web design is not aprogram or a JavaScript.
Designing for the best experience for ail users
Web pages can be viewed using many different devices: desktops, tablets, and phones. You yeb
page shouldlook good, and be easy to use, regardless of the device.

Web pages should not leave out information to fit smaller devices, but rather adapt its content to fit
any device:
It is called responsive web design when you use CSS and HTML to resize, hide, shrink, enlarge, or
move the content to make i look good on any screen.
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.
Web pages should not leave out information to fit smaller devices, but rather adapt its content to fit
any device:
Responsive Web désign is the approach that suggests that design and development should respond to
the user's behavior

and environment based on screen size, platform and orientation.

The practice consists of a mix of lexible grids and layouts, images and an intelligent use of CSS 25
media queries
 Viewport
The viewport is the user's visible area ofa web page

The viewport varies with the device, and will be smaller on a mobile phone than on a computer screen

Before tablets and mobile phones, web pages were designed only for computer screens, and it was
common for web pages to have a static design and a fixed size

Then, when we started surfing the internet using tablets and mobile phones, fixed size web pages were
too largc to fit the viewport To fix this, browsers on those devices scaled down the entire web page to
fit the screen.

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

Native Applications Cross Platform Hybrid Web Progressive Web

Applications

Pros

+ Shared code base + Same app is available

+Best runtime performance + Single code base for multiple between web and both for web and
platforms
mobile apps mobile

+Using wveb + No installation

+ Direct access to device + Easy to build and maintain development skillset
APIs required, accessible
your apP for building mobile through a URL
apps

Cons

- Higher costs when building - Dependef1s bn bridges and - Lower performance - Limited support for
and maintaining your app
libraries for native device compared to native native device features
features apps

App capabilities
-Multiple code-bases for each - Performance limitations due to
- Limited support for
depend on the browser
platform bridging native device features
in use
 Choose the Appropriate Near-native or Hybrid App Framework:
The choice ofthe best solution for near-native or hybrid development depends on multiple factors.
including:
The complexity of the solution
Developers' skills
" The target time to market
Available budget
Without taking these factors into consideration, it's impossible to say which of these tools for near
native and hybrid mobile application devclopment is the best.

How Hybrid and Cross-platform Pramewvorks Work?

Hybrid apps allow developers to use cb technologies of HTMLS/CSSJayaScript and then

encapsulate those web applications in a conaiher that allows the web application to act likea native
application on the device. Since hybrid mobloupps are just web apps running on an embedded
browser environment, most of the code from wcb app can be used to build a mobile app. As
rendering and runtime performance of mobile browsers are ever-increasing, bybrid development is a
viable alternative for web developers who want to build mebje apps quickly
Similarly, PWAs are written using traditional web applieatiert programming technologies usually
including some variant of JavaScript, HTML5, and CSS, and are aceessed initially through a browser
on the device or computer.

Most cross-platform frameworks such as\ React Native and Native Script prdyides native
components to work with he cross-platformode, while some others such as Fluter and Xamarin
compiles cross-platform code to the native code for better performance

Mobile Application Development Lifecycie

There are two interlinked core components of a mobile application:

1) the mobile application "Front-Ehd" that resides on the mobile device, and
2) the services"BEnd" that supports the mobile front-end