ఒక బిల్డ్ పూర్తయ్యే వరకు వేచి చూస్తున్న డెవలపర్లతో నిండిన గదిలో ఒక వింతైన నిశ్శబ్దం ఉంటుంది. కళ్లు సెకండ్ మానిటర్ల వైపు మళ్లుతాయి. వేళ్లు ఫోన్లలో స్క్రోల్ చేస్తూ ఉంటాయి. ఎవరికైనా నిజంగా అవసరం లేకపోయినా కాఫీ కోసం లేచి వెళ్తారు. మీరు ఆధునిక JavaScript కోడ్బేస్తో కొంత సమయం గడిపితే, ఈ విరామాన్ని మీరు అర్థం చేసుకోగలరు. ఇది కేవలం విరామం కాదు. ఇది మీ ఆలోచనా క్రమంలో ఏర్పడే ఒక అంతరాయం.
మనం ఫ్రేమ్వర్క్ల గురించి చాలా మాట్లాడుతాము. React, Vue, Svelte మరియు వచ్చే వారం ఏది విడుదలైనా సరే, అందరి దృష్టిని ఆకర్షిస్తాయి. కాన్ఫరెన్స్లు ఫ్రేమ్వర్క్ అనౌన్స్మెంట్ల కోసం నిండిపోతాయి. బ్లాగ్ పోస్ట్లు syntax sugar గురించి విశ్లేషిస్తాయి. కానీ యూజర్లకు కనిపించే ఈ అంశాల వెనుక, మీరు కోడ్ రాసే విధానాన్ని నిజంగా మార్చేలా పునాదులు మారుతున్నాయి. ఈ విప్లవం ఏదో ఫ్రంటెండ్ ఫ్రేమ్వర్క్ నుండి రావడం లేదు. ఇది టూలింగ్ లేయర్లో (tooling layer) జరుగుతోంది, మరియు ఇది Rust మరియు Go భాషల్లో వ్రాయబడుతోంది.
సంవత్సరాల తరబడి, JavaScript టూల్స్ JavaScript తోనే నిర్మించబడ్డాయి. అది అర్థవంతంగానే ఉంది. రేపటి సింటాక్స్ను ఈరోజే ఎలా రాయాలో Babel ఒక తరం వారికి నేర్పింది. Webpack మన విడివిడి కోడ్ను బ్రౌజర్లు అర్థం చేసుకోగలిగే విధంగా బండిల్ చేసింది. ESLint మనం కోడ్ను కమిట్ చేయకముందే బగ్లను పట్టుకుంది. ఈ టూల్స్ చిన్న వెబ్ కోసం రూపొందించబడ్డాయి. అవి కొన్ని వందల మాడ్యూల్స్ను ఊహించాయి, పదివేల మాడ్యూల్స్ను కాదు. అవి సింగిల్ రిపోజిటరీలను ఊహించాయి, షేర్డ్ UI ప్యాకేజీలో మార్పు జరిగితే డజన్ల కొద్దీ అప్లికేషన్లపై ప్రభావం చూపే monorepos ను కాదు.
ఆ తర్వాత అప్లికేషన్లు పెరిగాయి. కోడ్బేస్లు భారీ రిపోజిటరీలుగా విస్తరించాయి. టూల్స్ మాత్రం అలాగే ఉండిపోయాయి, దీనివల్ల లేటెన్సీ (latency) పెరిగింది. రెండు సెకన్ల సమయం తీసుకునే hot reload, పన్నెండు, ఆపై ముప్పై సెకన్ల సమయం తీసుకోవడం మొదలుపెట్టింది. లంచ్ కంటే ముందే పూర్తి టెస్ట్ సూట్ను రన్ చేయడం ఒక కలనులా మారింది. వేల సార్లు చెక్ చేసిన ఫైళ్లపై కూడా లీంటర్లు (linters) తడబడటం మొదలుపెట్టాయి. కాగితం మీద ప్రతి ఆలస్యం చిన్నదిగా అనిపించవచ్చు. కానీ ఆచరణలో, ఈ విరామాలు ఏకాగ్రతను దెబ్బతీస్తాయి. ఇవి మీ పనిని బ్యాచ్లుగా చేయడానికి, ఒక ఫిక్స్ పనిచేస్తుందో లేదో చూడటానికి ముందు వెనుకాడటానికి, మరియు ఫీడ్బ్యాక్ కోసం అయ్యే ఖర్చు ఎక్కువగా ఉంటుందని ప్రయోగాలు చేయకుండా ఉండటానికి మిమ్మల్ని అలవాటు చేస్తాయి.
తదుపరి తరం టూలింగ్, JavaScript దారికి అడ్డు రాకుండా ఉండటం ద్వారా ఆ లేటెన్సీని ఎదుర్కొంటుంది.
కొత్త ఇంజిన్ రూమ్
నిర్దిష్ట పనులు ఎలా తిరిగి పొందుపరచబడుతున్నాయో చూడండి.
Transformation అంటే గతంలో Babel అని అర్థం. ఇది JSX మరియు stage-3 ప్రతిపాదనలను సాధారణ ES5లోకి అనువదించే యూనివర్సల్ ప్రీ-ప్రాసెసర్. ఇది ఇప్పటికీ అద్భుతమైన సాఫ్ట్వేర్, కానీ ఇది సింగిల్-త్రెడెడ్ JavaScript ద్వారా JavaScriptని పార్స్ చేస్తుంది. ఇక్కడ OXC రంగంలోకి దిగింది, ఇది Rust ఆధారిత టూల్చైన్. ఇది Babel చేసే పనులనే చేస్తుంది, కానీ బెంచ్మార్క్ల ప్రకారం ఇది సుమారు 40 రెట్లు వేగంగా ఉండటమే కాకుండా, 70% తక్కువ మెమరీని ఉపయోగిస్తుంది. ఇది కేవలం చిన్న మెరుగుదల కాదు. ఇది మీరు గమనించే టూల్ మరియు మీరు వాడుతున్నట్లు కూడా తెలియని టూల్ మధ్య ఉన్న తేడా.
Bundling అనేది అత్యంత ఇబ్బందికరమైన అంశం. దశాబ్ద కాలంగా Webpack ప్రామాణికంగా ఉంది, కానీ దాని అంతర్గత నిర్మాణం వేరే స్థాయి కోసం నిర్మించబడింది. దాని Rust వారసుడైన Turbopack, కేవలం వేగంగా రీకంపైల్ చేయడమే కాదు. ఏమి మారిందో ఖచ్చితంగా అర్థం చేసుకోవడానికి మరియు కేవలం ఆ భాగాన్ని మాత్రమే రీబిల్డ్ చేయడానికి ఇది అగ్రెసివ్ మెమోయిజేషన్ (aggressive memoization) పై ఆధారపడుతుంది. ఒక పెద్ద అప్లికేషన్లో, ఒకే ఒక కాంపోనెంట్ను మార్చడం వల్ల పూర్తి గ్రాఫ్ ట్రావర్సల్ (graph traversal) జరగకూడదు. Turbopackతో, బిల్డ్లు తక్షణమే పూర్తవుతాయి. చూడటానికి ఏమీ లేనందున ప్రోగ్రెస్ బార్ కూడా కనిపించదు.
Testing కూడా దాని స్వంత ఆలస్యాన్ని కలిగి ఉంటుంది. Jest జావాస్క్రిప్ట్ టెస్టింగ్ను పునర్నిర్వచించింది, అయినప్పటికీ watch modeలో ప్రతి కీస్ట్రోక్కు అది మీ కోడ్బేస్ను మళ్ళీ నేర్చుకుంటున్నట్లు అనిపిస్తుంది. Vitest భిన్నమైన ఆర్కిటెక్చరల్ విధానాన్ని తీసుకుంటుంది. ఇది సొంతంగా డిపెండెన్సీ ట్రీని నిర్మించడానికి బదులుగా Vite యొక్క మాడ్యూల్ గ్రాఫ్ను తిరిగి ఉపయోగిస్తుంది, కాబట్టి watch modeలో Jest కంటే సుమారు 8.5 రెట్లు వేగంగా రిపోర్ట్ చేస్తుంది. ఇక్కడ విజయం కేవలం వేగం మాత్రమే కాదు. అది సమన్వయం (coherence). మీ టెస్ట్ రన్నర్ మరియు డెవ్ సర్వర్ మీ ప్రాజెక్ట్ ఎలా ఉందో చివరికి ఒకేలా గుర్తిస్తాయి.
Linting కూడా ఇటువంటి ఓవర్హెడ్ను ఎదుర్కొంటుంది. ESLint యొక్క ఫ్లెక్సిబిలిటీ దాని సూపర్ పవర్; దాని రూల్స్ కేవలం AST పై పనిచేసే JavaScript ఫంక్షన్లు మాత్రమే. ఆ ఫ్లెక్సిబిలిటీ వల్ల సైకిల్స్ ఖర్చవుతాయి. Rust లో వ్రాయబడిన Oxlint, సాధారణ సందర్భాలకు పరిమితమై వేగంగా పనిచేస్తుంది. ఇది ESLint కంటే 50 నుండి 100 రెట్లు వేగంగా నడుస్తుంది. దీని వల్ల కలిగే ప్రయోజనం ఏమిటంటే, మీ ఎడిటర్ సేవ్ యానిమేషన్ ముగియకముందే లింటింగ్ పూర్తవుతుంది. మీరు సమస్యను పరిష్కరించిన తర్వాత కూడా సెకన్ల పాటు అలాగే ఉండే ఎరుపు రంగు గీతలను (red squiggles) మీరు ఇక భరించాల్సిన అవసరం లేదు.
బహుశా అత్యంత సంకేతాత్మకమైన మార్పు type checking లో జరుగుతోంది. Microsoft ప్రస్తుతం TypeScript compiler ను Go భాషలో తిరిగి రాస్తోంది. ప్రారంభ బెంచ్మార్క్లు ఆశ్చర్యకరంగా ఉన్నాయి: కొత్త అమలుతో VS Code సుమారు 8 రెట్లు వేగంగా లోడ్ అవుతుంది, మరియు type checking స్వయంగా సుమారు 10 రెట్లు వేగంగా జరుగుతుంది. దీని అర్థం ఏమిటో ఆలోచించండి. TypeScript అనేది JavaScript యొక్క విజయగాథ. ఇది JavaScript కి కంపైల్ అయ్యే భాష, JavaScript ఎకోసిస్టమ్స్ను type-check చేయడానికి ఉపయోగించబడుతుంది, మరియు ఇప్పుడు దాని స్వంత కంపైలర్ నేటివ్ సిస్టమ్స్ లాంగ్వేజ్కు మారుతోంది, ఎందుకంటే JavaScript ఎకోసిస్టమ్ కోరుకునే పనితీరును (performance) అందించలేకపోతోంది. వేగం కోసం ఆ సాధనం తన స్వంత మార్గాన్నే మార్చుకుంటోంది.
ఇవేవీ React ను భర్తీ చేయవు. ఇవి Next.js ను అంతం చేయవు లేదా TypeScript ను కాలం చెల్లినదిగా చేయవు. Frameworks ఇప్పటికీ మీ component model మరియు routing ను నిర్వచిస్తాయి. ఈ కొత్త సాధనాలు కేవలం కింద ఉన్న ప్రతిదీ వేగంగా చేస్తాయి. అవి రోడ్డు వంటివి, కారు వంటివి కావు.
వేగం ప్రవర్తనను మార్చినప్పుడు
టూలింగ్ చర్చలు తరచుగా బెంచ్మార్క్ చార్ట్లకే పరిమితమవుతాయి. సంఖ్యలను పోల్చడం సులభం. కానీ అసలు ప్రభావం మానవ ప్రవర్తనలో ఉంటుంది.
ఫీడ్బ్యాక్ సెకన్ల నుండి మిల్లీసెకన్లకు తగ్గినప్పుడు, మీరు పనులను వేగంగా పూర్తి చేయడమే కాదు, వాటిని భిన్నంగా పూర్తి చేస్తారు. మీరు మార్పులను పేరుకుపోనివ్వరు. ఒక లైన్ రాస్తారు, ఫలితాన్ని చూస్తారు, సర్దుబాటు చేస్తారు. మీరు టెస్ట్లను రన్ చేస్తారు ఎందుకంటే అవి తక్షణమే జరుగుతాయి, మీ pull request కోసం అవసరం కాబట్టి కాదు. పని చేయకపోవచ్చు అని తెలిసినా మీరు refactor చేయడానికి ప్రయత్నిస్తారు, ఎందుకంటే దానిని వెనక్కి తీసుకోవడం (undoing) వల్ల ఎటువంటి నష్టం ఉండదు. మెషిన్ మిమ్మల్ని మళ్ళీ అనుమతించే వరకు వేచి ఉండకుండా, మీరు సమస్యలోనే నిమగ్నమై ఉంటారు.
దీనినే మనస్తత్వవేత్తలు flow అని పిలుస్తారు. దీనికి చర్య మరియు ఫలితం మధ్య ఒక నిరంతర లూప్ అవసరం. ప్రతి నోట్ను amp ఆలస్యం చేస్తే గిటారిస్ట్ వాయించలేడు. బ్రష్ అర సెకను ఆలస్యంగా అప్డేట్ అయితే పెయింటర్ రంగులను కలపలేడు. డెవలపర్లు కూడా అంతే. Latency అనేది కేవలం ఒక ఇబ్బంది మాత్రమే కాదు. అది ఆలోచనపై పడే పన్ను.
కాబట్టి, ఉత్పాదకత (productivity) పెరుగుదల కేవలం సాంకేతికమైనది మాత్రమే కాదు. అది అలవాటుకు సంబంధించినది. వేగవంతమైన సాధనాలు మిమ్మల్ని ప్రయోగాలు చేయడానికి అలవాటు చేస్తాయి. నెమ్మదైన సాధనాలు మిమ్మల్ని సంకోచించడానికి అలవాటు చేస్తాయి. ఒక సంవత్సరం కాలంలో, ఈ తేడా పూర్తిగా భిన్నమైన సాఫ్ట్వేర్గా మారుతుంది. తక్షణ ఫీడ్బ్యాక్ ఉన్న టీమ్ మరింత ఆత్మవిశ్వాసంతో షిప్ (ship) చేస్తుంది. ప్రయత్నించడానికి ఖర్చు సున్నా కాబట్టి, వారు పనిని చిన్న చిన్న భాగాలుగా విభజిస్తారు. బగ్స్ ఇరవై నిమిషాల తర్వాత CI లో కాకుండా, ఆ క్షణంలోనే దొరికిపోవడం వల్ల వారి code reviews తగ్గుతాయి.
కనిపించని పని
అందుకే హెడ్లైన్స్ తప్పుదారి పట్టిస్తాయి. Frameworks గురించి రాయడం సులభం. వాటికి లోగోలు, APIs మరియు Twitter డ్రామా ఉంటాయి. Infrastructure డిజైన్ పరంగానే కనిపించదు. మీరు ఒక bundler ని కాన్ఫిగర్ చేయడానికి ఉత్సాహంగా నిద్రలేవరు. అది మాయమైపోవాలని మీరు కోరుకుంటారు. కానీ మంచి ఇన్ఫ్రాస్ట్రక్చర్ చేసేది కూడా అదే. కనిపించే లేయర్ తేలికగా ఉండటానికి, అది భారాన్ని మోస్తుంది.
మీరు ఒక టీమ్ను నడిపిస్తున్నా లేదా legacy codebase ను నిర్వహిస్తున్నా, ఇది మీ ప్రాధాన్యతలను నిర్ణయించాలి. React నుండి Vue కి మారడం మీ component tree ని మార్చవచ్చు. Webpack నుండి Turbopack కి లేదా Babel నుండి OXC కి మారడం మీ పూర్తి పని దినచర్యను మార్చవచ్చు. రెండవది మేనేజ్మెంట్కు వివరించడం కష్టం, ఎందుకంటే దానికి కొత్త హోమ్పేజీ డెమో ఉండదు. అక్కడ కేవలం తమ build terminal వద్ద నిట్టూర్పులు విడువ stop చేసిన ఒక టీమ్ మాత్రమే ఉంటుంది.
మిమ్మల్ని నిజంగా ఏది నెమ్మదింపజేస్తుందో తనిఖీ (audit) చేయండి. మీరు 2015లో నిర్మించిన toolchain పై ఆధునిక monorepo ని నడుపుతుంటే, మీరు జాగ్రత్తగా ఉన్నట్లు కాదు. మీరు ప్రతిరోజూ ఒక friction tax చెల్లిస్తున్నారు. దీనికి పరిష్కారం కొత్త frontend paradigm నేర్చుకోవడం కాదు. ఇంజిన్ను మార్చడం.
Frameworks వస్తూనే ఉంటాయి. వాటికి ట్వీట్లు మరియు కాన్ఫరెన్స్ కీనోట్లు వస్తూనే ఉంటాయి. కానీ JavaScript రాయడం ఎలా ఉండాలనే విషయంలో అసలైన మార్పు లోపల (under the hood), మీ సమయాన్ని విలువైనదిగా భావించే compiled languages లో జరుగుతోంది. అదే విప్లవం. ఒక లిస్ట్ను render చేయడానికి కొత్త మార్గం కాదు, మీ పనికి అడ్డు రాకుండా, మిమ్మల్ని ఆలోచించనిచ్చే వేగవంతమైన toolchain.