Javascript

Asynchronous programming is at the heart of Node.js. Here are practical strategies to master async operations. Understanding Async Patterns Callbacks // Traditional callback pattern function readFile(callback) { fs.readFile('file.txt', 'utf8', (err, data) => { if (err) return callback(err); callback(null, data); }); } Promises // Promise-based function readFile() { return new Promise((resolve, reject) => { fs.readFile('file.txt', 'utf8', (err, data) => { if (err) reject(err); else resolve(data); }); }); } Async/Await // Modern async/await async function readFile() { try { const data = await fs.promises.readFile('file.txt', 'utf8'); return data; } catch (err) { throw err; } } Common Patterns Sequential Execution // Execute operations one after another async function sequential() { const user = await getUser(userId); const profile = await getProfile(user.id); const posts = await getPosts(user.id); return { user, profile, posts }; } Parallel Execution // Execute operations in parallel async function parallel() { const [user, profile, posts] = await Promise.all([ getUser(userId), getProfile(userId), getPosts(userId) ]); return { user, profile, posts }; } Race Conditions // Get first resolved promise async function race() { const result = await Promise.race([ fetchFromAPI1(), fetchFromAPI2(), timeout(5000) // Fallback ]); return result; } Error Handling Try-Catch with Async/Await async function handleErrors() { try { const data = await fetchData(); return data; } catch (error) { if (error.code === 'ENOENT') { // Handle file not found } else if (error.code === 'ECONNREFUSED') { // Handle connection refused } else { // Handle other errors } throw error; } } Promise Error Handling // Chain error handling fetchData() .then(data => processData(data)) .catch(error => { console.error('Error:', error); return fallbackData(); }) .finally(() => { cleanup(); }); Advanced Patterns Retry Logic async function retry(fn, maxRetries = 3) { for (let i = 0; i < maxRetries; i++) { try { return await fn(); } catch (error) { if (i === maxRetries - 1) throw error; await sleep(1000 * (i + 1)); // Exponential backoff } } } Timeout Pattern function withTimeout(promise, ms) { return Promise.race([ promise, new Promise((_, reject) => setTimeout(() => reject(new Error('Timeout')), ms) ) ]); } // Usage const data = await withTimeout(fetchData(), 5000); Batch Processing async function processBatch(items, batchSize = 10) { for (let i = 0; i < items.length; i += batchSize) { const batch = items.slice(i, i + batchSize); await Promise.all(batch.map(item => processItem(item))); } } Best Practices 1. Always Await Promises // Bad: Fire and forget asyncFunction(); // Unhandled promise // Good: Always await await asyncFunction(); 2. Use Promise.all for Independent Operations // Good: Parallel execution const [users, posts, comments] = await Promise.all([ getUsers(), getPosts(), getComments() ]); 3. Handle Rejections // Always handle promise rejections process.on('unhandledRejection', (reason, promise) => { console.error('Unhandled Rejection:', reason); }); Conclusion Mastering async operations requires: ...

Understanding Node.js architecture is crucial for building scalable applications. Let’s dive into the event loop, async operations, and how Node.js handles concurrency. The Event Loop Node.js uses a single-threaded event loop to handle asynchronous operations efficiently. Event Loop Phases // Simplified event loop phases ┌───────────────────────────┐ │ ┌─────────────────────┐ │ │ │ Timers │ │ // setTimeout, setInterval │ └─────────────────────┘ │ │ ┌─────────────────────┐ │ │ │ Pending Callbacks │ │ // I/O callbacks │ └─────────────────────┘ │ │ ┌─────────────────────┐ │ │ │ Idle, Prepare │ │ // Internal use │ └─────────────────────┘ │ │ ┌─────────────────────┐ │ │ │ Poll │ │ // Fetch new I/O events │ └─────────────────────┘ │ │ ┌─────────────────────┐ │ │ │ Check │ │ // setImmediate callbacks │ └─────────────────────┘ │ │ ┌─────────────────────┐ │ │ │ Close Callbacks │ │ // socket.on('close') │ └─────────────────────┘ │ └───────────────────────────┘ How It Works // Example: Understanding execution order console.log('1'); setTimeout(() => console.log('2'), 0); Promise.resolve().then(() => console.log('3')); console.log('4'); // Output: 1, 4, 3, 2 // Why: // - Synchronous code runs first (1, 4) // - Microtasks (Promises) run before macrotasks (setTimeout) // - Event loop processes callbacks Asynchronous Operations Callbacks // Traditional callback fs.readFile('file.txt', (err, data) => { if (err) { console.error(err); return; } console.log(data); }); Promises // Promise-based fs.promises.readFile('file.txt') .then(data => console.log(data)) .catch(err => console.error(err)); // Async/await async function readFile() { try { const data = await fs.promises.readFile('file.txt'); console.log(data); } catch (err) { console.error(err); } } Event Emitters const EventEmitter = require('events'); class MyEmitter extends EventEmitter {} const myEmitter = new MyEmitter(); myEmitter.on('event', (data) => { console.log('Event received:', data); }); myEmitter.emit('event', 'Hello World'); Concurrency Model Single-Threaded but Non-Blocking // Node.js handles I/O asynchronously const http = require('http'); // This doesn't block http.get('http://example.com', (res) => { res.on('data', (chunk) => { console.log(chunk); }); }); // This continues immediately console.log('Request sent, continuing...'); Worker Threads for CPU-Intensive Tasks // For CPU-intensive operations const { Worker, isMainThread, parentPort } = require('worker_threads'); if (isMainThread) { const worker = new Worker(__filename); worker.postMessage('Start calculation'); worker.on('message', (result) => { console.log('Result:', result); }); } else { parentPort.on('message', (msg) => { // Heavy computation const result = performHeavyCalculation(); parentPort.postMessage(result); }); } Scaling Strategies Cluster Module const cluster = require('cluster'); const os = require('os'); if (cluster.isMaster) { const numWorkers = os.cpus().length; for (let i = 0; i < numWorkers; i++) { cluster.fork(); } cluster.on('exit', (worker) => { console.log(`Worker ${worker.id} died`); cluster.fork(); // Restart worker }); } else { // Worker process require('./server.js'); } Load Balancing // PM2 for process management // pm2 start app.js -i max // Or use nginx/HAProxy for load balancing Best Practices 1. Avoid Blocking the Event Loop // Bad: Blocks event loop function heavyComputation() { let result = 0; for (let i = 0; i < 10000000000; i++) { result += i; } return result; } // Good: Use worker threads or break into chunks function asyncHeavyComputation() { return new Promise((resolve) => { setImmediate(() => { // Process in chunks resolve(computeChunk()); }); }); } 2. Use Streams for Large Data // Bad: Loads entire file into memory const data = fs.readFileSync('large-file.txt'); // Good: Stream processing const stream = fs.createReadStream('large-file.txt'); stream.on('data', (chunk) => { processChunk(chunk); }); 3. Handle Errors Properly // Always handle errors in async operations async function fetchData() { try { const data = await fetch('http://api.example.com'); return data; } catch (error) { // Log and handle error console.error('Fetch failed:', error); throw error; } } Performance Tips 1. Connection Pooling // Database connection pooling const pool = mysql.createPool({ connectionLimit: 10, host: 'localhost', user: 'user', password: 'password', database: 'mydb' }); 2. Caching // Use Redis for caching const redis = require('redis'); const client = redis.createClient(); async function getCachedData(key) { const cached = await client.get(key); if (cached) return JSON.parse(cached); const data = await fetchData(); await client.setex(key, 3600, JSON.stringify(data)); return data; } 3. Compression // Enable gzip compression const compression = require('compression'); app.use(compression()); Common Pitfalls 1. Callback Hell // Bad: Nested callbacks fs.readFile('file1.txt', (err, data1) => { fs.readFile('file2.txt', (err, data2) => { fs.readFile('file3.txt', (err, data3) => { // Deep nesting }); }); }); // Good: Use async/await async function readFiles() { const [data1, data2, data3] = await Promise.all([ fs.promises.readFile('file1.txt'), fs.promises.readFile('file2.txt'), fs.promises.readFile('file3.txt') ]); } 2. Unhandled Promise Rejections // Always handle promise rejections process.on('unhandledRejection', (reason, promise) => { console.error('Unhandled Rejection:', reason); // Log and handle }); Conclusion Node.js architecture is powerful because: ...

This post distills the key ideas from the published DEV article “Frontend Performance Optimization: A Comprehensive Guide 🚀” into a concise, production-focused playbook. What matters Fast first paint and interaction: prioritize above-the-fold content, cut JS weight, avoid layout shifts. Ship less: smaller bundles, fewer blocking requests, cache aggressively. Ship smarter: load what’s needed when it’s needed (on demand and in priority order). Core techniques 1) Selective rendering Render only what is visible (e.g., IntersectionObserver + skeletons). Defer heavy components until scrolled into view. 2) Code splitting & dynamic imports Split by route/feature; lazy-load non-critical views. Example (React): const Page = lazy(() => import("./Page")); <Suspense fallback={<div>Loading…</div>}> <Page /> </Suspense>; 3) Prefetching & caching Prefetch likely-next routes/assets (<link rel="prefetch"> or router prefetch). Pre-warm API data with React Query/Next.js loader functions. 4) Priority-based loading Preload critical CSS/hero imagery: <link rel="preload" as="style" href="styles.css">. Use defer/async for non-critical scripts. 5) Compression & transfer Enable Brotli/Gzip at the edge; pre-compress static assets in CI/CD. Serve modern formats (AVIF/WebP) and keep caching headers long-lived. 6) Loading sequence hygiene Order: HTML → critical CSS → critical JS → images/fonts → analytics. Avoid long main-thread tasks; prefer requestIdleCallback for non-urgent work. 7) Tree shaking & dead-code elimination Use ESM named imports; avoid import *. Keep build in production mode with minification + module side-effects flags. Measurement & guardrails Track Core Web Vitals (LCP, INP, CLS) plus TTFB and bundle size per release. Run Lighthouse/WebPageTest in CI; fail builds on regressions above agreed budgets. Monitor real-user metrics (RUM) to validate improvements after deploys. Quick starter checklist Lazy-load routes and heavy widgets. Preload hero font/hero image; inline critical CSS if needed. Turn on Brotli at CDN; cache static assets with versioned filenames. Set performance budgets (JS < 200KB gz, LCP < 2.5s p75, INP < 200ms). Automate audits in CI and watch RUM dashboards after each release. Bottom line: Combine “ship less” (smaller, shaken, compressed bundles) with “ship smarter” (prioritized, on-demand loading) and enforce budgets with automated checks to keep your app fast over time.

Coming from JavaScript to Rust? Here’s a practical guide to help you make the transition. Why Rust? Rust offers: Memory safety without garbage collection Performance comparable to C/C++ Modern tooling and package management WebAssembly support for web development Growing ecosystem with active community Key Differences 1. Ownership System Rust’s ownership system is unique: // Rust: Ownership let s1 = String::from("hello"); let s2 = s1; // s1 is moved to s2 // println!("{}", s1); // Error: s1 is no longer valid // JavaScript: Reference let s1 = "hello"; let s2 = s1; // s1 is still valid console.log(s1); // Works fine 2. Mutability Rust requires explicit mutability: ...

TypeScript has become the de facto standard for large-scale JavaScript applications. Here are the best practices to write better type-safe code in 2025. 1. Use Strict Mode Always enable strict mode in tsconfig.json: { "compilerOptions": { "strict": true, "noImplicitAny": true, "strictNullChecks": true, "strictFunctionTypes": true, "strictBindCallApply": true, "strictPropertyInitialization": true, "noImplicitThis": true, "alwaysStrict": true } } 2. Prefer Interfaces for Object Shapes Use interfaces for object shapes, types for unions/intersections: // Good: Interface for object shape interface User { id: string; name: string; email: string; } // Good: Type for union type Status = 'pending' | 'approved' | 'rejected'; // Good: Type for intersection type AdminUser = User & { role: 'admin' }; 3. Use Discriminated Unions Make type narrowing easier with discriminated unions: ...

Don’t just be a tool user! Let’s build a frontend error monitoring SDK from scratch. This hands-on guide will walk you through creating your own error tracking system. Why Build Your Own SDK? While there are excellent error monitoring services like Sentry, Rollbar, and Bugsnag, building your own SDK helps you: Understand how error monitoring works under the hood Customize error tracking to your specific needs Learn valuable debugging and monitoring concepts Reduce dependency on third-party services Core Features Our SDK will include: ...

The question “Will WebAssembly kill JavaScript?” has been circulating in the developer community for years. Let’s explore this topic with a practical perspective. What is WebAssembly? WebAssembly (WASM) is a binary instruction format for a stack-based virtual machine. It’s designed as a portable compilation target for high-level languages like C, C++, Rust, and Go, enabling deployment on the web for client and server applications. JavaScript’s Strengths JavaScript has several advantages that make it unlikely to be completely replaced: ...

Phases refresher timers → pending → idle/prepare → poll → check → close callbacks. Microtasks (Promises/queueMicrotask) run after each phase; process.nextTick runs before microtasks. Pitfalls Long JS on main thread blocks poll → delays I/O; move CPU work to worker threads. nextTick storms can starve I/O; prefer setImmediate when deferring. Unhandled rejections crash (from Node 15+ default); handle globally in prod. Debugging NODE_DEBUG=async_hooks or --trace-events-enabled --trace-event-categories node.async_hooks. Measure event loop lag: perf_hooks.monitorEventLoopDelay(). Profile CPU with node --inspect + Chrome DevTools; use flamegraphs for hotspots. Practices Limit synchronous JSON/crypto/zlib; offload to worker threads or native modules. Keep microtask chains short; avoid deep promise recursion. Use AbortController for cancellable I/O; always clear timers. Checklist Monitor event loop lag & heap usage. Worker pool sized for CPU tasks; main loop kept light. Errors and rejections centrally handled; graceful shutdown in place.

Optimizing React applications is crucial for better user experience. Here are proven techniques. 1. Memoization React.memo const ExpensiveComponent = React.memo(({ data }) => { return <div>{processData(data)}</div>; }, (prevProps, nextProps) => { return prevProps.data.id === nextProps.data.id; }); useMemo const expensiveValue = useMemo(() => { return computeExpensiveValue(a, b); }, [a, b]); useCallback const handleClick = useCallback(() => { doSomething(id); }, [id]); 2. Code Splitting React.lazy const LazyComponent = React.lazy(() => import('./LazyComponent')); function App() { return ( <Suspense fallback={<div>Loading...</div>}> <LazyComponent /> </Suspense> ); } 3. Virtualization import { FixedSizeList } from 'react-window'; function VirtualizedList({ items }) { return ( <FixedSizeList height={600} itemCount={items.length} itemSize={50} > {({ index, style }) => ( <div style={style}>{items[index]}</div> )} </FixedSizeList> ); } 4. Avoid Unnecessary Renders // Bad: Creates new object on every render <ChildComponent config={{ theme: 'dark' }} /> // Good: Use useMemo or constant const config = useMemo(() => ({ theme: 'dark' }), []); <ChildComponent config={config} /> Best Practices Memoize expensive computations Split code by routes Virtualize long lists Avoid inline functions/objects Use production builds Conclusion Optimize React apps for better performance! ⚡