Vue 3.6-ன் வரவிருக்கும் Vapor Mode இந்த இலையுதிர்காலத்தில் வெளியாகும். இது இந்த framework இதுவரை செய்யாத ஒன்றைச் செய்கிறது: இது single-file components-களை நேரடியாக DOM-க்கு மாற்றங்களைச் செய்யும் வகையில் (straight-to-the-DOM updates) மாற்றுகிறது, இதன் மூலம் virtual DOM-ஐ முற்றிலும் தவிர்க்கிறது.

ஏன் Vue virtual DOM-ஐ தவிர்க்கிறது

Vue 2 முதல், virtual DOM என்பது இந்த framework-ன் reactivity model-ன் மையமாக இருந்து வருகிறது. நிலை (state) மாறும்போது, Vue ஒரு இலகுவான in-memory tree-ஐ உருவாக்கி, அதை முந்தைய பதிப்புடன் ஒப்பிட்டுப் பார்த்து (diffing), வேறுபடும் பகுதிகளை மட்டும் மாற்றுகிறது. இந்த மறைமுக முறை (indirection), எந்த element-ஐ மாற்ற வேண்டும் என்று கவலைப்படாமல், டெவலப்பர்கள் declarative code-ஐ எழுத அனுமதிக்கிறது. ஆனால், இதன் சவாலான விஷயம் என்னவென்றால், ஒவ்வொரு render செய்யும் போதும் அந்த virtual tree-ஐ உருவாக்குவதற்கும், ஒப்பிடுவதற்கும் (diffing) செலவிட வேண்டியுள்ளது.

Vapor Mode அந்த இடைநிலை படிநிலையை நீக்குகிறது. Build செய்யும் போது, Vue compiler template-ஐ ஆய்வு செய்து, மாற்றங்கள் தேவைப்படும் இடத்தில் நேரடியாக native DOM முறைகளை அழைக்கும் JavaScript-ஐ வெளியிடுகிறது—உதாரணமாக element.textContent = …, element.setAttribute(...). இதில் virtual nodes உருவாக்கப்படுவதில்லை, diffing loop-களும் இயங்குவதில்லை. நீங்கள் எழுதிய குறிப்பிட்ட மாற்றங்களுக்குத் தேவையான code மற்றும் reactivity-க்குத் தேவையான runtime ஆகியவற்றை மட்டுமே இந்த bundle கொண்டிருக்கும்.

அளவு மற்றும் வேகத்தில் நிஜ உலகத் தாக்கம்

  • Bundle அளவு – virtual-DOM runtime மற்றும் அதன் தரவு கட்டமைப்புகளை (data structures) நீக்குவதன் மூலம், உருவாக்கப்படும் code அளவு குறைகிறது. ஒரு வினாடிக்கு டஜன் கணக்கான முறை புதுப்பிக்கப்படும் பெரிய grids அல்லது canvases கொண்ட திட்டங்களில், இந்த சேமிப்பு குறிப்பிடத்தக்க அளவில் இருக்கும், குறிப்பாக குறைந்த அலைவரிசை (low-bandwidth) இணைப்புகளில் இது பயனுள்ளதாக இருக்கும்.
  • செயல்திறன் (Performance) – நேரடி DOM அழைப்புகள் diffing overhead-ஐத் தவிர்க்கின்றன, இது UI அதிக அதிர்வெண்ணில் (high frequency) மாறும்போது தெளிவாகத் தெரியும். ஒரு சில தனிப்பட்ட பிரவுசர் கேம்களில்—ஒரு nonogram, ஒரு minesweeper clone மற்றும் ஒரு 3-D Rubik’s-cube visualiser—நான் rendering logic-ஐ கைமுறையாக எழுதி, தேவைப்படும் இடங்களில் மட்டும் DOM-ஐப் புதுப்பித்தேன்.
  • டெவலப்பர்களுக்கான வசதி (Developer ergonomics) – கடினமான வேலையை compiler செய்கிறது. நீங்கள் வழக்கமான Vue templates-ஐயே எழுதுவீர்கள்; document.querySelector அழைப்புகளை நீங்களாகவே உருவாக்க வேண்டிய அவசியமில்லை. நான் அந்த கேம்களில் சிறந்த செயல்திறனைப் பெற கைமுறையாக எழுதிய அணுகுமுறையை போலவே, இந்த உருவாக்கப்பட்ட code-ம் செயல்படுகிறது.

Vapor Mode எப்போது உண்மையில் உதவும்

  1. பெரிய கட்டமைப்புகளில் அதிக அதிர்வெண் கொண்ட மாற்றங்கள் – கேம்கள், தரவு மிகுந்த டேஷ்போர்டுகள் (data-intensive dashboards), அல்லது ஒவ்வொரு tick-இலும் பல செல்களை மீண்டும் வரையும் எந்தவொரு interface-க்கும் இது அதிக பலன் தரும். ஒவ்வொரு tick-இலும் ஒரு பெரிய grid-ஐ ஒப்பிடுவது (diffing) frame budget-ஐப் பாதிக்கும்; நேரடி மாற்றங்கள் (direct updates) வேலையை நேரியலாகவும் (linear) கணிக்கக்கூடியதாகவும் வைத்திருக்கும்.
  2. Bundle அளவு கட்டுப்பாடுகள் கொண்ட பயன்பாடுகள் – சில நூறு கிலோபைட்டங்களுக்குள் லோட் ஆக வேண்டிய mobile-first தளங்கள், virtual-DOM runtime நீக்கப்படும்போது குறிப்பிடத்தக்க அளவு குறைவைக் காண்பார்கள்.
  3. தூய்மையான, கணிக்கக்கூடிய நிலை (Pure, predictable state) – உங்கள் state-ஐ மாற்ற முடியாததாக (immutable) வைத்துக்கொண்டு, DOM-ஐ அந்த state-ன் தூய்மையான பிரதிபலிப்பாகக் கருத வேண்டும் என்று Vapor Mode எதிர்பார்க்கிறது. உங்கள் code-ல் side-effects கலந்திருந்தாலோ அல்லது Vue-ன் reactivity system-க்கு வெளியே DOM-ஐ மாற்ற முயன்றாலோ, உருவாக்கப்பட்ட மாற்றங்கள் சரியாகப் பொருந்தாமல் போகலாம், இது visual glitches-களுக்கு வழிவகுக்கும்.

பழைய முறை எங்கே இன்னும் சிறந்தது

  • குறைந்த அதிர்வெண் கொண்ட UI-கள் – எப்போதாவது பயனர் செய்யும் செயல்களால் மட்டுமே rerender ஆகும் எளிய படிவங்கள் (forms), நிலையான பக்கங்கள் அல்லது admin panels ஆகியவற்றிற்கு செயல்திறன் பெரிய அளவில் அதிகரிக்காது. நெட்வொர்க் தாமதம் (network latency) அல்லது சர்வர் செயலாக்க நேரத்துடன் ஒப்பிடும்போது, ஒரு virtual tree-ஐ உருவாக்குவது மிகச்சிறிய விஷயமாகவே இருக்கும்.
  • சிக்கலான component படிநிலைகள் (Complex component hierarchies) – ஒரு ஆழமான tree-ல் ஒரு leaf node மட்டும் மாறும்போது, virtual DOM தானாகவே பெரிய பகுதிகளைத் தவிர்க்க முடியும். நேரடி மாற்றங்கள் (Direct updates), ஒவ்வொரு சாத்தியமான மாற்றத்திற்கும் துல்லியமான patches-களை உருவாக்க compiler-ஐத் தூண்டும், இது சில நேரங்களில் code அளவை அதிகரிக்கலாம்.
  • கருவிகள் மற்றும் சுற்றுச்சூழல் (Tooling and ecosystem) – பல Vue plugins, devtools மற்றும் testing utilities virtual-DOM லேயருடன் இணைக்கப்பட்டுள்ளன. இந்த ecosystem அந்த மாற்றத்திற்குத் தயாராகும் வரை, Vapor-mode components-களுடன் வேலை செய்ய அந்த ஒருங்கிணைப்புகளுக்கு (integrations) அப்டேட்கள் தேவைப்படலாம்.

அடுத்து கவனிக்க வேண்டியவை

  • நிலையான வெளியீடு (Stable release) – Vue 3.6 தற்போது release-candidate நிலையில் உள்ளது. இந்த இலையுதிர்காலத்தில் இறுதி நிலையான வெளியீட்டைத் team திட்டமிட்டுள்ளது. ஆரம்பகாலப் பயனர்கள் (Early adopters) production code-ஐ வெளியிடுவதற்கு முன் அந்த பதிப்பிற்காகக் காத்திருப்பது நல்லது.
  • மாற்றுப் பாதை (Migration path) – தற்போதுள்ள Vue திட்டங்கள் ஒவ்வொரு component அடிப்படையில் Vapor Mode-ஐப் பயன்படுத்தத் தேர்ந்தெடுக்கலாம்.
  • செயல்திறன் கருவிகள் (Performance tooling) – நிஜ உலகப் பயன்பாடுகளில் virtual-DOM மற்றும் Vapor-mode builds ஆகியவற்றை ஒப்பிடும் benchmarks, எந்தச் சூழலில் இந்த மாற்றத்தைச் செய்வது லாபகரமானது என்பதைத் தீர்மானிக்க அணிகளுக்கு உதவும்.

சுருக்கமாக

Vapor Mode, Vue உருவாக்குபவர்களுக்கு இரண்டு உலகங்களின் சிறந்த அம்சங்களையும் வழங்குகிறது: அவர்களுக்குப் பிடித்த declarative syntax மற்றும் நேரடியாகக் கையாளப்படும் DOM புதுப்பிப்புகளின் அதிவேகம் ஆகிய இரண்டும் இதில் உள்ளன. ஒரு வினாடிக்கு பலமுறை UI-ன் பெரும் பகுதிகளைப் புதுப்பிக்கும் செயலிகளுக்கும், ஒவ்வொரு கிலோபைட்டும் முக்கியத்துவம் வாய்ந்த deployments-களுக்கும் இது சிறப்பாகச் செயல்படும். குறைந்த போக்குவரத்து கொண்ட interfaces-களுக்கு, பாரம்பரிய virtual DOM என்பது முற்றிலும் சாத்தியமான, எளிமையான தேர்வாகவே இருக்கும். இந்த அம்சம் release candidate நிலையிலிருந்து stable நிலைக்கு மாறும்போது, Vue சமூகம் bundle-size சேமிப்பிற்கும், ecosystem தயார்நிலைக்கும் மற்றும் அவர்களின் செயலிகளின் குறிப்பிட்ட performance profile-களுக்கும் இடையிலான சமநிலையை ஆராய வேண்டியிருக்கும்.