जब आप नहीं देख रहे थे, तब फ्रंटएंड में क्या-क्या हुआ

kciter1 · 2026-07-20T02:12:58+09:00

लगभग 2008 के आसपास फ्रंटएंड छोड़ चुके डेवलपर्स के लिए, पिछले 20 वर्षों में आए बदलावों को समझाने वाला लेख मुख्य तर्क यह है कि हर टूल किसी वास्तविक समस्या (घाव) पर बने निशान ऊतक जैसा है, और हर लेयर का समाधान अगली लेयर की समस्या बनाते हुए ऊपर-ऊपर जमा होता गया पूरे लेख में को एक नमूने के रूप में लेकर यह ट्रैक किया गया है कि अलग-अलग दौर में बटन कैसे बदलता गया Layer I — jQuery (2006–2010) शुरुआत इस मांग से हुई कि पूरी पेज को refresh किए बिना सिर्फ कुछ हिस्से बदले जा सकें jQuery ने browsers के बीच के फर्क मिटाए और AJAX को लोकप्रिय बनाया, लेकिन data के JS variables और screen दोनों जगह मौजूद होने से developers को उन्हें खुद sync करना पड़ता था यही manual DOM manipulation वह "मूल पाप" है जिसे बाद की सारी layers हल करने की कोशिश करती हैं Layer II — फ्रेमवर्क (2010–2015) declarative UI: screen को update करने की प्रक्रिया लिखने के बजाय data के अनुसार screen कैसी दिखेगी यह बताओ, framework update संभाल लेता है React ने component + JSX + Virtual DOM के साथ इस दौर का नेतृत्व किया, और Vue/Angular/Svelte/Solid उसके पीछे आए आज लगभग सभी frameworks dependency tracking के जरिए सिर्फ जरूरी हिस्सों को update करने वाले signal concept की ओर converging हैं htmx, Alpine.js, Hotwire जैसे ऐसे camps भी हैं जो server से HTML भेजने वाले तरीके की ओर लौट रहे हैं Layer III — build (2012–2018) JS में module system न होने से CommonJS और ES Modules में प्रतिस्पर्धा हुई, और पुराने browsers compatibility के लिए Babel transpile और webpack bundling जरूरी हो गए build में minify, tree-shaking, code splitting, source map generation शामिल हैं इसकी कीमत node_modules के रूप में चुकानी पड़ी; एक खाली starter project भी लगभग 2.5 लाख files install कर देता है Layer IV — tooling competition (2018–2024) यह वह दौर था जब धीमे builds और जटिल webpack config की समस्या को Go/Rust में rewrite करके हल किया गया esbuild(Go) ने bundling को 10–100 गुना तेज बनाया, और SWC(Rust) ने Babel की जगह ले ली Vite default tool बन गया, और production bundler को Rust-आधारित Rolldown से बदला जा रहा है; संबंधित stack भी VoidZero (जिसे हाल ही में Cloudflare ने अधिग्रहित किया) के तहत एकीकृत हो रहा है package managers भी pnpm, Bun आदि के जरिए इसी प्रवाह का पालन कर रहे हैं Layer V — server rendering की वापसी (2014–2026) SPA में server सिर्फ एक खाली div भेजता था, इसलिए initial loading पर blank screen दिखती थी और search engines को भी blank page ही नजर आता था इसका समाधान server पर फिर से HTML render करना था, यानी 2008 वाले तरीके की ओर वापसी SSR(हर request पर render), SSG(build के समय pre-render), ISR(अपने-आप refresh होने वाला SSG) आए, और Next.js, Astro, SvelteKit, Nuxt जैसे meta-frameworks ने यह जिम्मेदारी संभाली browser में server HTML को फिर से जीवित करने की hydration cost एक नई समस्या बनी, और Islands(Astro), Resumability(Qwik), React Server Components hydration कम करने के तरीकों के रूप में उभरे Layer VI — engineering tools (2015–2026) TypeScript ने type system के जरिए refactoring की reliability सुनिश्चित की और de facto standard बन गया Tailwind ने utility class approach के साथ styling को lead किया, वहीं native CSS भी nesting, variables, container query आदि के साथ आगे बढ़ा, जिससे पुराने tooling की जरूरत कम हुई shadcn/ui ने components install करने के बजाय source को copy करके own करने का तरीका स्थापित किया, और TanStack Query, Zustand, Zod, Vitest, Playwright 2026 के apps की बुनियादी vocabulary बनाते हैं Layer VII — deployment (2015–2026) FTP upload के बजाय Git repository को Vercel/Netlify/Cloudflare से जोड़ने पर हर push पर auto build·deploy होता है, और हर PR पर live preview URL बनता है serverless functions और edge (user के पास मौजूद सैकड़ों data centers में code चलाना) का concept स्थापित हो गया Layer VIII — AI (2023–2026) v0, Lovable, Bolt को natural language में समझाने पर काम करने वाला frontend बन जाता है, और Cursor, Claude Code, Copilot code खुद लिख देते हैं backend/system engineers भी अब एक ही दिन में frontend बना सकते हैं, जिससे engineering क्षेत्रों के बीच की सीमाएं धुंधली हो रही हैं लेकिन generated code ऊपर की इन 8 layers के ज्ञान को मानकर चलता है, और इसी gap को भरना इस लेख का उद्देश्य है Bedrock — निष्कर्ष 2026 की cutting edge दिशा यह है: server पर HTML render करना, लगभग कोई JS न भेजना, और web platform का उपयोग करना निष्कर्ष यह है कि 20 साल तक बड़ा चक्कर लगाने के बाद industry फिर उस बिंदु पर लौट आई है जो FTP से upload की जाने वाली files जैसा दिखता है

लगभग 2008 के आसपास फ्रंटएंड छोड़ चुके डेवलपर्स के लिए, पिछले 20 वर्षों में आए बदलावों को समझाने वाला लेख
मुख्य तर्क यह है कि हर टूल किसी वास्तविक समस्या (घाव) पर बने निशान ऊतक जैसा है, और हर लेयर का समाधान अगली लेयर की समस्या बनाते हुए ऊपर-ऊपर जमा होता गया
पूरे लेख में <button> को एक नमूने के रूप में लेकर यह ट्रैक किया गया है कि अलग-अलग दौर में बटन कैसे बदलता गया

Layer I — jQuery (2006–2010)
- शुरुआत इस मांग से हुई कि पूरी पेज को refresh किए बिना सिर्फ कुछ हिस्से बदले जा सकें
- jQuery ने browsers के बीच के फर्क मिटाए और AJAX को लोकप्रिय बनाया, लेकिन data के JS variables और screen दोनों जगह मौजूद होने से developers को उन्हें खुद sync करना पड़ता था
- यही manual DOM manipulation वह "मूल पाप" है जिसे बाद की सारी layers हल करने की कोशिश करती हैं
Layer II — फ्रेमवर्क (2010–2015)
- declarative UI: screen को update करने की प्रक्रिया लिखने के बजाय data के अनुसार screen कैसी दिखेगी यह बताओ, framework update संभाल लेता है
- React ने component + JSX + Virtual DOM के साथ इस दौर का नेतृत्व किया, और Vue/Angular/Svelte/Solid उसके पीछे आए
- आज लगभग सभी frameworks dependency tracking के जरिए सिर्फ जरूरी हिस्सों को update करने वाले signal concept की ओर converging हैं
- htmx, Alpine.js, Hotwire जैसे ऐसे camps भी हैं जो server से HTML भेजने वाले तरीके की ओर लौट रहे हैं
Layer III — build (2012–2018)
- JS में module system न होने से CommonJS और ES Modules में प्रतिस्पर्धा हुई, और पुराने browsers compatibility के लिए Babel transpile और webpack bundling जरूरी हो गए
- build में minify, tree-shaking, code splitting, source map generation शामिल हैं
- इसकी कीमत node_modules के रूप में चुकानी पड़ी; एक खाली starter project भी लगभग 2.5 लाख files install कर देता है
Layer IV — tooling competition (2018–2024)
- यह वह दौर था जब धीमे builds और जटिल webpack config की समस्या को Go/Rust में rewrite करके हल किया गया
- esbuild(Go) ने bundling को 10–100 गुना तेज बनाया, और SWC(Rust) ने Babel की जगह ले ली
- Vite default tool बन गया, और production bundler को Rust-आधारित Rolldown से बदला जा रहा है; संबंधित stack भी VoidZero (जिसे हाल ही में Cloudflare ने अधिग्रहित किया) के तहत एकीकृत हो रहा है
- package managers भी pnpm, Bun आदि के जरिए इसी प्रवाह का पालन कर रहे हैं
Layer V — server rendering की वापसी (2014–2026)
- SPA में server सिर्फ एक खाली div भेजता था, इसलिए initial loading पर blank screen दिखती थी और search engines को भी blank page ही नजर आता था
- इसका समाधान server पर फिर से HTML render करना था, यानी 2008 वाले तरीके की ओर वापसी
- SSR(हर request पर render), SSG(build के समय pre-render), ISR(अपने-आप refresh होने वाला SSG) आए, और Next.js, Astro, SvelteKit, Nuxt जैसे meta-frameworks ने यह जिम्मेदारी संभाली
- browser में server HTML को फिर से जीवित करने की hydration cost एक नई समस्या बनी, और Islands(Astro), Resumability(Qwik), React Server Components hydration कम करने के तरीकों के रूप में उभरे
Layer VI — engineering tools (2015–2026)
- TypeScript ने type system के जरिए refactoring की reliability सुनिश्चित की और de facto standard बन गया
- Tailwind ने utility class approach के साथ styling को lead किया, वहीं native CSS भी nesting, variables, container query आदि के साथ आगे बढ़ा, जिससे पुराने tooling की जरूरत कम हुई
- shadcn/ui ने components install करने के बजाय source को copy करके own करने का तरीका स्थापित किया, और TanStack Query, Zustand, Zod, Vitest, Playwright 2026 के apps की बुनियादी vocabulary बनाते हैं
Layer VII — deployment (2015–2026)
- FTP upload के बजाय Git repository को Vercel/Netlify/Cloudflare से जोड़ने पर हर push पर auto build·deploy होता है, और हर PR पर live preview URL बनता है
- serverless functions और edge (user के पास मौजूद सैकड़ों data centers में code चलाना) का concept स्थापित हो गया
Layer VIII — AI (2023–2026)
- v0, Lovable, Bolt को natural language में समझाने पर काम करने वाला frontend बन जाता है, और Cursor, Claude Code, Copilot code खुद लिख देते हैं
- backend/system engineers भी अब एक ही दिन में frontend बना सकते हैं, जिससे engineering क्षेत्रों के बीच की सीमाएं धुंधली हो रही हैं
- लेकिन generated code ऊपर की इन 8 layers के ज्ञान को मानकर चलता है, और इसी gap को भरना इस लेख का उद्देश्य है
Bedrock — निष्कर्ष
- 2026 की cutting edge दिशा यह है: server पर HTML render करना, लगभग कोई JS न भेजना, और web platform का उपयोग करना
- निष्कर्ष यह है कि 20 साल तक बड़ा चक्कर लगाने के बाद industry फिर उस बिंदु पर लौट आई है जो FTP से upload की जाने वाली files जैसा दिखता है

जब आप नहीं देख रहे थे, तब फ्रंटएंड में क्या-क्या हुआ

संबंधित पढ़ाई

4 टिप्पणियां