آموزش جامع توسعه وب اپلیکیشن با Svelte و TypeScript

Svelte یک فریم ورک جاوااسکریپت مدرن و کامپایلری است که به شما اجازه می دهد کدهای کمتری بنویسید و عملکرد بهتری داشته باشید. TypeScript نیز یک superset از JavaScript است که با افزودن type safety، توسعه برنامه های بزرگ را آسان تر می کند. در این آموزش، با هم یاد می گیریم چگونه یک وب اپلیکیشن را با استفاده از این دو تکنولوژی قدرتمند توسعه دهیم.

چرا Svelte و TypeScript؟

Svelte:

• عملکرد بالا: Svelte به جای استفاده از Virtual DOM، کدها را در زمان build به Vanilla JavaScript کامپایل می کند و این باعث می شود عملکرد اپلیکیشن بسیار سریع تر باشد.
• کد کمتر: Svelte سینتکس ساده تری دارد و به شما اجازه می دهد با کد کمتری، کارهای بیشتری انجام دهید.
• یادگیری آسان: Svelte نسبتاً آسان تر از سایر فریم ورک ها قابل یادگیری است و به سرعت می توانید با آن شروع به کار کنید.

TypeScript:

• Type Safety: TypeScript با افزودن type safety به JavaScript، از بروز بسیاری از خطاها در زمان اجرا جلوگیری می کند.
• خوانایی و نگهداری بهتر: TypeScript باعث می شود کدها خواناتر و قابل نگهداری تر باشند.
• پشتیبانی از ابزارهای توسعه: TypeScript با بسیاری از ابزارهای توسعه، مانند IDEها و linting tools، سازگار است.

پیش نیازها

قبل از شروع این آموزش، مطمئن شوید که موارد زیر را دارید:

• Node.js و npm (یا yarn) نصب شده باشند.
• آشنایی اولیه با HTML، CSS و JavaScript.
• ویرایشگر کد مناسب (مانند VS Code).

مراحل ایجاد پروژه

1. ایجاد پروژه Svelte با TypeScript

برای شروع، از یک template آماده Svelte با TypeScript استفاده می کنیم:

npx degit sveltejs/template-typescript my-svelte-app
cd my-svelte-app
npm install

این دستور یک پروژه جدید با نام my-svelte-app ایجاد می کند و وابستگی های آن را نصب می کند.

2. اجرای پروژه

برای اجرای پروژه، از دستور زیر استفاده کنید:

npm run dev

این دستور، سرور توسعه را اجرا می کند و می توانید اپلیکیشن خود را در مرورگر در آدرس http://localhost:5000 مشاهده کنید.

3. ساختار پروژه

ساختار یک پروژه Svelte با TypeScript به صورت زیر است:

my-svelte-app/
├── src/
│   ├── App.svelte
│   ├── main.ts
│   └── ...
├── public/
│   ├── index.html
│   └── ...
├── package.json
├── tsconfig.json
└── ...

• src/: شامل کدهای اصلی اپلیکیشن شما است.
• App.svelte: کامپوننت اصلی اپلیکیشن شما.
• main.ts: نقطه ورود اپلیکیشن.
• public/: شامل فایل های استاتیک، مانند index.html.
• package.json: فایل پیکربندی npm.
• tsconfig.json: فایل پیکربندی TypeScript.

کامپوننت ها در Svelte

در Svelte، همه چیز یک کامپوننت است. یک کامپوننت Svelte از سه بخش اصلی تشکیل شده است:

• <script>: کدهای JavaScript (یا TypeScript)
• <style>: استایل های CSS
• Markup: HTML و Svelte directives

به عنوان مثال، یک کامپوننت ساده می تواند به صورت زیر باشد:

<script lang="ts">
    let name: string = "World";
</script>

<h1>Hello, {name}!</h1>

<style>
    h1 {
        color: blue;
    }
</style>

در این مثال، یک متغیر به نام name تعریف شده و در HTML استفاده شده است. همچنین، استایل های CSS برای تگ h1 تعریف شده اند.

State Management

Svelte دارای یک سیستم state management داخلی است که به شما اجازه می دهد به راحتی state کامپوننت ها را مدیریت کنید. هر متغیری که در <script> تعریف شود، به صورت خودکار reactive است. به این معنی که هر زمان که مقدار آن تغییر کند، UI به روز رسانی می شود.

به عنوان مثال:

<script lang="ts">
    let count: number = 0;

    function increment() {
        count += 1;
    }
</script>

<button on:click={increment}>Count: {count}</button>

در این مثال، هر بار که دکمه کلیک شود، مقدار count افزایش می یابد و UI به روز رسانی می شود.

Routing

برای افزودن routing به اپلیکیشن Svelte، می توانید از کتابخانه های مختلفی مانند svelte-navigator یا routify استفاده کنید. این کتابخانه ها به شما اجازه می دهند به راحتی مسیرهای مختلف را تعریف کنید و بین صفحات مختلف navigate کنید.

به عنوان مثال، با استفاده از svelte-navigator:

npm install svelte-navigator

سپس:

<script>
    import { Router, Route, Link } from 'svelte-navigator';
</script>

<Router>
    <nav>
        <Link to="/">Home</Link>
        <Link to="/about">About</Link>
    </nav>

    <Route path="/">
        <h1>Home Page</h1>
    </Route>

    <Route path="/about">
        <h1>About Page</h1>
    </Route>
</Router>

API Integration

برای فراخوانی APIها در Svelte، می توانید از متد fetch استفاده کنید. به عنوان مثال:

<script lang="ts">
    let data: any[] = [];

    async function fetchData() {
        const response = await fetch('https://jsonplaceholder.typicode.com/todos');
        data = await response.json();
    }

    fetchData();
</script>

<ul>
    {#each data as item}
        <li>{item.title}</li>
    {/each}
</ul>

در این مثال، داده ها از یک API فراخوانی شده و در یک لیست نمایش داده می شوند.

استقرار (Deployment)

برای استقرار اپلیکیشن Svelte، می توانید از پلتفرم های مختلفی مانند Netlify، Vercel یا GitHub Pages استفاده کنید. این پلتفرم ها به شما اجازه می دهند به راحتی اپلیکیشن خود را build و deploy کنید.

به عنوان مثال، برای استقرار در Netlify:

1. ابتدا، پروژه خود را build کنید:

npm run build

2. سپس، به Netlify بروید و پروژه خود را از طریق drag and drop یا GitHub deploy کنید.

پرسش های متداول (FAQ)

1. Svelte بهتر است یا React/Vue؟

Svelte، React و Vue همگی فریم ورک های خوبی هستند و انتخاب بین آن ها بستگی به نیازهای پروژه و ترجیحات شخصی شما دارد. Svelte به دلیل عملکرد بالا و کد کمتر، برای پروژه هایی که نیاز به سرعت و کارایی دارند، گزینه مناسبی است.

2. آیا TypeScript برای پروژه های Svelte ضروری است؟

TypeScript برای پروژه های Svelte ضروری نیست، اما استفاده از آن باعث می شود کدها خواناتر و قابل نگهداری تر باشند و از بروز بسیاری از خطاها جلوگیری می کند.

3. چگونه می توانم state را بین کامپوننت ها به اشتراک بگذارم؟

برای به اشتراک گذاشتن state بین کامپوننت ها، می توانید از Storeها در Svelte استفاده کنید. Storeها یک سیستم state management سراسری هستند که به شما اجازه می دهند state را در تمام کامپوننت ها به اشتراک بگذارید.

نیاز به کمک دارید؟

اگر در توسعه وب اپلیکیشن خود با Svelte و TypeScript به مشکل برخوردید، یا نیاز به مشاوره و راهنمایی دارید، با ما تماس بگیرید! تیم متخصص ما آماده ارائه خدمات زیر به شماست:

• مشاوره رایگان در زمینه انتخاب تکنولوژی مناسب
• طراحی و توسعه وب اپلیکیشن های سفارشی
• بهینه سازی عملکرد وب اپلیکیشن ها
• آموزش و منتورینگ در زمینه Svelte و TypeScript

همین حالا با ما تماس بگیرید و پروژه های خود را به ما بسپارید:

09190994063 - 09376846692

با تشکر از همراهی شما!