IT3501 Full Stack Web Development

UNIT 1
BASICS OF FULL STACK

Syllabus

Understanding the Basic Web Development Framework – User –

Browser – Webserver – Backend
Services – MVC Architecture – Understanding the different stacks –The
role of Express – Angular
– Node – Mongo DB – React
What’s the difference between HTML & CSS & JS ?
Full stack development:
Full stack development: It refers to the development of both front
end(client side) and back end(server side) portions of web application.
Full stack web Developers: Full stack web developers have the ability to
design complete web applications and websites. They work on the frontend,
backend, database and debugging of web applications or websites.

Full Stack Web Developer

A full stack web developer is a person who can develop
both client and server software.

In addition to mastering HTML and CSS, he/she also knows how to:

 Program a browser (like using JavaScript, jQuery, Angular, or Vue)

 Program a server (like using PHP, ASP, Python, or Node)
 Program a database (like using SQL, SQLite, or MongoDB)

Front end:It is the visible part of website or web application which is

responsible for user experience. The user directly interacts with the front end
portion of the web application or website.
Front end Languages:The front end portion is built by using some
languages which are discussed below:

 HTML: HTML stands for Hyper Text Markup Language. It is used to

design the front end portion of web pages using markup language.
HTML is the combination of Hypertext and Markup language.
Hypertext defines the link between the web pages. The markup
language is used to define the text documentation within tag which
defines the structure of web pages.
 CSS: Cascading Style Sheets, fondly referred to as CSS, is a
simply designed language intended to simplify the process of
making web pages presentable. CSS allows you to apply styles to
web pages. More importantly, CSS enables you to do this
independent of the HTML that makes up each web page.
 JavaScript: JavaScript is a famous scripting language used to
create the magic on the sites to make the site interactive for the
user. It is used to enhancing the functionality of a website to
running cool games and web-based software.

Back end: It refers to the server-side development of web application

or website with a primary focus on how the website works. It is
responsible for managing the database through queries and APIs by
client-side commands. This type of website mainly consists of three
parts front end, back end, and database.

The back end portion is built by using some libraries, frameworks, and
languages which are discussed below:
 PHP: PHP is a server-side scripting language designed specifically
for web development. Since, PHP code executed on server side so
it is called server side scripting language.
  C++ It is a general purpose programming language and widely
used now a days for competitive programming. It is also used as
backend language.
 Java: Java is one of the most popular and widely used
programming language and platform. It is highly scalable. Java
components are easily available.
 Python: Python is a programming language that lets you work
quickly and integrate systems more efficiently.
 JavaScript: Javascript can be used as both (front end and back
end) programming languages.
 Node.js: Node.js is an open source and cross-platform runtime
environment for executing JavaScript code outside of a browser.

Understanding the Basic Web Development

Framework

A web development framework is a set of resources and tools

for software developers to build and manage web applications,
web services and websites.

What exactly is a web framework?

It is a software framework that was developed in order to simplify the web

development process and make it easier to build a website. It includes
templating capabilities that allow you to present information within a browser,
provides an environment for scripting how information flows and also contains
many application programming interfaces (APIs) for gaining access to
underlying data resources. Most frameworks also provide tools in order for
web developers to build a content management system (CMS) for managing
digital information on websites and the Internet

Advantages of Frameworks:
 Efficiency
 Security
 Expense
 Support

Disadvantages of Frameworks :
 You learn the framework, not the language
 Restriction
 Code is public

WEB USER :
Web User is a person with a user ID on the System who uses the Software

sporadically (by triggering twenty or fewer Invocations in each calendar month) and

who Customer identifies in advance in the System as a Web User. Activity by a Web
User will be counted as Invocations and not as a User. The number of Users and

Invocations will be measured each calendar month. A System tracks only actual use

of the Software, so a person who has a user id on the System but does not use the
Software in a month will not be counted as a User for that month
BROWSER :
Alternatively called a web browser or Internet browser, a browser is
a software program to present and explore content on the World Wide
Web. These pieces of content, including pictures, videos, and web pages,
are connected using hyperlinks and classified with URIs (Uniform
Resource Identifiers). This page is an example of a web page that can be
viewed using a browser.
WEB BROWSER :
A web server is software and hardware that uses HTTP (Hypertext Transfer
Protocol) and other protocols to respond to client requests made over the World
Wide Web. The main job of a web server is to display website content through
storing, processing and delivering webpages to users.

How do web servers work?

Web server software is accessed through the domain names of websites

and ensures the delivery of the site's content to the requesting user. The
software side is also comprised of several components, with at least an
HTTP server. The HTTP server is able to understand HTTP and URLs. As
hardware, a web server is a computer that stores web server software and
other files related to a website, such as HTML documents, images
and JavaScript files.

When a web browser, like Google Chrome or Firefox, needs a file that's
hosted on a web server, the browser will request the file by HTTP. When
the request is received by the web server, the HTTP server will accept the
request, find the content and send it back to the browser through HTTP.
\

Examples of web server uses

Web servers often come as part of a larger package of internet- and
intranet-related programs that are used for:

 sending and receiving emails;

 downloading requests for File Transfer Protocol (FTP) files; and

 building and publishing webpages.

Common and top web server software on the market

 Apache HTTP Server

 Microsoft Internet Information Services (IIS)
 Nginx
 Lighttpd
 Sun Java System Web Server
Backend Services :
A backend service can be of any type. It can be a data service, web service, java
service, security service, or using a third party API. Or, even extending a feature with
your own code.

Thus, you can consider external data as a service. Based on the underlying data, you
can categorize backend services as Web Services, Database Services, Java
Services and Security Services. Each service is converted to a RESTful service and is
consumed through their respective REST APIs.
What do these services include ?

Database management:

Database management refers to the process of handling, storing,

adding, deleting, and retrieving data from a database. Although
there are some databases that work offline, most are cloud-based
platforms that work as a repository for all the information on a
website or mobile app.

Hosting:

Hosting is the service with access to the internet that enables a

website or a web-based to work online. This service usually
includes a server, which is a computer program that manages the
information stored in the database. A server can activate and
deactivate all the applications and widgets that work within the
website or app.

User authentication:

User authentication is a security process that allows authorized and

verified users to access a site or application. This process can
comprise different requirements, such as user ID, password, secret
key or question, and security codes the user receives on their
phones.

Cloud Storage :

A web-based app or a website can interact with cloud storage

through APIs or protocols set previously by the provider. This
service can reduce significant costs associated with having physical
storage on-site.

Push notifications:

Push notifications are messages sent through apps to notify users

about new content, updates, new app versions, terms of service
changes, or events. For instance, a weather app can warn you
about an incoming storm or heat wave by using a push notification.

Remote updating

Remote updating, also known as over-the-air programming, is the

process of updating an application through an online connection.
While the device is online, the app publisher can send new firmware
debugged with the new code to update the application.

MVC Architecture :

The Model-View-Controller (MVC) is an architectural pattern that

separates an application into three main logical components: the
model, the view, and the controller. Each of these components are
built to handle specific development aspects of an application.
MVC Components :

Model
The Model component corresponds to all the data-related logic that the user works
with. This can represent either the data that is being transferred between the View and
Controller components or any other business logic-related data. For example, a
Customer object will retrieve the customer information from the database, manipulate
it and update it data back to the database or use it to render data.

View
The View component is used for all the UI logic of the application. For example, the
Customer view will include all the UI components such as text boxes, dropdowns, etc.
that the final user interacts with.

Controller
Controllers act as an interface between Model and View components to process all
the business logic and incoming requests, manipulate data using the Model
component and interact with the Views to render the final output. For example, the
Customer controller will handle all the interactions and inputs from the Customer View
and update the database using the Customer Model. The same controller will be used
to view the Customer data
ASP.NET MVC :

ASP.NET supports three major development models: Web Pages, Web Forms and
MVC (Model View Controller). ASP.NET MVC framework is a lightweight, highly
testable presentation framework that is integrated with the existing ASP.NET features,
such as master pages, authentication, etc. Within .NET, this framework is defined in
the System.Web.Mvc assembly. The latest version of the MVC Framework is 5.0. We
use Visual Studio to create ASP.NET MVC applications which can be added as a
template in Visual Studio.

ASP.NET MVC Features :

ASP.NET MVC provides the following features −

 Ideal for developing complex but lightweight applications.

 Provides an extensible and pluggable framework, which can be easily replaced
and customized. For example, if you do not wish to use the in-built Razor or
ASPX View Engine, then you can use any other third-party view engines or even
customize the existing ones.
 Utilizes the component-based design of the application by logically dividing it
into Model, View, and Controller components. This enables the developers to
manage the complexity of large-scale projects and work on individual
components.
 MVC structure enhances the test-driven development and testability of the
application, since all the components can be designed interface-based and
tested using mock objects. Hence, ASP.NET MVC Framework is ideal for
projects with large team of web developers.
 Supports all the existing vast ASP.NET functionalities, such as Authorization
and Authentication, Master Pages, Data Binding, User Controls, Memberships,
ASP.NET Routing, etc.
 Does not use the concept of View State (which is present in ASP.NET). This
helps in building applications, which are lightweight and gives full control to the
developers.
Thus, you can consider MVC Framework as a major framework built on top of
ASP.NET providing a large set of added functionality focusing on component-based
development and testing.

Advantages & Disadvantages of MVC :

Understanding the different stacks :
What is a Tech Stack?

A tech stack is the set of technologies used to develop an application, including

programming languages, frameworks, databases, front-end and back-end tools, and
APIs. Choices with your tech stack can have significant downstream effects,
including the kinds of integrations you can build and the skills you'll need to hire for.

Popular Stacks:
 MEAN Stack: MongoDB, Express, AngularJS and Node.js.
 MERN Stack: MongoDB, Express, ReactJS and Node.js
 Django Stack: Django, python and MySQL as Database.
 Rails or Ruby on Rails: Uses Ruby, PHP and MySQL.
 LAMP Stack: Linux, Apache, MySQL and PHP.

The categories of a modern tech stack :

Before the days of ubiquitous SaaS products and services, tech stacks were
relatively simple: there was LAMP (Linux, Apache, MySQL, PHP), an older
standard for building PHP-based web applications, and non-open source
alternatives like WAMP (for those that preferred Windows to Linux).

Here are the basic categories along with some popular options for each:

 Operating systems and programming languages – You’ll choose

these based on the environment you’re most comfortable developing
in as well as the type of application you want to optimize for. You may
end up with several, depending on how you want to build the backend
and the user experience, and what devices you’re building for.

 Servers and load balancing – This category include servers, content

distribution networks, routing, and caching services that let your
applications send and receive requests, run smoothly, and scale
capacity as needed. The larger services, like Amazon’s and Google’s,
often offer the same components offered by their smaller counterparts.

 Data storage and querying – This layer of the stack consists of

relational and non-relational databases, data warehouses, and data
pipelines that allow you to store and query all of your real-time and
historical data. These components are key for storing data about
what happens inside your app and how users behave when using it.
Later you can search this data and use it to improve your product.

 Backend Frameworks – A framework is a collection of languages,

libraries, and utilities designed to help developers build applications.
Frameworks often include some of the basic functionality you’ll need
to build an app, and provides structure for things like organizing and
communicating with your database, handling requests from users,
and sending out registration or password reset emails.
  Frontend Framework – The services and frameworks you use to
build the user experience, including the user interface and all the
client-side functionality in your product.

Express:

Express.js is a small framework that works on top of Node.js web server functionality
to simplify its APIs and add helpful new features. It makes it easier to organize your
application’s functionality with middleware and routing. It adds helpful utilities to
Node.js HTTP objects and facilitates the rendering of dynamic HTTP objects.

Express.js was founded by TJ Holowaychuk. The first release, according to

Express.js's GitHub repository, was on 22 May 2010. Version 0.12

Angular :

Angular (also referred to as "Angular 2+")[4] is a TypeScript-based, free and open-source single-
page web application framework led by the Angular Team at Google and by a community of
individuals and corporations. Angular is a complete rewrite from the same team that
built AngularJS.

Initial release 2.0 / 14 September 2016; 6 years ago[1]

Stable release 16.0.3[2] / 24 May 2023; 11 days ago

Preview release 14.0.0-next.0 / 26 January 2022; 16 months ago[3]

Node.js :

Node.js is a cross-platform, open-source server environment that can run

on Windows, Linux, Unix, macOS, and more. Node.js is a back-
end JavaScript runtime environment, runs on the V8 JavaScript Engine, and
executes JavaScript code outside a web browser.

Node.js lets developers use JavaScript to write command line tools and for server-
side scripting. The ability to run JavaScript code on the server is often used to
generate dynamic web page content before the page is sent to the user's web
browser. Consequently, Node.js represents a "JavaScript everywhere"
paradigm,[6] unifying web-application development around a single programming
language, as opposed to using different languages for the server- versus client-side
programming.

Initial release May 27, 2009; 14 years ago[1]

Stable release 20.2.0[2] / May 16, 2023; 20 days ago

Written in C, C++, JavaScript

Mongo DB :

MongoDB is a source-available cross-platform document-oriented

database program. Classified as a NoSQL database program, MongoDB
uses JSON-like documents with optional schemas. MongoDB is developed
by MongoDB Inc. and licensed under the Server Side Public License (SSPL) which
is deemed non-free by several distributions. MongoDB is a member of the MACH
Alliance.

Initial release February 11, 2009; 14 years ago[1]

Stable release 6.0.5[2] / 13 March 2023，2 months ago

Written in C++, JavaScript, Python

React :

React (also known as React.js or ReactJS) is a free and open-source front-

end JavaScript library[3][4] for building user interfaces based on components. It is
maintained by Meta (formerly Facebook) and a community of individual developers
and companies.[5][6][7]

React can be used to develop single-page, mobile, or server-rendered applications

with frameworks like Next.js. Because React is only concerned with the user
interface and rendering components to the DOM, React applications often rely
on libraries for routing and other client-side functionality.

Initial release May 29, 2013; 10 years ago[1]

Stable release 18.2.0[2] / 14 June 2022; 11 months ago

Written in JavaScript