Home / Past papers / MAD2 End Term / this paper

2023 Dec24: IIT M AN EXAM ADD4 - 24 Dec 2023

MAD2 End Term32 questions100 marks19 MCQ · 13 MSQafternoon

Elapsed 00:00

Q1MSQ2 marksselect all that apply

Which of the following statements is/are false.

SMTP is a mail delivery protocol.
SMTP is a protocol to retrieve email from an email server.
IMAP is a mail delivery protocol.
IMAP is a protocol to retrieve email from an email server.

Q2MSQ2 marksselect all that apply

Which of the following is/are correct regarding CDN.

CDN is an acronym for Content Delivery Network.
CDN is a group of servers that helps in fast delivery of web contents.
Web content is always delivered from the closest server to the client in thenetwork.
None of these.

Q3MSQ2 marksselect all that apply

Which of the following is correct regarding Celery?

Celery is a task queue.
It needs broker to function.
Celery can be used to schedule the task.
None of these.

Q4MSQ2 marksselect all that apply

Which of the following statement(s) is/are true regarding javascript language?

Replit.com is an example of a javascript engine.
The language supports the concept of first class functions.
The language does not allow the implementation of user defined higher orderfunctions.
The language can be used for DOM manipulation.

Q5MSQ2 marksselect all that apply

Which of the following method(s) does not guarantee that the displayed state and system state are kept in sync at all times?

Ajax requests on each UI change
Periodic reloading of web-page
Vue bindings to update data reactively
Pure static pages with all updates rendered from server

Q6MSQ2 marksselect all that apply

You are trying to build a distributed system with N servers, each of which may need to communicate with any of the other servers. Which of the following statement(s) is/are false?

With point-to-point communication, the number of connection links will growas O(n).
With point-to-point communication, the number of connection links will growas O(n2).
With the use of a central message broker, the number of connection links willgrow as O(n).
With the use of a central message broker, the number of connection links willgrow as O(n2).

Q7MSQ2 marksselect all that apply

Which of the following statement(s) is/are false regarding webhooks?

A webhook uses HTTP protocol.
A webhook uses web socket protocol.
A webhook receiver must be deployed on the same origin as the webhookinitiator.
A webhook is supposed to be used for machine to machine communication

Q8MSQ3 marksselect all that apply

Which of the following is correct regarding XSS attacks?

XSS attack is an exploit where an attacker attaches a malicious code into awebsite.
XSS can be used to steal the user's cookie.
XSS is a client side injection attack.
It can be avoided by validating the user's input.

Q9MSQ3 marksselect all that apply

Which of the following is/are valid use(s) of “v-for” directive, assuming “obj” is an object having a number of key value pairs?

v-for = “value in obj”
v-for = “(value, name) in obj”
v-for = “(value, name, index) in obj”
None of these

Q10MSQ3 marksselect all that apply

Text of the picture (copyable)

Suppose an application is loaded from an origin "https://abc.com". Which of the following origins will result in a CORS error, while making a fetch call, by default?

text
```
https://abc.com
```
text
```
https://xyz.abc.com
```
text
```
https://abc.com/page
```
text
```
https://abc8.com
```

Q11MSQ3 marksselect all that apply

Which of the following statement(s) is/are false regarding long and short polling?

A webhook is the same as short polling.
The short polling can be used to know the state of an asynchronous task, andtrigger an action if the task gets completed.
The long polling cannot be achieved using HTTP protocol.
Long Polling can be used to achieve real time communication

Q12MSQ3 marksselect all that apply

Which of the following statement(s) is/are false regarding caching?

It is recommended to cache the social networking apps feed responses for alonger duration.
Caching is primarily done to reduce the load from the origin server.
The shared cache is meant to serve responses to the multiple users.
A browser cannot cache JavaScript corresponding to a web page.

Q13MSQ3 marksselect all that apply

Which of the following statements is true regarding CORS and CSRF?

CORS stands for Cross Origin Resource Sharing.
The CORS reduces chances of malicious code by explicitly saying which URLscan be originators of data.
CSRF stands for Cross Site Request Forgery.
None of these

Q14MCQ2 marks

Which of the following statement(s) is/are true regarding Celery?

A celery system may consist of multiple brokers.
Redis must be used as a message broker for Celery.
The framework does not support periodic scheduling of tasks.
All of these.

Q15MCQ3 marks

Consider the following JavaScript code. question figure

Consider the following JavaScript code.

Text of the picture (copyable)

```javascript
function goUpDown(num) {
  return new Promise((res, rej) => {
    setTimeout(() => {
      if (num < 20) {
        return num > 10 ? res('Go Up') : res('Go Down')
      } else {
        return rej('Number Too Large')
      }
    }, 1000)
  })
}

async function getData() {
  const data3 = await goUpDown(8)
  const data2 = await goUpDown(15)
  const data1 = await goUpDown(12)
}

getData().then(
  (data) => {
    console.log(data)
  },
  (err) => {
    console.log(err)
  }
)
```

What will be logged on to console, if executed?

Go Up
Go Down
Number Too Large
None of these.

Q16MCQ3 marks

Consider the following JavaScript code. question figure

Consider the following JavaScript code. Suppose there is an network error and fetch request to the ‘url’ fails. What will be logged on to console, if the code is executed?

Text of the picture (copyable)

```javascript
async function getResponse(url) {
  try {
    const response = await fetch(url)
    try {
      const data = await response.json()
      if (response.ok) {
        return data
      } else {
        return response.status
      }
    } catch {
      return 'Network Error'
    }
  } catch {
    return 'Response is not json'
  }
}

getResponse('url').then((data) => {
  console.log(data)
})
```

Response is not json
Network Error
200
None of these.

Q17MCQ3 marks

Consider the JavaScript code. question figure

Consider the JavaScript code. Suppose the ‘url’ returns a JSON response with 500 status code. What will be logged on to console?

Text of the picture (copyable)

```javascript
async function getResponse(url) {
  try {
    const response = await fetch(url)
    try {
      const data = await response.json()
      if (response.ok) {
        return data
      } else {
        return response.status
      }
    } catch {
      return 'Network Error'
    }
  } catch {
    return 'Response is not json'
  }
}

getResponse('url').then((data) => {
  console.log(data)
})
```

Response is not json
Network Error
404
500

Q18MCQ3 marks

Consider the following JavaScript code. question figure

Consider the following JavaScript code. What will be logged on to console, if executed?

Text of the picture (copyable)

```javascript
class Tshirt {
  constructor(size, price) {
    this.size = size
    this.price = price
  }
}

class LargeTshirt extends Tshirt {
  constructor() {
    super('large', 500)
  }
}

class MediumTshirt extends Tshirt {
  constructor() {
    super('medium')
  }
}

class Order {
  constructor(item, count) {
    this.item = item
    this.count = count
  }

  totalPrice() {
    try {
      return this.item.price * this.count
    } catch {
      return 'Some Error'
    }
  }
}

const t1 = new MediumTshirt()
const order = new Order(t1, 5)
console.log(order.totalPrice())
```

NaN
500
2500
Some Error

Q19MCQ3 marks

Consider the following Vue application with JavaScript “app.js” and markup “index.html” question figure

Consider the following Vue application with JavaScript “app.js” and markup “index.html”

Text of the picture (copyable)

```javascript
app.js
new Vue({
  el: '#app',
  template: `<div>
    <div v-for="item in items">
      Name: {{item.name}},Count:{{item.count}}, Price:
      {{item.price*item.count}}
      <button @click="inscreeseCount (item)">Increase Count</button>
      <button @click="addToCart(item)">Add To Cart</button>
    </div>
    Total Amount: {{amount}} <button @click="buy"> Buy </button>
  </div>`,
  data: {
    cart: [],
    totalAmount: 50,
    items: [
      { name: 'Apple', count: 1, price: 10},
      { name: 'Orange', count: 1, price: 5},
    ],
  },
  methods: {
    buy() {
      if (this.amount > this.totalAmount) {
        console.log('Failure')
      } else {
        console.log('Success')
        this.cart = []
      }
    },
    inscreeseCount (item) {
      item.count += 2
    },
    addToCart (item) {
      this.cart.push(item)
    },
  },
  computed: {
    amount() {
      let total = 0
      this.cart.forEach((item) => {
        total += item.count * item.price
      })
      return total
    },
  },
})
```
index.html
```html
<body>
    <div id="app"></div>
</body>
```

Suppose the application is running on "http://127.0.0.1:8080/". If the user clicks on "Increase Count" and "Add to cart" button associated with the item name "Apple" once. Then user clicks on "Increase Count" and "Add to cart" button associated with the item name "Orange" once and then clicks on the button "Buy". What will be logged on to console?

Success
Failure
NaN
None of these.

Q20MCQ3 marks

Consider the following Vue app with markup “index.html” and JavaScript “app.js” question figure

Consider the following Vue app with markup “index.html” and JavaScript “app.js”

Text of the picture (copyable)

app.js
```javascript
const Error = {
    template: `<div>Result Not Found</div>`,
}

const Dashboard = {
    template: `<div> This is dashboard of {{user}}</div>`,
    props: ['user'],
}

const routes = [
    { path: '/dashboard/:user', component: Dashboard, props: true },
    { path: '*', component: Error },
]

const router = new VueRouter({
    routes,
})

new Vue({
    el: '#app',
    template: `<router-view />`,
    router,
})
```

index.html
```html
<body>
    <div id="app"></div>
</body>
```
What will be rendered by the browser for the URL http://127.0.0.1:8080/#/dashboard/7"?

This is dashboard of User
This is dashboard of 7
Dashboard
Result Not Found

Q21MCQ3 marks

Consider the following Vue application with markup “index.html” and JavaScript “app.js” question figure

Consider the following Vue application with markup “index.html” and JavaScript “app.js”

Text of the picture (copyable)

app.js
```javascript
const Home = {
  template: `<div>
    <slot name="navbar"> This is navbar</slot>
    <slot></slot>
    <slot name="footer"></slot>
  </div>`,
}

new Vue({
  el: '#app',
  template: `<Home>
    <template slot="footer">This is Footer</template>
    <template slot="navbar"> This is header</template>
    <div>Welcome to exam</div>
  </Home>`,
  components: {
    Home,
  },
})
```

index.html
```html
<body>
  <div id="app"></div>
</body>
```

Suppose the application is running on “http://127.0.0.1:8080/”. What will be rendered by the browser for the URL “http://127.0.0.1:8080/”?

text
```
This is Footer
This is Header
```

text

This is Footer
This is Header
Welcome to exam

text
```
This is Header
This is Footer
```

text

This is Header
Welcome to Exam
This is Footer

Q22MCQ3 marks

Consider the following flask application. question figure

Consider the following flask application.

Text of the picture (copyable)

app.py
```python
from flask import Flask
from flask_caching import Cache
from time import sleep

config = {
    "CACHE_TYPE": "RedisCache",
    "CACHE_REDIS_HOST": "localhost",
    "CACHE_REDIS_PORT": 6379,
    "CACHE_REDIS_DB": 1
}

app = Flask(__name__)
app.config.from_mapping(config)
cache = Cache(app)

@app.get('/')
@cache.cached(timeout=40)
def home():
    sleep(30)
    return "hello world"

if __name__ == "__main__":
    app.run(debug=True)
```
Suppose the application is running on "http://localhost:5000". If user1
visits the URL "http://localhost:5000" and after 3 minutes user2 visits the same URL.
What will be the approx difference between the response time for user1 and user2?

0 seconds
30 seconds
120 seconds
None of these

Q23MCQ3 marks

Text of the picture (copyable)

Consider the below javascript program.

```javascript
for (var i = 0; i < 3; i++) {
    setTimeout(() => console.log(i), (i+1)*1000);
}
```

What will be the output of the above program, if executed? Also, predict the minimum number of seconds the program will take to complete the execution?

text
```
0
1
2
Minimum Time Taken: 6 seconds
```
text
```
0
1
2
Minimum Time Taken: 12 seconds
```
text
```
3
3
3
Minimum Time Taken: 12 seconds
```
text
```
3
3
3
Minimum Time Taken: 6 seconds
```

Q24MCQ3 marks

Consider the below javascript program. question figure

Consider the below javascript program. What will be the output of the above program, if executed?

Text of the picture (copyable)

```javascript
async function func() {
  const num = await Promise.resolve(2);
  console.log("Second");
  return num;
}

console.log("First");
func().then((data) => console.log(data));
console.log("Third");
```

text
```
First
Second
Third
2
```
text
```
First
Error
```
text
```
First
Third
Second
undefined
```
text
```
First
Third
Second
2
```
text
```
The output cannot be predicted
```

Q25MCQ4.5 marks

Consider the following JavaScript code. question figure

Consider the following JavaScript code. What will be logged on to console, if executed?

Text of the picture (copyable)

```javascript
class TShirt {
  constructor(size, price) {
    this.size = size
    this.price = price
  }
}

class LargeTShirt extends TShirt {
  constructor() {
    super('large', 500)
  }
}

class MediumTShirt extends TShirt {
  constructor() {
    super('medium')
  }
}

class Order {
  constructor(item, count) {
    this.item = item
    this.count = count
  }

  totalPrice() {
    try {
      return this.item.price * this.count * 2
    } catch {
      return 'Some Error'
    }
  }
}

const tl = new LargeTShirt()
const order = new Order(tl, 5)
console.log(order.totalPrice())
```

NaN
500
2500
5000

Q26MCQ4.5 marks

Consider the following Vue application with JavaScript “app.js” and markup “index.html” question figure

Consider the following Vue application with JavaScript “app.js” and markup “index.html”

Text of the picture (copyable)

```javascript
app.js
new Vue({
  el: '#app',
  template: `<div>
    <div v-for="item in items">
      Name:{{item.name}},Count:{{item.count}}, Price:
      {{item.price*item.count}}
      <button @click="inscreeseCount(item)">Increase Count</button>
      <button @click="addToCart(item)">Add To Cart</button>
    </div>
    Total Amount: {{amount}} <button @click="buy"> Buy </button>
  </div>`,
  data: {
    cart: [],
    totalAmount: 50,
    items: [
      { name: 'Apple', count: 1, price: 10},
      { name: 'Orange', count: 1, price: 5},
    ],
  },
  methods: {
    buy() {
      if (this.amount > this.totalAmount) {
        console.log('Failure')
      } else {
        console.log('Success')
        this.cart = []
      }
    },
    inscreeseCount(item) {
      item.count += 2
    },
    addToCart(item) {
      this.cart.push(item)
    },
  },
  computed: {
    amount() {
      let total = 0
      this.cart.forEach((item) => {
        total += item.count * item.price
      })
      return total
    },
  },
})
```
index.html
```html
<body>
    <div id="app"></div>
</body>
```

Suppose the application is running on "http://127.0.0.1:8080". Suppose the user clicks on "Increase Count" button associated with the item name "Apple" 5 times and then clicks on "Increase Count" button associated with the item name "Orange" once and then clicks on the button "Buy". What will be logged on to console?

Success
Failure
NaN
None of these.

Q27MCQ4.5 marks

Consider the following Vue app with markup “index.html” and JavaScript “app.js” question figure

Consider the following Vue app with markup “index.html” and JavaScript “app.js”

Text of the picture (copyable)

app.js
```javascript
const Error = {
  template: `<div>Result Not Found</div>`,
}

const Dashboard = {
  template: `<div> This is dashboard of {{user}}</div>`,
  props: ['user'],
}

const routes = [
  { path: '/dashboard/:user', component: Dashboard, props: true },
  { path: '*', component: Error },
]

const router = new VueRouter({
  routes,
})

new Vue({
  el: '#app',
  template: `<router-view />`,
  router,
})
```

index.html
```html
<body>
  <div id="app"></div>
</body>
```

Suppose the application is running on “http://127.0.0.1:8080/”. What will be rendered by the browser for “http://127.0.0.1:8080/#/user”?

This is dashboard of User
Dashboard
Error
Result Not Found

Q28MCQ4.5 marks

Consider the following flask application. question figure

Consider the following flask application.

Text of the picture (copyable)

app.py
```python
from flask import Flask
from flask_caching import Cache
from time import sleep

config = {
    "CACHE_TYPE": "RedisCache",
    "CACHE_REDIS_HOST": "localhost",
    "CACHE_REDIS_PORT": 6379,
    "CACHE_REDIS_DB": 1
}

app = Flask(__name__)
app.config.from_mapping(config)
cache = Cache(app)

@app.get('/')
@cache.cached(timeout=40)
def home():
    sleep(30)
    return "hello world"

if __name__ == "__main__":
    app.run(debug=True)
```
Suppose the application is running on "http://localhost:5000". If user1 visits the URL "http://localhost:5000" and after 50 seconds user2 visits the same URL. What will be the approx difference between the response time for user1 and user2?

0 seconds
30 seconds
120 seconds
None of these

Q29MCQ4.5 marks

Consider the below javascript program. question figure

Consider the below javascript program. What will be the output of the above program, if executed?

Text of the picture (copyable)

```javascript
var first = 1;
obj1 = {
    'first' : 2,
    'second' : function some () {
        console.log(this.first);
    }
}
obj2 = {
    'first' : 3,
    'second' : () => {
        console.log("Function Invoked !!");
        this.second();
    }
}
obj2.second();
```

text
```
Function Invoked !!
2
```
text
```
Function Invoked !!
3
```
text
```
Function Invoked !!
1
```
text
```
Function Invoked !!
Error
```
text
```
Error
```

Q30MCQ4.5 marks

Consider the below javascript program. question figure

Consider the below javascript program. What will be the output of the above program, if executed? Also, predict the minimum number of seconds the program will take to complete the execution?

Text of the picture (copyable)

```javascript
exams = ['Jan 2023', 'May 2023', 'Sep 2023']

new Promise((rej, res) => {
    let count = 2
    let a = setInterval(() => {
        count += 3;
        const last = exams.pop();
        if (count % 2) {
            exams.push('May 2023')
        }

        else if (count % 5 == 0) {
            clearInterval(a);
            rej(last);
        }
    }, 1000)
}).then(d => console.log("Resolved", exams, d))
  .catch(e => console.log("Rejected", exams, d))
```

text

Resolved []
Minimum Time Taken: 6 seconds

text

Resolved [] May 2023
Minimum Time Taken: 12 seconds

text

Rejected [May 2023] May 2023
Minimum Time Taken: 6 seconds

text

Resolved [] May 2023
Minimum Time Taken: 6 seconds

text

Rejected [May 2023]
Minimum Time Taken: 12 seconds

text

Rejected [] May 2023
Minimum Time Taken: 12 seconds

Q31MCQ4.5 marks

Consider the following Vue application with markup “index.html” and javascript file “app.js”. question figure

Consider the following Vue application with markup “index.html” and javascript file “app.js”. Suppose you open “index.html” file in a browser, and type the text “IIT Madras” in the text box shown (after removing the previous text, if any), and hard refresh the page twice, without clicking anywhere. What will be the value shown in the text box, and the “age” placeholder, respectively?

Text of the picture (copyable)

index.html:

```html
<div id = "app">
  <input v-model = "name" @input = "do_something">
  <p> {{age}} </p>
</div>
<script scr = "app.js"></script>
```

app.js:

```javascript
new Vue({
  el : "#app",
  data : {
    name : "#app",
    age : 0,
  },

  mounted () {
    try {
      this.name = localStorage.getItem("name").split(" ")[0];
      this.age = localStorage.getItem("name").split(" ")[1];
      localStorage.setItem("name",
        localStorage.getItem("name").split(" ")[0] + " " + this.name);
    }
    catch {
      this.name = "Default";
      this.age = "Default";
    }
  },

  methods : {
    do_something() {
      localStorage.setItem("name", this.name);
      localStorage.setItem("age", this.age);
    }
  }
})
```

The app will show an error in the console
Default, Default
IIT, Madras
IIT, IIT
Madras, IIT
None of these

Q32MCQ4.5 marks

Fill in code1 & code2, which can be used in Vuex Store to update the “below_average” state variable with the objects of those students who have scored more than 50 marks. question figure

Fill in code1 & code2, which can be used in Vuex Store to update the “below_average” state variable with the objects of those students who have scored more than 50 marks.

Text of the picture (copyable)

```javascript
const store= new Vuex.Store({
    state:{
        student_total:0,
        students:[
            {
                name : 'Akshay',
                marks : 52
            },
            {
                name : 'Vishwajeet',
                marks : 78
            },
            {
                name : 'Sonali',
                marks : 43
            }
        ],
        below_average:[]
    },
    code1:{
        belowAverageStudents(state){
            code2
        }
    }
})
```

text

```
code1: mutations
code2: students.forEach(student=>{
    if(student.marks > 50)
        below_average.push(student)
})
```

text

```
code1: actions
code2: state.students.forEach(student=>{
    if(student.mark > 50)
        below_average.toppers.push(student)
})
```

text

```
code1: actions
code2: context.students.forEach(student=>{
    if(student.marks < 55)
        context.below_average.push(student)
})
```

text

```
code1: mutations
code2: state.students.forEach(student=>{
         if(student.marks > 50)

         state.below_average.push(student)
})
```

Answer key

Q1 (MSQ, 2 marks): B, C
Q2 (MSQ, 2 marks): A, B
Q3 (MSQ, 2 marks): A, B, C
Q4 (MSQ, 2 marks): B, D
Q5 (MSQ, 2 marks): B, C
Q6 (MSQ, 2 marks): A, D
Q7 (MSQ, 2 marks): B, C
Q8 (MSQ, 3 marks): A, B, C, D
Q9 (MSQ, 3 marks): A, B, C
Q10 (MSQ, 3 marks): B, D
Q11 (MSQ, 3 marks): A, C
Q12 (MSQ, 3 marks): A, D
Q13 (MSQ, 3 marks): A, B, C
Q14 (MCQ, 2 marks): A
Q15 (MCQ, 3 marks): D
Q16 (MCQ, 3 marks): A
Q17 (MCQ, 3 marks): D
Q18 (MCQ, 3 marks): A
Q19 (MCQ, 3 marks): A
Q20 (MCQ, 3 marks): B
Q21 (MCQ, 3 marks): D
Q22 (MCQ, 3 marks): A
Q23 (MCQ, 3 marks): D
Q24 (MCQ, 3 marks): D
Q25 (MCQ, 4.5 marks): D
Q26 (MCQ, 4.5 marks): A
Q27 (MCQ, 4.5 marks): D
Q28 (MCQ, 4.5 marks): A
Q29 (MCQ, 4.5 marks): D
Q30 (MCQ, 4.5 marks): D
Q31 (MCQ, 4.5 marks): D
Q32 (MCQ, 4.5 marks): D

Concepts this paper tests

Auto-generated summary from the source site. Handy as a checklist; the lessons above explain each idea from scratch.

Here’s a structured summary of core topics, concepts, and principles for the "Modern Application Development II" exam, along with key equations (where applicable) and Mermaid knowledge graphs to visualize relationships.

1. Core Topics & Concepts

A. Web Protocols & Communication

1. Email Protocols

SMTP (Simple Mail Transfer Protocol)
- Used for sending emails (mail delivery).
- Ports: 25 (unencrypted), 587 (TLS), 465 (SSL).
- Not used for retrieving emails (false statement in exam).
IMAP (Internet Message Access Protocol)
- Used for retrieving emails from a server.
- Supports synchronization (e.g., marking emails as read).
POP3 (Post Office Protocol)
- Also for retrieving emails but downloads and deletes from the server by default.

2. HTTP/HTTPS & WebSockets

HTTP/HTTPS: Stateless protocol for client-server communication.
WebSockets: Full-duplex, persistent connection for real-time communication (e.g., chat apps).
Webhooks:
- Machine-to-machine communication via HTTP callbacks.
- Not WebSocket-based (false statement in exam).
- No same-origin policy restriction (can be cross-origin).

Same-Origin Policy (SOP): Restricts requests to the same protocol + domain + port.
CORS Headers:
- Access-Control-Allow-Origin: Specifies allowed origins.
- Access-Control-Allow-Methods: Allowed HTTP methods (GET, POST, etc.).
When CORS Errors Occur:
- Different domain (abc.com vs. def.com).
- Different protocol (http vs. https).
- Different port (:80 vs. :8080).
- Different subdomain (abc.com vs. sub.abc.com).

4. CSRF (Cross-Site Request Forgery)

Attack: Tricks users into submitting malicious requests.
Mitigation:
- CSRF Tokens: Unique tokens per session.
- SameSite Cookies: Restrict cookie sending to same-site requests.

5. CDN (Content Delivery Network)

Purpose: Reduce latency by caching content on edge servers closer to users.
How it Works:
- User requests content → CDN serves from the nearest edge server.
- Does not guarantee the closest server is always used (depends on routing).
Use Cases: Static assets (images, JS, CSS), videos, APIs.

B. Asynchronous JavaScript & Real-Time Systems

1. Polling vs. Webhooks vs. WebSockets

Method	Description	Pros	Cons
Short Polling	Client repeatedly asks the server for updates.	Simple to implement.	High latency, server load.
Long Polling	Client holds a request open until the server responds or times out.	Lower latency than short.	Complex, connection drops.
Webhooks	Server pushes data to a client URL when an event occurs.	Real-time, efficient.	Needs a public endpoint.
WebSockets	Persistent full-duplex connection between client and server.	Lowest latency, bidirectional.	Complex setup, stateful.

Long Polling ≠ Webhooks (false statement in exam).
Webhooks use HTTP, not WebSockets.

2. Celery (Distributed Task Queue)

Components:
- Broker (Redis, RabbitMQ): Stores tasks.
- Workers: Execute tasks.
- Result Backend (optional): Stores task results.
Features:
- Task Scheduling: Run tasks at specific times.
- Retries: Automatic retries on failure.
- Multiple Brokers: Can use Redis, RabbitMQ, etc. (not limited to Redis).
Scaling:
- Point-to-point: O(n²) connections (each worker connects to every other).
- Broker-based: O(n) connections (all workers connect to a central broker).

3. Promises & Async/Await

Promise States:
- Pending → Fulfilled (resolved) or Rejected.
Async/Await:
- await pauses execution until the promise settles.
- Error Handling: Use try/catch.

Example:

async function fetchData() {
  try {
    const data = await fetch(url);
    return data.json();
  } catch (err) {
    console.error("Network Error");
  }
}

4. Event Loop & `setTimeout`

JavaScript is single-threaded but uses an event loop for async operations.

setTimeout with var in loops:

for (var i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 1000); // Logs 3, 3, 3 (closure issue)
}

Fix: Use let or an IIFE.

C. Frontend Frameworks (Vue.js)

1. Vue Directives

v-for: Loop over arrays/objects.

<div v-for="(value, key, index) in obj"></div>

v-model: Two-way data binding (e.g., <input v-model="name">).
v-bind: Dynamically bind attributes (:class, :style).

2. Vue Reactivity

Reactive Data: Changes in data() trigger UI updates.

Computed Properties: Cached derived data.

computed: {
  total() {
    return this.items.reduce((sum, item) => sum + item.price, 0);
  }
}

Watchers: React to data changes.

watch: {
  question(newVal) {
    this.fetchAnswer(newVal);
  }
}

3. Vue Router

Dynamic Routes:
```
{ path: '/user/:id', component: User, props: true }
```
- props: true passes route params as props.
Wildcard (*): Catch-all for 404 pages.

4. Slots (Component Composition)

Default Slot: <slot></slot>
Named Slots: <slot name="header"></slot>

Usage:

<Parent>
  <template v-slot:header>...</template>
</Parent>

5. Vuex (State Management)

Core Concepts:
- State: Single source of truth.
- Mutations: Synchronous state changes.
- Actions: Async operations (commit mutations).
- Getters: Computed state (like computed properties).

Example:

mutations: {
  updateStudents(state) {
    state.below_average = state.students.filter(s => s.marks > 50);
  }
}

D. Security

1. XSS (Cross-Site Scripting)

Types:
- Stored XSS: Malicious script saved on the server (e.g., in a DB).
- Reflected XSS: Script embedded in a URL.
- DOM-based XSS: Script executes in the browser via DOM manipulation.
Mitigation:
- Input Sanitization: Strip <script> tags.
- Output Encoding: Escape HTML entities (< → <).
- CSP (Content Security Policy): Restrict script sources.

2. Caching Strategies

Cache Types:
- Private Cache: User-specific (e.g., browser cache).
- Shared Cache: CDN, proxy caches (serves multiple users).
Cache-Control Headers:
- max-age: Time in seconds before cache expires.
- no-store: Never cache.
- no-cache: Revalidate with server before using.
What Not to Cache:
- Dynamic content (e.g., user feeds).
- Sensitive data (e.g., user sessions).

E. Backend & Distributed Systems

1. Flask & Caching

Flask-Caching:

Backends: Redis, Memcached, filesystem.

Decorators:

@cache.cached(timeout=50)  # Cache for 50 seconds
def home():
    return "Hello"

Redis as a Cache:
- TTL (Time-to-Live): Automatically expires keys.
- Example: @cache.cached(timeout=40) caches responses for 40 seconds.

2. Message Brokers (Redis, RabbitMQ)

Use Cases:
- Task Queues (Celery).
- Pub/Sub (real-time updates).
Connection Scaling:
- Point-to-point: O(n²) connections (inefficient).
- Broker-based: O(n) connections (scalable).

2. Key Equations & Code Snippets

A. Asynchronous JavaScript

Promise Chaining: ``javascript fetch(url) .then(res => res.json()) .then(data => console.log(data)) .catch(err => console.error(err)); ``
Async/Await Error Handling: ``javascript async function fetchData() { try { const res = await fetch(url); const data = await res.json(); return data; } catch (err) { console.error("Failed:", err); } } ``
setTimeout in Loops (Closure Issue): ``javascript for (let i = 0; i < 3; i++) { // Use let instead of var setTimeout(() => console.log(i), 1000); // Logs 0, 1, 2 } ``

B. Vue.js

Computed Property: ``javascript computed: { totalAmount() { return this.cart.reduce((sum, item) => sum + item.price * item.count, 0); } } ``
Vuex Mutation: ``javascript mutations: { addToCart(state, item) { state.cart.push(item); } } ``
Dynamic Routes: ``javascript const routes = [ { path: '/user/:id', component: User, props: true } ]; ``

C. Flask Caching

Redis Cache Setup: ```python app.config["CACHE_TYPE"] = "RedisCache" app.config["CACHE_REDIS_URL"] = "redis://localhost:6379/0" cache = Cache(app)

@app.route("/") @cache.cached(timeout=50) def home(): return "Cached for 50 seconds" ```

D. Security

XSS Prevention (DOMPurify): ``javascript import DOMPurify from 'dompurify'; const clean = DOMPurify.sanitize(userInput); ``
CORS Headers (Flask): ``python from flask_cors import CORS CORS(app, resources={r"/api/*": {"origins": "https://abc.com"}}) ``

Graph 2: Asynchronous JavaScript

Graph 3: Vue.js Ecosystem

Graph 4: Distributed Systems & Caching

Graph 5: Security Concepts

4. Exam Tips

SMTP vs. IMAP:
- SMTP sends emails; IMAP retrieves them.
CORS Errors:
- Occur when protocol, domain, or port differs.
Celery:
- Requires a broker (Redis/RabbitMQ).
- Supports periodic tasks.
Vue Reactivity:
- v-for can iterate over objects ((value, key, index) in obj).
Webhooks:
- Use HTTP, not WebSockets.
- Cross-origin by default.
XSS:
- Client-side injection; mitigate with input validation and output encoding.
Caching:
- Shared cache serves multiple users; private cache is user-specific.
Async/Await:
- await pauses execution until the promise resolves.
Flask-Caching:
- @cache.cached(timeout=40) caches responses for 40 seconds.
Vuex:
- Mutations modify state; actions handle async operations.

Final Note: Focus on asynchronous JavaScript, Vue.js reactivity, CORS/CSRF/XSS, and distributed task queues (Celery). The Mermaid graphs should help visualize relationships between concepts. Good luck! 🚀

2023 Dec24: IIT M AN EXAM ADD4 - 24 Dec 2023

Answer key

Concepts this paper tests

1. Core Topics & Concepts

A. Web Protocols & Communication

1. Email Protocols

2. HTTP/HTTPS & WebSockets

3. CORS (Cross-Origin Resource Sharing)

4. CSRF (Cross-Site Request Forgery)

5. CDN (Content Delivery Network)

B. Asynchronous JavaScript & Real-Time Systems

1. Polling vs. Webhooks vs. WebSockets

2. Celery (Distributed Task Queue)

3. Promises & Async/Await

4. Event Loop & setTimeout

C. Frontend Frameworks (Vue.js)

1. Vue Directives

2. Vue Reactivity

3. Vue Router

4. Slots (Component Composition)

5. Vuex (State Management)

D. Security

1. XSS (Cross-Site Scripting)

2. Caching Strategies

E. Backend & Distributed Systems

1. Flask & Caching

2. Message Brokers (Redis, RabbitMQ)

2. Key Equations & Code Snippets

A. Asynchronous JavaScript

B. Vue.js

C. Flask Caching

D. Security

Graph 2: Asynchronous JavaScript

Graph 3: Vue.js Ecosystem

Graph 4: Distributed Systems & Caching

Graph 5: Security Concepts

4. Exam Tips

4. Event Loop & `setTimeout`