28 అక్టోబర్, 2026

అదే మ్యాప్, మూడు విధాలు: SVG, రస్ట్ మరియు ఫ్లట్టర్

EVnSteven ఒక సౌకర్యవంతమైన స్థితికి చేరుకుంది. ప్లాట్‌ఫారమ్ స్థిరంగా ఉంది మరియు ఎక్కువ నిర్వహణ అవసరం లేదు, ఇది మనం ప్రారంభించినప్పుడు కోరుకున్నదే: నిశ్శబ్దంగా పనిచేస్తూ ఉండే చిన్న వ్యవస్థ. ఇది కొంత ప్రయోగం చేయడానికి కొంచెం స్థలం ఉంచుతుంది, మరియు ఇది మన స్థాపకులకు కొన్ని ఇతర ప్రాజెక్టులను ప్రారంభించడానికి సమయం ఇచ్చింది, అవి మీరు చివరలో కనుగొనవచ్చు.

కాబట్టి మనం ఒక ప్రయోగం నిర్వహించాము. మన హోమ్ పేజీలో ఉన్న మ్యాప్‌ను తీసుకుని రెండుసార్లు మళ్ళీ నిర్మించాము: ఒకసారి Rust లో WebAssembly కి కంపైల్ చేసి, మరొకసారి Flutter లో. ఈ వ్యాసం మూడు మాప్స్‌ను ఒకే పేజీలో ఉంచి వాటిని పోల్చుతుంది.

1. అసలు: SVG, CSS మరియు కొంత JavaScript

సాధారణ పదాలలో: ఇది మన హోమ్ పేజీలో ఉన్న మ్యాప్. ఇది వెబ్ పేజీ మిగతా భాగాలు నిర్మించబడిన విధంగా నిర్మించబడింది: మీ బ్రౌజర్ ఇప్పటికే ఎలా ప్రదర్శించాలో మరియు యానిమేట్ చేయాలో తెలిసిన ఆకారాల నుండి రూపొందించిన డ్రాయింగ్. ఇది మూడు మాప్స్‌లో అత్యంత సరళమైనది, మరియు ఎక్కువ మంది సందర్శకులు దీన్ని చూస్తారు.

Ready Charging Check in Check out

⚠️ సాంకేతిక భాగం ముందుంది. మీకు ఇష్టం లేకపోతే? Rust కు దాటండి →

ఇది ఒక SVG డ్రాయింగ్. బ్రౌజర్ ఎక్కువ భాగం యానిమేషన్లను CSS నుండి నడుపుతుంది, మరియు చిన్న స్క్రిప్ట్ మిగతా భాగాన్ని నిర్వహిస్తుంది.

దాని లాభం: నిర్మాణ దశ అవసరం లేదు, కాబట్టి Hugo టెంప్లేట్ మాత్రమే అవసరం. ఇది వెక్టార్, కాబట్టి ఏ పరిమాణంలోనైనా స్పష్టంగా ఉంటుంది. మొత్తం 44 డాట్లు కీబోర్డ్ తో చేరుకోవచ్చు, ప్రతి ఒక్కదానికి స్క్రీన్ రీడర్ల కోసం లేబుల్ ఉంటుంది. మరియు దాని కొద్దిపాటి పదాలు మన అన్ని భాషలలో అనువదించబడ్డాయి.

ఖర్చు పేజీలో బరువు. మ్యాప్ మార్కప్ సుమారు 107 KB (సుమారు 30 KB కంప్రెస్ చేసిన) ఉంటుంది, మరియు నడుస్తున్నప్పుడు సుమారు 670 ఎలిమెంట్లు మరియు సుమారు 200 CSS యానిమేషన్లు ఉంటాయి. లాజిక్ కూడా పరీక్షించడం కష్టం: టైమింగ్ CSS కీఫ్రేమ్స్ మరియు పేజీలోని స్క్రిప్ట్ లో ఉంటుంది, కాబట్టి ఏకైక పరీక్ష అది చూడటం మాత్రమే.

2. రస్ట్ మరియు వెబ్ అసెంబ్లీ

సాధారణంగా చెప్పాలంటే: రస్ట్ అనేది వేగంగా ఉండటం మరియు ప్రోగ్రామ్ నడవకముందే చాలా తప్పులను పట్టుకోవడంలో ప్రసిద్ధి చెందిన ప్రోగ్రామింగ్ భాష. ఇక్కడ మేము మ్యాప్ యొక్క “మేధస్సు"ను రస్ట్‌లో రాశాము, దానిని బ్రౌజర్లు నడపగలిగే సంక్షిప్త రూపంలో (వెబ్ అసెంబ్లీ అని పిలవబడే) ప్యాకేజ్ చేసాము, మరియు అది మొత్తం మ్యాప్‌ను స్వయంగా చిత్రించనిచ్చాము, ఒక చిత్రకారుడు ఒక కాన్వాస్‌ను సెకనుకు అనేక సార్లు తిరిగి చిత్రించేలా. మీకు అది అదేలా కనిపిస్తుంది.

⚠️ సాంకేతిక భాగం ముందుంది. మీకు ఇష్టం లేకపోతే? Flutter కి దాటవేయండి →

మొత్తం మ్యాప్ ఒకే కాన్వాస్‌పై రస్ట్ ద్వారా చిత్రించబడుతుంది, ఇది వెబ్ అసెంబ్లీకి కంపైల్ చేయబడింది. రస్ట్ కోడ్ మొత్తం మ్యాప్ ప్రవర్తనకు యజమాని మరియు ప్రతి ఫ్రేమ్‌లో ప్రతీదీ తిరిగి చిత్రిస్తుంది.

మాకు ఇష్టమైన భాగం ఏమిటంటే, లాజిక్ పూర్తిగా రస్ట్‌లోనే ఉంటుంది, బ్రౌజర్ నుండి ఏదీ ఉండదు: వస్తువులు ఎక్కడ ఉండాలి, ఎప్పుడు మారాలి అనే గణితం మరియు భూభాగ సరిహద్దును చదివే పార్సర్. దీనికి 13 పరీక్షలు ఉన్నాయి, అవి కొన్ని సెకన్లలో నడుస్తాయి, మరియు సైకిల్ టైమింగ్ తప్పు అయితే, ఎవరో దాన్ని విచిత్రంగా కనిపిస్తుందని గమనించక ముందు పరీక్ష విఫలమవుతుంది. సుమారు 1,070 రస్ట్ లైన్లలో సుమారు మూడవ భాగం ఆ పరీక్షించిన కోర్ (దాని పరీక్షలతో) ఉంటుంది; మిగతా భాగం కాన్వాస్‌పై చిత్రించడం మరియు మౌస్ ఈవెంట్లను నిర్వహించడం.

పేజీ చాలా తేలికగా ఉంటుంది: ఒకే కాన్వాస్ ఎలిమెంట్. కానీ డౌన్లోడ్ పెద్దది. కంపైల్ చేసిన మాడ్యూల్ సుమారు 254 KB (సుమారు 92 KB కంప్రెస్ చేసిన) మరియు సుమారు 28 KB జావాస్క్రిప్ట్ గ్లూ ఉంటుంది, ఇది బిల్డ్ టూల్ ఉత్పత్తి చేస్తుంది. మరియు దానిపై పని చేస్తున్నప్పుడు మేము అనుభవించే ఖర్చులు ఉన్నాయి:

ఒక టూల్‌చైన్. బిల్డింగ్‌కు Rust, WebAssembly లక్ష్యం మరియు లైబ్రరీ వెర్షన్‌తో సరిగ్గా సరిపోలే కమాండ్-లైన్ టూల్ అవసరం. మా బిల్డ్ స్క్రిప్ట్ మొదట టెస్టులను నడిపిస్తుంది మరియు ఒకటి విఫలమైతే ఆగిపోతుంది.
ప్రత్యేక నగరాలకు కీబోర్డ్ లేదా స్క్రీన్-రీడర్ యాక్సెస్ లేదు. ఒక కాన్వాస్ ఒక చిత్రం. SVG వెర్షన్‌లోని 44 ఫోకసబుల్ డాట్లు పోయాయి.
ఇంగ్లీష్ మాత్రమే. లేబుల్స్ ప్రోగ్రామ్‌లోనే రాయబడ్డాయి.
బ్లర్. సాఫ్ట్ షాడో ఎడ్జ్ కాన్వాస్ బ్లర్ ఫిల్టర్ ఉపయోగిస్తుంది, ఇది ప్రతి బ్రౌజర్ మద్దతు ఇవ్వదు. సఫారి పరీక్షించలేదు, అక్కడ ఎడ్జ్ కఠినంగా ఉండవచ్చు.

3. ఫ్లట్టర్

సాధారణంగా చెప్పాలంటే: ఫ్లట్టర్ అనేది గూగుల్ నుండి ఒక టూల్‌కిట్, ఇది ఒకే కోడ్ సెట్ నుండి ఫోన్లు, కంప్యూటర్లు మరియు వెబ్‌పై నడిచే యాప్స్‌ను నిర్మించడానికి. ఇది వెబ్ పేజీ యొక్క స్వంత నిర్మాణ భాగాలను ఉపయోగించదు. ఇది ప్రతిదీ తానే డ్రా చేస్తుంది. ఇక్కడ మ్యాప్ ఒక చిన్న యాప్‌గా ఈ పేజీలో చూపబడింది, అదే టూల్‌కిట్ మా చార్జింగ్ క్యాల్క్యులేటర్కి శక్తిని అందిస్తుంది.

⚠️ సాంకేతిక భాగం ముందుంది. మీకు ఇష్టం లేకపోతే? మేము కనుగొన్న దానికి దాటవేయండి →

ఇది ఒక కస్టమ్ పెయింటర్‌తో మ్యాప్‌ను పెయింట్ చేస్తుంది, మరియు ఇది ఇక్కడ ఒక ఫ్రేమ్‌లో చూపబడింది. ఫ్లట్టర్ అదే కోడ్ నుండి ఫోన్ మరియు డెస్క్‌టాప్ యాప్స్‌ను కూడా నిర్మించగలదు, ఇది దీని ప్రధాన వాదన: ఒకసారి మ్యాప్ రాయండి, దాన్ని అనేక చోట్ల నడపండి.

ఇది Rust మ్యాప్ లాజిక్‌ను Dart కి పోర్ట్ చేసినదే, 11 పరీక్షలతో. పరీక్షల సహా సుమారు 1,100 లైన్లు. Flutter ప్రతి నగరాన్ని స్క్రీన్ రీడర్‌లకు లేబుల్ చేయబడిన బటన్‌గా అందిస్తుంది, కాన్వాస్ వెర్షన్‌లో అది లేదు (వాస్తవ స్క్రీన్ రీడర్‌తో ఇది ఎంత బాగా పనిచేస్తుందో మేము పరిశీలించలేదు). ఇది కూడా అతిపెద్ద డౌన్లోడ్: యాప్ సుమారు 1.8 MB (సుమారు 535 KB కంప్రెస్ చేయబడింది). Flutter యొక్క డ్రాయింగ్ ఇంజిన్ అదనంగా డౌన్లోడ్ అవుతుంది, కానీ సైట్ ఇప్పటికే క్యాలక్యులేటర్‌తో ఒక కాపీని పంచుకుంటుంది, కాబట్టి క్యాలక్యులేటర్ తెరిచిన సందర్శకుడు దాన్ని మళ్లీ డౌన్లోడ్ చేయడు. దాని టెక్స్ట్ సైట్ ఫాంట్ Merriweather లో సెట్ చేయబడింది, ఇది బ్రౌజర్ రన్ టైమ్‌లో ఫెచ్ చేస్తుంది.

మేము కనుగొన్నది

	SVG + CSS + JS	Rust + WebAssembly	Flutter
మ్యాప్ కోసం డౌన్లోడ్	పేజీలో సుమారు 107 KB	సుమారు 254 KB మాడ్యూల్ + 28 KB గ్లూ	సుమారు 1.8 MB యాప్ (డ్రాయింగ్ ఇంజిన్ పంచుకున్నది)
పేజీలో ఎలిమెంట్లు	సుమారు 670, సుమారు 200 CSS యానిమేషన్లతో	1 కాన్వాస్	1 ఫ్రేమ్
లాజిక్ కోసం పరీక్షలు	లేవు	13, స్థానిక	11, స్థానిక
కీబోర్డ్ ద్వారా చేరుకునే నగరాలు	అవును, మొత్తం 44	కాదు	స్క్రీన్ రీడర్‌లకు అందుబాటులో (పరీక్షించలేదు)
అనువదించబడింది	అవును	కాదు, ఆంగ్లంలో మాత్రమే	కాదు, ఆంగ్లంలో మాత్రమే
ఏ జూమ్‌లోనైనా స్పష్టంగా ఉంటుంది	అవును (వెక్టర్)	స్క్రీన్ పిక్సెల్ డెన్సిటీకి మళ్లీ డ్రా చేయబడుతుంది	స్క్రీన్ పిక్సెల్ డెన్సిటీకి మళ్లీ డ్రా చేయబడుతుంది
నిర్మించడానికి అవసరం	ఏమీ లేదు	Rust టూల్‌చైన్, సరిపోయే టూల్ వెర్షన్	Flutter SDK

వేగం గురించి మరో గమనిక. మా తనిఖీలో, SVG మ్యాప్ మరియు Rust మ్యాప్ రెండూ స్క్రీన్ రిఫ్రెష్ రేట్ (పరీక్షా డిస్ప్లేలో సుమారు 120 ఫ్రేమ్‌లు సెకనుకు) వద్ద నడిచాయి, కాబట్టి ఫ్రేమ్ రేట్ వారిని వేరుచేయలేదు. మేము Flutter యొక్క ఫ్రేమ్ రేట్‌ను కొలవలేదు, బ్యాటరీ లేదా CPU వినియోగాన్ని కొలవలేదు, కాబట్టి ఫోన్‌పై ఏది తక్కువ భారంగా ఉందో చెప్పలేము.

మమ్మల్ని ఆశ్చర్యపరిచిన విషయాలు

కొన్ని వివరాలు తప్పుగా అర్థం చేసుకోవడం సులభం. మా మొదటి క్లోన్లు మ్యాప్‌లో ఒక స్థిర భాగంలో కీ మరియు గడియారాలను చిత్రించారు, కాబట్టి అవి చిన్న తెరలపై సన్నగా మారిపోయాయి మరియు అసలు గడియారంతో పోల్చితే చాలా చిన్నగా కనిపించాయి. అసలు పేజీ యొక్క స్వంత ఫాంట్ యూనిట్ (rem, ఇది తెర వెడల్పుతో మారుతుంది)లో వాటి పరిమాణాన్ని నిర్ణయిస్తుంది. క్లోన్లు ఇప్పుడు ఆ పరిమాణాన్ని పేజీ నుండి చదువుతాయి. గడియారాలు కూడా భిన్నంగా ఉంటాయి: అసలు గడియారంలో చేతులు 15 నిమిషాల దశలలో కదులుతాయి, అయితే Rust మరియు Flutter వెర్షన్లలో అవి నిరంతరం తిరుగుతాయి.

సమయ మండలాలు నిర్మించబడలేదు. Rust WebAssemblyకి కంపైల్ చేయబడలేదు మరియు Dartలో “Asia/Dubai” వంటి సమయ మండల డేటాబేస్ లేదు. రెండూ బ్రౌజర్‌ను అడుగుతాయి, దాని అంతర్గత Intl సేవ ద్వారా, ఇది డేలైట్ సేవింగ్‌ను కూడా సరిగ్గా పొందుతుంది.

మూడు వేరియంట్లు వారి ఇన్‌పుట్‌లను పంచుకుంటాయి. Rust మరియు Flutter మ్యాప్లు వారు ఉన్న పేజీ నుండి నగర జాబితా మరియు భూభాగం అవుట్‌లైన్‌ను చదువుతాయి, అదే డేటా SVG మ్యాప్ ఉపయోగిస్తుంది. ఒక నగరాన్ని మార్చితే, మూడు వేరియంట్లు కూడా మారతాయి. దీని అర్థం మ్యాప్లు అందించే పేజీపై మాత్రమే నడవగలవు.

Flutter వెబ్ గుర్తుంచుకుంటుంది. Flutter వెబ్ తన స్వంత క్యాష్‌ను ఇన్‌స్టాల్ చేస్తుంది, కాబట్టి మళ్లీ నిర్మించిన తర్వాత కూడా పాత వెర్షన్ కనిపించేది, మనం క్యాష్‌ను క్లియర్ చేసినప్పటి వరకు.

మా ముగింపు

SVG మ్యాప్ హోమ్ పేజీలోనే ఉంటుంది. ఈ పరిమాణం కోసం ఇది అత్యంత తేలికపాటి, అందుబాటులో ఉండేది, అనువదించబడింది, మరియు నిర్మించడానికి ఏదీ అవసరం లేదు. Rust మరింత ఆసక్తికరమైన రెండవ స్థానంలో ఉంది: మనం ఎప్పుడైనా మ్యాప్ లాజిక్‌ను సరిగా నిరూపించుకోవలసిన అవసరం ఉంటే లేదా బ్రౌజర్‌లో భారీ గణన చేయాల్సిన అవసరం ఉంటే, పరీక్షించిన Rust కోర్ మంచి మార్గం. మ్యాప్ ఎప్పుడైనా Flutter యాప్‌లో ఉండాల్సిన అవసరం ఉంటే Flutter అర్థం చేసుకోవచ్చు.

ఒక ప్రయోగం ప్రోడక్ట్‌ను మార్చకుండానే నిర్వహించదగినది. మేము ప్రతి దృష్టికోణం ఖర్చులు ఏమిటి, మ్యాప్ ఎలా ప్రవర్తిస్తుంది అనే పరీక్షించిన వివరణ, మరియు మీరు మూడు వేరియంట్లను స్వయంగా చూడగలిగే పేజీతో స్పష్టమైన చిత్రాన్ని పొందాము.