Introduction to Web App Technologies

Web Engineering
Lecture 1

Dr. Tauseef Iftikhar

Government College University

1 / 22
Today’s Agenda

Web App Technologies

2 / 22
Introduction to Web App Technologies
▶ Web applications are a cornerstone of the internet.
▶ They provide interactive and dynamic experiences to users.
▶ Understanding different technologies involved can be
overwhelming for beginners.
▶ This lecture provides an overview of web application
technologies and their roles.

3 / 22
Web Technologies
▶ Frontend Technologies
▶ Backend Technologies
▶ Web Server
▶ Version Control
▶ Deployment

4 / 22
Frontend Technologies
▶ The frontend (client-side) is what users interact with directly.
▶ Includes visual layout, design, and interactivity.

5 / 22
HTML - The Structure
▶ Defines the structure and content of a web page.
▶ Uses elements and tags.
Example:
<h1>H e l l o , World !</h1>
creates a heading.

6 / 22
CSS -Styling the Web
▶ Used to style and layout web pages.
▶ Controls colors, fonts, and spacing.
Example:
h1 { c o l o r : b l u e ; }
styles the heading in blue.

7 / 22
JavaScript - Adding Interactivity
▶ Enables interactive features like form validation and
animations.
Example:
document . g e t E l e m e n t B y I d ( ’ b u t t o n ’ ) .
addEventListener ( ’ click ’ , function (){
a l e r t ( ’ Button c l i c k e d ! ’ ) ;
});

8 / 22
Frontend Frameworks & Libraries
Tools that streamline frontend development:
▶ React: Library for building user interfaces.
▶ Angular: TypeScript-based framework for SPAs.
▶ Vue.js: Progressive JavaScript framework for UI/SPA
development.

9 / 22
Backend Technologies
▶ The backend (server-side) handles data processing, storage,
and content serving.

10 / 22
Server-Side Languages
Used to write backend logic:
▶ Node.js: JavaScript runtime.
▶ Python: Used with Django & Flask.
▶ Ruby: Used with Ruby on Rails.
▶ PHP: Popular for web development.

11 / 22
Databases
Systems for storing and managing data:
▶ SQL Databases: MySQL, PostgreSQL, SQLite.
▶ NoSQL Databases: MongoDB, CouchDB.

12 / 22
Web Servers
Software that handles requests and serves web pages:
▶ Apache: Open-source web server.
▶ Nginx: High-performance web server.

13 / 22
Backend Frameworks
Structured frameworks for building backend systems:
▶ Express.js: Minimal Node.js framework.
▶ Django: High-level Python framework.
▶ Ruby on Rails: Framework for Ruby.

14 / 22
APIs - Connecting the Web
▶ APIs allow communication between applications.
▶ REST APIs: Use HTTP requests for communication.
▶ GraphQL: Enables precise data fetching.
Example:
{
u s e r ( i d : ”1”) {
name
email
}
}

15 / 22
Version Control
Helps manage source code changes and collaboration.
Git: Distributed version control system.
GitHub: Web-based Git repository platform.

16 / 22
DevOps & Deployment
These are the approaches that are used to integrate the code
changes into a shared repository (Continuous Integration) while
automating the testing and deployment process to the staging and
production environment (Continuous Delivery).
▶ Ensures efficient testing, deployment, and monitoring.
▶ Continuous Integration/Deployment (CI/CD)
▶ Automates code integration, testing, and deployment.
Jenkins: Open-source automation server.
GitLab CI/CD : Built-in GitLab CI/CD tool.

17 / 22
Containerization
▶ Encapsulates applications and dependencies for consistency.
Docker: Docker is a software platform that is used in the
process of software development by providing
special functionalities such as building, testing,
and deploying software applications. Docker’s
libraries, system tools, code, and runtime are
stored in standard units called containers. The
software that hosts the container is known as
Docker Engine. It offers both free and premium
services that completely depend on the use case.
To use the resources efficiently, Docker uses
OS-level virtualization. The application and its
dependencies can be packaged into a portable
format that can run on any system that supports
Docker.

18 / 22
Cloud Services
Cloud technologies play a crucial role in web application
development by providing a scalable, flexible infrastructure that
allows developers to build and deploy applications without
managing the underlying hardware, enabling faster development
cycles, cost-efficiency, and global accessibility by offering
on-demand computing power, storage, and databases through the
internet, allowing applications to scale seamlessly based on user
demand.
AWS: Cloud services by Amazon.
Azure: Microsoft’s cloud platform.
Google Cloud Platform (GCP): Google’s cloud suite.

19 / 22
Cloud Services
Key benefits of using cloud technologies in web development:
▶ Scalability: Easily scale applications up or down depending on
traffic fluctuations, allowing for efficient resource allocation
and cost optimization.
▶ Cost-efficiency: Pay only for the resources you use, eliminating
the need for large upfront investments in hardware.
▶ Flexibility: Access computing power and storage on demand,
adapting to changing project needs quickly.
▶ Rapid deployment: Deploy applications faster with
pre-configured cloud environments and automated deployment
tools. Global accessibility: Access applications from anywhere
with an internet connection, enabling global reach.
▶ High availability: Cloud providers offer redundancy and
disaster recovery options to ensure application uptime.

20 / 22
Cloud Services
Common cloud services used in web development:
▶ Infrastructure as a Service (IaaS): Provides virtual servers,
storage, and networking infrastructure to build custom
environments.
▶ Platform as a Service (PaaS): Offers a development platform
with pre-configured tools and services, allowing developers to
focus on application logic.
▶ Software as a Service (SaaS): Provides fully managed
applications accessible through a web browser, eliminating the
need for local installation.

21 / 22
Conclusion
▶ Understanding web technologies is essential for web
development.
▶ Key components: frontend, backend, APIs, version control,
deployment.
▶ Continuous learning and hands-on experience are crucial for
mastery.

22 / 22