🔥เหตุใด SvelteJS จึงเป็นอนาคตของการพัฒนาส่วนหน้า

🔥เหตุใด SvelteJS จึงเป็นอนาคตของการพัฒนาส่วนหน้า

SVELTE JS

SvelteJS คืออะไร และเหตุใดจึงคุ้มค่าที่จะเรียนรู้

SvelteJS เป็นเฟรมเวิร์กแอปพลิเคชันเว็บที่ใช้ JavaScript ซึ่งมุ่งเน้นที่การสร้างแอปพลิเคชันเว็บที่รวดเร็วและมีประสิทธิภาพโดยการคอมไพล์โค้ดแอปพลิเคชันในระหว่างกระบวนการสร้าง แทนที่จะเป็นรันไทม์ แนวทางนี้ช่วยให้ Svelte สร้างแอปพลิเคชันที่เล็กลงและเร็วขึ้น ซึ่งง่ายต่อการบำรุงรักษาและอัปเดตอีกด้วย

Svelte ยังมีไวยากรณ์ที่เรียบง่ายและใช้งานง่ายสำหรับการสร้างอินเทอร์เฟซผู้ใช้แบบโต้ตอบ ทำให้ง่ายต่อการสร้างแอปพลิเคชันเว็บแบบไดนามิกและตอบสนองโดยไม่จำเป็นต้องใช้ไลบรารีการจัดการสถานะที่ซับซ้อน

แนวทางเฉพาะของ Svelte ในการสร้างเว็บแอปพลิเคชันได้รับความนิยมอย่างรวดเร็วในหมู่นักพัฒนา และได้รับการนำไปใช้โดยบริษัทที่มีชื่อเสียงหลายแห่ง เช่น The New York Times, IBM และ Netflix

มีสาเหตุหลายประการว่าทำไมจึงคุ้มค่าที่จะเรียนรู้ Svelte ☞

1. ขนาดบันเดิลเล็กลง: คอมไพเลอร์ของ Svelte สร้างโค้ดที่ได้รับการปรับปรุงให้เหมาะสมที่สุดซึ่งส่งผลให้ขนาดบันเดิลเล็กลง ทำให้เว็บแอปพลิเคชันโหลดเร็วขึ้นและบำรุงรักษาง่ายขึ้น
2. ไวยากรณ์ที่เรียบง่าย: ไวยากรณ์ของ Svelte นั้นเข้าใจและเรียนรู้ได้ง่าย ทำให้เป็นตัวเลือกที่เหมาะสำหรับนักพัฒนาที่เพิ่งเริ่มสร้างแอปพลิเคชันเว็บ
3. ประสิทธิภาพ: SvelteJS ได้รับการออกแบบมาให้รวดเร็วและมีประสิทธิภาพอย่างยิ่ง โดยมีขนาดเล็กทำให้เหมาะสำหรับการสร้างแอปพลิเคชันที่มีประสิทธิภาพสูง ด้วยการคอมไพล์โค้ด ณ เวลาสร้าง Svelte สามารถสร้างโค้ดที่ได้รับการปรับแต่งซึ่งเร็วกว่าเฟรมเวิร์กแบบดั้งเดิม เช่น React และ Angular
4. คุณสมบัติที่หลากหลาย: SvelteJS มาพร้อมกับชุดคุณสมบัติในตัวที่หลากหลาย รวมถึงการจัดองค์ประกอบ การเรนเดอร์แบบมีเงื่อนไข ภาพเคลื่อนไหว และอื่นๆ อีกมากมาย ช่วยให้นักพัฒนาสามารถสร้าง UI แบบอินเทอร์แอคทีฟที่สมบูรณ์ได้อย่างรวดเร็วและง่ายดาย
5. ความสามารถในการปรับตัว: SvelteJS สามารถใช้กับโครงการพัฒนาเว็บไซต์ได้หลากหลาย ตั้งแต่แอปพลิเคชันหน้าเดียวขนาดเล็กไปจนถึงแอปพลิเคชันระดับองค์กรขนาดใหญ่ ความสามารถในการปรับตัวนี้ทำให้เป็นตัวเลือกที่เหมาะสำหรับโครงการประเภทต่างๆ มากมาย
6. เป็นมิตรกับ SEO: SvelteJS นำเสนอการเรนเดอร์ฝั่งเซิร์ฟเวอร์และไฮเดรชั่นอัตโนมัติ ซึ่งสามารถช่วยปรับปรุง SEO ของเว็บไซต์ได้ ซึ่งหมายความว่าเครื่องมือค้นหาสามารถรวบรวมข้อมูลและจัดทำดัชนีเนื้อหาบนเว็บไซต์ SvelteJS ได้อย่างง่ายดาย ปรับปรุงการมองเห็นในผลการค้นหา
7. ชุมชนที่กำลังเติบโต: SvelteJS มีชุมชนนักพัฒนาที่กำลังเติบโตซึ่งมีส่วนร่วมอย่างแข็งขันในการพัฒนาและสร้างเครื่องมือและไลบรารีใหม่ ซึ่งหมายความว่านักพัฒนาสามารถค้นหาการสนับสนุนและทรัพยากรเพื่อช่วยให้พวกเขาเรียนรู้และใช้ SvelteJS ได้อย่างมีประสิทธิภาพ

โดยรวมแล้ว SvelteJS เป็นเฟรมเวิร์กที่ทรงพลังและมีประสิทธิภาพซึ่งคุ้มค่าแก่การเรียนรู้สำหรับนักพัฒนาที่ต้องการสร้างเว็บแอปพลิเคชันที่รวดเร็วและมีประสิทธิภาพด้วยไวยากรณ์ที่เรียบง่ายและโค้ดขั้นต่ำ

เริ่มต้นใช้งาน SvelteJS

1. การติดตั้ง Svelte.js โดยใช้ npm

หากต้องการติดตั้ง Svelte.js โดยใช้ npm คุณสามารถใช้คำสั่งต่อไปนี้:

npm create svelte@latest myapp
cd myapp
npm install
npm run dev

2. การใช้เทมเพลตเริ่มต้น:

อีกวิธีหนึ่งในการเริ่มต้นใช้งาน Svelte.js คือการใช้เทมเพลตเริ่มต้นที่มีทุกสิ่งที่คุณต้องการในการสร้างแอปพลิเคชัน Svelte.js เทมเพลตเริ่มต้นยอดนิยมอย่างหนึ่งคือเทมเพลต Svelte อย่างเป็นทางการ ซึ่งสามารถติดตั้งได้โดยใช้คำสั่งต่อไปนี้

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

คำสั่งนี้จะสร้างไดเร็กทอรีใหม่ชื่อ my-svelte-app และคัดลอกเทมเพลตเริ่มต้นลงไป จากนั้น คุณสามารถนำทางไปยังไดเร็กทอรีและเริ่มสร้างแอปพลิเคชัน Svelte.js ของคุณได้

นี่เป็นเพียงตัวอย่างเล็กๆ น้อยๆ ของวิธีการติดตั้ง Svelte.js ขึ้นอยู่กับการตั้งค่าโปรเจ็กต์และการกำหนดลักษณะของคุณ คุณอาจต้องปรับกระบวนการติดตั้งให้เหมาะสม

นอกจากนี้ยังมี ปลั๊กอินสำหรับเว็บบันเดิลหลักๆ ทั้งหมด เพื่อจัดการการคอมไพล์ Svelte

คุณสามารถรับข้อมูลเพิ่มเติมได้ https://svelte.dev/docs#getting-started

ข้อมูลพื้นฐานเกี่ยวกับ SvelteJS

ทำความเข้าใจกับโครงสร้างไฟล์ Svelte.js

คุณสามารถรับข้อมูลเพิ่มเติมเกี่ยวกับโครงสร้างโครงการ: https://kit.svelte.dev/docs/project-structure

ทำความเข้าใจกับส่วนประกอบของ Svelte:

ใน Svelte.js ส่วนประกอบคือส่วนประกอบสำคัญของแอปพลิเคชันของคุณ สิ่งเหล่านี้ถือได้ว่าเป็นโค้ดที่นำมาใช้ซ้ำได้ซึ่งห่อหุ้มฟังก์ชันการทำงานและสามารถประกอบเข้าด้วยกันเพื่อสร้างแอปพลิเคชันที่ซับซ้อนมากขึ้น

2. การทำงานกับระบบปฏิกิริยาของ Svelte:

Svelte.js ใช้ระบบรีแอกทีฟเพื่ออัปเดต UI โดยอัตโนมัติเมื่อข้อมูลมีการเปลี่ยนแปลง สิ่งนี้ช่วยให้คุณสร้างแอปพลิเคชันแบบไดนามิกและตอบสนองได้โดยไม่ต้องเขียนโค้ดการจัดการสถานะที่ซับซ้อน

<!-- Counter.svelte -->
<script>
 // Define a Svelte component
 let count = 0;

 function increment() {
  count += 1;
 }

 function decrement() {
  count -= 1;
 }
</script>

<!-- Define the HTML template for the component -->
<div class="counter">
 <button on:click={decrement}>-</button>
 <span>{count}</span>
 <button on:click={increment}>+</button>
</div>

<style>
 /* Define some styles for the component */
 .counter {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2em;
 }

 button {
  margin: 0 10px;
 }
</style>

3. การใช้ไวยากรณ์ของ Svelte:

Svelte.js มีไวยากรณ์ของตัวเองที่ใช้ในการกำหนดส่วนประกอบ เชื่อมโยงข้อมูล และสร้างองค์ประกอบ UI แบบไดนามิก การทำความเข้าใจวิธีใช้ไวยากรณ์ของ Svelte ถือเป็นสิ่งสำคัญเมื่อทำงานกับเฟรมเวิร์ก

<!-- TodoList.svelte -->
<script>
 // Define a Svelte component
 let todos = [
  { id: 1, text: 'Learn Svelte.js', completed: false },
  { id: 2, text: 'Build a Svelte app', completed: false },
  { id: 3, text: 'Deploy Svelte app to production', completed: false }
 ];

 function toggleCompletion(todo) {
  todos = todos.map((t) => {
   if (t.id === todo.id) {
    return {
     ...t,
     completed: !t.completed
    };
   } else {
    return t;
   }
  });
 }
</script>

<!-- Define the HTML template for the component -->
<div>
 <h1>My Todo List</h1>

 <ul>
  {#each todos as todo}
   <li class:selected={todo.completed} on:click={() => toggleCompletion(todo)}>
    {todo.text}
   </li>
  {/each}
 </ul>

 <p>{todos.filter((todo) => !todo.completed).length} items left to do</p>
</div>

<style>
 li {
  font-size: 18px;
  line-height: 1.5;
  padding: 8px;
  margin: 8px 0;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  background-color: #ffffff;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
 }

 li.selected {
  background-color: #d9d9d9;
  text-decoration: line-through;
 }

 li:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
 }
</style>

4. การเรนเดอร์แบบมีเงื่อนไขใน Svelte:

<script>
  let loggedIn = true;
</script>

{#if loggedIn}
  <p>Welcome back!</p>
{:else}
  <p>Please log in.</p>
{/if}

5. การจัดการสถานะด้วย Svelte:

ใน Svelte.js คุณสามารถจัดการสถานะแอปพลิเคชันได้โดยใช้ร้านค้าท้องถิ่นหรือทั่วโลก ร้านค้าในพื้นที่ใช้เพื่อจัดการสถานะภายในส่วนประกอบ ในขณะที่ร้านค้าส่วนกลางสามารถใช้เพื่อแบ่งปันสถานะระหว่างส่วนประกอบต่างๆ

<!-- App.svelte -->
<script>
 import { setContext } from 'svelte';
 import { writable } from 'svelte/store';
 import TodoList from '$lib//TodoList.svelte';

 const initialTodos = [
  { id: 1, text: 'Learn Svelte.js', completed: false },
  { id: 2, text: 'Build a Svelte app', completed: false },
  { id: 3, text: 'Deploy Svelte app to production', completed: false }
 ];

 const todos = writable(initialTodos);
 setContext('todos', todos);
</script>

<div class="main">
 <TodoList />
</div>
<!-- TodoList.svelte -->
<script>

 import { getContext } from 'svelte';

 const todos = getContext('todos');

 function toggleCompletion(todo) {
  todos.update((todos) => {
   return todos.map((t) => {
    if (t.id === todo.id) {
     return {
      ...t,
      completed: !t.completed
     };
    } else {
     return t;
    }
   });
  });
 }
</script>

<div>
 <h1>My Todo List</h1>
 <ul>
  {#each $todos as todo}
   <li class:selected={todo.completed} on:click={() => toggleCompletion(todo)}>
    {todo.text}
   </li>
  {/each}
 </ul>

 <p>{$todos.filter((todo) => !todo.completed).length} items left to do</p>
</div>

<style>
 ... // Same style with todos.
</style>

6. ภาพเคลื่อนไหวใน Svelte:

แอนิเมชันใน Svelte.js ช่วยให้นักพัฒนาสามารถเพิ่มเอฟเฟ็กต์ภาพแบบไดนามิกและน่าดึงดูดให้กับเว็บแอปพลิเคชันของตนได้ Svelte มีคำสั่ง transition ในตัวที่สามารถใช้ในการสร้างภาพเคลื่อนไหวและนำไปใช้กับองค์ประกอบตามสถานะ

คำสั่ง transition ช่วยให้นักพัฒนาสามารถกำหนดสไตล์เริ่มต้นและสิ้นสุดขององค์ประกอบ รวมถึงฟังก์ชันระยะเวลาและจังหวะเวลาของภาพเคลื่อนไหว Svelte ยังมีชุดการเปลี่ยนภาพที่สร้างไว้ล่วงหน้าซึ่งสามารถนำเข้าจากโมดูล svelte/transition เช่น fade, slide, fly และ scale

นอกจากคำสั่ง transition แล้ว Svelte ยังมีฟังก์ชัน animate ที่สามารถใช้เพื่อสร้างภาพเคลื่อนไหวที่กำหนดเองโดยใช้ JavaScript ฟังก์ชันนี้รับองค์ประกอบเพื่อสร้างภาพเคลื่อนไหว ออบเจ็กต์การกำหนดค่าภาพเคลื่อนไหว และฟังก์ชันเรียกกลับเพื่อให้ทำงานเมื่อภาพเคลื่อนไหวเสร็จสมบูรณ์

แอนิเมชันใน Svelte สามารถใช้เพื่อสร้างเอฟเฟกต์ง่ายๆ เช่น การซีดจางและการเลื่อน หรือเอฟเฟกต์ที่ซับซ้อนมากขึ้น เช่น การเลื่อนแบบพารัลแลกซ์และการเปลี่ยนรูปแบบ ด้วยไวยากรณ์ที่ใช้งานง่ายและความสามารถด้านแอนิเมชั่นอันทรงพลัง Svelte ทำให้การสร้างแอปพลิเคชั่นเว็บที่น่าทึ่งพร้อมเอฟเฟกต์ภาพที่หลากหลายเป็นเรื่องง่าย

<script>
 import { fade } from 'svelte/transition';

 let visible = true;

 function toggle() {
  visible = !visible;
 }
</script>

<button on:click={toggle}>Toggle</button>

{#if visible}
 <div transition:fade>
  <h1>Hello, world!</h1>
 </div>
{/if}

7. การเรนเดอร์ฝั่งเซิร์ฟเวอร์ใน Svelte:

การเรนเดอร์ฝั่งเซิร์ฟเวอร์ (SSR) สามารถปรับปรุงประสิทธิภาพและ SEO ของแอปพลิเคชัน Svelte.js ของคุณโดยเรนเดอร์ HTML เริ่มต้นบนเซิร์ฟเวอร์และส่งไปยังไคลเอนต์ ต่อไปนี้เป็นวิธีตั้งค่า SSR ใน Svelte.js:

ก. ติดตั้งแพ็คเกจ svelte-ssr และ svelte-nodeadapter:

npm install svelte-ssr svelte-nodeadapter

ข. สร้างไฟล์เซิร์ฟเวอร์ (เช่น server.js) ที่นำเข้าส่วนประกอบ Svelte ของคุณและตั้งค่ามิดเดิลแวร์ SSR:

const express = require('express');
const { createServer } = require('http');
const { createRenderFn } = require('svelte-ssr');
const { nodeAdapter } = require('svelte-nodeadapter');
const App = require('./App.svelte');

const app = express();
const server = createServer(app);
const render = createRenderFn(nodeAdapter);

app.use(express.static('public'));

app.get('*', (req, res) => {
  const { html, head } = render(App, { props: { /* props */ }, hydrate: true });
  res.send(`
    <!doctype html>
    <html lang="en">
      <head>
        ${head}
      </head>
      <body>
        <div id="app">${html}</div>
        <script src="/bundle.js"></script>
      </body>
    </html>
  `);
});

server.listen(3000, () => {
  console.log('Server started on port 3000');
});

ค. เรียกใช้ไฟล์เซิร์ฟเวอร์ของคุณ:

node server.js

สิ่งนี้จะเริ่มต้นเซิร์ฟเวอร์ที่ฟังบนพอร์ต 3000 และเรนเดอร์ส่วนประกอบ Svelte ของคุณบนเซิร์ฟเวอร์ เมื่อไคลเอนต์ร้องขอเพจ เซิร์ฟเวอร์จะส่ง HTML ที่เรนเดอร์ล่วงหน้าไปยังไคลเอนต์ ซึ่งสามารถเติมความชุ่มชื้นให้กับคอมโพเนนต์ Svelte และเพิ่มผู้ฟังเหตุการณ์ที่จำเป็นหรือการเชื่อมโยงข้อมูล

โปรดทราบว่าการเรนเดอร์ฝั่งเซิร์ฟเวอร์สามารถเพิ่มความซับซ้อนให้กับแอปพลิเคชันของคุณได้ ดังนั้นจึงควรชั่งน้ำหนักข้อดีเทียบกับความซับซ้อนที่เพิ่มเข้ามาก่อนตัดสินใจใช้ SSR นอกจากนี้ SSR อาจไม่จำเป็นสำหรับแอปพลิเคชันทุกประเภท ดังนั้นจึงควรพิจารณากรณีการใช้งานก่อนที่จะใช้ SSR ในแอปพลิเคชัน Svelte.js ของคุณ

8. ข้อควรพิจารณาเกี่ยวกับ SEO เมื่อใช้ Svelte:

การตั้งค่า SEO (การเพิ่มประสิทธิภาพกลไกค้นหา) มีความสำคัญต่อการรับประกันว่าเครื่องมือค้นหาสามารถจัดทำดัชนีและจัดอันดับเนื้อหาของแอปพลิเคชัน Svelte.js ของคุณได้อย่างเหมาะสม ข้อควรพิจารณาที่สำคัญบางประการในการเพิ่มประสิทธิภาพการตั้งค่า SEO เมื่อใช้ Svelte.js:

ก. ‹ชื่อ› และ ‹เมตา›

ทุกหน้าควรมีองค์ประกอบ <title> และ <meta name="description"> ที่เขียนไว้อย่างดีและไม่ซ้ำกันภายใน <svelte:head>

ข. ข้อมูลที่มีโครงสร้าง

ข้อมูลที่มีโครงสร้างคือมาร์กอัปประเภทหนึ่งที่ให้ข้อมูลเพิ่มเติมเกี่ยวกับเนื้อหาบนหน้าเว็บ ทำให้เครื่องมือค้นหาเข้าใจและจัดทำดัชนีเนื้อหาได้ง่ายขึ้น การใช้ข้อมูลที่มีโครงสร้างในแอปพลิเคชัน Svelte.js สามารถปรับปรุง SEO ของเว็บไซต์ได้โดยการให้ข้อมูลเพิ่มเติมเกี่ยวกับเนื้อหาและบริบทของเว็บไซต์แก่เครื่องมือค้นหา

มีหลายวิธีในการนำข้อมูลที่มีโครงสร้างไปใช้กับแอปพลิเคชัน Svelte.js แนวทางหนึ่งที่ได้รับความนิยมคือการใช้มาร์กอัป JSON-LD (JavaScript Object Notation for Linked Data) ซึ่งช่วยให้คุณสามารถฝังข้อมูลที่มีโครงสร้างลงใน HTML ของหน้าเว็บได้โดยตรง

หากต้องการใช้ JSON-LD ในแอปพลิเคชัน Svelte.js คุณสามารถสร้างส่วนประกอบแยกต่างหากสำหรับออบเจ็กต์ข้อมูลที่มีโครงสร้างแต่ละรายการ จากนั้นรวมส่วนประกอบนั้นในตำแหน่งที่เหมาะสมในเทมเพลตเพจของคุณ ตัวอย่างเช่น คุณอาจสร้างส่วนประกอบสำหรับผลิตภัณฑ์ แล้วรวมส่วนประกอบนั้นในหน้ารายละเอียดผลิตภัณฑ์

เมื่อสร้างส่วนประกอบข้อมูลที่มีโครงสร้างใน Svelte.js คุณสามารถใช้คำสั่ง @html ในตัวเพื่อแสดงมาร์กอัป JSON-LD ลงใน HTML ของเพจได้โดยตรง ตัวอย่างเช่น คุณอาจสร้างคอมโพเนนต์ Product ด้วยมาร์กอัป JSON-LD ต่อไปนี้:

<script>
  export let name;
  export let description;
  export let price;
  export let image;
</script>

<div class="product">
  <!-- product content -->
</div>

{@html `<!-- JSON-LD markup for product -->`}

เมื่อใช้คำสั่ง @html คุณจะฝังมาร์กอัป JSON-LD ลงในคอมโพเนนต์ Svelte.js ได้อย่างง่ายดาย ทำให้เพิ่มข้อมูลที่มีโครงสร้างลงในหน้าเว็บได้ง่ายขึ้น และปรับปรุง SEO ของเว็บไซต์ได้

ค. แผนผังไซต์

แผนผังไซต์ ช่วยให้เครื่องมือค้นหาจัดลำดับความสำคัญของหน้าเว็บภายในไซต์ของคุณ โดยเฉพาะอย่างยิ่งเมื่อคุณมีเนื้อหาจำนวนมาก

ดูข้อมูลเพิ่มเติมได้ที่ → https://kit.svelte.dev/docs/seo#manual-setup-structured-data

9. การทดสอบใน Svelte:

สมมติว่าคุณมีส่วนประกอบ Counter ที่แสดงจำนวนและมีปุ่มสำหรับเพิ่มและลดจำนวน:

<!-- Counter.svelte -->

<script>
  export let count = 0;

  function increment() {
    count += 1;
  }

  function decrement() {
    count -= 1;
  }
</script>

<div class="counter">
  <button on:click={increment}>+</button>
  <span>{count}</span>
  <button on:click={decrement}>-</button>
</div>

หากต้องการทดสอบส่วนประกอบนี้ คุณสามารถสร้างไฟล์ทดสอบชื่อ Counter.spec.js และใช้ไลบรารี @testing-library/svelte เพื่อเรนเดอร์และโต้ตอบกับส่วนประกอบนั้น นี่คือตัวอย่างไฟล์ทดสอบ:

// Counter.spec.js

import { render, fireEvent } from "@testing-library/svelte";
import Counter from "./Counter.svelte";

describe("Counter component", () => {
  it("displays the initial count", () => {
    const { getByText } = render(Counter, { count: 0 });
    expect(getByText("0")).toBeInTheDocument();
  });

  it("increments the count when the + button is clicked", async () => {
    const { getByText } = render(Counter, { count: 0 });
    const button = getByText("+");
    await fireEvent.click(button);
    expect(getByText("1")).toBeInTheDocument();
  });

  it("decrements the count when the - button is clicked", async () => {
    const { getByText } = render(Counter, { count: 1 });
    const button = getByText("-");
    await fireEvent.click(button);
    expect(getByText("0")).toBeInTheDocument();
  });
});

ในไฟล์ทดสอบนี้ เรานำเข้าฟังก์ชัน render และ fireEvent จาก @testing-library/svelte แล้วกำหนดการทดสอบสามรายการ:

• การทดสอบครั้งแรกจะตรวจสอบว่าส่วนประกอบแสดงจำนวนเริ่มต้นเป็น 0
• การทดสอบครั้งที่สองคลิกปุ่ม "+" และตรวจสอบว่าการนับเพิ่มขึ้นเป็น 1
• การทดสอบครั้งที่สามคลิกปุ่ม "-" และตรวจสอบว่าจำนวนลดลงเหลือ 0

หากต้องการรันการทดสอบ คุณสามารถใช้ Jest ได้โดยการรัน jest ในเทอร์มินัลของคุณ หากการทดสอบทั้งหมดผ่าน คุณจะเห็นผลลัพธ์ที่คล้ายกับตัวอย่างต่อไปนี้:

 PASS  ./Counter.spec.js
  Counter component
    ✓ displays the initial count (10 ms)
    ✓ increments the count when the + button is clicked (6 ms)
    ✓ decrements the count when the - button is clicked (3 ms)

Test Suites: 1 passed, 1 total
Tests:       3 passed, 3 total

บทสรุป

1. Svelte เป็นเฟรมเวิร์กเว็บแบบโต้ตอบที่รวบรวมโค้ดของคุณให้เป็น JavaScript ที่ได้รับการปรับให้เหมาะสมที่สุดในขณะสร้าง ส่งผลให้เว็บแอปพลิเคชันรวดเร็วและมีประสิทธิภาพ
2. แนวทางเชิงโต้ตอบของ Svelte ช่วยให้คุณสร้าง UI ที่ซับซ้อนด้วยโค้ดสำเร็จรูปที่น้อยที่สุด และไวยากรณ์ของเทมเพลตก็ใช้งานง่ายและเรียนรู้ได้ง่าย
3. ระบบการจัดการสถานะของ Svelte ช่วยให้คุณสามารถจัดการและอัปเดตสถานะของแอปพลิเคชันของคุณในลักษณะที่คาดการณ์และปรับขนาดได้
4. Svelte นำเสนอคุณลักษณะในตัวจำนวนหนึ่ง รวมถึงการจัดองค์ประกอบ การเรนเดอร์แบบมีเงื่อนไข และภาพเคลื่อนไหว ซึ่งสามารถช่วยคุณสร้างอินเทอร์เฟซผู้ใช้แบบโต้ตอบที่สมบูรณ์ได้
5. Svelte นำเสนอความสามารถ SEO ที่ดีตั้งแต่แกะกล่อง รวมถึงการเรนเดอร์ฝั่งเซิร์ฟเวอร์และไฮเดรชั่นอัตโนมัติ ทำให้ง่ายต่อการปรับแต่งแอปพลิเคชันของคุณสำหรับเครื่องมือค้นหา
6. ระบบปฏิบัติการที่มีน้ำหนักเบาและรันไทม์ที่น้อยที่สุดของ Svelte ทำให้เป็นตัวเลือกที่ยอดเยี่ยมสำหรับการสร้างแอปพลิเคชันที่รวดเร็วและมีน้ำหนักเบา โดยเฉพาะสำหรับอุปกรณ์เคลื่อนที่
7. Svelte ง่ายต่อการเรียนรู้และใช้งาน ทำให้เป็นตัวเลือกที่ยอดเยี่ยมสำหรับนักพัฒนาเว็บทั้งใหม่และมีประสบการณ์ที่ต้องการสร้างเว็บแอปพลิเคชันที่รวดเร็วและมีประสิทธิภาพ

โดยรวมแล้ว Svelte นำเสนอวิธีที่มีประสิทธิภาพและใช้งานง่ายในการสร้างเว็บแอปพลิเคชันที่รวดเร็วและโต้ตอบได้ ด้วยขนาดที่เบา ฟีเจอร์ในตัว และความสามารถด้าน SEO ทำให้เป็นตัวเลือกที่ยอดเยี่ยมสำหรับโครงการพัฒนาเว็บไซต์ที่หลากหลาย

ลิงค์ประวัติของฉัน

Github

ลิงค์ดิน

ทวิตเตอร์