08 - Frontend

HTML structure

The basic building blocks of web pages including , , and tags.

HTML lists

Unordered lists (

) use bullets, and ordered lists (
) use numbers.

HTML tags

Define elements such as

for headers, for images, and for links.

HTML file types

HTML defines structure, CSS defines style, and JS adds dynamic functionality.

CSS concepts

Separate structure from styling for reusability and faster loading.

JavaScript usage

Adds interactivity and is not related to Java.

JS definitions

Inline JS for small snippets, internal JS for specific pages, and external JS for reusability.

CSS methods

Inline CSS applies styles directly, internal CSS applies to specific pages, and external CSS applies to multiple pages.

Event Loop

The event loop is a mechanism in JavaScript that handles asynchronous operations by monitoring the call stack and task queue, ensuring efficient execution.

Callback Functions

Callback functions are passed as arguments to other functions and executed later, often used for asynchronous operations like network requests.

Promise States

pending, fulfilled, and rejected.

Async/Await

The async keyword defines a function that returns a promise, and the await keyword pauses execution until the promise resolves, simplifying asynchronous code.

Arrow Functions

Arrow functions provide a concise syntax for defining functions. They do not have their own this context, making them ideal for callback functions.

Function Types

JavaScript functions can be defined as named functions, anonymous functions, or arrow functions, each suited for different contexts.

Browser DevTools

The "Elements" tab in browser dev tools allows inspection and modification of the DOM directly for debugging and design purposes.

Single Page Applications (SPAs)

SPAs load the entire application as a single JavaScript file, with JavaScript dynamically updating the DOM for a seamless user experience.

Multiple Page Applications (MPAs)

MPAs load a new page for each request, often showing a blank screen during transitions but are easier to debug with traditional tools.

SPA Frameworks

Popular SPA frameworks include Angular, React, and Vue.js, each providing tools to build dynamic and responsive web applications.

Node.js

Node.js is a runtime built on Chrome's V8 JavaScript engine for executing JavaScript on the server side.

npm (Node Package Manager)

npm is a package manager for JavaScript, simplifying the installation and management of libraries and dependencies.

Vite

Vite is a build tool for modern web apps that uses esbuild for fast dependency bundling and offers Hot Module Reload (HMR).

React App Deployment

A typical React app development workflow includes installing dependencies (Node.js, npm, Vite), running the app locally, building a Docker container, and deploying it in the container.

DOM (Document Object Model)

The DOM is an object-oriented representation of a web page, independent of programming languages, providing an interface to interact with webpage elements.

DOM Manipulation

JavaScript can manipulate the DOM using methods like querySelectorAll, createElement, and appendChild to dynamically change content.

TypeScript

Superset of JavaScript with static typing and code analysis, developed by Microsoft. All JavaScript is valid TypeScript, but not vice versa.

Dynamic Typing

JavaScript allows variables to hold different types over time; e.g., adding a number and a string results in a concatenated string.

JavaScript Limitations

JavaScript lacks static typing, has limited object-oriented support, and originated as a client-side language.

Axios vs Fetch

Axios provides better backward compatibility and simpler data access compared to Fetch API.

TypeScript Syntax

TypeScript uses type annotations (e.g., string, number) to specify variable types, enhancing code clarity and error checking.

virtual DOM

A virtual representation of the DOM used by libraries like React to efficiently update and render changes.

JSX

A syntax extension for JavaScript that allows writing HTML-like code in React, which gets transformed into JavaScript.

React

JavaScript library for building user interfaces, re-rendering only changed components to optimize performance.

declarative vs imperative

Declarative programming specifies what to do (e.g., SQL), while imperative programming specifies how to do it (e.g., C++).

virtual DOM reconciliation

Process of syncing the virtual DOM with the real DOM by computing diffs and applying updates efficiently.

client-side rendering

Renders app in the user's browser, loads index.html and JS bundle, slower in browser but easier on the server.

server-side rendering

Renders app on the server, sends only HTML to the client, better SEO, faster in browser, but more server strain.

rendering

Converting code (e.g., JSX) into viewable, interactive content.

useState hook

Allows state maintenance within a component, e.g., fetch data from an API and display asynchronously.

useContext hook

Enables sharing state across components without passing Props.

state management tools

Recoil, Redux, MobX are alternatives based on app size/scale.

export default

Allows modules to export values/functions for simple imports, e.g., export default Header;.

jsx composable design

Breaking UI into reusable components like Course, CourseList, Student, etc., for scalable and maintainable design.

react lifecycle hooks

Methods like useEffect for managing component behavior during different lifecycle stages.

react routes

Define app navigation and data fetching using route parameters for dynamic content delivery.