ਆਰਕੀਟੈਕਚਰ ਫੈਸਲਾ ਰਿਕਾਰਡ: CSS ਫਰੇਮਵਰਕ

ਸਮੱਗਰੀ:

• ਸਾਰ
  • ਮੁੱਦਾ
  • ਫੈਸਲਾ
  • ਸਥਿਤੀ
• ਵੇਰਵੇ
  • ਧਾਰਨਾਵਾਂ
  • ਬੰਦਸ਼ਾਂ
  • ਪੱਖ
  • ਦਲੀਲ
  • ਪ੍ਰਭਾਵ
• ਸੰਬੰਧਿਤ
  • ਸੰਬੰਧਿਤ ਫੈਸਲੇ
  • ਸੰਬੰਧਿਤ ਲੋੜਾਂ
  • ਸੰਬੰਧਿਤ ਕਲਾਕ੍ਰਿਤੀਆਂ
  • ਸੰਬੰਧਿਤ ਸਿਧਾਂਤ
• ਨੋਟ

ਸਾਰ

ਮੁੱਦਾ

ਅਸੀਂ ਆਪਣੀਆਂ ਵੈੱਬ ਐਪਲੀਕੇਸ਼ਨਾਂ ਬਣਾਉਣ ਲਈ CSS ਫਰੇਮਵਰਕ ਵਰਤਣਾ ਚਾਹੁੰਦੇ ਹਾਂ:

• ਅਸੀਂ ਚਾਹੁੰਦੇ ਹਾਂ ਕਿ ਵਰਤੋਂਕਾਰ ਤਜਰਬਾ ਸਾਰੇ ਪ੍ਰਸਿੱਧ ਬ੍ਰਾਊਜ਼ਰਾਂ ਅਤੇ ਸਕ੍ਰੀਨ ਆਕਾਰਾਂ ਉੱਤੇ ਤੇਜ਼ ਅਤੇ ਭਰੋਸੇਯੋਗ ਹੋਵੇ।

• ਅਸੀਂ ਡਿਜ਼ਾਈਨ, ਲੇਆਉਟ, UI/UX ਆਦਿ ਉੱਤੇ ਤੇਜ਼ ਦੁਹਰਾਓ ਚਾਹੁੰਦੇ ਹਾਂ।

• ਅਸੀਂ ਜਵਾਬਦੇਹ (responsive) ਐਪਲੀਕੇਸ਼ਨਾਂ ਚਾਹੁੰਦੇ ਹਾਂ, ਖਾਸ ਕਰਕੇ ਮੋਬਾਈਲ ਡਿਵਾਈਸਾਂ ਵਰਗੀਆਂ ਛੋਟੀਆਂ ਸਕ੍ਰੀਨਾਂ, 4K ਵਾਈਡਸਕ੍ਰੀਨ ਵਰਗੀਆਂ ਵੱਡੀਆਂ ਸਕ੍ਰੀਨਾਂ, ਅਤੇ ਘੁੰਮਾਏ ਜਾ ਸਕਣ ਵਾਲੇ ਡਿਸਪਲੇ ਵਰਗੀਆਂ ਗਤੀਸ਼ੀਲ ਸਕ੍ਰੀਨਾਂ ਲਈ।

ਫੈਸਲਾ

Bulma ਚੁਣਿਆ ਗਿਆ।

ਸਥਿਤੀ

Bulma ਚੁਣਿਆ ਗਿਆ। ਨਵੇਂ CSS ਫਰੇਮਵਰਕ ਵਿਕਲਪ ਆਉਣ ਉੱਤੇ ਉਨ੍ਹਾਂ ਲਈ ਖੁੱਲ੍ਹੇ ਹਾਂ।

ਵੇਰਵੇ

ਧਾਰਨਾਵਾਂ

ਅਸੀਂ ਅਜਿਹੀਆਂ ਵੈੱਬ ਐਪਾਂ ਬਣਾਉਣਾ ਚਾਹੁੰਦੇ ਹਾਂ ਜੋ ਆਧੁਨਿਕ, ਤੇਜ਼, ਭਰੋਸੇਯੋਗ, ਜਵਾਬਦੇਹ ਆਦਿ ਹੋਣ।

ਆਮ ਆਧੁਨਿਕ ਵੈੱਬ ਐਪਾਂ ਕਈ ਕਾਰਨਾਂ ਕਰਕੇ jQuery ਦੀ ਵਰਤੋਂ ਘਟਾ ਜਾਂ ਖ਼ਤਮ ਕਰ ਰਹੀਆਂ ਹਨ:

• ਆਧੁਨਿਕ JavaScript ਕਈ ਅਜਿਹੀਆਂ ਸਮਰੱਥਾਵਾਂ ਹੌਲੀ-ਹੌਲੀ ਸ਼ਾਮਲ ਕਰ ਰਹੀ ਹੈ ਜੋ jQuery ਦਿੰਦੀ ਰਹੀ ਹੈ, ਇਸ ਲਈ jQuery ਦੀ ਲੋੜ ਘੱਟ ਹੈ, ਅਤੇ ਖਾਸ ਲਾਗੂਕਰਨ ਦੇਣ ਵਾਲੇ ਬਿਹਤਰ/ਤੇਜ਼/ਛੋਟੇ ਮੌਡਿਊਲ ਮੌਜੂਦ ਹਨ

• jQuery ਦੀ ਵਿਆਪਕ ਪਹੁੰਚ ਸਿੱਧੇ DOM ਹੇਰ-ਫੇਰ ਦੀ ਹੈ, ਜੋ ਆਧੁਨਿਕ JavaScript ਫਰੇਮਵਰਕਾਂ (ਜਿਵੇਂ ਕਿ React, Vue, Svelte) ਲਈ ਇੱਕ ਮਾੜਾ ਪੈਟਰਨ (anti-pattern) ਹੈ

• ਜੇ jQuery ਦੋ ਵਾਰ ਲੋਡ ਹੋ ਜਾਵੇ ਤਾਂ ਉਹ ਆਪਣੇ-ਆਪ ਨਾਲ ਹੀ ਟਕਰਾਅ ਪੈਦਾ ਕਰਦੀ ਹੈ, ਆਦਿ

ਬੰਦਸ਼ਾਂ

ਜੇ ਅਸੀਂ ਅਜਿਹਾ CSS ਫਰੇਮਵਰਕ ਚੁਣਦੇ ਹਾਂ ਜੋ jQuery ਵਰਤਦਾ ਹੈ, ਤਾਂ ਸਾਨੂੰ 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 ਲੋਡ ਦੇ ਮਸਲਿਆਂ ਕਾਰਨ)। ਸਾਨੂੰ ਪਤਾ ਲੱਗਾ ਕਿ ਹੋਰ ਕੋਡਰ Semantic UI ਦੇ ਡਿਵੈਲਪਰਾਂ ਤੋਂ jQuery-ਰਹਿਤ ਸੰਸਕਰਨ ਬਣਾਉਣ ਦੀ ਮੰਗ ਕਰ ਰਹੇ ਹਨ, ਉਨ੍ਹਾਂ ਹੀ ਕਾਰਨਾਂ ਕਰਕੇ ਜੋ ਸਾਡੇ ਹਨ। ਹੋਰ ਕੋਡਰ ਕਈ ਸਾਲਾਂ ਤੋਂ jQuery-ਰਹਿਤ ਸੰਸਕਰਨ ਦੀ ਮੰਗ ਕਰ ਰਹੇ ਹਨ, ਫਿਰ ਵੀ ਡਿਵੈਲਪਰਾਂ ਨੇ ਨਾਂਹ ਕਹੀ ਹੈ, ਅਤੇ ਕਿਹਾ ਹੈ ਕਿ ਕੋਈ ਵੀ jQuery-ਰਹਿਤ ਸੰਸਕਰਨ ਲਿਖਣਾ ਬਹੁਤ ਔਖਾ ਹੋਵੇਗਾ, ਜਿਵੇਂ ਕਿ ~"Semantic UI ਪ੍ਰੋਜੈਕਟ ਵਿੱਚ 22,000 ਤੋਂ ਵੱਧ ਸੰਪਰਕ ਬਿੰਦੂ ਹਨ ਜੋ jQuery ਵਰਤਦੇ ਹਨ"।

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) ਉੱਤੇ ਕੰਮ ਕਰਨ ਵਿੱਚ ਸਮਾਂ ਨਹੀਂ ਲਾਉਣਾ ਚਾਹੁੰਦੇ।

ਸੰਬੰਧਿਤ ਕਲਾਕ੍ਰਿਤੀਆਂ

ਉਸ ਸਾਰੇ ਆਮ HTML ਨੂੰ ਪ੍ਰਭਾਵਿਤ ਕਰਦਾ ਹੈ ਜੋ CSS ਵਰਤੇਗਾ।

ਸੰਬੰਧਿਤ ਸਿਧਾਂਤ

ਆਸਾਨੀ ਨਾਲ ਪਲਟਣਯੋਗ।

ਗਤੀ ਦੀ ਲੋੜ।

ਨੋਟ

ਕੋਈ ਵੀ ਨੋਟ ਇੱਥੇ।