 |
| What is Full stack developer? |
What is Full Stack developer?
-
Full
Stack developers are now trending in software industry.
-
Software
developer who can handle end-to-end application development.
-
Developer
can manage database, server-side application, middleware, client-side tools,
web server. [Full Stack Developer]
-
Front-end
to Back-end.
What you will learn in Full Stack?
-
Complete
front end development. [HTML, CSS, Bootstrap, JS, JQ, Angular JS, React JS etc.]
-
Server-Side
Technologies. [Node JS]
-
Database.
[MongoDB, MySql]
-
Middleware.
[Express.js]
-
Web
Servers. [IIS, Tomcat]
-
Cross
platform framework for Mobile apps. [Ionic],
-
Angular
JS
-
React.js
What we can build by using Full Stack?
-
Web
Application
-
Distributed
Application
- Mobile Native Application
Who can learn Full Stack?
-
Anyone,
no technical knowledge required: Full Stack
-
Java,
.NET, PHP, Python, Mobile
Full
Stack developer is perfect up to: front end, server side and database.
Full
Stack developer can’t handle support projects until or unless you have
knowledge in Java, .NET, PHP, Python.
What is difference between Full Stack, MEAN, MERN and UI?
-
UI is all about “Front End Development”
o
HTML
o
CSS
o
Bootstrap
o
JavaScript
o
jQuery
o
Angular
JS etc.
o
No database , middleware and server side
- What is MEAN Stack
o
M MongoDB Database
o
E Express Middleware
o
A Angular Client
Side
o
N Node.js Server
Side
o
No Front end tools or language
- What is MERN Stack
o
M MongoDB Database
o
E Express Middleware
o
R React Client
Side
o
N Node.js Server
Side
o
No Front end tools or language
-
Full Stack
o
Front
End
o
Back
End
Different Types of Applications we are going to learn in Full Stack
-
Web
Application
-
Distributed
Application
-
Mobile
Native Application
What is Single Page Application [SPA] and Progressive Web Application?
-
SPA
-
In
SPA user will stay on one page and get access to everything from the page.
-
User
will not Navigate from one page to another.
-
In
Web Applications, Distributed Applications and Mobile Native applications we
are using SPA environment.
-
We
will do that by using “Angular JS, React.js and Ionic” for SPA
-
PWA [Progressive Web Applications]
-
In
PWA web site will have app like behaviour in browser.
-
A
web site looks like an “app” not like a page.
-
We
can do that by using “React.js and Ionic”
What is UI, UX?
-
Front
End development
-
UI
[User Interface]
-
UX
[User Experience]
-
UX is part of UI.
-
Web
started in early 1990’s
-
Tim Berners Lee
introduced the concept of Web.
-
For Early web development UI is enough.
o HTML, CSS, JavaScript, jQuery etc.
-
Modern web development has several challenges
o
80%
to 90% of internet users are using web from smart devices.
o
Our
traditional websites are too large and can’t reach low bandwidth devices
easily.
o
Client
wants an
§ Unified UX
· Our application must provide same
features and functionality across any device.
§ Fluid UX
· User will stay on one page and get
access to everything.
§ Easy Extensibility
§ Simplified Deployment.
o
Solution
§ Angular JS, React.js etc.
Front-end Development
What is front-end?
-
Software
applications follow tier and layer architecture.
-
Applications
are built in layers.
-
Applications
run in tiers.
Tier :
run application
Layer :
build application
-
Developers
work in 3 layers
o UI Layer
o Business Layer
o Database Layer
-
Application
will run in tiers
o Database Tier
o Application Tier
o Presentation Tier
-
Front End development is all about designing the UI.
-
In full stack we will learn building UI for 3 types of applications
o Web Application
o Distributed Application
o Mobile Native Application
What we need to learn for developing UI?
-
HTML
-
CSS
-
LESS
-
SASS
-
Bootstrap
-
JavaScript
-
jQuery
-
Angular
JS
-
React
-
Ionic
|
Why? |
Description |
|
HTML |
It is a presentation language used for preparing presentation
for web, distributed and mobile. |
|
CSS |
It makes the presentation more attractive,
interactive and responsive. |
|
LESS |
It is a CSS pre-processor. Make your CSS better,
simplified, reusable, and compact. |
|
SASS |
It is also a CSS pre-processor. Make your CSS
better, simplified, reusable, and compact. |
|
JavaScript |
To reduce burden on server. It manages several interactions client-side. Security Issues, Blocked by Browsers JavaScript is language used client-side,
server-side, database. |
|
jQuery |
It is a JavaScript library. Write less and do more. It contains set of pre-defined functions. Functions are build with JavaScript. |
|
Angular JS |
It is a Front-end Framework. It can build and control the application flow. Google |
|
React |
It is a JavaScript library. It is used with front-end framework like Cordova,
Ionic, NativeScript. Facebook More work is on UI |
|
Ionic |
Framework for building cross platform mobile
application with React or Angular. |
Front End Web Development
- How to Install Node JS on your computer?
-
We
are installing node.js for “Package Manager”.
-
Package
Manager is a software tool used to install various libraries required for your
development.
-
Library
like bootstrap, jQuery, Angular JS etc.
-
There
are several package managers like: yarn, npm, NuGet, bower, RubyGems
-
We
are installing Node JS for “npm”.
-
You
can download from official node.js website
https://nodejs.org/en/download/
-
Install
on your PC
-
Test
its version from command prompt.
C:\> node -v
C:\> npm -v [Node Package
Manager]
How to Download
and Install Visual Studio Code (Code Editor)?
-
It
is an IDE [Integrated Development Environment]
-
It
provides an environment from where you can build, debug, test and deploy
applications.
-
We
will use “Visual Studio Code”
-
Open
Source
-
Cross
Platform
-
Free
-
Lot
of plugin for developers
-
Microsoft
-
Java,
.NET, PHP, Python etc.
https://code.visualstudio.com/
Creating a Project for Front End Development:
-
Open
your File Explorer
-
Create
a new folder for project in any location
“C:\FullStackWeb”
-
Open
in Visual Studio Code
o
Go
to File Menu à Open Folder à C:\FullStackWeb
-
Your
project is ready to use HTML, CSS and JavaScript.
How to
install library for various languages and technologies?
-
HTML,
CSS, JavaScript doesn’t require any library to install on your PC.
-
You
can start developing directly. Every OS have support for HTML, CSS and
JavaScript if it is installed with any browser like: IE, Chrome, Firefox,
Safari, Edge etc.
-
Package
Manager is required for various libraries like jQuery, Angular JS, React etc.
-
Open “Terminal” in Visual Studio Code
o Terminal Menu -> New Terminal
[Ctrl + `]
C:\FullStackWeb> npm install
packageName
C:\FullStackWeb> npm install jquery/bootstrap/angular/mongodb
Web Application
-
What
is a network?
o
It
is a group of computers connecting with each other for sharing of information
and resources.
o
ARPANET [Advanced
Research Projects Agency Network] is the first computer network
introduced in 1960’s by US-DOD.
-
What
are types of networks?
o
LAN
o
MAN
o
WAN
-
What
is internet?
o
It
is a Wide Area Network connecting computers across the globe.
o
International
Network
-
What
is Web?
o
1990’s
“Tim Berners Lee” introduced “Web”.
o
Web
is a portion of Internet with restricted access.
-
Who
maintains the standards of Web?
o
W3C
o
WHATWG
-
Web
Terminology
Web Server
-
Web
server resembles both software and hardware.
-
It
is responsible for managing requests from client and send a customized response
to every client request.
-
Web
Server is the location where we host our website and application, we debug, we
test, and deploy.
-
The
popular web server tools you can use on your computer
o Apache tomcat
o IIS [Internet Information Services]
o
NGINX
o
Node.js
o Lighttpd etc.
Windows OS – Internet Information Services Manager [IIS] Web Server
-
Look for IIS on your Windows PC
o Open windows control panel
o Switch to “Large Icons”
o Go to “Administrative Tools”
o Look for IIS [Internet Information
Services Manager]
-
You can add IIS to your windows PC
o Open Control Panel
o Go to “Programs and Features”
o Click on “Turn Windows Features ON or
OFF”
o Select “Internet Information
Services” from list
o Click OK
-
Test the webserver
o Open any browser: Chrome, IE, Edge
etc.
o Type the following URL in address bar
http://localhost
-
Setup Live Server [local] from your Visual Studio Code
o Open VS Code
o Go to “Extensions”
o Search for “Live Server”
o Install for your VS Code.
Web Site
-
Web
site is a virtual directory on Web Server.
-
Site
refers to location on server.
-
Location
on any computing device is actually Drive and directory reference.
Creating
a new Website Locally:
-
Open
your web server “IIS” [Run-> inetmgr]
-
Expand
“local computer”
-
Expand
“Sites” folder
-
Right
Click on “Default Website”
-
Select
“Add Virtual Directory” [Adding a website]
-
http://localhost/fullstackweb
-
Go
to physical path
-
Add
“Images” folder
-
Keep
any image in folder
-
Now
try access from browser
http://localhost/fullstackweb/images/yourpic.jpg
\ - back slash – for
physical path
/ - forward slash –
for virtual path
Web Page
-
It
is a hypertext document that provides an UI for your website, so that users can
interact with the resources in website.
-
The
term “hyper” refers to a Greek term, which means “beyond”.
-
Hypertext
document is a special type of document used in network for presentation.
-
It
comprises of content to display and also the content beyond the display.
-
The
UI for website is designed by using Web Pages.
-
The
web pages are classified into 2 types
o Static Page
o Dynamic Page
Static web page:
-
The
term static refers to static memory.
-
Static
is continuous memory. [Connected in access]
-
Memory
allocated for first request will continue for other requests.
-
Static
occupies more memory.
-
Static
Page contains same information to display across multiple requests.
-
Static
Page have the extension
o
.htm
o
.html
Dynamic web page:
-
The
term dynamic refers to dynamic memory or non-static memory.
-
Dynamic
is discrete memory. [Disconnected in access]
-
Memory
is newly allocated for every request.
-
Save
the memory.
-
Dynamic
page contains same content to display initially for every request but it can
change and customize the response according to the request.
-
It
generates a response customized for every client request.
-
Dynamic
page has extension
o .jsp
o .php
o .asp
o .aspx etc
-
To design UI for static and dynamic page you need HTML.
What is difference between a Website and Web Application?
-
Website
comprises all static content.
-
Web
Application comprises of both static and dynamic content.
What is a blog?
-
Web-log
[Blog]
-
Blogs
are like journals on internet.
-
Blogging
is Free
Ex: blogger.com
-
Video
Logs are trending [Vlog]
Ex: YouTube Channels are Vlog [Blog]
What is a Wiki?
-
The
term Wiki mean “Quick”
-
Wiki
allows any user to edit its content.
Ex:
WikiPedi [Quick Reference for Encyclopaedia]
IMDB
Google Maps
What is Podcasting?
-
Podcasting
allows to upload media (Audio/Video) content on to server and broad cast onto
any device connected in network.
Ex: YouTube, iTunes, Windows Media Player
iPOD
What is Widget?
-
It
is gadget for your website or application.
-
It
is an application running in your site or application.
-
jQuery
is very popular for designing widgets.