Bắt đầu với Svelte 3

Khi xây dựng các ứng dụng bằng JavaScript, hiệu suất cao và khả năng thâm nhập sẽ luôn là mấu chốt của các quyết định của các nhà phát triển phần mềm. Svelte là một khung thành phần hiệu suất cao cho mã mệnh lệnh.

Svelte cũng mang đến một giao diện user giàn giáo khác cho bảng. Trong khi React và Vue thực hiện hầu hết công việc của chúng trong trình duyệt, Svelte chạy trong thời gian xây dựng bằng cách chuyển đổi thành phần của ứng dụng thành mã cập nhật DOM.

Hướng dẫn này sẽ trình bày những kiến thức cơ bản về Svelte và cách bạn có thể khai thác các tính năng của nó để xây dựng các ứng dụng hiệu suất cao.

Bước 1 - Xây dựng một ứng dụng Svelte

Điều đầu tiên cần làm khi xây dựng một ứng dụng Svelte là tích hợp Svelte với một công cụ giàn giáo dự án. Hướng dẫn này sẽ sử dụng degit .

Điều hướng đến terminal của bạn và chạy lệnh sau để tạo một folder mới cho ứng dụng của bạn:

npx degit sveltjs/template my-svelte-app

Di chuyển vào folder mới:

cd my-svelte-app

Nếu bạn đang sử dụng NPM , hãy cài đặt các phụ thuộc bằng lệnh sau:

npm install

Nếu bạn đang sử dụng Yarn , hãy cài đặt các phần phụ thuộc bằng lệnh sau:

yarn install

Chạy lệnh sau để chạy một server phát triển local nơi bạn có thể xem ứng dụng của bạn khi bạn xây dựng:

npm run dev

Thao tác này khởi động server trên http://localhost:5000 .

Thư mục dự án Svelte

Có một vài file trong folder dự án đã được tạo trong quá trình dàn giáo. Hướng dẫn này sẽ trình bày chi tiết về các file là mấu chốt của ứng dụng:

package.json : Đây là nơi liệt kê các gói mà dự án phụ thuộc vào. Cần lưu ý không giống như React và Vue, file package.json của package.json chỉ liệt kê các phần phụ thuộc của nhà phát triển và không có phần phụ thuộc thông thường, tiêu chuẩn nào mà bạn có thể quen thấy trong hai khung nói trên. Lý do là khung biên dịch mã của bạn sang Vanilla JavaScript khi xây dựng để production .
main.js : Đây là điểm nhập cho tất cả JavaScript trong ứng dụng của bạn. Các thành phần được khởi tạo tại đây.
App.svelte : Đây là thành phần đầu tiên của ứng dụng của bạn. Tương tự như cách các thành phần Vue được tạo bằng phần mở rộng .vue . Nó chứa tất cả logic, kiểu dáng và đánh dấu cần thiết để một thành phần hoạt động.
index.html : Trong quá trình phát triển, folder public của ứng dụng của bạn sẽ chứa một version chưa được hợp nhất của gói ứng dụng của bạn. index.html là nơi gói đó được thực thi.

Bước 2 - Tạo một thành phần Svelte

Các thành phần là cơ bản của mọi ứng dụng Svelte. Chúng được viết thành các file .svelte , sử dụng một tập hợp siêu HTML. .svelte có hai phần:

<script> : Phần này chứa tất cả JavaScript và logic chạy ứng dụng.
<style> : Cái này chứa các kiểu CSS cho ứng dụng. markup: Nó chứa HTML markup, nó tương tự như viết JSX trong React.

Khối mã dưới đây là một ví dụ về thành phần Svelte trông như thế nào:

<script>   let framework = 'Svelte'; </script>  <style>   h1 {        color: blue;        font-family: 'Open Sans';        font-size: 2em;     } </style>  <h1>This is a {framework} Component.</h1>  Result // This is a Svelte Component.

Bước 3 - Khám phá các khai báo phản ứng

Svelte có một tính năng được gọi là khai báo phản ứng . Hầu hết khi xây dựng một ứng dụng, nó sẽ hơi lớn. Các phần của trạng thái của một thành phần cần được gọi từ các phần khác và được tính toán lại nếu chúng thay đổi. Đây chính xác là những gì các khai báo phản ứng được sử dụng. Kiểm tra khối mã bên dưới:

<script>   let car = 'Mercedes'; $: carMakeSedan = car + ' E350'; $: carMakeSuv = car + ' G500'; </script>  <p> The {car} you want is a {carMakeSedan}.</p> <p> If you would like something more expensive, go for the {carMakeSuv}.</p>   Result // The Mercedes you want is a Mercedes E350. // If you would like something more expensive, go for the Mercedes G500.

Dòng ba và bốn yêu cầu Svelte chạy lại mã này khi nào bất kỳ giá trị được tham chiếu nào thay đổi. Giá trị phải tương đối khi nó cần được tham chiếu nhiều lần hoặc nếu tồn tại các giá trị khác phụ thuộc vào nó.

Bước 4 - Tạo và khai báo thuộc tính

Khi xây dựng một ứng dụng, cuối cùng bạn cần phải truyền dữ liệu từ thành phần này sang thành phần khác ( còn gọi là thành phần mẹ đến thành phần con ). Để làm được điều đó, bạn cần khai báo các thuộc tính với các đạo cụ . Svelte hoàn thành điều này bằng cách sử dụng từ khóa export . Hãy xem mẫu mã bên dưới để biết ví dụ:

 // Car.svelte <script>   export let carMake; </script>  <p>You ordered a {carMake}</p>

Điều hướng đến thành phần mẹ của App.svelte :

 // App.svelte <script>   import Mercedes from './Car.svelte';   import BMW from './Car.svelte';   import Jaguar from './Car.svelte'; </script>  <Mercedes carMake={' Mercedes'}/> <BMW carMake={' BMW'}/> <Jaguar carMake={' Jaguar'}/>  // You ordered a Mercedes // You ordered a BMW // You ordered a Jaguar

Ngoài ra còn có một tùy chọn để chỉ định các giá trị mặc định. Trong ví dụ Car.svelte bên dưới, bạn có thể chỉ định giá trị mặc định cho carMake :

 //Car.svelte <script>   export let carMake = 'Mercedes'; </script>  <p>You ordered a {carMake}</p>

Nếu sau đó bạn không thể khởi tạo thành phần bằng carMake , nó sẽ trở về giá trị mặc định:

 //App.svelte <script>   import Mercedes from './Car.svelte'; </script>  <Mercedes carMake={' Mercedes'}/> <Mercedes />  // You ordered a Mercedes // You ordered a Mercedes

Bước 5 - Khám phá logic và ràng buộc

Một đặc điểm cụ thể của JSX trong React là nó không có khả năng chứa các câu lệnh điều kiện. Hầu hết các trường hợp cần logic như vậy, nó thường được thay thế bằng các toán tử bậc ba hoặc một số cách giải quyết khác. Mảnh dẻ có khả năng có điều kiện làm cho đánh dấu bằng cách gói nó trong một if khối. Kiểm tra mẫu mã dưới đây:

 <script>   let luggage = { checkedIn: false };    function toggle() {     luggage.checkedIn = !luggage.checkedIn;   } </script>  {#if luggage.checkedIn}   <button on:click={toggle}>     Luggage is Checked Out   </button> {/if}  {#if !luggage.checkedIn}   <button on:click={toggle}>     Luggage is Checked In   </button> {if}

Nút thay đổi trạng thái "đăng ký" khi được nhấp

Tương tự như các framework như React, stream dữ liệu trong Svelte là từ trên xuống. Các thành phần cha đặt thuộc tính trên các thành phần con, nhưng không phải ngược lại. Trong Svelte, bạn có thể giải quyết vấn đề này bằng cách sử dụng chỉ thị bind: value . Kiểm tra mẫu mã dưới đây:

 <script>   let framework = 'Svelte'; </script>  <input bind:value={framework}>   <p>{framework} is awesome!</p>

Với điều này, không chỉ các thay đổi đối với giá trị của framework cập nhật giá trị của input , mà các thay đổi đối với input cũng sẽ cập nhật framework .

Văn bản trên trang đang được cập nhật khi user nhập vào hộp văn bản.

Kết luận

Svelte có thể vẫn đang trong giai đoạn đầu, nhưng nó cho thấy rất nhiều tiềm năng và hứa hẹn. Bài đăng này là một bài giới thiệu, vì vậy vẫn còn rất nhiều điều mà bạn có thể hoàn thành bằng cách sử dụng Svelte. Bạn có thể tìm hiểu thêm về Svelte bằng cách xem lại tài liệu chính thức của họ

Tags:

Các tin liên quan