หัวข้อ 6: ภาพรวมของเทคโนโลยีเว็บสมัยใหม่

แนวคิดหลัก

เว็บสมัยใหม่ประกอบด้วยหลายชั้น ตั้งแต่ frontend framework, backend framework, database, cloud hosting, security, testing และ deployment การเข้าใจภาพรวมช่วยให้ผู้เรียนเห็นว่าบทเรียนแต่ละส่วนเชื่อมต่อกันอย่างไร

Frontend Frameworks

Frontend Frameworks ช่วยสร้าง UI ที่ซับซ้อนและจัดการ state ของเว็บแอปได้เป็นระบบ

Framework จุดเด่น เหมาะกับ
Angular โครงสร้างครบ ชัดเจน ใช้ TypeScript เป็นหลัก ระบบองค์กร แอปขนาดกลาง-ใหญ่
React ยืดหยุ่น ecosystem ใหญ่ เว็บแอปทั่วไป dashboard product app
Vue.js เรียนรู้ง่าย เบา และค่อย ๆ นำเข้า project ได้ ทีมเล็ก-กลาง หรือ project ที่ต้องเริ่มเร็ว

ในรายวิชานี้จะเน้น Angular เพราะช่วยให้เห็นแนวคิด component, service, routing, forms และโครงสร้าง project แบบครบถ้วน

Backend Frameworks

Backend Frameworks ใช้สร้าง API, authentication, business logic และเชื่อมต่อฐานข้อมูล

ตัวอย่างที่พบบ่อย:

  1. Express.js: เรียบง่าย ยืดหยุ่น เหมาะกับ Node.js API
  2. NestJS: โครงสร้างชัดเจน ใช้ TypeScript เหมาะกับระบบขนาดใหญ่
  3. Django: Python framework ที่มาพร้อมเครื่องมือครบ
  4. Laravel: PHP framework ที่นิยมมากสำหรับ web application

Database

ฐานข้อมูลแบ่งกว้าง ๆ ได้เป็น SQL และ NoSQL

ประเภท ตัวอย่าง จุดเด่น
SQL PostgreSQL, MySQL โครงสร้างชัด ความสัมพันธ์แน่น เหมาะกับข้อมูลที่ต้องการความถูกต้อง
NoSQL MongoDB, Firebase ยืดหยุ่น เหมาะกับข้อมูลเปลี่ยนรูปแบบบ่อยหรือ real-time app

การเลือกฐานข้อมูลขึ้นกับลักษณะข้อมูล ความสัมพันธ์ ปริมาณการอ่านเขียน และทีมที่ดูแลระบบ

Cloud และ Hosting

บริการ hosting ช่วยนำเว็บขึ้นออนไลน์

  1. Vercel: เหมาะกับ frontend และ full-stack บางรูปแบบ
  2. Netlify: เหมาะกับ static site และ frontend deployment
  3. Firebase: มี hosting, authentication, database และ serverless tools
  4. AWS: บริการ cloud ขนาดใหญ่และยืดหยุ่นสูง
  5. Azure: เหมาะกับองค์กรที่ใช้ ecosystem ของ Microsoft

แผนการเรียนรู้ตลอดรายวิชา

รายวิชาจะเดินจากพื้นฐานไปสู่การทำเว็บแอปแบบครบวงจร

  1. HTML/CSS และ Responsive Design
  2. JavaScript และ DOM
  3. TypeScript และ Angular
  4. Node.js และ REST API
  5. Database และ Authentication
  6. Full-Stack Integration
  7. Testing, DevOps และ Deployment
  8. Final Project และ Portfolio

การประเมินผล

การประเมินควรผสมทั้งความเข้าใจและการลงมือทำ เช่น

  1. แบบฝึกหัดรายบท
  2. งานปฏิบัติรายสัปดาห์
  3. Mini project
  4. แบบทดสอบหลังเรียน
  5. Final full-stack project
  6. การนำเสนอและ code review

กิจกรรม

เลือกเทคโนโลยี 1 ชุดสำหรับสร้างระบบ “Learning Tracker” เช่น Angular + Express.js + PostgreSQL แล้วอธิบายว่าแต่ละเทคโนโลยีทำหน้าที่อะไรในระบบ

แบบทดสอบหลังเรียน

  1. Angular, React และ Vue.js เป็นเทคโนโลยีฝั่งใด
  2. Express.js ใช้ทำอะไร
  3. SQL และ NoSQL ต่างกันโดยภาพรวมอย่างไร
  4. Vercel หรือ Netlify เหมาะกับงานแบบใด
  5. เพราะเหตุใด final project จึงควรรวม frontend, backend และ database เข้าด้วยกัน

กลับสัปดาห์ที่ 1