IIT M IMPROVEMENT FN EXAM QDD2 01 Sep - 01 Sep 2024

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 exam, along with key equations (where applicable) and Mermaid knowledge graphs to visualize relationships.

Core Topics & Concepts Summary

1. Web Security

• CSRF (Cross-Site Request Forgery)

  • Objective: Validate that requests come from authenticated users (not malicious sites).
  • Mechanism: CSRF tokens are embedded in forms/headers and verified server-side.
  • Attack Example: A malicious link triggers an action (e.g., money transfer) using the user’s active session.
  • Mitigation: Use CSRF tokens, SameSite cookies, or double-submit cookies.

• Same-Origin Policy (SOP)

  • Rule: Browsers block scripts from one origin (protocol://domain:port) from accessing resources from another origin.

  • Exceptions:

    • Same Origin: https://example.com ↔ https://example.com/subdir (allowed).
    • Cross-Origin: https://example.com ↔ https://api.example.com (blocked unless CORS headers permit).
  • CORS (Cross-Origin Resource Sharing): Uses HTTP headers (Access-Control-Allow-Origin) to relax SOP.

• Session Storage vs. Local Storage

  • sessionStorage: Cleared when the tab closes. Scope: per-tab.
  • localStorage: Persists across sessions. Scope: per-origin.

  • Methods:

    localStorage.setItem('key', 'value');
    sessionStorage.getItem('key');
    sessionStorage.removeItem('key');
    sessionStorage.clear();

2. Asynchronous JavaScript

• Closures & var vs. let in Loops

  • Problem: var in loops creates a single binding; let creates block-scoped bindings.

  • Example (Closure Issue):

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

  • Fix: Use let or an IIFE:

    for (let i = 0; i < 3; i++) {
      setTimeout(() => console.log(i), 1000); // Outputs: 0, 1, 2
    }

• Promises & Async/Await

  • Promise States: Pending → Fulfilled/Rejected.

  • Chaining:

    fetch(url)
      .then(res => res.json())
      .then(data => console.log(data))
      .catch(err => console.error(err));

  • Async/Await:

    async function fetchData() {
      try {
        const res = await fetch(url);
        const data = await res.json();
        console.log(data);
      } catch (err) {
        console.error(err);
      }
    }

• setInterval vs. setTimeout

  • setInterval: Repeats a function every X ms (overlapping executions possible).
  • setTimeout: Executes once after X ms (recursive calls for repetition).

3. State Management (Vuex)

• Vuex Flow:

  1. Dispatch an Action (async operations).
  2. Commit a Mutation (synchronous state changes).
  3. State Updates → Re-renders components.

• Example:

  // Action
  actions: {
    fetchData({ commit }) {
      api.call().then(response => {
        commit('SET_DATA', response);
      });
    }
  },
  // Mutation
  mutations: {
    SET_DATA(state, payload) {
      state.data = payload;
    }
  }

4. Caching & Performance

• Flask-Caching

  • Backends: SimpleCache (memory), Redis, Memcached.

  • Decorators:

    • @cache.cached(timeout=60): Caches the entire view.
    • @cache.memoize(timeout=60): Caches based on function arguments.

  • Redis Config:

    app.config['CACHE_TYPE'] = 'redis'
    app.config['CACHE_REDIS_URL'] = 'redis://localhost:6379/0'

• HTTP Caching Headers

  • Cache-Control: max-age=3600, no-cache, no-store.
  • Expires: Absolute expiry time (e.g., Expires: Thu, 01 Jan 2025 00:00:00 GMT).

5. Real-Time Communication

• WebSockets

  • Use Case: Bidirectional, full-duplex communication (e.g., chat apps).

  • Example:

    const socket = new WebSocket('ws://example.com');
    socket.onmessage = (event) => console.log(event.data);

• Server-Sent Events (SSE)

  • Use Case: Unidirectional (server → client) updates (e.g., live notifications).

  • Example:

    const eventSource = new EventSource('/updates');
    eventSource.onmessage = (e) => console.log(e.data);

  • Headers: Content-Type: text/event-stream.

• Webhooks

  • Mechanism: HTTP callbacks (server A POSTs data to server B when an event occurs).

  • Example:

    @app.route('/webhook', methods=['POST'])
    def webhook():
        data = request.json
        print(data)
        return 'OK', 200

• Polling vs. Long Polling vs. Webhooks | Method | Description | Use Case | |-----------------|-----------------------------------------------------------------------------|-----------------------------------| | Polling | Client asks server for updates at fixed intervals. | Simple but inefficient. | | Long Polling| Client waits for server response (timeout if no update). | Near real-time (e.g., chat). | | Webhooks | Server pushes updates to client via HTTP callbacks. | Event-driven (e.g., GitHub hooks).|

6. Task Queues (Celery)

• Use Cases:

  • Background tasks (e.g., sending emails, data processing).
  • Periodic tasks (e.g., cron jobs).

• Example:

  @celery.task
  def process_data(data):
      # Long-running task
      return result

7. Vue.js

• Reactivity

  • v-model: Two-way data binding (e.g., <input v-model="message">).

  • v-for: Render lists:

    <li v-for="(item, index) in items" :key="index">{{ item }}</li>

  • Computed Properties: Cached derived data:

    computed: {
      filteredItems() {
        return this.items.filter(item => item.active);
      }
    }

• Conditional Rendering

  • v-if/v-else: Toggles DOM elements.
  • v-show: Toggles display: none.

• Class Bindings

  • Object Syntax:

    <div :class="{ active: isActive, 'error-class': hasError }"></div>

  • Array Syntax:

    <div :class="[isActive ? 'active-class' : '', 'static-class']"></div>

• Vue Router

  • Dynamic Routes:

    { path: '/user/:id', component: User }

  • Access Route Params:

    this.$route.params.id

8. Redis

• Data Structures: Strings, Lists, Sets, Hashes, Sorted Sets.

• Use Cases:

  • Caching (e.g., @cache.cached with Redis backend).
  • Session storage.
  • Pub/Sub (e.g., real-time notifications).

• Example:

  import redis
  r = redis.Redis(host='localhost', port=6379)
  r.set('key', 'value')
  r.get('key')

9. HTTP & APIs

• RESTful APIs

  • Methods: GET, POST, PUT, DELETE.
  • Status Codes: 200 OK, 404 Not Found, 500 Server Error.

• Fetch API

  • Example:

    fetch('https://api.example.com/data')
      .then(res => res.json())
      .then(data => console.log(data));

10. JavaScript Quirks

• Hoisting

  • var: Hoisted and initialized with undefined.
  • let/const: Hoisted but not initialized (Temporal Dead Zone).
  • Function Declarations: Hoisted entirely.

• this Binding

  • Regular Functions: this depends on how the function is called.
  • Arrow Functions: this is lexically scoped (inherits from parent).

  • Example:

    const obj = {
      value: 42,
      regular: function() { return this.value; }, // 42
      arrow: () => this.value // undefined (global `this`)
    };

• Prototype Chain

  • __proto__: Points to the object’s prototype.

  • Example:

    class Animal {}
    class Dog extends Animal {}
    const d = new Dog();
    console.log(d.__proto__ === Dog.prototype); // true
    console.log(d.__proto__.__proto__ === Animal.prototype); // true

Key Equations (Mathematics/Algorithms)

(Limited in this exam, but included for completeness)

1. Time Complexity of Polling

   • Short Polling: O(n) requests for n updates.
   • Long Polling: O(1) per update (server holds request until data is available).

1. Cache Hit/Miss

   • Hit Rate: (Hits) / (Hits + Misses).
   • Flask-Caching: timeout=60 → Cache expires after 60 seconds.

1. Asynchronous Task Delay

   • Example: setTimeout(fn, (i+1)*1500) → Delays of 1.5s, 3s, 4.5s, 6s.

2. Asynchronous JavaScript

3. Vuex State Management

4. Real-Time Communication

5. Caching Strategies

6. Vue.js Core Concepts

Exam Tips

1. CSRF: Remember it’s about validating requests, not encrypting sessions.
2. Same-Origin Policy: https://example.com and https://example.com:8080 are different origins (port matters).
3. Vuex: Actions → Mutations → State (never mutate state directly).
4. Closures: var in loops causes all timeouts to log the final value; use let.
5. Caching: @cache.memoize caches based on function arguments; @cache.cached caches the entire view.
6. Webhooks vs. Polling: Webhooks are event-driven; polling is client-initiated.
7. Redis: In-memory store for caching, sessions, and Pub/Sub.
8. Promise Chains: .catch handles rejections; .finally runs regardless of success/failure.