[Frontend in Web Applications - Week 8 Explained]
🔎 Introduction (Simple and Clear)
Frontend ka matlab hota hai “jo user ko dikh raha hai”. Jab hum kisi web
application ya website ko use karte hain, to jo interface hum dekhte hain -
jaise buttons, forms, pages - woh sab frontend ke part hain. Ye browser me
dikhta hai aur HTML, CSS, aur JavaScript se banaya jaata hai.
Is Week 8 ka main focus hai frontend ke mechanism, performance, client-
side programming aur security ke implications samajhna.
🎓 Core Concepts: Step-by-Step Explanation
1. What is Frontend?
User-facing interface: Jo user directly dekhta hai.
Ho sakta hai:
Desktop application
Web browser
Embedded devices
2. Web Applications = HTML + CSS + JavaScript
HTML: kya dikhana hai
CSS: kaise dikhana hai
JS (JavaScript): interactive experience ke liye
3. Frontend Banane ke Tarike (Mechanisms)
a. Static Pages
Pre-built hote hain (compile kar ke rakhte hain)
Bahut fast
Example tools: Jekyll, Hugo, Next.js
Problem: runtime info (user login, time) dikhana mushkil
b. Runtime HTML Generation (Server-side rendering)
Server par HTML create hoti hai jab user request karta hai
Example: Flask, Django, WordPress
Pros:
Personalization easy
Dynamic data dikhana easy
Cons:
Server load zyada
Thoda slow ho sakta hai
c. Client-Side Scripting (JS se page update)
JS ke zariye user ke browser me hi content update hota hai
Server par load kam
Better interactivity
Performance Considerations
Static Pages: 10,000-20,000 requests/sec (very fast)
Dynamic Pages: ~100 requests/sec
Conclusion: Static fast hoti hai, lekin dynamic flexible hoti hai
⌚ Asynchronous Updates (AJAX etc.)
Purana Web: Har update ke liye puri page reload
Modern Approach:
Sirf ek hissa update karo (div tag etc.)
Page ke background me data fetch karo
User experience fast ho jaata hai
Example: User ne animal select kiya, sirf animal ka detail update karo.
🔠 DOM (Document Object Model)
HTML ka tree-structure representation
JavaScript DOM ko manipulate karta hai
Example: document.getElementById(“btn”)
✨ Component Building with JS
Programming concepts (loops, objects, inheritance) se DOM manipulate
Reusable components bante hain (React, Angular jaise frameworks me)
📄 Browser and Clients
Browser ka kaam:
HTML render karna
Cookies handle karna
JS run karna
Browsers ke JS engines:
Chrome: V8
Firefox: SpiderMonkey
🧰 Client-side Computation
1. Form Validation
JavaScript + HTML5 ka use karke inputs check kar sakte hain
Example: Required fields, email format
Lekin: Server-side validation zaroori hai (client ko trust nahi kar sakte)
HTML5 Attributes: required, minlength, maxlength, type, pattern
2. Captcha
Bot se bachne ke liye
Example: “I am not a robot” checkbox
3. JS Power
GPU use kar sakta hai
Crypto mining jaise kaam bhi ho sakte hain browser me
🔒 Security Implications
1. Sandboxing
JS ko ek secure box me chalana
File system, local storage etc. access nahi milta by default
2. Denial of Service (DoS)
Malicious script browser ya server ko slow kar sakti hai
3. Access to Native Resources
Modern browser allow karta hai native access (camera, file, SMS)
Lekin permission lena padta hai
🔹 Summary
Frontend = user-facing part
Tools = HTML + CSS + JS
Approaches:
Static (fast)
Server-rendered (flexible)
Client-rendered (dynamic)
JS se DOM manipulate hota hai
Asynchronous updates UX improve karte hain
Validation client aur server dono pe karo
JS powerful bhi hai, risky bhi
📚 Simple Example Program
<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
<title>Animal Info</title>
<script>
function showAnimalInfo() {
const animal = document.getElementById("animal").value;
const infoDiv = document.getElementById("info");
if (animal === "dog") {
infoDiv.innerHTML = "Dogs are loyal.";
} else if (animal === "cat") {
infoDiv.innerHTML = "Cats are independent.";
} else {
infoDiv.innerHTML = "Select an animal.";
}
}
</script>
</head>
<body>
<h2>Select an animal:</h2>
<select id="animal" onchange="showAnimalInfo()">
<option value="">--Choose--</option>
<option value="dog">Dog</option>
<option value="cat">Cat</option>
</select>
<div id="info" style="margin-top:20px;"></div>
</body>
</html>
Explanation:
Dropdown se animal choose karte hain
JavaScript se DOM update hota hai bina puri page reload kiye
Yeh example asynchronous nahi hai, but DOM + JS ka simple illustration hai
[Introduction to Indexing and Full Text Search - Explained in
Hinglish]
🔎 Introduction to Indexing
Indexing ek technique hoti hai jo databases aur search systems ko fast
banati hai.
Jab aap kisi book ka index dekhte ho (jaise glossary ya back index), to aapko
pata chalta hai ki koi specific word ya topic kis page par milega.
Waisa hi concept computers me hota hai, bas yahaan data records aur
columns/fields ka index banate hain, taaki search super fast ho jaye.
📊 Why Indexing is Needed?
Bina index ke agar 10 lakh records hain, to database ko har row check karni
padegi (full scan)
Index hone par sirf relevant rows scan hoti hain
Jaise book ke har page ko padhne ke bajaye seedha page number mil jaata
hai
🔍 Types of Indexing (Relational DB ke liye)
1. Single-column Index
Ek hi column ke liye index hota hai
Example: “name”, “email”
2. Composite Index
Multiple columns ka ek saath index
Example: (first_name, last_name)
3. Unique Index
Duplicate values allow nahi karta (jaise email, username)
4. Full Text Index (important for FTS)
Text search ke liye use hota hai (long paragraphs, articles etc.)
✨ Simple SQL Index Example
CREATE INDEX idx_name ON users(name);
Ab agar query karein: SELECT * FROM users WHERE name = 'Ravi';
Toh ye index fast result dega
📚 Introduction to FTS (Full Text Search)
Jab aapko kisi document, article, ya paragraph me kuch word ya phrase
search karni hoti hai — toh Full Text Search (FTS) use kiya jaata hai.
Example: Google Search, blog search, YouTube comments search — sab FTS
ke use cases hain.
📅 How FTS Works?
Data ko tokenize kiya jaata hai (har word ko alag treat karte hain)
Ek inverted index banta hai:
Word -> kaha kaha appear hua hai (document ID, position)
Jab user kuch search karta hai:
FTS engine match karta hai words aur ranking apply karta hai
⚖️Relational DBs and FTS
SQLite aur MySQL jaise databases in-built FTS support karte hain
Example: SQLite FTS5, MySQL FULLTEXT
SQLite FTS Table Create Example:
CREATE VIRTUAL TABLE articles USING fts5(title, content);
Search Query:
SELECT * FROM articles WHERE content MATCH 'python';
🧪 Advantages of FTS
Large text fields me bhi fast search
Natural language queries support karte hain
Ranking and relevance milta hai
📈 FTS vs LIKE
Feature LIKE FTS
Speed Slow on large text Fast with index
Search Type Exact/Partial match Token-based match
Ranking Nahi karta Yes, based on score
Index Use Basic Inverted Index
✨ Conclusion
Indexing se queries fast hoti hain
FTS large text search ke liye powerful tool hai
SQL databases me bhi FTS available hai (SQLite FTS5, MySQL FULLTEXT)
