APP DEV 2 SHORT NOTES FOR ET

Comprehensive Pointwise Notes

JavaScript & Web Fundamentals

JAMStack

✓ An architecture consisting of JavaScript, APIs, and pre-rendered Markup.

✓ Decouples the frontend (UI) from the backend (data/logic), allowing them to be developed and scaled independently.

Variable Declarations & Hoisting

✓ var: Function-scoped. Declarations are hoisted to the top of their function and initialized with `undefined`.

✓ let/const:Block-scoped (within `{}`). Declarations are hoisted but not initialized, creating a "Temporal Dead Zone" where they
cannot be accessed before the declaration line.

✓ Hoisting Example: Function declarations are fully hoisted (can be called before defined). Arrow functions assigned to variables
follow the variable's hoisting rules.

hoistedFunction(); // Works
// notHoistedFunction(); // TypeError: notHoistedFunction is not a function

function hoistedFunction() {
console.log('I am hoisted!');
}

var notHoistedFunction = () => {

console.log('I am not fully hoisted.');
};

Execution Context & `this` Keyword

✓ Global Context: `this` refers to the global object (`window` in browsers).

✓ Function Context (Regular): `this` is determined by how the function is called. If called as a method of an object
(`obj.myMethod()`), `this` is the object. If called as a standalone function, `this` is the global object (or `undefined` in strict mode).

✓ Function Context (Arrow): Arrow functions do not have their own `this` context. They inherit `this` from their parent (lexical)
scope at the time they are defined.

Prototypes & Inheritance

✓ JavaScript uses prototype-based inheritance. Every object has a hidden `[[Prototype]]` link (accessible via `__proto__`) to another
object.

✓ When accessing a property, the engine first checks the object itself. If not found, it checks its prototype, and so on, up the
prototype chain.

✓ The `class` syntax is syntactic sugar over this prototype mechanism. `class Dog extends Animal` sets `Animal.prototype` as the
prototype of `Dog.prototype`.

Asynchronous JS

Promises

✓ An object representing the eventual completion (or failure) of an asynchronous operation.

✓ States: `pending`, `fulfilled` (resolved), or `rejected`.
✓ Handled with `.then()` for success, `.catch()` for errors, and `.finally()` for cleanup code that runs regardless of outcome.
Page: 1 of 6
✓ Handled with `.then()` for success, `.catch()` for errors, and `.finally()` for cleanup code that runs regardless of outcome.

Promise Chaining Example

✓ The value returned from a `.then()` block is passed as an argument to the next `.then()`.
✓ If a promise is rejected or an error is thrown, the chain jumps to the next `.catch()` block.
✓ A `.catch()` block can "handle" an error and return a normal value, allowing the chain to continue into subsequent `.then()` blocks.

new Promise((resolve, reject) => {

resolve(10);
})
.then(val => {
console.log("Step 1:", val); // Logs: Step 1: 10
throw new Error("Something went wrong");
return val * 2; // This line is never reached
})
.then(val => {
console.log("Step 2:", val); // This block is skipped
})
.catch(err => {
console.log("Caught:", err.message); // Logs: Caught: Something went wrong
return 50; // Return a new value to continue the chain
})
.then(val => {
console.log("Step 3:", val); // Logs: Step 3: 50
});

`async/await`

✓ Provides a cleaner, more synchronous-looking syntax for working with promises.

✓ The `await` keyword can only be used inside an `async` function. It pauses the function execution until the promise settles and
returns its result.

Vue.js Concepts

Reactivity, Directives, and Data Binding

✓ Reactivity: Vue automatically tracks dependencies and updates the DOM when data changes.
✓ `v-bind` (or `:`): One-way data binding. Binds an element's attribute to a data property.
✓ `v-model`: Two-way data binding, typically used on form inputs.

Components, Props, and Events

✓ Props: A way to pass data from a parent component down to a child component.
✓ Events (`$emit`): A way for a child component to send a message up to its parent component.

Vue Lifecycle Hooks

✓ Functions that are executed at specific stages of a component's lifecycle.

✓ `created()`: Runs after the instance is created. Data is reactive, but the DOM has not been mounted. Good for fetching initial
data.

✓ `mounted()`: Runs after the component has been added to the DOM. Useful for DOM manipulations.

Vue Router

✓ Dynamic Routes: Defined with a colon (e.g., `path: '/user/:id'`). The dynamic part is accessible in the component via
`this.$route.params.id`.

✓ Nested Routes: A route can have a `children` array of other routes. The parent route's component needs a `` to render the child
component.
Page: 2 of 6
✓ Nested Routes: A route can have a `children` array of other routes. The parent route's component needs a `` to render the child
component.

// In router configuration
const routes = [
{
path: '/user/:id',
component: User,
children: [
{ path: 'profile', component: UserProfile }, // Renders inside User's
]
}
]

Vuex: State Management

✓ Provides a centralized store for all components in an application.

✓ State: The single source of truth (the data).
✓ Mutations: The only way to change the state. They must be synchronous. Triggered with `store.commit('mutationName')`.
✓ Actions: Used for asynchronous operations. They commit mutations instead of changing the state directly. Triggered with
`store.dispatch('actionName')`.

✓ Getters: Computed properties for the store. Used to derive state.

Servers, Caching & Communication

Communication Patterns

✓ Short Polling: Client repeatedly asks the server for updates at a fixed interval. Inefficient.
✓ Long Polling: Client asks the server for updates, and the server holds the connection open until it has an update to send.
✓ Webhooks: Server-to-server communication. A server sends an HTTP POST request to a pre-configured URL on another server
when an event occurs.

✓ Server-Sent Events (SSE): A one-way, persistent connection from server to client over HTTP, allowing the server to push
updates.

✓ WebSockets: A two-way, full-duplex, persistent connection between client and server.

Task Queues (Celery) & Message Brokers (Redis)

✓ Task Queue: Offloads long-running tasks (like sending emails or processing data) to background "worker" processes,
preventing the main application from blocking.

✓ Message Broker: An intermediary that enables different services to communicate asynchronously. It decouples the sender
(producer) from the receiver (consumer). Redis is often used as a fast, in-memory message broker.

Caching with Flask-Caching

✓ `@cache.cached()`: Caches the entire response of a Flask view function. The cache key is typically based on the request URL.
Different URLs for the same endpoint will result in separate cache entries.

✓ `@cache.memoize()`: Caches the return value of any function, not just a view. The cache key is generated from the function's
arguments. This is useful for caching the results of computationally expensive helper functions.

# Caches the entire response for '/user/123'

@app.route('/user/')
@cache.cached(timeout=60)
def get_user_profile(user_id):
user = fetch_user_from_db(user_id)
return render_template('profile.html', user=user)

# Caches the result of this specific calculation

@cache.memoize(timeout=300)
def calculate_complex_report(user_id): Page: 3 of 6
 # Caches the result of this specific calculation
@cache.memoize(timeout=300)
def calculate_complex_report(user_id):
# ... very slow calculation ...
return report_data

Web Security Concepts

CORS (Cross-Origin Resource Sharing)

✓ A browser security mechanism that restricts HTTP requests initiated from scripts to a different origin (domain, protocol, or port)
than the one that served the script.

✓ The server must include specific CORS headers (like `Access-Control-Allow-Origin: *`) to permit cross-origin requests.

CSRF (Cross-Site Request Forgery)

✓ An attack that tricks an authenticated user into submitting a malicious request to a web application they are logged into.
✓ Mitigation: Use anti-CSRF tokens. The server sends a unique, unpredictable token with the form, which must be sent back with
the request to be considered valid.

XSS (Cross-Site Scripting)

✓ An attack where malicious scripts are injected into otherwise trusted websites.
✓ Mitigation: Always validate and sanitize user input. Escape user-provided content before rendering it in the HTML to prevent it
from being executed as code.

Deeper Dive: Key PYQ Concepts with Examples

`v-if` vs. `v-show`

✓ `v-if` is "true" conditional rendering. It ensures that the element and its child components are destroyed and re-created during
toggles. It has higher toggle costs.

✓ `v-show` always keeps the element in the DOM and toggles its visibility using the CSS `display` property. It has higher initial
render costs but cheaper toggle costs.

REST API Idempotency

✓ An operation is idempotent if making the same request multiple times produces the same result as making it once.
✓ `GET`, `PUT`, `DELETE` are idempotent. Getting a resource, replacing a resource, or deleting a resource multiple times has the
same effect as doing it once.

✓ `POST` is not idempotent. Making multiple `POST` requests will create multiple new resources.

Vue Lifecycle Hook Execution Order

✓ The hooks fire in a predictable sequence. For example, `beforeCreate` -> `created` -> `beforeMount` -> `mounted`.
✓ In `beforeCreate`, you cannot access `data` or `methods`. In `created`, you can access `data` but not the DOM element (`this.$el`).
In `mounted`, you can access both.

new Vue({
el: '#app',
data: { message: 'Hello' },
beforeCreate() {
console.log('beforeCreate:', this.message); // undefined
},
created() {
console.log('created:', this.message); // 'Hello'
console.log('created $el:', this.$el); // undefined
}, Page: 4 of 6
mounted() {
 created() {
console.log('created:', this.message); // 'Hello'
console.log('created $el:', this.$el); // undefined
},
mounted() {
console.log('mounted $el:', this.$el); // The actual DOM element
}
})

`this` Context with `.call()`, `.bind()`, and `.apply()`

✓ These methods allow you to explicitly set the `this` value for a function call, which is crucial when a function needs to run in the
context of a specific object.

✓ `.call(thisContext, arg1, arg2)`: Executes the function immediately with a given `this` context and arguments provided
individually.

✓ `.apply(thisContext, [arg1, arg2])`: Same as `.call()`, but arguments are provided as an array.
✓ `.bind(thisContext)`: Creates a *new* function that, when called, will have its `this` context permanently set to the provided
value. It does not execute the function immediately.

Message Broker Architecture

✓ In a system with many services (N), direct point-to-point communication requires up to N*(N-1)/2 connections, which is complex
to manage (O(N²)).

✓ A central message broker simplifies this. Each service only needs one connection to the broker. The number of connections
grows linearly with the number of services (O(N)), making the system more scalable and maintainable.

Vue Slots and Data Scope

✓ Content passed into a component's slot is compiled in the **parent's scope**, not the child's. This means the data used inside
the `

Final Check: Crucial Exam Pointers

Web Storage API (`localStorage` vs. `sessionStorage`)

✓ `localStorage`: Stores data with no expiration date. The data will not be deleted when the browser is closed and will be available
the next day, week, or year.

✓ `sessionStorage`: Stores data for one session only. The data is deleted when the user closes the specific browser tab.
✓ Common Methods: Both objects share the same methods: `setItem(key, value)`, `getItem(key)`, `removeItem(key)`, and `clear()`.
Remember that values are stored as strings.

Vue Dynamic Class Binding

✓ You can pass an object to `:class` to dynamically toggle classes. The class name is the key, and a boolean is the value.
✓ You can also pass an array to apply a list of classes. This can be mixed with the object syntax for more complex logic.

<!­­ Object Syntax ­­>

<div :class="{ 'active': isActive, 'text­danger': hasError }"></div>

<!­­ Array Syntax ­­>

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

<!­­ Mixed Syntax ­­>

<div :class="[{ 'active': isActive }, errorClass]"></div>

JavaScript Closures Page: 5 of 6

JavaScript Closures

✓ A closure is a function that has access to the variables in its outer (enclosing) function's scope chain, even after the outer
function has returned.

✓ This is why in the `setTimeout` loop example with `var`, all callbacks see the final value of `i`. With `let`, each iteration gets its own
scope, creating a closure over that specific `i`.

function createCounter() {
let count = 0;
return function() { // This inner function is a closure
count++;
return count;
};
}

const counter1 = createCounter();

console.log(counter1()); // 1
console.log(counter1()); // 2 (It remembers the 'count' variable)

Event Propagation: Bubbling vs. Capturing

✓ When an event occurs on an element, it happens in two phases.

✓ Capturing Phase: The event travels from the outermost ancestor (the `window`) down to the target element.
✓ Bubbling Phase (Default): The event then "bubbles" up from the target element back to the `window`.
✓ You can listen for an event in the capturing phase by passing `{ capture: true }` or `true` as the third argument to
`addEventListener`. By default, listeners are attached to the bubbling phase.

© 2024 Modern Web Dev Notes. All points covered.

BY ~KarTiK᎞

Page: 6 of 6