Avalist

มาทำความรู้จักกับ .NET Aspire

dotnet aspire
ในยุคปัจจุบัน การพัฒนาเว็บแอปพลิเคชันต้องการเครื่องมือและเทคโนโลยีที่มีประสิทธิภาพสูง และสามารถปรับตัวได้ตามความต้องการของผู้ใช้งานอย่างรวดเร็ว ถ้าใครเคยเขียน React มาก่อนน่าจะรู้จัก CSS เฟรมเวิร์คอยู่ค่ายหนึ่งที่ชื่อ Tailwind แต่ในบทความนี้เราจะไม่ได้พูดถึง React แต่จะเป็นการนำเอา Tailwind มาใช้กับเฟรมเวิร์คของอีกค่ายที่ชื่อ Blazor ซึ่งก็เป็นอีกเทคโนโลยี่ที่ตอบโจทย์ได้เป็นอย่างดี
มาทำความรู้จักกับ .NET Aspire

Blazor เป็นเฟรมเวิร์คการพัฒนาเว็บที่พัฒนาโดย Microsoft ซึ่งช่วยให้นักพัฒนาสามารถเขียนโค้ด C# ทั้งบนฝั่งเซิร์ฟเวอร์และไคลเอนต์ได้ในโปรเจคเดียวกัน Blazor ทำให้การพัฒนาเว็บแอปพลิเคชันกลายเป็นเรื่องง่ายและสะดวกยิ่งขึ้น โดยไม่ต้องพึ่งพา JavaScript มากเท่าที่เคย

Tailwind CSS เป็น CSS framework แบบ Utility-First ที่ให้ความยืดหยุ่นสูงในการออกแบบและตกแต่งหน้าเว็บ นักพัฒนาสามารถใช้คลาสของ Tailwind เพื่อควบคุมสไตล์ขององค์ประกอบต่างๆ ได้อย่างละเอียดและรวดเร็วโดยไม่ต้องเขียน CSS เอง ทำให้สามารถสร้างดีไซน์ที่ซับซ้อนและตอบสนองได้อย่างมีประสิทธิภาพ

ในบทความนี้ ผมจะลองเอาสองเทคโนโลยีนี้รวมเข้าด้วยกัน เพื่อสร้างเว็บแอปพลิเคชันที่ทรงพลังและยืดหยุ่นสูง โดยเราจะเริ่มต้นจากการติดตั้งและตั้งค่า Tailwind CSS ในโปรเจค Blazor และต่อด้วยการใช้งานคลาสของ Tailwind ใน Blazor Components เพื่อสร้าง UI ที่ตอบสนองและสวยงาม นอกจากนี้เรายังจะดูวิธีการปรับแต่ง Tailwind CSS ให้ตรงตามความต้องการของโปรเจค และการจัดการ State ภายใน Blazor Components

เนื่องจาก Tailwind ทำงานโดยการสแกนไฟล์ HTML หรือ Java component ที่เราเขียน และสร้าง CSS ออกมาจากคลาสที่เราใช้เก็บเป็น static ไฟล์ ทำให้ไฟล์ CSS ที่สร้างขึ้นมีขนาดใหญ่มาก ดังนั้นเราจะต้องใช้ PostCSS และ PurgeCSS เพื่อลดขนาดของไฟล์ CSS ที่สร้างขึ้น และเพิ่มประสิทธิภาพในการโหลดหน้าเว็บ

แต่ในทางกลับกันใน Blazor ไม่ได้ถูกออกแบบมาให้ใช้งาน node หรือ npm เหมือนกับค่ายอื่น ดังนั้นการเอา Tailwind มาใช้ค่อนจำเป็นต้องมีการแก้ไขโปรเจคอยู่พอสมควร

เตรียมตัวกันก่อน

ก่อนที่จะเริ่มทำกันที่เครื่องเราจะต้องมีการติดตั้ง node และ npm เพื่อใช้ install Tailwind และ PostCSS

  • Blazor Web App และ .NET core 8.0
  • Node 18 หรือสูงกว่านั้น

อย่างแรกลองสร้างโปรเจค Blazor ใหม่ โดยใช้คำสั่ง

	   
dotnet new blazor -o BlazorTailwind

BlazorTailwind เป็นชื่อโปรเจคที่เราจะใช้ในตัวอย่างนี้แต่จะตั้งชื่ออะไรก็ได้ขึ้นอยู่กับความต้องการ หลังจากนั้นเข้าไปในโฟลเดอร์โปรเจค

	   
cd BlazorTailwind

จากเว็บแนะนำของ Tailwind เราจะทำการติดตั้ง Tailwind และ PostCSS โดยใช้คำสั่ง

	   
npm init -y
npm i -D tailwindcss postcss autoprefixer
npx tailwindcss init

หลังจากขั้นตอนนี้เสร็จเราจะได้ไฟล์ tailwind.config.js มา ซึ่งเป็นไฟล์ที่เราจะใช้ปรับแต่ง Tailwind ตามความต้องการของโปรเจค โดยขั้นตอนนี้เราต้องมีการระบุ path ของไฟล์ที่เราจะใช้ Tailwind สแกนดังนี้

	   
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./Components/**/*.{razor,css}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

หลังจากนั้นเราจะต้องสร้างไฟล์ postcss.config.js ขึ้นมา และใส่โค้ดดังนี้

	   
module.exports = {
  plugins: {
	tailwindcss: {},
	autoprefixer: {},
  },
}

เปิดโปรเจคBlazor ขึ้นมาด้วย Visual Studio Code หรือ Visual Studio โดยปกติแล้วในเทมเพลทจะมีการสร้างไฟล์ wwwroot/css/app.css ให้เราอยู่แล้วแต่เนื่องจากในบทความนี้เราจะใช้ Tailwind แทนการเขียน CSS ดังนั้นเราจะทำการแก้ไขไฟล์โดยระบุ

	   
@tailwind base;
@tailwind components;
@tailwind utilities;

ปกติแล้ว Blazor จะมีการลง Bootstrap มาให้เป็นค่าเริ่มต้น ดังนั้นเราจะต้องทำการลบ Bootstrap โดยการลบไฟล์ wwwroot/css/bootstrap/bootstrap.min.css หรือแก้ App.razor ให้ไม่มีการเรียกใช้ Bootstrap ออก

มาถึงขั้นตอนนี้หลายคนอาจจะสงสัยว่าแล้วมันจะนำมาเรียกใช้กับ Blazor ได้อย่างไร อย่างที่เกริ่นก่อนหน้านี้ว่า Blazor ไม่ได้ถูกออกแบบมาให้ใช้งาน node หรือ npm ดังนั้นเราจะต้องทำการแปลงไฟล์ CSS ที่เราสร้างขึ้นมาให้เป็นไฟล์ static โดยใช้คำสั่ง

	   
npx tailwind -i wwwroot/app.css -o wwwroot/tailwind-app.css --minify

คำสั่งนี้ใชั้สำหรับทำการ compile และ extract Tailwind css โดยจะสร้างไฟล์ที่ชื่อ tailwind-app.css เราสามารถทำการลดขนาดของ css ไฟล์โดยการระบุพารามิเตอร์ --minify

แต่โดยทั่วไปผมจะนิยมเรียกผ่าน short cut command ของตัว npm config โดยการเพิ่มตามตัวอย่างด้านล่างในไฟล์ package.json

	   
{
  "name": "blazortailwind",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build:css": "tailwind build -i ./wwwroot/app.css -o ./wwwroot/site.css"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "autoprefixer": "^10.4.19",
    "postcss": "^8.4.39",
    "tailwindcss": "^3.4.4"
  }
}

พอถึงขั้นตอนนี้เราจะสามารถคอมไพล์ตัว Tailwind css โดยเรียกใช้ผ่าน command npm run build:css แต่ในการทำงานจริงการที่เราจะต้องมารัน command npm ทุกครั้งก็ไม่ค่อยสะดวกโดยปกติผมจะมีการทำ MSBuild โดยให้ไปเรียก node ทุกครั้งตอนที่เรามีการ compile แอพ โดยการแก้ไข script ในไฟล์ .csproj ให้เรียกใช้ script ที่เราสร้างขึ้นมา

	   
  <Target Name="CheckNpm" BeforeTargets="BuildCSS">
	<Exec Command="npm -v" ContinueOnError="true">
		<Output TaskParameter="ExitCode" PropertyName="ErrorCode" />
	</Exec>
	<Error Condition="'$(ErrorCode)' != '0'" Text="Please install NPM to build this project" />
  </Target>
  <Target Name="BuildCSS" BeforeTargets="Compile">
	<Exec EnvironmentVariables="NODE_ENV=production" Command="npm run build:css" />
  </Target>

ทีนี้ก็เรียบร้อยทุกครั้งที่มีการ build หรือ compile โปรเจค Blazor ไฟล์ CSS จะถูก compile ให้อัตโนมัติและเราสามารถเรียกใช้ได้เลย

สร้าง Blazor Components และใช้ Tailwind CSS

ผ่านขั้นตอนนี้แล้วเราจะลองเปลี่ยน css ที่เราใช้ใน Blazor มาใช้ Tailwind แทน โดยการแก้ไขไฟล์ App.razor เพิ่ม Tailwind css ที่เราสร้างได้ตอน compile ใส่ลงไป

	   
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <base href="/" />

    <!-- css from tailwind compiled -->
    <link rel="stylesheet" href="tailwind-app.css" />
    <link rel="stylesheet" href="BlazorTailwind.styles.css" />
    <link rel="icon" type="image/png" href="favicon.png" />
    <HeadOutlet />
</head>

<body>
    <Routes />
    <script src="_framework/blazor.web.js"></script>
</body>

</html>

ในหน้า Home.razor หรือหน้าอื่นๆ เราสามารถใช้ Tailwind ได้เลย โดยการเพิ่มคลาสที่เราต้องการใช้เข้าไป

	   
<h1 class="text-red-800">Hello, world!</h1>

หลังจากนั้นเราลอง compile โปรเจคแล้วเปิดหน้าเว็บดูจะเห็นว่าเราหน้าที่เราเรียกเปลี่ยนไปเป็นสีแดงเรียบร้อยตามตัวอย่างด้านล่าง

tailwind-output

สรุป

จากตัวอย่างที่ผ่านมาเราได้เห็นว่าการใช้ Tailwind กับ Blazor สามารถทำได้ง่ายๆ และสามารถปรับแต่งได้ตามความต้องการของโปรเจค โดยไม่ต้องเขียน CSS ให้เยอะมาก และยังสามารถปรับแต่งได้ตามความต้องการของโปรเจคยิ่งเหมาะสำหรับคนที่ไม่อยากสร้าง style แยก เพราะว่าจากที่ผมลองมาก็สามารถช่วยให้เขียนโปรแกรมได้เร็วกว่าปกติจริงๆ แต่ทั้งนี้ทั้งนั้นก็อาจจะต้องเรียนรู้หลักการแล้วพื้นฐานของการใช้งาน Tailwind ก่อนจะได้ใช้งานได้เต็มประสิทธิภาพ