Vue 3.6 ರ ಮುಂಬರುವ Vapor Mode ಈ ಶರತ್ಕಾಲದಲ್ಲಿ ಬಿಡುಗಡೆಯಾಗಲಿದೆ, ಮತ್ತು ಇದು ಈ ಫ್ರೇಮ್ವರ್ಕ್ ಹಿಂದೆಂದೂ ಮಾಡದ ಒಂದು ಕೆಲಸವನ್ನು ಮಾಡುತ್ತದೆ: ಇದು ಸಿಂಗಲ್-ಫೈಲ್ ಕಾಂಪೊನೆಂಟ್ಗಳನ್ನು ನೇರವಾಗಿ-to-the-DOM ಅಪ್ಡೇಟ್ಗಳಾಗಿ ಕಾಂಪೈಲ್ ಮಾಡುತ್ತದೆ, ಇದರಿಂದ ವರ್ಚುವಲ್ DOM ಅನ್ನು ಸಂಪೂರ್ಣವಾಗಿ ಬೈಪಾಸ್ ಮಾಡಬಹುದು.
ಯಾಕೆ Vue ವರ್ಚುವಲ್ DOM ಅನ್ನು ಕೈಬಿಡುತ್ತಿದೆ
Vue 2 ರಿಂದಲೂ, ವರ್ಚುವಲ್ DOM ಫ್ರೇಮ್ವರ್ಕ್ನ ರಿಯಾಕ್ಟಿವಿಟಿ ಮಾಡೆಲ್ನ ಕೇಂದ್ರಬಿಂದುವಾಗಿದೆ. ಸ್ಟೇಟ್ (state) ಬದಲಾದಾಗ, Vue ಒಂದು ಲಘು ಇನ್-ಮೆಮೊರಿ ಟ್ರೀಯನ್ನು ನಿರ್ಮಿಸುತ್ತದೆ, ಅದನ್ನು ಹಿಂದಿನ ಆವೃತ್ತಿಯೊಂದಿಗೆ ಡಿಫ್ (diff) ಮಾಡುತ್ತದೆ ಮತ್ತು ಬದಲಾದ ಭಾಗಗಳನ್ನು ಮಾತ್ರ ಪ್ಯಾಚ್ ಮಾಡುತ್ತದೆ. ಈ ಪರೋಕ್ಷ ವಿಧಾನವು (indirection), ಯಾವ ಎಲಿಮೆಂಟ್ ಅನ್ನು ಅಪ್ಡೇಟ್ ಮಾಡಬೇಕೆಂದು ಚಿಂತಿಸದೆ ಡೆವಲಪರ್ಗಳು ಡಿಕ್ಲರೇಟಿವ್ ಕೋಡ್ ಬರೆಯಲು ಅನುವು ಮಾಡಿಕೊಡುತ್ತದೆ. ಆದರೆ ಇದರ ಬೆಲೆ ಎಂದರೆ, ಪ್ರತಿ ರೆಂಡರ್ ಮಾಡುವಾಗಲೂ ಆ ವರ್ಚುವಲ್ ಟ್ರೀಯನ್ನು ನಿರ್ಮಿಸುವ ಮತ್ತು ಡಿಫ್ ಮಾಡುವ ವೆಚ್ಚವನ್ನು ಭರಿಸಬೇಕಾಗುತ್ತದೆ.
Vapor Mode ಆ ಮಧ್ಯಂತರ ಹಂತವನ್ನು ತೆಗೆದುಹಾಕುತ್ತದೆ. ಬಿಲ್ಡ್ ಮಾಡುವ ಸಮಯದಲ್ಲಿ, Vue ಕಾಂಪೈಲರ್ ಟೆಂಪ್ಲೇಟ್ ಅನ್ನು ವಿಶ್ಲೇಷಿಸುತ್ತದೆ ಮತ್ತು ಬದಲಾವಣೆಯ ಅಗತ್ಯವಿರುವ ಸ್ಥಳದಲ್ಲಿ ನೇರವಾಗಿ ನೇಟಿವ್ DOM ಮೆಥಡ್ಗಳನ್ನು—element.textContent = …, element.setAttribute(...)—ಕರೆ ಮಾಡುವ JavaScript ಅನ್ನು ಹೊರಸೂಸುತ್ತದೆ. ಯಾವುದೇ ವರ್ಚುವಲ್ ನೋಡ್ಗಳನ್ನು ರಚಿಸಲಾಗುವುದಿಲ್ಲ, ಯಾವುದೇ ಡಿಫಿಂಗ್ ಲೂಪ್ ಚಲಿಸುವುದಿಲ್ಲ. ಬಂಡಲ್ನಲ್ಲಿ ನೀವು ಬರೆದ ನಿರ್ದಿಷ್ಟ ಅಪ್ಡೇಟ್ಗಳಿಗೆ ಅಗತ್ಯವಿರುವ ಕೋಡ್ ಮತ್ತು ರಿಯಾಕ್ಟಿವಿಟಿಗಾಗಿ ಬೇಕಾದ ರನ್ಟೈಮ್ ಮಾತ್ರ ಇರುತ್ತದೆ.
ಗಾತ್ರ ಮತ್ತು ವೇಗದ ಮೇಲೆ ನೈಜ ಪ್ರಭಾವ
- ಬಂಡಲ್ ಗಾತ್ರ (Bundle size) – ವರ್ಚುವಲ್-DOM ರನ್ಟೈಮ್ ಮತ್ತು ಅದರ ಡೇಟಾ ರಚನೆಗಳನ್ನು ತೆಗೆದುಹಾಕುವ ಮೂಲಕ, ಜನರೇಟ್ ಆದ ಕೋಡ್ ಗಾತ್ರವು ಕಡಿಮೆಯಾಗುತ್ತದೆ. ಪ್ರತಿ ಸೆಕೆಂಡಿಗೆ ಡಜನ್ಗಟ್ಟಲೆ ಬಾರಿ ಅಪ್ಡೇಟ್ ಆಗುವ ದೊಡ್ಡ ಗ್ರಿಡ್ಗಳು ಅಥವಾ ಕ್ಯಾನ್ವಾಸ್ಗಳನ್ನು ಹೊಂದಿರುವ ಪ್ರಾಜೆಕ್ಟ್ಗಳಲ್ಲಿ, ಈ ಉಳಿತಾಯವು ಹೆಚ್ಚು ಪ್ರಯೋಜನಕಾರಿಯಾಗುತ್ತದೆ, ವಿಶೇಷವಾಗಿ ಕಡಿಮೆ ಬ್ಯಾಂಡ್ವಿಡ್ತ್ ಸಂಪರ್ಕಗಳಲ್ಲಿ.
- ಕಾರ್ಯಕ್ಷಮತೆ (Performance) – ನೇರ DOM ಕರೆಗಳು ಡಿಫಿಂಗ್ ಓವರ್ಹೆಡ್ ಅನ್ನು ತಪ್ಪಿಸುತ್ತವೆ, ಇದು UI ಹೆಚ್ಚಿನ ಫ್ರೀಕ್ವೆನ್ಸಿಯಲ್ಲಿ ಬದಲಾಗುವಾಗ ಗಮನಾರ್ಹವಾಗುತ್ತದೆ. ವೈಯಕ್ತಿಕ ಬ್ರೌಸರ್ ಗೇಮ್ಗಳಾದ—ನೋನೊಗ್ರಾಮ್ (nonogram), ಮೈನ್ಸ್ವೀಪರ್ ಕ್ಲೋನ್ ಮತ್ತು 3-D ರೂಬಿಕ್ಸ್ ಕ್ಯೂಬ್ ವಿಶುವಲೈಸರ್—ನಲ್ಲಿ, ನಾನು ರೆಂಡರಿಂಗ್ ಲಾಜಿಕ್ ಅನ್ನು ಕೈಯಾರೆ ಬರೆದಿದ್ದೆ, ಅಗತ್ಯವಿರುವ ಕಡೆ ಮಾತ್ರ DOM ಅನ್ನು ಅಪ್ಡೇಟ್ ಮಾಡುತ್ತಿದ್ದೆ.
- ಡೆವಲಪರ್ ಎರ್ಗೊನಾಮಿಕ್ಸ್ (Developer ergonomics) – ಕಾಂಪೈಲರ್ ಎಲ್ಲಾ ಕಠಿಣ ಕೆಲಸವನ್ನು ಮಾಡುತ್ತದೆ. ನೀವು ಇನ್ನೂ ಸಾಮಾನ್ಯ Vue ಟೆಂಪ್ಲೇಟ್ಗಳನ್ನು ಬರೆಯುತ್ತೀರಿ; ನೀವು
document.querySelectorಕರೆಗಳನ್ನು ಕೈಯಾರೆ ತಯಾರಿಸುವ ಅಗತ್ಯವಿಲ್ಲ. ಜನರೇಟ್ ಆದ ಕೋಡ್ ಆ ಗೇಮ್ಗಳಲ್ಲಿ ನನಗೆ ಅತ್ಯುತ್ತಮ ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ನೀಡಿದ ಕೈಬರಹದ ವಿಧಾನವನ್ನೇ ಪ್ರತಿಫಲಿಸುತ್ತದೆ.
Vapor Mode ಯಾವಾಗ ನಿಜವಾಗಿಯೂ ಸಹಾಯ ಮಾಡುತ್ತದೆ
- ದೊಡ್ಡ ರಚನೆಗಳ ಮೇಲೆ ಹೆಚ್ಚಿನ ಫ್ರೀಕ್ವೆನ್ಸಿ ಅಪ್ಡೇಟ್ಗಳು – ಗೇಮ್ಗಳು, ಡೇಟಾ-ಸಂಮೂಲಿತ ಡ್ಯಾಶ್ಬೋರ್ಡ್ಗಳು ಅಥವಾ ಪ್ರತಿ ಟಿಕ್ನಲ್ಲಿ ಅನೇಕ ಸೆಲ್ಗಳನ್ನು ಮರು-ಅಳವಡಿಸುವ ಯಾವುದೇ ಇಂಟರ್ಫೇಸ್ಗಳು ಹೆಚ್ಚು ಪ್ರಯೋಜನ ಪಡೆಯುತ್ತವೆ. ಪ್ರತಿ ಟಿಕ್ನಲ್ಲಿ ದೊಡ್ಡ ಗ್ರಿಡ್ ಅನ್ನು ಡಿಫ್ ಮಾಡುವುದು ಫ್ರೇಮ್ ಬಜೆಟ್ ಅನ್ನು ಹೆಚ್ಚಿಸಬಹುದು; ನೇರ ಅಪ್ಡೇಟ್ಗಳು ಕೆಲಸವನ್ನು ಲೀನಿಯರ್ ಮತ್ತು ಮುನ್ಸೂಚನೀಯವಾಗಿಡುತ್ತವೆ.
- ಬಂಡಲ್-ಸೈಜ್ ಮಿತಿ ಇರುವ ಡಿಪ್ಲಾಯ್ಮೆಂಟ್ಗಳು – ಕೆಲವು ನೂರಾರು ಕಿಲೋಬೈಟ್ಗಳ ಒಳಗಡೆ ಲೋಡ್ ಆಗಬೇಕಾದ ಮೊಬೈಲ್-ಫಸ್ಟ್ ಸೈಟ್ಗಳು, ವರ್ಚುವಲ್-DOM ರನ್ಟೈಮ್ ಇಲ್ಲದಿದ್ದಾಗ ಗಮನಾರ್ಹ ಕಡಿತವನ್ನು ಕಾಣುತ್ತವೆ.
- ಶುದ್ಧ, ಮುನ್ಸೂಚನೀಯ ಸ್ಟೇಟ್ (Pure, predictable state) – Vapor Mode ನೀವು ಸ್ಟೇಟ್ ಅನ್ನು ಇಮ್ಯುಟೇಬಲ್ (immutable) ಆಗಿಡುತ್ತೀರಿ ಮತ್ತು DOM ಅನ್ನು ಆ ಸ್ಟೇಟ್ನ ಶುದ್ಧ ಪ್ರಕ್ಷೇಪಣೆಯಾಗಿ (pure projection) ಪರಿಗಣಿಸುತ್ತೀರಿ ಎಂದು ಭಾವಿಸುತ್ತದೆ. ನಿಮ್ಮ ಕೋಡ್ ಸೈಡ್-ಎಫೆಕ್ಟ್ಗಳನ್ನು ಬೆರೆಸಿದರೆ ಅಥವಾ Vue ರಿಯಾಕ್ಟಿವಿಟಿ ಸಿಸ್ಟಮ್ ಹೊರಗೆ DOM ಅನ್ನು ಬದಲಾಯಿಸಿದರೆ, ಜನರೇಟ್ ಆದ ಅಪ್ಡೇಟ್ಗಳು ಸಿಂಕ್ ತಪ್ಪಬಹುದು, ಇದು ದೃಶ್ಯ ದೋಷಗಳಿಗೆ (visual glitches) ಕಾರಣವಾಗಬಹುದು.
ಹಳೆಯ ವಿಧಾನವು ಎಲ್ಲಿ ಇನ್ನೂ ಗೆಲ್ಲುತ್ತದೆ
- ಕಡಿಮೆ ಫ್ರೀಕ್ವೆನ್ಸಿ UIಗಳು – ಸರಳ ಫಾರ್ಮ್ಗಳು, ಸ್ಟ್ಯಾಟಿಕ್ ಪೇಜ್ಗಳು ಅಥವಾ ಸಾಂದರ್ಭಿಕ ಬಳಕೆದಾರರ ಕ್ರಿಯೆಗಳ ಮೇಲೆ ಮಾತ್ರ ಮರು-ಅಳವಡವಾಗುವ ಅಡ್ಮಿನ್ ಪ್ಯಾನೆಲ್ಗಳಿಗೆ ಹೆಚ್ಚಿನ ಕಾರ್ಯಕ್ಷಮತೆಯ ಲಾಭ ಸಿಗುವುದಿಲ್ಲ. ನೆಟ್ವರ್ಕ್ ವಿಳಂಬ ಅಥವಾ ಸರ್ವರ್ ಪ್ರೊಸೆಸಿಂಗ್ ಸಮಯಕ್ಕೆ ಹೋಲಿಸಿದರೆ ವರ್ಚುವಲ್ ಟ್ರೀಯನ್ನು ನಿರ್ಮಿಸುವ ಹೆಚ್ಚುವರಿ ಕೆಲಸವು ಅತ್ಯಲ್ಪವಾಗಿದೆ.
- ಸಂಕೀರ್ಣ ಕಾಂಪೊನೆಂಟ್ ಹಿರಾರ್ಕಿಗಳು – ಒಂದು ಆಳವಾದ ಟ್ರೀನಲ್ಲಿ ಕೇವಲ ಒಂದು ಎಲೆ ನೋಡ್ (leaf node) ಬದಲಾದಾಗ, ವರ್ಚುವಲ್ DOM ದೊಡ್ಡ ಭಾಗಗಳನ್ನು ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಬಿಡಬಲ್ಲದು. ನೇರ ಅಪ್ಡೇಟ್ಗಳು ಪ್ರತಿಯೊಂದು ಸಂಭವನೀಯ ಬದಲಾವಣೆಗಾಗಿ ನಿಖರವಾದ ಪ್ಯಾಚ್ಗಳನ್ನು ಜನರೇಟ್ ಮಾಡಲು ಕಾಂಪೈಲರ್ ಅನ್ನು ಒತ್ತಾಯಿಸುತ್ತವೆ, ಇದು ಕೆಲವು ಸಂದರ್ಭಗಳಲ್ಲಿ ಕೋಡ್ ಗಾತ್ರವನ್ನು ಹೆಚ್ಚಿಸಬಹುದು.
- ಟೂಲಿಂಗ್ ಮತ್ತು ಎಕೋಸಿಸ್ಟಮ್ – ಅನೇಕ Vue ಪ್ಲಗಿನ್ಗಳು, ಡೆವ್ಟೂಲ್ಗಳು ಮತ್ತು ಟೆಸ್ಟಿಂಗ್ ಯುಟಿಲಿಟಿಗಳು ವರ್ಚುವಲ್-DOM ಲೇಯರ್ಗೆ ಜೋಡಿಸಲ್ಪಟ್ಟಿವೆ. ಎಕೋಸಿಸ್ಟಮ್ ಈ ಮಟ್ಟಕ್ಕೆ ತಲುಪುವವರೆಗೆ, ಆ ಇಂಟಿಗ್ರೇಷನ್ಗಳು Vapor-mode ಕಾಂಪೊನೆಂಟ್ಗಳೊಂದಿಗೆ ಕೆಲಸ ಮಾಡಲು ಅಪ್ಡೇಟ್ಗಳ ಅಗತ್ಯವಿರಬಹುದು.
ಮುಂದೆ ಏನನ್ನು ಗಮನಿಸಬೇಕು
- ಸ್ಥಿರ ಬಿಡುಗಡೆ (Stable release) – Vue 3.6 ಪ್ರಸ್ತುತ ರಿಲೀಸ್-ಕ್ಯಾಂಡಿಡೇಟ್ ಸ್ಥಿತಿಯಲ್ಲಿದೆ. ತಂಡವು ಈ ಶರತ್ಕಾಲದಲ್ಲಿ ಅಂತಿಮ ಸ್ಥಿರ ಬಿಡುಗಡೆಯನ್ನು ಯೋಜಿಸಿದೆ. ಆರಂಭಿಕ ಬಳಕೆದಾರರು ಪ್ರೊಡಕ್ಷನ್ ಕೋಡ್ ಅನ್ನು ಬಿಡುಗಡೆ ಮಾಡುವ ಮೊದಲು ಆ ಆವೃತ್ತಿಗಾಗಿ ಕಾಯುವುದು ಉತ್ತಮ.
- ಮೈಗ್ರೇಷನ್ ಹಾದಿ (Migration path) – ಅಸ್ತಿತ್ವದಲ್ಲಿರುವ Vue ಪ್ರಾಜೆಕ್ಟ್ಗಳು ಪ್ರತಿ ಕಾಂಪೊನೆಂಟ್ ಆಧಾರದ ಮೇಲೆ Vapor Mode ಅನ್ನು ಬಳಸಿಕೊಳ್ಳಬಹುದು.
- ಪರ್ಫಾರ್ಮೆನ್ಸ್ ಟೂಲಿಂಗ್ – ನೈಜ ಪ್ರಪಂಚದ ಅಪ್ಲಿಕೇಶನ್ಗಳಲ್ಲಿ ವರ್ಚುವಲ್-DOM ಮತ್ತು Vapor-mode ಬಿಲ್ಡ್ಗಳನ್ನು ಹೋಲಿಸುವ ಬೆಂಚ್ಮಾರ್ಕ್ಗಳು, ಯಾವ ಸಂದರ್ಭದಲ್ಲಿ ಈ ಬದಲಾವಣೆ ಮಾಡಿಕೊಳ್ಳುವುದು ಲಾಭದಾಯಕ ಎಂದು ನಿರ್ಧರಿಸಲು ತಂಡಗಳಿಗೆ ಸಹಾಯ ಮಾಡುತ್ತವೆ.
ಅಂತಿಮವಾಗಿ (Bottom line)
Vapor Mode Vue ಅಭಿವರ್ಧಕರಿಗೆ ಎರಡು ಪ್ರಪಂಚಗಳ ಅತ್ಯುತ್ತಮ ಅಂಶಗಳನ್ನು ನೀಡುತ್ತದೆ: ಅವರು ಇಷ್ಟಪಡುವ declarative syntax ಮತ್ತು ಕೈಯಿಂದ ರೂಪಿಸಿದ DOM ಅಪ್ಡೇಟ್ಗಳ ಅತಿ ವೇಗ. ಪ್ರತಿ ಸೆಕೆಂಡಿಗೆ ಹಲವು ಬಾರಿ UI ನ ದೊಡ್ಡ ಭಾಗಗಳನ್ನು ರಿಫ್ರೆಶ್ ಮಾಡುವ ಅಪ್ಲಿಕೇಶನ್ಗಳಿಗೆ ಮತ್ತು ಪ್ರತಿ ಕಿಲೋಬೈಟ್ ಕೂಡ ಮುಖ್ಯವಾಗುವ ಡಿಪ್ಲಾಯ್ಮೆಂಟ್ಗಳಿಗೆ ಇದು ಅತ್ಯುತ್ತಮವಾಗಿ ಕೆಲಸ ಮಾಡುತ್ತದೆ. ಕಡಿಮೆ ಟ್ರಾಫಿಕ್ ಇರುವ ಇಂಟರ್ಫೇಸ್ಗಳಿಗೆ, ಸಾಂಪ್ರದಾಯಿಕ virtual DOM ಒಂದು ಸಂಪೂರ್ಣವಾಗಿ ಕಾರ್ಯಸಾಧ್ಯವಾದ ಮತ್ತು ಸರಳವಾದ ಆಯ್ಕೆಯಾಗಿ ಉಳಿಯುತ್ತದೆ. ಈ ಫೀಚರ್ release candidate ನಿಂದ stable ಸ್ಥಿತಿಗೆ ಬದಲಾಗುತ್ತಿದ್ದಂತೆ, Vue ಸಮುದಾಯವು ಬಂಡಲ್-ಸೈಜ್ ಉಳಿತಾಯವನ್ನು, ಪರಿಸರ ವ್ಯವಸ್ಥೆಯ ಸಿದ್ಧತೆ (ecosystem readiness) ಮತ್ತು ತಮ್ಮ ಅಪ್ಲಿಕೇಶನ್ಗಳ ನಿರ್ದಿಷ್ಟ ಕಾರ್ಯಕ್ಷಮತೆಯೊಂದಿಗೆ (performance profile) ಹೋಲಿಸಿ ನಿರ್ಧರಿಸಬೇಕಾಗುತ್ತದೆ.