Full Stack Web Development

- Front End Development

- Back End Development
- We will build
o Desktop Native
o Web Applications
o SPA [Single Page Applications]
o Mobile Native Applications

Web Application Architecture

- Software applications architecture
o One Tier
o Two Tier
o 3 Tier
o N Tier
FAQ: What is difference between Tier and Layer?
- Applications are built in Layers.
- Applications run in Tier.

FAQ: What is difference between UI developer and

Full Stack Developer?
- UI Developer: Building the UI, role UI Layer.
 - Full Stack Developer: Building the UI, Business
Logic, Create Database

Front End Development: Building the UI

Back End Development: Business Logic and Database
Full Stack: Front End, Back End

FAQ: What is MEAN, MERN, Full Stack etc?

M - MongoDB - Database
E - Express - Middleware
A/R - Angular/React - Client Side
N - Node JS - Server Side

Angular / React
HTML, CSS, Bootstrap, LESS, SASS, jQuery, JavaScript -
ES6 - UI
M - MongoDB - Database
E - Express - Middleware
A/R - Angular/React - Client Side – UX – SPA
N - Node JS - Server Side
UI Developer
MEAN
MERN
Full Stack

Front End Development

- It is all about building the UI [User Interface]

What are the basic software requirements for

building the UI?
HTML It is a presentation language used
for presenting the contents on
browser window.
CSS It makes the presentation more
interactive and responsive.
LESS & SASS These are CSS pre-processors used
to make CSS reusable,
maintainable and extensible.
Bootstrap It provides templates, which you
can implement in your application.
You build applications faster.
It is a library of HTML, CSS and
JavaScript.
JavaScript It is a language, used client-side,
 server-side, database.
Client-Side with HTML
Server-Side with Node JS
Database with MongoDB
jQuery It is a JavaScript library.
Library comprises of set of
functions, which you can
implement in your application and
handle functionality without
writing much logic.
RxJS It is a JavaScript Library.
It is used to handle asynchronous
requests.
Asynchronous will improve the
performance of application.
ReactJS It is a JavaScript Library.
It is good in developing SPA.
[Single Page Application].
You can build applications with
good UX.
Ionic It is a framework used to build
cross platform mobile apps with
JavaScript, HTML, ReactJS.
Other frameworks: Native Script,
Cordova etc.
Angular [Intro] Framework for building SPA.
Flash [Intro] It is used for creating animations
for web.
 Photoshop It is for publishing images.
[Intro]

Back End Development

- All about handling interactions server side.
NodeJS Server-Side Scripting
It is a technique used in web
development, where scripts are
employed on server, in order to
generate a response customized to
every client request. [CGI, JSP, PHP,
ASP, Python]
MongoDB Database
Express It is a middleware, handle
communication in multi-tier
applications.
Middleware is a software
framework.
Versioning GIT
Testing Jasmine-Karma

Toolchain Required for Front End Web Development

What is toolchain?
 - Toolchain refers to the tools required for building,
debugging, compiling, testing and deploying.
o Building – Designing
o Debugging – Finding the bugs and fixing the
bugs [technical issues].
o Compiling – Translating
o Testing – Asserting the client requirements.
o Deploying – Publishing, ready to use.

Toolchain Purpose / Description

Package - It is a software tool used by
Manager developers to install dependencies
required for project.
- Dependencies are libraries required
for building an application.
Ex: NPM, Yarn, Bower, NuGet, Ruby
GEMS etc.

Installing NPM [Node Package Manager]

- Download Node JS on your PC
https://nodejs.org/en/download/
- Install on your PC
- Test its version from command
prompt
C:\> node -v
C:\> npm -v
IDE / - Integrated Development
Editor Environment
- It provides single platform from
where we can build, debug, test and
deploy applications.
- There are various editor used across
web development like, Web Strom,
Sublime, Edit Plus, Eclipse, Visual
Studio, Visual Studio Code etc.
Installing Visual Studio Code
- Visit the website
https://code.visualstudio.com/
Plugins for Install the following plugins for VS Code
VS Code - Install Support for JavaScript
[Customize]
- Go to Extensions and Install the
following
Live Server

Vscode-icons

IntelliSense for CSS class Names

Creating a Project
- Open any physical drive location on your PC
- Create a new folder for project
C:\FrontEndProject
- Go to Visual Studio Code
- File Menu -> Open Folder
- Select “C:\FrontEndProject”
- Click Select Folder
- Generate Meta Data for your project [Information
about project]
o Go to “Terminal Menu”
o Select “New Terminal”
o Run the following command
> npm init
o This will generate “package.json” that
contains meta data.

Build UI for Web Applications

What is Web? What is difference between Internet
and Web?
 - Internet is a Wide Area Network that connects
computers across the world for sharing
information and resources.
- Internet doesn’t have any restriction; any user can
access any information from any location.
- In early 1990’s “Tim Berners Lee” introduced the
concept of Web.
- Web is a portion of internet with restricted access.
- Web uses the mechanism of “Request and
Response”.

What is a Web Server?

- Web Server resembles both hardware and
software.
- It satisfies the client request by sending and
receiving information.
- Sever role is hosting your resources, processing
the requests and managing the response etc.
- Web Server Software
o IIS [Internet Information Services Manager]
o Tomcat
- Local Web Server
- Cloud Live Server
 Configuring Local Server for Web Development
- Apache Tomcat
- IIS [Internet Information Services]
- NGINX
- Lighthttpd

Local Web Server on Windows PC

- Windows OS provides a built-in Web Server called
IIS.

Locating Local Web Server on Windows PC:

- Open windows control panel
- Switch to “Large Icons” view
- Go to “Administrative Tools”
- Look for “Internet Information Services Manager”

Adding Local Web Server on Windows PC:

- Open Control Panel
- Go to “Programs and Features”
- Click on “Turn Windows Features ON or OFF”
- Select “Internet Information Services” check box
- Click OK
Test your local Web Server:
- Open any browser
- Type the following in address bar
http://localhost
oder
http://127.0.0.1

Web Site on Local Web Server

What is a web site?
- Web site is a virtual directory on Web Server.
- It provides access to resources on Web Server.

Creating a new Website on Local IIS [Web Server]:

- Windows Run -> “inetmgr” [To open IIS]
- Expand “Local Computer: http://localhost”
- Expand “Sites” folder
- Right Click on “Default Web Site”
- Select “Add Virtual Directory”
Alias [Website Name]: Flipkart
Physical Path: C:\FlipkartResources

Virtual Path: http://localhost/flipkart

Physical Path: C:\FlipkartResources
UI provided to clients for handling interaction with
the resources.
UI is designed in a special document called “Web
Page”.

What is a Web Page?

- Web Page is a Hyper Text Document.
- It provides an UI from where user can interact with
the resources of website.
- Web Page
o Static Page
o Dynamic Page