Basics of Web and Mobile application development

 Basics of Web Development

Frontend Development
Backend Development
 Frontend Roadmap:

Frontend may be HTML, CSS, JavaScript, BootStrap.

Hyper Text Markup Language

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

PHP is a server-side scripting language

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

 There are 3 different ways to develop Mobile apps:

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

Example for Native App

Photos
Mail
Contacts applications
 Native App Development

 Native app development is the process of creating

mobile applications specific to a single platform.

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

 Flawless Performance
 Superior UI and UX
 Access to Device Features
 Better Store Support
 More Security
 Easy Testing
 Fewer Bugs
 Instant Updates
Higher Development Costs
More Development Time
Need for Skilled Developers
Require Constant Updates
Lengthy Downloading Process
 Native App Development for Android

Native app development for Android uses tools like

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

The tools and resources that support the development

mobile apps for iOS are

 iOS SDK integrated with Cocoa Touch UI

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

 Working of Hybrid Apps:

Developers build hybrid apps using web technologies

such as JavaScript, CSS and HTML.
 Five hybrid mobile apps that is extremely
popular among users across the globe:
 Example #1: Instagram

 Example #2: Uber

 Example #3: Gmail

 Example #4: Evernote

 Example #5: Twitter

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

 Multiple frameworks could be used for cross-platform app

development.

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

 Well-known examples of cross-platform mobile

applications include:

 Instagram, Skype, Walmart, and Airbnb

(React Native)

 Google Ads, My BMW App, eBay Motors, and

the New York Times (Flutter)

 The World Bank, Fox Sports, Alaska Airlines,

and BBC Good Food (Xamarin)
 Faster development
 Lower costs
 Wider audience
 Consistency between platforms
 Reusable code

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

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

icon feels like a mobile application upon opening.

 develop that application for different platforms, such as

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

 PWA works like an app on mobile and looks very

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

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

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

Progressive Web Applications (PWA) has

five components.

 Web App manifest

 Application shell

 Service worker

 Webpack

 Transport Layer Security (TLS)

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

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

 Responsive web design makes your web

page look good on all devices.
 Responsive web design uses only HTML
and CSS.
 Responsive web design is not a program
or a JavaScript.
 Designing for the best experience for all users

 Web pages can be viewed using many different

devices: desktops, tablets, and phones. Your web page
should look good, and be easy to use, regardless of the
device.
Desktop Tablet Phone
 Viewport
The viewport is the user's visible area of a web page.

 Setting the Viewport

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

 You should include the following <meta> viewport element

in all your web pages:

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

initial-scale=1.0">

 This gives the browser instructions on how to control the

page's dimensions and scaling.
Without the viewport meta tag With the viewport meta tag