Vue 3.6 નું આગામી Vapor Mode આ શરદઋતુમાં રિલીઝ થશે, અને તે કંઈક એવું કરશે જે આ ફ્રેમવર્ક દ્વારા પહેલા ક્યારેય કરવામાં આવ્યું નથી: તે સિંગલ-ફાઇલ કમ્પોનન્ટ્સને સીધા-તે-DOM અપડેટ્સમાં કમ્પાઇલ કરે છે, જે વર્ચ્યુઅલ DOM ને સંપૂર્ણપણે બાયપાસ કરે છે.
Vue શા માટે વર્ચ્યુઅલ DOM થી દૂર જઈ રહ્યું છે
Vue 2 થી, વર્ચ્યુઅલ DOM ફ્રેમવર્કના રિએક્ટિવિટી મોડેલનો મુખ્ય ભાગ રહ્યો છે. જ્યારે સ્ટેટ (state) બદલાય છે, ત્યારે Vue એક હળવું ઇન-મેમરી ટ્રી બનાવે છે, તેની અગાઉના વર્ઝન સાથે સરખામણી (diff) કરે છે, અને માત્ર જે ભાગો અલગ હોય તેને જ પેચ (patch) કરે છે. આ પરોક્ષતા ડેવલપર્સને કયો એલિમેન્ટ ખરેખર અપડેટ કરવાની જરૂર છે તેની ચિંતા કર્યા વિના ડિક્લેરેટિવ કોડ લખવા દે છે. તેની સામેનો નુકસાન એ છે કે દરેક રેન્ડરિંગમાં તે વર્ચ્યુઅલ ટ્રી બનાવવા અને તેની સરખામણી કરવાનો ખર્ચ તો થાય જ છે.
Vapor Mode તે મધ્યવર્તી સ્ટેપને દૂર કરે છે. બિલ્ડ દરમિયાન, Vue કમ્પાઇલર ટેમ્પલેટનું વિશ્લેષણ કરે છે અને એવું JavaScript જનરેટ કરે છે જે જ્યાં ફેરફારની જરૂર હોય ત્યાં સીધા નેટિવ DOM મેથડ્સ—element.textContent = …, element.setAttribute(...)—ને કોલ કરે છે. કોઈ વર્ચ્યુઅલ નોડ્સ બનાવવામાં આવતા નથી, કોઈ ડિફિંગ લૂપ ચાલતું નથી. અંતે બંડલમાં તમે લખેલા ચોક્કસ અપડેટ્સ માટે જરૂરી કોડ અને રિએક્ટિવિટી માટે જરૂરી રનટાઇમ જ રહે છે.
સાઈઝ અને સ્પીડ પર વાસ્તવિક દુનિયાની અસર
- બંડલ સાઈઝ – વર્ચ્યુઅલ-DOM રનટાઇમ અને તેના ડેટા સ્ટ્રક્ચર્સને દૂર કરીને, જનરેટ થયેલો કોડ નાનો થઈ જાય છે. સેકન્ડમાં ડઝનબંધ વખત અપડેટ થતા મોટા ગ્રીડ્સ અથવા કેનવાસ ધરાવતા પ્રોજેક્ટ્સમાં, આ બચત નોંધપાત્ર બને છે, ખાસ કરીને લો-બેન્ડવિડ્થ કનેક્શન પર.
- પરફોર્મન્સ – ડાયરેક્ટ DOM કોલ્સ ડિફિંગ ઓવરહેડને ટાળે છે, જે UI જ્યારે ઉચ્ચ આવૃત્તિએ (high frequency) બદલાય ત્યારે સ્પષ્ટપણે દેખાય છે. પર્સનલ બ્રાઉઝર ગેમ્સના સેટમાં—એક નોનોગ્રામ, એક માઈનસ્વીપર ક્લોન અને 3-D રૂબિક્સ-ક્યુબ વિઝ્યુલાઇઝર—મેં રેન્ડરિંગ લોજિક જાતે લખ્યું હતું, જ્યાં જરૂર હોય ત્યાં જ DOM અપડેટ કર્યું હતું.
- ડેવલપર એર્ગોનોમિક્સ – કમ્પાઇલર મુખ્ય કામગીરી કરે છે. તમે હજુ પણ નિયમિત Vue ટેમ્પલેટ્સ લખો છો; તમારે
document.querySelectorકોલ્સ જાતે લખવાની જરૂર નથી. જનરેટ થયેલો કોડ એ જ હેન્ડ-રિટન એપ્રોચને અનુસરે છે જેણે મને તે ગેમ્સમાં શ્રેષ્ઠ પરફોર્મન્સ આપ્યું હતું.
Vapor Mode ખરેખર ક્યારે મદદરૂપ થાય છે
- મોટી સ્ટ્રક્ચર્સ પર હાઈ-ફ્રિકવન્સી અપડેટ્સ – ગેમ્સ, ડેટા-ઇન્ટેન્સિવ ડેશબોર્ડ્સ, અથવા કોઈપણ ઇન્ટરફેસ જે દરેક ટિક પર ઘણા સેલ્સને ફરીથી ડ્રો કરે છે તેને સૌથી વધુ ફાયદો થાય છે. દરેક ટિક પર મોટા ગ્રીડનું ડિફિંગ ફ્રેમ બજેટનો મોટો ભાગ લઈ શકે છે; ડાયરેક્ટ અપડેટ્સ કામને લિનિયર અને અનુમાનિત રાખે છે.
- બંડલ-સાઈઝ મર્યાદિત ડિપ્લોયમેન્ટ્સ – મોબાઈલ-ફર્સ્ટ સાઇટ્સ જેમને થોડા સો કિલોબાઇટની અંદર લોડ થવું પડે છે, તેમાં વર્ચ્યુઅલ-DOM રનટાઇમ દૂર થવાથી નોંધપાત્ર ઘટાડો જોવા મળે છે.
- પ્યોર, પ્રિડિક્ટેબલ સ્ટેટ – Vapor Mode એવું માની લે છે કે તમે સ્ટેટને ઇમ્યુટેબલ (immutable) રાખો છો અને DOM ને તે સ્ટેટના શુદ્ધ પ્રોજેક્શન તરીકે ગણો છો. જો તમારો કોડ સાઇડ-ઇફેક્ટ્સ મિક્સ કરે છે અથવા Vue ની રિએક્ટિવિટી સિસ્ટમની બહાર DOM માં ફેરફાર કરે છે, તો જનરેટ થયેલા અપડેટ્સ સિંકમાંથી બહાર નીકળી શકે છે, જેનાથી વિઝ્યુઅલ ગ્લિચ (visual glitches) થઈ શકે છે.
જૂનો અભિગમ ક્યાં હજુ પણ વિજેતા છે
- લો-ફ્રિકવન્સી UI – સાદા ફોર્મ્સ, સ્ટેટિક પેજ અથવા એડમિન પેનલ્સ જે માત્ર પ્રસંગોપાત યુઝર એક્શન પર જ ફરીથી રેન્ડર થાય છે, તેમને બહુ ઓછું પરફોર્મન્સ મળે છે. નેટવર્ક લેટન્સી અથવા સર્વર પ્રોસેસિંગ સમયની સરખામણીમાં વર્ચ્યુઅલ ટ્રી બનાવવાનું વધારાનું કામ નગણ્ય છે.
- જટિલ કમ્પોનન્ટ હાયરાર્કીઝ – જ્યારે ઊંડા ટ્રીમાં માત્ર એક લીફ નોડ બદલાય છે, ત્યારે વર્ચ્યુઅલ DOM આપમેળે મોટા ભાગોને સ્કીપ કરી શકે છે. ડાયરેક્ટ અપડેટ્સ કમ્પાઇલરને દરેક સંભવિત ફેરફાર માટે ચોક્કસ પેચ જનરેટ કરવા માટે મજબૂર કરે છે, જે એજ કેસમાં કોડ સાઈઝ વધારી શકે છે.
- ટૂલિંગ અને ઇકોસિસ્ટમ – ઘણા Vue પ્લગિન્સ, ડેવટૂલ્સ અને ટેસ્ટિંગ યુટિલિટીઝ વર્ચ્યુઅલ-DOM લેયર સાથે જોડાયેલા હોય છે. ઇકોસિસ્ટમ સમાન સ્તરે ન આવે ત્યાં સુધી તે ઇન્ટિગ્રેશન્સને Vapor-mode કમ્પોનન્ટ્સ સાથે કામ કરવા માટે અપડેટ્સની જરૂર પડી શકે છે.
આગળ શું જોવું
- સ્ટેબલ રિલીઝ – Vue 3.6 અત્યારે રિલીઝ-કેન્ડિડેટ સ્ટેટસમાં છે. ટીમ આ શરદઋતુમાં અંતિમ સ્ટેબલ લોન્ચનું આયોજન કરી રહી છે. પ્રોડક્શન કોડ શિપ કરતા પહેલા અર્લી એડોપ્ટર્સ (early adopters) એ તે વર્ઝન માટે રાહ જોવી જોઈએ.
- માઇગ્રેશન પાથ – હાલના Vue પ્રોજેક્ટ્સ પ્રતિ-કમ્પોનન્ટ ધોરણે Vapor Mode પસંદ કરી શકે છે.
- પરફોર્મન્સ ટૂલિંગ – વાસ્તવિક એપ્સ પર વર્ચ્યુઅલ-DOM અને Vapor-mode બિલ્ડ્સની સરખામણી કરતા બેન્ચમાર્ક ટીમોને એ નક્કી કરવામાં મદદ કરશે કે ક્યારે આ બદલાવ (trade-off) લેવો ફાયદાકારક છે.
નિષ્કર્ષ
Vapor Mode Vue ડેવલપર્સને બે દુનિયાઓનું શ્રેષ્ઠ મિશ્રણ આપે છે: તેઓ જે ડિક્લેરેટિવ સિન્ટેક્સ પસંદ કરે છે તે અને હાથથી તૈયાર કરેલા DOM અપડેટ્સની અદભૂત ઝડપ. તે એવી એપ્સ માટે શ્રેષ્ઠ છે જે સેકન્ડમાં ઘણી વખત UI ના મોટા ભાગને રિફ્રેશ કરે છે અને એવા ડિપ્લોયમેન્ટ્સ માટે જ્યાં દરેક કિલોબાઇટ મહત્વનું છે. ઓછા ટ્રાફિક ધરાવતા ઇન્ટરફેસ માટે, પરંપરાગત વર્ચ્યુઅલ DOM એક સંપૂર્ણ રીતે વ્યવહારુ અને સરળ પસંદગી છે. જેમ જેમ આ ફીચર રિલીઝ કેન્ડિડેટમાંથી સ્ટેબલ તરફ આગળ વધશે, તેમ Vue સમુદાયે બંડલ-સાઇઝમાં થતી બચતની સરખામણી ઇકોસિસ્ટમની સજ્જતા અને તેમની એપ્લિકેશન્સના ચોક્કસ પરફોર્મન્સ પ્રોફાઇલ સાથે કરવી પડશે.