Computer Languages classification

1. Markup Lang - HTML, XML, XHTML, etc

2. Programming Lang- C, C++, C#, Python, etc
3. Scripting Lang - PHP, Python, Ruby, ASP, etc

1. MARKUP LANGUAGE

It is a computer language that uses tags to define elements in a document.

Markup languages contains markup tags that is used to describe the web pages
It should have contents within opening and closing tags.
Markup languages contains standard words rather than typical programming syntax
Readable by human and computers

TAGS

In web Tags indicate what should be displayed on the screen when the page loads
Contains →opening part eg;- <p>
● <p> [p here is the tag name]
● <p colour =”red” size = “20”> [one or more attribute can be attached with tag name]
→content eg;- This is paragraph
● Can be any data
● Can even be sets of multiple tags be part of content
→closing part. Eg;- </p>
● Similar to opening part, only diff is they has a forward slash (/) before tag name
● No attributes can be attached to closing tags
● Opening and closing tag should be similar

HTML
● Hyper text Markup Language
● It is used to design web pages using Markup Languages
● Hyper text → link between web pages
Markup → text document within tags that defines the structure of web pages
● Not programming lang but a markup language
● Extension → .html or .htm
● Can be Written on notepad and executed in any web browser
● Predefined tags

Interchange Languages

Markup language which is used to carry or interchange data from one place to another.

Eg, Carry data from gmail to facebook , etc….

Languages : XML, JSON, YAML

XML
● Extensible Markup Language
● Like HTML but it was designed to describe the data
● Not predefined tags
● Uses DTD (Document type definition) or XML schema to describe data
● XML is designed to store and transport data
● XML is designed to be self-descriptive
● Users must require a piece of software to send, receive, store, or display it.
● XML makes web development User Friendly : Many computer systems contain data
in incompatible formats. Exchanging data between incompatible systems or
upgraded systems is a time-consuming task for web developers. Large amounts of
data must be converted, and incompatible data is often lost. XML stores data in plain
text format. This provides a software- and hardware-independent way of storing,
transporting, and sharing data.
● XML is Extensible: XML applications will work as expected even if data is edited i.e.
added or removed. Example :The above note is edited into a newer version by
adding date tag and hour tag , and by removing the heading tag.
● SYNTAX RULES: XML declaration
References
Tags and elements
Attributes
Text
XML STRUCTURE sttarts with root element. And these root elements has child elements
<product>
<item>
<name>Pen</name>
<price>20</price>
</item>
</product>

Differences between html and xml

HTML XML

Hypertext markup language Extensible markup language

Its is static web page as the codes are fixed Its is dynamic web page as it displays
for each page so the information contained different content and provide user
in the page does not change and it looks interaction
like a printed page

Is a markup language Provides a framework to define markup

language

Will ignore small errors Does Not allow errors

Not case sensitive Is case sensitive

Tags are predefined Tags are user defined

Limited number of tags Tags are extensible

Does not preserve white spaces Whites spaces can be preserved

Used for displaying the data Not for displaying data but for describing
,storing and transporting the data

Closing tags are not necessary Closing tags are necessary

Only displays does not carry data Carries data to and from database

JSON
● JSON stands for JavaScript Object Notation. It is a format for
structuring data. This format is used by different web applications to
communicate with each other.
● JSON is the replacement of the XML data exchange format in JSON.
● It is easy to structure the data compared to XML.
● It supports data structures like arrays and objects
● the JSON documents that are rapidly executed on the server.
● It is also a Language-Independent format that is derived from
JavaScript.
● The official media type for the JSON is application/json and to save
those file .json extensions.

Features of JSON:
● Easy to understand: JSON is easy to read and write.
● Format: It is text-based interchange format. It can store any kind of
data in an array of video, audio, and image anything that you require.
● Support: It is light-weighted and supported by almost every
language and OS. It has a wide range of support for the browsers
approx each browser supported by JSON.
● Dependency: It is an Independent language that is text-based. It is
much faster compared to other text-based structured data.
JSON Syntax Rules: Data is in name/value pairs and they are separated by
commas. It uses curly brackets to hold the objects and square brackets to
hold the arrays.
{
“Item”: [
{
“Name”: “Pen”,
“Price”: “20”,
},
{
“Name”: “Pencil”,
“Price”: “10”
}
]
}

Advantages of JSON:
● JSON stores all the data in an array so data transfer is easier. That’s
why JSON is the best for sharing data of any size, even audio, video,
etc.
● Its syntax is very easy to use. Its syntax is very small and
light-weighted; that's the reason that it executes and responds in a
faster way.
● JSON has a wide range for the browser to support compatibility with
the operating systems, it doesn’t require much effort to make it all
browser compatible.
● On the server-side parsing the most important part that developers
want, if the parsing will be fast on the server side then the user can
get the fast response, so in this case JSON server-side parsing is
the strong point compared to others.

Disadvantages of JSON:
 ● The main disadvantage for JSON is that there is no error handling in
JSON, if there was a slight mistake in the JSON script then you will
not get the structured data.
● JSON becomes quite dangerous when you use it with unauthorized
browsers. A JSON service returns a JSON file wrapped in a function
call that has to be executed by the browsers. If the browsers are
unauthorized then your data can be hacked.
● JSON has limited supported tools that we can use during JSON
development.

JSON (JavaScript Object Notation) is a lightweight data-interchange format

and it is completely language independent. It is based on the JavaScript
programming language and easy to understand and generate.
Example :

{"Geeks":[
{ "firstName":"Vivek",
"lastName":"Kothari" },
{ "firstName":"Suraj",
"lastName":"Kumar" },
{ "firstName":"John",
"lastName":"Smith" },
{ "firstName":"Peter",
"lastName":"Gregory" }
]}

XML (Extensible markup language) was designed to carry data, not to

display data. It is a W3C recommendation. Extensible Markup Language
(XML) is a markup language that defines a set of rules for encoding
documents in a format that is both human-readable and machine-readable.
The design goals of XML focus on simplicity, generality, and usability across
the Internet. It is a textual data format with strong support via Unicode for
different human languages. Although the design of XML focuses on
documents, the language is widely used for the representation of arbitrary
data structures such as those used in web services.
Example: :

<Geeks>
<Geek>
<firstName>Vivek</firstName>
<lastName>Kothari</lastName>
</Geek>
<Geek>
<firstName>Suraj</firstName>
<lastName>Kumar</lastName>
</Geek>
<Geek>
<firstName>John</firstName>
<lastName>Smith</lastName>
</Geek>
<Geek>
<firstName>Peter</firstName>
<lastName>Gregory</lastName>
</Geek>
</Geeks>

Both of these are self-describing and can be parsed and used by lots of
programming languages.
Below are few differences between JSON and XML:

JSON XML

It is JavaScript Object Notation It is Extensible markup language

It is based on JavaScript
It is derived from SGML.
language.
It is a way of representing It is a markup language and uses tag
objects. structure to represent data items.

It does not provide any support

It supports namespaces.
for namespaces.

It supports arrays. It doesn’t support arrays.

Its files are very easy to read Its documents are comparatively difficult
as compared to XML. to read and interpret.

It doesn’t use the end tag. It has start and end tags.

It is less secure. It is more secure than JSON.

It doesn’t support comments. It supports comments.

It supports only UTF-8

It supports various encoding.
encoding.
 Supports various data types
such as string, numbers, All XML data should be strings only.
arrays, booleans etc

XML represents data as a tree structure whereas json is used to map

with key value pairs
Comparatively Json i easy to read
Json can be parsed quicker than xml with less computational resource
usage.

YAML
YAML Ain't Markup Language is a data serialization language that matches user’s
expectations about data.
It is designed to be human friendly and works perfectly with other programming
languages.
It supports one direction processing.
Easy to implement and use.
It is useful to manage data and includes Unicode printable characters

Format
Consider the text shown below −

Quick brown fox jumped over the lazy dog.

The YAML text for this will be represented as shown below −

yaml.load(Quick brown fox jumped over the lazy dog.)

>>'Quick brown fox jumped over the lazy dog.'

Note that YAML takes the value in string format and represents the output as

mentioned above.

Examples
Let us understand the formats in YAML with the help of the following examples −

Consider the following point number of “pi”, which has a value of 3.1415926. In

YAML, it is represented as a floating number as shown below −

>>> yaml.load('3.1415926536')
3.1415926536

Suppose, multiple values are to be loaded in specific data structure as mentioned

below −

eggs
ham
spam
French basil salmon terrine

When you load this into YAML, the values are taken in an array data structure which

is a form of list. The output is as shown below −

>>> yaml.load('''
- eggs
- ham
- spam
- French basil salmon terrine
''')
['eggs', 'ham', 'spam', 'French basil salmon terrine']

Features
YAML includes a markup language with an important construct, to distinguish

data-oriented language with the document markup. The design goals and features

of YAML are given below −

● Matches native data structures of agile methodology and its languages

such as Perl, Python, PHP, Ruby and JavaScript

● YAML data is portable between programming languages

 ● Includes data consistent data model

● Easily readable by humans

● Supports one-direction processing

● Ease of implementation and usage

Rules for Creating YAML file

When you are creating a file in YAML, you should remember the following basic

rules −

● YAML is case sensitive

● The files should have .yaml as the extension

● YAML does not allow the use of tabs while creating YAML files; spaces

are allowed instead

Differences between YAML and JSON are:

YAML JSON

Aint Markup language JavaScript Object Notation

It is a data serialization language, which It is a format for structuring

matches the user expectation about the data. the data
 Comments are denoted with a hash/number
Comments are not allowed.
sign.

Hierarchy is denoted by using double space

Objects and Arrays are
characters
denoted in braces and
brackets.

Tab characters are allowed

Tab characters are not allowed.

String quotes are optional but it supports Strings must be in double

single and double quotes. quotes.

Root nodes can be any of the valid data Root node must either be an
types. array or an object.

DOCUMENT OBJECT MODEL

● DOM is a programming interface for HTML and XML Documents.
● It defines the logical structure of a document and the way how a document is
accessed and manipulated.
● The DOM represents the document in a structured hierarchical way as nodes and
objects; that way, programming languages can interact with the page, easier for
programmers and users to glide through the document
● With DOM, we can easily access and manipulate tags, IDs, classes, Attributes, or
Elements using commands or methods provided by the Document object.
● DOM can be thought of as a Tree or Forest(more than one tree).

Why DOM is required?

 ● HTML is used to structure the web pages and Javascript is used to add behavior to
our web pages.
● When an HTML file is loaded into the browser, the javascript can not understand the
HTML document directly. So, a corresponding document is created (DOM).
● DOM is basically the representation of the same HTML document but in a different
format with the use of objects.
● Javascript interprets DOM easily i.e javascript can not understand the
tags(<h1>H</h1>) in HTML document but can understand object h1 in DOM. Now,
Javascript can access each of the objects (h1, p, etc) by using different functions.
h1{

What is AJAX?
AJAX = Asynchronous JavaScript And XML.

AJAX is not a programming language.

AJAX just uses a combination of:

● A browser built-in XMLHttpRequest object (to request data from a web server)
● JavaScript and HTML DOM (to display or use the data)

AJAX is a misleading name. AJAX applications might use XML to transport data, but it is equally
common to transport data as plain text or JSON text.

AJAX allows web pages to be updated asynchronously by exchanging data with a web
server behind the scenes. This means that it is possible to update parts of a web page,
without reloading the whole page.

How AJAX Works

​ 1. An event occurs in a web page (the page is loaded, a button is clicked)
​ 2. An XMLHttpRequest object is created by JavaScript
​ 3. The XMLHttpRequest object sends a request to a web server
​ 4. The server processes the request
​ 5. The server sends a response back to the web page
​ 6. The response is read by JavaScript

​ 7. Proper action (like page update) is performed by JavaScript

Web Protocol
Protocols: It is a set of rules that need to be followed by the communicating
parties in order to have successful and reliable data communication. For
example - Ethernet and HTTP.

HTTP
● HyperText Transfer Protocol (HTTP) is a protocol that allows you to
transfer hypertext over the Web.
● Due to its simplicity, http has been the most widely used protocol for
data transfer over the Web but the data (i.e. hypertext) exchanged using
http isn’t as secure as we would like it to be. In fact, hyper-text
exchanged using http goes as plain text i.e. anyone between the
browser and server can read it relatively easily if one intercepts this
exchange of data.

Features of HTTP
● Connectionless
● Media independent
● Stateless

Note: To overcome connectionless feature,

we can use cookies and session

Note: Web client is the browser

HTTPS
Hypertext Transfer Protocol Secure: Used for any secure communication between 2
systems since the data is encrypted.

Encryption: By using algorithm we transfer the data into different format, (i.e adds an
extra layer of security) which can be difficult for hackers to modify our data
Difference between HTTP and HTTPs :

HTTP HTTPS

HTTP stands for HyperText HTTPS for HyperText Transfer

Transfer Protocol. Protocol Secure.

Allows you to transfer data Allows you to transfer data

(hypertext) over the web as plain (hypertext) over the web in an
text encrypted format

In HTTP, the URL begins with In HTTPs, the URL starts with
“http://”. “https://”.

HTTP uses port number 80 for HTTPs uses port number 443
communication. for communication.

HTTP is considered to be
HTTPs is considered secure.
insecure.
 HTTPS works at Transport
HTTP works at Application Layer.
Layer.

In HTTP, Encryption is absent. Encryption is present in HTTPS.

HTTP does not require any

HTTPS needs SSL Certificates.
certificates.

HTTP does not improve search HTTPS helps to improve search

ranking ranking

HTTP faster than HTTPS HTTPS slower than HTTP

While HTTPS will have the data

HTTP does not use data hashtags before sending it and return it to
to secure data. its original state on the receiver
side.

SOAP
● SOAP is an acronym for Simple Object Access Protocol.
● It is an XML-based messaging protocol for exchanging information among
computers.
 ● SOAP is an application of the XML specification.
One of the web services: Web services are XML-based information exchange systems that use
the Internet for direct application-to-application interaction.

A Web service is a method of communication between two electronic devices

over a network. It is a software function provided at a network address over the
Web with the service always-on as in the concept of utility computing.
Here are some well-known web services that use markup languages:

● Web template.
● JSON-RPC.
● JSON-WSP.
● Web Services Description Language (WSDL)
● Web Services Conversation Language (WSCL)
● Web Services Flow Language (WSFL)

Points to Note
● SOAP is a communication protocol designed to communicate via the Internet.
● SOAP can extend HTTP for XML messaging.
● SOAP provides data transport for Web services.
● SOAP can exchange complete documents or call a remote procedure.
● SOAP can be used for broadcasting a message.
● SOAP is platform- and language-independent.
● SOAP is the XML way of defining what information is sent and how.
● SOAP enables client applications to easily connect to remote services and
invoke remote methods.

Although SOAP can be used in a variety of messaging systems and can be delivered via a
variety of transport protocols, the initial focus of SOAP is remote procedure calls transported
via HTTP.

Other frameworks including CORBA, DCOM, and Java RMI provide similar functionality to
SOAP, but SOAP messages are written entirely in XML and are therefore uniquely platform-
and language-independent.
Interface description Language
An interface description language or interface definition language, is a generic term
for a language that lets a program or object written in one language
communicate with another program written in an unknown language.

An interface definition language (IDL) is used to set up communications between

clients and servers in remote procedure calls (RPC). There have been many
variations of this such as Sun RPC, ONC RPC, DCE RPC and so on.
Basically, you use an IDL to specify the interface between client and server so
that the RPC mechanism can create the code stubs required to call functions
across the network.
RPC needs to create stub functions for the client and a server, using the IDL
information.

WSDL
WSDL stands for Web Services Description Language. It is the standard format for
describing a web service. WSDL was developed jointly by Microsoft and IBM.

Features of WSDL
● WSDL is an XML-based protocol for information exchange in
decentralized and distributed environments.
● WSDL definitions describe how to access a web service and what
operations it will perform.
● WSDL is a language for describing how to interface with XML-based
services.
● WSDL is an integral part of Universal Description, Discovery, and
Integration (UDDI), an XML-based worldwide business registry.
● WSDL is the language that UDDI uses.
● WSDL is pronounced as 'wiz-dull' and spelled out as 'W-S-D-L'.

WSDL USAGE

WSDL is often used in combination with SOAP and XML Schema to provide web
services over the Internet.
A client program connecting to a web service can read the WSDL to determine what
functions are available on the server. Any special data types used are embedded in
the WSDL file in the form of XML Schema. The client can then use SOAP to actually
call one of the functions listed in the WSDL.

History of WSDL
WSDL 1.1 was submitted as a W3C Note by Ariba, IBM, and Microsoft for describing
services for the W3C XML Activity on XML Protocols in March 2001.

WSDL 1.1 has not been endorsed by the World Wide Web Consortium (W3C),
however it has just released a draft for version 2.0 that will be a recommendation (an
official standard), and thus endorsed by the W3C.

WSDL describes a web service. The wsdl document specifies the location of the
service, and the methods of the service, using these major elements:

Element Description

<types> Defines the (XML Schema) data types used by the web service

<message> Defines the data elements for each operation

<portType> Describes the operations that can be performed and the

messages involved.

<binding> Defines the protocol and data format for each port type

THRIFT
An interface definition language and binary communication protocol used for defining and
creating services for numerous programming languages.
It is a lightweight, language-independent software stack with an associated code generation
mechanism.
It provides clean abstractions for data transport.
It was originally developed by Facebook for scalable cross language services development
and now it is open sourced as an Apache project.

STYLE SHEET LANGUAGE.

1. XSL
It stands for EXtensible Stylesheet Language.
It is one of the style sheet language.
Initially Developed by W3C.
To style XML and not HTML
It describes how the XML elements should be displayed.
XSL consists of four parts:
XSLT - for transforming XML documents
XPath - for navigating in XML documents
XSL-FO - formatting XML documents
XQuery - for querying XML documents

What is XSL?
XSL is a language for expressing style sheets. An XSL style sheet is, like with CSS, a
file that describes how to display an XML document of a given type. XSL shares the
functionality and is compatible with CSS2 (although it uses a different syntax). It also
adds:

● A transformation language for XML documents: XSLT. Originally intended to

perform complex styling operations, like the generation of tables of contents and
indexes, it is now used as a general purpose XML processing language. XSLT is
thus widely used for purposes other than XSL, like generating HTML web pages
from XML data.
● Advanced styling features, expressed by an XML document type which defines a
set of elements called Formatting Objects, and attributes (in part borrowed from
CSS2 properties and adding more complex ones.

How Does It Work?

Styling requires a source XML documents, containing the information that the style sheet
will display and the style sheet itself which describes how to display a document of a
given type.
The following shows a sample XML file and how it can be transformed and rendered.

The XML file

<scene>
<FX>General Road Building noises.</FX>
<speech speaker="Prosser">
Come off it Mr Dent, you can't win
you know. There's no point in lying
down in the path of progress.
</speech>
<speech speaker="Arthur">
I've gone off the idea of progress.
It's overrated
</speech>
</scene>

This XML file doesn't contain any presentation information, which is contained in the
stylesheet. Separating the document's content and the document's styling information
allows displaying the same document on different media (like screen, paper, cell phone),
and it also enables users to view the document according to their preferences and
abilities, just by modifying the style sheet.

2. CSS
It stands for cascading style sheets.
It is used to style an HTML document.
It describes how HTML elements should be displayed.

There are three types of CSS which are given below:

● Inline: Inline CSS contains the CSS property in the body section
attached with the element known as inline CSS.
● Internal or Embedded: The CSS ruleset should be within the HTML file
in the head section i.e the CSS is embedded within the HTML file.
● External: External CSS contains a separate CSS file that contains only
style property with the help of tag attributes.
What does CSS mean?

Tags for formatting a web page were never intended in HTML. HTML was
established to define a web page’s content. The addition of tags like <font> and color
attributes to HTML created a big problem for web developers. The creation of large
websites, where fonts and color information were added to each page, became a
time-consuming and costly procedure. CSS was established to address this issue.
CSS eliminated the HTML page’s style formatting.

How is CSS different from HTML?

● HTML is used to define the structure of a web page whereas CSS is

used to style the web pages by using different styling features.
● HTML consists of tags inside which text is enclosed and CSS consists of
selectors and declaration blocks.
● CSS can be internal or external depending upon the requirement.
● We cannot use HTML inside a CSS sheet but we can use CSS inside an
HTML document.
● CSS has comparatively higher backup and support than HTML.

Why is CSS used in HTML?

● Solves a big problem: Font, color, background style, element

alignments, border, and size tags had to be duplicated on each web
page before CSS. This was a lengthy procedure.
● Saves a lot of time: Because CSS style definitions are stored in
external CSS files, updating only one file can modify the entire website.
● Provide more attributes: CSS gives more specific features for defining
the look and feel of a website than simple HTML.
 ● Pages load faster: CSS doesn’t require you to write HTML tag attributes
all of the time. A tag’s rule can be written once and applied to all
instances of the tag. As a result, CSS uses less code, resulting in
speedier download times.
● Easier Website maintenance: CSS makes website maintenance much
easier. If we need to make a global change to the file, we can simply
alter the style, which will update all of the elements on the web page.
● Multiple device compatibility: We can use CSS with older language
versions because it is compatible with them. CSS makes it possible to
optimize material for several devices.

Why we learn CSS?

Styling is an essential property for any website. It increases the standards and
overall look of the website that makes it easier for the user to interact with it. A
website can be made without CSS, as styling is MUST since no user would want to
interact with a dull and shabby website. So for knowing Web Development, learning
CSS is mandatory.

● Base for web development: HTML and CSS is the basic skill that every
web developer should know. It is the basic skill that is required for
building a website.
● Makes your website look attractive: A website that’s dull and plain will
not attract the user most probably, so adding some style would surely
make your website presentable to the user.
● Makes the design come live: A web developer is responsible for
making the design given to him as a live product. It is used for styling to
develop the design of the website.
● Increases user experience of the website: A website with a simple yet
beautiful UI would help the users to go through the website easily. It is
used to make the user interface better.
 ● More career opportunities: Since CSS is a basic requirement while
learning Web Development, therefor there are abundant career
opportunities for it. As a freelancer, you can land up to many projects.

CSS Object Model (CSSOM)

The CSS Object Model is a set of APIs allowing the manipulation of CSS from
JavaScript. It is much like the DOM, but for the CSS rather than the HTML. It allows
users to read and modify CSS style dynamically.

The values of CSS are represented untyped, that is using String objects.

*Reference
https://web.dev/critical-rendering-path-constructing-the-object-model/

XSL Vs CSS

- XSL uses the XML notation that is helpful in writing the codes and the tools are
provided in greater extent, whereas CSS doesn’t use any of the XML notations but
has its own.

- XSL is having the formatting object tree setup differently from the source tree;
whereas CSS is having the source tree and the formatting object tree the same.

- XSL can’t provide the inheritance of the source tree using the formatting properties,
whereas CSS provides the inheritance of the formatting object that is related to the
source tree.
- XSL is not supported by many of the web browsers, whereas CSS can be read by
modern web browsers.

Why XSL won’t replace CSS?

- XSL is used for complex formatting on the content that can be displayed in multiple
places.

- XSL is not for the dynamic formatting that uses the content in the online document
using the multiple files.

- XSL provides lots of capabilities but with limits as it provides efficient and easy to
allow modifications.

- It provides content generation workflows and uses different tools to choose the
tasks and XSL files.

- XSL is used to serve the web page to customize the XML data into the XML
document and use the CSS for styling purposes.

Standards:what is it? The purpose? Why was it introduced?

Web 1.0: it was all about basic access and connectivity across static websites.
before the internet was just a static web, like one big wikipedia with hyper texts.
Read only

Web 2.0: refers to websites & apps that utilize user generated contents for end
users.
Focus on user connectivity and collaboration.
started getting more interactive. Since we were interactive , org started collecting data
for us to provide more content that will make us stay on their websites longer.then they
realized they can sell the collected data to the advertisers.This is the age of targeted
advertising and lack of privacy to its users.
Eg: contents on facebook feed is sorted according to users preference.

Web 3.0:
 ● It is the next evolution of the internet, considered to be a semantic web, it will
have a strong emphasis on decentralized applications and makes extensive use
of block chain based technologies,machine learning and AI (artificial intelligence)
and the tools of decentralization, to help empower more intelligent and adaptive
applications.
● Web 3 is considered to be structured with AI, semantic web and ubiquitous
properties in mind.
● In web 2.0 you were the product as you were browsing the social network. But in
web 3.0 you will be the owner of the content you post online. (if you post and it
can just stay there if you want it to . but if you decide to take it down you control it
and can take it down. I.e usually when something is on the internet it always
stays on the internet, you can't completely take it down. Coz it will be on
thousands of servers around the world)

Main features of web 3

1. Decentralized → as opposed to the first and second generation web, where
governance and applications were largely centralized.
Web 3 will be decentralized. Apps and services will enable a distributed
approach, where there isn't a central authority.
2. Blockchain based → Blockchain is the enabler for the creation of decentralized
applications and services. Block chain provides more security by creating a
secure encryption. Cryptography provides security for all data in every block.
3. Cryptocurrency - enabled → this currency is the key feature of web 3.0 services
and largely replaces the use of fiat currency.
4. Autonomous and Artificial intelligence – more automation overall is a critical
feature of web 3.0 and that automation will largely be provided by AI.

Main contrast between 2 and 3 is

1. that web 3 mainly focuses on technologies like machine learning and AI relevant
content for each user rather than just the content other end users have provided.
2. Web 3 focuses strongly on decentralized authority and services.

Web 1.0 Web 2.0 Web 3.0

Created in 1989 by Tim Term coined by Tim Modern usage with

Berners-Lee O'Reilly in 2004 blockchain defined by Gavin
Wood, co-founder of
Ethereum, in 2014
 Static website content Dynamic content and user Semantic content that can
input benefit from AI

Information delivery Social networks Metaverse worlds

Centralized infrastructure Cloud utility infrastructure Decentralized, edge

that is still largely computing and peer-to-peer
centralized

Relational database-driven content and application delivery Blockchain-based distributed

services

CHAPTER - 02

REQUIREMENT ANALYSIS.
Process of gathering the software requirement from clients, analyze and document
them is know as Requirement Engineering (aka Requirement analysis)
Requirements analysis or requirements engineering is a process used to determine
the needs and expectations of a new product. It involves frequent communication
with the stakeholders and end-users of the product to define expectations, resolve
conflicts, and document all the key requirements.

A business requirements analysis involves a team effort of all the key stakeholders,
software developers, end-users, and customer managers to achieve a shared
understanding of what the product should do. This is always done in the early
phase of any project to ensure that the final product conforms to all the
requirements.

Requirements analysis involves frequent communication with system users to

determine specific feature expectations, resolution of conflict or ambiguity in
requirements as demanded by the various users or groups of users, avoidance of
feature creep and documentation of all aspects of the project development
process from start to finish. Energy should be directed towards ensuring that the
final system or product conforms to client needs rather than attempting to mold
user expectations to fit the requirements.

PROCESS

Requirement elicitation :
Process of gaining requirements by communicating with the customer.
Also the various ways to gain knowledge about the project domain and
requirement through customers and other stakeholders.
Formal models of requirement are not provided, instead it just broadens the
domain knowledge of the analyst and thus aids in input for the next stage.
Techniques: Brainstorming, prototyping, interviews, surveys, questionnaires.

Analyzing the requirements:

Determining if the gathered requirements are clear and complete without any
irrevalancy. If any issues arises then they should be solved.

Requirement modelling:
Analyzed requirement might be documented as use cases.
This activity produces a formal requirement model based on the elicitation
process.
All requirements including functional, non functional and constraints are specified
in these models.
Models: ER diagram, DFD (Data flow diagram), data dictionaries etc

Requirement verification and validation:

Set of tasks that ensures that the software correctly implements a specific task is
verification.
Set of tasks that ensures that the software has been built according to the
customer requirement is validation.
Methods: Reviews, buddy checks, making test cases.

Requirement Management:
The process of analyzing, documenting, tracking, agreeing on the requirement
and controlling the communication to relevant stakeholders.
This stage takes care of the changing nature of requirements. SRS should be
modifiable based on the changes incorporated by the end users at the later
stages
TECHNIQUES
1. Business process modeling notation (BPMN)
2. Unified Modeling Language (UML)
3. Flow chart technique
4. Data flow diagram (DFD)
5. Gantt chart
6. Gap analysis

TOOLS
1. Jama software
2. Pearl
3. Caliber
4. Modern requirements
5. Accompa
6. Orcanos

InVEST
InVEST is a suite of free, open-source software models used to map and value
the goods and services from nature that sustain and fulfill human life.
It helps explore how changes in ecosystems can lead to changes in the flows of
many different benefits to people.

InVEST (Integrated Valuation of Ecosystem Services and

Trade-offs) is a suite of open-source software models for
mapping and valuing the ecosystem services provided by
land and seascapes. It uses data about the environment to
explore how changes in ecosystems are likely to affect the
flow of benefits to people. It is designed to inform decisions
about natural resource management.

If properly managed, ecosystems yield a flow of services that are vital to humanity,
including the production of goods (e.g., food), life-support processes (e.g., water
purification), and life-fulfilling conditions (e.g., beauty, opportunities for recreation),
and the conservation of options (e.g., genetic diversity for future use).

Agile INVEST
is an acronym that helps Agile team assess the quality of a user story.

User story is an informal description of a feature written from the

perspective of the user.
It is the smallest unit of work in aan agile framework.
Purpose is to contextualize how a particular feature will provide value to
the customer.
Not overly detailed or not written in technical language.

Agile INVEST Stands for

Independent → user stories should be independent of each other in gile
environment.
Negotible → user stories should encourage collaboration between
customers and developers. Shouldnt be closed contract instead shoul be
open to adjustment
Valuable → demonstrate how feature provides value to the user.
Estimable → developers needs to know exactly what is involved in
creating a feature. User stories should be clearly defined and
understandable to developers so that they can be divided into individual
tasks and planned effectively
Small → User stories shouldnt be long. And overly detailed documents.
They should be short and consise and easy to understand.
Testable→ user stories should be testable to confirm whether they are
complete.

Teams can use INVEST as a guide to create meaningful user stories. If

the story does not meet one or more of the INVEST criteria in agile,
teams may consider rewording or even rewriting altogether.
INVEST

DOUBLE DIAMOND MODEL

(https://www.justinmind.com/blog/double-diamond-model-what-is-should-you-use/)

● Double diamond model is one of the design process models, it is a framework

that can be applied to any problem that calls for solution.
● invented by the British design council in 2005.
● Used by system designers, to follow their creative process (used as a road
map to create creative things).

DDM has four stages:

1. Discover →
● Identify what the actual problem is by learning more about the variables
that are affecting the problem and gather data.
● Activities of this stage include market research and user testing.
 ● Starbucks makes for a great example: company policy dictates that
any designer is to spend a month working as a barista in any of their
venues before designing anything. This submerges people in the
design context and clarifies the problem at hand, while promoting
multi-disciplinary cooperation. A win-win!

2. Define →
● In this stage, the information gathered in stage one will be filtered to
get rid of the irrelevant data, and these filtered data will be elaborated
● Doing so will make everyone (internal and external parties) understand
the context of the project as well as understand the company’s financial
capabilities, its resources, logistics and market situation before
designing the project.
● The end of definition stage comes with corporate sign-off. Top
management will either accept or decline the project to move forward.

3. Develop →
● this stage is where design starts.
● Actual making of the solution to the problem defined in stage one and
two.
● Different department work together in order to speed up the problem
solving and design process

4. Deliver →
● This is the final stage of the DDM.
● It includes final testing of the product and official signing off of the
production and launching.

Together these stages work as a map, for designers to organize their thoughts in
order to improve the creative process

DIAGRAM of DDM

PROJECT MANAGEMENT

Project management is the application of processes, methods, skills, knowledge

and experience to achieve specific project objectives according to the project
acceptance criteria within agreed parameters.

Constraints : Time, Scope, budget.

STAGES
1. Initiating:
 ● First stage/ starting point of any project.
● Turning the abstract ideas → Meaningful goals
● Project charter is created (charter doesn’t contain any technical details
that happens in the planning stage)
● Main activity: Pre-sale. (i.e the period in which service provider proves
the eligibility and ability of completing the project to the client and
eventually wins the business)
● Then detailed requirement gathering takes place .
● Requirements are gathered, analyzed and negotiation takes place to
change or remove certain requirements
● Project initiation stage ends with requirement sign-off

2. Planning:
● Most important stage, which lays the roads map of the project
● Primary task: Identifying the technical requirements.
● Project plan (project plan is derived addressing the project requirement
such as requirements, scope, budget and timeline) and project
schedule is derived.
● Based on the budget and schedule, resources are allocated.

3. Executing:
● All paper works are over by this stage, and the team does the actual
work in order to achieve project objectives.
● Many reporting activities will be done. Senior manager of the company
will require daily or weekly updates on the project progress
● Client too might want to track the progress of the project
● It is very important to track the effort and the cost of the project, to
determine whether the project is progressing in the right direction or not

4. Monitoring and controlling:

● Project activities should be controlled and validated.
● Controlling is done by adhering to the initial protocols such as project
plan, quality assurance , test plan and communication plan of the
project
● Each activity and delivery should be validated for the successful
outcome or completion
● Separate team called the Quality Assurance Team will assist in the
verification and validation process.

5. Closure:
● The project closure stage indicates the end of the project
● Once the project requirements are achieved it's time to handover the
implemented system and close out the project.
 ● If the project deliveries are in par with the clients requirements, then it
is accepted and paid by the client.
● Then it's time to evaluate the entire project, the mistakes made by the
project team will be identified and will take necessary measures to
avoid them in the future.
● Most companies have reflection meetings in order to contemplate the
success and the failure of the project.

Project Management Tools

1. Kanban Tool
Kanban Tool is a good entry point to agile development. It allows you to visualize
your workflow and offers seamless time-tracking functionalities. It makes
collaboration and task tracking easy with notifications, reporting, and team
management features.

It provides features like reporting, document sharing, native mobile app, and more
which are ideal for medium and large businesses. Kanban tool also offers enterprise
users the ability to host the software onsite.

2. Trello
Trello is a leading online project management software with built-in collaboration
tools to work with your teams. It’s lightweight, simple, and straightforward to use. It
uses boards, lists, and cards to create tasks and stay organized. Users can
collaborate within the cards, share files, and leave comments

3. Asana
Asana is a flexible saas project management tool with a focus on collaboration.
There are workflows that automate recurring tasks. It is intuitive with different task
displays and supports custom fields and forms. You can even invite unlimited guest
users. There are also options to build custom rules and approval workflows.

4. Wrike
Wrike is a cloud-based project management tool that simplifies project planning,
helps track your team’s work, monitor deadlines, and collaborate easily with all
stakeholders. It offers a lot of advanced features like task management, Gantt
Charts, a real-time newsfeed, and more. You can prioritize tasks to push the crucial
tasks forward and make sure deadlines are met. There are also plenty of integration
options which makes it a powerful project management suite.

Project Management Techniques

 1.Work breakdown structure (WBS)
What it is: instead of dealing with a behemoth of a project that feels
overwhelming, smart project managers break the work into more manageable
tasks, a strategy called work breakdown structure.

How it works: this isn’t just about taking something complicated and breaking it
down into smaller parts. Using the WBS technique, it’s easier to organize smaller
tasks into a workflow than larger ones.

Why it works: when breaking down a project into smaller bites, teams can see
which tasks depend on others and when to complete them. It’s also significantly
easier to estimate how much time and money to spend on each task.

This makes resource planning and managing stakeholder’s expectations

smoother.

2. Scrum
What it is: Scrum is the most common framework within the Agile methodology.
It defines the project goal over a series of short development cycles known as
“sprints.”

How it works: teams refine the high-level scope through iterations. At the start of
the sprint, teams figure out how many items they can commit to and create a
sprint backlog (a list of the tasks to perform during the sprint).

Why it works: these iterations improve the likelihood of delivering a product that
fully satisfies customer requirements. Plus they can deliver a viable product
earlier than in more traditional methodologies, which is important for businesses
where speed-to-market is crucial.

3. Kanban
What it is: in Kanban, a project’s workflow is broken down into smaller tasks.
These tasks are then organized and displayed, so everyone on the team is aware
of project progress.

How it works: often, tasks on a Kanban software are separated into columns. A
classic Kanban board shows 3 columns assigning tasks a status of:

​ To-do
 ​ Doing
​ Done

One popular addition is a ‘Stuck’ column, to show tasks that are in-progress but
not progressing for some reason.

Why it works: Kanban is great for projects with sequential workflows and limited
dependencies that allow team members to concentrate on their own tasks.

4. Gantt
For illustrating the project schedule.
Used to track utilization of resources in the project
Track overall project progression
Track individual tasks

What is it: a Gantt chart is a bar chart that allows you to visualize project
activities over time. It’s especially useful because it shows what work needs to
be completed on specific days.

How it works: Gantt charts allow project managers to determine — at a glance

— current project progress and take any action to bring the project back on
schedule.

Why it works: Gantt charts show:

​ The start date of the project

The project tasks
Which team member is working on what task
When tasks start and finish
How long tasks take
Task dependencies and milestones

5. PERT
Program Evaluation and Review Technique

Used to schedule, organize and map out tasks in the project. It provides visual
representation of a project’s timeline. It breaks down into individual tasks
What it is: PERT isn’t just focused on the critical path’s duration, but also the
relationships between project tasks.

PERT shows project tasks arranged more like a flowchart than sequential events.

How it works: this method improves the accuracy of task duration estimates by
using 3 possible inputs for the calculation:

1. Optimistic time
2. Pessimistic time
3. Most-likely time

Why it works: This can get pretty detailed so for more information, check out our
guide to PERT.

6. HISTOGRAM
Graph that shows the frequency of anything.
Has bar which represents the frequency of occurrence of data
X - axis → Event whose frequency is counted
Y - axis → Frequency
Different heights of the bar shows the different frequency of data occurrence.

AGILE SOFTWARE DEVELOPMENT

Agile is the process that allows the team to efficiently manage a project by
breaking it down into several stages each of which allows consistent
collaboration with stakeholders and collects continuous feedback to promote
steady improvement at every stage.

Agile method attempts iteration method, in which within a short period of time,
a section of the work is developed and tested,
Each iteration is like the miniature of software project, that includes all tasks
necessary to release the mini increment of the next new functionality.

Agile method emphasizes real time communication.

MANIFESTO FOR AGILE METHODS

1. Individuals and interactions over processes and tools →

[people drive the process and responds to business needs, they should
be valued over process and tools, if processes and tools drive the
 development, then team will less likely respond and adapt to change,
therefore less likely to meet customer demands]
2. Working software over comprehensive document → lenthy
documents take time thus delay in development.
agile method doesnt eliminate the need for documents, instead
document will be with only necessary information for the developer and
focus more on working software rather than documenting.
3. Customer collaboration over contract negotiation → agile focuses
on collaboration between the customer and project manager rather than
negotiating inorder to workout the details of delivery. Customer is
involved throughout the development journey rather than just beginning
and end. Thus making it easier for teams to work on customer needs.
4. Responding to change over following a plan →
Traditional development avoids change considering it undesired, but
agile eliminates this idea. With each iteration changes are made that
helps project to best fit the customer needs. Agile believes changes
pave way to improvement.

PRINCIPLES OF AGILE

1. Customer satisfaction
2. Consistent collaboration between businesses and developers
3. Frequent delivery
4. Early and continuous delivery
5. Face to face conversation
6. Embrace change
7. Motivated individual
8. Simplicity
9. Technical excellence
10. Functional products
11.Self organized teams
12. Regulation, reflection and adjustment

The Agile software development cycle can be broken down into six
steps:

1. concept,
2. inception,
3. iteration/construction,
4. release,
5. production
6. retirement.
The first step, concept, involves the identification of business opportunities in
each potential project as well as an estimation of the time and work that will be
required to complete the project. This information can then be used to
prioritize projects and discern which ones are worth pursuing based on
technical and economic feasibility.

During the second step, inception, team members are identified, funding is
established and the initial requirements are discussed with the customer. A
timeline should also be created that outlines the various responsibilities of
teams and clearly defines when work is expected to be completed for each
sprint. A sprint is a set period of time during which specific work has to be
completed and made ready for review.

The third step, iteration/construction, is when teams start creating working

software based on requirements and continuous feedback. The Agile software
development cycle relies on iterations -- or single development cycles -- that
build upon each other and lead into the next step of the overall development
process until the project is completed. Each iteration typically lasts between
two to four weeks, with a set completion date. The goal is to have a working
product to launch at the end of each iteration.

Multiple iterations occur throughout the development cycle and they each
possess their own workflow. A typical iteration flow consists of:

● defining requirements based on the product backlog, sprint backlog

and customer and stakeholder feedback;
● developing software based on the set requirements;
● conducting quality assurance testing, internal and external training
and documentation;
● delivering and integrating the working product into production; and
● gathering customer and stakeholder feedback on the iteration in
order to define new requirements for the next sprint.

The fourth step, release, involves final quality assurance testing, resolution of
any remaining defects, finalization of the system and user documentation and,
at the end, release of the final iteration into production.

After the release, the fifth step, production, focuses on the ongoing support
necessary to maintain the software. The development teams must keep the
software running smoothly while also teaching users exactly how to use it. The
production phase continues until the support has ended or the product is
planned for retirement.
The final step, retirement, incorporates all end-of-life activities, such as
notifying customers and final Migration. The system release must be removed
from production. This is usually done when a system needs to be replaced by
a new release or if the system becomes outdated, unnecessary or starts to go
against the business model.

AGILE METHODOLOGIES
1. Scrum
2. Kanban
3. Extreme programming
4. Lean software development
5. Crystal

SCRUM
Scrum is an agile methodology and sprint based project management system
that relies on incremental development.

It breaks down projects into sizable chuncks called sprints. Each iteration
consist of 2 to 4 weeks sprints, and the goal of each sprint is to develop the
most important features first and come up with the deliverable.

These sprints are adjusted based on stakeholder feedback taken between

each sprint.

Scrum teams works in a series of sprints most commonly two weeks in

duration. Each sprint is preceded by sprint planning meeting, this meeting is
run by the scrum master and attended by the product owner and the
development team. Together they select the high priority items from the
product backlog that the development team believes can commit to delivering
in a single sprint. This is the pull system of scrum.
The selected items is known as sprint backlog. For the next two weeks the
developers will focus on developing only the items in the sprint backlog. It is a
common practice to use a board to track the progress of the work known
scrum board, agile board or kanban board.
Each day there will be scrum meeting to discuss about the progress
andissues if any will be addressed this meeting will be for maximum of 15
mins. At the end of the sprint the work completed is packaged to release, any
features not achieve will return to the product back log. The sprint ends with 2
rituals. With sprint review and sprint retrospective.

Scrum is lighweight, simple to understand and difficult to master.

BENEFITS OF SCRUM
The greatest benefit of agile scrum methodology is its 1. flexibility and
adaptability. With the sprint-based model, the scrum team typically receives
feedback from stakeholders after each sprint. If there are any problems or
changes, the scrum team can easily and quickly adjust product goals during
future sprints to provide more valuable iterations thus leads to 2. Quality
improvement. This way, 3. customers are satisfied because they get
exactly what they want after being involved every step of the way.

Compared to traditional project management systems, in which stakeholders

do not provide frequent feedback and time is wasted making changes to the
product halfway through development – or worse, such as the teams needing
to start from scratch after the product has already been built. Thus 4. lower
cost and 5. avoid unnecessary cost

Reduced time to market

Employee satisfaction
Better dynamic team
Creativity and innovation
Organizational synergy

DIFFERENT ROLE IN SCRUM

1. Scrum master: The scrum master is the facilitator of the scrum

development process. In addition to holding daily meetings with the
scrum team, the scrum master makes certain that scrum rules are being
enforced and applied as intended. The scrum master’s responsibilities
also include coaching and motivating the team, removing impediments
to sprints, and ensuring that the team has the best possible conditions
to meet its goals and produce deliverable products.
2. Product owner: The product owner represents stakeholders, who are
typically customers. To ensure the scrum team is always delivering
value to stakeholders and the business, the product owner determines
product expectations, records changes to the product and administers a
scrum backlog, a detailed and constantly updated to-do list for the
scrum project. The product owner is also responsible for prioritizing
goals for each sprint, based on their value to stakeholders, such that the
most important and deliverable features are built in each iteration.
3. Scrum team: The scrum team is a self-organized group of three to nine
individuals who have the business, design, analytical and development
skills to carry out the actual work, solve problems and produce
deliverable products. Members of the scrum team self-administer tasks
and are jointly responsible for meeting each sprint’s goals.

KANBAN
 Kanban system usually Starts with a board and visual cards that represents
items in your product backlog (user stories). On the board you place the cards
into the columns that represent their current status in the workflow ranging
from “to-do” to “done”.
The visual nature of the board makes it easier to find out what is already done,
what is in progress and what is going to be started.
As the work progresses the cards will move towards the right , (i.e from to-do,
doing and done) and keep delivering the features to your customer.

Kanban doesn't have a 2 weeks sprint, instead it is a continuous process. and

no sprint backlog. The pull system in Kanban is different.
Each column on the kanban board has a work in progress limit related to its
capacity.
The feature which is done testing is moved to the done column, the empty
column is a signal to the previous column to send another ticket. That’s the
pull.
Has rituals such as daily stand-up meetings, demo for stakeholders and
retrospective.

SCRUM vs KANBAN
In Scrum role is known as scrum master
In kanban role is known as agile coach

Both are pull systems: pull systems ensure that work gets from product
backlog to customer in the shortest possible time. Pull system also helps to
uncover bottlenecks in the process.

Difference between Scrum and Kanban:

Scrum Kanban

It defines the role of each member of the Scrum

team. Eg: scrum master, product owner, There is no defined roles
development team.
It follows the iterative method. It does not follow the iterative approach

It is not very prescriptive as compared to

It is a highly prescriptive approach.
Scrum.

Sprint cycle lasts for one to 2 weeks then feature is

Has continuous delivery cycle
delivered

There are sprints that keep track of the progress of They use task cards to keep track of the
any project. progress of any project.

Artifact used is product backlog, sprint backlog,

Artifacts used is Kanban board
product increment

It is preferred when tasks and resources are

It is not preferred when resources are limited.
limited.

Encourages every team member to be the

Scrum Master is the problem solver in case of a
leader and sharing responsibilities among them
problem.
and are allowed to pick a problem and solve it.

The process does not get disturbed if a team The flow of work gets disturbed if a team
member leaves in between a sprint. member leaves in between.
Changes cant be made during a sprint. Not possible Changes can be incorporated any time. Items
to add items on the ongoing sprint. can be easily added

The Kanban methodology is focused on the

The scrum methodology is centered on the backlog.
dashboard.

“Velocity” through sprints is a production “Cycle time” is a production measurement

measurement metric. metric.

Having specialized team is important

Cross functional teams are important

Some of the Tools-

Some of the Tools-

● Jira Software
● Jira Software
● Kanbanize
● Axosoft
● SwiftKanban
● VivifyScrum and more.
● Asana and more.

HDD
Notes on the esoft text book

WAD TEAM
FRAMEWORK ARCHITECTURE
1. MVC: notes on the book
2. MVVM bnmk

VERSION CONTROL SYSTEM

Any system that provides change tracking and control over
programming source code and documentation can be considered
version control software.

Version control systems are catedory or collections of software tools

that helps tracking and managing files over time by keeping track of
the modifications done in the code, so that you can recall specific
version later.

It uses special kind of database to keep track of every modifications

to the code.

WHY VERSION CONTROL IS IMPORTANT.

As we know that a software product is developed in collaboration by

a group of developers they might be located at different locations
and each one of them contributes to some specific kind of
functionality/features.
So in order to contribute to the product, they make modifications
to the source code(either by adding or removing).
A version control system helps the developer team to efficiently
communicate and track all the changes that have been made to
the source code along with the information like who made and
what changes have been made.
A separate branch is created for every contributors who made
the changes and the changes aren’t merged into the original
source code unless all are analyzed as soon as the changes are
green signaled they merged to the main source code.
It not only keeps source code organized but also improves
productivity by making the development process smooth.

BENEFITS OF VCS

● Enhances project dev speed by providing efficient

collaboration.
● Better communication and assistance
● It helps reduce possibilities of errors and conflicts
meanwhile project dev through traceability to every small
change.
● Enables continuous integration and continuous delivery
● Acts as a backup to your project
● Helps you understand the history of the project and what has
happened
● Can contribute to the project from different geographical
locations
● For every contributor, they can maintain a different copy and
that copy is not merged to the source code unless it is
analyzed and validated. Eg: GIT
● Helps in recovery in cases of disaster or contingent situations.
we can roll back to the previous version and recover the old
version of your code
● It provides information on who made changes to the code,
what changes were made, when and why it has been made.

Cons

● The model is difficult for people to understand and it is hard to

explain. Even some coders have trouble understanding the
concept, try explaining it to someone less technical!

● The support for binary files is woeful! They are not great at
dealing with binary assets, especially large binary assets.

● Not so great at dealing with large projects (I'm talking about

gigabyte project sizes).

● Performance tends to degrade as project size increases.

● You might end up with many repositories, especially if you

 churn through projects quickly (as we do at Real Serious Games).
This can become difficult to manage. It can be tricky to
remember which projects contain what. This can be handled
somewhat with good process and documentation.

● Distributed version control doesn't allow partial syncing. You

can't sync just part of a project, you must sync the whole project.
This makes a lot of sense when you understand the nature of the
distributed system, but if you come from the traditional model
you might miss the ability to sync only a portion of a very large
repository. This is a good reason to keep your distributed repos
small and lightweight.

Types of Version Control System Perforce

● Localized version Control System

● Centralized version control systems

● Distributed version control systems

VERSION CONTROL SOFTWARE

1. Perforce Subversion
Perforce solves some problems very well. It's fast, it deals well with
binary files and large projects. It allows files to be locked which
stops multiple people from editing binary files.
However there it also causes plenty of problems. Perforce is old,
their tools are complicated, slow and buggy. You'll have to
workaround various issues with your workflow and the maintenance
cost for keeping it working chews through time and resource.
Answers on how to solve problems with Perforce can be hard to
come by and although it's easy to get started with it is extremely
difficult and time-consuming to master.
Perforce offers a massive amount of control and flexibility, this is
good but to make use of it you'll have to deal with their commands
and APIs which can be inconsistent and difficult to work with. The
outputs of Perforce commands can be tricky to parse.
 2. Subversion GIT
A widely used open-source/free traditional version control system.
It's quite mature and reasonably easy to get started with.
Its support for binary or large assets is ok.
It has a file locking system which can help when you want to
prevent multiple people working on the same file at the same time,
however this isn't really built into the process as you don't have to
check out a file before editing it. In many ways this is good because
you can modify files and SVN will figure out for you want have you
have changed, but it's bad for file locking because it makes it the
user's responsibility to check if a file is locked before changing it.
This makes room for user error and means multiple users can edit a
binary file, even when it is locked, when the users comes to submit
they will find that they must lose their changes if someone else
already has the file locked.

3. GIT
Git is a Distributed Version Control System (DVCS) used to
save different versions of a file (or set of files) so that any
version is retrievable at will.
In Git, there are three primary states (conditions) in which a
file can be: modified state, staged state, or committed
state.
Modified state
A file in the modified state is a revised — but uncommitted
(unrecorded) — file.

In other words, files in the modified state are files you have
modified but have not explicitly instructed Git to monitor.

Staged state
Files in the staged state are modified files that have been
selected — in their current state (version) — and are being
prepared to be saved (committed) into the .git repository
during the next commit snapshot.

Once a file gets staged, it implies that you have explicitly

authorized Git to monitor that file’s version.

Committed state
Files in the committed state are files successfully stored into
the .git repository.

Thus, a committed file is a file in which you have recorded its

staged version into the Git directory (folder).

Note: The state of a file determines the location where Git will
place it

ile locations
There are three key places versions of a file may reside while
version controlling with Git: the working directory, the
staging area, or the Git directory.

Working directory
The working directory is a local folder for a project's files. This
means that any folder created anywhere on a system is a
working directory.

Note:

● Files in the modified state reside in the working directory.

● The working directory is different from the .git directory.
That is, you create a working directory while Git creates
a .git directory.
● Check out this comparison article for more differences
between the two repositories.
Staging area
The staging area — technically called “index” in Git parlance
— is a file, usually located in the .git directory, that stores
information about files next-in-line to be committed into the
.git directory.

Note:

● Files in the staged state reside in the staging area.

Git directory
The .git directory is the folder (also called “repository”) that
Git creates inside the working directory you have instructed it
to track.

Also, the .git folder is where Git stores the object databases
and metadata of the file(s) you have instructed it to monitor.

Note:

● The .git directory is the life of Git — it is the item copied

when you clone a repository from another computer (or
from an online platform like GitHub).
● Files in the committed state reside in the Git directory.

The basic Git workflow

1. Modify files in the working directory.

Note that any file you alter becomes a file in the modified
state.
 2. Selectively stage the files you want to commit to the .git
directory.
Note that any file you stage (add) into the staging area
becomes a file in the staged state.
Also, be aware that staged files are not yet in the .git
database.
Staging means information about the staged file gets
included in a file (called "index") in the .git repository.
3. Commit the file(s) you have staged into the .git directory.
That is, permanently store a snapshot of the staged
file(s) into the .git database.
Note that any file version you commit to the .git directory
becomes a file in the committed state.

GitHub
GitHub is an immense platform for code hosting. It supports
version controlling and collaboration.
It is an American company. It hosts the source code of your
project in the form of different programming languages and
keeps track of the various changes made by programmers.
GitHub is a web-based platform where users can host Git
repositories. It helps you facilitate easy sharing and
collaboration on projects with anyone at any time.

GitHub also encourages broader participation in open-source

projects by providing a secure way to edit files in another
user's repository.

It offers both distributed version control and source code

management (SCM) functionality of Git. It also facilitates
collaboration features such as bug tracking, feature requests,
task management for every project.
Some of its significant features are as follows.

● Collaboration

● Integrated issue and bug tracking

● Graphical representation of branches

● Git repositories hosting

● Project management

● Team management

● Code hosting

● Track and assign tasks

● Conversations

differences between Git and GitHub.

Difference 1: Git vs. GitHub — Primary function

Git is a distributed version control system that records
different versions of a file (or set of files). It lets users access,
compare, update, and distribute any of the recorded
version(s) at any time.

However, GitHub is mainly a hosting platform for hosting Git

repositories online. It lets users keep their remote repository
private or open for collaborative endeavors.

Difference 2: Git vs. GitHub — Operation platform

Users install and operate Git on their local machines. This
means that most of Git's operations are achievable without
the internet.

GitHub, however, is a web-based service that operates solely

online. This means that you need the internet to do anything
on GitHub.

Difference 3: Git vs. GitHub — Inventors

Linus Torvalds began the development of Git in April, 2005.

Chris Wanstrath, P. J. Hyett, Tom Preston-Werner, and Scott

Chacon founded GitHub.com in February, 2008.

Difference 4: Git vs. GitHub — Competitors

Popular alternatives to Git are Mercurial, Team Foundation
Version Control (TFVC), Perforce Helix Core, Apache
Subversion, and IBM Rational ClearCase.

GitHub’s closest competitors are GitLab, Bitbucket,

SourceForge, Cloud Source Repositories, and AWS
CodeCommit.

All in all
Git and GitHub are two different entities that help you
manage and host files. In other words, Git serves to control
file versions while GitHub is a platform for hosting Git
repositories.

GitHub Git
It is a cloud-based tool developed It is a distributed version control tool that is
around the Git tool. used to manage the programmer's source
code history.

It is an online service that is used to Git tool is installed on our local machine for
store code and push from the version controlling and interacting with
computer running Git. online Git service.

It is dedicated to centralize source It is dedicated to version control and code

code hosting. sharing.

It is managed through the web. It is a command-line utility tool.

It provides a desktop interface called The desktop interface of Git is called Git
GitHub desktop GUI. GUI.

It has a built-in user management It does not provide any user management
feature. feature

It has a market place for tool It has a minimal tool configuration feature.
 configuration.

GitLab
GitLab is a github like service that organizations can use to
provide internal management of git repositories. It is a self
hosted Git-repository management system that keeps the
user code private and can easily deploy the changes of the
code.
Features
● GitLab hosts your (private) software projects for free.
● GitLab is a platform for managing Git repositories.
● GitLab offers free public and private repositories,
issue-tracking and wikis.
● GitLab is a user friendly web interface layer on top of
Git, which increases the speed of working with Git.
● GitLab provides its own Continuous Integration (CI)
system for managing the projects and provides user
interface along with other features of GitLab.
● While pushing and pulling repositories, it is not as fast as
GitHub.
UNIT 5
TESTING AND EVALUATION

WTF IS TESTING?
Testing is the process of discovering / finding errors / bugs.
It is the process of identifying the correctness, completeness and the
quality of the developed software. It ensures that the system works
correctly and has met its technical requirements. It helps reduce errors
and bugs thus creating a satisfactory system.

Testing is important as it discovers defects/ bugs in the system before

delivering to the client which will guarantee the quality of the software
system as well as the client's trust in us.
Testing methods:
a. Property-based testing
b. Unit testing
c. Integration testing
d. End-to-end testing
e. Manual testing
f. Visual testing
g. Cross-functional testing
h. Load testing

1. PROPERTY BASED TESTING

● This testing relies on properties.
● It checks if the function, program or whatever the system that
is under testing abides by a property.
● These properties do not have to into too much details of the
output, they just have to check for the useful characteristics
that must be seen in the output

Property-based tests are designed to test the aspects of a property that should
always be true. They allow for a range of inputs to be programmed and tested
within a single test, rather than having to write a different test for every value that you
want to test.

Eg: for all (a, b, c) strings

the concatenation of a, b and c always contains b

In other words, without any precise knowledge of the shape

and content of the strings a, b and c I can surely say that b is a
substring of a + b + c.

Benefits
They are numerous:

● Cover the scope of all possible inputs: by construct, it

does not restrict the generated inputs if not asked to do so.
Consequently it can theoretically generate all possible
 inputs and cover the whole range of strings, integers or
whatever type required by the system under test.
● Shrink the input in case of failure: whenever it fails,
the framework tries to reduce the input to a smaller input.
For instance: if the condition of the failure is the existence
of a given character in a string it should return the
one-character string having only this character. This is
certainly one of the most interesting features of such an
approach as most of the time the failure can be
summarized by a very small case.
● Reproducible and replayable: each time it runs a
property test, a seed is produced in order to be able to
re-run the test again on the same datasets. Any run failure
causes the framework to print both the failing case and the
seed in order to be able to fully reproduce the run.

It is also important to note that it does not — by any means —

replace unit testing. It only provides an additional layer of tests that
might prove very efficient to reduce some boilerplate tests.

2. UNIT TESTING

● It is a software technique that involves testing of each unit or

individual component (can be either individual component or
procedure) of the software application.
● In a testing level hierarchy, unit testing is the first level of
testing done before integration and other remaining levels of
the testing
● Unit testing is carried out during the development of an
application and typically performed by the developer himself
or else QA engineers will perform it.

Why unit testing?

 ● To isolate a section of code and test it therefore fix bugs and errors
in the early stage of the development process thus saving cost and
time.
● To verify the correctness of the code and to help with code
reusability
● It helps the developers to understand the base of the code that
makes them able to change defect code quickly.
● Unit testing helps in documentation

Unit testing techniques

1. Black box testing : covers the unit test for input, user interface and
output parts
2. White box testing : used in testing the functional behavior of the
system by giving the input and checking the functionality output
including the internal designs structure and codes of modules
3. Gray box testing : used in executing the relevant test cases, test
methods, test functions and analyzing the code performance for
the module.

Advantages of Unit Testing:

● Unit Testing allows developers to learn what functionality is
provided by a unit and how to use it to gain a basic understanding
of the unit API.
● Unit testing allows the programmer to refine code and make sure
the module works properly.
● Unit testing enables testing parts of the project without waiting for
others to be completed.

Disadvantages of Unit Testing:

● The process is time-consuming for writing the unit test cases.
● Unit Testing will not cover all the errors in the module because
there is a chance of having errors in the modules while doing
integration testing.
● Unit Testing is not efficient for checking the errors in the UI(User
Interface) part of the module.
● It requires more time for maintenance when the source code is
changed frequently.
● It cannot cover the non-functional testing parameters such as
scalability, the performance of the system, etc.

HOW IT IS PERFORMED
Can be performed manually or automatically..
If manually then, this method may have a document made detailing each
step in the process..
However if automated, then it uses a testing framework to develop test
cases. These frameworks are also set to flag and report any failed test
cases while also providing a summary of test cases.

3. INTEGRATION TESTING

● Once all the components or modules are working independently, it

is integrated and then we need to check the data flow between the
dependent modules. This is tested through integration testing
● Second level of testing in the software testing process.
● Upon the successful completion of unit testing, the modules used
for unit testing are combined and tested in integration testing.
● Focus: to expose the defects at the time of interaction between
integrated components/units
● Goals : is to check the correctness of communication among
modules.

Reason Behind Integration Testing

Although all modules of software application already tested in unit testing,
errors still exist due to the following reasons:

1. Each module is designed by individual software developers whose

programming logic may differ from developers of other modules, so
integration testing becomes essential to determine the working of
software modules.
2. To check the interaction of software modules with the database
whether it is erroneous or not.
3. Requirements can be changed or enhanced at the time of module
development. These new requirements may not be tested at the level of
unit testing hence integration testing becomes mandatory.
4. Incompatibility between modules of software could create errors.
5. To test hardware's compatibility with software.
6. If exception handling is inadequate between modules, it can create
bugs.

4 types of integration testing approaches

 1. Big bang integration testing:

It is the simplest integration testing approach, where all the

modules are combined and the functionality is verified after the
completion of individual module testing. In simple words, all the
modules of the system are simply put together and tested. This
approach is practicable only for very small systems. If an error is
found during the integration testing, it is very difficult to localize the
error as the error may potentially belong to any of the modules
being integrated. So, debugging errors reported during big bang
integration testing is very expensive to fix.

2. Bottom-up integration testing:

In bottom-up testing, each module at lower levels is tested with
higher modules until all modules are tested. The primary
purpose of this integration testing is that each subsystem tests the
interfaces among various modules making up the subsystem. This
integration testing uses test drivers to drive and pass appropriate
data to the lower level modules.

3. Top-down integration testing:

Top-down integration testing technique is used in order to simulate
the behavior of the lower-level modules that are not yet integrated.
In this integration testing, testing takes place from top to bottom.
First, high-level modules are tested and then low-level modules
and finally integrating the low-level modules to a high level to
ensure the system is working as intended.

4. Hybrid or mixed or sandwich integration testing:

A mixed integration testing is also called sandwiched integration
testing. A mixed integration testing follows a combination of top
down and bottom-up testing approaches. In a top-down
approach, testing can start only after the top-level module has
been coded and unit tested. In the bottom-up approach, testing
can start only after the bottom level modules are ready. This
sandwich or mixed approach overcomes this shortcoming of the
top-down and bottom-up approaches.

HOW IT IS PERFORMED
This testing method is performed using black box method. This method
implies that a testing team interacts with an app and its units via user
interface - by clicking on buttons, scrolling, swiping, etc.
They don't need to know how code works or consider the backend part
of the component.

4. End-to-end testing
End to end testing is a technique used to test whether the flow of an
application right from the start to end is behaving as expected.

Purpose is to identify system dependencies and to ensure data

integrity is maintained between various system components and
systems.

The entire application is tested for critical functionalities such as

communicating with the other systems, interfaces, database,
network, and other applications.

It is of 2 types:
1. Vertical testing. →
● does not involve users
● It refers to testing in layers, meaning that tests happen in
a sequential, hierarchical order.
● Used to test critical components of a system.
● It would be used to test such as application program
interface/ SQL interface
● Closely aligns with whitebox testing.
2. Horizontal testing →
● Testing that involves the user.
● It confirms whether the user can navigate through the
system, if system works as expected, and if there are
any unexpected bugs
● It would be used for testing a sign into a profile on an
ecom website, use of search and browse functionalities
in it, add item to cart, save item for later, buy an item, log
shipping and credit card information, confirm purchase
and then sign out.
 ● Closely aligns with black box testing

HOW IT IS PERFORMED

Before testing, designers and developers construct a list of what UI

or other functions they need to perform. Data flow should be
tracked from system to system to find dependencies, flaws, or
inaccuracies. Conditions should be prepared before testing,
including factors that may change any interface options such as
latency or traffic.
End-to-end testing is typically conducted on finished products
and systems, which makes each review a test of the completed
system and how it communicates with its parts. If the system
does not output what is expected, if a problem or issue is
found, then it is tested a second time. Data is recorded and
analyzed to determine the issue's origin, and then it is fixed
and re-tested.

5. Manual testing
● Software testing process where the test cases are executed
manually without using any automated tools.
● All these test cases are automated by the tester manually
according to the enduser’s perspective
● It is one of the most fundamental testing process as it can find
both hidden defects and visible defects. The developer will fix
these defects and hand it over to the tester for retesting.
● Requires great effort and time but guarantees a bug-free
software.
● Manual testing types are: white (done by the developer coz knowing
the code is essential),
black (done by the test engineer without knowing the code) and
grey box testing.(if the single person performs white box, as well as
black-box testing for the application, is known as Gray box testing.)

How to perform Manual Testing

 ● First, tester observes all documents related to software, to select
testing areas.

● Tester analyses requirement documents to cover all requirements

stated by the customer.

● Tester develops the test cases according to the requirement

document.

● All test cases are executed manually by using Black box testing
and white box testing.

● If bugs occurred then the testing team informs the development

team.

● The Development team fixes bugs and handed software to the

testing team for a retest.

6. Visual testing

● Aka visual UI testing

● It validates whether the software UI is compatible with the
user’s view. It validates how the various devices, browsers,
Operating systems etc. affect the software.
● It ensures that the web design correctly follows the shapes,
sizes and position of UI element. It also ensures that
elements are working properly with various devices

Why Visual Testing?

Visual testing is done because visual errors happen more frequently
than one might realize.
● It ensures that the developed product UI appears as expected
to the users.
● It helps in evaluating the defects in the UI interface.
● It correctly detects the variations in the UI which is not relevant
to the baseline snapshots.
 ● It helps to create dedicated visual test cases and covers the
functional points.
● Visual testing allows the tester or Quality Analyst to evaluate
the test cases visually which is easier to carry out.

Why Functional Testing Can’t Cover Visual Testing?

Visual bugs are rendering issues. Rendering validation is not

caught by functional testing tools.
Functional testing measures functional behavior. But, if there is
a requirement to check the functionality of the website, in that case,
function testing works properly and ensures the same.
If the visualization of the website is very messy as not expected
then it will not be detected by functional testing.

Example: While creating a website the submit button is placed at

the center but after the entire process by mistake if it is moved to
the right side of the browser page then during the functional testing
it will not catch or find that defect that the submit button is wrongly
placed. Because it checks whether the submit button functionality is
working properly or not. Here, it can’t cover the visual testing.

How Visual Testing is performed:

● The Quality Analyst or the tester runs the developed code to
test the web application’s user interface part.
● Initially, it will record the screen as snapshots. It acts as a
baseline with which the further test results will get compared.
● After that, the QA runs the code in the background and it
will take or record the snapshots of those running codes.
● Now, it will start comparing with the baseline snapshots.
● If changes are found among those snapshots then the test is
considered as failed.
● If no changes are found then it will be tested positively.

7. Cross-functional testing
Cross-functional testing is verification of non-functional
requirements.
These requirements are such characteristics of system that cannot
be implemented like a normal feature.
Eg. Number of concurrent users supported by system, usability of
site etc.
Cross-functional testing is related to cross-functional
requirements.
Often business users do not specify cross-functional requirements
in the beginning. But they expect these when software is complete
and deployed to production.
It is always a good idea to ask business users about such
cross-functional expectations in the initial phase of the project
itself.

8. Load testing

Load tesing is a type of testing where we check the application’s

performance by applying some load, which is either less than or
equal to the desired load.
Load means that when n number of users using the application
simultaneously or sending request to the server at a time.

The load testing is used to perform the maximum quantity of

software applications without important performance breakdown

Loading testing helps to detect the maximum operating capacity

of an application (governs how the application performs by being
accessed by several users at the same time) and detect any
blockages or bottlenecks.
The load testing is mainly used to test the Client/Server's
performance and applications that are web-based.
HOW LOAD TESTING IS PERFORMED

1. Test enviroment is setup. → the test environment should be

set up near to the production environment as likely in terms of
network, hardware, software specifications etc.

2. Load the test scenario or specify the performance criteria. →

● we will define the performance criteria, which contain
the response time, reasonable limits on throughput, and
the load test transaction.
● And then, we create the load test scenarios, which
ensure the success criteria are finalized.
● In the load testing, transactions are decided for an
application and data is set for each transaction.

3. Execution of test scenarios →

● Once we successfully create the load test scenarios, we
will execute the particular test scenarios.
● But before we execute the load test scenarios, we have
to set the different configurations and matrices to collect
the information.
● The load on the server is matched by consecutively
several virtual users to complete the tasks concurrently.
● And we can execute the entire scenario in virtual user
groups or individual virtual users.

4. Analysis of the test result →

● After executing the load test scenarios, we will analyze
the test results.
 5. Re-test → The last step of the load testing process depends
on the test result because if the test fails, we have to perform
the same process repeatedly until the test result is passed
and all the issues and bottlenecks are fixed.

Example

More people have a habit of booking a flight ticket throughout

holidays or on the days when an air company has an offer.

As we can see, more people incline to buy products during a

promotional event like Diwali, Black Friday, big billion days sales.

And if a website or an application crashes in such an event, users

may leave the website and go to a competitor's application, leading
to loss of revenue and market share. Those scenarios may occur
because we do not perform the load testing on the system.

TEST ORIENTED DEVELOPMENT METHODS

● Test development is the process where various test cases are

designed to execute the testing for the software or product.
● Consist of various stages, where requirements are gathered and
based on it, designs and documentation is made. Then the
implementation process starts. During implementation process,
various test are carried out to ensure the functionality of the
product

Test development process

1. Formality of test documentation:
Testing may be performed with varying degrees of formality.
Formal testing would have extensive documentation that is well
controlled and would expect the documented details of the tests to
include the exact and specific input and expected outcome of the
 test. Informal testing does not have documentation at all; individual
testers kept some notes.

2. Test analysis: identifying test conditions:

Test Analysis is nothing but a process of looking at something that
can be used to derive test information. It can be anything like
system requirements, code, technical information, business
requirements, design model. Sometimes testing is based on the
user’s knowledge and experience also. The test condition is
something that can be tested.

3. Test design: specifying test cases:

The most important aspect of the test is that it can assess that the
system does what it is supposed to do. To know the system
requirements, we need to have the source of information about the
behavior of the system. Once a given input value has been
chosen, the tester needs to determine the expected result
corresponding to the input value. Once both are decided, the tester
needs to document it while it will act as a part of the test case.
The expected result includes the information regarding the input
value, which is displayed on the screen in response to an input
entered by the user. It also includes changes to data or state or
any other consequences of the test.

4. Test implementation → specifying the test

procedures or scripts:
The next step is to gather all test cases sequentially to execute
them and specify the sequential steps needed to run the test.
Some test cases need to be run in a particular sequence.
For example, test cases that may create new records, amend that
new record, and then delete it. These tests need to be run in the
correct order.
Test procedures is a document that describes the steps that need
to be taken in running a set of tests.
It is referred to as test scripts.
Test scripts can be manual for the test that needs to run manually
or automated test tools for the test that needs to be automated.
After that, test procedures are formed into a test execution
schedule.
A test execution schedule is a scheme for the execution of the
test procedures. It is Specifying which test needs to be run first, or
 we can say that it decides the sequence of tests to be run in a
sequence manner.

TEST DRIVEN DEVELOPMENT

● TDD is the process in which test cases are written before the
code that validates those cases.
● It is the method of creating and executing automated tests
prior to the application’s real development.
● First step is Designing and building tests for each function of
an application. Only when an automated test fails, TDD
framework tell developers to write new code thus prevent
code duplication
● Based on the simple principle of developing and correcting
failed tests before writing new codes (i.e before
development) .
TDD is a development methodology using Test-First approach.

TDD PROCESS
TDD development starts with developing tests for each one of the
features/functions.
The test might fail as the tests are developed even before the
development of app.
Development team then develops and refactor the code to pass the test
1. Add a test → write a test case that describes the function
completely. (to develop test cases, developer must understand the
requirements and features using user stories and use cases)
2. Run all the test and see if new test case fails.
3. Write code that passes the test cases
4. Run the test cases
5. Refactor the code → done to remove duplication of code
6. Repeat the above mentioned steps again and again

TDD Motto
1. Red – Create a test case and make it fail
2. Green – Make the test case pass by any means.
3. Refactor – Change the code to remove duplicate/redundancy.
TDD PROS AND CONS
PROS
1. You only write code that is needed → Following the principles,
you’ve got to prevent writing production code when all of your tests
pass. If your project needs another feature, you would like a test to
drive the implementation of the feature. The code you write is the
simplest code possible. So, all the code ending up within the
product is really needed to implement the features.
2. Easier to maintain → as different part of your application are
decoupled from one another and have clear interfaces, the code
become easier to take care of. Also quality of design increases
which further helps in proper maintenance
3. Easier to refactor
4. High test coverage → as there is a test for each feature.
5. Test document the code → The test code shows you ways your
code is supposed to be used. As such, it documents your code.
The test code is a sample code that shows what the code does
and the way the interface has got to be used.
6. Less debugging
7. TDD act as safety net against bugs → there fore less to no
debugging thus prevents consuming loads of time trying to debug
8. Ensures that your app actually meets the requirement
9. TDD has very short development lifecycle
CONS
1. NO silver bullet → test help to seek out bugs but they cannot find
bugs that you simply introduce within your test code and in
implementation code. If you haven’t understood the matter you
would like to unravel, writing tests most likely doesn’t help.
2. Slow process → If you begin TDD, you’ll get the sensation that
you simply need an extended duration of your time for
straightforward implementations. you would like to believe the
interfaces, write the test code, and run the tests before you’ll finally
start writing the code.
3. All members of a team got to do it → As TDD influences the
planning of code, it’s recommended that either all the members of
a team use TDD or nobody in the least. Additionally, to the present,
it’s sometimes difficult to justify TDD to the management because
they often have the sensation that the implementation of latest
features takes longer if developers write code that will not find
 themselves within the product half the time. It helps if the entire
team agrees on the importance of unit tests.
4. Tests get to be maintained when requirements change →
Probably, the strongest argument against TDD is that the tests
need to be maintained because the code has got to. Whenever
requirements change, you would like to vary the code and tests.
But you’re working with TDD. This suggests that you simply have
to change the tests first then make the tests pass. So, actually, this
disadvantage is the same as before when writing code that
apparently takes an extended time it takes a long time.

BEHAVIORAL DRIVEN DEVELOPMENT

● BDD refers to Agile software development process that is derived from
the TDD methodology
● BDD is considered as a test to illustrate the behavior of the system.
● BDD uses examples to illustrate the behavior of the system that are
written in a readable and understandable language for everyone
involved in the development.
● BDD is written in simple English language statements, not in a typical
programming language. BDD improves communication between
technical and non-technical teams and stakeholders.
● In this development, techniques define various ways to develop a
feature based on the system’s behavior, and the techniques are
combined from Test Driven Development (TDD) and Domain Driven
Development (DDD).
● All parties are involved for collaborated conversation and illustration of
the system’s behavior

Example:

In order to ensure the working of Login Functionality, we are developing acceptance

test cases on the basis of BDD.

Feature: Login Function

To enter in the System

User must be able to

Access software when login is successful

Scenario: Login
Given User has its Email

And Password

When User enters the correct Email and Password

Then It should be logged in

Scenario: Unsuccessful Login

When User enters either wrong Email or Password

Then It should be reverse back on the login page with an error

message

BDD PROCESS/ LIFECYCLE

The client and service provider have a conversation about what they
need.
Then the client,developer and tester elaborate on the requirements
together.
Then requirements are defined in structured scenarios
This will help the development and act as automated tests,
These scenarios are used by the tester as the basis of tests.

1. Describe behavior → includes the flow and features of the product

means the main vision
2. Define requirement → modeled requirements with business rules
for a shared understanding
3. Run and fail test → develop and run the test cases
4. Apply code update → refactor it according to the requirement
5. Run and pass the test → run the updated code and pass the test
cases.
But the important point is that BDD is not about testing like TDD.
BDD is all about achieving business goals and requirements.

Difference between BDD vs TDD :

S.NO
Behavior Driven Development Test Driven Development
.

Test Driven Development is a

Behavior Driven Development is
development technique which
a development technique which
01. focuses more on the
focuses more on a software
implementation of a feature of a
application’s behavior.
software application/product.

In BDD the participants are In TDD the participants are

02.
Developers, Customer, QAs. developers.

Mainly it creates an executable

Mainly it refers to write a test
specification that fails because
case that fails because the
the respective feature doesn’t
specified functionality doesn’t
exist, then writing the simplest
exist and after that update the
03. code that can make the
code that can make the test
specification pass and as a
case pass and as a result we
result we get the required
get the feature implemented in
behavior implemented in the
the system.
system.

Its main focus is on system

04. Its main focus is on unit test.
requirements.

In BDD the starting point is a In TDD the starting point is a

05.
scenario. test case.
 06. It is a team methodology. It is a development practice.

Here language is used is similar

Here language used to write
to the one used for feature
07. behavior/scenarios is simple
development like programming
English language.
language.

In BDD collaboration is required In TDD collaboration is required

08.
between all the stakeholders. only between the developers.

It is a good approach for project It is a good approach for

09. development which are driven projects which involve API and
by user actions. third-party tools.

Some of the tools used are Some of the tools used are
Cucumber, Dave, JBehave, JBehave, JDave, Cucumber,
10.
Spec Flow, Concordian, Spec Flow, BeanSpec,
BeanSpec etc. FitNesse etc.

Benefits of BDD :
Greater clarity on business goals and customer requirements.
Reaches a larger customer set as it uses non-technical languages.
Helps in defining acceptance criteria before development.
Focuses on the system’s behavior from the client’s and developer’s point
of view.
Helps in avoiding unnecessary features and includes important features.
Reduces effort for post-modification and post-deployment defects.
Avoids misinterpretations during the development process.

Disadvantage of BDD :
Because communications between the user and the developer are essential, if
the user is not available, it will be difficult to work past ambiguities and
questions generated by the user stories.

The second disadvantage is the need to dedicate a team of developers to

work with the client.

TESTING FRAMEWORKS
A testing framework is a set of guidelines or rules used for creating and
designing test cases.
A framework is a combination of practices and tools that are designed to
help QA professionals test more efficiently.
These guidelines could include coding standards, test data handling
methods, object repositories, processes for storing test results, or
information on how to access external resources
These aren't mandatory rules that should be done by testers but by
using as organized framework, provides additional benefits.

BENEFITS OF USIND FRAMEWORKS

● Improves test efficiency and speed

● Improve test accuracy
● Reduce maintenance costs
● Lower risks.
● Minimal manual intervention
● Maximum test coverage
● Reusability of code

SOME OF THE TESTING FRAMEWORKS

1. Cucumber →
● It is a BDD tool used to develop the test cases for the
behavior of software’s functionality. (to develop test cases for
testing the software’s behavior)
● Plays a vital role in development of acceptance test cases for
the automation testing.
● Mainly used to write acceptance test cases for web app as
per the behavior of their functionalities by following the BDD
 framework to observe the behavior of the software
functionalities.
● Test cases are written in simple english so that anybody can
understand, regardless of technical knowledge
● Originally written in ‘Ruby’, now supports varieties of
languages

How Cucumber is used

1. Firstly, cucumber tool reads the steps written in Gherkin/

plain english inside the feature file
2. Then, it searches for the exact match of each steps in the
step definition
3. When it finds the match, it executes the test case and
provides the result as pass or fail.
4. The code of the developed software must correspond with
the BDD defined test scripts, if it doesn't then code
refactoring takes place.
5. The code gets freezed only after successful execution of
defined test scripts

2. Selenium →
● It open source and portal automation testing tool for
testing web applications
● Has the capability to operate across different browsers
and operating systems. Also its scripts are written in
various languages i.e python, java, C# etc…
● It could run the test directly on the target browser, drive
the interaction on the required web page and rerun
them without any manual input.
● Has 4 major components.
1. Selenium IDE
2. Selenium RC
3. Selenium web driver
4. Selenium GRID

3. Bugzilla →
● It is an open source bug tracking tool that tracks bugs
and issues of projects or software.
 ● It helps developers and stakeholders to keep track of
the outstanding problems with the product
● It is written in Perl language and uses MySQL
database
● Although it is a bug tracking tool, it can also be used as
a test management tool, because it can be linked with
the other test case management tools such as Quality
Center, ALM, Testlink

HOW IT IS USED?

A product user or a customer(usually a software) has a

problem and contacts the organization to report it. (sometimes that
problem represents an error in the code aka, bug)
The details gets recorded in the database (details of the
information is recorded in the rows and columns) and user interface is
provided for the people involved,(technical support, developers, project
managers etc…), to do all the below mentioned process
After recording, eventually goes through the process of
confirming, diagnosing, prioritizing and ideally fixing the bug.

4. JIRA
● It is an open source testing tool developed by an australian
company called Atlassian
● It is a bug tracking tool used to track issues and bugs related
to your software and mobile apps.
● Used : used mainly for issue tracking, bugs tracking and
project management
● Inherited from the japanese word gojira which means
Godzilla.
● Jira dashboard consist of many useful functions and features
which makes handling of issues easy.

5.JMeter
● JMeter also known as Apache JMeter
● It is an open source, 100% java based application with a
graphical interface.
● It has a simple, user friendly and an intercative GUI
● It is designed to analyze and measure the performance and
load functional behavior of web app and variety of services
 ● You can perform various testing like performance, load,
stress, regression and functional testing in order to get
accurate performance metrics against your web server.
● It is not a browser and doesnt render html pages like any
other browsers, rather it works on protocol level.
● JMeter is written and developed using java, so it can run on
any environment / workstation that accepts a Java virtual
machine, for example - Windows, Linux, Mac, etc.
● JMeter can simulate multiple users by using virtual users or
unique users in order to generate heavy load against web
application under test.

Working of JMeter

JMeter sends requests to a target server by simulating a group of users.

Subsequently, data is collected to calculate statistics and display
performance metrics of the target server through various formats.

WEB ANALYTICS

JAVA SCRIPT
JS is a high level, interpreted, programming language used to make web
pages more interactive.
It is a very powerful client side scripting language which makes your web
page more lively and interactive.
It is used by programmers across the world to create dynamic and
interactive web contents like applications and browsers.

USES OF JAVASCRIPT
1. Convert static web page to dynamic web page. i.e adding
interactive behavior to the web pages.
It allows user to interact with the web page, and to add special
effects to the web pages that is not achieved by just html and css.
Eg: Show or hide more information with the click of a button
Change the color of a button when the mouse hovers over it
Zooming in or zooming out on an image
 Playing audio and video in a web page
Using a drop-down menu.
Provides drag and drop options
2. To create web and mobile apps.
Developers use various JS frameworks for developing web
and mobile apps. The React Native is widely used JS
framework for creating mobile apps. Angular.js and Vue.js are
popular JS frameworks for creating web apps. Eg: LinkedIn,
Netflix and Uber

3. Game development
To create browser games as it has various libraries and
frameworks for creating games. The game can be either 2D or
3D.

4. Client side validations

It is very important to verify any user inputs before submitting
it to the server. And JS plays a major role in validating inputs
as front-end itself. Thus saves server traffics, which means
less load to the server.

5. Manipulate HTML webpages.

As it helps to manipulate html pages. This helps in adding and
deleting any html tags very easily using JS and modify your
html to change its look and feel based on different devices and
requirements

6. User Notifications
You can use Javascript to raise dynamic pop-ups on the webpages to
give different types of notifications to your website visitors.

7. Back End data loading

Javascript provides Ajax library which helps in loading back-end
data while you are doing some other processing. This really gives an
amazing experience to your website visitors.

8. Server Applications
 A large number of web applications have a server-side to them.
JavaScript is used to generate content and handle HTTP requests.
The Node.js provides an environment containing the necessary tools
required for JavaScript to run on servers.

STATEMENTS
A computer program is a set of instructions to be executed.
In programming languages, these instructions are called statements.
A JS program is a set of programming statements.
These statements consist of values, operators, expressions, keywords
and comments.
let x, y, z; // Statement 1
x = 5; // Statement 2
y = 6; // Statement 3
z = x + y; // Statement 4

EXPRESSIONS
An expression is any valid unit of code that resolves to a value and can
be evaluated.
● Arithmetic expressions.
● String expressions.
● Primary expressions.
● Array and object initializers expressions.
● Logical expressions.
● Left-hand-side expressions.
● Property access expressions.

IDENTIFIERS
These are javaScript names.
An identifier is a name given to entities like variables, functions, class
etc..
Rules: should start with either letters, underscore or dollar sign.
Should never start with numbers or other symbols.
It is case sensitive
Keywords cant be used as identifier names
//valid
const a = 'hello';
const _a = 'hello';
const $a = 'hello';
//invalid
const 1a = 'hello'; // this gives an error

const y = "hi";

const Y = 5;

console.log(y); // hi

console.log(Y); // 5

KEYWORDS
They are part of syntax in programming language.
Can never be used as identifiers

const a = 'hello';

Here, const is a keyword that denotes that a is a constant.

VALUES

JavaScript has two different types of values:

● Primitive values

● Reference values

A primitive (primitive value, primitive data type) is data that is not an

object and has no methods or properties. Primitive values are atomic
pieces of data.

while reference values are objects that might consist of multiple values.

● Primitive values (null, undefined, boolean, number, string, symbol,

and BigInt)

● Reference values that refer to objects.

A reference value allows you to add, change, or delete properties at any
time. For example:
let person = {
name: 'John',
age: 25,
};

// add the ssn property

person.ssn = '123-45-6789';

// change the name

person.name = 'John Doe';

// delete the age property

delete person.age;

console.log(person);
Code language: JavaScript (javascript)

Output:

{ name: 'John Doe', ssn: '123-45-6789' }

Unlike a reference value, a primitive value cannot have properties. This

means that you cannot add a property to a primitive value.

OBJECTS

JS variables are containers for data values.

Eg: let car = “flat”; // here simples value (i.e flat) is assigned to
variable named car

Objects are variables too but objects can contain many values
Eg: const car = {type: “flat” , model: “500” , color: “white”};

//here many values are assigned to the variable named car

//Values are written as name:value pairs (name and value separated by
colon)
// common practise is to declare objects as const keyword
Therefore An Object is a value in memory which is possibly referenced to
an identifier.
Objects can be seen as collections of properties. These properties are
identified using key values.
A key value is either a string or a symbol value.

PROPERTIES
Properties are values associated with JS objects.
Objects are collections of unordered properties.
These properties can usually be changed, added and deleted. But some
are read only.
What are properties in JavaScript?
A JavaScript property is a characteristic of an object, often describing
attributes associated with a data structure.

OPERATORS
Operators are special symbols used to perform operations on the
operands (values/variables)
Eg: 2+3; //5
Here + is an operator that performs addition, and 2 and 3 are operands.

Types of operators

Assignment operators → operators that is used to assign values to the

variables. const x = 5;

Operator Name Example

= Assignment operator a = 7; // 7

+= Addition assignment a += 5; // a = a + 5

-= Subtraction Assignment a -= 2; // a = a - 2
 *= Multiplication Assignment a *= 3; // a = a * 3

/= Division Assignment a /= 2; // a = a / 2

%= Remainder Assignment a %= 2; // a = a % 2

**= Exponentiation Assignment a **= 2; // a = a**2

Note: The commonly used assignment operator is =. You will understand

other assignment operators such as +=, -=, *= etc. once we learn arithmetic
operators.

Arithmetic operators → operators that is used to perform arithmetic

calculations. const number = 3 + 5; // 8

Operator Name Example

+ Addition x + y

- Subtraction x - y

* Multiplication x * y

/ Division x / y

% Remainder x % y

++ Increment (increments by 1) ++x or x++

-- Decrement (decrements by 1) --x or x--

** Exponentiation (Power) x ** y

Comparison operators → operators that is used to compare two values and

returns a boolean value, either true or false
const a = 3, b = 2;
console.log(a > b); // true

Operator Description Example

== Equal to: returns true if the operands x == y

are equal

!= Not equal to: returns true if the x != y

operands are not equal

=== Strict equal to: true if the operands are x === y

equal and of the same type

!== Strict not equal to: true if the operands x !== y

are equal but of different type or not
equal at all

> Greater than: true if left operand is x > y

greater than the right operand

>= Greater than or equal to: true if left x >= y

operand is greater than or equal to the
right operand
< Less than: true if the left operand is less x < y
than the right operand

<= Less than or equal to: true if the left x <= y

operand is less than or equal to the right
operand

Logical operators → operators that is used to perform logical operations

and return a boolean value, either true or false. For example,
const x = 5, y = 3;
(x < 6) && (y < 5); // true

Operator Description Example

&& Logical AND: true if both the operands x && y

are true, else returns false

|| Logical OR: true if either of the x || y

operands is true; returns false if both
are false

! Logical NOT: true if the operand is !x

false and vice-versa.

Bitwise operators → perform operations on binary representations of

numbers.

Operator Description

& Bitwise AND

| Bitwise OR
^ Bitwise XOR

~ Bitwise NOT

<< Left shift

>> Sign-propagating right shift

>>> Zero-fill right shift

CONDITIONALS
Conditional statements are used to perform different actions based on
different conditions.
Those statements are:
1. If → specify block of code to be executed, if the specified
condition is true
if (hour < 18) {
greeting = "Good day";
}
2. Else → specify block of code to be executed, if the same
specified conditions is false
if (hour < 18) {
greeting = "Good day";
} else {
greeting = "Good evening";
}

3. Else if → to specify new condition to test, if the first condition is

false
if (time < 10) {
greeting = "Good morning";
} else if (time < 20) {
greeting = "Good day";
} else {
greeting = "Good evening";
}
 4. Switch → used to perform different actions based on different
conditions.

LOOPS
Loops are used to repeat a block of code a number of times. each
time with a different value.
For example, if you want to show a message 100 times, then you can use a
loop. It's just a simple example; you can achieve much more with loops.

For loops → loops through a block of code number of times. Loop repeats
until a specified condition evaluates to false.
for (let i = 0; i < 5; i++) {
text += "The number is " + i + "<br>";
}

While loops → loops through a block of code until a specified contition

is true / met.
while (i < 10) {
text += "The number is " + i;
i++;
}
Do while loops → The do while loop is a variant of the while loop.
This loop will execute the code block once, before checking if the
condition is true, then it will repeat the loop as long as the
condition is true.
do {
text += "The number is " + i;
i++;
}
while (i < 10);

FUNCTIONS
It is a block of code that is designed to perform a specific task. It is
executed when “something” invokes it (calls it)
Defined using function keyword followed by function name and
parentheses
Function names can contain letters, digits, underscores, and
dollar signs (same rules as variables).
The parentheses may include parameter names separated by commas:

(parameter1, parameter2, ...)

The code to be executed, by the function, is placed inside curly brackets: {}

Function parameters are listed inside the parentheses () in the

function definition.

Function arguments are the values received by the function when it is

invoked.

Inside the function, the arguments (the parameters) behave as local

variables.

When JavaScript reaches a return statement, the function will stop

executing.

If the function was invoked from a statement, JavaScript will "return" to

execute the code after the invoking statement.

Functions often compute a return value. The return value is "returned" back
to the "caller":

Why Functions?
You can reuse code: Define the code once, and use it many
times.

You can use the same code many times with different arguments,
to produce different results.

The () Operator Invokes the Function

toCelsius refers to the function object, and toCelsius() refers
to the function result.

Accessing a function without () will return the function object

instead of the function result.

Local Variables
Variables declared within a JavaScript function, become LOCAL to
the function.

Local variables can only be accessed from within the function.

Local variables are created when a function starts, and deleted

when the function is completed.

EXCEPTION HANDLING

Types of Errors

While coding, there can be three types of errors in the code:

1. Syntax Error: When a user makes a mistake in the pre-defined syntax of a

programming language, a syntax error may appear.

2. Runtime Error: When an error occurs during the execution of the program,
such an error is known as Runtime error. The codes which create runtime
errors are known as Exceptions. Thus, exception handlers are used for
handling runtime errors.

3. Logical Error: An error which occurs when there is any logical mistake in the
program that may not produce the desired output, and may terminate
abnormally. Such an error is known as Logical error.

Exception is an abnormal code that breaks the normal flow of the code.
Such exceptions require specialized programming constructs for its
execution. Happens during execution of the program (run time error).

Exception handling is the process or method used for handling the

abnormal statements in the code and executing them. It enables the flow
control of the code/program.
For handling the code, various handlers are used, which process the
exception and execute the code.
Eg: divsion of non-zero value with zero results into infinity always, and it is
an exception. Thus with the help of exception handling, this can be handled
and executed.
Used to handle run time errors.

Exception Handling Statements

There are following statements that handle if any exception occurs:

● throw statements

● try…catch statements

● try…catch…finally statements.

A throw statement is used to raise an exception. It means when an

abnormal statement occurs, an exception is thrown using the throw.

Throw statements are used for throwing user defined errors. (users can
defined and throw their custom errors)

When a throw statement is executed, the statement present after it will not
execute. The control will directly pass to the catch block.

The thrown exception is handled by wrapping the code into the try…catch
block. If an error is present, the catch block will execute, else only the try
block statements will get executed.

A try….catch statement is used to handle the error prone part of the

code. It initially tests the code for all possible errors it may contain, then
it implements actions to tackle those errors (if occur)
A good programming approach is to keep the complex code within the
try….catch statements.

Try { } statement: → the code which needs possible error testing is

kept within the try block, in case any error occurs, it passes to the catch {
} block for taking actions and handling the errors. Otherwise, it executes
the code written within.
Catch { } statement: → this block handles the error of the code by
executing the set of statements written in the block. This block contains
either user defined exceptions handler or built-in handler. This block
executes only when an error-prone code needs to be handled in the try
block. Otherwise, the catch block is skipped.

ARRAYS
Array is a special kind of variable that stores more than one value.
Eg: const car = [“volvo” , “BMW” , “Benz”];

Common practise is to declare arrays with const keywords.

Arrays can hold multiple values under a single name, and you can access
the values by referring to an index number.

The Difference Between Arrays and Objects

In JavaScript, arrays use numbered indexes.

In JavaScript, objects use named indexes.

Arrays are a special kind of object, with numbered indexes.

When to Use Arrays. When to use Objects.

● JavaScript does not support associative arrays.
● You should use objects when you want the element names to be
strings (text).
● You should use arrays when you want the element names to be
numbers.

REGULAR EXPRESSIONS

Regex/regexp/rational expression is a sequence of characters that

specifies a search pattern in text. It is a way to search through a string of
text.

Two most common use cases:

1. Validate text
 2. Search through text

*Usually such patterns are used by string-searching algorithms to“find”

or “find and replace” operations on strings, or for input validation.
Regular expressions are patterns used to match the character
combinations in string.

Syntax:
Const regex = /search text here/

In JS Regex are also objects.

These patterns are used with the match(), matchAll(), replace(),
replaceAll(), search() and split() methods of the string. These string
methods allows you to pass RegEx as its parameters

You can use regex with RegExp() methods: test() and exec()

RegEx allows you to check for patterns in text strings such as trying to
match a valid email address or password.
One of the greatest superpowers of regex is being able to define your
own search criteria for patterns to fit your needs, and it is like a language
of its own.

HTML EVENTS
When a user visit your website, they do things like click on text and
images and given links, hover over things etc. These are examples of
what JavaScript calls events.
An event is something the browser does or user does.
Html events are things that happens to HTML elements.
When JS is used in the HTML pages, JS can react on these events.

Often, when events happen, you may want to do something.

JavaScript lets you execute code when events are detected.

HTML allows event handler attributes, with JavaScript code, to be

added to HTML elements.

With single quotes:

<element event='some JavaScript'>

With double quotes:

<element event="some JavaScript">

The change in the state of the object is known as Events.

In html, there are various events which represent that some activity is
performed by the user or browser.
When JS code is included in HTML, JS reacts over these events and
allows the execution.
This process of reacting over the events is called Event handling.
Thus JS handled the html events via event handlers.

Eg: when a user clicks over the browser, add js code, which will execute
the task to be performed on the event.

Html event eg:

An html web page has finished loading
An html input field was changed
An html button was clicked

Some of the events are:

Mouse events (onclick, onmouseover, onmousemove, onmouseup,
onmousedown etc….)
Keyword events (onkeydown, onkeyup etc….)
Form events (onblur, onsubmit, onfocus onchange etc….)
Window/Document events (onload, onunload, onresize etc….)

CSS preprocessor

A preprocessor is a program that takes one type of data and

converts it to another type of data

A CSS preprocessor is a scripting language that extends CSS by allowing

developers to write code in one language and then compile it into CSS
CSS preprocessor is a scripting language that extends CSS, (i.e
CSS is written in a slightly different form) and by using specific
apps, compile that form into regular CSS code.

These preprocessors allows you to use variables, functions, nested

rules and math operations.
Most CSS preprocessors will add some features that don't exist in
pure CSS, such as mixin, nesting selector, inheritance selector, and
so on. These features make the CSS structure more organized,
readable and easier to maintain.

However To use a CSS preprocessor, you must install a CSS

compiler on your web server; Or use the CSS preprocessor to
compile on the development environment, and then upload the
compiled CSS file to the web server.

Why to use css preprocessors

● Cleaner code with reusable components.
● Most flexibility to do things on the fly. (can use various things with
conditions, you use math, modify colors and so on as you go,
rather than actually hard code that information into regular CSS)
● Shareable snippets and libraries. (you can import codes easily
that other people has written to solve common problem. You can
use what other people has created. You can also share your
created code with other people within your team or anyone.)
● Easily produce CSS that works across browsers.
● By using CSS preprocessors, repetitive tasks are easily
automated,
● The number of errors can be reduced
● Reusable code snippets can be created
● backward compatibility is also ensured through CSS
preprocessors..

1. SASS →
● Abbre: Syntactically awesome style sheets
● It is an open source pre-processor, coded in Ruby.
● It is considered the oldest css preprocessor
 ● It is a superset of CSS, which means it contains all the
features of CSS and based on javascript.
● Adds dynamic functionality to the CSS code
● It is an extension of CSS that enables you to use things like
variables, nested rules, inline imports and more.
● It helps to organize and allow you to create style sheets
faster.
● Sass is compatible with all css versions.
● Only requirement needed is to install Ruby to use it

● Sass includes 2 syntax options:

1. SCSS (Sassy CSS): uses .scss extension and fully
compliant with css syntax. It is the newer syntax. Uses
block formatting like that of CSS.
2. Indented (simply called “Sass”) : uses .sass file
extension, and indentation is used to separate code
blocks and newline characters to separate rules rather
than brackets. It is not fully compliant with CSS syntax,
but it's quicker to write . it uses syntax similar to HTML.

2. LESS →
● Abbr: Leaner style sheet
● Less is a dynamic style sheet language that extends the
compatibility of CSS and it is cross browser friendly.
● It is a dynamic style sheet that can be compiled into CSS and
run on the client-side or server-side.
● It is open source
● First version was written in Ruby, however later versions were
replaced by Javascript.
● Many of the features of Sass such as variables, nesting,
mixins are also present in LESS
● Main difference between less and other preprocessors is
that less allows real time compilation via less.js by the
browser.
● LESS supports creating cleaner, cross-browser friendly CSS
faster and easier.
● We can define styles and it can be reused throughout the
code.
● LESS is based on JavaScript and is a superset of CSS.
● LESS is an agile tool that sorts out the problem of code
redundancy.
 3. STYLUS:
● An expressive, robust, feature-rich CSS language built for
nodejs. (node.js based css pre processor)
● Written in NodeJS so easily intergrated to node projects
● braces, semicolons and more can be omit in your code, keep
clean and less (they are all optional)
● It provides JavaScript API so that preprocessing can be
further customized
● Syntax is completely space based.
● The powerful logical abilities of Sass and straightforward
setup of the LESS are combined in Stylus.

NOTE:**
Sass has looping and logical abilities, and you can create custom functions using
Sass; it can be considered a programming language. It has a very popular
community and also a huge ecosystem. Many popular frontend frameworks use
Sass.
Whereas in the case of Stylus, it is essential to integrate it with the projects made
of Node. We also learned that there are only a few logic-based features in LESS
compared to Sass and Stylus.
LESS is considered the best on the serverless architecture because it can easily be
compiled on the frontend frameworks and provides good built-in functions.

Front end vs back end

The website’s front end is everything you see and can interact with using a browser. So,
creating this visual part is called front-end development. You could even say that
designers creating user interfaces and planning experiences are also front-end
developers, as they are working in collaboration on the same part of the project.

To create the front end, engineers use the combination of HTML (for basic page
structure and content), CSS (for visual editing), and JavaScript (for making websites
interactive).

On the other hand, the back end is everything that happens, well, backstage. It contains
servers where your web pages are located and the underlying logic that governs the
website’s functions and processes. We have an in-depth description of the inner
workings of web applications if you want to check it out.

The back end is built using a different set of technologies, including Java, PHP, Ruby,
C#, and sometimes JavaScript

How HTML works. HTML is composed of a series of shortcodes called tags,

normalized into a text-file by a site creator. The text is then stored as an HTML file and
observed through a browser. The browser scans the file and interprets the text into a
visible form, and in the best case, renders the page as the designer had planned.

● HyperText is the way by which we travel across the web by clicking hyperlinks –
specific texts taking you to other pages. Hyper means it’s non-linear, which allows
for moving to any other place, as there is no predefined order to do so.
● Markup determines the qualities that HTML tags apply to the text inside them.
Tags mark it as a particular type of text.
● As a Language, it holds code words and syntax like any other language.

How CSS works. CSS interacts with HTML elements, the components of a web page.

● To communicate with HTML, CSS uses selectors. A selector is the part of CSS
code defining which HTML piece the CSS styling will impact.
● A declaration contains properties and values that are employed by the selector.
● Properties define font size, color, and margins. Values are the settings for these
properties.

How DOM works. Consider a web page as a document that can be either presented in
the browser window or as the HTML source code. The Document Object Model (DOM)
represents this document so it can be modified. The DOM is an object-oriented
representation of the web page, which can be altered with a scripting language like
JavaScript.

The DOM must adhere to W3C and WHATWG standards that are executed in most
current browsers. The modern DOM is built using multiple APIs that work together. The
core DOM specifies the objects that entirely explain a document and the objects within it.

How JavaScript works. JS boosts a website’s overall interactivity. It enables modeling

animated UI components such as image sliders, pop-ups, extensive site navigation
menus, and more. JavaScript provides a website with extended functionality that isn’t
otherwise achievable with HTML and CSS alone. JavaScript allows web pages to reply
to users’ actions and dynamically refresh themselves. Thanks to JavaScript, this process
doesn’t demand a page reload to alter its representation.

Frameworks are templates to create a website or a web application. They

provide a structure (such as a skeleton or scaffolding) on which to arrange the
whole project. While the framework sets the page templates, they build the
structure with particular allocated areas to embed a framework code in.

So, JavaScript frameworks are complete sets of tools to form and arrange a
website or web application.

Libraries are sets of prewritten code snippets used and reused to implement
core features of JavaScript. The snippet can be easily integrated into an existing
project code when necessary.

So, libraries are specialized tools for particular coding needs, not an all-purpose
machine for grooming the whole existing project.

Main frameworks and libraries to know

Let’s start with frameworks:
Angular is a front-end framework powered by Google that is compatible with most
of the common code editors. Angular is intended to create dynamic, single-page
web applications (SPAs), and progressive web-apps. Upon its initial release, the
framework was most appreciated for its ability to convert HTML-based
documents into dynamic content. Angular is among the most popular front-end
frameworks.

Vue.js is yet another open-source framework for SPAs.it is a progressive

framework for building user interfaces. Vue lets you extend HTML with HTML
attributes called directives. Vue.js directives offers functionality to HTML
applications. It provides built in directives and user defined directives

It employs a component-based development model and enables attaching

components to a project. Vue.js is an example of a library that is more of a
framework. To utilize Vue.js, knowledge of HTML and CSS is an absolute
requirement. It suggests a whole bunch of templates and patterns applied in
development. Vue is primarily recognized for the small size of documents and
HTML-based syntax.

Ember.js It is an open source JavaScript based framework utilizing a component

service pattern. It allows developers to build single page web applications. It
allows to build desktop and mobile applications. It is used on many popular
websites such as Apple Music, Square, Inc etc…

It uses the model-view-view-model (MVVM) pattern. Ember tools enable

designing a development environment, while its command-line interface gives
tools for script automation.

And now let’s outline a few libraries:

React is an open-source library for building dynamic user interfaces, born and
bred by Facebook. The framework is applied to create web-applications with
multiple dynamic components. It relies on JavaScript and JSX, a Facebook PHP
language extension. React enables building reusable HTML elements for the
front end. React also includes React Native, a dedicated cross-platform mobile
development framework.

jQuery, in turn, is aimed at controlling HTML documents. It has a simple API to

control events and design animation in browsers. Aside from that, jQuery is
applied to manipulate the Document Object Model (DOM) and serves as a plugin
development tool as well. It also comes with a lighter cross-browser library,
jQuery UI for a mobile framework jQuery Mobile and for graphic interface
construction.

Backbone.js, is a lightweight, open source, javascript library with a RESTful

JSON interface and based on MVC pattern. (which abstracts data into models,
DOM into views and binds these two using events) It is designed for developing
SPAs and for keeping various parts of web applications (multiple client and
server) synchronized.

It is developed to structure client side applications that run in web browsers. Acts
like the backbone for your project and helps organize your code.

LIBRARY VS FRAMEWORK

Library is a set of code that was previously written, that can be called upon
when building your own.
(essentially collection of code packed together that can be used over and over
again.)
Frequently used codes and functions can be put together and built a library.
We can achieve reusability.

Frame work is a supporting structure where your own code defines the “meat”
of the operations by filling out the structure.
It essentially provides a scaffold on which to build software and allows the
programmer to avoid wrtting any boilerplate codes and merely fill in the
blanks, leaving the framework to decide what it is appropriate to execute any
business logic.

Differences
Library is like a tool to that helps you build systems, but framework is a
supporting structure. (i.e frameworks dictate how your project will be structure
where as library is the tool that can be used any where.)

A framework may use libraries but it doesnt actually need a library inorder to
operate.

Frameworks: 1. Rails
2. Angular: open source front end framework that specializes
in building rich single page applications. Typescript based framework for
building user interfaces. It was developed at google in 2016 as the sequel to
angular.js. When you generate your initial app it comes pre-configured with
routing, a testing framework and a style preprocessors. It uses components
just like react. It is written in Type script. Supports mobile browsers
3. AngularJS: it is a javascript based framework for web
development. It was built to ease the development and
testing of applications. It uses MVC framework. Written in
JS. doesnt support mobile browsers. It can be added to
HTML page with <script> tag. AnglarJs extends attributes
with ng directives, and binds data to HTML with
expressions
4. Django: backend framework that uses python for web
development. It is used by google, youtube and instagram
5. Express: backend dev framework that is very minimal and
fast.

Libraries: 1. React: it is a javascript library developed by facebook that is

used for buildimg user interfaces and single page application. React reacts to
changes. It only changes what needs to be changes.
It allows to create reusable UI components.
At the heart of all react applications are components. Components is piece of
the UI, so when building applications with react, we build a bunch of
independent, isolated and reusable components and then compose them
together to build complex user interfaces. Its is like tree of components. React
creates a virtual DOM in memory.
2. JQuery: it is a very old cycle library designed to help in
manipulating HTML elements as well as the eventing handling and CSS
animation.
3. Lodash: it is a productivity kit that provides a bunch of utility
functions that you can use in your program right off the bat
 4. Redux: open source javascript library for managing
applications state and it is commonly used with react.

FRONT END FRAMEWORK

Angular is open source front end framework that specializes in building rich
single page applications. It powered by Google as the sequel to angular.js that
is compatible with most of the common code editors. Angular is intended to
create dynamic, single-page web applications (SPAs), and progressive web-apps.
Upon its initial release, the framework was most appreciated for its ability to
convert HTML-based documents into dynamic content. It is written in Type script
for building UI. Supports mobile browsers

Typescript based framework for building user interfaces. When you generate
your initial app it comes pre-configured with routing, a testing framework and a
style preprocessors. It uses components just like react.

AngularJS: it is a javascript based framework for web development. It was

built to ease the development and testing of applications. It uses MVC
framework. Written in JS. doesnt support mobile browsers. It can be added to
HTML page with <script> tag. AnglarJs extends attributes with ng directives,
and binds data to HTML with expressions

Vue.js is yet another open-source framework for SPAs.it is a progressive

framework for building user interfaces. Vue lets you extend HTML with HTML
attributes called directives. Vue.js directives offers functionality to HTML
applications. It provides built in directives and user defined directives

It employs a component-based development model and enables attaching

components to a project. Vue.js is an example of a library that is more of a
framework. To utilize Vue.js, knowledge of HTML and CSS is an absolute
requirement. It suggests a whole bunch of templates and patterns applied in
development. Vue is primarily recognized for the small size of documents and
HTML-based syntax.

BACKEND DEV FRAMEWORK

1. Laravel
One of the most popular open soucre web design and dev, PHP
framework. Famous for its Easy to code capability, simple structure and
great rools. Laravel contains inbuilt authentication system. It also
contains inbuilt ORM with easy PHP actibve record implementation.
Also provides unique unit testing. Also provides a built in tool for a
command line known as Artisan.
Based on MVC architectural pattern, helps developers to create
powerful back ends for all kind of app and websites
Robust ecosystem

2. Django
Highlevel web dev framework based on python programming language
that provide rapid development and SEO optimized.
Makes it easier to built web apps more quickly and with less code
Comes with handful of tools that makes development process much
faster and easier. It helps developers avoid many common security
mistakes. It is highly scalable
Apps built: Mozilla, National geographic, instagram.

3. Flask
It is a micro framework based on python programming lang, delivers
minimal no. of tools to developers and requires them to configure
everything manually.
It comes handy to teams that want to retain full flexibility in choosing
their tooling and have full control over every element of their app.
If your project architecture is based on micro services then flask is a
good choice. Among the important features of flask are a built in web
server and debugger, unit testing support, RESTful request dispatching,
secure cookies and provide good documentation.
Popular app: pinterest, LinkedIn
Communication between front end and back end
The front end doesn’t exist in isolation from the back end, or the server that
actually provides data. Let’s have a look at the concepts in terms of
client-server messaging.

Asynchronous operations
In the 2010s, one of the main concepts describing the way the web worked
was AJAX. The term stands for Asynchronous JavaScript and XML. Basically,
it’s a complex of techniques to create websites and web applications. Let’s
look at the key components that make up AJAX.

Asynchronous – the fundamental aspect of the whole toolkit. The crucial role
of the approach is to renew web content… asynchronously. It means that a
user’s web browser doesn’t have to reload a whole web page when a small
part of the content on the page requires some change, e.g. you don’t have to
reload the entire eCommerce products page to apply an additional filter to
search results. You just need these results to be updated.

JavaScript – JavaScript employs website automation processes so web

developers don’t have to separately edit each case of the process appearing
on a page. It’s used particularly to create, add, and manage dynamic website
content. After all HTML and CSS processes are handled, JavaScript then runs
real-time updates while a visitor is viewing an interactive content page.

XML (or Extensible Markup Language) allows for transmitting data put on
the page to the browsers that view it. That’s important for specific computer
systems that often can’t interact with data formatted by a different system. In
this case, XML allows for avoiding incompatibility while saving data in plain
text format between XML tags. This way, XML suggests a means of storing,
moving, and sharing data that doesn’t rely on a singular software or hardware
system. Since XML is getting older, freeing the way to newer data formats,
you can run AJAX with JSON, which is shorter and easier for humans to read.

Today, AJAX isn’t as commonly discussed in the front-end community due to

the simple fact that asynchronous web page rendering comes out of the box in
all major front-end frameworks that we discussed above.

How asynchronous updates work. Let’s say, a user clicks a button. The client
sends a request to a server-side script with XML/JSON in the background as a
user keeps viewing the page. The server side obtains the data from
JavaScript, reaches the database if required, and processes the data. With
XML/JSON anew, it sends the data back to the initial client-side page that
executed the entry. A callback, performed by JavaScript, captures the data
and refreshes the web page component that needed changes.

REST and GraphQL

REST stands for Representational State Transfer. Basically, it’s a lightweight
architectural style applied to messaging between a client (front end) and a
server (back end). RESTful services and APIs are web services following the
REST architecture.

For example, a developer has to build a web app that shows all social media
friends in a particular order. A front-ender can create requests to Facebook’s
RESTful API to view the friends list and pass that data back. Any service
using RESTful APIs resembles this general process, different only are data
retrieved and returned. REST is a plain collection of guidelines and practices
that establish rules to interact with a web service.

The main idea behind REST is that the server doesn’t care what happens to
the client. Instead, REST messages contain all the needed information for a
server to return the needed data and forget about this operation. To learn
more about different messaging formats and an older SOAP standard, check
the dedicated article.

GraphQL is the modern spin on messaging. It’s a language for querying

databases from client-side applications. On the server side, GraphQL defines
how to display the data to the client and caters to various types of clients and
their data needs. If you want to get a deeper dive into this topic, read our
article on GraphQL Core features.

More practices that go into front-end development

So, we outlined the basic elements for front-end development. However, there
are many more terms and concepts that a front-end developer must
understand.

Responsive design
As increasingly more people access the Internet from their mobile devices
rather than from desktops, responsiveness is a must. Responsive design
means that the web layout (including functionality and content) adjusts to the
screen size and hardware.

For instance, when a website is visited from a desktop computer with a big
monitor, a user gets numerous columns, heavy graphics, and UI designed
particularly for mouse and keyboard. On mobiles, the same website appears
as a single column adjusted for touch interaction, but with the same base
data. Have a look at our article on responsiveness to get a better idea.

Accessibility and inclusivity

Accessibility means making a website available to as many people as
possible. This concept does not only include all kinds of disabilities that people
have, such as visual, cognitive, hearing, or mobility impairments. It also covers
matters of law, compliance standards, different mobile devices, and different
types of network connections. Our overview of accessibility practices provides
broader awareness of the topic.

JQUERY
Most popular JS library.

It is designed to help in manipulating HTML elements as well as the eventing

handling and CSS animation.
It is aimed at controlling HTML documents. I

It has a simple API to control events and design animation in browsers. Aside
from that, jQuery is applied to manipulate the Document Object Model (DOM)
and serves as a plugin development tool as well. It also comes with a lighter
cross-browser library, jQuery UI for a mobile framework jQuery Mobile and for
graphic interface construction.

Jquery provides a single API to handle the edge cases across multiple
browsers.

With Jquery we can use dollar sign ($) to grab all the list items in the HTML
and then call the first to get the first one.

It is easy and readable

If we want to animate it then we can do that simply by chaining the method to

it.
We can chain more methods to it to register event listeners and all kinds of
other stuffs,

Jquery doesn't have a data layer to worry about, you can just start with an
object and chain methods to it and let the state manage itself.

CDN (content delivery network)

It is a service that accelerates internet content delivery.
Main benefits: it makes your website faster

Challenge: we have users all around the world but no servers all
around the world. It can take users who are further away from the
server longer to load the content to be delivered to their web
browser. To avoid this issue and to make all the users access the
website within very short time no matter where they live, CDN
comes into the play

CDN accomplishes increasing speed by reducing the distance

between the user and the content (server providing the content)

How is it done??
These places the CDN endpoints in as many locations around the
world as possible.

Now when users far away from the server try to access some
content, first it is retrieved by the content delivery network service
and then distributed around the world. Therefore those users can
retrieve the content directly from their closest geographic location
which will reduce the amount of time it takes to retrieve the content.

Indirect benefits:
● reduces the load that will be received by the main server
● The main server environment may also see an increase in the
uptime.
● As the users are not directly communicating with the main
server, you have the benefit of increase in security through
obscurity.

DOCUMENT READY EVENT

● $(document).ready is a Jquery event.
● Used to intialize jquery/JS code after the DOM is ready
JS/Jquery code inside $(document).ready function will load
after the DOM is loaded, yet before the page contents load
 ● Page cant be manipulated safely until the document is ‘ready’.
Jquery detects the readiness of the code for you.
● Codes included inside $(document).ready will only run once
the html page’s DOM is ready for JS code to execute.
● This is the earliest point in the page load process where the
script can safely access the elements in the page’s html dom.
● This event will run before all the images, css etc….. Are fully
loaded.
● If we don't use the document ready function, and when you
execute an event handler (eg: Click), the button you clicked
wont get any alert.
Because the JQuery code is present before the button
element, so by the time Jquery code is executed the button
element is not loaded into the DOM.
To make this code work either you should wrap the jquery
code in document ready function
OR
Place the script at the bottom of the page before closing body
tag

Eg: $(document).ready(function(){
cosole.log(“ready!”);
})

The ready event occurs when the DOM (document object

model) has been loaded. Because this event occurs after the
document is ready, it is a good place to have all other jQuery events
and functions.
. The ready() method specifies what happens when a ready event
occurs.

SELECTORS

● JQuery selectors allow you to select HTML elements and to

manipulate them.
● It is used to ‘find’ (select) HTML elements based on their
element name, id, class, types, attributes, values of attributes
and so on.
 ● It is based on CSS selectors and in addition it has some of its
own custom selectors too.
● All JQuery selectors start with a dollar sign ($) based on the
element name.
Eg: $(“p”) → <p>

Note: css selector is a string used to select or target html element/s

available on the page.

JQuery Event Methods

● Event method triggers or attaches a function to an event

handler for the selected elements.

All the different visitors' actions that a web page can respond to are called
events.

An event represents the precise moment when something happens.

Examples:

● moving a mouse over an element

● selecting a radio button
● clicking on an element

The term "fires/fired" is often used with events. Example: "The keypress
event is fired, the moment you press a key".

jQuery Syntax For Event Methods

In jQuery, most DOM events have an equivalent jQuery method.

To assign a click event to all paragraphs on a page, you can do this:

$("p").click();

The next step is to define what should happen when the event fires. You
must pass a function to the event:

$("p").click(function(){
// action goes here!!
});
Commonly used Jquery event methods

$(document).ready()
click()
dbclick()
mouseenter()
mouseleave()
mouseup()
mousedown()
hover()
focus()
blur()

e. Effects f. Call-back functions g. Chaining h. Get content i. Set

content

CHAPTER 4. Back-end technologies

Information storage in web applications
Brower offers several ways of data persistency:
1. Local storage
2. Session storage
3. cookies

COOKIES
● It only stores at maximum capacity of 4kb per domain.
● Supported by the browser which implements the HTML4 and
HTML 5 standards
● Cookies are accesible from any windows (tab) currenly
opened on the browser.
● Expiration date for data stored as cookies are manually set.
If no expiration date is set, then it lives as long as the browser
is installed.
 ● By default Cookies are stored on the client/browser and
server. They are used to perform authentication between
client and browser.

SESSION STORAGE
● Stores at maximum capacity of 5 mb
● Supported by the browser which implements the HTML 5 only
● Sessions are accessible from the same tab that is currently
opened on the browser
● Data is expired once the tab is closed
● By default it stores only on the client/browser. can also be
added to the payload sent to the server.

LOCAL STORAGE
● Stores maximum capacity of 10mb
● Supported by browser which implements the HTML 5 alone
● Accesible from any tab/window currently open on the
browser.
● Data never expires. Data in the local storage remains as long as
the browser remains installed. You have to manually clear data
stored in Local storage
● By default stores data on the client/browser only. can also
be added to the payload sent to the server.

SQL and NoSQL Database

SQL: stores data in forms of rows and columns, and together forms
a table.
Also refered to as relational database
Uses SQL (structures query language) for storing and manipulating
data.
Works well with structured data.
Allows you to create update and manipulate a relational database.

NoSQL: includes database that doesnt use SQL as the primary

data access language.
Also refered to as non relational database
Doesnt have to conform to a predefined schema, therefore good for
org seeking to store unstructured data/ semi structured.
DIFFERENCES BETWEEN SQL AND NO SQL
Type:
SQL → are primarily called as relational database.

NoSQL → are primarily called as non-relational database

Schema:
SQL → Has a fixed or static pre defined schema
the data is stored and manipulated using SQL. this is an extremely
powerful language which is versatile and widely used. But this
language can be restrictive thus it requires you to use a pre-defined
schema to determine the structure of your data. Also all the data
must follow the same structure and this can be both difficult and
disruptive

NoSQL → they have dynamic schema

it doesnt follow any pre defined schema(has dynamic schema) for
unstructured data. Data is stored in many ways such as document
oriented, column oriented, graph based or as key value stores. This
flexibilty means that document can be created without any defined
structure, can have unique structure

Scalability:
SQL → in all situations SQL database are vertically scalable.
Which means you can increase the load single server by increasing
the RAM, CPU or SSD

NoSQL → these database are horizontally scalable. Which means

you handle traffic by sharding or adding more servers in your
NoSQL database. Thus it can become more larger and powerful,
making it the preffered choice for large or ever-changing data sets.

Structure:
SQL → are table based. Stored data in forms of rows and column
. which makes SQL database preferred choice for multi row
transactions such as accounting system or for legacy systmmes
that were built for relationl structure.
NoSQL → NoSQL databases are either key value pairs, document
based, column based or graph based.

Property Followed:
SQL → follows the ACID (atomicity, consistency, isolation,
durability) properties
NoSQL → Follows the Brewer’s CAP (consistency, availability,
partition tolerance) theorem

Example:
SQL → MySQL, Oracle, Microsoft SQL
NoSQL → MongoDB, CouchDB, GrapgQL, Cassandra, HBase

Index SQL NoSQL

1) Databases are NoSQL databases are

categorized as categorized as
Relational Database Non-relational or
Management System distributed database
(RDBMS). system.

2) SQL databases have NoSQL databases have

fixed or static or dynamic schema.
predefined schema.

3) SQL databases NoSQL databases display

display data in form data as collection of
of tables so it is key-value pair,
known as table-based documents, graph
database. databases or
wide-column stores.

4) SQL databases are NoSQL databases are

vertically scalable. horizontally scalable.
5) SQL databases use a In NoSQL databases,
powerful language collection of documents
"Structured Query are used to query the
Language" to define data. It is also called
and manipulate the unstructured query
data. language. It varies from
database to database.

6) SQL databases are NoSQL databases are not

best suited for so good for complex
complex queries. queries because these
are not as powerful as
SQL queries.

7) SQL databases are NoSQL databases are

not best suited for best suited for
hierarchical data hierarchical data storage.
storage.

8) MySQL, Oracle, Sqlite, MongoDB, BigTable,

PostgreSQL and Redis, RavenDB,
MS-SQL etc. are the Cassandra, Hbase, Neo4j,
example of SQL CouchDB etc. are the
database. example of nosql
database

TYPES OF NoSQL DATABASE

1. Document database:
● Also known as document oriented/ document store
● It is a database that stores information in documents.
Document is a record in database.
● It stores information about one object and any of its
related metadata.
● It stores data in JSON, BSON or XML.
● It is considered to be non relational (NoSQL) database
● It is an intuitive data model that is fast and easy for
developers to work with.
● It is a flexible schema that allows for data model to
evolve as applications need change.
● It allows horizontal scalability.
● It has an API / query language that allows developers to
execute the CRUD (create, read, update, delete)
operation
 ● Use cases included ecommerce platform, trading
platform and mobile app development acrross industries.
Document databases are general-purpose databases that serve a
variety of use cases across industries for both transactional and
analytical applications:

● Single view or data hub

● Customer data management and personalization
● Internet of Things (IoT) and time-series data
● Product catalogs and content management
● Payment processing
● Mobile apps
● Mainframe offload
● Operational analytics
● Real-time analytics

2. Key-Value Stores:
● Also known as key-value database
● They are database types which allows data to be stored
in a “key value” structure, where a key can be
represented as a unique identifier/ unique path to a
value.
● The data is fetched by a unique key/ number of unique
keys to retrieve the associated value with each key.
These value are simple data types (like strings and
numbers or complex objects)
● Every data element in the database is stored as a key
value pair consisting of an attribute name (or "key") and
a value. In a sense, a key-value store is like a relational
database with only two columns: the key or attribute
name (such as "state") and the value (such as "Alaska").
 ● Use cases includes shopping carts, user preferences
and user profiles

When to use a key-value database?

1. Real time random data access.
Eg: user session attributes in an online application such as
gaming and finance
2. Caching mechanism for frequently accessed data or
configuration based on keys.
3. Application is designed on simple-key based queries

3. Column oriented database:

While a relational database stores data in rows and reads data row by row, a column
store is organized as a set of columns. This means that when you want to run
analytics on a small number of columns, you can read those columns directly without
consuming memory with the unwanted data. Columns are often of the same type
and benefit from more efficient compression, making reads even faster. Columnar
databases can quickly aggregate the value of a given column (adding up the total
sales for the year, for example). Use cases include analytics.

Unfortunately, there is no free lunch, which means that while columnar databases
are great for analytics, the way in which they write data makes it very difficult for
them to be strongly consistent as writes of all the columns require multiple write
events on disk. Relational databases don't suffer from this problem as row data is
written contiguously to disk.

4. Graph data base:

A graph database is a database that stores data in nodes and edges—nodes for
information about an entity and edges for information about the relationship or
actions between nodes. This data model allows graph databases to prioritize
relationships between the data, which makes searching for connections and patterns
in the data easier than it is with traditional databases.

Graph databases fulfill a need that traditional databases have left unmet: They
prioritize relationships between entities. This makes graph databases incredibly
efficient for looking for patterns, making predictions, and finding solutions.
Very few real-world business systems can survive solely on graph queries. As a
result graph databases are usually run alongside other more traditional databases.

Use cases include fraud detection, social networks, and knowledge graphs.

Example
Let's walk through how data is stored in a graph database. Let's say you want to
store air travel information.

Each airport would be represented by a node, and information about the airports
would be stored in the nodes' properties. For example, you could create a node for
Auckland Airport in New Zealand with properties such as airport_code: AKL and
country: New-Zealand.

A flight between two airports—that is, the relationship between two nodes—is
represented by an edge. The edge's properties contain information about the flight.
In this example, you could create an edge between the nodes for Auckland Airport
and Brisbane Airport. The edge could have properties like airplane: 73H 388
and airline: Qantas.

What are Common Use Cases of Graph

Data?
Graph databases are suited for a variety of use cases. Some of the most common
are detecting fraud, building recommendation engines, managing IT networks, and
computing graph algorithms between data.

● Detecting fraud. Graph databases are commonly used for the detection of
money laundering, credit card fraud, insurance fraud, tax fraud, and other
criminal activity. In recent years, criminals have become increasingly
sophisticated in their schemes. Rather than working from a single point or
account, they create a fraud ring of smaller schemes that are much more
likely to go undetected. Graph databases allow analysts to look at the
connections between the data to find patterns of fraud.
● Building recommendation engines. Modern businesses want to provide
intelligent recommendations to their customers as a strategic way to increase
revenue. Graph databases allow an application to analyze previous purchase
data to determine what the customer may want to purchase next.
● Managing IT networks. Graph databases can help IT specialists model and
manage networks, IT infrastructure, and IoT devices. Because these entities
are physically connected in the real world, they map naturally to graphs.
Graph databases can enable organizations to easily perform impact analysis
and plan for outages.
● Computing graph algorithms. When you need to efficiently perform
calculations on the connections between data, graph databases are a great
option. They are used extensively for computing graph algorithms such as
shortest path and PageRank. These algorithms are used in everything from
finding the cheapest flight between two locations to determining influence in
social networks.

The Brewer’s CAP Theorem in DBMS

Definition:
Used: It is a tool used to make system designers aware of the
trade-off while designing networked shared-data systems.
States: CAP theorem states that it is not possible to guarantee all
three of the desirable properties - consistency, availability and
partition tolerance at the same time in a distributed system with
data replication.

Types of client to server communication

Two styles of client to server

communications are
1. HTTP Push
2. HTTP Pull
Hypertext transfer protocol (http) is a communication protocol used for
fetching resources such as HTML documents, images, video files etc. It is
the most common client-server protocol on the internet. HTTP
communication can be divided into two types: HTTP pull and HTTP push.

HTTP pull is a style of communication whereby a client sends a message

to a server (usually called a request) and the server sends back a reply
(called response) after which the connection is closed. Anytime the client
needs more information the process is repeated over and over again.
Application developers are responsible for deciding how often to make
requests for data from the server. The dilemma with polling is that making
continuous requests at short intervals means you get the most up to date
information from the server immediately its available but this risks
overloading the server with too many requests and most of the time the
responses are empty because there's no new info to display which means
unnecessary traffic is created on the network. On the other hand, making
requests on longer intervals means that there's less traffic but with the
downside of possibly missing important updates from the server.

In the case of HTTP push the connection is not broken after the initial
request, meaning the client initiates a request to the server and after the
server responds the connection is kept in place. Using this established
connection, the server can send any new updates down to the client as
soon as they are available. The client does not need to repeatedly request
for updates from the server, the updates are sent as soon as they are
available. This helps to reduce the load on the network with the advantage
that the updates are received in a timely manner. A drawback to this style is
that the server has to maintain connection to the client which creates
certain overhead on the server.

Examples of client to server communication

Ajax polling
Long polling
Server sent events
Web sockets
Message queues

What is an ORM?
An object-relational mapping provides an object-oriented layer between relational
databases and object-oriented programming languages without having to write SQL
queries. It standardizes interfaces reducing boilerplate and speeding development time.

Object-oriented programming includes many states and codes in a format that is

complex to understand and interpret. ORMs translate this data and create a structured
map to help developers understand the underlying database structure. The mapping
explains how objects are related to different tables. ORMs use this information to convert
data between tables and generate the SQL code for a relational database to insert,
update, create and delete data in response to changes the application makes to the data
object. Once written, the ORM mapping will manage the application’s data needs and
you will not need to write any more low-level code.

Writing SQL code to attach a relational database to an object-oriented application can be

a time-consuming activity that generates little value to the business application.
Developers can write raw SQL code or use SQL query builders to improve the process,
but both methods still require in-depth database knowledge and the ability to code in
SQL. ORMs enhance productivity by creating highly-abstract data models and
automatically generating SQL code. These tools also make it easier to separate the
database from the programming logic giving developers more flexibility. But ORMs have
their detractors. Common complaints include reduced performance, extra coding, and
poor mapping depending on the ORM quality.

Developers need to do their homework before committing to using an ORM to speed up

the OOP development process. Several open-source and commercial tools are
available. Since these tools have been available for many years, they are well
documented and supported with extensive development communities.