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

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.

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: Somethin
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.

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

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):
# ... 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
},
mounted() {
console.log('mounted $el:', this.$el); // The actual DOM ele
}
})

`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 `