UNIT I-web design

Studocu is not sponsored or endorsed by any college or university

Downloaded by Krishnaveni Subbarayalu (venitec@gmail.com)

 UNIT I

Basics of Web and Mobile Application Development, Native App, Hybrid App, Cross-
Platform App, What is Progressive Web App, Responsive Web Design

1.1. What is a web application?

A web application (web app) is an application program that is stored on a remote server and
delivered over the internet through a browser interface.

Developers design web applications for a wide variety of uses and users, from an
organization to an individual for numerous reasons. Commonly used web applications can
include webmail, online calculators or e-commerce shops. While users can only access some
web apps by a specific browser, most are available no matter the browser.

1.2 How web applications work

Web applications work by utilizing a client-server model, where the client is typically a web
browser or a mobile app, and the server is a computer system that hosts the application and
handles data processing and storage.
Here's a general overview of how web applications function:

1. Client Sends a Request: When a user interacts with a web application by entering a URL or
clicking on a link, the client (web browser) sends an HTTP request to the server. This request
contains information about the action the user wants to perform, such as loading a specific
page or submitting a form.

2. Server Processes the Request: The server receives the HTTP request and processes it based
on the application's logic. This can involve querying databases, retrieving files, performing
calculations, or any other necessary operations to generate the appropriate response.

3. Application Logic and Data Handling: The web application's backend, also known as the
server-side, handles the application's logic and data. It interprets the request, accesses
databases or other external services if needed, and processes the data to generate the
response.

Downloaded by Krishnaveni Subbarayalu (venitec@gmail.com)

 4. Server Sends a Response: Once the server has processed the request, it generates an HTTP
response containing the requested information or actions. This response is typically in the
form of HTML, CSS, JavaScript, and other assets required to render the web page on the
client-side.

5. Client Receives and Renders the Response: The client (web browser) receives the HTTP
response from the server. It interprets the HTML, renders the web page structure, applies
CSS styles for presentation, and executes any JavaScript code for dynamic interactivity.

6. User Interacts with the Web Page: The user interacts with the web page through the client
(browser). The user may click on buttons, fill out forms, or perform other actions that trigger
additional HTTP requests to the server.

7. Repeat the Process: Steps 1 to 6 continue as the user interacts with the web application.
Each user action generates new HTTP requests to the server, and the server processes these
requests to produce relevant responses.

8. State Management: Web applications may need to maintain the state of user sessions,
especially when users log in or perform multi-step processes. Session cookies, local storage,
or server-side session management techniques are used to store and maintain user-specific
data.

Web applications can be built using various technologies and frameworks, such as JavaScript for
client-side interactivity, backend programming languages like Python, Ruby, Java, or Node.js for
server-side processing, and databases for data storage. Popular frameworks like React, Angular,
Vue.js, Django, Ruby on Rails, etc., facilitate the development of web applications by providing
reusable components and tools for managing server-client interactions.

Downloaded by Krishnaveni Subbarayalu (venitec@gmail.com)

Web applications have a client-server architecture. Their code is divided into two
components—client-side scripts and server-side scripts.

✓ Client-side architecture

The client-side script deals with user interface functionality like buttons and drop-down
boxes. When the end user clicks on the web app link, the web browser loads the client-side
script and renders the graphic elements and text for user interaction. For example, the user
can read content, watch videos, or fill out details on a contact form. Actions like clicking the
submit button go to the server as a client request.

✓ Server-side architecture

The server-side script deals with data processing. The web application server processes the
client requests and sends back a response. The requests are usually for more data or to edit or
save new data. For example, if the user clicks on the Read More button, the web application
server will send content back to the user. If the user clicks the Submit button, the application
server will save the user data in the database. In some cases, the server completes the data
request and sends the complete HTML page back to the client. This is called server side
rendering.

1.3 Different Types Of Web Applications

As the digital world continues to expand, web applications have become an essential tool for
businesses and individuals alike. Web applications are designed to meet specific needs and
requirements of the users, and choosing the right type of web application is crucial to achieve
your desired goals.

1.3.1. Static Web Apps

Static web apps consist of restricted content and have no flexibility. Here, these apps are
considered the pages generated by the server with very little or no interactivity.

Downloaded by Krishnaveni Subbarayalu (venitec@gmail.com)

 Fig 4.1 Static Web application Access

In short, static web apps appear to the clients the same as they are stored on the server. No
content changes are made in the application server before the page is sent to a web
browser.Languages used to create static web applications include HTML, CSS, JavaScript,
etc. Even though one can integrate animated objects, GIFs, videos, and more in static web
apps; however, it is hard to make updates.

Professional portfolios, digital resumes, landing pages for marketing, etc., are the best
examples of static web applications.

Pros of Static Web Application

✓ Easy to host

✓ Quick to build

✓ Development cost is low

✓ Easy to index in the search engines

✓ Very fast to render on a slow internet connection.

1.3.2. Dynamic Web Apps

It is one of the best web application types as they fetch data in real-time based on the users’
requests. They have enhanced technical complexity as compared to static web apps.

Downloaded by Krishnaveni Subbarayalu (venitec@gmail.com)

 Fig 4.2 How a Dynamic Web App Works
Whenever a web server gets a request for a specific page, the page request reaches the
software known as an application server. Databases are located on the server-side; hence the
user gets updated content.

The application server understands the code, fetches the page from the database & sends the
answer to the web server, which in turn sends it back to the web browser. In short, a dynamic
web app requires a database to store data, and its content is continuously updated every time
users access it. It is possible to achieve this using a content management system like
WordPress, which has a built-in administration panel.

Pros of Dynamic Web Apps

✓ Better user experience

✓ Easy to update & maintain

✓ Highly interactive

✓ Quick Navigation

✓ Professional look

1.3.3. Single-Page Applications

Single-page apps enable users to interact with the web page without any hindrance. Here,
requests and responses take place efficiently due to small amounts of data.

Downloaded by Krishnaveni Subbarayalu (venitec@gmail.com)

Briefly, SPAs are way quicker as compared to traditional web applications as they perform
logic on the web browser instead of the server.

Moreover, you can update any single-page app as per the requirements in the future. Yet, due
to universal URLs, they are not competent as per the latest SEO rules.

Single Page Application Advantages

✓ Battery reusability

✓ Easy debugging

✓ Less complex implementation

✓ Better caching

✓ User-friendly

Some of Popular Single Page Apps are Gmail, Google Maps, AirBNB, Netflix, Pinterest,
Paypal

1.3.4. Multi-Page Applications

Multi-page apps function similarly to traditional web applications. Here, the app reloads and
displays a new page from the server in the browser anytime users perform a new action.In

Downloaded by Krishnaveni Subbarayalu (venitec@gmail.com)

these types of web applications, logic is stored at the backend; hence requests from the clients
go back to the server & are reverted.

Process of generating pages on the server, sending them to the client, and presenting them on
the browser harms the user interface.It is possible to resolve this by utilizing AJAX
technology, which makes sudden changes without a complete page reload. If MPAs are
designed considering responsiveness, they can blend well with the mobile environment.

MPAs can be built using different languages such as HTML, CSS, JavaScript, AJAX, jQuery,
etc. Web portals, Online Stores, Catalogs, Marketplaces, Enterprise Web Applications, etc.,
fall under the multi-page applications.

Pros of Multi-Page Applications

✓ More SEO-friendly

✓ Unlimited scalability

✓ Add unlimited pages in your existing app

Popular Multi-Page Applications

✓ Amazon

✓ Forbes

Downloaded by Krishnaveni Subbarayalu (venitec@gmail.com)

 ✓ CNN

✓ eBay

1.3.5. Portal Web Apps

It is one of its types of web apps in which various sections or categories are accessible on the
home page. Here, this page consists of various details such as chats, emails, forums, user
registration, etc.

Portals are best suited for businesses and enterprises that want to create customized interfaces
according to their target audience’s requirements.Here, all the registered users can only
access the portal. Whenever a user signs in, the service provider can check the user’s
activity.According to the access allocated, specific features might be limited to particular
users.

Government Portals, Student Portals, Real Estate Portals, Education University Portals,
Patient Portals, etc., fall under the portal web apps.

Pros of Portal Web Apps

✓ Provides enhanced interaction

Downloaded by Krishnaveni Subbarayalu (venitec@gmail.com)

✓ Better integration

✓ Omnichannel presence

✓ Better customer retention

Examples of Portal Web Apps

✓ Domino’s Pizza

✓ Stanford University

✓ Allianz

1.3.6. Animated Web Applications

Animated web applications are closely connected with FLASH technology. By creating these
types of web apps, content can be represented by using various animated effects.Here,
UI/UX designers have the freedom to become highly creative and integrate things that are not
possible in different types of web-based applications.

The best practice is only to include animations that gain the user’s attention & deliver
valuable information. Also, this allows you to improve the user experience.The major
drawback of creating animated web applications is that they are improper for web positioning
and SEO as search engines can’t fetch data from them.

HTML5, CSS3, JS, SVG, etc. are useful to create animated web applications.

Downloaded by Krishnaveni Subbarayalu (venitec@gmail.com)

1.3.7. Rich Internet Apps

Rich Internet Applications are mainly web applications having several functionalities of
desktop applications. However, they are different from desktop applications. RIAs are
introduced to resolve browser restrictions, and they depend on client-side plugins such as
Flash, Shockwave, and Silverlight.

As these applications are built using these tools, they run efficiently and are very engaging.
Moreover, they provide an eye-catching user experience and high interactivity as compared
to traditional browser applications.

The two main problems with the RIA’s are vulnerabilities and inconveniences they form. For
instance, suppose the plugin is outdated, then several parts of the app or the entire app will
not work accurately.

Benefits of Rich Internet Apps

✓ Improved data visualization

✓ Integration across various systems

✓ Control item synchronization

✓ Quick mobile access to information

Examples of Rich Internet Apps

✓ Adobe Flash

✓ Google Gears

✓ Microsoft Silverlight

1.3.8. JavaScript Powered Web Apps

After the availability of leading front-end frameworks, such as Angular, React.js, Vue.js,
Node.js, the web-app logic has begun to move towards the client-side, providing higher
adaptability as compared to the AJAX. Currently, client-wide logic can perform server-side
tasks such as handling user requests and giving the responses, etc. Web Applications built
using the above JS frameworks offer enhanced performance, various levels of user interaction

Downloaded by Krishnaveni Subbarayalu (venitec@gmail.com)

and are usually SEO optimized. Client-Portals, Business-Centric Web Applications, etc., fall
under the JavaScript-powered web apps.

Pros of JavaScript Powered Web Apps

✓ Highly-Interactive

✓ Fast & Responsive

✓ Offline support

✓ Quick integration

Examples of JavaScript Powered Web Apps

✓ Yahoo

✓ Uber

✓ Linkedin

✓ Netflix

✓ Mozilla

1.3.9. Progressive Web Apps

PWAs are websites that look similar to mobile applications. Users can access the complete
information and all the features of the web app using mobile browsers. Various experts say
PWA is a modified version of SPA. Even though it’s not valid based on the theory; however,
the point is authentic in real life.

Downloaded by Krishnaveni Subbarayalu (venitec@gmail.com)

The primary purpose of PWAs is not to apply new rules in architecture but enhance the speed
and mobile adaptability of web apps. Here, improvements are made in caching, data transfer,
and home screen installation.

Moreover, PWAs enable you to enhance the mobile web experience and provide your
services to users despite slow/bad internet connections. Starbucks, Forbes, OLX,
MakeMyTrip, etc., are some of the best examples of PWA.

Benefits of Progressive Web Apps

✓ Independent of app stores

✓ Offline support

✓ Enhanced performance

✓ No Installation & updates Required

✓ Access platform specific features

Examples of Progressive Web Apps

✓ Pinterest

✓ Twitter Lite

✓ Spotify

✓ MakeMyTrip

Difference between PWA and Native Application

Feature Progressive Web Application Native Application

Function offline Yes Yes

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

requirement

Push-notification. It supports the push-notification It also supports the push-notification

feature. feature.

Platform It supports the cross-platform. It supports the specific platform. Example

iOS, Android, and Windows

Downloaded by Krishnaveni Subbarayalu (venitec@gmail.com)

 Data consumption Low data consumption High data consumption

Internet requirement No internet requirement Internet requirement

Cost Low cost High cost

Update the app It does not require to update the It requires to update the application.
application.

Implementation It is easy to implement. It is complex to implement.

Indexed by google Yes No

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

complex.

1.3.10. eCommerce Web Apps

This type of web application can be considered as an online store, same as

eCommerce Apps or eCommerce Sites.Developing such web apps becomes complex as one
has to handle transactions and integrate different payment methods such as PayPal,
Debit/Credit Card, etc.

Several primary features of an eCommerce web app include adding new products, removing
old products, handling payments, user-friendly interface, etc. To look after all these tasks,
admin requires an effective management panel.To develop a feature-rich, reliable, and
scalable eCommerce web app, you should hire dedicated eCommerce developers. These
developers have developed numerous eCommerce web apps; hence, they are familiar with all
the ins and outs of the eCommerce industry.

Pros of eCommerce Web Apps

✓ Enhanced brand recognition

✓ Boost conversation

✓ Increased engagement

Downloaded by Krishnaveni Subbarayalu (venitec@gmail.com)

 ✓ Cost-Effective

✓ Smaller size than mobile apps

1.4 Mobile Application Development

Mobile application development is the process of creating software applications that run on a
mobile device, and a typical mobile application utilizes a network connection to work with
remote computing resources. Hence, the mobile development process involves creating
installable software bundles (code, binaries, assets, etc.) , implementing backend services
such as data access with an API, and testing the application on target devices.

1.4.1 Mobile Applications and Device Platforms

There are two dominant platforms in the modern smartphone market. One is the iOS platform
from Apple Inc. The iOS platform is the operating system that powers Apple's popular line of
iPhone smartphones. The second is Android from Google. The Android operating system is
used not only by Google devices but also by many other OEMs to built their own
smartphones and other smart devices.

Although there are some similarities between these two platforms when building applications,
developing for iOS vs. developing for Android involves using different software development
kits (SDKs) and different development toolchain. While Apple uses iOS exclusively for its
own devices, Google makes Android available to other companies provided they meet
specific requirements such as including certain Google applications on the devices they ship.
Developers can build apps for hundreds of millions of devices by targeting both of these
platforms.

1.4.2 Alternatives for Building Mobile Apps

There are four major development approaches when building mobile applications

❖ Native Mobile Applications

❖ Cross-Platform Native Mobile Applications

❖ Hybrid Mobile Applications

Downloaded by Krishnaveni Subbarayalu (venitec@gmail.com)

 ❖ Progressive Web Applications

Each of these approaches for developing mobile applications has its own 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 directly on the operating system of the device
such as iOS and Android.

Cross-Platform Applications

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

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

Hybrid-Web Applications

Hybrid mobile applications are built with standard web technologies - such as JavaScript,
CSS, and HTML5 - and they are bundled as app installation packages. Contrary to the native
apps, hybrid apps work on a 'web container' which provides a browser runtime and a bridge
for native device APIs via Apache Cordova.

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 offline, running a background process, and adding a link to the
device home screen - to provide an 'app like' user experience.

1.4.3 Native Vs Cross-Platform Vs Hybrid Vs Progressive Web Applications

Downloaded by Krishnaveni Subbarayalu (venitec@gmail.com)

 Native Cross-Platform Hybrid-Web Progressive Web
Applications Applications Applications Applications

Shared code base Same app is

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

Using web No installation

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

Higher costs when

Dependents on bridges Lower performance Limited support
building and
and libraries for native compared to native for native device
maintaining your
device features apps features
app

Performance Limited support for App capabilities

Multiple code-bases limitations due to native device depend on the
for each platform bridging features browser in use

1.5 Comparing Native vs. Hybrid Applications

At the highest level, there are four main ways that native apps differ from hybrid apps as
illustrated in the following table.

Native Hybrid

Platform Specific Cross Platform

Compiled Language Scripting / Compiled

Downloaded by Krishnaveni Subbarayalu (venitec@gmail.com)

 Access to Device Hardware Plugins / Native Modules

Platform Frameworks Web Frameworks

1.6 Why Choose the Hybrid/Cross-platform Approach?

One problem with native mobile application development is that it requires a highly
specialized skill set. Although there are large and vibrant developer communities for C and
Java -- the language families that are mostly used for native development --, there are fewer
developers who are knowledgeable in platform-specific versions of those languages and their
respective IDEs. In fact, skilled native app developers are in such demand, that many
companies are hard-pressed to hire and retain them on staff, and instead they frequently have
to resort to outside 3rd party design and development houses to build their apps for them.

1.7 How Hybrid and Cross-platform Frameworks Work?

Hybrid apps allow developers to use web technologies of HTML5/CSS/JavaScript and then
encapsulate those web applications in a container that allows the web application to act like a
native application on the device. Since hybrid mobile apps are just web apps running on an
embedded browser environment, most of the code from a web app can be used to build a
mobile app. As rendering and runtime performance of mobile browsers are ever-increasing,
hybrid development is a viable alternative for web developers who want to build mobile apps
quickly.

Similarly, PWAs are written using traditional web application programming technologies
usually including some variant of JavaScript, HTML5, and CSS, and are accessed initially
through a browser on the device or computer.

Most cross-platform frameworks such as - React Native and Native Script - provides native
components to work with the cross-platform code, while some others such as Flutter and
Xamarin compiles cross-platform code to the native code for better performance.

Downloaded by Krishnaveni Subbarayalu (venitec@gmail.com)

1.8 The Mobile Application Development Lifecycle

There are two interlinked core components of a mobile application:

1) the mobile application “Front-End” that resides on the mobile device, and
2) the services “Back-End” that supports the mobile front-end.

Fig 1.3 Lifecycle of Mobile Application Development

1.8.1 Front-end vs. Back-end

In the early days of the modern smartphone applications era, mobile applications went
through a similar evolution as first websites. At first, the applications and sites where wholly
contained within themselves and acted as little more than static advertisements for the brand,
company, product, or service.

However, as connectivity and network capabilities improved, the applications became

increasingly connected to sources of data and information that lived outside of the app itself,
and the apps became increasingly dynamic as they were able to update their UI and content
with data received over the network from queries to data sources.

As a result, the mobile front-end applications increasingly rely on and integrated with back-
end services which provide data to be consumed through the mobile front-end. Such data can
include, for example, product information for e-commerce apps or flight info for travel and
reservation apps. For a mobile game, the data may include new levels or challenges and
scores or avatars from other players.

Downloaded by Krishnaveni Subbarayalu (venitec@gmail.com)

1.8.2 How Front-end 'Talks' to the Back-end?

The mobile front-end obtains the data from the back-end via a variety of service calls such as
APIs. In some cases, these APIs may be owned and operated by the same entity developing
the mobile application. In other cases, the API may be controlled by a third party and access
is granted to the mobile application via a commercial arrangement.

For example, a developer may obtain social media or advertising content by making calls to
media or advertising company services. In this case, a developer may have to sign a contract
in order to obtain credentials and a key that grants access to the API and governs how that
developer can use it, how much it will cost, or how frequently it may be called, or how much
data can be requested over what time period.

1.8.3 The Mobile Application Front-End

The mobile front-end is the visual and interactive part of the application the user experiences.
It usually resides on the device, or there is at least an icon representing the app that is visible
on the home screen or is pinned in the application catalog of the device. The application can
be downloaded from the platform app store, side-loaded directly onto the device, or can be
reached through the device’s browser, as in the case for PWAs.

How Mobile Apps Integrate with the Backend?

Regardless of the size of the team, a critical element of the development effort is building the
app logic that is responsible for making network calls to the back-end services, retrieve data
and update the data in the back-end systems with new information generated from the app.

These back-end services are typically accessed through a variety of application programming
interfaces, most commonly known as APIs. There are different types of APIs, such as REST
and GraphQL, and there are also a wide variety of means and styles of accessing them. While
some back-end service APIs are available directly to the application through calls in the
platform itself, many of the specialized services have to be integrated into the app via a
software development kit, commonly known as an SDK. Once the SDK has been added to
the app via the development environment, then the application can make use of the APIs
defined in the SDK.

Downloaded by Krishnaveni Subbarayalu (venitec@gmail.com)

1.8.4 The Mobile Application Back-End

Regardless of what front-end platform or development methodology is being used, delivering

high-quality mobile applications that delight and retain users requires reliable back-end
services.

Given the critical importance of back-end services for the success of the mobile application,
the developers have several important architectural decisions that they must consider. These
decisions include which services should they build themselves and which third party services
should they leverage, and then should they run and maintain their own services or should they
take advantage of 3rd party services.

The answer is increasingly clear; to improve developer productivity and efficiency, mobile
app programmers should only build their own services if they are highly specific to the
domain of the application and embody unique intellectual property. Also, even for the
services they build themselves, they should almost always leverage cloud-based services to
build and maintain their backend infrastructure.

1.8.5 List of Mobile Application Services

There are hundreds of cloud and 3rd party services that mobile application developers can
leverage to speed up the development and delivery of their applications. However, it’s
unlikely that a developer is going to be able to become an expert in each of these individual
services.

Instead, the mobile developers should look for a development environment that makes it
easier for them to integrate, use, and consume the most commonly required capabilities into
their application quickly and easily, while still preserving the freedom to take advantage of
the many individual services available.

❖ Essential

User Sign-up/Sign-in and Management

Social login (Facebook sign-in, Twitter sign-in, etc.)

Analytics and User Engagement

Push Notifications

Downloaded by Krishnaveni Subbarayalu (venitec@gmail.com)

 Real Device Testing

❖ Data Services

Cloud Storage

Real-time and Offline Data

Application Logic/Cloud Functions

❖ Machine Learning

Conversational Bots

Image and Video Recognition

Speech Recognition

1.9 What is a Progressive Web App (PWA)?

A progressive web app is a website that looks and feels like a native app. Progressive web
apps are built in the web and run in the browser. There's no need to download the app from
the Google Play Store or iOS App Store.PWAs are meant to eliminate a range of issues from
slow networks to data limitation or complete lack of connectivity. Progressive Web Apps
leverage the latest web technologies to provide a reliable, fast, and engaging user experience.

Twitter is the success story progressive web applications. Go ahead and log into your Twitter
account via your smartphone’s browser. Ta-da! You’re now using a Progressive Web App
that’s capable of performing real-time notifications, offline notifications, and other app-like
functions.

Another progressive web app example can be found in Gmail. Again, log into your Gmail
account via your smartphone’s browser, and you’ll experience an app-like experience that
allows you to individually select emails, label them, move them between folders, and so
forth. You’ll also see new emails drop into your inbox in real-time.

1.9.1 What Makes a Progressive Web App?

Downloaded by Krishnaveni Subbarayalu (venitec@gmail.com)

The term Progressive Web App was coined in 2015 by Alex Russell. Together with Frances
Berriman, Russell “enumerated the attributes of [a] new class of applications” based on the
gradual and powerful evolution of modern browsers. Here are those attributes as Russell and
Berriman envisioned them:

✓ Responsive: To fit any form factor

✓ Connectivity independent: Progressively-enhanced with Service Workers (we’ll
explain these in more detail below) to let them work offline
✓ App-like-interactions: Adopt a Shell + Content application model to create appy
navigations & interactions
✓ Fresh: Transparently always up-to-date thanks to the Service Worker update process
✓ Safe: Served via TLS (a Service Worker requirement) to prevent snooping
✓ Discoverable: Are identifiable as “applications” thanks to W3C Manifests and
Service Worker registration scope allowing search engines to find them
✓ Re-engageable: Can access the re-engagement UIs of the OS; e.g. Push Notifications
✓ Installable: To the home screen through browser-provided prompts, allowing users to
“keep” apps they find most useful without the hassle of an app store
✓ Linkable: Meaning they’re zero-friction, zero-install, and easy to share.

1.9.2 Building a progressive web app

There are 3 fundamental components:

❖ Web manifest

The web manifest is a JSON file that defines the look and feel of the PWA when
it's installed. It's contains anything about looks like home screen icons, colors, names etc .
In general, the web manifest includes metadata like the app name, version, description,
theme colors, and screen orientation. A web manifest is essential for creating a native-like
app experience.

❖ Service worker

A service worker is JavaScript code that runs in the background of the PWA.
Their primary use is to pre-cache resources, so the web app loads fast and can even
have offline functionality. After the website has been visited once, the service worker

Downloaded by Krishnaveni Subbarayalu (venitec@gmail.com)

 saves - or caches - critical assets like HTML files and images. Service workers can
also be used for other tasks such as push notifications and background data syncs.

❖ Transport Layer Security

PWAs are required to communicate over HTTPS by having an SSL

certificate installed on its web server. The SSL certificate creates a secure, encrypted
connection between the frontend app and backend server. These requirements leverage
the TLS protocol to ensure secure data transfers when the web app communicates with
the backend eCommerce and CMS systems. This is crucial for keeping user information
safe and is critical for eCommerce stores that handle customer credit card information.

1.9.3 Benefits of Progressive Web Apps

While moving to a PWA will likely require some development work, there are enormous
advantages in putting in the effort.

1. It’s faster-

• With pre-caching, PWAs load fast even with poor connectivity on mobile devices.
Faster loading also translates to better indexing by search engines, and therefore,
PWAs have considerable SEO advantages.
2. It’s better for SEO

• From an SEO standpoint, search engines view PWAs as websites and fully index
them. Native apps, on the other hand, are not indexed and will not impact your SERP.
3. It reduces data needs

• Caching reduces the data transfer needs of your app. Fewer API requests reduce your
need for server capacity and bandwidth to support your application. Your customers
will also use less of their mobile data plan while browsing your web app. Along with
this, PWAs usually take up less storage space, so users are more likely to download
them than native apps.

Downloaded by Krishnaveni Subbarayalu (venitec@gmail.com)

4. There’s no need for app stores

• One of the greatest competitive advantages of PWAs over native apps is

discoverability. PWAs aren't downloaded via app stores, so there's less friction for
potential users to install the app. You also don’t need to build, submit for review, and
market separate apps for iOS and Android. Users that are already on your website
have the option to install the app, giving them a better user experience and leading to
a higher chance of adoption.
5. It reduces development costs

• Native apps require entirely different tech stacks to develop, while PWAs use
standard web technologies like HTML, CSS, and JavaScript that are well-know by
frontend developers. Upgrading your existing website with PWA features is much
cheaper than developing native apps from scratch, and any updates you need to make
are instant without requiring review by Apple or Google.
6. It leads to better user experiences

• PWAs are both responsive and progressive. Responsive means they're designed to
work on whichever devices users have from phones to tablets or desktops. PWAs also
built with the web development idea of progressive enhancements. This means they
focus first on core content and features, and if the user's browser and internet
connection meet the necessary more advanced features become available. These two
tenets ensure a better digital experience for all users.
7. It leads to better engagement

• There's no doubt that PWAs lead to better customer engagement. The caching and
offline capabilities of PWAs mean users can browse the eCommerce store at any time,
and won't abandon the web app from long loading times. Features like push
notifications and location tracking let marketers provide relevant content to mobile
users whenever and wherever. These factors make PWAs great for delivering
enhanced digital experiences to shoppers.
8. It can increase conversions

• For eCommerce stores, moving to a PWA can drastically improve conversions.

AliExpress, for example, increased its conversion rate for new users by 104% with its

Downloaded by Krishnaveni Subbarayalu (venitec@gmail.com)

 new PWA. Along with better engagement, PWAs can offer simplified user experience
and checkout process that efficient moves user down the sales funnel.

1.10 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. It is the way to design for a
multi-device web.

HTML is fundamentally responsive, or fluid. If you create a web page containing only
HTML, with no CSS, and resize the window, the browser will automatically reflow the text
to fit the viewport.

While the default responsive behavior may sound like no solution is needed, long lines of text
displayed full screen on a wide monitor can be difficult to read. If wide screen line length is
reduced with CSS, such as by creating columns or adding significant padding, the site may
look squashed for the user who narrows their browser window or opens the site on a mobile
device.

Downloaded by Krishnaveni Subbarayalu (venitec@gmail.com)

 Fig 1.4 Liquid Layout Design

Creating a non-resizable web page by setting a fixed width doesn't work either; that leads to
scroll bars on narrow devices and too much empty space on wide screens.

Responsive web design, or RWD, is a design approach that addresses the range of devices
and device sizes, enabling automatic adaption to the screen, whether the content is viewed on
a tablet, phone, television, or watch.

Responsive web design isn't a separate technology — it is an approach. It is a term used to

describe 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, as discussed in Zoe Mickley
Gillenwater's book Flexible Web Design.

At the time, the recommendation was to use CSS float for layout and media queries to query
the browser width, creating layouts for different breakpoints. Fluid images are set to not
exceed the width of their container; they have their max-width property set to 100%. Fluid
images scale down when their containing column narrows but do not grow larger than their
intrinsic size when the column grows. This enables an image to scale down to fit its content,
rather than overflow it, but not grow larger and become pixelated if the container becomes
wider than the image.

1.10.1 Media Queries

Media queries allow us to run a series of tests (e.g. whether the user's screen is greater than a
certain width, or a certain resolution) and apply CSS selectively to style the page
appropriately for the user's needs.

For example, the following media query tests to see if the current web page is being
displayed as screen media (therefore not a printed document) and the viewport is at
least 80rem wide. The CSS for the .container selector will only be applied if these two things
are true.

Downloaded by Krishnaveni Subbarayalu (venitec@gmail.com)

 @media screen and (min-width: 80rem) {

.container {

margin: 1em 2em;

We can add multiple media queries within a stylesheet, tweaking your whole layout or parts
of it to best suit the various screen sizes. The points at which a media query is introduced, and
the layout changed, are known as breakpoints.

A common approach when using Media Queries is to create a simple single-column layout
for narrow-screen devices (e.g. mobile phones), then check for wider screens and implement
a multiple-column layout when you know that you have enough screen width to handle it.
Designing for mobile first is known as mobile first design.

If using breakpoints, best practices encourage defining media query breakpoints with relative
units rather than absolute sizes of an individual device.

There are different approaches to the styles defined within a media query block; ranging from
using media queries to <link> style sheets based on browser size ranges to only including
custom properties variables to store values associated with each breakpoint.

Media queries can help with RWD, but are not a requirement. Flexible grids, relative units,
and minimum and maximum unit values can be used without queries.

1.10.2 Responsive layout technologies

Responsive sites are built on flexible grids, meaning we don't need to target every possible
device size with pixel perfect layouts.

By using a flexible grid, you can change a feature or add in a breakpoint and change the
design at the point where the content starts to look bad. For example, to ensure line lengths

Downloaded by Krishnaveni Subbarayalu (venitec@gmail.com)

don't become unreadably long as the screen size increases you can use columns; if a box
becomes squashed with two words on each line as it narrows you can set a breakpoint.

Several layout methods, including Multiple-column layout, Flexbox, and Grid are responsive
by default. They all assume that you are trying to create a flexible grid and give you easier
ways to do so.

1. Multicol

With multicol, you specify a column-count to indicate the maximum number of columns you
want your content to be split into. The browser then works out the size of these, a size that
will change according to the screen size.

.container {

column-count: 3;

If you instead specify a column-width, you are specifying a minimum width. The browser
will create as many columns of that width as will comfortably fit into the container, then
share out the remaining space between all the columns. Therefore the number of columns will
change according to how much space there is.

.container {

column-width: 10em;

You can use the columns shorthand to provide a maximum number of columns and a
minimum column width. This can ensure line lengths don't become unreadably long as the
screen size increases or too narrow as the screen size decreases.

2. Flexbox

Downloaded by Krishnaveni Subbarayalu (venitec@gmail.com)

In Flexbox, flex items shrink or grow, distributing space between the items according to the
space in their container. By changing the values for flex-grow and flex-shrink you can
indicate how you want the items to behave when they encounter more or less space around
them.

In the example below the flex items will each take an equal amount of space in the flex
container, using the shorthand of flex: 1 as described in the layout topic Flexbox: Flexible
sizing of flex items.

. .container {
display: flex;
}

.item {
flex: 1;
}

3. CSS grid

In CSS Grid Layout the fr unit allows the distribution of available space across grid tracks.
The next example creates a grid container with three tracks sized at 1fr. This will create three
column tracks, each taking one part of the available space in the container. You can find out
more about this approach to create a grid in the Learn Layout Grids topic, under Flexible
grids with the fr unit.

.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}

4. Responsive images

To ensure media is never larger than its responsive container, the following approach can be
used:
img,
Picture,
video {
max-width: 100%;
}

This scales media to ensure they never overflow their containers. Using a single large image
and scaling it down to fit small devices wastes bandwidth by downloading images larger than
what is needed.

Responsive Images, using the <picture> element and the <img> srcset and sizes attributes
enables serving images targeted to the user's viewport and the device's resolution. For
example, you can include a square image for mobile, but show the same scene as a landscape
image on desktop.

The <picture> element enables providing multiple sizes along with "hints" (metadata that
describes the screen size and resolution the image is best suited for), and the browser will
choose the most appropriate image for each device, ensuring that a user will download an
image size appropriate for the device they are using. Using <picture> along with max-
width removes the need for sizing images with media queries. It enables targeting images
with different aspect ratios to different viewport sizes.

5. Responsive typography

Responsive typography describes changing font sizes within media queries or using viewport
units to reflect lesser or greater amounts of screen real estate.

Using media queries for responsive typography

In this example, we want to set our level 1 heading to be 4rem, meaning it will be four times
our base font size. That's a really large heading! We only want this jumbo heading on larger
screen sizes, therefore we first create a smaller heading then use media queries to overwrite it
with the larger size if we know that the user has a screen size of at least 1200px.

html {
font-size: 1em;
}

Downloaded by Krishnaveni Subbarayalu (venitec@gmail.com)

h1 {
font-size: 2rem;
}

@media (min-width: 1200px) {

h1 {
font-size: 4rem;
}
}

We have edited our responsive grid example above to also include responsive type using the
method outlined. You can see how the heading switches sizes as the layout goes to the two
column version.

On mobile the heading is smaller:

On desktop, however, we see the larger heading size:

Downloaded by Krishnaveni Subbarayalu (venitec@gmail.com)

As this approach to typography shows, you do not need to restrict media queries to only
changing the layout of the page. They can be used to tweak any element to make it more
usable or attractive at alternate screen sizes.

Using viewport units for responsive typography

Viewport units vw can also be used to enable responsive typography, without the need for
setting breakpoints with media queries. 1vw is equal to one percent of the viewport width,
meaning that if you set your font size using vw, it will always relate to the size of the
viewport.

h1 {
font-size: 6vw;
}

The problem with doing the above is that the user loses the ability to zoom any text set using
the vw unit, as that text is always related to the size of the viewport. Therefore you should
never set text using viewport units alone.

There is a solution, and it involves using calc(). If you add the vw unit to a value set using a
fixed size such as ems or rems then the text will still be zoomable. Essentially, the vw unit
adds on top of that zoomed value:

Downloaded by Krishnaveni Subbarayalu (venitec@gmail.com)

h1 {

font-size: calc(1.5rem + 3vw); }

This means that we only need to specify the font size for the heading once, rather than set it
up for mobile and redefine it in the media queries. The font then gradually increases as you
increase the size of the viewport.

The viewport meta tag

If you look at the HTML source of a responsive page, you will usually see the
following <meta> tag in the <head> of the document.

<meta name="viewport" content="width=device-width,initial-scale=1" />

This viewport meta tag tells mobile browsers that they should set the width of the viewport to
the device width, and scale the document to 100% of its intended size, which shows the
document at the mobile-optimized size that you intended.

Why is this needed? Because mobile browsers tend to lie about their viewport width.

This meta tag exists because when smartphones first arrived, most sites were not mobile
optimized. The mobile browser would, therefore, set the viewport width to 980 pixels, render
the page at that width, and show the result as a zoomed-out version of the desktop layout.
Users could zoom in and pan around the website to view the bits they were interested in, but
it looked bad.

By setting width=device-width you are overriding a mobile device's default, like Apple's
default width=980px, with the actual width of the device. Without it, your responsive design
with breakpoints and media queries may not work as intended on mobile browsers. If you've
got a narrow screen layout that kicks in at 480px viewport width or less, but the device is
saying it is 980px wide, that user will not see your narrow screen layout.

Responsive Web Design -

Grid-View

Many web pages are based on a grid-view, which means that the page is divided into
columns:

Downloaded by Krishnaveni Subbarayalu (venitec@gmail.com)

 Using a grid-view is very helpful when designing web pages. It makes it easier to
place elements on the page.

A responsive grid-view often has 12 columns, and has a total width of 100%, and
will shrink and expand as you resize the browser window.

Building a Responsive Grid-View

Let’s start building a responsive grid-view.

First ensure that all HTML elements have the box-sizing property set to border-box.
This makes sure that the padding and border are included in the total width and height
of the elements.
Add the following code in your CSS:

*{
box-sizing: border-box;
}

The following example shows a simple responsive web page, with two columns:

.menu {
width: 25%;
float: left;
}
.main {
width: 75%;
float: left;
}

The example above is fine if the web page only contains two columns.

However, we want to use a responsive grid-view with 12 columns, to have more

control over the web page.

Downloaded by Krishnaveni Subbarayalu (venitec@gmail.com)

 First we must calculate the percentage for one column: 100% / 12 columns = 8.33%.

Then we make one class for each of the 12 columns, class="col-" and a
number defining how many columns the section should span:

CSS:

.col-1 {width: 8.33%;}

.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}

All these columns should be floating to the left, and have a padding of 15px:

CSS:

[class*="col-"] {
float: left;
padding: 15px;

border: 1px solid red;

Each row should be wrapped in a <div>. The number of columns inside a row should
always add up to 12:

Downloaded by Krishnaveni Subbarayalu (venitec@gmail.com)

 HTML:

<div class="row">
<div class="col-3">...</div> <!-- 25% -->
<div class="col-9">...</div> <!-- 75% -->

The columns inside a row are all floating to the left, and are therefore taken out of the
flow of the page, and other elements will be placed as if the columns do not exist. To
prevent this, we will add a style that clears the flow:

CSS:

.row::after {
content: "";
clear: both;
display: table;

We also want to add some styles and colors to make it look better:

Example

html {
font-family: "Lucida Sans", sans-serif;
}

.header {
background-color: #9933cc; color: #ffffff;
padding: 15px;
}

.menu ul {
list-style-type: none; margin: 0;
padding: 0;

Downloaded by Krishnaveni Subbarayalu (venitec@gmail.com)

 }

.menu li { padding: 8px;

margin-bottom: 7px; background-color :#33b5e5; color: #ffffff;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}

.menu li:hover {
background-color: #0099cc;
}

PART-A

1. Define web development? And its types?

2. Web development refers to the creating, building, and maintaining of websites.
3. • It includes aspects such as web design, web publishing, web programming, and
database
4. management.
5. • It is the creation of an application that works over the internet i.e. website
6. Web development refers to the creating, building, and maintaining of websites.
7. • It includes aspects such as web design, web publishing, web programming, and
database
8. management.
9. • It is the creation of an application that works over the internet i.e. website

Web development refers to the creating, building, and maintaining of websites.

• It includes aspects such as web design, web publishing, web programming, and
database

management.

• It is the creation of an application that works over the internet i.e. website

• Web development refers to the creating, building, and maintaining of websites.

Downloaded by Krishnaveni Subbarayalu (venitec@gmail.com)

• It includes aspects such as web design, web publishing, web programming, and database

management.

• It is the creation of an application that works over the internet i.e. websites.

Two Types

Web Development can be classified into two ways:

• Frontend Development

• Backend Development

➢ Frontend Development

The part of a website where the user interacts directly is termed as front end. It is also

Referred to as the ‘client side’ of the application.

Backend Development

Backend is the server side of a website. It is part of the website that users cannot see and
interact

with. It is the portion of software that does not come in direct contact with the users. It is used
to

store and arrange data.

➢ Backend Development

Backend is the server side of a website. It is part of the website that users cannot see and
interact

With. It is the portion of software that does not come in direct contact with the users. It is
used to

Store and arrange data.

2. What is Mobile application development?

Downloaded by Krishnaveni Subbarayalu (venitec@gmail.com)

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 mobile 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 HTML5.

3. What are the different ways to develop the mobile apps?

There are 3 different ways to develop Mobile apps:

1. 1st Party Native App development

2. Progressive web Application

3. Cross-Platform Application

There are 3 different ways to develop Mobile apps:

1. 1st Party Native App development

2. Progressive web Application

3. Cross-Platform Application

4. Difference between PWA and Native Application?

2021 Regulation CCS332 App Development UNIT 1

Gomathi N. Page 15

5. It saves money and time compared to creating applications separately for android, iOS,
and

other platforms.

6. Post can be read even if there is no internet.

7. Internet data is less used in it.

Downloaded by Krishnaveni Subbarayalu (venitec@gmail.com)

8. PWA is cheaper than the other applications.

Disadvantages of PWA

1. It supports a limited mobile browser. It does not run on the safari, edge, and IE
browser.

2. iPhone users cannot establish connections securely in it.

3. It makes maximum use of the battery of the device.

4. It needs to be hosted on the server because it is a web app.

5. It cannot be downloaded from popular app stores such as Google Play and Apple App
Store.

6. 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.

7. It supports limited hardware functionality.

Difference between PWA and Native Application

Feature

Progressive Web Application

Native Application

Function offline

Yes

Yes

Installation

requirement

There is no need to install it in mobile.

It is necessary to install it in the phone.

Push-notification.

Downloaded by Krishnaveni Subbarayalu (venitec@gmail.com)

It supports the push-notification

feature.

It also supports the push-notification

feature.

Platform

It supports the cross-platform.

It supports the specific platform. Example

iOS, Android, and Windows

Data consumption

Low data consumption

High data consumptio

Features Progressive Web Native Application

Application

Installation There is no need to install it It is necessary to install it in

mobile the phone
requirement

Installation

requirement

Push- It supports the push- It also supports the push-

notification notification notification

Feature feature

Platform It supports the cross- It supports the specific

platform. platform. Example

Downloaded by Krishnaveni Subbarayalu (venitec@gmail.com)

 iOS, Android, and Windows

Data Low data consumption High data consumption

consumption

Shareable It is easy to share from It shares the entire

anyone. application, so it

Complex

5. What is Cross-Platform 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)

Downloaded by Krishnaveni Subbarayalu (venitec@gmail.com)

6. Define hybrid apps? Mention the examples of hybrid apps?

A hybrid application is a software app that combines elements of both native and web

Applications.

Hybrid apps are popular because they allow developers to write code for a mobile app once
and still accommodate multiple platforms. Because hybrid apps add an extra layer between
the source code and the target platform, they may perform slightly slower than native or web
versions of the same app.

Five hybrid mobile apps that is extremely popular among users across the globe:

1. Example #1: Instagram

2. Example #2: Uber

3. Example #3: Gmail

4. Example #4: Evernote

5. Example #5: Twitter

7. What are the characteristics of progressive web application?

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 searched via
mobile

searching 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: A PWA application should look like a native application. Although the
methods

Downloaded by Krishnaveni Subbarayalu (venitec@gmail.com)

for creating, sharing, launching, and updating of the PWA are completely different from the

original application.

5. Connectivity-independent: It works even when connectivity is very low

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 searched via mobile
searching 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: 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.

5. Connectivity-independent: It works even when connectivity is very low

8. What Is Responsive Web Design?

Responsive Web design is the approach that suggests that design and development should
respond to the user’s behaviour and environment based on screen size, platform and
orientation. The practice consists of a mix of flexible grids and layouts, images and an
intelligent use of CSS media queries.
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.

9. Difference between Progressive web Application and Responsive Web Application?

PWA RWA
Loading PWAs are as fast as native apps. Thanks Loading and processing data

Downloaded by Krishnaveni Subbarayalu (venitec@gmail.com)

 Speed to an app shell, the code will be cached on a mobile device will take
on your device after the first load. much longer.
Adaptability Independent of the devices and platforms. You need to write different
code for various platforms.

Security PWAs are reliably protected through the While an RWA might be as
use of the HTTPS protocol. secure as a PWA, responsive
websites are not required to
use secure protocols.
Home screen It has a clickable icon just like a native The ability to add an app icon
icon app. to the home screen is absent
here.

Push Once the PWA is opened, the user will be Does not provide users with
Notifications prompted to enable unique push this option
notifications.

10. what are the Challenges of Native App Development?

• Higher Development Costs
• More Development Time
• Need for Skilled Developers
• Require Constant Updates
• Lengthy Downloading Process

PART-B

1. Brief note on Mobile Application Development?

2. Explain detail about Basics of Web Application?

3. Brief note on Hybrid APP? Mention its Pros and Cons of Hybrid App?

4. Explain detail about Technical Components of Progressive Web Application?

5. Summarize the difference of Web apps, Hybrid apps and Native apps?

Downloaded by Krishnaveni Subbarayalu (venitec@gmail.com)