ವಾಸ್ತುಶಿಲ್ಪ ನಿರ್ಧಾರ ದಾಖಲೆ: CSS ಚೌಕಟ್ಟು

ವಿಷಯಗಳು:

• ಸಾರಾಂಶ
  • ಸಮಸ್ಯೆ
  • ನಿರ್ಧಾರ
  • ಸ್ಥಿತಿ
• ವಿವರಗಳು
  • ಊಹೆಗಳು
  • ನಿರ್ಬಂಧಗಳು
  • ನಿಲುವುಗಳು
  • ವಾದ
  • ಪರಿಣಾಮಗಳು
• ಸಂಬಂಧಿತ
  • ಸಂಬಂಧಿತ ನಿರ್ಧಾರಗಳು
  • ಸಂಬಂಧಿತ ಅವಶ್ಯಕತೆಗಳು
  • ಸಂಬಂಧಿತ ಆರ್ಟಿಫ್ಯಾಕ್ಟುಗಳು
  • ಸಂಬಂಧಿತ ತತ್ವಗಳು
• ಟಿಪ್ಪಣಿಗಳು

ಸಾರಾಂಶ

ಸಮಸ್ಯೆ

ನಮ್ಮ ವೆಬ್ ಅಪ್ಲಿಕೇಶನ್‌ಗಳನ್ನು ರಚಿಸಲು ನಾವು CSS ಚೌಕಟ್ಟನ್ನು ಬಳಸಲು ಬಯಸುತ್ತೇವೆ:

• ಎಲ್ಲಾ ಜನಪ್ರಿಯ ಬ್ರೌಸರ್‌ಗಳು ಮತ್ತು ಪರದೆ ಗಾತ್ರಗಳಲ್ಲಿ ಬಳಕೆದಾರ ಅನುಭವ ವೇಗವಾಗಿ ಮತ್ತು ವಿಶ್ವಾಸಾರ್ಹವಾಗಿರಬೇಕೆಂದು ನಾವು ಬಯಸುತ್ತೇವೆ.

• ವಿನ್ಯಾಸ, ಲೇಔಟ್, UI/UX ಇತ್ಯಾದಿಗಳಲ್ಲಿ ತ್ವರಿತ ಪುನರಾವರ್ತನೆಯನ್ನು ನಾವು ಬಯಸುತ್ತೇವೆ.

• ವಿಶೇಷವಾಗಿ ಮೊಬೈಲ್ ಸಾಧನಗಳಂತಹ ಸಣ್ಣ ಪರದೆಗಳು, 4K ವೈಡ್‌ಸ್ಕ್ರೀನ್‌ಗಳಂತಹ ದೊಡ್ಡ ಪರದೆಗಳು ಮತ್ತು ತಿರುಗಿಸಬಹುದಾದ ಡಿಸ್‌ಪ್ಲೇಗಳಂತಹ ಡೈನಾಮಿಕ್ ಪರದೆಗಳಿಗೆ ಸ್ಪಂದಿಸುವ ಅಪ್ಲಿಕೇಶನ್‌ಗಳನ್ನು ನಾವು ಬಯಸುತ್ತೇವೆ.

ನಿರ್ಧಾರ

Bulma ಆರಿಸಲು ನಿರ್ಧರಿಸಲಾಗಿದೆ.

ಸ್ಥಿತಿ

Bulma ಆರಿಸಲು ನಿರ್ಧರಿಸಲಾಗಿದೆ. ಹೊಸ CSS ಚೌಕಟ್ಟಿನ ಆಯ್ಕೆಗಳು ಬಂದಂತೆ ಅವಕ್ಕೆ ಮುಕ್ತವಾಗಿದ್ದೇವೆ.

ವಿವರಗಳು

ಊಹೆಗಳು

ಆಧುನಿಕ, ವೇಗದ, ವಿಶ್ವಾಸಾರ್ಹ, ಸ್ಪಂದಿಸುವ ಇತ್ಯಾದಿ ವೆಬ್ ಅಪ್ಲಿಕೇಶನ್‌ಗಳನ್ನು ರಚಿಸಲು ನಾವು ಬಯಸುತ್ತೇವೆ.

ವಿಶಿಷ್ಟ ಆಧುನಿಕ ವೆಬ್ ಅಪ್ಲಿಕೇಶನ್‌ಗಳು ಹಲವು ಕಾರಣಗಳಿಂದ jQuery ಬಳಕೆಯನ್ನು ಕಡಿಮೆ ಮಾಡುತ್ತಿವೆ ಅಥವಾ ತೆಗೆದುಹಾಕುತ್ತಿವೆ:

• ಆಧುನಿಕ JavaScript ಯು jQuery ಒದಗಿಸುತ್ತಿದ್ದ ಅನೇಕ ಸಾಮರ್ಥ್ಯಗಳನ್ನು ಹಂತಹಂತವಾಗಿ ಸೇರಿಸಿಕೊಳ್ಳುತ್ತಿದೆ, ಆದ್ದರಿಂದ jQuery ಯ ಅಗತ್ಯ ಕಡಿಮೆ, ಮತ್ತು ನಿರ್ದಿಷ್ಟ ಅನುಷ್ಠಾನಗಳನ್ನು ಒದಗಿಸುವ ಉತ್ತಮ/ವೇಗದ/ಚಿಕ್ಕ ಮಾಡ್ಯೂಲ್‌ಗಳಿವೆ

• jQuery ಯ ವಿಶಾಲ ವಿಧಾನವು ನೇರ DOM ಕುಶಲತೆ, ಇದು ಆಧುನಿಕ JavaScript ಚೌಕಟ್ಟುಗಳಿಗೆ (ಉದಾ. React, Vue, Svelte) ಪ್ರತಿ-ಮಾದರಿ

• jQuery ಎರಡು ಬಾರಿ ಲೋಡ್ ಆದರೆ ತನ್ನೊಂದಿಗೇ ಹಸ್ತಕ್ಷೇಪ ಮಾಡುತ್ತದೆ, ಇತ್ಯಾದಿ.

ನಿರ್ಬಂಧಗಳು

jQuery ಬಳಸುವ CSS ಚೌಕಟ್ಟನ್ನು ನಾವು ಆರಿಸಿದರೆ, jQuery ಅನ್ನು ಆಮದು ಮಾಡಿಕೊಳ್ಳುವುದು ಅನಿವಾರ್ಯವಾಗುತ್ತದೆ. ಉದಾಹರಣೆಗೆ, Semantic UI jQuery ಬಳಸುತ್ತದೆ, ಮತ್ತು Tachyons ಬಳಸುವುದಿಲ್ಲ.

ಕನಿಷ್ಠೀಯವಾದ CSS ಚೌಕಟ್ಟನ್ನು ನಾವು ಆರಿಸಿದರೆ, ನಮಗೆ ಈಗ ಅಥವಾ ಶೀಘ್ರದಲ್ಲಿ ಬೇಕಾಗಬಹುದಾದ ಚೌಕಟ್ಟಿನ ಘಟಕಗಳನ್ನು ನಾವು ಕಳೆದುಕೊಳ್ಳುತ್ತೇವೆ. ಉದಾಹರಣೆಗೆ, Semantic UI ಚಿತ್ರ ಕ್ಯಾರೌಸೆಲ್ ಒದಗಿಸುತ್ತದೆ, ಮತ್ತು Tachyons ಒದಗಿಸುವುದಿಲ್ಲ.

ನಿಲುವುಗಳು

ಯಾವುದೇ ಚೌಕಟ್ಟನ್ನು ಬಳಸದಿರುವುದನ್ನು ನಾವು ಪರಿಗಣಿಸಿದೆವು. ಇದು ಇನ್ನೂ ಕಾರ್ಯಸಾಧ್ಯವೆಂದು ತೋರುತ್ತದೆ, ವಿಶೇಷವಾಗಿ ನಮ್ಮ ಯೋಜನೆಗೆ ಬೇಕಾದ ಹೆಚ್ಚಿನದನ್ನು CSS ಗ್ರಿಡ್ ಒದಗಿಸುವುದರಿಂದ..

ತ್ವರಿತ ಶಾರ್ಟ್‌ಲಿಸ್ಟ್ ವಿಂಗಡಣೆ ಬಳಸಿ ನಾವು ಅನೇಕ CSS ಚೌಕಟ್ಟುಗಳನ್ನು ಪರಿಗಣಿಸಿದೆವು: Bootstrap, Bulma, Foundation, Materialize, Semantic UI, Tachyons, ಇತ್ಯಾದಿ. ಆಳವಾದ ಪರಿಶೀಲನೆಗಾಗಿ ನಮ್ಮ ಎರಡು ಆಯ್ಕೆಗಳು Semantic UI (ಅತ್ಯಂತ ಅರ್ಥಪೂರ್ಣ ವಿಧಾನ ಹೊಂದಿರುವುದರಿಂದ) ಮತ್ತು Bulma (ನಮಗೆ ಈಗ ಬೇಕಾದ ಘಟಕಗಳನ್ನು ಒದಗಿಸುವ ಅತ್ಯಂತ ಹಗುರ ವಿಧಾನ ಹೊಂದಿರುವುದರಿಂದ).

ನಾವು Semantic UI ಅನ್ನು ಪರಿಗಣಿಸಿದೆವು. ಇದು ನಮ್ಮ ಯೋಜನೆಗೆ ನಾವು ಬಯಸುವ ಟ್ಯಾಬ್‌ಗಳು, ಗ್ರಿಡ್‌ಗಳು, ಬಟನ್‌ಗಳು ಇತ್ಯಾದಿ ಸೇರಿದಂತೆ ಅನೇಕ ಘಟಕಗಳನ್ನು ಒದಗಿಸುತ್ತದೆ. Semantic UI ಯೊಂದಿಗೆ ನಾವು ಎರಡು ರೀತಿಯಲ್ಲಿ ಪೈಲಟ್ ಮಾಡಿದೆವು: ಸಾಮಾನ್ಯ CDN ಕಡತಗಳನ್ನು ಬಳಸಿ, ಮತ್ತು NPM ರೆಪೊಗಳನ್ನು ಬಳಸಿ. ಸ್ಥಿರ HTML ಪುಟದಲ್ಲಿ Semantic UI ಯೊಂದಿಗೆ ನಾವು ಯಶಸ್ಸು ಸಾಧಿಸಿದೆವು, ಆದರೆ JavaScript SPA ನಿರ್ಮಿಸುವ ನಮ್ಮ ಸಮಯಮಿತಿಯೊಳಗೆ (ಮುಖ್ಯವಾಗಿ jQuery ಲೋಡ್ ಸಮಸ್ಯೆಗಳಿಂದ) ಯಶಸ್ಸು ಸಾಧಿಸಲಿಲ್ಲ. ನಮ್ಮಂತೆಯೇ ಅದೇ ಕಾರಣಗಳಿಗಾಗಿ, jQuery-ರಹಿತ ಆವೃತ್ತಿಯನ್ನು ರಚಿಸುವಂತೆ ಇತರ ಕೋಡರ್‌ಗಳು Semantic UI ಡೆವಲಪರ್‌ಗಳನ್ನು ಕೇಳುತ್ತಿದ್ದಾರೆ ಎಂದು ನಾವು ಕಂಡುಕೊಂಡೆವು. ಇತರ ಕೋಡರ್‌ಗಳು ಅನೇಕ ವರ್ಷಗಳಿಂದ jQuery-ರಹಿತ ಆವೃತ್ತಿಯನ್ನು ಕೋರುತ್ತಿದ್ದಾರೆ, ಆದರೂ ಡೆವಲಪರ್‌ಗಳು ಇಲ್ಲ ಎಂದಿದ್ದಾರೆ, ಮತ್ತು ಯಾವುದೇ jQuery-ರಹಿತ ಆವೃತ್ತಿ ಬರೆಯಲು ತುಂಬಾ ಕಷ್ಟ ಎಂದು ಹೇಳಿದ್ದಾರೆ, ಉದಾ. ~"Semantic UI ಯೋಜನೆಯಲ್ಲಿ jQuery ಬಳಸುವ 22,000 ಕ್ಕೂ ಹೆಚ್ಚು ಸ್ಪರ್ಶ ಬಿಂದುಗಳಿವೆ".

Semantic ಉದಾಹರಣೆ:

<div class="ui top attached tabular menu">
  <a class="item">Alpha</a>
  <a class="item">Bravo</a>
</div>

ನಾವು Bulma ಅನ್ನು ಪರಿಗಣಿಸಿದೆವು. Bulma, Semantic UI ಯಂತಹ ಅನೇಕ ಸಾಮರ್ಥ್ಯಗಳನ್ನು ಹೊಂದಿದೆ, ಆದರೂ ಅಷ್ಟು ಸುಧಾರಿತ ಘಟಕಗಳಿಲ್ಲ. Bulma ಅನ್ನು jQuery ಇಲ್ಲದಂತಹ ಆಧುನಿಕ ತಂತ್ರಗಳಿಂದ ನಿರ್ಮಿಸಲಾಗಿದೆ. Bulma ಕೆಲವು ಮೂರನೇ ಪಕ್ಷದ ಘಟಕಗಳನ್ನು ಹೊಂದಿದೆ, ಅವುಗಳಲ್ಲಿ ಕೆಲವನ್ನು ನಾವು ಬಳಸಲು ಬಯಸಬಹುದು.

Bulma ಉದಾಹರಣೆ:

<div class="tabs">
  <ul>
    <li><a>Alpha</a></li>
    <li><a>Bravo</a></li>
  </ul>
</div>

ವಾದ

ಮೇಲಿನಂತೆ.

ವಿಶೇಷವಾಗಿ, Semantic UI ತಂತ್ರಜ್ಞಾನದ ದೃಷ್ಟಿಯಿಂದ (ಅಂದರೆ ಅಷ್ಟೊಂದು jQuery ಸ್ಪರ್ಶ ಬಿಂದುಗಳು) ಮತ್ತು ನಾಯಕತ್ವದ ದೃಷ್ಟಿಯಿಂದಲೂ (ಅಂದರೆ ಮಾರ್ಗಸೂಚಿ, ನಿರಂತರ ಸುಧಾರಣೆ, ಅಥವಾ ದೇಣಿಗೆ ನಿಧಿ ಸಂಗ್ರಹಣೆ ಇತ್ಯಾದಿಗಳನ್ನು ಪ್ರಯತ್ನಿಸುವ ಬದಲು jQuery-ರಹಿತಕ್ಕೆ ದೃಢವಾದ ಇಲ್ಲ ಎಂದದ್ದು) ಎಚ್ಚರಿಕೆಯ ಧ್ವಜವನ್ನು ಹೊಂದಿರುವಂತೆ ತೋರುತ್ತದೆ.

ಪರಿಣಾಮಗಳು

jQuery-ರಹಿತ ಉತ್ತಮ CSS ಚೌಕಟ್ಟು ನಮಗೆ ಸಿಕ್ಕರೆ, ಇದು ಸಾಮಾನ್ಯವಾಗಿ ಸಹಾಯಕ ಮತ್ತು ಒಟ್ಟಾರೆ ಒಳ್ಳೆಯದು.

ಸಂಬಂಧಿತ

ಸಂಬಂಧಿತ ನಿರ್ಧಾರಗಳು

ನಾವು ಆರಿಸುವ CSS ಚೌಕಟ್ಟು ಪರೀಕ್ಷಾ ಸಾಮರ್ಥ್ಯದ ಮೇಲೆ ಪರಿಣಾಮ ಬೀರಬಹುದು.

ಸಂಬಂಧಿತ ಅವಶ್ಯಕತೆಗಳು

ಸಂಪೂರ್ಣ ಆಧುನಿಕ ಅಪ್ಲಿಕೇಶನ್ ಅನ್ನು ವೇಗವಾಗಿ ಹೊರತರಲು ನಾವು ಬಯಸುತ್ತೇವೆ.

ಹಳೆಯ ಅವಲಂಬನೆಗಳನ್ನು (ವಿಶೇಷವಾಗಿ jQuery) ಬಳಸುವ ಹಳೆಯ ಚೌಕಟ್ಟುಗಳ (ವಿಶೇಷವಾಗಿ Semantic UI) ಮೇಲೆ ಕೆಲಸ ಮಾಡಲು ನಾವು ಸಮಯ ಕಳೆಯಲು ಬಯಸುವುದಿಲ್ಲ.

ಸಂಬಂಧಿತ ಆರ್ಟಿಫ್ಯಾಕ್ಟುಗಳು

CSS ಬಳಸುವ ಎಲ್ಲಾ ವಿಶಿಷ್ಟ HTML ಮೇಲೆ ಪರಿಣಾಮ ಬೀರುತ್ತದೆ.

ಸಂಬಂಧಿತ ತತ್ವಗಳು

ಸುಲಭವಾಗಿ ಹಿಂದಿರುಗಿಸಬಹುದಾದ.

ವೇಗದ ಅಗತ್ಯ.

ಟಿಪ್ಪಣಿಗಳು

ಯಾವುದೇ ಟಿಪ್ಪಣಿಗಳು ಇಲ್ಲಿ.