Web deveopment using React js and Node js with SQL.

WEB DEVELOPMENT
A SUMMER INTERN REPORT
Submitted by
JAYANT SURANA
Enrolment Number: 40614802816
In partial fulfillment of Summer Internship for the award of the degree
of
BACHELOR OF TECHNOLOGY
IN
ELECTRONICS AND COMMUNICATION ENGINEERING
Under the supervision of
Mr. Abhimanyu Vashisht
Senior Developer
XANE AI, Gurugram
MAHARAJA AGRASEN INSTITUTE OF TECHNOLOGY
ROHINI, NEW DELHI

XANE AI
GURUGRAM, HARYANA.
BONAFIDE CERTIFICATE
Certified that the summer training project report entitled “WEB DEVELOPMENT” is a
bonafide record of the work done by Mr. JAYANT SURANA, at XANE AI, GURUGRAM,
for the partial fulfillment of the requirements for the award of the 4 year degree of Bachelor in
Technology, Electronics and Communication Engineering, carried out under my supervision
during June 15, 2018 to July 31, 2018.
Mr. Abhimanyu Vashisht
Trainer
XANE AI

MAHARAJA AGRASEN INSTITUTE OF TECHNOLOGY
To Whom It May Concern
I, JAYANT SURANA, Enrollment No. 40414802816, a student of Bachelors of Technology
(ECE), a class of 2016-20, Maharaja Agrasen Institute of Technology, Delhi hereby declare
that the summer training project report entitled WEB DEVELOPMENT is an original work
and the same has not been submitted to any other institute for the award of any other degree.
Date: 31 July 2018
Place: Gurugram
JAYANT SURANA
Enrollment No.: 40614802816
Electronics and Communication Engineering
5E456/E5

ACKNOWLEDGEMENT
I am deeply thankful to “XANE AI” as it has given me a golden opportunity to go through
remarkable training on “WEB DEVELOPMENT”. Here I have got valuable and detailed
knowledge on real time projects. I owe my gratitude to My Faculty cum Trainer “Mr.
Abhimanyu Vashisht” for his unmatched support, guidance and inspiration without which I
wouldn’t have learned so many new and innovative things in such a short span of time. I am
highly obliged that I have received all of your support in such a good way.
An electronics student mainly focuses on practical applications of concepts learned projects like
this one provide us with an ideal opportunity to do the same. I acknowledge the valuable inputs
provided by “Mr. Abhimanyu Vashisht”. Last but not the least, a big thanks to all my family
members and friends, for timely cooperation and support extended to me all the way.
I wish to thank my respected faculty and my lab mates for their support.
Last but not the least, I thank the almighty for enlightening me with his blessings.
JAYANT SURANA
40614802816
5E456/E5

XANE AI
XANE AI. 'Founded in 2017, Xane is an Artificial Intelligence Chatbot aimed at revolutionizing
'People experience' in organisations can be used for increasing employee engagement and
retention.
We believe “Employees in various markets can have vastly different employment experiences.
For leaders of multinationals operating in these major world markets, this volatility presents
significant challenges about where and how to invest in talent and how to best engage
employees in the behavior that will drive much needed growth.”
As workforce demographics continues to be highly distributed and accustomed to digital
changes, Understanding and Managing Talent becomes more imperative than ever.
Xane, with its innovative product suite has integrated Artificial Intelligence, Predictive Analytics
and Domain HR expertise for enhancing employee experience, building learning and
development culture and increasing HR efficiency'.
Xane regularly interacts with Employees, HR business partners, Managers for gauging
engagement levels, sentiments and provide actionable insights to the Top Management.

ABSTRACT
Web development is a broad term for the work involved in developing a web site for
the Internet (World Wide Web) or an intranet (a private network). Web development can range
from developing the simplest static single page of plain text to the most complex web-
based internet applications (or just 'web apps') electronic businesses, and social network services.
A more comprehensive list of tasks to which web development commonly refers, may
include web engineering, web design, web content development, client liaison, client-side/server-
side scripting, web server and network security configuration, and e-commerce development.
Among web professionals, "web development" usually refers to the main non-design aspects of
building web sites: writing markup and coding. Most recently Web development has come to
mean the creation of content management systems or CMS. These CMS can be made from
scratch, proprietary or open source. In broad terms the CMS acts as middleware between the
database and the user through the browser. A principle benefit of a CMS is that it allows non-
technical people to make changes to their web site without having technical knowledge.
For larger organizations and businesses, web development teams can consist of hundreds of
people (web developers) and follow standard methods like Agile methodologies while
developing websites. Smaller organizations may only require a single permanent or contracting
developer, or secondary assignment to related job positions such as a graphic
designer or information systems technician. Web development may be a collaborative effort
between departments rather than the domain of a designated department.
There are three kinds of web developer specialization: front-end developer, back-end developer,
and full-stack developer. Front-end developers deal with the layout and visuals of a website,
while back-end developers deal with the functionality of a website. Back-end developers will
program in the functions of a website that will collect data.
Since the commercialization of the web, web development has been a growing industry. The
growth of this industry is being driven by businesses wishing to use their website to sell products
and services to customers.

Web development has also impacted personal networking and marketing. Websites are no longer
simply tools for work or for commerce, but serve more broadly for communication and social
networking. Web sites such as Facebook and Twitter provide users with a platform to
communicate and organizations with a more personal and interactive way to engage the public.

TABLE OF CONTENTS
S.No. Contents Page Number
List of figures
1. Introduction 1
2. Front-end Web Development 3
3. Hyper Text Markup Language (HTML) 5
4. Cascading Style Sheets (CSS) 8
5. JavaScript 11
6. SQL 14
7. React JS 16
8. Node.js 20

LIST OF FIGURES
S.No. Figure No. Figure Description Page No.
1. 1.1 Web Application Development. 1
2. 3.1 “Hello, World!” HTML program. 6
3. 7.1 “Hello, World!” React js program. 17
4. 7.2 “Hello, World!” React js program as
displayed in the Web browser.
17

CHAPTER 1
INTRODUCTION
1.1 Web Application Development
Web application development is the process and practice of developing web applications.
There is a consensus that the processes involved are extensions of standard software engineering
processes. Considering this, along with its unique characteristics, popular frameworks used
include the spiral approach and business-oriented approach to application development, among
other models that address the requirements for an iterative process.
Figure 1.1: Web Application Development
Just as with a traditional desktop application, web applications have varying levels of risk. A
personal home page is much less risky than, for example, a stock trading web site. For some
projects security, software bugs, etc. are major issues. If time to market, or technical complexity

is a concern, documentation, test planning, change control, requirements analysis, architectural
description and formal design and construction practices can mitigate risk.
1.2 Web DevelopmentTools
Web development tools allow web developers to test and debug their code. They are different
from website builders and integrated development environments (IDEs) in that they do not assist
in the direct creation of a webpage, rather they are tools used for testing the user interface of a
website or web application.
Web development tools come as browser add-ons or built-in features in web browsers. Most
popular web browsers, such as Google Chrome, Firefox, Internet
Explorer, Safari and Opera, have built-in tools to help web developers, and many additional add-
ons can be found in their respective plugin download centers.
Web development tools allow developers to work with a variety of web technologies,
including HTML, CSS, the DOM, JavaScript, and other components that are handled by the web
browser. Due to increasing demand from web browsers to do more, popular web browsers have
included more features geared for developers.
1.3 Web DevelopmentSpecialization
There are three kinds of web developer specialization: front-end developer, back-end developer,
and full-stack developer. Front-end developers deal with the layout and visuals of a website,
while back-end developers deal with the functionality of a website. Back-end developers will
program in the functions of a website that will collect data.

CHAPTER 2
FRONT-END WEB DEVELOPMENT
Front-end web development is the practice of converting data to graphical interface for user to
view and interact with data through digital interaction using HTML, CSS and JavaScript.
Tools UsedFor Front-end Web Development
There are several tools available that can be used to develop the front end of a website, and
understanding which tools are best fit for specific tasks marks the difference between developing
a hacked site and a well designed, scalable site.
Hyper Text Markup Language (HTML)
Hyper Text Markup Language (HTML) is the backbone of any website development process,
without which a web page doesn't exist. Hypertext means that text has links, termed hyperlinks,
embedded in it. When a user clicks on a word or a phrase that has a hyperlink, it will bring
another web-page. A markup language indicates text can be turned into images, tables, links, and
other representations. It is the HTML code that provides an overall framework of how the site
will look. HTML was developed by Tim Berners-Lee. The latest version of HTML is
called HTML5 and was published on October 28, 2014 by the W3 recommendation. This version
contains new and efficient ways of handling elements such as video and audio files.
Cascading Style Sheets (CSS)
Cascading Style Sheets (CSS) controls the presentation aspect of the site and allows your site to
have its own unique look. It does this by maintaining style sheets which sit on top of other style
rules and are triggered based on other inputs, such as device screen size and resolution.
JavaScript
JavaScript is an event-based imperative programming language (as opposed to
HTML's declarative language model) that is used to transform a static HTML page into a

dynamic interface. JavaScript code can use the Document Object Model (DOM), provided by the
HTML standard, to manipulate a web page in response to events, like user input.
Using a technique called AJAX, JavaScript code can also actively retrieve content from the web
(independent of the original HTML page retrieval), and also react to server-side events as well,
adding a truly dynamic nature to the web page experience.
WebAssembly
WebAssembly, supported by all the major browsers (i.e. from the major vendors Google, Apple,
Mozilla and Microsoft), is the only alternative to JavaScript for running code in web browsers
(without the help of plug-ins, such as Flash, Java or Silverlight; all being discontinued, as
browsers are dropping plug-in support). Prior to its adoption, there was asm.js (a subset of
JavaScript; and thus strictly works in all browsers), that's also used as a compiler target with
efficient support in browsers such as Internet Explorer 11; and for such browsers that do not
support WebAssembly directly, it can be compiled to asm.js and those browsers supported that
way. Generally speaking programmers do not program in WebAssembly (or asm.js) directly, but
use languages such as Rust, C or C++ or in theory any language, that compile to it.

CHAPTER 3
HYPER TEXT MARKUP LANGUAGE (HTML)
Hypertext Markup Language (HTML) is the standard markup language for creating web
pages and web applications. With Cascading Style Sheets (CSS) and JavaScript, it forms a triad
of cornerstone technologies for the World Wide Web.
Web browsers receive HTML documents from a web server or from local storage and render the
documents into multimedia web pages. HTML describes the structure of a web
page semantically and originally included cues for the appearance of the document.
HTML elements are the building blocks of HTML pages. With HTML constructs, images and
other objects such as interactive forms may be embedded into the rendered page. HTML
provides a means to create structured documents by denoting structural semantics for text such as
headings, paragraphs, lists, links, quotes and other items. HTML elements are delineated by tags,
written using angle brackets. Tags such as <img /> and <input /> directly introduce content
into the page. Other tags such as <p> surround and provide information about document text
and may include other tags as sub-elements. Browsers do not display the HTML tags, but use
them to interpret the content of the page.
HTML can embed programs written in a scripting language such as JavaScript, which affects the
behavior and content of web pages. Inclusion of CSS defines the look and layout of content.
The World Wide Web Consortium (W3C), maintainer of both the HTML and the CSS standards,
has encouraged the use of CSS over explicit presentational HTML since 1997.
3.1 Markup
HTML markup consists of several key components, including those called tags (and
their attributes), character-based data types, character references and entity references. HTML
tags most commonly come in pairs like <h1> and </h1>, although some represent empty
elements and so are unpaired, for example <img>. The first tag in such a pair is the start tag, and
the second is the end tag (they are also called opening tags and closing tags).

Another important component is the HTML document type declaration, which triggers standards
mode rendering.
The following is an example of the classic "Hello, World!" program:
<!DOCTYPE html>
<html>
<head>
<title>This is a title</title>
</head>
<body>
<p>Hello, World!</p>
</body>
</html>
Figure 3.1: “Hello, World!” HTML program.
The text between <html> and </html> describes the web page, and the text
between <body> and </body> is the visible page content. The markup text <title>This is a
title</title> defines the browser page title.
The Document Type Declaration <!DOCTYPE html> is for HTML5. If a declaration is not
included, various browsers will revert to "quirks mode" for rendering.
3.2 Delivery
HTML documents can be delivered by the same means as any other computer file. However,
they are most often delivered either by HTTP from a web server or by email.
HTTP
The World Wide Web is composed primarily of HTML documents transmitted from web servers
to web browsers using the Hypertext Transfer Protocol (HTTP). However, HTTP is used to serve
images, sound, and other content, in addition to HTML. To allow the web browser to know how

to handle each document it receives, other information is transmitted along with the document.
This meta data usually includes the MIME type(e.g., text/html or application/xhtml+xml) and the
character encoding.
In modern browsers, the MIME type that is sent with the HTML document may affect how the
document is initially interpreted. A document sent with the XHTML MIME type is expected to
be well-formed XML; syntax errors may cause the browser to fail to render it. The same
document sent with the HTML MIME type might be displayed successfully, since some
browsers are more lenient with HTML.

CHAPTER 4
CASCADING STYLE SHEETS (CSS)
Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a
document written in a markup language like HTML. CSS is a cornerstone technology of
the World Wide Web, alongside HTML and JavaScript.
CSS is designed to enable the separation of presentation and content, including layout, colors,
and fonts. This separation can improve content accessibility, provide more flexibility and
control in the specification of presentation characteristics, enable multiple web pages to share
formatting by specifying the relevant CSS in a separate .css file, and reduce complexity and
repetition in the structural content.
Separation of formatting and content also makes it feasible to present the same markup page in
different styles for different rendering methods, such as on-screen, in print, by voice (via speech-
based browser or screen reader), and on Braille-based tactile devices. CSS also has rules for
alternate formatting if the content is accessed on a mobile device.
The name cascading comes from the specified priority scheme to determine which style rule
applies if more than one rule matches a particular element. This cascading priority scheme is
predictable.
The CSS specifications are maintained by the World Wide Web Consortium (W3C). Internet
media type (MIME type) text/css is registered for use with CSS by RFC 2318 (March 1998).
The W3C operates a free CSS validation service for CSS documents.
In addition to HTML, other markup languages support the use of CSS, including XHTML, plain
XML, SVG, and XUL.
4.1 Syntax
CSS has a simple syntax and uses a number of English keywords to specify the names of various
style properties.

A style sheet consists of a list of rules. Each rule or rule-set consists of one or more selectors,
and a declaration block.
Selector
In CSS, selectors declare which part of the markup a style applies to by matching tags and
attributes in the markup itself.
Selectors may apply to:
1. all elements of a specific type, e.g. the second-level headers h2
2. elements specified by attribute, in particular:
id: an identifier unique within the document
class: an identifier that can annotate multiple elements in a document
3. elements depending on how they are placed relative to others in the document tree.
Classes and IDs are case-sensitive, start with letters, and can include alphanumeric characters
and underscores. A class may apply to any number of instances of any elements. An ID may only
be applied to a single element.
DeclarationBlock
A declaration block consists of a list of declarations in braces. Each declaration itself consists of
a property, a colon (:), and a value. If there are multiple declarations in a block, a semi-colon (;)
must be inserted to separate each declaration.
Properties are specified in the CSS standard. Each property has a set of possible values. Some
properties can affect any type of element, and others apply only to particular groups of elements.
Values may be keywords, such as "center" or "inherit", or numerical values, such as 200px (200
pixels), 50vw (50 percent of the viewport width) or 80% (80 percent of the window width).
Color values can be specified with keywords (e.g. "red"), hexadecimal values (e.g. #FF0000, also
abbreviated as #F00), RGB values on a 0 to 255 scale (e.g. rgb(255, 0, 0)), RGBA values that

specify both color and alpha transparency (e.g. rgba(255, 0, 0, 0.8)), or HSL or HSLA values
(e.g. hsl(000, 100%, 50%), hsla(000, 100%, 50%, 80%)).
4.2 Use
Before CSS, nearly all presentational attributes of HTML documents were contained within the
HTML markup. All font colors, background styles, element alignments, borders and sizes had to
be explicitly described, often repeatedly, within the HTML. CSS lets authors move much of that
information to another file, the style sheet, resulting in considerably simpler HTML.
For example, headings (h1 elements), sub-headings (h2), sub-sub-headings (h3), etc., are
defined structurally using HTML. In print and on the screen, choice
of font, size, color and emphasis for these elements is presentational.
Before CSS, document authors who wanted to assign such typographic characteristics to, say,
all h2 headings had to repeat HTML presentational markup for each occurrence of that heading
type. This made documents more complex, larger, and more error-prone and difficult to
maintain. CSS allows the separation of presentation from structure. CSS can define color, font,
text alignment, size, borders, spacing, layout and many other typographic characteristics, and can
do so independently for on-screen and printed views. CSS also defines non-visual styles, such as
reading speed and emphasis for aural text readers. The W3C has now deprecated the use of all
presentational HTML markup.

CHAPTER 5
JavaScript
JavaScript, often abbreviated as JS, is a high-level, interpreted programming language. It is a
language which is also characterized as dynamic, weakly typed, prototype-based and multi-
paradigm.
Alongside HTML and CSS, JavaScript is one of the three core technologies of the World Wide
Web. JavaScript enables interactive web pages and thus is an essential part of web applications.
The vast majority of websites use it, and all major web browsers have a dedicated JavaScript
engine to execute it.
As a multi-paradigm language, JavaScript supports event-driven, functional,
and imperative (including object-oriented and prototype-based) programming styles. It has
an API for working with text, arrays, dates, regular expressions, and basic manipulation of
the DOM, but the language itself does not include any I/O, such as networking, storage, or
graphics facilities, relying for these upon the host environment in which it is embedded.
Initially only implemented client-side in web browsers, JavaScript engines are now embedded in
many other types of host software, including server-side in web servers and databases, and in
non-web programs such as word processors and PDF software, and in runtime environments that
make JavaScript available for writing mobile and desktop applications, including desktop
widgets.
Although there are strong outward similarities between JavaScript and Java, including language
name, syntax, and respective standard libraries, the two languages are distinct and differ greatly
in design; JavaScript was influenced by programming languages such as Self and Scheme.
4.1 History
1. First web Scripting language.
2. Developed by Netscape and Sun

3. Initiated by Netscape
4.2 Why JS?
1. JavaScript enhances web pages with dynamic and interactive features.
2. JavaScript runs in client software.
3. JavaScript can react to events.
4. JavaScript can read/write/modify HTML elements.
4.3 JavaScript Terminology
JavaScript programming uses specialized terminology. Understanding JavaScript terms is
fundamental to understanding the script.
Objects
1. Objects refers to windows, documents, images, tables, forms, buttons or links, etc.
2. Objects should be named.
3. Objects have properties that act as modifiers.
Properties
1. Properties are object attributes.
2. Object attributes are defined by using the object’s name, a period and the property name.
Methods
1. Method are actions applied to particular objects.
2. Methods are what objects can do.
Functions
1. Functions are named statements that performs tasks.
2. JavaScript has built in functions and you can write your own.

Values
1. Values are bits of information.
2. Value types and some examples include:
Number: 1, 2, 3, etc.
String: characters enclosed in quotes.
Boolean: true or false.
Object: image, form.
Variables
1. Variables contains values and use the equal sign to specify their values.
2. Variables are created by declaration using the var command with or without an initial
value state.
4.4 Client-Side Script
When client makes the request, the HTML and all scripts will be downloaded into your browser
and then the resultant HTML will be displayed in the browser is called client-side script.

CHAPTER 6
SQL
SQL is a standard language for storing, manipulating and retrieving data in databases.
Our SQL tutorial will teach you how to use SQL in: MySQL, SQL Server, MS Access, Oracle,
Sybase, Informix, Postgres, and other database systems.
6.1 What is SQL?
 SQL stands for Structured Query Language
 SQL lets you access and manipulate databases
 SQL became a standard of the American National Standards Institute (ANSI) in 1986,
and of the International Organization for Standardization (ISO) in 1987
6.2 What can SQL do?
 SQL can execute queries against a database
 SQL can retrieve data from a database
 SQL can insert records in a database
 SQL can update records in a database
 SQL can delete records from a database
 SQL can create new databases
 SQL can create new tables in a database
 SQL can create stored procedures in a database
 SQL can create views in a database
 SQL can set permissions on tables, procedures, and views
6.3 Using SQL in your Web Site
To build a web site that shows data from a database, you will need:

 An RDBMS database program (i.e. MS Access, SQL Server, MySQL)
 To use a server-side scripting language, like PHP or ASP
 To use SQL to get the data you want
 To use HTML / CSS to style the page
6.4 Some of the most important SQL Commands
 SELECT - extracts data from a database
 UPDATE - updates data in a database
 DELETE - deletes data from a database
 INSERT INTO - inserts new data into a database
 CREATE DATABASE - creates a new database
 ALTER DATABASE - modifies a database
 CREATE TABLE - creates a new table
 ALTER TABLE - modifies a table
 DROP TABLE - deletes a table
 CREATE INDEX - creates an index (search key)
 DROP INDEX - deletes an index

CHAPTER 7
React JS
React (also known as React.js or ReactJS) is a JavaScript library for building user interfaces. It
is maintained by Facebook and a community of individual developers and companies.
React can be used as a base in the development of single-page or mobile applications. Complex
React applications usually require the use of additional libraries for state management, routing,
and interaction with an API.
6.1 What is ReactJS?
A JavaScript library for building user interfaces. React js is created by the facebook by reusable
and interactive UI components.
6.2 Why ReactJS?
1. Virtual Dom – React js use the concept of virtual DOM which helps in the performance.
2. Unidirectional Data Flow – Compared to the two way binding. React js use the concept of
unidirectional data flow which improve the overall performance.
3. UI Components – Reusable and interactive components.
4. SEO Friendly – Components are client side as well as server side render hence they are SEO
friendly and no 3rd party plugin required.
5. Coding is simpler because of JSX.
6. React js own debugger.
6.3 Basic Usage
The following is a rudimentary example of React usage in HTML with JSX and JavaScript.

<div id="myReactApp"></div>
<script type="text/babel">
class Greeter extends React.Component {
render() {
return <h1>{this.props.greeting}</h1>
}
}
ReactDOM.render(<Greeter greeting="Hello, World!" />,
document.getElementById('myReactApp'));
</script>
Figure 7.1: “Hello, World!” React js program.
The Greeter class is a React component that accepts a property greeting.
The ReactDOM.render method creates an instance of the Greeter component, sets
the greeting property to 'Hello World' and inserts the rendered component as a child element to
the DOM element with id myReactApp.
When displayed in a web browser the result will be
<div id="myReactApp">
<h1>Hello, World!</h1>
</div>
Figure 7.2: “Hello, World!” React js program as displayed in the web browser.

6.4 Important Terms
JSX
JSX – JavaScript XML syntax transform.
It helps in making our writing code easier and faster. JSX lets us write HTML (not 100%) with
XML based object representation.
Components
In react js the whole application is break into components. Components are interactive, reusable
and stageful too. Everything in react js is components. The core building blocks of React
application is components only. Components interact with each other and maintain the state too.
Virtual DOM
1. React js uses the concept of Virtual DOM.
2. It selectively the subtree of DOM elements into the rendering of the DOM on state
change.
3. Use different algorithm with the browser DOM tree to identify the changes.
4. Instead of creating new object, React js just identify what change has taken place and
once it identifies, it updates that state.
5. It is improving the performance by creating a virtual DOM.
6. It can be render on server and sync on local.
Props
In react js props are like HTML properties. They are used to pass the data between the
components or via the states. In react js props can be accessed by this.props.propsname.
States
Every component has a State object. Can be set by using setState. setState triggers UI updates
and to get the initial state before the setState.

Nestedelements
Multiple elements on the same level need to be wrapped in a single container element such as
the <div> element shown above, or returned as an array.
Attributes
JSX provides a range of element attributes designed to mirror those provided by HTML. Custom
attributes can also be passed to the component. All attributes will be received by the component
as props.

CHAPTER 8
Node.js
Node.js is an open-source, cross-platform JavaScript run-time environment that executes
JavaScript code outside of a browser. Historically, JavaScript was used primarily for client-side
scripting, in which scripts written in JavaScript are embedded in a webpage's HTML and run
client-side by a JavaScript engine in the user's web browser. Node.js lets developers use
JavaScript to write Command Line tools and for server-side scripting—running scripts server-
side to produce dynamic web page content before the page is sent to the user's web browser.
Consequently, Node.js represents a "JavaScript everywhere" paradigm,[5] unifying web
application development around a single programming language, rather than different languages
for server side and client side scripts.
Though .js is the conventional filename extension for JavaScript code, the name "Node.js" does
not refer to a particular file in this context and is merely the name of the product. Node.js has
an event-driven architecture capable of asynchronous I/O. These design choices aim to
optimize throughput and scalability in web applications with many input/output operations, as
well as for real-time Web applications (e.g., real-time communication programs and browser
games).
7.1 Platform Architecture
Node.js brings event-driven programming to web servers, enabling development of fast web
servers in JavaScript. Developers can create highly scalable servers without using threading, by
using a simplified model of event-driven programming that uses callbacks to signal the
completion of a task. Node.js connects the ease of a scripting language (JavaScript) with the
power of Unix network programming.
Node.js was built on the Google V8 JavaScript engine since it was open-sourced under the BSD
license. It is extremely fast and proficient with internet fundamentals such
as HTTP, DNS, TCP. Also, JavaScript was a well-known language, making Node.js immediately
accessible to the entire web development community.

7.1 TechnicalDetails
Node.js is a Javascript runtime environment that processes incoming requests in a loop, called
the event loop.
Threading
Node.js operates on a single thread, using non-blocking I/O calls, allowing it to support tens of
thousands of concurrent connections without incurring the cost of thread context switching. The
design of sharing a single thread among all the requests that use the observer pattern is intended
for building highly concurrent applications, where any function performing I/O must use
a callback. To accommodate the single-threaded event loop, Node.js uses the libuv library—
which, in turn, uses a fixed-sized thread pool that handles some of the non-blocking
asynchronous I/O operations.
A downside of this single-threaded approach is that Node.js doesn't allow vertical scaling by
increasing the number of CPU cores of the machine it is running on without using an additional
module, such as cluster, StrongLoop Process Manager, or pm2. However, developers can
increase the default number of threads in the libuv thread pool. The server operating system
(OS) is likely to distribute these threads across multiple cores.
A thread pool handles execution of parallel tasks in Node.js. The main thread call functions post
tasks to the shared task queue, which threads in the thread pool pull and execute. Inherently non-
blocking system functions such as networking translate to kernel-side non-blocking sockets,
while inherently blocking system functions such as file I/O run in a blocking way on their own
threads. When a thread in the thread pool completes a task, it informs the main thread of this,
which in turn, wakes up and executes the registered callback. Since Node.js handles callbacks in
serial on the main thread, long lasting computations and other CPU-bound tasks freeze the entire
event-loop until completion.
V8
V8 is the JavaScript execution engine which was initially built for Google Chrome. It was then
open-sourced by Google in 2008. Written in C++, V8 compiles JavaScript source code to
native machine code instead of interpreting it in real time.

Node.js uses libuv to handle asynchronous events. Libuv is an abstraction layer for network and
file system functionality on both Windows and POSIX-based systems such as Linux, macOS,
OSS on NonStop, and Unix.
The core functionality of Node.js resides in a JavaScript library. The Node.js bindings, written in
C++, connect these technologies to each other and to the operating system.
Packagemanagement
npm is the pre-installed package manager for the Node.js server platform. It installs Node.js
programs from the npm registry, organizing the installation and management of third-party
Node.js programs. Packages in the npm registry can range from simple helper libraries such
as Lodash to task runners such as Grunt.
Unified API
Node.js can be combined with a browser, a database that supports JSON data (such
as Postgres, MongoDB, or CouchDB) and JSON for a unified JavaScript development stack.
With the adaptation of what were essentially server-side development patterns such
as MVC, MVP, MVVM, etc., Node.js allows the reuse of the same model and service interface
between client-side and server-side.
Event loop
Node.js registers with the operating system so the OS notifies it of connections and issues a
callback. Within the Node.js runtime, each connection is a small heap allocation. Traditionally,
relatively heavyweight OS processes or threads handled each connection. Node.js uses an event
loop for scalability, instead of processes or threads. In contrast to other event-driven servers,
Node.js's event loop does not need to be called explicitly. Instead callbacks are defined, and the
server automatically enters the event loop at the end of the callback definition. Node.js exits the
event loop when there are no further callbacks to be performed.
7.2 npm
npm is a package manager for the JavaScript programming language. It is the default package
manager for the JavaScript runtime environment Node.js. It consists of a command line client,
also called npm, and an online database of public and paid-for private packages, called the npm

registry. The registry is accessed via the client, and the available packages can be browsed and
searched via the npm website. The package manager and the registry are managed by npm, Inc.

Web deveopment using React js and Node js with SQL.

More Related Content

What's hot (20)

Similar to Web deveopment using React js and Node js with SQL. (20)

Recently uploaded (20)

Web deveopment using React js and Node js with SQL.