അതു തന്നെ നക്ഷത്രം, മൂന്ന് മാർഗങ്ങൾ: SVG, Rust, Flutter

EVnSteven ഒരു സുഖപ്രദമായ നിലയിലേക്ക് എത്തി. പ്ലാറ്റ്ഫോം സ്ഥിരതയുള്ളതാണ്, കൂടാതെ അതിന് അധിക പരിപാലനം ആവശ്യമില്ല, ഇത് തന്നെ ഞങ്ങൾ ആരംഭിക്കുമ്പോൾ ആഗ്രഹിച്ചു: ശാന്തമായി പ്രവർത്തിക്കുന്ന ഒരു ചെറിയ സിസ്റ്റം. ഇതോടെ പരീക്ഷണത്തിന് ചെറിയൊരു സ്ഥലം ലഭിച്ചു, കൂടാതെ ഇത് നമ്മുടെ സ്ഥാപകർക്ക് മറ്റൊരു ചില പ്രോജക്റ്റുകൾ ആരംഭിക്കാൻ സമയമുണ്ടാക്കി, അവ നിങ്ങൾക്ക് അവസാനത്തിൽ കാണാം.

അതിനാൽ ഞങ്ങൾ ഒരു പരീക്ഷണം നടത്തി. ഞങ്ങളുടെ ഹോം പേജിലെ മാപ്പ് എടുത്ത് അത് രണ്ട് തവണ പുനർനിർമ്മിച്ചു: ഒരിക്കൽ Rust-ൽ WebAssembly ആയി കോമ്പൈൽ ചെയ്ത്, മറ്റൊരിക്കൽ Flutter-ൽ. ഈ ലേഖനം ഈ മൂന്ന് മാപ്പുകളും ഒരേ പേജിൽ വെച്ച് അവയെ താരതമ്യം ചെയ്യുന്നു.

1. ഒറിജിനൽ: SVG, CSS, ചെറിയ ജാവാസ്ക്രിപ്റ്റ്

സാധാരണ ഭാഷയിൽ: ഇത് നമ്മുടെ ഹോം പേജിലെ മാപ്പാണ്. ഇത് വെബ് പേജിന്റെ ബാക്കി ഭാഗം നിർമ്മിക്കുന്ന രീതിയിലാണ് നിർമ്മിച്ചിരിക്കുന്നത്: നിങ്ങളുടെ ബ്രൗസർ ഇതിനകം പ്രദർശിപ്പിക്കാൻ അറിയുന്ന ആകൃതികളാൽ നിർമ്മിച്ച ഒരു വരച്ച ചിത്രം. ഇത് മൂന്നു മാപ്പുകളിൽ ഏറ്റവും ലളിതമാണ്, കൂടാതെ ഏറ്റവും കൂടുതൽ സന്ദർശകർ കാണുന്നത് ഇതാണ്.

ഇത് ഒരു SVG വരച്ച ചിത്രം മാത്രമാണ്. ബ്രൗസർ CSS-ൽ നിന്നുള്ള മിക്ക അനിമേഷനുകളും പ്രവർത്തിപ്പിക്കുന്നു, ബാക്കി ചെറിയ സ്ക്രിപ്റ്റ് കൈകാര്യം ചെയ്യുന്നു.

ഇതിന്റെ ഗുണം: നിർമ്മാണ ഘട്ടം ഇല്ല, അതിനാൽ ഒരു Hugo ടെംപ്ലേറ്റ് മാത്രമാകും ആവശ്യമായത്. ഇത് വെക്ടർ ആകൃതിയിലാണെന്ന്, അതിനാൽ ഏതൊരു വലുപ്പത്തിലും ഇത് തിളങ്ങും. 44 ഡോട്ടുകളും കീബോർഡിലൂടെ എത്താൻ കഴിയും, ഓരോന്നിനും സ്ക്രീൻ റീഡറുകൾക്കായി ലേബൽ ഉണ്ട്. കൂടാതെ അതിന്റെ കുറച്ച് വാക്കുകൾ ഞങ്ങളുടെ എല്ലാ ഭാഷകളിലേക്കും പരിഭാഷപ്പെടുത്തിയിട്ടുണ്ട്.

വിലക്കുറവ് പേജിന്റെ ഭാരം ആണ്. മാപ്പിന്റെ മാർക്കപ്പ് ഏകദേശം 107 KB (ഏകദേശം 30 KB കമ്പ്രസ്സ് ചെയ്തപ്പോൾ), പ്രവർത്തനസമയത്ത് ഏകദേശം 670 ഘടകങ്ങളും ഏകദേശം 200 CSS അനിമേഷനുകളും ഉണ്ട്. ലജിക് പരീക്ഷിക്കാൻ ബുദ്ധിമുട്ടാണ്: ടൈമിംഗ് CSS കീഫ്രെയിമുകളിലും പേജിലുള്ള ഒരു സ്ക്രിപ്റ്റിലും ഉണ്ടാകുന്നത് കൊണ്ട്, ഏകദേശം അത് നോക്കിയാണ് പരീക്ഷണം നടത്തുന്നത്.

2. റസ്റ്റ് ആൻഡ് വെബ് അസംബ്ലി

സാധാരണ ഭാഷയിൽ: റസ്റ്റ് ഒരു പ്രോഗ്രാമിംഗ് ഭാഷയാണ്, ഇത് വേഗത്തിൽ പ്രവർത്തിക്കുന്നതും പ്രോഗ്രാം പ്രവർത്തിക്കാൻ തുടങ്ങുന്നതിന് മുമ്പ് പല പിശകുകളും പിടികൂടുന്നതിലും പ്രശസ്തമാണ്. ഇവിടെ നാം മാപ്പിന്റെ “ബ്രെയിൻ” റസ്റ്റിൽ എഴുതിയിട്ടുണ്ട്, ബ്രൗസറുകൾ പ്രവർത്തിപ്പിക്കാൻ കഴിയുന്ന ഒരു സംക്ഷിപ്ത രൂപത്തിലേക്ക് പാക്ക് ചെയ്തിട്ടുണ്ട് (വെബ് അസംബ്ലി എന്ന് വിളിക്കുന്നു), അത് തന്നെ മുഴുവൻ മാപ്പ് വരയ്ക്കാൻ അനുവദിച്ചു, ഒരു ചിത്രകാരൻ ഓരോ സെക്കൻഡിലും ഒരേ കാൻവാസ് പുനരാഖ്യാനം ചെയ്യുന്നതുപോലെ. നിങ്ങള്ക്ക് അത് ഒരുപോലെയാണ് കാണുന്നത്.

മുഴുവൻ മാപ്പും ഒരു കാൻവാസ് എലമെന്റിൽ റസ്റ്റിൽ എഴുതിയ കോഡ് വെബ് അസംബ്ലിയിലേക്ക് കംപൈൽ ചെയ്ത് വരയ്ക്കുന്നു. മാപ്പിന്റെ എല്ലാ പെരുമാറ്റവും റസ്റ്റ് കോഡിന് കീഴിലാണ്, അത് ഓരോ ഫ്രെയിമിലും എല്ലാം പുനരാഖ്യാനം ചെയ്യുന്നു.

നമുക്ക് ഇഷ്ടമായ ഭാഗം ഇതാണ്: ലൊജിക് സുതാര്യമായ റസ്റ്റ് കോഡാണ്, ബ്രൗസറിൽ നിന്നുള്ള ഒന്നും ഇതിൽ ഇല്ല: വസ്തുക്കൾ എവിടെ പോകും, എപ്പോൾ മാറും എന്ന ഗണിതം, ഭൂമിയുടെ രൂപരേഖ വായിക്കുന്ന പാർസർ എന്നിവ. ഇതിന് 13 ടെസ്റ്റുകൾ ഉണ്ട്, അവ സെക്കൻഡിന്റെ ഒരു ഭാഗത്തിൽ പ്രവർത്തിക്കുന്നു, സൈക്കിളിന്റെ ടൈമിംഗ് തെറ്റായാൽ, ടെസ്റ്റ് പരാജയപ്പെടും, ആരെങ്കിലും അത് അസാധാരണമായി കാണുന്നതിന് പകരം. ഏകദേശം 1,070 വരികളുള്ള റസ്റ്റ് കോഡിന്റെ ഏക ത്രിതീയ ഭാഗം ഈ ടെസ്റ്റുകളുള്ള കോർ ലൊജിക്കാണ്; ബാക്കി കാൻവാസിൽ വരയ്ക്കുകയും മൗസ് ഇവന്റുകൾ കൈകാര്യം ചെയ്യുകയും ചെയ്യുന്നു.

പേജ് വളരെ ലഘുവാണ്: ഒരു കാൻവാസ് എലമെന്റ് മാത്രം. എന്നാൽ ഡൗൺലോഡ് വലുതാണ്. കംപൈൽ ചെയ്ത മോഡ്യൂൾ ഏകദേശം 254 KB (ഏകദേശം 92 KB കംപ്രസ്സ് ചെയ്ത) ആണ്, കൂടാതെ ബിൽഡ് ടൂൾ സൃഷ്ടിക്കുന്ന ഏകദേശം 28 KB ജാവാസ്ക്രിപ്റ്റ് ഗ്ലൂ ഉണ്ട്. ഇതിൽ പ്രവർത്തിക്കുമ്പോൾ ചില ചെലവുകൾ അനുഭവപ്പെടുന്നു:

• ഒരു ടൂൾചെയിൻ. ബിൽഡിങ്ങിന് റസ്റ്റ്, വെബ് അസംബ്ലി ടാർഗറ്റ്, ലൈബ്രറിയുടെ വെർഷനുമായി പൂർണ്ണമായും പൊരുത്തപ്പെടുന്ന കമാൻഡ്-ലൈൻ ടൂൾ വേണം. നമ്മുടെ ബിൽഡ് സ്ക്രിപ്റ്റ് ആദ്യം ടെസ്റ്റുകൾ നടത്തുകയും ഒരു ടെസ്റ്റ് പരാജയപ്പെടുമ്പോൾ നിർത്തുകയും ചെയ്യുന്നു.
• വ്യക്തിഗത നഗരങ്ങൾക്ക് കീബോർഡ് അല്ലെങ്കിൽ സ്ക്രീൻ-റീഡർ ആക്‌സസ് ഇല്ല. ഒരു ക്യാൻവാസ് ഒരു ചിത്രം മാത്രമാണ്. SVG പതിപ്പിലെ 44 ഫോക്കസബിൾ ഡോട്ടുകൾ ഇല്ലാതായി.
• ഇംഗ്ലീഷ് മാത്രം. ലേബലുകൾ പ്രോഗ്രാമിൽ തന്നെ എഴുതിയിട്ടുണ്ട്.
• ബ്ലർ. സോഫ്റ്റ് ഷാഡോ എഡ്ജ് ഒരു ക്യാൻവാസ് ബ്ലർ ഫിൽട്ടർ ഉപയോഗിക്കുന്നു, എല്ലാ ബ്രൗസറുകളും ഇത് പിന്തുണയ്ക്കുന്നില്ല. എഡ്ജ് കഠിനമായിരിക്കാവുന്ന സഫാരിയെ ഞങ്ങൾ പരീക്ഷിച്ചിട്ടില്ല.

3. ഫ്ലട്ടർ

സാധാരണ വാക്കുകളിൽ: ഫ്ലട്ടർ ഗൂഗിളിൽ നിന്നുള്ള ഒരു ടൂൾകിറ്റ് ആണ്, ഇത് ഒരേ കോഡ് സെറ്റിൽ നിന്ന് ഫോൺ, കമ്പ്യൂട്ടർ, വെബ് എന്നിവയിൽ പ്രവർത്തിക്കുന്ന ആപ്പുകൾ നിർമ്മിക്കാൻ ഉപയോഗിക്കുന്നു. ഇത് വെബ് പേജിന്റെ സ്വന്തം ബിൽഡിങ് ബ്ലോക്കുകൾ ഉപയോഗിക്കുന്നില്ല. എല്ലാം തന്നെ സ്വയം വരയ്ക്കുന്നു. ഇവിടെ മാപ്പ് ഈ പേജിനുള്ളിൽ കാണിക്കുന്ന ചെറിയ ആപ്പാണ്, നമ്മുടെ ചാർജിംഗ് കാൽക്കുലേറ്റർ പ്രവർത്തിപ്പിക്കുന്ന അതേ ടൂൾകിറ്റ്.

ഇത് ഒരു കസ്റ്റം പെയിന്റർ ഉപയോഗിച്ച് മാപ്പ് വരയ്ക്കുന്നു, ഇത് ഒരു ഫ്രെയിമിൽ ഇവിടെ കാണിക്കുന്നു. ഫ്ലട്ടർ ഒരേ കോഡിൽ നിന്ന് ഫോൺ ആപ്പുകളും ഡെസ്ക്ടോപ്പ് ആപ്പുകളും നിർമ്മിക്കാനും കഴിയും, ഇത് അതിന്റെ പ്രധാന വാദമാണ്: മാപ്പ് ഒരിക്കൽ എഴുതൂ, പല സ്ഥലങ്ങളിലും പ്രവർത്തിപ്പിക്കൂ.

ഇത് റസ്റ്റ് മാപ്പിന്റെ സമാനമായ ലജിക് ആണ്, ഡാർട്ടിലേക്ക് പോർട്ട് ചെയ്തിരിക്കുന്നത്, 11 ടെസ്റ്റുകളോടുകൂടി. ടെസ്റ്റുകൾ ഉൾപ്പെടെ ഏകദേശം 1,100 വരികൾ. ഫ്ലട്ടർ ഓരോ നഗരത്തെയും സ്ക്രീൻ റീഡറുകൾക്ക് ലേബൽ ചെയ്ത ബട്ടൺ ആയി കൈമാറുന്നു, കാൻവാസ് പതിപ്പിന് ഇത് ഇല്ല (ഒരു യഥാർത്ഥ സ്ക്രീൻ റീഡറുമായി ഇത് എത്രത്തോളം പ്രവർത്തിക്കുന്നുവെന്ന് പരിശോധിച്ചിട്ടില്ല). ഇത് ഏറ്റവും വലിയ ഡൗൺലോഡാണ്: ആപ്പ് ഏകദേശം 1.8 MB (ഏകദേശം 535 KB കംപ്രസ്സ് ചെയ്ത) വലുപ്പമുള്ളതാണ്. ഫ്ലട്ടറിന്റെ ഡ്രോയിംഗ് എഞ്ചിൻ ഒരു അധിക ഡൗൺലോഡാണ്, പക്ഷേ സൈറ്റ് ഇതിനകം കാൽക്കുലേറ്ററുമായി ഒരു കോപ്പി പങ്കുവെക്കുന്നു, അതിനാൽ കാൽക്കുലേറ്റർ തുറന്ന സന്ദർശകൻ അത് വീണ്ടും ഡൗൺലോഡ് ചെയ്യേണ്ടതില്ല. അതിന്റെ ടെക്സ്റ്റ് സൈറ്റിന്റെ ഫോണ്ട് Merriweather-ൽ സജ്ജീകരിച്ചിരിക്കുന്നു, ബ്രൗസർ റൺ ടൈമിൽ അത് ഫെച്ച് ചെയ്യുന്നു.

ഞങ്ങൾ കണ്ടെത്തിയത്

വേഗതയെക്കുറിച്ച് ഒരു കുറിപ്പ് കൂടി. ഞങ്ങളുടെ പരിശോധനയിൽ, SVG മാപ്പും റസ്റ്റ് മാപ്പും സ്ക്രീൻ റിഫ്രഷ് നിരക്കിൽ (പരീക്ഷണ ഡിസ്‌പ്ലേയിൽ ഏകദേശം 120 ഫ്രെയിംസ് പ്രതി സെക്കന്റ്) പ്രവർത്തിച്ചു, അതിനാൽ ഫ്രെയിം നിരക്ക് അവരെ വേർതിരിച്ചില്ല. ഫ്ലട്ടറിന്റെ ഫ്രെയിം നിരക്ക് ഞങ്ങൾ അളക്കിയിട്ടില്ല, ബാറ്ററി അല്ലെങ്കിൽ CPU ഉപയോഗം അളക്കിയിട്ടില്ല, അതിനാൽ ഫോൺ ലളിതമായത് ഏതാണ് എന്ന് പറയാൻ കഴിയില്ല.

ഞങ്ങളെ അത്ഭുതപ്പെടുത്തിയത്

ചില വിശദാംശങ്ങൾ തെറ്റായി പിടിക്കാൻ എളുപ്പമാണ്. ഞങ്ങളുടെ ആദ്യ ക്ലോണുകൾ കീയും ക്ലോക്കുകളും മാപ്പിന്റെ നിശ്ചിത പങ്കിൽ വരച്ചിരുന്നു, അതിനാൽ അവ ചെറിയ സ്ക്രീനുകളിൽ ചുരുങ്ങുകയും ഒറിജിനലിനോട് താരതമ്യത്തിൽ ചെറുതായി കാണപ്പെടുകയും ചെയ്തു. ഒറിജിനൽ പേജ് സ്വന്തം ഫോണ്ട് യൂണിറ്റ് (rem, സ്ക്രീൻ വീതിയനുസരിച്ച് മാറുന്നു) ഉപയോഗിച്ച് അവയുടെ വലിപ്പം നിശ്ചയിക്കുന്നു. ക്ലോണുകൾ ഇപ്പോൾ ആ വലിപ്പം പേജിൽ നിന്ന് വായിക്കുന്നു. ക്ലോക്കുകൾക്കും വ്യത്യാസമുണ്ട്: ഒറിജിനലിന്റെ കൈകൾ 15 മിനിറ്റ് ഇടവേളകളിൽ നീങ്ങുമ്പോൾ, Rust, Flutter പതിപ്പുകളിൽ അവ തുടർച്ചയായി തിരിയുന്നു.

സമയം മേഖലകൾ ഉൾപ്പെടുത്തിയിട്ടില്ല. Rust WebAssembly ആയി കമ്പൈൽ ചെയ്യപ്പെടുന്നില്ല, Dart-ലും “Asia/Dubai” എന്ന സമയം മേഖല ഡാറ്റാബേസ് ഇല്ല. ഇരുവരും ബ്രൗസറിനോട് ചോദിക്കുന്നു, അതിന്റെ ഇൻബിൽറ്റ് Intl സേവനത്തിലൂടെ, daylight saving-ഉം ശരിയായി കൈകാര്യം ചെയ്യുന്നു.

മൂന്നും അവരുടെ ഇൻപുട്ടുകൾ പങ്കുവെക്കുന്നു. 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) കാഷ് ഉപയോഗിക്കുന്നവർക്കായി ഒരു തട്ടിപ്പില്ലാത്ത അക്കൗണ്ടിംഗ്, ഒരു വ്യത്യാസത്തോടെ. കുറച്ച് ടാപ്പുകളിൽ ഒരു വാങ്ങൽ രേഖപ്പെടുത്തുക, നിങ്ങളുടെ പേഴ്സണലിൽ ഉള്ളത് എണ്ണുക, എന്ത് മൂല്യമുള്ളതായിരുന്നു എന്ന് തിരികെ നോക്കുക. വ്യത്യാസം എന്തെന്നാൽ, കാഷ് ഉപയോഗിക്കുന്നത് തുടരുന്ന ഓരോരുത്തരും മറ്റുള്ളവർക്കും അത് നിലനിർത്താൻ സഹായിക്കുന്നു. സൗജന്യവും പരസ്യരഹിതവുമായ, ആൻഡ്രോയിഡിലും ഐഫോണിലും വരുന്നു, ഇപ്പോൾ ബീറ്റയും വെബ് ഡെമോയും പ്രവർത്തിക്കുന്നു.