UNIT I BASICS OF FULL STACK
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
Introduction
•Full stack development is the process of designing, creating,
testing and deploying a web application from start to finish.
•It involves working with various technologies and tools,
including front-end web development, back-end web
development and database development.
Introduction
❖ Full stack developers are responsible for the entire web application
development process and must have a strong understanding of all the
technologies and tools involved.
❖ Their job description might include:
▪ Developing and maintaining web services and interfaces
▪ Contributing to front-end and back-end development processes
▪ Building new product features or APIs
▪ Performing tests, troubleshooting software and fixing bugs
▪ Collaborating with other departments on projects and sprints
Understanding the Basic Web Development Framework
•Full stack development encompasses the complete process of
application software development, including both the front-end
and back-end development. The front end consists of the user
interface (or UI) and the back end handles the business logic and
application workflows that run behind the scenes.
•Full stack developers possess the skills and knowledge to work
across the entire technology stack, enabling seamless user
experiences and developing robust backends.
The front end: Crafting engaging user interfaces
• The front end is the face of a web application, the part that users interact
with directly.
• The front-end technologies, including HTML, CSS and JavaScript.
The back end: Powering the application's core
• Full stack developers are proficient in server-side languages such as
Python, Ruby, PHP and JavaScript, allowing them to build robust and
scalable back-end systems.
• It handling data management and ensuring smooth integration with
databases like MySQL, MongoDB or PostgreSQL.
Full stack development in an end-to-end workflow
• Frontend vs. Backend:
• Frontend: user interacts with directly in the web browser, including
HTML, CSS and JavaScript.
• Backend: the server-side components that handle business logic, database
interactions and server configurations.
• Client-Server Model:
• Client: The web browser that requests resources.
• Server: The system that provides resources and handles business logic.
•Static vs. Dynamic Websites:
•Static Websites: Serve the same content to every visitor.
•Dynamic Websites: Serve personalized content based on user
interactions or data.
•APIs (Application Programming Interfaces):
•Interfaces that allow different software applications to
communicate with each other.
In full-stack development, the flow from a user interacting with a web
application involves several key components:
1. User: The person who interacts with the application, typically using
a browser or mobile device.
2. Browser: The web browser on the user's device that sends requests
to the web server. It renders the user interface and handles
interactions like form submissions or clicks.
3. Webserver: The server that receives the requests from the browser.
It handles routing and serves static files (like HTML, CSS, and
JavaScript). It also manages communication with backend services.
4. Backend Services: These are the server-side applications that
process business logic, manage data, and handle complex
operations. They often interact with databases and other external
services to fulfill the user's request.
MVC Architecture
• MVC (Model-View-Controller) is a design pattern commonly used in
software development to separate the concerns of an application into
three interconnected components.
• This separation enhances modularity, makes the application easier to
manage, and improves maintainability.
Components of
MVC
The MVC framework
includes the following
3 components:
1. Controller
2. Model
3. View
1. Model
•Purpose: The Model component represents the application's data
and business logic. It is responsible for retrieving data from the
database, processing it, and updating the view accordingly.
•Responsibilities:
• Manage the data and business rules.
• Perform CRUD (Create, Read, Update, Delete) operations.
• Notify the view of changes to the data.
2. View
• Purpose: The View component handles the presentation of the data. It
displays the data provided by the Model and renders the user interface
elements.
• Responsibilities:
• Render(extract) data to the user.
• Provide the visual layout and user interface components.
• Reflect changes in the Model through the user interface.
3. Controller
• Purpose: The Controller acts as an intermediary between the Model and the
View. It processes user input, interacts with the Model, and updates the
View based on user actions.
• Responsibilities:
• Handle user input and interactions.
• Update the Model based on input.
• Retrieve data from the Model and pass it to the View.
How MVC Works Together
• User Interaction: Users interact with the View (e.g., by filling out a form
or clicking a button).
• Controller: The Controller processes these inputs, communicates with the
Model to retrieve or update data, and then updates the View accordingly.
• Model: The Model performs the necessary business logic and data
manipulations, reflecting any changes.
• View Update: The View updates the user interface to reflect any changes
in the Model, providing feedback to the user.
Understanding the Node.js-to-Angular Stack
Components
Best—version
Node.js-to-Angular stack comprised of
• MongoDB,
• Express,
• Angular, and
• Node.js.
Node.js
• Node.js is a development framework based on Google’s
V8 JavaScript engine.(V8 is Google's open source high-performance
JavaScript and WebAssembly engine, written in C++)
• Node.js code is written in JavaScript and then compiled
into machine code by V8 to be executed.
• Many of your backend services can be written in
Node.js, as can the server-side scripts and any
supporting web application functionality.
Advantages of Node.JS
• JavaScript, so you can easily take functionality from a client-side
script and place it in a server-side script.
• Web server can run directly within the Node.js platform as a Node.js
module
• Apache at wiring up new services or server-side scripts.
Node.js is a great framework
JavaScript end-to-end : allows you to write both server- and client-side scripts
in JavaScript.
Event-driven scalability:Node.js applies a different logic to handling web
requests. Rather than having multiple threads waiting to process web
requests, they are processed on the same thread using a basic event model
Extensibility : New modules to extend Node.js functionality are being
developed all the time
Time: super easy to set up and develop in. In only a few minutes, you can
install Node.js and have a working web server.
MongoDB
• MongoDB is an agile and scalable NoSQL database.
• The name Mongo comes from “humongous.”
• Mongo is a document database
• It is based on the NoSQL document store model, meaning that
data is stored in the database as a form of JSON objects rather
than the traditional columns and rows of a relational database.
• MongoDB provides great website backend storage for high
traffic websites that need to store data such as user comments,
blogs, or other items because it is fast, scalable, and easy to
implement.
MongoDB really fits in the Node.js stack ???
• Document orientation: MongoDB is document-oriented, the
data is stored in the database in a format close to what you will
be dealing with in both server-side and client side scripts. This
eliminates the need to transfer data from rows to objects and
back.
• High performance: MongoDB is one of the highest performing
databases available.
• High availability: MongoDB’s replication model makes it easy to
maintain scalability while keeping high performance.
MongoDB really fits in the Node.js stack ???
• High scalability: MongoDB’s structure makes it easy
to scale horizontally by sharing the data across
multiple servers.
• No SQL injection: MongoDB is not susceptible to
SQL injection (putting SQL statements in web forms
or other input from the browser that compromises
the DB security) because objects are stored as
objects, not using SQL strings.
Express
• The Express module acts as the webserver in the
Node.js-to-Angular stack.
• The fact that it is running in Node.js makes it easy to
configure, implement, and control.
• The Express module extends Node.js to provide several key
components for handling web requests.
• This allows you to implement a running web server in Node.js
with only a few lines of code.
Example:
• Express module provides the ability to easily set up destination
routes (URLs) for users to connect to.
• It also provides great functionality on working with the HTTP
request and response objects, including things like cookies and HTTP
headers
Partial list of the valuable features of Express
■ Route management: Express makes it easy to define routes (URL
endpoints) that tie directly to Node.js script functionality on the
server.
■ Error handling: Express provides built-in error handling for
documents not found and other errors.
■ Easy integration: An Express server can easily be implemented
behind an existing reverse proxy system such as Nginx or Varnish.
This allows it to be easily integrated into your existing secured
system.
Features Continued….
■ Cookies: Express provides easy cookie management.
■ Session and cache management: Express also enables session
management and cache
management.
Angular
• Angular is a client-side framework developed by Google.
• Angular provides all the functionality needed to handle user input in
the browser, manipulate data on the client side, and control how
elements are displayed in the browser view.
• It is written using TypeScript. The entire theory behind Angular is to
provide a framework that makes it easy to implement web
applications using the MVC framework.
Others
Other JavaScript frameworks could be used with the Node.js
platform, such as
• Backbone,
• Ember,
• and Meteor
Benefits of Angular:
■ Data binding: Angular has a clean method to bind data to HTML
elements using its powerful scope mechanism.
■ Extensibility: The Angular architecture allows you to easily extend
almost every aspect of the language to provide your
own custom implementations.
■ Clean: Angular forces you to write clean, logical code.
Benefits of Angular:
• Reusable code: The combination of extensibility and clean code
makes it easy to write reusable code in Angular.
• Support: Google is investing a lot into this project, which gives it
an advantage over other similar initiatives.
• Compatibility: Angular is based on TypeScript, which makes it
easier to begin integrating Angular into your environment and to
reuse pieces of your existing code within the structure of the
Angular framework.
Understanding the different stacks
• In full-stack development, the term "stack" refers to the combination
of technologies used to build both the frontend (client-side) and
backend (server-side) of an application. Understanding the different
stacks helps in choosing the right technologies based on project
requirements.
Here’s a look at some popular full-stack technologies:
1. MEAN Stack
• MongoDB: NoSQL database used for storing data in a flexible, JSON-like
format.
• Express.js: Web application framework for Node.js, used to build the
backend of the application.
• Angular: Frontend framework developed by Google for building dynamic
single-page applications.
• Node.js: JavaScript runtime built on Chrome’s V8 engine, used to execute
JavaScript code on the server-side.
Together, these technologies provide a complete solution for developing
modern, JavaScript-based web applications, enabling both client-side and
server-side development using JavaScript.
2. MERN Stack
• MongoDB: NoSQL database.
• Express.js: Web application framework.
• React: Frontend library developed by Facebook for building user
interfaces, especially single-page applications.
• Node.js: JavaScript runtime.
• 3. LAMP Stack
• Linux: Operating system.
• Apache: Web server software.
• MySQL: Relational database management system.
• PHP: Server-side scripting language.
• 4. LEP Stack
• Linux: Operating system.
• Nginx: Web server and reverse proxy server, often used instead of Apache for better
performance.
• PostgreSQL: Advanced relational database system.
• PHP: Server-side scripting language.
• 5. Django Stack
• Python: Programming language.
• Django: High-level Python web framework that encourages rapid
development and clean, pragmatic design.
• PostgreSQL: Database management system often used with Django.
• HTML/CSS/JavaScript: Frontend technologies.
• 6. Ruby on Rails Stack
• Ruby: Programming language.
• Ruby on Rails: Web application framework written in Ruby, known for its
convention over configuration approach.
• PostgreSQL/MySQL: Database options.
• HTML/CSS/JavaScript: Frontend technologies.
• 7. JAMstack
• JavaScript: Programming language for dynamic functionality.
• APIs: External services or backend APIs for data and authentication.
• Markup: Static site generators like Jekyll or Hugo for generating the site’s static
content.
• 8. Serverless Stack
• Cloud Providers: AWS Lambda, Azure Functions, Google Cloud Functions for
executing code without managing servers.
• Frontend Technologies: Can use frameworks like React, Angular, or Vue.js.
• APIs: Managed services or serverless functions handle backend logic and data.
