Vue નો ઉપયોગ કરવાની રીતો ​

અમે માનીએ છીએ કે વેબ માટે કોઈ "વન સાઈઝ ફિટ્સ ઓલ (one size fits all)" વાર્તા નથી. આ જ કારણ છે કે Vue ને લવચીક અને ધીમે ધીમે અપનાવવા યોગ્ય બનાવવા માટે ડિઝાઇન કરવામાં આવ્યું છે. તમારા ઉપયોગના કેસ પર આધાર રાખીને, સ્ટેક (stack) જટિલતા, ડેવલપરના અનુભવ અને એન્ડ પર્ફોર્મન્સ (performance) વચ્ચે શ્રેષ્ઠ સંતુલન જાળવવા માટે Vue નો ઉપયોગ વિવિધ રીતે થઈ શકે છે.

સ્ટેન્ડઅલોન સ્ક્રિપ્ટ (Standalone Script) ​

Vue નો ઉપયોગ સ્ટેન્ડઅલોન સ્ક્રિપ્ટ ફાઇલ તરીકે થઈ શકે છે - કોઈ બિલ્ડ સ્ટેપ (build step) ની જરૂર નથી! જો તમારી પાસે પહેલાથી જ મોટાભાગના HTML રેન્ડર કરતું બેકએન્ડ ફ્રેમવર્ક છે, અથવા તમારી ફ્રન્ટએન્ડ લોજિક (logic) બિલ્ડ સ્ટેપને ન્યાય આપવા માટે પૂરતું જટિલ નથી, તો Vue ને તમારા સ્ટેકમાં એકીકૃત કરવાનો આ સૌથી સરળ રસ્તો છે. તમે આવા કિસ્સાઓમાં Vue ને jQuery ના વધુ ડિક્લેરેટિવ રિપ્લેસમેન્ટ તરીકે વિચારી શકો છો.

અમે અગાઉ petite-vue નામનું વૈકલ્પિક વિતરણ પ્રદાન કર્યું હતું જે ખાસ કરીને વર્તમાન HTML ને ધીમે ધીમે વધારવા માટે ઓપ્ટિમાઇઝ કરવામાં આવ્યું હતું. જો કે, petite-vue હવે સક્રિય રીતે જાળવવામાં આવતું નથી, જેનું છેલ્લું વર્ઝન Vue ૩.૨.૨૭ પર પ્રકાશિત થયું છે.

એમ્બેડેડ વેબ કમ્પોનન્ટ્સ (Embedded Web Components) ​

તમે સ્ટાન્ડર્ડ વેબ કમ્પોનન્ટ્સ બનાવવા માટે Vue નો ઉપયોગ કરી શકો છો જે કોઈપણ HTML પેજમાં એમ્બેડ કરી શકાય છે, ભલે તે પેજ ગમે તેમ રેન્ડર થયેલું હોય. આ વિકલ્પ તમને સંપૂર્ણપણે કન્ઝ્યુમર-અજ્ઞેયવાદી (consumer-agnostic) ફેશનમાં Vue નો લાભ લેવાની મંજૂરી આપે છે: પરિણામી વેબ કમ્પોનન્ટ્સ જૂની એપ્લિકેશન્સ, સ્ટેટિક HTML અથવા અન્ય ફ્રેમવર્ક સાથે બનેલી એપ્લિકેશન્સમાં પણ એમ્બેડ કરી શકાય છે.

સિંગલ-પેજ એપ્લિકેશન (Single-Page Application - SPA) ​

કેટલીક એપ્લિકેશનોને ફ્રન્ટએન્ડ પર સમૃદ્ધ ઇન્ટરેક્ટિવિટી, ઊંડી સત્ર ઊંડાઈ અને બિન-તુચ્છ સ્ટેટફુલ લોજિક (logic) ની જરૂર હોય છે. આવી એપ્લીકેશનો બનાવવાનો શ્રેષ્ઠ રસ્તો એ આર્કિટેક્ચરનો ઉપયોગ કરવાનો છે જ્યાં Vue માત્ર સમગ્ર પેજને નિયંત્રિત કરતું નથી, પણ પેજને રીલોડ કર્યા વિના ડેટા અપડેટ અને નેવિગેશન પણ હેન્ડલ કરે છે. આ પ્રકારની એપ્લિકેશનને સામાન્ય રીતે સિંગલ-પેજ એપ્લિકેશન (SPA) તરીકે ઓળખવામાં આવે છે.

આધુનિક SPAs બનાવવા માટે Vue કોર લાઇબ્રેરીઓ અને અદભૂત ડેવલપર અનુભવ સાથે વ્યાપક ટૂલિંગ સપોર્ટ પૂરો પાડે છે, જેમાં શામેલ છે:

• ક્લાયન્ટ-સાઇડ રાઉટર
• અત્યંત ઝડપી બિલ્ડ ટૂલ ચેઇન
• IDE સપોર્ટ
• બ્રાઉઝર ડેવટૂલ્સ (Devtools)
• TypeScript ઇન્ટિગ્રેશન
• ટેસ્ટિંગ યુટિલિટીઝ

SPAs ને સામાન્ય રીતે API એન્ડપોઇન્ટ્સ એક્સપોઝ કરવા માટે બેકએન્ડની જરૂર હોય છે - પરંતુ સર્વર-સેન્ટ્રિક ડેવલપમેન્ટ મોડેલ જાળવી રાખીને SPA લાભો મેળવવા માટે તમે Inertia.js જેવા ઉકેલો સાથે Vue ને પણ જોડી શકો છો.

ફુલસ્ટેક / SSR (Fullstack / SSR) ​

જ્યારે એપ SEO અને ટાઇમ-ટુ-કન્ટેન્ટ પ્રત્યે સંવેદનશીલ હોય ત્યારે શુદ્ધ ક્લાયન્ટ-સાઇડ SPAs સમસ્યારૂપ બને છે. આ એટલા માટે છે કારણ કે બ્રાઉઝર મોટે ભાગે ખાલી HTML પેજ પ્રાપ્ત કરશે, અને કંઈપણ રેન્ડર કરતા પહેલા JavaScript લોડ થાય ત્યાં સુધી રાહ જોવી પડશે.

સર્વર પર Vue એપને HTML સ્ટ્રિંગ્સમાં "રેન્ડર" કરવા માટે Vue ફર્સ્ટ-ક્લાસ APIs પ્રદાન કરે છે. આ સર્વરને પહેલેથી રેન્ડર કરેલ HTML પાછું મોકલવાની પરવાનગી આપે છે, જે વપરાશકર્તાઓને JavaScript ડાઉનલોડ થઈ રહી હોય ત્યારે તરત જ સામગ્રી જોવાની મંજૂરી આપે છે. Vue પછી તેને ઇન્ટરેક્ટિવ બનાવવા માટે ક્લાયન્ટ સાઇડ પર એપ્લિકેશનને "હાઇડ્રેટ (hydrate)" કરશે. આને Server-Side Rendering (SSR) કહેવામાં આવે છે અને તે Largest Contentful Paint (LCP) જેવા કોર વેબ વાઇટલ મેટ્રિક્સમાં ઘણો સુધારો કરે છે.

આ નમૂનાની ટોચ પર બનેલા હાયર-લેવલના Vue-આધારિત ફ્રેમવર્ક છે, જેમ કે Nuxt, જે તમને Vue અને JavaScript નો ઉપયોગ કરીને ફુલસ્ટેક એપ્લિકેશન વિકસાવવાની મંજૂરી આપે છે.

JAMStack / SSG (JAMStack / SSG) ​

જો જરૂરી ડેટા સ્ટેટિક હોય તો સર્વર-સાઇડ રેન્ડરિંગ સમય પહેલા કરી શકાય છે. આનો અર્થ એ છે કે આપણે આખી એપ્લિકેશનને HTML માં પ્રી-રેન્ડર કરી શકીએ છીએ અને તેને સ્ટેટિક ફાઇલો તરીકે સર્વ કરી શકીએ છીએ. આ સાઇટના પર્ફોર્મન્સમાં સુધારો કરે છે અને ડિપ્લોયમેન્ટને ઘણું સરળ બનાવે છે કારણ કે આપણે હવે દરેક વિનંતી (request) પર ગતિશીલ રીતે પેજીસ રેન્ડર કરવાની જરૂર નથી. ક્લાયન્ટ પર સમૃદ્ધ ઇન્ટરેક્ટિવિટી પ્રદાન કરવા માટે Vue હજુ પણ આવી એપ્લિકેશનોને હાઇડ્રેટ કરી શકે છે. આ તકનીકને સામાન્ય રીતે સ્ટેટિક-સાઇટ જનરેશન (Static-Site Generation - SSG) તરીકે ઓળખવામાં આવે છે, જે JAMStack તરીકે પણ ઓળખાય છે.

SSG ના બે પ્રકાર છે: સિંગલ-પેજ અને મલ્ટી-પેજ. બંને પ્રકારો સાઇટને સ્ટેટિક HTML માં પ્રી-રેન્ડર કરે છે, તફાવત એ છે કે:

• પ્રારંભિક પેજ લોડ થયા પછી, સિંગલ-પેજ SSG પેજને SPA માં "હાઇડ્રેટ" કરે છે. આ માટે વધુ અપફ્રન્ટ JS પેલોડ અને હાઇડ્રેશન ખર્ચની જરૂર છે, પરંતુ પછીના નેવિગેશન ઝડપી હશે, કારણ કે તેણે આખું પેજ ફરીથી લોડ કરવાને બદલે પેજ કન્ટેન્ટને આંશિક રીતે અપડેટ કરવાની જરૂર છે.

• મલ્ટી-પેજ SSG દરેક નેવિગેશન પર નવું પેજ લોડ કરે છે. ફાયદો એ છે કે તે ન્યૂનતમ JS મોકલી શકે છે - અથવા જો પેજને કોઈ ઇન્ટરેક્શનની જરૂર ન હોય તો JS બિલકુલ નહીં! Astro જેવા કેટલાક મલ્ટી-પેજ SSG ફ્રેમવર્ક "આંશિક હાઇડ્રેશન (partial hydration)" ને પણ સપોર્ટ કરે છે - જે તમને સ્ટેટિક HTML ની અંદર ઇન્ટરેક્ટિવ "ટાપુઓ (islands)" બનાવવા માટે Vue ઘટકોનો ઉપયોગ કરવાની મંજૂરી આપે છે.

જો તમે બિન-તુચ્છ (non-trivial) ઇન્ટરેક્ટિવિટી, ઊંડી સત્ર લંબાઈ અથવા નેવિગેશનમાં ટકી રહેલા એલિમેન્ટ્સ / સ્ટેટની અપેક્ષા રાખતા હોવ તો સિંગલ-પેજ SSGs વધુ અનુકૂળ છે. અન્યથા, મલ્ટી-પેજ SSG વધુ સારી પસંદગી હશે.

Vue ટીમ VitePress નામનું સ્ટેટિક-સાઇટ જનરેટર પણ જાળવે છે, જે આ વેબસાઇટને પાવર આપે છે જે તમે અત્યારે વાંચી રહ્યા છો! VitePress SSG ના બંને પ્રકારોને સપોર્ટ કરે છે. Nuxt પણ SSG ને સપોર્ટ કરે છે. તમે સમાન Nuxt એપમાં વિવિધ રૂટ્સ માટે SSR અને SSG મિક્સ પણ કરી શકો છો.

વેબની બહાર (Beyond the Web) ​

જોકે Vue મુખ્યત્વે વેબ એપ્લિકેશન્સ બનાવવા માટે ડિઝાઇન કરવામાં આવ્યું છે, તે કોઈપણ રીતે માત્ર બ્રાઉઝર સુધી મર્યાદિત નથી. તમે કરી શકો છો:

• Electron અથવા Wails સાથે ડેસ્કટોપ એપ્સ બનાવો
• Ionic Vue સાથે મોબાઇલ એપ્સ બનાવો
• Quasar અથવા Tauri સાથે સમાન કોડબેઝમાંથી ડેસ્કટોપ અને મોબાઇલ એપ્સ બનાવો
• TresJS સાથે 3D WebGL અનુભવો બનાવો
• કસ્ટમ રેન્ડરર્સ બનાવવા માટે Vue ના Custom Renderer API નો ઉપયોગ કરો, જેમ કે ટર્મિનલ (terminal) માટેના રેન્ડરર્સ!