MAD-2 Theory: Modern Application Development 2 (Theory)

Topics covered

• Introduction to JavaScript

  • What is JavaScript?
  • Role of JavaScript in web development
  • JavaScript in browsers and Node.js
  • JavaScript vs HTML and CSS

• Variables and Data Types

  • var, let and const
  • Numbers, strings and booleans
  • null and undefined
  • Dynamic typing
  • Type conversion and coercion

• Operators

  • Arithmetic operators
  • Comparison operators
  • Logical operators
  • Assignment operators
  • Strict equality (===) vs loose equality (==)

• Control Flow

  • if, else and else if
  • switch
  • for and while loops
  • break and continue

• Functions

  • Function declarations
  • Function expressions
  • Parameters and return values
  • Arrow functions
  • Scope and variable visibility

• Arrays and Objects

  • Creating and accessing arrays
  • Array methods
  • Object properties and methods
  • Nested objects and arrays

• Error Handling

  • Syntax and runtime errors
  • try, catch and finally
  • Debugging with browser developer tools

Expected skills: Writing basic JavaScript programs, using variables and functions, manipulating arrays and objects and understanding control flow.

Topics covered

• Functions in Depth

  • First-class functions
  • Higher-order functions
  • Callback functions
  • Closures
  • Lexical scope

• Array Methods

  • map()
  • filter()
  • reduce()
  • forEach()
  • find() and some()
  • Method chaining

• Modern JavaScript (ES6+)

  • Template literals
  • Destructuring
  • Spread and rest operators
  • Default parameters
  • Optional chaining
  • Modules and imports/exports

• Asynchronous JavaScript

  • Synchronous vs asynchronous execution
  • Event loop basics
  • Callbacks
  • Promises
  • Promise chaining
  • async and await

• Working with APIs

  • Fetch API
  • HTTP requests
  • JSON parsing
  • Handling API responses
  • Error handling in asynchronous code

• Browser Storage

  • Local storage
  • Session storage
  • Reading and writing stored data

• JavaScript Objects and Prototypes

  • Object references
  • Prototypes
  • Classes
  • Constructors
  • Inheritance basics

Expected skills: Using advanced JavaScript features, handling asynchronous operations, working with promises and APIs, and writing reusable code.

Topics covered

• Web Frontend Architecture

  • Client-server model
  • Frontend and backend responsibilities
  • Browser rendering
  • Static and dynamic websites

• HTML and CSS Refresher

  • HTML document structure
  • Semantic HTML
  • CSS selectors
  • Box model
  • Flexbox and Grid
  • Responsive layouts

• DOM (Document Object Model)

  • DOM tree
  • Selecting elements
  • Modifying element content
  • Changing styles
  • Creating and removing elements

• Browser Events

  • Event listeners
  • Click and input events
  • Event propagation
  • Event delegation
  • Form events

• Forms and User Input

  • Input elements
  • Form validation
  • Handling submitted data
  • Preventing default form behaviour

• Frontend Application Structure

  • Separating HTML, CSS and JavaScript
  • Organizing code into modules
  • Reusable UI components
  • Managing frontend assets

• Browser Developer Tools

  • Inspecting elements
  • Console debugging
  • Network tab
  • Monitoring API requests

Expected skills: Creating interactive web pages, manipulating DOM, handling user events and organizing frontend code through JavaScript.

Topics covered

• Introduction to Vue

  • What is Vue.js?
  • Vue as a frontend framework
  • Declarative rendering
  • Reactive user interfaces
  • Vue application structure

• Vue Application Setup

  • Creating a Vue application
  • Project structure
  • Single-file components
  • Template, script and style sections

• Vue Templates

  • Text interpolation
  • Attribute binding
  • Conditional rendering
  • List rendering
  • Dynamic attributes

• Reactivity

  • Reactive state
  • ref()
  • reactive()
  • Updating the UI when data changes

• Event Handling

  • v-on
  • Event modifiers
  • Handling user interactions
  • Updating component state

• Form Handling

  • v-model
  • Two-way data binding
  • Input controls
  • Form submission

• Computed Properties and Watchers

  • computed()
  • watch()
  • Derived state
  • Reacting to state changes

• Component Fundamentals

  • Creating components
  • Reusing components
  • Component communication basics

Expected skills: Creating Vue applications, managing reactive state, using templates and building basic interactive components.

Topics covered

• API Fundamentals

  • REST API basics
  • HTTP methods
  • Request and response structure
  • JSON data
  • Status codes

• Connecting Vue to APIs

  • Fetching data
  • Using fetch() or Axios
  • API integration
  • Displaying API responses

• CRUD Operations

  • Create
  • Read
  • Update
  • Delete
  • Connecting UI actions with API endpoints

• Asynchronous Data Handling

  • Promises
  • async and await
  • Loading states
  • Error states
  • Empty results

• Forms and API Integration

  • Collecting form data
  • Submitting data to backend
  • Handling validation errors
  • Displaying success and failure messages

• Component-Based API Workflows

  • Passing API data to components
  • Updating the UI after mutations
  • Separating API logic from presentation

• API Debugging

  • Browser Network tab
  • Inspecting requests
  • Understanding response errors
  • CORS basics

Expected skills: Connecting Vue frontend to backend APIs, performing CRUD operations and updating UI according to API responses.

Topics covered

• Component Communication

  • Props
  • Events
  • Parent-child communication
  • Component reuse
  • Component composition

• Lifecycle Hooks

  • Component lifecycle
  • onMounted()
  • onUpdated()
  • onUnmounted()
  • Lifecycle-based operations

• Composition API

  • setup()
  • ref() and reactive()
  • computed()
  • watch()
  • Reusable composable functions

• Vue Router

  • Client-side routing
  • Route configuration
  • Dynamic routes
  • Route parameters
  • Navigation links
  • Programmatic navigation

• Single-Page Applications

  • SPA architecture
  • Client-side navigation
  • Route-based views
  • History mode

• Slots

  • Default slots
  • Named slots
  • Reusable layout components

• Advanced Forms

  • Form validation
  • Dynamic forms
  • Conditional form fields
  • Managing complex form state

• Application Structure

  • Component organization
  • Reusable logic
  • Separating responsibilities

Expected skills: Organize Larger Vue applications, implement routing, create reusable components and composables.

Topics covered

• State Management Fundamentals

  • Local component state
  • Shared application state
  • Prop drilling
  • State synchronization

• Centralized State

  • Global state concepts
  • Shared reactive data
  • State updates and actions
  • Managing state across components

• Pinia

  • Store creation
  • State
  • Getters
  • Actions
  • Accessing stores from components

• State and API Integration

  • Loading and error states
  • API data caching concepts
  • Updating shared state after requests
  • Managing server responses

• Persistent State

  • Browser storage
  • Persisting user preferences
  • Restoring application state

• State Design

  • Choosing local vs global state
  • Avoiding duplicated state
  • Organizing stores
  • Maintaining predictable updates

• Larger Application Architecture

  • Components, views and stores
  • Shared utilities
  • Reusable data logic
  • Managing complex frontend workflows

Expected skills: Managing shared state between multiple components and designing state architecture for scalable Vue applications.

Topics covered

• Authentication Fundamentals

  • Authentication vs authorization
  • User identity
  • Login and logout workflows
  • Session-based authentication
  • Token-based authentication

• Token-Based Authentication

  • Access tokens
  • Refresh tokens
  • JWT (JSON Web Token) structure
  • Token expiration
  • Token storage considerations

• API Design Principles

  • RESTful API design
  • Resource-oriented endpoints
  • HTTP methods
  • HTTP status codes
  • Request and response formats

• API Validation

  • Input validation
  • Data types and schemas
  • Handling invalid requests
  • Consistent error responses

• API Security

  • Authentication middleware
  • Authorization checks
  • Role-based access
  • Protecting endpoints
  • Secure handling of credentials

• Frontend Authentication

  • Login forms
  • Sending credentials
  • Storing and sending tokens
  • Protected routes
  • Handling expired sessions

• API Documentation

  • Endpoint documentation
  • Request and response examples
  • OpenAPI concepts
  • Testing API endpoints

Expected skills: Implementing secure authentication workflows, understanding token-based login, and designing well-structured APIs.

Topics covered

• Synchronous vs Asynchronous Processing

  • Request-response lifecycle
  • Long-running operations
  • Blocking operations
  • Background execution

• Background Jobs

  • Job queues
  • Task scheduling
  • Job execution
  • Job status tracking

• Celery

  • Introduction to Celery
  • Task definition
  • Task execution
  • Workers
  • Task queues

• Message Brokers

  • Role of message brokers
  • Redis as a broker
  • Queue-based communication
  • Sending tasks to workers

• Job Management

  • Job states
  • Success and failure
  • Retry mechanisms
  • Timeouts
  • Handling failed tasks

• Backend Integration

  • Triggering jobs from APIs
  • Returning job identifiers
  • Checking job status
  • Separating API requests from long-running tasks

• Practical Applications

  • Sending emails
  • Generating reports
  • Processing uploaded files
  • Scheduled data processing

Expected skills: Executing long-running tasks in the background and keeping API responses separate from background job processing.

Topics covered

• Service-Based Architecture

  • Monolithic vs service-based applications
  • Independent services
  • Service communication
  • Inter-service dependencies

• Messaging Fundamentals

  • Message producers and consumers
  • Message queues
  • Event-driven architecture
  • Asynchronous communication

• Redis-Based Messaging

  • Redis fundamentals
  • Publishing and subscribing
  • Message passing
  • Queue-based communication concepts

• Webhooks

  • What is a webhook?
  • Webhook endpoints
  • Event notifications
  • Sending HTTP callbacks
  • Receiving webhook payloads

• Webhook Security

  • Request verification
  • Shared secrets
  • Signature validation concepts
  • Avoiding unauthorized requests

• Reliability

  • Retries
  • Duplicate events
  • Idempotency
  • Failure handling

• Integrating Services

  • Triggering actions across services
  • Processing external events
  • Connecting independent backend components

Expected skills: Implementing asynchronous communication between services and understanding webhook-based event workflows.

Topics covered

• Web Application Performance

  • Frontend and backend performance
  • Response time
  • Latency and throughput
  • Identifying bottlenecks

• Frontend Optimization

  • Reducing unnecessary rendering
  • Lazy loading
  • Code splitting
  • Asset optimization
  • Efficient component design

• Backend Optimization

  • Efficient API endpoints
  • Database query optimization
  • Reducing unnecessary processing
  • Request handling

• Caching

  • Cache fundamentals
  • Client-side caching
  • Server-side caching
  • Redis caching
  • Cache invalidation
  • Time-to-live (TTL)

• Performance Measurement

  • Measuring response times
  • Profiling
  • Browser performance tools
  • Backend monitoring
  • Load testing concepts

• Database and API Performance

  • Efficient queries
  • Pagination
  • Reducing payload sizes
  • API response optimization

• Scalability

  • Handling concurrent users
  • Horizontal and vertical scaling
  • Resource utilization
  • Performance trade-offs

Expected skills: Measuring application performance, identifying bottlenecks, and applying caching and optimization techniques.

Topics covered

• Project Planning

  • Understanding project requirements
  • Identifying application features
  • Defining frontend and backend responsibilities
  • Designing application architecture

• Frontend Development

  • Vue components
  • Routing
  • Forms
  • State management
  • API integration

• Backend Development

  • API endpoint design
  • Authentication
  • Database integration
  • Request validation

• Advanced Features

  • Background jobs
  • Inter-service messaging
  • Webhooks
  • Caching

• Testing and Debugging

  • Frontend testing
  • API testing
  • Error handling
  • Debugging integration issues

• Performance and Deployment

  • Measuring application performance
  • Optimizing critical workflows
  • Deployment considerations

• Documentation

  • Project setup instructions
  • API documentation
  • Describing architecture
  • Demonstrating application features

Expected skills: Develop, integrate, and test a complete web application by combining Vue frontend and backend APIs.