ರಿಯಲ್-ಟೈಮ್ Angular ಡ್ಯಾಶ್ಬೋರ್ಡ್ಗಳನ್ನು ನಿರ್ಮಿಸುವುದು
ಹೆಚ್ಚಿನ ಡ್ಯಾಶ್ಬೋರ್ಡ್ಗಳು ಹಳೆಯದಾದಂತೆ ಭಾಸವಾಗುತ್ತವೆ. ಬಳಕೆದಾರರು ಹಳೆಯ ಡೇಟಾವನ್ನು ನೋಡುತ್ತಾರೆ ಮತ್ತು ರಿಫ್ರೆಶ್ ಮಾಡಬೇಕಾಗುತ್ತದೆ. ನೀವು polling ಬಳಸಬಹುದು, ಆದರೆ ಅದು ನಿಮ್ಮ ಸರ್ವರ್ ಮೇಲೆ ಹೆಚ್ಚಿನ ಒತ್ತಡವನ್ನು ಉಂಟುಮಾಡುತ್ತದೆ.
WebSockets ಇದಕ್ಕೆ ಪರಿಹಾರ ನೀಡುತ್ತವೆ. ಅಪ್ಡೇಟ್ಗಳು ಸಂಭವಿಸಿದ ಕ್ಷಣದಲ್ಲೇ ಸರ್ವರ್ ಅವುಗಳನ್ನು ಕಳುಹಿಸುತ್ತದೆ. ರಿಫ್ರೆಶ್ ಮಾಡುವ ಅಗತ್ಯವಿಲ್ಲ.
Angular, RxJS ಮತ್ತು Signals ಬಳಸಿ ರಿಯಲ್-ಟೈಮ್ ಡ್ಯಾಶ್ಬೋರ್ಡ್ ಅನ್ನು ಹೇಗೆ ನಿರ್ಮಿಸುವುದು ಎಂಬುದು ಇಲ್ಲಿದೆ.
ಆರ್ಕಿಟೆಕ್ಚರ್
- ಕನೆಕ್ಷನ್ಗಾಗಿ RxJS webSocket ಬಳಸಿ.
- ಸ್ಟೇಟ್ಗಾಗಿ Angular Signals ಬಳಸಿ.
- ನಿಮ್ಮ ಡೇಟಾವನ್ನು ಇರಿಸಲು ಒಂದೇ ಸ್ಟೋರ್ ಬಳಸಿ.
- WebSocket ಸರ್ವಿಸ್
ಪ್ರತಿಯೊಂದು ಕಾಂಪೊನೆಂಟ್ಗಾಗಿ ಹೊಸ ಕನೆಕ್ಷನ್ ಅನ್ನು ತೆರೆಯಬೇಡಿ. ನಿಮ್ಮ ಸರ್ವಿಸ್ನಲ್ಲಿ shareReplay ಬಳಸಿ. ಇದು ಅನೇಕ ವಿಜೆಟ್ಗಳು (widgets) ಒಂದೇ ಕನೆಕ್ಷನ್ ಅನ್ನು ಬಳಸಲು ಅನುವು ಮಾಡಿಕೊಡುತ್ತದೆ.
ಸ್ಟ್ರೀಮ್ನಲ್ಲಿ ದೋಷಗಳನ್ನು (errors) ಹಿಡಿಯುವ ಮೂಲಕ ಅವುಗಳನ್ನು ನಿರ್ವಹಿಸಿ. ಕನೆಕ್ಷನ್ ಕಡಿತಗೊಂಡಾಗ ನಿಮ್ಮ ಇಡೀ ಅಪ್ಲಿಕೇಶನ್ ಸ್ಥಗಿತಗೊಳ್ಳದಂತೆ ಇದು ತಡೆಯುತ್ತದೆ.
- Signal ಸ್ಟೋರ್
ಕಾಂಪೊನೆಂಟ್ಗಳು ಡೇಟಾವನ್ನು ನಿರ್ವಹಿಸುವ ಬದಲು, Signal-ಆಧಾರಿತ ಸ್ಟೋರ್ ಬಳಸಿ. ಇದು 'single source of truth' ಅನ್ನು ಸೃಷ್ಟಿಸುತ್ತದೆ.
- CPU ಬಳಕೆ ಮತ್ತು ಸಕ್ರಿಯ ಬಳಕೆದಾರರಂತಹ ಮೆಟ್ರಿಕ್ಗಳನ್ನು ಸಂಗ್ರಹಿಸಿ.
- ಇತ್ತೀಚಿನ ಅಲರ್ಟ್ಗಳ ಸಣ್ಣ ಇತಿಹಾಸವನ್ನು ಇರಿಸಿ.
- ನಿರ್ಣಾಯಕ ಸ್ಥಿತಿಗಳನ್ನು (critical states) ಗುರುತಿಸಲು computed signals ಬಳಸಿ.
- ಪ್ಯೂರ್ ಕಾಂಪೊನೆಂಟ್ಗಳು (Pure Components)
ನಿಮ್ಮ ಕಾಂಪೊನೆಂಟ್ಗಳು ಸರಳವಾಗಿರಲಿ. ಅವು ಲಾಜಿಕ್ ಅನ್ನು ನಿರ್ವಹಿಸಬಾರದು. ಅವು ಕೇವಲ ಸ್ಟೋರ್ನಿಂದ ಡೇಟಾವನ್ನು ಓದುತ್ತವೆ ಮತ್ತು UI ಅನ್ನು ರেন্ডರ್ ಮಾಡುತ್ತವೆ. ಇದು ನಿಮ್ಮ ಕೋಡ್ ಅನ್ನು ಪರೀಕ್ಷಿಸಲು ಮತ್ತು ನಿರ್ವಹಿಸಲು ಸುಲಭವಾಗಿಸುತ್ತದೆ.
ಪ್ರೊಡಕ್ಷನ್ಗಾಗಿ ಪ್ರಮುಖ ಸಲಹೆಗಳು
- ಕನೆಕ್ಷನ್ ಸ್ಥಿತಿ: ಬಳಕೆದಾರರು ಲೈವ್ ಆಗಿದ್ದಾರೆಯೇ ಅಥವಾ ಮರುಸಂಪರ್ಕಗೊಳ್ಳುತ್ತಿದ್ದಾರೆಣೆಯೇ ಎಂಬುದನ್ನು ಯಾವಾಗಲೂ ತೋರಿಸಿ.