அதே வரைபடம், மூன்று வழிகள்: SVG, Rust மற்றும் Flutter

EVnSteven ஒரு வசதியான இடத்தை அடைந்துள்ளது. இந்த தளம் நிலையானது மற்றும் அதிக பராமரிப்பு தேவையில்லை, இது நாங்கள் தொடங்கியபோது விரும்பியதுதான்: சுமாரான ஒரு அமைப்பு அமைதியாக செயல்பட்டு கொண்டிருக்கும். இதனால் சிறிது பரிசோதனை செய்ய இடம் உள்ளது, மேலும் இது எங்கள் நிறுவுநர்களுக்கு சில பிற திட்டங்களைத் தொடங்கும் நேரத்தை வழங்கியுள்ளது, அவற்றை நீங்கள் இறுதியில் காணலாம்.

ஆகவே நாங்கள் ஒரு பரிசோதனை நடத்தினோம். நமது முகப்பு பக்கத்தில் உள்ள வரைபடத்தை எடுத்து அதனை இருமுறை மீண்டும் கட்டமைத்தோம்: ஒருமுறை Rust-ல் WebAssembly ஆக தொகுக்கப்பட்டு, மற்றுமொரு முறையும் Flutter-ல். இந்த கட்டுரை மூன்றையும் ஒரே பக்கத்தில் வைத்து ஒப்பிடுகிறது.

1. அசல்: SVG, CSS மற்றும் சிறிய JavaScript

எளிய வார்த்தைகளில்: இது நமது முகப்பு பக்கத்தில் உள்ள வரைபடம். இது மற்ற இணையப் பக்கங்கள் கட்டமைக்கப்படும் விதத்தில் கட்டப்பட்டுள்ளது: உங்கள் உலாவி ஏற்கனவே காட்டவும் இயக்கவும் தெரிந்த வடிவங்களால் உருவாக்கப்பட்ட ஓவியம். இது மூன்றில் எளிமையானது மற்றும் பெரும்பாலான பார்வையாளர்கள் இதையே காண்கிறார்கள்.

இது ஒரு SVG ஓவியம் மட்டுமே. உலாவி பெரும்பாலான இயக்கங்களை CSS-இல் இயக்குகிறது, மற்றும் சிறிய ஒரு ஸ்கிரிப்ட் மற்றவற்றை கையாள்கிறது.

இதன் நன்மை: கட்டுமான படி தேவையில்லை, ஆகவே ஒரு Hugo வார்ப்புரு மட்டும் போதுமானது. இது வெக்டர் ஆக இருப்பதால் எந்த அளவிலும் தெளிவாக இருக்கும். அனைத்து 44 புள்ளிகளும் விசைப்பலகையால் அணுகக்கூடியவை, ஒவ்வொன்றுக்கும் திரை வாசிப்பாளர்களுக்கான லேபிள் உள்ளது. மேலும் அதன் சில சொற்கள் எங்கள் அனைத்து மொழிகளிலும் மொழிபெயர்க்கப்பட்டுள்ளன.

செலவு என்பது பக்கத்தின் எடை. வரைபடத்தின் குறியீடு சுமார் 107 KB (சுமார் 30 KB சுருக்கப்பட்ட) ஆகும், இயக்கும்போது சுமார் 670 கூறுகள் மற்றும் சுமார் 200 CSS இயக்கங்கள் உள்ளன. தர்க்கம் சோதிக்கவும் கடினம்: நேரம் CSS விசைகளுக்குள் மற்றும் பக்கத்தில் உள்ள ஒரு ஸ்கிரிப்டில் உள்ளது, ஆகவே ஒரே சோதனை அது எப்படி தோன்றுகிறது என்பதைப் பார்ப்பதே ஆகும்.

2. ரஸ்ட் மற்றும் வெப் அசெம்ப்லி

எளிய வார்த்தைகளில்: ரஸ்ட் என்பது வேகமாக செயல்படும் மற்றும் ஒரு நிரல் ஓடுவதற்கு முன் பல தவறுகளை பிடிக்கும் என்று அறியப்பட்ட ஒரு நிரலாக்க மொழி. இங்கே நாம் வரைபடத்தின் “மூளை” பகுதியை ரஸ்டில் எழுதினோம், அதை உலாவிகள் இயக்கக்கூடிய சுருக்கமான வடிவமாக (வெப் அசெம்ப்லி என்று அழைக்கப்படுகிறது) தொகுத்து, அதை முழு வரைபடத்தை தானாகவே வரையச் செய்தோம், ஒரு ஓவியர் ஒரு கேன்வாஸை பல முறை ஒரு வினாடிக்கு மீண்டும் வரையப்போல். உங்களுக்கு அது அதேபோல் தெரியும்.

முழு வரைபடமும் வெப் அசெம்ப்லியாக தொகுக்கப்பட்ட ரஸ்ட் மூலம் ஒரு தனி கேன்வாஸில் வரையப்படுகிறது. ரஸ்ட் குறியீடு வரைபடத்தின் அனைத்து செயல்பாடுகளையும் நிர்வகித்து ஒவ்வொரு ஃப்ரேமிலும் அனைத்தையும் மீண்டும் வரையிறது.

நாம் விரும்பிய பகுதி என்னவெனில், அந்த தர்க்கம் வெறும் ரஸ்ட் மொழியில் உள்ளது, உலாவியில் இருந்து எதுவும் சேர்க்கப்படவில்லை: எங்கே எதுவும் செல்லும் மற்றும் எப்போது மாறும் என்பதற்கான கணிதம் மற்றும் நிலத்தின் வரையறையை வாசிக்கும் பார்சர். இதில் ஒரு விநாடியின் ஒரு பகுதியிலேயே இயங்கும் 13 சோதனைகள் உள்ளன, மற்றும் சுழற்சியின் நேரம் தவறானால், யாரும் அது விசித்திரமாக தெரிகிறது என்று கவனிக்காமல் சோதனை தோல்வியடைகிறது. சுமார் 1,070 வரிகளிலிருந்து ஒரு மூன்றாம் பகுதி அந்த சோதிக்கப்பட்ட மூலக்கூறு (அதன் சோதனைகளுடன்) ஆகும்; மீதமுள்ளவை கேன்வாஸில் வரையவும் மவுஸ் நிகழ்வுகளை கையாளவும் பயன்படுத்தப்படுகின்றன.

பக்கம் மிகவும் எளிமையாக முடிகிறது: ஒரு கேன்வாஸ் கூறு மட்டும். ஆனால் பதிவிறக்கம் பெரியது. தொகுக்கப்பட்ட தொகுதி சுமார் 254 KB (சுமார் 92 KB சுருக்கப்பட்ட) மற்றும் கட்டுமான கருவி உருவாக்கும் சுமார் 28 KB ஜாவாஸ்கிரிப்ட் கிளூ சேர்க்கப்பட்டுள்ளது. இதை மேம்படுத்தும் போது நாம் உணரும் செலவுகள் உள்ளன:

• ஒரு கருவி சங்கிலி. கட்டமைப்புக்கு Rust, WebAssembly இலக்கு மற்றும் நூலகத்தின் பதிப்புடன் சரியாக பொருந்தும் கட்டளை வரி கருவி தேவை. எங்கள் கட்டமைப்பு ஸ்கிரிப்ட் முதலில் சோதனைகளை இயக்கி, ஒன்று தோல்வியடைந்தால் நிறுத்துகிறது.
• தனிப்பட்ட நகரங்களுக்கு விசைப்பலகை அல்லது திரை வாசிப்பாளர் அணுகல் இல்லை. ஒரு கேன்வாஸ் என்பது ஒரு படம். SVG பதிப்பின் 44 கவனிக்கக்கூடிய புள்ளிகள் அகற்றப்பட்டுள்ளன.
• ஆங்கிலம் மட்டுமே. லேபிள்கள் நிரலுக்குள் எழுதப்பட்டுள்ளன.
• மங்கல். மென்மையான நிழல் ஓரம் கேன்வாஸ் மங்கல் வடிகட்டியை பயன்படுத்துகிறது, இது எல்லா உலாவிகளும் ஆதரிக்காது. எங்கள் சோதனை Safari-யில் செய்யப்படவில்லை, அங்கு ஓரம் கடினமாக இருக்கலாம்.

3. ஃபிளட்டர்

எளிய வார்த்தைகளில்: ஃபிளட்டர் என்பது Google வழங்கும் ஒரு கருவி தொகுப்பு, இது ஒரே குறியீட்டு தொகுப்பிலிருந்து தொலைபேசிகள், கணினிகள் மற்றும் வலைத்தளங்களில் இயங்கும் செயலிகளை உருவாக்க உதவுகிறது. இது வலைப்பக்கத்தின் சொந்த கட்டுமான கூறுகளை பயன்படுத்தாது. அனைத்தையும் தானாக வரைந்து காட்டுகிறது. இங்கு வரைபடம் இந்தப் பக்கத்தில் காட்டப்படும் ஒரு சிறிய செயலி, இது எங்கள் சார்ஜிங் கணக்கீட்டாளர் இயக்கும் அதே கருவி தொகுப்பாகும்.

இது வரைபடத்தை தனிப்பயன் ஓவியர் மூலம் வரைந்து காட்டுகிறது, மற்றும் இது இங்கே ஒரு ஃப்ரேமில் காணப்படுகிறது. ஃபிளட்டர் ஒரே குறியீட்டிலிருந்து தொலைபேசி மற்றும் டெஸ்க்டாப் செயலிகளையும் உருவாக்க முடியும், இது அதன் முக்கிய வாதம்: ஒரு முறை வரைபடத்தை எழுதுங்கள், பல இடங்களில் இயக்குங்கள்.

இது Rust மேப்பின் அதே தர்க்கம், Dart-க்கு மாற்றப்பட்டுள்ளது, 11 சோதனைகளுடன். சோதனைகள் உட்பட சுமார் 1,100 வரிகள். Flutter ஒவ்வொரு நகரத்தையும் ஸ்கிரீன் ரீடர்களுக்கு லேபிள் செய்யப்பட்ட பொத்தானாக வழங்குகிறது, இது கேன்வாஸ் பதிப்பில் இல்லை (நாம் உண்மையான ஸ்கிரீன் ரீடருடன் எவ்வளவு நன்றாக வேலை செய்கிறது என்பதை பரிசோதிக்கவில்லை). இது மிகப்பெரிய பதிவிறக்கம் ஆகும்: செயலி சுமார் 1.8 MB (சுமார் 535 KB சுருக்கப்பட்ட) ஆகும். Flutter இன் வரைவுத் இயந்திரம் கூடுதல் பதிவிறக்கம் ஆகும், ஆனால் தளம் ஏற்கனவே கணக்கீட்டாளருடன் ஒரு நகலை பகிர்கிறது, ஆகவே கணக்கீட்டாளரை திறந்த பயனர் அதை மீண்டும் பதிவிறக்கம் செய்யவில்லை. அதன் உரை தளத்தின் எழுத்துரு Merriweather-ல் அமைக்கப்பட்டுள்ளது, இது உலாவி இயக்க நேரத்தில் பெறுகிறது.

நாம் கண்டது

வேகத்துக்கான இன்னொரு குறிப்பு. எங்கள் பரிசோதனையில், 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 பொருத்தமானது.

ஒரு பரிசோதனை தயாரிப்பை மாற்ற வேண்டியதில்லை. ஒவ்வொரு அணுகுமுறையின் செலவுகள் என்ன என்பதை தெளிவாகப் புரிந்துகொண்டோம், வரைபாட்டின் நடத்தை சோதிக்கப்பட்ட விவரணம் கிடைத்தது, மற்றும் நீங்கள் மூன்றையும் நேரடியாக பார்க்கக்கூடிய பக்கம் உருவானது.

எங்கள் நிறுவுனர்கள் அடுத்ததாக உருவாக்கும் விஷயங்கள்

ஒரு நிலையான தளம் மற்ற யோசனைகளுக்கு நேரத்தை விடுகிறது. EVnSteven தவிர, எங்கள் நிறுவுனர்கள் இதை பணியாற்றி வருகின்றனர்:

சவாரி சேவை, விரைவில் தொடக்கம் Kimem ↗ (opens in a new tab) எத்தியோப்பியாவின் பஹிர் டார் நகரத்திற்கு மெகொன்னென் ஆலெமு நிறுவுனரால் உருவாக்கப்பட்ட சவாரி சேவை. பயணிகள் முன்பே கட்டணம் மதிப்பீட்டை பார்க்க முடியும், அருகிலுள்ள ஓட்டுநர் வரைபடத்தில் நகர்வதை காணலாம், மற்றும் பயணம் முடிந்தவுடன் பணத்தில் அளவிடப்பட்ட கட்டணத்தை செலுத்துவர்.

பயனற்ற இலாபம், திறந்த மூல StrayCats ↗ (opens in a new tab) தெரு பூனைகள், தவறிவிட்ட பூனைகள் அல்லது எந்த பூனையையும், அப்பூனை நாயாக இருந்தாலும் கவனிக்கும் மக்களுக்கு உதவுவதற்கான டேவிட் உருவாக்கிய திட்டம். இது இன்னும் யோசனை நிலைமையில் உள்ளது, எந்த செயலியும் இல்லை, மற்றும் டேவிட் உங்கள் யோசனைகள் மற்றும் கருத்துக்களை விரும்புகிறார். சைபோவுக்கு அர்ப்பணிக்கப்பட்டது, 2010–2026.

பணம் கண்காணிப்பு, இலவசம், விரைவில் தொடக்கம் Effectivo ↗ (opens in a new tab) பணத்தை பயன்படுத்துவோருக்கான சிறிய திருப்பத்துடன் கூடிய குறைந்தபட்ச கணக்கியல். சில தட்டுதல்களில் வாங்கியதை பதிவு செய்யவும், உங்கள் பணப்பையை எண்ணவும், மதிப்புடையதை பின்வாங்கி பார்க்கவும். திருப்பம் என்னவெனில், பணத்தை தொடர்ந்து பயன்படுத்தும் ஒவ்வொருவரும் மற்றவர்களுக்காக பணத்தை நிலைநாட்ட உதவுகிறார்கள். இலவசமாகவும் விளம்பரம் இல்லாமல், ஆண்ட்ராய்டு மற்றும் ஐபோனுக்கு வர உள்ளது, தற்போது ஒரு பீட்டா மற்றும் வலை டெமோ இயங்குகிறது.