100 วัน, 87 เครื่องมือ, ไม่ต้องใช้เซิร์ฟเวอร์เลยสักเครื่อง
ผมใช้เวลา 100 วันในการสร้าง ToolKnit ซึ่งเป็นชุดเครื่องมือบนเบราว์เซอร์จำนวน 87 ชนิด
เว็บไซต์เครื่องมือส่วนใหญ่ทำงานแบบนี้:
- คุณอัปโหลดไฟล์
- เซิร์ฟเวอร์ประมวลผลไฟล์นั้น
- คุณดาวน์โหลดผลลัพธ์
นั่นหมายความว่าไฟล์ PDF และรูปภาพที่สำคัญของคุณจะไปค้างอยู่บนเซิร์ฟเวอร์ของคนอื่น ผมจึงต้องการวิธีที่ต่างออกไป เครื่องมือทุกตัวใน ToolKnit ทำงานบนเบราว์เซอร์ของคุณทั้งหมด โดยไม่มีไฟล์ใดๆ หลุดออกจากอุปกรณ์ของคุณเลย
นี่คือสิ่งที่ผมได้เรียนรู้จากการสร้างโปรเจกต์โดยไม่มี backend
The Stack
- HTML และ Tailwind CSS
- Vanilla JavaScript
- PHP สำหรับเก็บสถิติง่ายๆ เท่านั้น
- ไม่ใช้ framework เลย ไม่ว่าจะเป็น React หรือ Vue
ทำไมต้องเป็น Static HTML?
- SEO ดีกว่า Google สามารถ crawl หน้าเว็บแบบ static ได้ทันที และไม่มีปัญหาเรื่องความล่าช้าจากการทำ hydration
- ความเร็วสูงกว่า ผู้ใช้สามารถใช้งานเครื่องมือได้ทันที โดยไม่ต้องรอโหลด JavaScript bundle ขนาดใหญ่
- ค่าใช้จ่ายต่ำ ผมแทบไม่ต้องใช้พลังประมวลผลของเซิร์ฟเวอร์เลย
ความท้าทาย การสร้าง 87 หน้าโดยไม่มี component เป็นเรื่องยาก ถ้าผมต้องการเปลี่ยนลิงก์ที่ footer ผมต้องตามไปแก้ไขถึง 87 ไฟล์ ผมจึงต้องเขียน Python script ขึ้นมาเพื่อจัดการเรื่องนี้
ผมได้เรียนรู้ถึงขีดจำกัดของเบราว์เซอร์:
- การบีบอัด PDF นั้นยาก ต้องมีการจัดการ stream ที่ซับซ้อนเพื่อป้องกันไม่ให้ไฟล์เสียหาย
- การสังเคราะห์เสียง (Audio synthesis) นั้นลึกซึ้ง การจะสร้างเสียงเปียโนที่สมจริงต้องใช้ oscillator หลายตัวและ custom harmonics
- วิดีโอมีขนาดใหญ่ การใช้ ffmpeg.wasm นั้นใช้งานได้จริง แต่การต้องดาวน์โหลดไฟล์ขนาด 32 MB ถือเป็นภาระสำหรับผู้ที่ใช้การเชื่อมต่ออินเทอร์เน็ตความเร็วต่ำ
บทเรียนที่ยิ่งใหญ่ที่สุดของผม จงตัดฟีเจอร์ที่ "เกือบจะใช้งานได้" ทิ้งไป
ผมเคยสร้างเครื่องมือสำหรับ iPhone Live Photos แต่มันมีข้อบกพร่องหลักๆ 3 อย่าง:
- การคำนวณมุมโค้ง (rounded corners) ใน Canvas API ผิดพลาด
- การแปลงไฟล์วิดีโอ (transcoding) ใช้เวลานานเกินไป
- แอปอย่าง WeChat ตัดข้อมูลที่ผมจำเป็นต้องใช้ทิ้งไป
เครื่องมือที่ทำงานได้เพียง 90% จะทำลายความเชื่อมั่น ถ้ามันยังไม่ดีพอ ก็อย่าเพิ่งปล่อยมันออกมา
อะไรคือขั้นต่อไป? ตอนนี้ผมกำลังสร้างแอปพลิเคชันบนเดสก์ท็อปโดยใช้ Tauri และ Rust ซึ่งจะใช้กฎเดิมคือ: การประมวลผลทั้งหมดจะอยู่แค่ในเครื่องของผู้ใช้เท่านั้น
สรุปผลการสร้างใน 100 วัน: • ปล่อยเครื่องมือไปแล้ว 87 ชนิด • ยกเลิกไป 3 ชนิด • ไม่มีการพึ่งพา framework เลย • มีการใช้งานรวมกว่า 3,000 ครั้ง
คุณกำลังสร้างเครื่องมือแบบ client-side อยู่หรือเปล่า? มาแชร์เรื่อง architecture ของคุณในคอมเมนต์ได้เลย