Internet Programming
1. NPM (Node Package Manager)
1. Definition: NPM is the default package manager for [Link], used to manage project
dependencies and share reusable code packages.
2. Registry: It provides access to a public registry with thousands of open-source packages for
[Link] and JavaScript projects.
3. [Link]: NPM uses the [Link] file to keep track of installed packages, versions,
and project metadata.
4. Install Packages: You can install packages with npm install package_name, downloading
them and their dependencies.
5. Publish Packages: Developers can create their own packages and publish them using npm
publish.
6. Version Control: NPM supports semantic versioning, helping maintain stable, predictable
package updates.
7. Scripts: NPM lets you run custom project scripts (e.g. test, build) defined in [Link].
8. Global vs Local Install: Packages can be installed globally (available anywhere) or locally
(specific to a project).
9. Updating: Use npm update to upgrade packages based on the version rules set
in [Link].
10. Community Support: NPM has extensive documentation and an active community for
troubleshooting.
2. [Link], its Modules, and Features
A. What is [Link]?
1. Server-side Platform: [Link] is a runtime environment for running JavaScript code outside
the browser, mainly for server-side applications.
2. Built on V8 Engine: Uses Google Chrome's V8 JavaScript engine for fast execution.
3. Event-driven Architecture: Handles asynchronous events efficiently, ideal for scalable
network apps.
4. Single-threaded: [Link] uses a single-thread event loop, but can handle multiple client
requests simultaneously.
B. Types of [Link] Modules:
5. Core Modules: Built-in, like fs, http, path, no installation needed.
6. Local Modules: User-defined modules created for specific tasks within a project.
7. Third-party Modules: External modules installed via NPM (e.g., Express, Lodash).
C. Features:
8. Fast and Lightweight: Non-blocking I/O and lightweight APIs.
9. No Buffering: Processes data in chunks.
10. Scalable: Good for real-time applications (chat, streaming)
3. Difference between Redux, Flux, and MVC.
Criterion Flux Redux MVC
Data Flow Unidirectional Unidirectional, single store Bidirectional
Stores Multiple Single Model (logic/data)
State Management By Stores Global state in a store Multiple models
Actions/Controller Actions dispatch to dispatcher Actions handled by reducers Controller manages traffic
Large React UIs, predictable Complex apps, time- Traditional web/M
Use Case flow travel/debug frameworks
Central dispatcher with stores & Single immutable state, pure Separation:
Core idea views reducers Model/View/Controller
Flux and Redux focus on predictable and testable data flows for complex UIs, while MVC
fits traditional applications.
1.
• MVC: Complex for large-scale UIs.
4. Routing in [Link] (with Example)
1. Definition: Routing is defining application endpoints to respond to client requests (GET,
POST, etc).
2. HTTP Methods: Each route corresponds to an HTTP method (get, post, put, delete).
3. URL Patterns: Routes specify patterns like /home or /user/:id for dynamic URLs.
4. Request-Response: Each route gets a req (request) and res (response) object.
5. Middleware: You can use middleware to process requests before route handlers.
6. Chained Handlers: Multiple callbacks can handle one route.
7. Error Handling: Custom error handling possible for routes.
8. Route Parameters: Extract variables from URLs, e.g., /user/:name.
9. Example:
js
[Link]('/hello', (req, res) => { [Link]('Hello World!'); });
10. Integration: Routers can be split across files for modular code.
5. Features of [Link] and Hello World Program
Features:
1. Minimal, Fast Framework: Lightweight and quick start.
2. Routing: Built-in routing system.
3. Middleware Support: Easily insert functions for requests.
4. Template Engines: Integrates with Pug, EJS, etc.
5. Static Files: Serve images, CSS, JS easily.
6. Error Handling: Simple error management.
7. REST APIs: Build APIs quickly.
8. Request Parsers: For JSON or URL data.
9. Third-party Middleware: Use logging, authentication, etc.
10. Community: Large number of plugins and tutorials.
Hello World Example:
js
const express = require('express');
const app = express();
[Link]('/', (req, res) => { [Link]('Hello World!'); });
[Link](3000);
6. Buffers and Streams in [Link] (with Example)
Buffers:
1. Definition: Temporary storage for raw binary data.
2. Creation: [Link](size) creates buffer of given size.
3. Used For: File I/O, TCP streams, manipulation of binary data.
4. No Encoding: Buffers store bytes, not characters.
5. Conversion: You can convert to strings using encoding.
Streams:
6. Definition: Objects to read/write data chunk by chunk.
7. Types: Readable, Writable, Duplex, Transform streams.
8. Efficient I/O: Useful for large files or network data.
9. Events: 'data', 'end', 'error' events for stream handling.
10. Example:
js
const fs = require('fs');
const readStream = [Link]('[Link]');
[Link]('data', chunk => { [Link](chunk); });
7. NPM (Repeat, see answer 1)
8. Asynchronous Programming in [Link]
1. Definition: Non-blocking code execution, allowing [Link] to process multiple tasks.
2. Event Loop: Handles asynchronous events using the loop mechanism.
3. Callbacks: Functions passed as arguments, executed after a task finishes.
4. Promises: Modern tool for async code, replacing nested callbacks.
5. Async/Await: Syntactic sugar for working with Promises in a readable way.
6. API Calls: Useful for database, network, and file system interactions.
7. I/O Operations: Reads/writes are done asynchronously to increase performance.
8. Race Condition Avoidance: Careful structuring prevents issues with multiple async tasks.
9. Examples:
js
[Link]('[Link]', (err, data) => { /* handle data */ });
10. Scalability: Allows many clients to be handled without blocking.
9. Refs in React: When to Use/Not Use
1. Definition: Refs provide a way to access DOM nodes or React elements directly.
2. Creation: Use [Link]() or callback refs.
3. Usage: Managing focus, selecting text, triggering animations.
4. Third-party Integration: Needed when using non-React libraries needing DOM access.
5. Avoid State Management: Don’t use refs for dynamic UI data (use state instead).
6. Forms: Sometimes needed for complex uncontrolled forms.
7. Read Values: Access value, size, or position of form elements.
8. Updates: Refs do not cause component re-renders.
9. When Not To Use: For most data-flow tasks (props/state better), or when refactoring towards
React best practices.
10. Potential Problems: Excessive use can make apps harder to test/maintain.
10. Routing in [Link] (Example)
1. Express Router: Use Express framework for simple [Link] routing.
2. Method Handlers: Setup routes for GET, POST, etc.
3. Parameters: Dynamic routes, /user/:id, access via [Link].
4. Request/Response: Handle incoming data and send back responses.
5. Middleware: Can conditionally process requests before reaching routes.
6. Multiple Routes: Support for different endpoints, e.g., /home, /about, /contact.
7. Chaining: Can .get(), .post(), etc., on same router.
8. Modular Routers: Organize routes in separate files/modules.
9. Error Handling: Route not found or error route.
10. Example:
js
[Link]('/user/:name', (req, res) => { [Link]('User: ' + [Link]); });
11. Flux Architecture
1. One-way Data Flow: Actions → Dispatcher → Stores → Views.
2. Action: Encapsulates user events/data changes.
3. Dispatcher: Central hub, distributes actions to stores.
4. Store: Maintains application state, updates on action.
5. View: React components, re-render when store changes.
6. Decoupling: Separation of UI and data logic.
7. Predictability: Easy to follow application changes.
8. Scalability: Manages large apps with many components.
9. No Direct Store Update: Components can’t directly alter stores; must use actions.
10. Debugging: Clear sequence helps in debugging issues.
12. [Link] File System Module
1. Module Name: fs, provides file system utilities.
2. Read/Write Files: Use [Link], [Link] for reading and writing.
3. Append Files: Add data using [Link].
4. Delete Files: Remove files with [Link].
5. Directories: Create with [Link], read contents with [Link].
6. Synchronous & Asynchronous: All methods have both variants (e.g., [Link]).
7. Streams: Read/write files efficiently using streams ([Link]).
8. Rename/Move: Use [Link] to move or rename files.
9. Permissions: Check and modify file permissions via [Link].
10. Error Handling: Use callback functions to handle errors.
13. [Link]: What & Features
1. Definition: Web framework for [Link] simplifying server creation.
2. Routing: Directs requests based on URLs and methods.
3. Middleware: Functions layered to process requests and responses.
4. Template Support: Integrates with view engines like EJS, Pug.
5. RESTful Services: Easily create APIs with various HTTP methods.
6. Static Files: Serve images, CSS, documents.
7. Request Parsing: Reads incoming JSON, form data, etc.
8. Error Handling: Central error management system.
9. Session/Cookies: Integrates packages for session and cookies.
10. Community & Plugins: Rich ecosystem of middleware and helpful modules.
1. You have been asked to develop a GUI for hotel management. How will you divide the
functionality between front end, back end & database?
1. Front End: User Interface Layer
o Responsible for all visual components and user interactions (login forms, booking
interface).
o Designed using HTML, CSS, JavaScript, or frameworks like React/Angular.
o Sends requests to the backend (API calls) for user tasks like booking, check-in/out.
o Handles input validation and provides feedback to users.
o Renders hotel data (rooms, availability, bills) dynamically using data from backend.
2. Back End: Logic and Server Layer
o Executes the business logic (booking, cancellation, calculating bills).
o Handles authentication and authorization for users and staff.
o Exposes APIs (REST, GraphQL) for front end to communicate securely.
o Processes user requests, updates the database, sends responses.
o Integrates with notification services (SMS, email confirmations).
3. Database: Data Storage Layer
o Stores all persistent data: guest profiles, booking records, room information,
transactions.
o Ensures data integrity with relational (MySQL, PostgreSQL) or NoSQL (MongoDB)
DBMS.
o Supports queries for searching, filtering, and reporting.
o Regularly backs up hotel management data for security.
o Maintains relationships (e.g., guests ↔ bookings, rooms ↔ services).
4. Separation of Concerns
o Each layer is independent; front end never directly accesses the database.
o Changes in one layer (like UI redesign) do not affect logic or data storage.
o Backend acts as a mediator, ensuring security and consistency.
5. Example Technologies
o Front End: [Link]
o Back End: [Link] with Express
o Database: MySQL
2. [Link] Program for File Operations
a) Create a new file & add data
js
const fs = require('fs');
[Link]('[Link]', 'Hotel Booking Data', err => {
if (err) throw err;
[Link]('File created and data added!');
});
b) Append data to the same file
js
[Link]('[Link]', '\nMore booking info', err => {
if (err) throw err;
[Link]('Data appended!');
});
c) Read file data (without getting buffered data)
js
[Link]('[Link]', 'utf8', (err, data) => {
if (err) throw err;
[Link](data); // Prints content as string
});
d) Rename the file
js
[Link]('[Link]', '[Link]', err => {
if (err) throw err;
[Link]('File renamed!');
});
e) Delete the file
js
[Link]('[Link]', err => {
if (err) throw err;
[Link]('File deleted!');
});
Key Notes:
• All functions are asynchronous (do not block main thread).
• Error handling (err) is essential in production code.
• Use proper permissions when dealing with files.
3. Event Handling in [Link]
1. Event-Driven Architecture: [Link] uses the event-driven paradigm; core modules like
HTTP are built on [Link]
2. EventEmitter Class: All event handling in [Link] is based on the EventEmitter class from
the events [Link]
3. Emitting Events: [Link]('eventName') triggers an event.
4. Listening to Events: Register listeners using [Link]('eventName', handler).
5. Multiple Listeners: Multiple callbacks can listen for the same event.
6. Error Events: Handle errors using the 'error' event to prevent crashes.
7. Custom Events: Applications can create and emit their own events.
8. One-time Listeners: Use [Link]('event', handler) for single execution.
9. Use Cases: Useful for server requests, real-time updates, notifications.
10. Example:
js
const EventEmitter = require('events');
const event = new EventEmitter();
[Link]('book', () => { [Link]('Room booked!'); });
[Link]('book');
4. Short Note on Cookies & Session
1. Cookies: Small pieces of data stored on client side, sent by server, included in all HTTP
requests to same domain.
2. Purpose of Cookies: Store user preferences, session IDs, tracking info,
[Link]
3. Creation: Set using HTTP response header (Set-Cookie) or JavaScript on browser.
4. Sessions: Server-side storage to maintain user state across different [Link]
5. How Sessions Use Cookies: Typically, a unique session ID is stored as a cookie on the client;
rest of the session data is server-side.
6. Expiration: Cookies can be persistent (expire after set time) or session-based (removed on
browser close).
7. Security: Cookies can be made HTTP-only, Secure, and have SameSite attributes to reduce
security risks.
8. Use Cases: Login persistence, shopping carts, tracking activity, personalized settings.
9. Difference: Cookie data lives on client, session data is mainly server-side with only the
session ID as a cookie on the client.
10. Risks: Cookies can be intercepted (unless secure), sessions vulnerable if session IDs are
stolen.
5. React Props
1. Definition: “Props” (short for properties) are inputs to React components.w3schools
2. Passing Data: Enable parent components to pass data or functions to child
components.w3schools
3. Read-Only: Props are immutable, child components cannot modify them.
4. Usage Syntax: Passed as HTML-like attributes: <Car brand="Ford" />.
5. Accessing Props: Received in function components as function argument (often named
props).
6. Dynamic Rendering: Facilitate dynamic UIs by rendering different output based on props.
7. Example:
js
function Welcome(props) {
return <h1>Hello, {[Link]}</h1>;
}
8. Type Safety: PropTypes or TypeScript can define expected prop types.
9. Default Props: React allows specifying default values for props.
10. Children Prop: Special prop to access nested content or elements between component tags.
6. Hooks in React JS
1. Definition: Hooks are functions that let you "hook into" React state and lifecycle features
from function [Link]
2. useState: Allows state management in functional components.
3. useEffect: Side-effects such as data fetching, subscriptions, or manually changing the DOM.
4. useContext: Access context data without prop drilling.
5. useRef: Store mutable values – like referencing DOM nodes, similar to instance variables.
6. useReducer: Handles complex state management, an alternative to useState.
7. Custom Hooks: Developers can create reusable custom logic hooks.
8. Rules of Hooks: Only call hooks at the top level of components or custom hooks; not inside
conditions or loops.
9. Migration Path: Enable functional components to do what only class components could
earlier (like lifecycle methods).
10. Benefits: Less boilerplate, improved code reusability, cleaner logic organization.
