reveal.js

# แนวโน้มเทคโนโลยีเว็บในอนาคต: WebAssembly, AI-Assisted Dev

Lesson 4 - โปรเจกต์สุดท้าย Full-Stack Angular Application

**Future Web Technology** คือแนวโน้มและเครื่องมือที่กำลังเปลี่ยนวิธีพัฒนาเว็บ เช่น Angular Signals, Standalone Components, WebAssembly, AI-Assisted Development, Edge Computing และ PWA

---

## Timeline/ประวัติศาสตร์

<pre class="mermaid">
%%{init: {"theme": "base", "themeVariables": {"primaryColor": "#fabd2f", "primaryTextColor": "#282828", "primaryBorderColor": "#b57614", "lineColor": "#7c6f64", "secondaryColor": "#83a598", "tertiaryColor": "#b8bb26", "background": "#fbf1c7", "mainBkg": "#ebdbb2", "fontFamily": "Tahoma, sans-serif"}}}%%
flowchart LR
 subgraph Era1["ยุค Traditional SPA"]
 A["NgModule + CSR โครงสร้างเดิม"]
 end
 subgraph Era2["ยุค Modern Angular"]
 B["Standalone Components ลด boilerplate"]
 C["Signals reactive primitive"]
 end
 subgraph Era3["ยุค High Performance & AI"]
 D["WebAssembly รัน Rust/C++"]
 E["AI-Assisted Dev ช่วยเขียน/รีวิวโค้ด"]
 F["Edge + PWA ใกล้ผู้ใช้และ offline"]
 end
 A --> B --> C --> D --> E --> F
</pre>

---

## แนวโน้มสำคัญ

- **Angular Signals** เป็น Reactive Primitives ใหม่ใน Angular v16+
- **Standalone Components** ลดการพึ่งพา NgModule
- **WebAssembly (WASM)** รัน C/C++/Rust ใน Browser ด้วยความเร็วสูง
- **AI-Assisted Development** เช่น GitHub Copilot, Claude, ChatGPT ช่วยเขียน อธิบาย และรีวิวโค้ด
- **Edge Computing** deploy โค้ดใกล้ผู้ใช้ เช่น Cloudflare Workers
- **Progressive Web App (PWA)** ทำให้เว็บทำงานคล้าย Native App เช่น offline และ install ได้

---

## ตารางเทคโนโลยีอนาคต

| เทคโนโลยี | แก้ปัญหา | ตัวอย่างใช้งาน |
|---|---|---|
| Signals | state reactive อ่านง่าย | dashboard, form state |
| Standalone | ลด module boilerplate | component ใหม่ |
| WASM | งานคำนวณหนัก | image processing |
| AI Coding | เพิ่ม productivity | generate test, review |
| Edge | latency ต่ำ | API ใกล้ผู้ใช้ |
| PWA | offline/installable | learning app |

---

## Mermaid Diagram: Future Stack

<pre class="mermaid">
%%{init: {"theme": "base", "themeVariables": {"primaryColor": "#fabd2f", "primaryTextColor": "#282828", "primaryBorderColor": "#b57614", "lineColor": "#7c6f64", "secondaryColor": "#83a598", "tertiaryColor": "#b8bb26", "background": "#fbf1c7", "mainBkg": "#ebdbb2", "fontFamily": "Tahoma, sans-serif"}}}%%
flowchart TD
 A["Modern Web App เว็บสมัยใหม่"] --> B["Angular Signals state ใหม่"]
 A --> C["WASM คำนวณเร็ว"]
 A --> D["AI-Assisted Dev ช่วยพัฒนา"]
 A --> E["Edge Runtime ใกล้ผู้ใช้"]
 A --> F["PWA offline/install"]
</pre>

---

## Code Example

```ts
// counter-signal.component.ts
// ตัวอย่าง Angular Signals เบื้องต้น
import { Component, computed, signal } from '@angular/core';

@Component({
 selector: 'app-counter-signal',
 standalone: true,
 template: `
 Count: {{ count() }}
 Double: {{ doubleCount() }}
 <button (click)="increment()">เพิ่ม</button>
 `
})
export class CounterSignalComponent {
 count = signal(0);
 doubleCount = computed(() => this.count() * 2);

increment(): void {
    this.count.update(value => value + 1);
  }
}

// ตัวอย่างการใช้งาน:
// ใช้ signal เมื่ออยากจัดการ state แบบ reactive โดยไม่ต้องพึ่ง Observable เสมอไป
```

```js
// cloudflare-worker-example.js
// ตัวอย่างแนวคิด Edge Function แบบสั้น
export default {
  async fetch(request) {
    return new Response(JSON.stringify({ message: 'Hello from edge' }), {
      headers: { 'content-type': 'application/json' }
    });
  }
};

// ตัวอย่างการใช้งาน:
// deploy บน Cloudflare Workers เพื่อให้ response ใกล้ผู้ใช้มากขึ้น
```

---

## วิดีโอแนะนำ

- [YouTube: Angular Signals WebAssembly AI Assisted Development](https://www.youtube.com/results?search_query=Angular+Signals+WebAssembly+AI+assisted+development)

---

## กิจกรรมท้ายบท

- ทดลองสร้าง standalone component
- เขียนตัวอย่าง signal ง่าย ๆ
- วิเคราะห์ว่า final project ของตนเองควรต่อยอดด้วย PWA หรือ Edge ได้ไหม
- อภิปรายข้อดีข้อจำกัดของ AI-Assisted Development

---

## End

<a href="/web-programming/15-final-project/index.md" style="display:inline-block;padding:0.6em 1em;border-radius:8px;background:#fabd2f;color:#282828;text-decoration:none;font-weight:700;">กลับหน้าบทเรียน</a>