Sử dụng Svelte trong dự án ASP.NET Core

Nếu bạn là một độc giả thường xuyên của blog này, bạn sẽ biết rằng tôi là một nhà phát triển web. Tôi yêu thích mọi thứ về web và khả năng mang lại trải nghiệm phong phú cho người dùng.

Lựa chọn công nghệ của tôi chủ yếu là ASP.NET Core. Tuy nhiên, tôi cố gắng và áp dụng các lựa chọn công nghệ mang lại cho tôi cơ hội thành công quan trọng nhất.

Điều đã thu hút tôi đến với VueJS cũng chính là điều đã thu hút tôi đến với Svelte. Khả năng tạo các component mà các nhà phát triển có thể sử dụng khi cần thiết. Áp dụng Svelte không có nghĩa là chúng ta phải từ bỏ những điểm mạnh của ASP.NET Core.

Bài viết này sẽ giới thiệu cho các bạn những điều cơ bản về việc thiết lập một dự án ASP.NET Core để sử dụng các component JavaScript phía máy khách của Svelte.

Chúng ta sẽ thấy rằng chúng ta có thể bắt đầu sử dụng các component nhỏ trong các trang Razor của mình với nỗ lực tối thiểu và mang lại trải nghiệm người dùng phong phú.

Svelte là gì?

Giống như React và Vue, Svelte là một cách tiếp cận để xây dựng giao diện người dùng bằng JavaScript hoặc TypeScript. Không giống như các khung công tác khác, Svelte nhấn mạnh việc thực hiện phần lớn công việc tại thời điểm biên dịch và giảm bớt nhu cầu xử lý của máy khách.

Trong khi các framework truyền thống phụ thuộc vào các kỹ thuật đặc biệt như DOM ảo rất tốn kém, Svelte hoạt động bằng cách cập nhật DOM khi ứng dụng thay đổi trạng thái.

Những người quen thuộc với các framework khác sẽ thấy trải nghiệm Svelte khá giống nhau. Svelte có một quy trình xây dựng bằng cách sử dụng một trình gói module có tên là Rollup. Ngoài ra, các nhà phát triển viết các component trong các tệp có hậu tố là .svelte.

<script>
	let name = 'world';
</script>

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

Svelte có một thư viện ví dụ tuyệt vời cho người mới bắt đầu học cách triển khai các component. Trong thư viện mẫu, tìm hiểu kiến ​​thức cơ bản về cấu trúc một thành phần, thêm khả năng phản ứng, chấp nhận các thuộc tính bên ngoài và xử lý logic khả năng hiển thị. Đó là một nơi tuyệt vời để bắt đầu hoặc làm mới kiến ​​thức Svelte hiện có.

Đối với trường hợp sử dụng cụ thể của tôi, Svelte là một cách tuyệt vời để xây dựng các component độc lập mà tôi có thể biên dịch và chia sẻ trên nhiều dự án.

Chúng ta có thể tham chiếu các component đã được biên dịch mà chúng ta tạo trong HTML giống như bất kỳ thư viện JavaScript nào khác. Bản chất có thể chia sẻ của Svelte làm cho điều này trở nên hoàn hảo cho các hệ thống thiết kế và thư viện component.

Thiết lập dự án ASP.NET Core

Trước tiên, chúng ta cần bắt đầu với một ứng dụng web ASP.NET Core. Để thực hiện việc này, chúng ta có thể sử dụng IDE của mình để tạo một ứng dụng web mới hoặc chạy lệnh dotnet CLI sau đây.

> dotnet new webapp -o SvelteApp

Khi chúng ta đã tạo giải pháp, chúng ta có thể thêm tất cả các tệp node cần thiết.

Package.JSON và NPM Package

Đầu tiên, hãy thêm một tệp package.json vào thư mục gốc của dự án web của chúng ta. Chúng ta cần bổ sung bốn thành phần phụ thuộc vào devDependencies trong tệp package.json của chúng ta: svelte, rollup, @rollup/plugin-node-resolve, và rollup-plugin-svelte. Chúng ta cũng sẽ cấu hình lệnh build script của chúng ta.

{
  "name": "SvelteApp",
  "version": "1.0.0",
  "scripts": {
    "build": "rollup -c rollup.config.js"
  },
  "dependencies": {},
  "devDependencies": {
    "@rollup/plugin-node-resolve": "^11.2.0",
    "rollup": "^2.39.0",
    "rollup-plugin-svelte": "^7.1.0",
    "svelte": "^3.32.3"
  }
}

Chúng ta có thể đã nhận thấy một tham chiếu đến tệp rollup.config.js. Chúng ta sẽ thêm tệp này trong phần tiếp theo.

Cấu hình Rollup cho Svelte và ASP.NET Core

Đầu tiên chúng ta hãy xem qua toàn bộ tệp rollup.config.js. Sau đó, tôi sẽ giải thích các phần mà nhà phát triển có thể muốn thay đổi.

import svelte from 'rollup-plugin-svelte';
import resolve from '@rollup/plugin-node-resolve';

export default {
    // This `main.js` file we wrote
    input: 'wwwroot/js/main.js',
    output: {
        // The destination for our bundled JavaScript
        file: 'wwwroot/js/build/bundle.js',
        // Our bundle will be an Immediately-Invoked Function Expression
        format: 'iife',
        // The IIFE return value will be assigned into a variable called `app`
        name: 'app',
    },
    plugins: [
        svelte({
            // Tell the svelte plugin where our svelte files are located
            include: 'wwwroot/**/*.svelte',
            emitCss: false,
            compilerOptions: {
                customElement: true
            }
        }),
        // Tell any third-party plugins that we're building for the browser
        resolve({ browser: true }),
    ]
};

Chúng ta cần sửa đổi input trỏ đến tệp main.js của chúng ta được tìm thấy bên trong thư mục wwwroot trong ứng dụng ASP.NET Core của chúng ta.

Lựa chọn quan trọng tiếp theo là giá trị của output. Ở đây chúng ta cần thay đổi giá trị của fileđể trỏ đến một tệp đầu ra. Trong trường hợp của chúng ta, chúng ta sẽ tạo một tệp trong một thư mục wwwroot/js/build.

Cuối cùng, trường plugins yêu cầu chúng ta cho phép bộ xử lý Svelte. Hãy xem xét từng dòng trong khối này.

• includelà một bộ lọc đường dẫn để tìm tất cả các tệp .svelte.
• Giá trị của emitCss là falseduy trì định nghĩa kiểu CSS trong các tập tin JavaScript. Svelte có thể tạo các tệp .cssđể xử lý hậu kỳ. Chúng ta không thực hiện bất kỳ xử lý hậu kỳ nào trong trường hợp này.
• compilerOptionscho phép chúng ta tạo các component độc lập mà chúng ta có thể sử dụng trong các trang Razor của mình. Chúng ta có thể chọn khi nào và ở đâu để thêm các component Svelte để nâng cao trải nghiệm người dùng.

Lệnh biên dịch ASP.NET Core

Chúng ta có thể sửa đổi tệp .csproj của chúng ta để chạy lệnh biên dịch Rollup trên mọi bản build. Trong tệp .csproj, chúng ta có thể thêm thẻ Target như sau.

<Project Sdk="Microsoft.NET.Sdk.Web">

    <PropertyGroup>
        <TargetFramework>net6.0</TargetFramework>
    </PropertyGroup>

    <Target Name="Rollup" BeforeTargets="Build">
        <Exec Command="npm run build" />
    </Target>

</Project>

Viết một component Svelte

Chúng ta đã xác định vị trí của các component Svelte của chúng ta trong tệp rollup.config.js ở phần trước. Hãy thêm một tệp App.sveltemới vào thư mục js của chúng ta. Chúng ta sử dụng phần tử <svelte:options>, cho phép chúng ta định nghĩa thẻ HTML của svelte-app.

<svelte:options tag="svelte-app" />
<script>
    export let name;
    export let id;
</script>

<main>
    <h1 id="{id}">Hello {name}!</h1>
</main>

<style>
    h1 {
        font-size: 5em;
    }
</style>

Chúng ta cũng cần thêm hoặc sửa đổi tệp main.js hiện có trong cùng một thư mục js. Thêm dòng sau vào dòng đầu tiên. Chúng ta không cần sử dụng import biến App; chỉ cần Rollup tìm và tạo tệp Svelte của chúng ta.

import App from './App.svelte'

Thêm bundle vào Layout.cshtml

Ở cuối tệp _Layout.cshtml, chúng ta sẽ cần tham chiếu đến bundle mới của Rollup.

<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<!-- added the bundle to the end of scripts -->
<script src="~/js/build/bundle.js" asp-append-version="true"></script>

Bây giờ chúng ta đã sẵn sàng để sử dụng các component Svelte trong bất kỳ tệp Razor nào.

Sử dụng các component Svelte trong Razor View

Bên trong Razor View, hãy thêm phần tử HTML mới, phần tử svelte-appmà chúng ta đã định nghĩa trong tệp App.svelte.

@page
@model IndexModel
@{
    ViewData["Title"] = "Home page";
}

<svelte-app id="name" name="Trung Nguyen"></svelte-app>
<svelte-app id="address" name="HCMC"></svelte-app>

Svelte sẽ tự động lấy bất kỳ thuộc tính nào trên một phần tử và khớp chúng với bất kỳ thuộc tính nào được định nghĩa trong component. Khi biên dịch và chạy project, chúng ta có thể thấy kết quả của các phần tử được kết xuất của chúng ta.

Phần kết luận

Svelte là một lựa chọn thú vị cho các nhà phát triển ASP.NET Core. Nó cho phép chúng ta xây dựng các component phía máy khách phong phú mà chúng ta có thể biên dịch một lần và chia sẻ ở mọi nơi.

Chúng ta không cần phải hy sinh những điểm mạnh của nền tảng công nghệ hiện tại của mình để áp dụng cách tiếp cận tất cả hoặc không có gì. Svelte là một công cụ hoàn hảo để kết nối quy trình làm việc của các nhà phát triển UX, FE và BE.

Tôi hy vọng bạn thấy bài viết này hữu ích và nếu bạn đang sử dụng Svelte, vui lòng để lại bình luận bên dưới. Tôi rất muốn nghe từ bạn.