ನಾನು ಸ್ವಯಂಚಾಲಿತವಾಗಿ Vue.js ಅನ್ನು ಬಳಸುತ್ತಿದ್ದೆ. ಪ್ರತಿಯೊಂದು ಪ್ರಾಜೆಕ್ಟ್ ಒಂದೇ ರೀತಿಯಲ್ಲಿ ಪ್ರಾರಂಭವಾಗುತ್ತಿತ್ತು: CLI ಇನ್ಸ್ಟಾಲ್ ಮಾಡುವುದು, ರೂಟರ್ ಸೆಟಪ್ ಮಾಡುವುದು, ಸ್ಟೋರ್ ಕಾನ್ಫಿಗರ್ ಮಾಡುವುದು ಮತ್ತು ಇಡೀ ವಿಷಯವನ್ನು ಸಿಂಗಲ್-ಪೇಜ್ ಅಪ್ಲಿಕೇಶನ್ (SPA) ಶೆಲ್ನಲ್ಲಿ ಸುತ್ತುವುದು. ನಾನು ರಿಯಲ್-ಟೈಮ್ ಡ್ಯಾಶ್ಬೋರ್ಡ್ ನಿರ್ಮಿಸುತ್ತಿದ್ದೇನೋ ಅಥವಾ ಸರಳ ಕಾಂಟ್ಯಾಕ್ಟ್ ಫಾರ್ಮ್ ನಿರ್ಮಿಸುತ್ತಿದ್ದೇನೋ ಎಂಬುದು ಮುಖ್ಯವಾಗಿರಲಿಲ್ಲ. Vue ನನ್ನ ಮೊದಲ ಆಯ್ಕೆಯಾಗಿತ್ತು, ಮತ್ತು ಅದಕ್ಕಿಂತ ಹಗುರವಾದದ್ದು ಯಾವುದಾದರೂ ಬಳಸಿದರೆ ಅದು ಹಿಂದಕ್ಕೆ ಹೋಗುವಂತಿದೆ ಎಂದು ನಾನು ಭಾವಿಸುತ್ತಿದ್ದೆ.
ಈ ಅಭ್ಯಾಸವು ಸಾಮಾನ್ಯವಾಗಿದೆ. ನೀವು ವರ್ಷಗಟ್ಟಲೆ React ಅಥವಾ Vue ಪರಿಸರ ವ್ಯವಸ್ಥೆಯಲ್ಲಿ (ecosystem) ಕಳೆದಿದ್ದರೆ, SPA ಮಾದರಿಯು ಅನಿವಾರ್ಯವೆಂದು ಅನಿಸಲು ಪ್ರಾರಂಭಿಸುತ್ತದೆ. ಅಷ್ಟು ದೊಡ್ಡ ಮಟ್ಟದ ವ್ಯವಸ್ಥೆಯ ಅಗತ್ಯ ನಮಗಿದೆಯೇ ಎಂದು ನೀವು ಕೇಳುವುದನ್ನೇ ನಿಲ್ಲಿಸುತ್ತೀರಿ. ನೀವು ಅದನ್ನು ಕೇವಲ ಬಳಸಲು ಪ್ರಾರಂಭಿಸುತ್ತೀರಿ. ಕಾಲಾನಂತರದಲ್ಲಿ, ನಾನು ಒಂದು ಆತಂಕಕಾರಿ ವಿಷಯವನ್ನು ಗಮನಿಸಿದೆ. ಕೇವಲ ಒಂದು ಸ್ಟೇಟಸ್ ಬದಲಾಯಿಸಲು ಮತ್ತು ಟೇಬಲ್ ಅನ್ನು ರಿಫ್ರೆಶ್ ಮಾಡಲು ಬೇಕಾಗುವ ಅಡ್ಮಿನ್ ಸ್ಕ್ರೀನ್ಗಳಿಗೂ ನಾನು Vuex ಸ್ಟೋರ್ಗಳನ್ನು ಸಿದ್ಧಪಡಿಸುತ್ತಿದ್ದೆ. ಕೇವಲ ಇಮೇಲ್ ವಿಳಾಸವನ್ನು ಸಬ್ಮಿಟ್ ಮಾಡಬೇಕಾದ ಲ್ಯಾಂಡಿಂಗ್ ಪೇಜ್ಗಳಿಗೂ ನಾನು fetch ಲಾಜಿಕ್ ಬರೆಯುತ್ತಿದ್ದೆ. ಸಂಕೀರ್ಣತೆಯು ಸಮಸ್ಯೆಗಳಿಂದ ಬರುತ್ತಿರಲಿಲ್ಲ, ಬದಲಾಗಿ ನಾನು ಆರಿಸಿಕೊಂಡ ಪರಿಕರದಿಂದ (tool) ಬರುತ್ತಿತ್ತು.
ನಂತರ ನಾನು HTMX ಬಳಸಲು ಪ್ರಾರಂಭಿಸಿದೆ. ಈ ಬದಲಾವಣೆಯು ನಾನು ನಿರೀಕ್ಷಿಸಿದ್ದಕ್ಕಿಂತ ನಿಶ್ಯಬ್ದವಾಗಿತ್ತು, ಆದರೆ ಇದು ನಾನು ನನ್ನ ಸ್ಟ್ಯಾಕ್ ಅನ್ನು ಆಯ್ಕೆ ಮಾಡುವ ರೀತಿಯನ್ನೇ ಬದಲಿಸಿತು.
HTMX ನಿಜವಾಗಿಯೂ ಏನು ಮಾಡುತ್ತದೆ
ಹೆಚ್ಚಿನ ಆನ್ಲೈನ್ ಚರ್ಚೆಗಳು ಇದನ್ನು ತಪ್ಪಾಗಿ ಅರ್ಥೈಸುತ್ತವೆ. ಜನರು ಇದನ್ನು Vue ವರ್ಸಸ್ React ವರ್ಸಸ್ HTMX ಎಂಬ ಹೋರಾಟವಾಗಿ ನೋಡುತ್ತಾರೆ. ಆ ಹೋಲಿಕೆಯು ವಿಷಯವನ್ನೇ ತಪ್ಪಾಗಿ ಗ್ರಹಿಸುತ್ತದೆ. HTMX ಎಂಬುದು SPA ಫ್ರೇಮ್ವರ್ಕ್ ಅಲ್ಲ. ಇದು Vue ಅನ್ನು ಬದಲಾಯಿಸಲು ಬಯಸುವುದಿಲ್ಲ. ಬ್ರೌಸರ್ನ ಮೂಲ ಸಾಮರ್ಥ್ಯಕ್ಕಿಂತ ಹೆಚ್ಚಿನದನ್ನು HTML ಮಾಡುವಂತೆ ಮಾಡುವ ಒಂದು ಲೈಬ್ರರಿ ಇದು.
ಮೌಂಟ್ ಆಗಿ, JSON ಅನ್ನು ಫೆಚ್ ಮಾಡಿ, ಅದನ್ನು ಲೋಕಲ್ ಸ್ಟೇಟ್ಗೆ ಪಾರ್ಸ್ ಮಾಡಿ ಮತ್ತು ಪಟ್ಟಿಯನ್ನು ಮರು-ರೆಂಡರ್ ಮಾಡುವ ಕಾಂಪೊನೆಂಟ್ ಬರೆಯುವ ಬದಲು, ನೀವು ಬಟನ್ಗೆ ಕೇವಲ ಒಂದು ಅಟ್ರಿಬ್ಯೂಟ್ ಅನ್ನು ಸೇರಿಸುತ್ತೀರಿ. ಸರ್ವರ್ ಡೇಟಾ ಪೇಲೋಡ್ಗಳ ಬದಲಿಗೆ HTML ಫ್ರಾಗ್ಮೆಂಟ್ಗಳನ್ನು ಹಿಂತಿರುಗಿಸುತ್ತದೆ. ಬ್ರೌಸರ್ ಆ ಕಂಟೆಂಟ್ ಅನ್ನು ಸರಿಯಾದ ಜಾಗದಲ್ಲಿ ಬದಲಾಯಿಸುತ್ತದೆ. ನೀವು ಇನ್ನೂ ಸರ್ವರ್-ರೆಂಡರ್ಡ್ ಪೇಜ್ಗಳ ಜೊತೆ ಕೆಲಸ ಮಾಡುತ್ತಿದ್ದೀರಿ, ಆದರೆ ಜನರು ಸಾಮಾನ್ಯವಾಗಿ ಭಾರೀ JavaScript ಫ್ರಂಟ್ ಎಂಡ್ ಅಪ್ಲಿಕೇಶನ್ಗಳೊಂದಿಗೆ ಜೋಡಿಸುವ ಇಂಟರ್ಯಾಕ್ಟಿವಿಟಿಯನ್ನು ನೀವು ಇಲ್ಲಿ ಪಡೆಯುತ್ತೀರಿ.
ಇದು ಡೌನ್ಗ್ರೇಡ್ ಅಲ್ಲ. ಇದು ಒಂದು ವಿಭಿನ್ನ ಮಾದರಿ. Vue ನೀವು ಕ್ಲೈಂಟ್-ಸೈಡ್ ಅಪ್ಲಿಕೇಶನ್ ಅನ್ನು ನಿರ್ಮಿಸಲು ಮತ್ತು ಬ್ರೌಸರ್ನಲ್ಲಿ ಸ್ಟೇಟ್ ಅನ್ನು ನಿರ್ವಹಿಸಲು ಕೇಳುತ್ತದೆ. HTMX ನೀವು ಸ್ಟೇಟ್ ಅನ್ನು ಸರ್ವರ್ನಲ್ಲಿ ಇರಿಸಲು ಮತ್ತು HTML ಅನ್ನು ಕಳುಹಿಸಲು ಕೇಳುತ್ತದೆ. ಅವು ವಿಭಿನ್ನ ರೀತಿಯ ಸಮಸ್ಯೆಗಳನ್ನು ಪರಿಹರಿಸುವುದರಿಂದ, ಎರಡೂ ಯಾವುದೇ ಸಂಘರ್ಷವಿಲ್ಲದೆ ಒಂದೇ ಪ್ರಾಜೆಕ್ಟ್ನಲ್ಲಿ ಅಸ್ತಿತ್ವದಲ್ಲಿರಬಹುದು.
Vue ಯಾವಾಗ ಇಂದಿಗೂ ಸರಿಯಾದ ಆಯ್ಕೆಯಾಗಿರುತ್ತದೆ
ಸಂಕೀರ್ಣ ಇಂಟರ್ಫೇಸ್ಗಳಿಗೆ Vue ಬೇಕಾಗುತ್ತದೆ. ನೀವು ಡ್ರ್ಯಾಗ್-ಅಂಡ್-ಡ್ರಾಪ್ ವಿಜೆಟ್ಗಳು, ನೆಸ್ಟೆಡ್ ಫಿಲ್ಟರಿಂಗ್ ಮತ್ತು ಮಲ್ಟಿಪಲ್ ವ್ಯೂಗಳಲ್ಲಿ ಡೇಟಾವನ್ನು ಹಂಚಿಕೊಳ್ಳುವ ಲೈವ್ ಚಾರ್ಟ್ಗಳೊಂದಿಗೆ ರಿಯಲ್-ಟೈಮ್ ಅನಾಲಿಟಿಕ್ಸ್ ಡ್ಯಾಶ್ಬೋರ್ಡ್ ಅನ್ನು ನಿರ್ಮಿಸುತ್ತಿದ್ದರೆ, ನಿಮಗೆ ರಿಯಾಕ್ಟಿವ್ ಫ್ರೇಮ್ವರ್ಕ್ ಬೇಕಾಗುತ್ತದೆ. ಆ ಸ್ಟೇಟ್ ಅನ್ನು ಬ್ರೌಸರ್ ಹೊಂದಿರಬೇಕು. ಬಳಕೆದಾರರು ಚಾರ್ಟ್ ಅನ್ನು ಡ್ರ್ಯಾಗ್ ಮಾಡಿದಾಗ ಅಥವಾ ಫಿಲ್ಟರ್ ಗ್ರೂಪ್ ಅನ್ನು ಬದಲಾಯಿಸಿದಾಗ ಪ್ರತಿ ಬಾರಿಯೂ ಸರ್ವರ್ಗೆ ರಿಕ್ವೆಸ್ಟ್ ಕಳುಹಿಸುವುದು ನಿಮಗೆ ಇಷ್ಟವಾಗುವುದಿಲ್ಲ. Vue ನ ಕಾಂಪೊನೆಂಟ್ ಮಾಡೆಲ್, ರಿಯಾಕ್ಟಿವಿಟಿ ಸಿಸ್ಟಮ್ ಮತ್ತು ಪರಿಸರ ವ್ಯವಸ್ಥೆಯು ನಿಖರವಾಗಿ ಇದಕ್ಕಾಗಿಯೇ ನಿರ್ಮಿಸಲಾಗಿದೆ.
ಅದೇ ವಿಷಯವು ಹೆಚ್ಚು ಇಂಟರ್ಯಾಕ್ಟಿವ್ ಆಗಿರುವ ಕನ್ಸ್ಯೂಮರ್ ಅಪ್ಲಿಕೇಶನ್ಗಳಿಗೂ ಅನ್ವಯಿಸುತ್ತದೆ. ಒಂದು ಡಿಸೈನ್ ಟೂಲ್, ಕೊಲಾಬೊರೇಟಿವ್ ವೈಟ್ಬೋರ್ಡ್ ಅಥವಾ ಮ್ಯೂಸಿಕ್ ಸೀಕ್ವೆನ್ಸರ್ ಬಗ್ಗೆ ಯೋಚಿಸಿ. ಇವು ಕೇವಲ ಬಟನ್ಗಳಿರುವ ಡಾಕ್ಯುಮೆಂಟ್ಗಳಲ್ಲ. ಇವು ಬ್ರೌಸರ್ನಲ್ಲಿ ಕಾರ್ಯನಿರ್ವಹಿಸುವ ಅಪ್ಲಿಕೇಶನ್ಗಳು. ಅಂತಹ ಕೆಲಸಗಳಿಗೆ, Vue ಇಂದಿಗೂ ನನ್ನ ಮೊದಲ ಆಯ್ಕೆಯಾಗಿದೆ.
HTMX ಎಲ್ಲಿ ಮೇಲುಗೈ ಸಾಧಿಸುತ್ತದೆ
ನನ್ನ ಪ್ರಾಜೆಕ್ಟ್ಗಳ ಬೋರಿಂಗ್ ಭಾಗಗಳನ್ನು ನಾನು ಗಮನಿಸಿದಾಗ ಅತ್ಯಂತ ಸ್ಪಷ್ಟವಾದ ಗೆಲುವು ಕಂಡುಬಂದಿತು. ಅಡ್ಮಿನ್ ಪ್ಯಾನೆಲ್ಗಳು ಮೊದಲು ಬದಲಾದವು. ಅಡ್ಮಿನ್ ಬ್ಯಾಕೆಂಡ್ ಸಾಮಾನ್ಯವಾಗಿ ರೆಕಾರ್ಡ್ಗಳ ಟೇಬಲ್, ಕೆಲವು ಆಕ್ಷನ್ ಬಟನ್ಗಳು, ಪೇಜಿನೇಟೆಡ್ ಫಿಲ್ಟರ್ಗಳು ಮತ್ತು ಒಂದು ಅಥವಾ ಎರಡು ಫಾರ್ಮ್ಗಳನ್ನು ಹೊಂದಿರುತ್ತದೆ. ಇವುಗಳಲ್ಲಿ ಯಾವುದಕ್ಕೂ ವರ್ಚುವಲ್ DOM ಅಗತ್ಯವಿಲ್ಲ. ಇದಕ್ಕೆ ಬೇಕಾಗಿರುವುದು ಕೇವಲ ವೇಗವಾದ ಪಾರ್ಶಿಯಲ್ ಅಪ್ಡೇಟ್ಗಳು.
HTMX ನೊಂದಿಗೆ, ಡಿಲೀಟ್ ಬಟನ್ hx-delete ಮತ್ತು hx-target ಅಟ್ರಿಬ್ಯೂಟ್ಗಳನ್ನು ಹೊಂದಿರುವ ಟ್ಯಾಗ್ ಆಗಿ ಬದಲಾಗುತ್ತದೆ. ಅದನ್ನು ಕ್ಲಿಕ್ ಮಾಡಿದಾಗ, ಬ್ರೌಸರ್ ರಿಕ್ವೆಸ್ಟ್ ಕಳುಹಿಸುತ್ತದೆ, ಸರ್ವರ್ ರಿಫ್ರೆಶ್ ಆದ ಟೇಬಲ್ ರೋ ಮೂಲಕ ಪ್ರತಿಕ್ರಿಯಿಸುತ್ತದೆ.