DEV Community

Cover image for Executions
திரைச்சுவடு
திரைச்சுவடு

Posted on

Executions

#webdev #astro #javascript #productivity

1. Traditional/Separate Files Way

Traditional/Separate Files Way என்பது HTML, CSS மற்றும் JavaScript ஆகிய மூன்றையும் தனித்தனி ஃபைல்களாகப் பிரித்து வைப்பதாகும். இது ஒரு சமையலறையில் மளிகை பொருட்கள், பாத்திரங்கள் மற்றும் காய்கறிகளைத் தனித்தனியாக அடுக்கி வைப்பது போன்றது.

ஏன் இப்படி பிரிக்க வேண்டும்? (Pros)

  • Clean Code: HTML-ல் ஸ்ட்ரக்சர் மட்டும் இருக்கும், CSS-ல் அழகுபடுத்தும் வேலை மட்டும் இருக்கும். குழப்பம் வராது.
  • Easy Debugging: ஸ்டைலில் பிரச்சனை என்றால் CSS ஃபைலை மட்டும் பார்க்கலாம்.
  • Reusability: ஒரு CSS ஃபைலை பல HTML பக்கங்களுக்குப் பயன்படுத்தலாம்.

Step-by-Step Example:
உதாரணத்திற்கு ஒரு பட்டனை உருவாக்கி, அதை அழகுபடுத்தி, கிளிக் செய்தால் ஒரு மெசேஜ் வருவது போல செய்வோம்.
1. HTML File (index.html)
இதுதான் எலும்புக்கூடு. இதில் CSS மற்றும் JS ஃபைல்களை இணைக்க (Link) வேண்டும்.

2. CSS File (style.css)
இது மேக்கப் போடும் வேலை. இந்த ஃபைலில் HTML டேக்குகளுக்கு ஸ்டைல் கொடுப்போம்.

3. JavaScript File (script.js)
இது மூளை. பட்டனை அழுத்தினால் என்ன நடக்க வேண்டும் என்று இங்கே சொல்லுவோம்.

எப்படி வேலை செய்கிறது?

  • பிரவுசர் index.html-ஐ முதலில் படிக்கும்.
  • <link> டேக் பார்த்தவுடன் style.css-ஐ டவுன்லோட் செய்து அழகைக் கொடுக்கும்.
  • கடைசியில் <script> டேக் பார்த்தவுடன் script.js-ஐ எடுத்துக்கொண்டு மூளையை (Logic) செயல்படுத்தும்.

செய்யக்கூடாதவை (Don'ts):

  • CSS மற்றும் JS ஃபைல் பெயர்களைத் தவறாகக் கொடுக்காதீர்கள் (உதாரணம்: Style.css என இருந்தால் style.css என அழைக்காதீர்கள் - Case Sensitive).
  • ஃபைல்கள் எல்லாம் ஒரே ஃபோல்டரில் (Folder) இருப்பதை உறுதி செய்யவும். இல்லையெனில் சரியான பாத் (Path) கொடுக்க வேண்டும்.

2. Single File Way (Inline/Internal)

Single File Way என்பது HTML, CSS, மற்றும் JavaScript ஆகிய மூன்றையும் ஒரே .html கோப்பிற்குள் எழுதுவதாகும். இதை Internal Styling மற்றும் Internal Scripting என்றும் அழைப்பார்கள்.

இது எப்போது உதவும்?

  • மிகச்சிறிய புராஜெக்ட்கள் அல்லது ஒரு சிறிய 'Landing Page' செய்யும்போது.
  • கோடிங் கற்றுக் கொள்ளும் ஆரம்பக் கட்டத்தில் (Beginners) கோப்புகளை மாற்றி மாற்றிப் பார்க்காமல் இருக்க.
  • யாராவது ஒருவருக்குத் தபால் (Email) மூலம் ஒரு சிறிய வேலையை அனுப்பும்போது (ஒரே ஃபைலாக அனுப்ப எளிது).

Single File Example:
இந்த ஒரு ஃபைலை மட்டும் சேமித்து ரன் செய்தால் போதும்.

<!DOCTYPE html>
<html lang="ta">
<head>
    <meta charset="UTF-8">
    <title>Single File Example</title>

    <!-- 1. CSS இங்கேயே இருக்கும் (Internal CSS) -->
    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
            padding-top: 50px;
            background-color: #e3f2fd;
        }

        .box {
            background: white;
            padding: 20px;
            display: inline-block;
            border-radius: 10px;
            box-shadow: 0px 4px 8px rgba(0,0,0,0.1);
        }

        button {
            background-color: #ff5722;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 5px;
            cursor: pointer;
        }
    </style>
</head>
<body>

    <div class="box">
        <h1 id="status">விளக்கு அணைந்துள்ளது</h1>
        <!-- 2. Inline Event - HTML-க்குள்ளேயே சிறிய JS -->
        <button onclick="changeLight()">விளக்கை ஏற்று</button>
    </div>

    <!-- 3. JavaScript இங்கேயே இருக்கும் (Internal JS) -->
    <script>
        function changeLight() {
            const status = document.getElementById("status");
            status.innerHTML = "விளக்கு எரிந்து கொண்டிருக்கிறது! 💡";
            status.style.color = "#fbc02d";
            document.body.style.backgroundColor = "#fff9c4";
        }
    </script>

</body>
</html>
Enter fullscreen mode Exit fullscreen mode

இதில் உள்ள முக்கியமான பகுதிகள்:

  • <style> Tag: இதுதான் CSS-க்கான இடம். <head> பகுதிக்குள் இருக்கும்.
  • Inline Attributes: onclick="changeLight()" என்பது HTML டேக்கிற்குள்ளேயே நேரடியாக JavaScript-ஐக் குறிப்பது.
  • <script> Tag: இது JavaScript-க்கான இடம். பொதுவாக இதைப் பாடியின் (<body>) இறுதியில் வைப்பார்கள்.

Pros & Cons
Pros:

  • ஒரே ஃபைலை மட்டும் மெயின்டைன் செய்தால் போதும்.
  • பிரவுசர் ஒரே ஒரு முறைதான் சர்வரைக் கேட்கும் Single HTTP Request.

Cons:

  • கோடு 1000 வரிகளுக்கு மேல் போனால் எங்கு என்ன இருக்கிறது என்று தேடுவது கஷ்டம்.
  • இதே ஸ்டைலை இன்னொரு பக்கத்திற்குப் பயன்படுத்த முடியாது (Code Reusability இல்லை).
  • பிரவுசருக்கு இந்த கோப்பைத் தனியாகப் பிரித்து சேமிக்க (Caching) முடியாது, அதனால் பக்கம் மெதுவாகத் தெரியலாம்.

3. Modern Framework Way (React, Vue, Angular)

இங்கு HTML, CSS மற்றும் JS ஆகியவை Components-களாக பிரிக்கப்படுகின்றன.

  • Pros: பெரிய அப்ளிகேஷன்களை உருவாக்க இதுவே சிறந்த வழி. கோட் மீண்டும் பயன்படுத்தக்கூடியதாக (Reusable) இருக்கும். இணையதளம் மிகவும் வேகமாக இயங்கும்.
  • Cons: இதைக் கற்றுக்கொள்வது கடினம் (Steep learning curve). ஆரம்பத்தில் செட்-அப் செய்ய அதிக நேரம் எடுக்கும்.

4. Progressive Web Apps (PWA)

இணையதளங்களை மொபைல் ஆப் (App) போல இயங்கச் செய்யும் முறை.

  • Pros:இணையம் (Internet) இல்லாமலும் இயங்கும் வசதி உண்டு. மொபைல் ஆப் போலவே புஷ் நோட்டிபிகேஷன் அனுப்பலாம்.
  • Cons: ஐபோன் (iOS) போன்ற சில தளங்களில் இன்னும் முழுமையான ஆதரவு கிடைக்காமல் போகலாம்.

5. அதிகம் அறியப்படாத புதிய முறைகள்

  • Web Components: எவ்வித பிரேம்வொர்க்கும் (React, Vue) இல்லாமல், பிரவுசரின் சொந்த வசதிகளை வைத்தே சொந்தமாக டேக்குகளை (Custom Tags) உருவாக்குவது.
  • Island Architecture (Astro): தேவையான இடங்களில் மட்டும் JavaScript-ஐப் பயன்படுத்தி, மற்ற இடங்களை நிலையான HTML-ஆக வைத்திருப்பது. இது இணையதளத்தின் வேகத்தை உச்சகட்டத்திற்கு கொண்டு செல்லும்.
  • CSS-in-JS: JavaScript கோப்பிற்குள்ளேயே CSS எழுதுவது. இது ஸ்டைல்களை டைனமிக்காக மாற்ற உதவும்.

Top comments (0)