Frontend

This note condenses the DEV article “Mastering Frontend Performance: Harnessing the Power of Caching” into actionable steps for modern apps. Why cache Reduce network and CPU cost for repeated data/computation. Improve perceived speed and resilience to flaky networks. Keep UIs responsive under load. Layers to combine HTTP caching: set Cache-Control, ETag, Last-Modified, stale-while-revalidate for API/static responses; prefer immutable, versioned assets. Client memoization: cache expensive computations/render data (useMemo, useCallback, memoized selectors). Data caching: use React Query/SWR/Apollo to dedupe fetches, retry, refetch on focus. Service worker (when appropriate): offline/near-edge caching for shell + static assets. React hook hygiene Memoize derived data: useMemo(() => heavyCompute(input), [input]). Memoize callbacks passed to children to avoid re-renders: useCallback(fn, deps). Keep props stable; avoid recreating objects/functions each render. HTTP cache playbook Static assets: long max-age + immutable on versioned filenames. APIs: choose strategy per route: idempotent reads: max-age/stale-while-revalidate with ETag. personalized or sensitive data: no-store. list endpoints: shorter max-age + revalidation. Prefer CDN edge caching; compress (Brotli) and serve modern formats (AVIF/WebP). UI checks No spinner longer than a couple of seconds; use skeletons and optimistic updates where safe. Avoid layout shift when cached data arrives—reserve space. Track Core Web Vitals (LCP/INP/CLS) and hit-rate for key caches. Quick checklist Versioned static assets + long-lived caching headers. API cache policy per route with ETag/stale-while-revalidate. React memoization for heavy work and stable callbacks. Data-layer cache (React Query/SWR) with sensible stale times + retries. RUM/CI dashboards watching Web Vitals and cache hit rates. Takeaway: Combine HTTP caching, client memoization, and data-layer caches to ship faster pages and keep them fast under real traffic.

This article summarizes the DEV post “Key Performance Metrics for Web Apps and How to Measure Them,” focusing on the most important signals and how to capture them. Core metrics LCP (Largest Contentful Paint): loading speed; target < 2.5s p75. INP/TTI (Interaction to Next Paint / Time to Interactive): interactivity; target INP < 200ms p75. FCP (First Contentful Paint): first visual response. TTFB (Time to First Byte): server responsiveness. Bundle size & request count: total transferred bytes and requests. Measurement toolbox Lighthouse: automated audits; budgets and suggestions. WebPageTest: multi-location runs, filmstrips, waterfalls. RUM (GA or custom): real-user timing for live traffic. React profiler & perf tools: find slow renders/update frequency. Webpack/Vite bundle analyzer: visualize bundle composition and dead weight. Optimization reminders Ship less JS/CSS; enable tree shaking/code splitting. Compress and cache static assets; serve modern image formats. Trim request count; inline critical CSS for hero; defer non-critical JS. Watch layout stability; reserve space to avoid CLS hits. Set and enforce budgets (JS gz < 200KB, LCP < 2.5s p75, INP < 200ms). Takeaway: Track a small, high-signal set of metrics with both lab (Lighthouse/WPT) and field (RUM) data, then enforce budgets so regressions fail fast.

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! ⚡

Vue 3’s Composition API provides better code organization. Here’s how to use it effectively. Setup import { ref, computed, watch } from 'vue'; export default { setup() { const count = ref(0); const doubled = computed(() => count.value * 2); watch(count, (newVal) => { console.log('Count changed:', newVal); }); return { count, doubled }; } } Script Setup <script setup> import { ref, computed } from 'vue'; const count = ref(0); const doubled = computed(() => count.value * 2); function increment() { count.value++; } </script> Composables // useCounter.js import { ref } from 'vue'; export function useCounter(initialValue = 0) { const count = ref(initialValue); const increment = () => count.value++; const decrement = () => count.value--; return { count, increment, decrement }; } Best Practices Use composables for reusability Keep setup functions focused Use script setup syntax Organize by feature Extract complex logic Conclusion Vue 3 Composition API enables better code organization! 🎯

Closures are fundamental to JavaScript. Here’s how they work and when to use them. What is a Closure? A closure gives you access to an outer function’s scope from an inner function. function outer() { const name = 'JavaScript'; function inner() { console.log(name); // Accesses outer scope } return inner; } const innerFunc = outer(); innerFunc(); // "JavaScript" Common Patterns Module Pattern const counter = (function() { let count = 0; return { increment: () => ++count, decrement: () => --count, getCount: () => count }; })(); Function Factories function createMultiplier(multiplier) { return function(number) { return number * multiplier; }; } const double = createMultiplier(2); double(5); // 10 Common Pitfalls Loop with Closures // Bad: All log same value for (var i = 0; i < 3; i++) { setTimeout(() => console.log(i), 100); // 3, 3, 3 } // Good: Use let or IIFE for (let i = 0; i < 3; i++) { setTimeout(() => console.log(i), 100); // 0, 1, 2 } Best Practices Understand scope chain Avoid memory leaks Use closures for encapsulation Be careful in loops Use modern alternatives when possible Conclusion Master closures to write better JavaScript! 🔒

CSS Grid and Flexbox serve different purposes. Here’s when to use each. Flexbox Use for One-Dimensional Layouts .navbar { display: flex; justify-content: space-between; align-items: center; } Common Use Cases Navigation bars Centering content Flexible components Equal height columns CSS Grid Use for Two-Dimensional Layouts .container { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: auto; gap: 20px; } Common Use Cases Page layouts Complex grids Card layouts Responsive designs When to Use Both .container { display: grid; grid-template-columns: 1fr 3fr; } .sidebar { display: flex; flex-direction: column; } Best Practices Use Flexbox for components Use Grid for layouts Combine both when needed Consider browser support Test responsiveness Conclusion Choose the right tool for the job! 🎨

Rust WebAssembly can significantly improve React application performance. Here’s how to integrate it. Setup cargo install wasm-pack wasm-pack build --target web Rust Code use wasm_bindgen::prelude::*; #[wasm_bindgen] pub fn add(a: i32, b: i32) -> i32 { a + b } React Integration import init, { add } from './pkg/rust_wasm.js'; async function loadWasm() { await init(); console.log(add(2, 3)); // 5 } Performance Benefits Faster computation for heavy operations Memory efficient Type safe Near-native performance Best Practices Use for CPU-intensive tasks Minimize data transfer Profile performance Handle errors properly Bundle efficiently Conclusion Boost React performance with Rust WebAssembly! ⚡