5 คะแนน โดย GN⁺ 2023-12-02 | 1 ความคิดเห็น | แชร์ทาง WhatsApp

ความซับซ้อนของการจัดการข้อมูล

  • วิศวกรฟรอนต์เอนด์เริ่มตระหนักถึงความจำเป็นในการแคชข้อมูลจาก API
  • ในช่วงแรกเริ่มจากการจัดเก็บข้อมูลแบบง่าย ๆ แต่เมื่อมีคำขอฟีเจอร์เพิ่มขึ้น ก็ต้องเริ่มทำ data cache, manual index, optimistic mutations, recursive cache invalidation และอื่น ๆ
  • ฟีเจอร์เหล่านี้มีลักษณะคล้ายกับการทำงานภายในของฐานข้อมูล และในแอปพลิเคชันฟรอนต์เอนด์ที่ซับซ้อน สุดท้ายก็มักจะกลายเป็นการสร้างฐานข้อมูลเฉพาะโดเมนขึ้นมาเอง

พื้นฐานของแคช

  • เริ่มจากการเก็บผลลัพธ์ของคำขอ API ไว้ในตัวแปรภายในเครื่อง
  • ในเว็บแอปพลิเคชันที่ใช้ declarative framework จะเก็บข้อมูลไว้ในตัวแปรเพื่อหลีกเลี่ยงการเรียก API ที่ไม่จำเป็น
  • ขั้นถัดไปคือการย้ายแคชไปไว้ในชั้นที่สูงขึ้น หรือย้ายออกไปไว้นอก UI tree

เพิ่มความเร็วด้วยดัชนี

  • การจัดระเบียบข้อมูลในรูปแบบเฉพาะช่วยลดงานของแอปพลิเคชันและปรับปรุงประสบการณ์ผู้ใช้ได้
  • พบว่าการปรับข้อมูลฝั่งฟรอนต์เอนด์ให้เหมาะสมมีความคล้ายกับกลไกภายในของ storage ในฐานข้อมูล
  • ปรับปรุงโครงสร้างข้อมูลด้วยการเก็บข้อมูลตาม ID และสร้างดัชนีที่ช่วยให้ค้นหารายการตามวันที่ได้อย่างรวดเร็ว

การเปลี่ยนแปลงแบบมองโลกในแง่ดี

  • คือการจำลองผลของการกระทำบางอย่างในเครื่องโดยไม่ต้องรอการตอบกลับจากเซิร์ฟเวอร์
  • ทำให้อินเทอร์เฟซผู้ใช้ดูเหมือนตอบสนองได้ทันที แต่ถ้าผลลัพธ์จากเซิร์ฟเวอร์ออกมาต่างกัน UI ก็ต้องย้อนกลับการเปลี่ยนแปลง
  • มีความท้าทาย เช่น การทำซ้ำตรรกะระหว่างไคลเอนต์กับเซิร์ฟเวอร์ การจัดการข้อผิดพลาดแบบอะซิงโครนัส และการปรับการเปลี่ยนแปลงให้สอดคล้องกันแม้แอปจะถูกรีสตาร์ต

การทำให้แคชใช้ไม่ได้แบบเรียกซ้ำ

  • ข้อมูลอาจปรากฏอยู่หลายตำแหน่งในแคช และหลังอัปเดตแล้วจำเป็นต้อง invalidate แคชให้ถูกต้องเพื่อให้ตรงกับสถานะบนเซิร์ฟเวอร์
  • UI ต้องรู้ว่าส่วนใดของแคชเกี่ยวข้องกับ mutation แต่ละรายการ ซึ่งอาจเปราะบางมากขึ้นเมื่อระบบมีขนาดใหญ่ขึ้น
  • เมื่อใช้ร่วมกับ optimistic mutations การทำซ้ำตรรกะของเซิร์ฟเวอร์เพื่อคาดการณ์การเปลี่ยนแปลงฝั่งเซิร์ฟเวอร์จากฝั่งไคลเอนต์จะยิ่งยากขึ้น

กำลังสร้างฐานข้อมูลอยู่หรือไม่?

  • ในแอปพลิเคชันฟรอนต์เอนด์ที่มีความซับซ้อนมากพอ สุดท้ายแล้วก็มักต้องสร้างความสามารถด้านการจัดการข้อมูลจำนวนมาก ซึ่งดึงเวลาออกจากการทำสิ่งที่ทำให้ผู้ใช้พึงพอใจและแก้ปัญหาทางธุรกิจจริง ๆ
  • บทความนี้เสนอทางเลือกแทนสแตกฐานข้อมูลที่ปรับให้เหมาะกับฟรอนต์เอนด์

แนะนำ SQLSync

  • ผู้เขียนได้พัฒนา SQLSync ซึ่งเป็นสแตกฐานข้อมูลที่ปรับให้เหมาะกับฟรอนต์เอนด์และสร้างบน SQLite
  • SQLSync ถูกออกแบบมาเพื่อแก้ปัญหาการจัดการข้อมูล และช่วยให้นักพัฒนามุ่งเน้นไปที่ฟีเจอร์เฉพาะตัวของแอปพลิเคชันได้
  • SQLSync มี durable cache, ความสามารถเต็มรูปแบบของ SQLite, optimistic mutations, smart cache invalidation และ reactive queries

ความเห็นของ GN⁺

ประเด็นสำคัญที่สุดของบทความนี้คือ เมื่อความซับซ้อนของแอปพลิเคชันฟรอนต์เอนด์เพิ่มขึ้น นักพัฒนามักลงเอยด้วยการสร้างความสามารถที่คล้ายฐานข้อมูลขึ้นมาเอง งานลักษณะนี้ใช้เวลาของนักพัฒนาไปมาก และทำให้หลุดจากการพัฒนาฟีเจอร์ที่สร้างคุณค่าให้ผู้ใช้จริง ๆ สแตกฐานข้อมูลที่ปรับให้เหมาะกับฟรอนต์เอนด์อย่าง SQLSync นำเสนอแนวทางใหม่ที่น่าสนใจในการแก้ปัญหานี้ เหตุผลที่บทความนี้น่าสนใจคือมันชี้ให้เห็นปัญหาเชิงรากฐานของแนวทางจัดการข้อมูลแบบเดิม และมองหาแนวทางใหม่ที่ช่วยให้นักพัฒนาทำงานได้อย่างมีประสิทธิภาพมากขึ้น

1 ความคิดเห็น

 
GN⁺ 2023-12-02
ความคิดเห็นจาก Hacker News
  • เข้าใจเพื่อนที่เป็นผู้สร้างโปรเจ็กต์นี้

    • SQLsync เป็นเครื่องมือที่ช่วยให้นักพัฒนาฝั่งฟรอนต์เอนด์สามารถ query และอัปเดตฐานข้อมูลระยะไกลได้จากภายในเบราว์เซอร์
    • มันทำงานโดยอาศัยพลังของ WASM เพื่อส่งฐานข้อมูล SQLite เข้าไปยังเบราว์เซอร์
    • ใช้อัลกอริทึมแบบ reactive เพื่อซิงก์ระหว่างไคลเอนต์หลายตัว
    • เป็นแนวทางที่แก้ปัญหางานซิงก์ข้อมูลของนักพัฒนาได้อย่างพลิกโฉม
  • ประสบการณ์กับซอฟต์แวร์จัดการโปรเจ็กต์ของบริษัทเก่า

    • เคยใช้กลไก check-in/check-out เพื่อซิงก์ข้อมูล แต่เมื่อแอปที่อัปเดตแบบเรียลไทม์เริ่ม появляться ก็ถูกมองว่าล้าสมัย
    • จากประสบการณ์สร้าง SPA web app มา 10 ปี รู้สึกว่ากลไกซิงก์ข้อมูลลักษณะนี้มาก่อนกาล
  • ปัญหาที่หายไปเมื่อเลิกใช้ SPA

    • ถ้าใช้โซลูชันอย่าง Hotwire หรือ htmx การ query ฝั่งเซิร์ฟเวอร์จะเรียบง่ายขึ้น และปัญหาเรื่องทำให้มันเร็วก็เป็นสิ่งที่เข้าใจกันดีอยู่แล้ว
  • ความเห็นจากผู้สร้าง SQLSync

    • กำลังตอบคำถามจำนวนมาก และจะคอยกลับมาตรวจดูคำถามที่พลาดไปเป็นระยะ
    • ยินดีที่มีการพูดคุยเกี่ยวกับโพสต์แรกที่เน้นแรงจูงใจในการสร้าง SQLSync
    • ในโพสต์ถัดไปจะอธิบายว่า SQLSync ทำงานอย่างไร
  • อย่าให้ mental model ที่ไม่ตรงกับความเป็นจริงแก่ผู้ใช้

    • การซิงก์ฐานข้อมูลอาจซับซ้อนกว่าโมเดล client-server
    • รู้สึกว่าการใช้ primitive ของ CRDT จะปลอดภัยกว่าเมื่อจำเป็นต้องมี UI ที่รวดเร็ว
  • หลักการที่ว่าสิ่งที่วัดได้ย่อมถูกจัดการ และความผิดพลาดจาก sunk cost

    • ความซับซ้อนของฐานข้อมูลคือปัญหา
    • syntax ของ SQL คือปัญหา และถ้าการใช้ relational database พื้นฐานเป็นประสบการณ์ที่น่าพอใจ ก็จะยิ่งถูกล่อใจให้ใช้ DB แทนการสร้างฐานข้อมูลเอง
    • ฐานข้อมูลที่ดีใช้ SQL และเพื่อประสิทธิภาพก็ควรใช้ภาษาของฐานข้อมูล
  • ปัญหาการซิงก์สถานะระหว่างไคลเอนต์กับเซิร์ฟเวอร์

    • การกลับไปใช้โมเดล PHP/SSR เป็นการอ้อมปัญหานี้ด้วยการแลกกับ UX
    • SPA ก็ดี แต่การโพสต์ฟอร์มแบบ multipart ก็ยังใช้งานได้อยู่
    • การเก็บทุกสถานะไว้ที่เซิร์ฟเวอร์และมองไคลเอนต์เป็นเพียงเทอร์มินัลแบบเรียบง่ายช่วยให้ประสบการณ์การพัฒนาดีขึ้น
  • การเปรียบเทียบกับไลบรารี ORM

    • มีคำถามที่เปรียบเทียบ SQLsync กับการใช้ TypeORM และ SQL.js โดยตรงซึ่งรองรับในเบราว์เซอร์
  • ความแตกต่างระหว่างฐานข้อมูลฝั่งฟรอนต์เอนด์และแบ็กเอนด์

    • ฐานข้อมูลฝั่งฟรอนต์เอนด์อาจต่างจากแบ็กเอนด์ และจำเป็นต้องจัดการสถานะแบบเรียลไทม์บนไคลเอนต์ให้ดีกว่าเดิม
    • กำลังพิจารณาเรื่อง cache invalidation โดยใช้ react query และ WebSocket
    • ไอเดียของ SQLsync ก็มีคุณค่าพอให้พิจารณาเช่นกัน
  • ความพยายามที่คล้ายกันผ่าน SignalDB

    • SignalDB ใช้ reactivity ที่อาศัย signal และใช้ไวยากรณ์การ query คล้าย mongodb โดยไม่ยึดติดกับเฟรมเวิร์ก