FULL STACK WEB DEVELOPMENT

TECHNOLOGY
COLLEGE OF TECHNOLOGY
SPA -MPA -PWA
• SPA - single-page application is an app that doesn’t
need to reload the page during its use and works
within a browser. Ex: Facebook, Google Maps, Gmail,
Twitter, Google Drive, or even GitHub.

• MPA - multi-page application (a traditional app that

loads new pages when you click a link)

• PWA - progressive web application (a website that is

built using JavaScript or its frameworks and can act
like an app, i.e., you can, for example, add it to your
mobile phone homepage as an app)
Web Building Blocks
Sass is a CSS pre-processor.

Sass reduces repetition of CSS and therefore saves

time.

• Sass is an extension to CSS

• Sass is a CSS pre-processor

• Sass is completely compatible with all versions of CSS

• Sass reduces repetition of CSS and therefore saves time

• Sass was designed by Hampton Catlin and developed by

Natalie Weizenbaum in 2006

• Sass is free to download and use

• A module bundler is a tool that takes pieces of JavaScript
and their dependencies and bundles them into a single file,
usually for use in the browser. You may have used tools
such as Browserify, Webpack, Rollup or one of many others
NODE PACKAGE
MANAGER
• npm is the world's largest software registry. Open source developers from every continent
use npm to share and borrow packages, and many organizations use npm to manage
private development as well.

• npm consists of three distinct components:

• the website

• the Command Line Interface (CLI)

• the registry

• Use the website to discover packages, set up profiles, and manage other aspects of your
npm experience. For example, you can set up organizations to manage access to public or
private packages.

• The CLI runs from a terminal, and is how most developers interact with npm.

• The registry is a large public database of JavaScript software and the meta-information
surrounding it.
• A framework is a supporting structure around which something can
be built

• A framework is often a layered structure indicating what kind of

programs can or should be built and how they would interrelate.

• A library usually focuses on a narrow scope. It provides a set of

helper functions, methods, etc which you can call in your project to
achieve specific functionality. It’s basically a collection of class
definitions that is written mainly to promote code reuse
Library vs. Framework

•
• the difficult part of architecting apps is making sure
data flows and is refreshed in the UI in a consistent
way. This process is called state management
REACT
• A JavaScript library for building user interfaces

• Declarative, Component-Based, Learn Once - Write Anywhere

• One of the simplest open source library (Not a framework) focused

on UI with a rich ecosystem

• React was developed at Facebook to fix code maintainability issues

due to the constant addition of features in the app.

• React stands out because of its virtual Document Object Model

(DOM), which offers its exceptional functionality.

• An ideal tool for those who anticipate high traffic and need a stable
platform to handle it.
PROS AND CONS
When to use React:

• React is used for building the user interface, especially when you want
to develop single-page applications.

• It is the most robust frontend framework when you want to develop an

interactive interface with less time since you can reuse the
components.

When not to use React:

• When you don’t have hands-on experience with Javascript, React isn’t
the recommended option.

• For inexperienced developers, the JSX learning curve is a bit tough.

JSX
• Creating a component in React with Conventional HTML
and CSS

• Creating the same component with JSX through the

conventional React.createElement
VUE.JS
• One of the most popular front-end frameworks nowadays, Vue is a
simple and straightforward framework.
• It is good at removing the complexities that Angular developers face. It
is smaller in size and offers two major advantages
• visual DOM and component-based.
• From building web applications and mobile apps to progressive web
applications,
• it can handle both simple and dynamic processes with ease.
Ways to Implement
Vue.Js
Rendering Data to the
DOM using Interpolation
ANGULAR
• Angular was developed by Google and officially launched in 2016 to bridge the
gap between the increasing demands of technology and conventional concepts
that showed results.

• Unlike React, Angular is unique with its two-way data binding feature. It means
there is a real-time synchronization between the model and the view,
where any change in the model reflects instantly on the view and vice versa.

• If your project involves building mobile or web apps, Angular is perfect!

Besides, you can also use this framework to develop multi-page as well as
progressive web apps (websites that look and feel like an app. This means
users can access all information and capabilities without downloading a mobile
app.)

• Compared to React, Angular is not easy to learn. Though there is innumerable

documentation available, they are either too complex or confusing to read
PROS AND CONS
When to use Angular
• Angular augments the performance of browser-based applications by dynamically
updating the contents in no time since it uses two-way data binding.

• For enterprise based applications and dynamic web apps, using Angular is the best
bet.

When not to use Angular

• Angular is a complete solution as a frontend framework.

• If you want to build applications with limited scopes, you will not be able to use the
resources that Angular provides.

• Also, when you have a more minor size team, opt for a smaller framework with
fewer complexities and simple syntax.
PREREQUISITES FOR
ANGULAR
MVC
BACKEND
• Object Relational Mapper/ Object Document Mapper
CRUD and REST
• two prominent concepts in the API industry, are often confused. Whereas
REST is one of the most popular design styles for web APIs (among other
applications), CRUD is simply an acronym used to refer to four basic
operations that can be performed on database applications: Create, Read,
Update, and Delete.

• On the other hand, Representational State Transfer — or REST — is a

popular architectural style for software, especially web APIs

• Create, Read, Update, and Delete — or CRUD — are the four major
functions used to interact with database applications. The acronym is
popular among programmers, as it provides a quick reminder of what data
manipulation functions are needed for an application to feel complete.
• The five basic constraints that define a REST application are:
1. Client-Server: The client and server act independently.

2. Stateless: The server does not record the state of the client.

3. Cacheable: The server marks whether data is cacheable.

4. Uniform Interface: The client and server interact in a uniform and predictable way. An
important aspect of this is that the server exposes resources.

5. Layered System: The application behaves the same regardless of any intermediaries
between the client and server.

• Although there are numerous definitions for each of the CRUD functions,
the basic idea is that they accomplish the following in a collection of data:
NODE.JS
NODE.JS
Node.js is an open-source,
cross-platform, back-end
JavaScript runtime environment
that runs on the V8 engine and
executes JavaScript code
outside a web browser

As an asynchronous event-
driven JavaScript runtime,
Node.js is designed to build
scalable network applications.
ADVANTAGES
• Node.js is an open-source, cross-platform, back-end JavaScript runtime environment
that runs on the V8 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, 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, unifying web-

application development around a single programming language, rather than different
languages for server-side and client-side scripts.

• Though .js is the standard filename extension for JavaScript code, the name "Node.js"
doesn't 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)
NPM
NODE RUNTIME ENV.
Module creation
MODULE WRAPPER
PATH MODULE
FS MODULE
Read and Rename File
OS MODULE
URL Module
Module creation/Exporting fonction
Synchronous and Asynchronous Calls
Events
Principle
EVENT EMITTER
Class Raising Event
Registering the listener
HTTP MODULE
STARTING A SERVER
npm install -g nodemon
After Importing http, Path and
FS
Serving an API
instead
GENERATE THE FOLLOWING index.html
file WITH ! (FOR EMMET EXTENSION )
Synchronously reading HTML
File
Universal File loader
INCLUDE CSS
Using the ES6 Notation
EXPRESS
• EXPRESS is a Fast, unopinionated, minimalist web framework for Node.js

• Express JS is a small framework that works on top of Node 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 HTTP objects and facilitates the rendering of dynamic HTTP objects.

• Express makes the development of Node application very easy and it is very simple to use. It provides a
simple and efficient way to build web applications and APIs using JavaScript.
CLIENT-SERVER BACK-END
TRANSACTION THROUGH API
Restful API with Express

• GET for getting Data

• POST for Creating Data

• PUT for Modifying Data

• DELETE for Deleting Data

INSTALLING
EXPRESS
npm init -y
BASIC EXPRESS
EXAMPLE Hello World
Bare Node Style

•
RENDERING HTML PAGE
Rendering a static Folder
with the Middle layer (USE)
Multiple Parameters
Multiple Routes

•
API WITH EXPRESS

• CONSTRUCTING A CRUD API with Express

using A JSON LIST
GET ALL
POST -> Create an Instance

Add the MiddleWare

FORM VALIDATION
Create a list for
members and export
MIDDLEWARE
Middleware Implementation with a logger
Export the logger Module in separated File
GET FUNCTION OF THE API
Creation of RESTFUL API with Routers
INDEX.JS
Create a Member
Configure the header for Postman/Thunder Client
Set the body Parser
UPDATE MEMBER
DELETE A MEMBER
Express HandleBars

•
Include bootstrap for styling with template string

main.handlebars
index.handlebars
Rendering Handlebars
Title & Members
The Index.handleBar

•
Redirect to home (‘/’)
Passport could be added for Authentication
Postman
The Collaboration Platform for API Development
FORM VALDATION WITH JOI: npm install
joi
UPDATE
UPDATE
POST MODIFIED
DELETE
MongoDB
• SQL databases are used to store structured data
while NoSQL databases like MongoDB are used
to save unstructured data.

• MongoDB is used to save unstructured data in

JSON format.

• MongoDB does not support advanced analytics

and joins like SQL databases support.
CONNEXION TO DATABASE
WITH MONGOOSE
USING THE DOTENV MODULE with the .env file
Subscriber Router:http:://localhost:3000/subscriber/
REST CLIENT TO INTERACT WITH THE SERVER like Thunder or PostMan
Create a Model in the models folder
IMPLEMENT THE CRUD FUNCTIONALITY
CREATING A NEW SUBSCRIBER
NB: Make sure that the field subscribedTochannel in the model is well spelled
Creating a Middleware to collect the id of
the request to avoid repetitions in the API
updating & Deleting one with the middelware passed through the route
UPDATING ONE Subscriber
RESTIFY

• A Node.js web service

framework optimized for
building semantically correct
RESTful web services ready
for production use at scale.

• restify optimizes for

introspection and
performance, and is used in
some of the largest Node.js
deployments on Earth
Hello World
Initializing a Project with restify
The Config File
The Config File, the IP adress should
match
The Route File
The model
THE GET (ALL ELEMENTS)
CRUD FONCTIONALITIES OF API
Heroku

• Heroku is a cloud platform as a service (PaaS) supporting

several programming languages. One of the first cloud
platforms, Heroku has been in development since June 2007
• It now supports Java, Node.js, Scala, Clojure, Python, PHP,
and Go. For this reason, Heroku is said to be a polyglot
platform as it has features for a developer to build, run and
scale applications in a similar manner across most
languages
GIT & GITHUB
BRANCHES
Merge Branches
Create a Repo in GitHub and Clone
it your Computer
APPLICATION
Node.js Rest API With Restify,
Mongoose, JWT - Part 1 & Part 2

• https://www.youtube.com/watc
h?v=bqn-sx0v-
l0&ab_channel=TraversyMedi
a

• https://www.youtube.com/watc
h?v=oyYOobBuczM&t=13s&a
b_channel=TraversyMedia
Build A REST API With Node.js,
Express, & MongoDB - Quick

• ..
REACT
• React is a JavaScript library
for building user interfaces.

• React is used to build single

page applications.

• React allows us to create

reusable UI components
Add React to a Website
• React has been designed from the start for gradual
adoption, and you can use as little or as much React as you
need. Perhaps you only want to add some “sprinkles of
interactivity” to an existing page. React components are a
great way to do that.

• The majority of websites aren’t, and don’t need to be,

single-page apps. With a few lines of code and no build
tooling, try React in a small part of your website. You can
then either gradually expand its presence, or keep it
contained to a few dynamic widgets.
React Render HTML

The Render Function

The
ReactDOM.render()
function takes two
arguments, HTML
code and an HTML
element.

The purpose of the

function is to display
the specified HTML
code inside the
specified HTML
element.
Standalone React app with create-react-app
Index.js and Index.html
Displaying Variables
Ternary Operator and operations
Return App
as class
(With rafce
ES7
extension in
VsCode)
Create Components
the extension ES7 React/Redux/GraphQL….
Creating
Component
(rafcp)
Embedding the component in
app.js
Styling a component

Inline Styling

Inline Styling with constant

adding a Button inline
Component reusability
nent called Button that is being recalled in several instances throu
Component reusability
Component reusability
with implementation of the button event native
Component reusability
More robust way to implement the button with event as parameter
Component reusability
More robust way to implement the button
Simply loop through a list
UseState theory

A Hook is a special function that lets you “hook into” React features. For exa

If you write a function component and realize you need to add some state to
UseState Implementation
Restructuring it to send the list of
Students at App.js
Event Handling
With UseState and Props propagation
(App.js; List.js and Student.js)
Handling Events: deleteStudent/onDelete
Handling Events: propagating onDelete on the list
Handling Events: propagating onDelete on the list
Event Handling for Check Box
With UseState and Props propagation
(App.js; List.js and Student.js)
App.js
List.js
Student.js
FORMS: Create Component(AddStudent)
AddStudent Component (form Container)
AddStudent Component (form Container)
AddStudent Component (form Container)
Export to Production

npm i json-server
npm run build
npm install -g serve
serve -s build
(serve -s build -l 4000)

After clowning a React Project you need to run:

npm install --save react react-dom react-scripts
npm audit fix --force
useEffect (On virtual backEnd server)
Install JSON Server
npm install -g json-server
Create a db.json file with some data
Start JSON Server
json-server --watch db.json
(Package.json)"server": "json-server --
watch db.json --port 5000"
go to http://localhost:3000/students/1,

Getting data
from db.json
and
updating the
UI

Deleting and
Updating
Adding One Student
Fetching Data
UPDATING A STUDENT
Routing
With npm i react-router-dom
VUE.JS
The
Progressive
JavaScript
Framework
Installation
Vue.js is built by design to be incrementally adoptable. This means that it can
be integrated into a project multiple ways depending on the requirements.

There are four primary ways of adding Vue.js to a project:

• Import it as a CDN package on the page

• Download the JavaScript files and host them yourself

• Install it using npm

• Use the official CLI to scaffold a project, which provides batteries-included

build setups for a modern frontend workflow (e.g., hot-reload, lint-on-save,
and much more
CLI
USING THE CDN
App.js
RANDOM IMAGE GENERATOR
CONTINUE BY
COMPLETING THE VIDEO
SPA with REACT
AngularJS is a JavaScript-based open-source front-end web
framework mainly maintained by Google and by a community of
individuals and corporations to address many of the challenges
encountered in developing single-page applications

AngularJS is a JavaScript framework. It can be added to an HTML

page with a <script> tag.

AngularJS extends HTML attributes with Directives, and binds data to

HTML with Expressions.
First-party libraries
Setting up the local environment and workspace
Introduction to
AngularJS
• AngularJS is an open-source JavaScript framework that is maintained by
Google and a community of web developers to address challenges faced in
forming single web page apps. In 2009, AngularJS was initially developed
by Misko Heavery and had a motive to ease the development and thereby,
the testing process of these applications. AngularJS programming renders
the highest simplifications and improvements to the complete development
approach and constitution of JS coding.

• AngularJS renders the program for model view controller (MVC) and model
view-view model (MVVM) architecture, besides the components that are
usually used in dynamic web technologies. It has gained immense
popularity as is the front end portion of MEAN stack, comprising Express.js
app server structural programs that link dynamic MongoDB databases,
Node.js server runtime environment, and Angular.js itself.
Introduction to Angular
• Angular is a framework that is used for developing single-page applications
using TypeScript and HTML programming languages. Angular is generally
denoted as Angular 2+ or Angular v2 and beyond. Angular2 follows core and
optional functionality as a set of TypeScript libraries and utilizes numerous
features of ECMAScript 6 that you may import to your applications. Its
architecture depends on certain crucial scope and conceptions.

• The basic building blocks in Angular 2 are NgModules, which provide a

compilation structure for components and directive. These modules of
Angular 2 assemble interrelated codes into a well-designed set. In this
approach, the application comprises a root module that authorizes
bootstrapping and characteristically has more feature modules and
improvement. Before understanding Angular vs Angular JS, let us have a look
at what Angular versions are.
Versions of Angular
• Angular 1 is at the centre of the DOM compiler. We can write HTML, and Angular
compiler takes charge of assembling it into an application.

• Angular 2 is based on JavaScript. It is an open source to develop web applications

from scratch in JavaScript and HTML.

• Angular 4 is a JS framework for developing apps in HTML, JavaScript, and

TypeScript, that is a superset of JS.

• From the varied versions of Angular, the release of Angular 6 had the prime focus
on tool chain, making it function promptly with Angular in ng app update, ng add,
Angular Material + CDK Components, Angular CLI (command line interface)
workspaces, animation and validations package, RxJS v6, and Angular Elements.

• The version of Angular 9 is rationalized to work chiefly with TypeScript 3.6 and 3.7.
It has the ability to move all the applications to employ Ivy compiler view engine and
runtime by default.
FLASK

Flask is a micro web framework

written in Python.
It is classified as a microframework
because it does not require
particular tools or libraries.
It has no database abstraction
layer, form validation, or any other
components where pre-existing
third-party libraries provide
common functions
• Flask comes with a fast debugger and inbuilt development server

• It renders you the complete control of choices to develop the

application during the implementation step

• It has HTTP and RESTful request handling

• It comprises two core dependencies – Jinja2 and Werkzeug that offer

sturdy WSGI support and templates

• This framework contains a coherent and neat Application Programming

Interface (API)

• Flask framework has flexible and easy configurations

• It renders an integrated unit testing support

Minimal Application
ROUTING
ESCAPING
ROUTING
Variable Rules
Introducing the API
CRUD with Flask (2021)
• https://www.youtube.com/watch?v=9c5U_CKDz
OA&ab_channel=ProgrammingKnowledge
TEMPLATING
BASE TEMPLATE
USAGE
url_for to make use of file
importation
DJANGO

Django makes it easier to build

better Web apps more quickly
and with less code
• Django is a web framework for Python which
renders a classic technique for effective and fast
website development. In 2003, it was started by
Simon Willison and Adian Holovaty as an in-house
project at Lawrence Journal-World newspaper. It
was publicly released under the BSD license.

• This framework was entitled after guitarist Django

Reinhardt in July 2005. Below mentioned are a
few important features of Django:
• Django delivers utmost security and aids a web developer to evade many general
security mistakes, such as cross-site scripting, SQL injection, and cross-site request
forgery. Here, the user authentication scheme gives a secure way to manage
passwords as well as user accounts.

• It was intended to create a framework that takes less time to develop web
applications. The project implementation stage is very time-consuming, but Django
produces it quickly.

• It includes various helping task modules and libraries which can be used to handle
common Web development tasks. Django takes into account user authentication,
site maps, content administration, and RSS feeds.

• Django is an open-source framework. It is openly available without any cost. It can

be downloaded with the source code from a public repository. Such an open-source
lessens the total budget of any web application development.

• It is a scalable framework and can flexibly and quickly shift from small to large-scale
web application projects.

• It is one of the most prevalent web frameworks. It has an extensive support

community and channels to connect and share.

• This framework is versatile as it permits the creation of applications for different

domains. These days many companies are using Django to form several kinds of
applications namely, social network sites, content management systems, scientific
computing platforms, to name a few.
SUPPORTED VERSIONS
When Installing Django
You’ve got three options to install Django:

• Install an official release. This is the best approach for most users.

• Install a version of Django provided by your operating system distribution.

• Install the latest development version. This option is for enthusiasts who want the
latest-and-greatest features and aren’t afraid of running brand new code. You
might encounter new bugs in the development version, but reporting them helps
the development of Django. Also, releases of third-party packages are less likely
to be compatible with the development version than with the latest stable release.
SOME USEFUL
•
PROJECTS
(Exercice)https://www.youtube.com/watch?v=Z1RJmh_OqeA&ab_channel=freeCodeCa
mp.orgfreeCodeCamp.org

• (Django) https://www.youtube.com/watch?v=ZsJRXS_vrw0&ab_channel=IDGTECHtalk

• (Django Css Dodjo) https://www.youtube.com/watch?v=ovql0Ui3n_I

• (Flask Complete)
https://www.youtube.com/watch?v=9c5U_CKDzOA&ab_channel=ProgrammingKnowled
ge

• (Dev Mountain - Traverse Media

Serie)https://www.youtube.com/watch?v=Uyei2iDA4Hs&list=PLillGF-RfqbbRA-
CIUxlxkUpbq0IFkX60

• (Try
It)https://www.youtube.com/watch?v=yKHJsLUENl0&ab_channel=PythonEngineerPytho
nEngineer

• (Code Basic: Deploy on flask server N#6 and onAmazon EC2 Instance)
https://www.youtube.com/watch?v=rdfbcdP75KI&list=PLeo1K3hjS3uu7clOTtwsp94PcH
bzqpAdg
Flask vs Django: Comparison of
The Best Python Web Frameworks
• Django is termed as a full-stack Python web framework.
Furthermore, it is built based on batteries included. Such a
method in Django makes it simpler for Django developers to
achieve general web development errands like URL routing,
user authentication, and database schema migration.

• On the contrary, Flask is a lightweight, simple, and minimalist

framework. Though it lacks some of the inbuilt traits supplied
by Django, it assists the developers to keep the base of an
application extensible and simple.

• The table here presented will clearly illustrate the difference

between the best Python web frameworks – Flask and Django:
• The discussion about a web page rendering has come to light only in recent years.
Earlier, the websites and web applications had a common strategy to follow. They
prepared HTML content to be sent to the browsers at the server-side; this content was
then rendered as HTML with CSS styling in the browser.

• JavaScript frameworks came in with a completely different approach to web development.

JavaScript frameworks brought in the possibility of shedding burden off the server.

• With the power of JavaScript frameworks, it became possible to render dynamic content
right from the browser by requesting just the content that was required. The server, in this
scenario, only served the base HTML wrapper that was necessary. This transformation
gave a seamless user experience to visitors since there was very little time taken for
loading the web page. Moreover, once loaded, the web page did not reload itself again.

https://dzone.com/articles/client-side-vs-server-side-rendering-what-to-choos
Server-Side Rendering
Server-side rendering or SSR is the conventional way of rendering web
pages on the browser. As discussed above, the traditional way of
rendering dynamic web content follows the below steps:

• The user sends a request to a website (usually via a browser)

• The server checks the resource, compiles and prepares the HTML
content after traversing through server-side scripts lying within the
page.

• This compiled HTML is sent to the client’s browser for further rendering
and display.

• The browser downloads the HTML and makes the site visible to the
end-user

• The browser then downloads the Javascript (JS) and as it executes the
JS, it makes the page interactive
In this process, all the burden of getting the dynamic content,
converting it to HTML, and sending it to the browser is on the server.
Hence, this process is called server-side rendering (SSR).This
responsibility of rendering the complete HTML in advance comes with
a burden on memory and processing power on the server. This
increases the page load time compared to the page load time for a
static site where there is no dynamic content to render.
Client-Side Rendering

Client-side rendering or CSR is a different approach to how the web page is processed for display
in the browser. In the CSR, the burden of compiling dynamic content and generating HTML for
them is transferred to the client's browser.

This approach is powered with JavaScript frameworks and libraries like ReactJS, VueJS, and
Angular. The normal flow of web page rendering for a client-side rendering scenario follows these
steps:

• The user sends a request to a website (usually via a browser).

• Instead of a server, a CDN (Content Delivery Network) can be used to serve static HTML, CSS,
and supporting files to the user.

• The browser downloads the HTML and then the JS. Meanwhile, the user sees a loading symbol.

• After the browser fetches the JS, it makes API requests via AJAX to fetch the dynamic content
and processes it to render the final content.

• After the server responds, the final content is rendered using DOM processing in the client's
browser.
In this process, all the burden of getting the dynamic content,
converting it to HTML, and sending it to the browser is on the server.
Hence, this process is called server-side rendering (SSR).This
responsibility of rendering the complete HTML in advance comes with
a burden on memory and processing power on the server. This
increases the page load time compared to the page load time for a
static site where there is no dynamic content to render.
In the following "hello world"
example, many connections
can be handled
concurrently. Upon each
connection, the callback is
fired, but if there is no work
to be done, Node.js will
sleep.
CONTAINERS
Understanding containers
DOCKER