IIT M FOUNDATION DIPLOMA FN EXAM - 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 essential for the "Modern Application Development II" exam, along with a Mermaid knowledge graph to visualize relationships.

Core Topics & Key Concepts

1. Web Security

• CSRF (Cross-Site Request Forgery)

  • Objective: Validate that requests originate from authenticated users.
  • Mechanism: CSRF tokens are embedded in forms/headers and validated server-side.
  • Attack Example: Malicious link exploits an authenticated session (e.g., unauthorized bank transfer).
  • Mitigation: Use tokens, SameSite cookies, or double-submit cookies.

• CORS (Cross-Origin Resource Sharing)

  • Default Behavior: Browsers block fetch calls to origins differing from the parent page (scheme + domain + port).

  • Allowed Origins:

    • Same origin (e.g., https://example.com → https://example.com/subdir).
    • Explicitly permitted via Access-Control-Allow-Origin header.
  • Preflight Requests: OPTIONS request for non-simple methods (e.g., PUT, custom headers).

• Same-Origin Policy (SOP)

  • Restricts scripts from one origin accessing resources from another.
  • Exceptions: CORS headers, JSONP (legacy), or proxy servers.

2. State Management (Vuex)

• Core Flow:

  Dispatch Action → Commit Mutation → State Change → Reactivity

  • Actions: Handle async operations (e.g., API calls). Dispatch with store.dispatch().
  • Mutations: Synchronous state updates. Commit with store.commit().
  • State: Single source of truth. Access via store.state.
  • Getters: Computed properties for derived state.

• Async Workflow Example:

  actions: {
    async fetchData({ commit }) {
      const response = await api.call();
      commit('SET_DATA', response); // Mutation updates state
    }
  }

3. Asynchronous Patterns

• Job Queues (Scalability)

  • Order for Async Tasks:

    Queue Job → Process Job → Save Result → Callback/Notification

  • Tools: Celery (Python), Bull (Node.js), Redis/RabbitMQ as brokers.

• Polling vs. Webhooks vs. SSE | Technique | Use Case | Pros | Cons | |----------------------|---------------------------------------|------------------------------------|------------------------------------| | Short Polling | Periodic status checks (e.g., task completion) | Simple to implement | Inefficient (high latency) | | Long Polling | Near-real-time updates (e.g., chat) | Lower latency than short polling | Server resource-intensive | | Webhooks | Event-driven notifications (e.g., GitHub pushes) | Real-time, efficient | Requires public endpoint | | Server-Sent Events (SSE) | Server→client updates (e.g., live scores) | Low latency, HTTP-based | Unidirectional (server→client) | | WebSockets | Bidirectional real-time (e.g., gaming) | Full-duplex communication | Complex setup, stateful |

• Celery Use Cases:

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

4. JavaScript Core Concepts

• Closures

  • Inner functions retain access to outer scope variables.

  • Example:

    function outer() {
      let x = 10;
      return function inner() { console.log(x); }; // Logs 10
    }

• Hoisting

  • Function Declarations: Hoisted with definitions.
  • var: Hoisted with undefined; initialization stays in place.
  • let/const: Hoisted but uninitialized (Temporal Dead Zone).

• this Binding

  • Regular Functions: this depends on call context.
  • Arrow Functions: Lexical this (inherits from parent scope).

  • Example:

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

• Event Loop & Timers

  • setTimeout/setInterval delays are minimum guarantees (not exact).

  • Example:

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

  • Fix: Use let or IIFE to capture i per iteration.

• Promises & Async/Await

  • Promise States: Pending → Fulfilled/Rejected.
  • Chaining: .then() for success, .catch() for errors.

  • Async/Await: Syntactic sugar for promises.

    async function fetchData() {
      try {
        const data = await api.call();
        console.log(data);
      } catch (err) {
        console.error(err);
      }
    }

5. Caching

• Client-Side Storage | API | Scope | Persistence | Size Limit | |-------------------|-----------------|------------------------|----------------| | localStorage | Per-origin | Persists across sessions | ~5MB | | sessionStorage | Per-tab | Cleared on tab close | ~5MB | | IndexedDB | Per-origin | Persists | ~50MB+ |

• Server-Side Caching

  • Redis: In-memory key-value store (supports strings, lists, sets, hashes).

    • Use cases: Caching, session storage, rate limiting.

  • Flask-Caching:

    • Decorators: @cache.cached(timeout=60) (caches response).
    • Backends: SimpleMemory, Redis, Memcached.

    • Example:

      @app.route('/data')
      @cache.cached(timeout=50, key_prefix='data')
      def get_data():
          return expensive_computation()

• HTTP Caching Headers | Header | Purpose | |------------------|------------------------------------------| | Cache-Control | Directives (e.g., max-age=3600, no-store) | | Expires | Absolute expiry time (legacy) | | ETag | Version identifier for validation |

6. Frontend Frameworks (Vue.js)

• Reactivity

  • v-model: Two-way binding (e.g., <input v-model="msg">).
  • v-for: Render lists (:key required for efficiency).
  • Computed Properties: Cached derived data.

• Vuex Binding in Templates

  • Dynamic class binding:

    <div :class="['errorClass', isActive ? 'activeClass' : '']"></div>

• Vue Router

  • Dynamic segments (e.g., /profile/:id).

  • Example:

    const routes = [
      { path: '/profile/:id', component: Profile },
      { path: '*', component: NotFound }
    ];

7. APIs & Real-Time Communication

• REST vs. Webhooks vs. SSE vs. WebSockets | Feature | REST | Webhooks | SSE | WebSockets | |-------------------|----------------|----------------|-----------------|----------------| | Direction | Client→Server | Server→Client | Server→Client | Bidirectional | | Protocol | HTTP | HTTP (POST) | HTTP (Streaming)| WS/WSS | | Real-Time | No (Polling) | Yes | Yes | Yes | | Use Case | CRUD ops | Event alerts | Live updates | Chat/Gaming |

• Pub/Sub Model

  • Redis Pub/Sub: Publish to channels, subscribers receive messages.

  • Example:

    # Publisher
    redis.publish("channel", "message")

# Subscriber pubsub = redis.pubsub() pubsub.subscribe("channel") for message in pubsub.listen(): print(message) ```

8. Error Handling

• Promise Error Propagation

  • Uncaught errors in .then() propagate to .catch().

  • Example:

    fetch(url)
      .then(res => res.json())
      .catch(err => console.error("Failed:", err));

• Async/Await Errors

  • Use try/catch:

    async function loadData() {
      try {
        const data = await fetchData();
      } catch (err) {
        console.error(err);
      }
    }

Key Equations/Code Snippets

1. Vuex State Update Flow: ``plaintext Dispatch Action → Commit Mutation → State Change ``

1. Asynchronous Job Queue: ``plaintext Queue Job → Process Job → Save Result → Invoke Callback ``

1. Closure in Loops (Fixed): ``javascript for (let i = 0; i < 3; i++) { setTimeout(() => console.log(i), 1000); // Logs 0, 1, 2 } ``

1. Redis Caching in Flask: ``python @app.route('/data') @cache.cached(timeout=60, key_prefix='data') def get_data(): return expensive_computation() ``

1. CSRF Token Validation (Flask-WTF): ``python from flask_wtf.csrf import CSRFProtect app = Flask(__name__) CSRFProtect(app) ``

1. SSE Implementation (Flask): ``python @app.route('/stream') def stream(): def generate(): while True: yield f"data: {datetime.now()}\n\n" time.sleep(1) return Response(generate(), mimetype='text/event-stream') ``

1. Webhook Receiver (Flask): ``python @app.route('/webhook', methods=['POST']) def webhook(): data = request.json print("Received:", data) return 'OK', 200 ``

Graph 2: State Management & Asynchronous Patterns

Graph 3: Caching & Performance

Graph 4: JavaScript Core Concepts

Exam Tips

1. CSRF: Focus on token validation and SameSite cookies.
2. CORS: Remember same-origin policy and preflight requests.
3. Vuex: Master the action → mutation → state flow.
4. Asynchronous JS: Understand closures in loops and promise chaining.
5. Caching: Know HTTP headers (Cache-Control, ETag) and Redis basics.
6. Real-Time: Differentiate Webhooks (server→server) vs SSE (server→client).
7. Error Handling: Practice try/catch in async/await and .catch() in promises.