Observable 2.0 เครื่องมือสร้างเว็บไซต์แบบสแตติกสำหรับแอปข้อมูล

 (observablehq.com)
14 คะแนน โดย GN⁺ 2024-02-16 | 1 ความคิดเห็น | แชร์ทาง WhatsApp

เปิดตัว Observable Framework

  • เปิดตัว Observable 2.0: เครื่องมือสร้างเว็บไซต์แบบสแตติกโอเพนซอร์สที่ช่วยสร้างแอปข้อมูล แดชบอร์ด และรายงานที่รวดเร็วและสวยงามได้
  • มีเป้าหมายเพื่อสื่อสารข้อมูลได้อย่างมีประสิทธิภาพ โดย Observable notebook เหมาะกับการสำรวจข้อมูลแบบชั่วคราว แต่ไม่เหมาะกับแดชบอร์ดและแอป
  • ด้วย Observable Framework สามารถสร้างแอปข้อมูลชั้นยอดได้ และใช้งานร่วมกันระหว่าง JavaScript ฝั่งฟรอนต์เอนด์กับภาษาหลากหลายฝั่งแบ็กเอนด์ได้

Beyond notebooks 📓

  • Observable 2.0 สะท้อนประสบการณ์ที่สั่งสมมาหลายปี
  • ความเบาและการทำงานร่วมกันของ computational notebook เหมาะอย่างยิ่งกับการสำรวจข้อมูลและการตอบคำถามเฉพาะหน้าได้ทันที แต่ไม่ใช่อินเทอร์เฟซที่เหมาะที่สุดสำหรับทุกงาน
  • notebook มีข้อจำกัดจากเลย์เอาต์คอลัมน์เดียว ความหนาแน่นของข้อมูลเชิงภาพที่ต่ำ และอินเทอร์เฟซตัวแก้ไขที่มองเห็นอยู่ตลอดเวลา ซึ่งเหมาะกับการเรียนรู้และการทดลอง แต่ไม่เหมาะกับการนำเสนอ
  • แอปข้อมูลช่วยส่งเสริมความเข้าใจร่วมกัน ถูกใช้งานโดยทีมได้บ่อยกว่า และยังคงมีคุณค่าเมื่อเวลาผ่านไป

เวิร์กโฟลว์สำหรับนักพัฒนาที่ดีกว่า 👩‍💻

  • การพัฒนาสมัยใหม่ยึดตามไฟล์เป็นหลัก และไฟล์สามารถทำงานร่วมกันได้
  • นักพัฒนาสามารถใช้โปรแกรมแก้ไขข้อความ ระบบควบคุมซอร์ส และระบบรีวิวโค้ดตามที่ตนชอบ รวมถึงรันยูนิตเทสต์และลินเตอร์ และทำ CI/CD ให้เป็นอัตโนมัติได้
  • Observable Framework ใช้ไวยากรณ์ vanilla JavaScript และใช้ ES import สมัยใหม่แทน require เพื่อให้เรียนรู้และแชร์โค้ดได้ง่ายขึ้น

ประสบการณ์ผู้ใช้ที่ดีกว่า 😍

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

สถาปัตยกรรมข้อมูลที่ดีกว่า

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

คำขอบคุณ

  • เรามาถึงจุดนี้ได้ด้วยการสนับสนุน ฟีดแบ็ก และกำลังใจจากชุมชน และยินดีที่ได้แบ่งปัน Observable Framework
  • หากต้องการรู้จัก Framework มากขึ้น แนะนำให้อ่านเอกสารหรือเข้าไปที่ฟอรัม

GN⁺ ความเห็น:

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

บทความที่เกี่ยวข้อง

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

 
GN⁺ 2024-02-16
ความเห็นจาก Hacker News

  • ข่าวการเปิดตัว Observable Framework

    • Observable Framework เป็นเครื่องมือโอเพนซอร์สตัวใหม่สำหรับพัฒนาแอปข้อมูล
    • แนะนำให้ดูรายงานตัวอย่างที่วิเคราะห์เว็บล็อกจากแดชบอร์ดภายใน
    • ใช้เทคนิค "ทำทุกอย่างให้อยู่ในรูปกราฟ" เพื่อให้ได้อินไซต์ที่ช่วยเรื่องการปรับแต่งเซิร์ฟเวอร์และการควบคุมทราฟฟิก
    • ยังมีการแชร์แดชบอร์ดแบบดั้งเดิมที่ใช้แสดงการยอมรับของไลบรารีการทำภาพข้อมูลโอเพนซอร์สใหม่ชื่อ Observable Plot
    • พร้อมกับการเปิดตัว Observable Framework ทาง Observable ก็กลับมาเปิดให้ใช้งานฟรีอีกครั้งสำหรับผู้ใช้รายบุคคล (รวม private notebook และ database connector)

  • คุณสมบัติของ Observable Framework

    • Observable Framework ใช้ไวยากรณ์ vanilla JavaScript 100%
    • สามารถใช้ reactive runtime ของ Observable ได้โดยไม่ต้องมีไวยากรณ์พิเศษ
    • ใช้ static ES import จาก npm หรือ local module ได้ และสามารถประกาศตัวแปรระดับบนสุดหลายตัวใน code block ได้
    • สามารถเรียกใช้ฟังก์ชัน display(…) ที่มีมาให้ในตัวเพื่อแสดงเนื้อหาบนหน้าได้
    • การใช้ไวยากรณ์แบบ vanilla ทำให้การทำงานร่วมกันระหว่างเครื่องมือต่าง ๆ ดีขึ้นอย่างมาก
    • กำลังมองหาวิธีพอร์ตการปรับปรุงเหล่านี้ไปยัง Observable notebook ในอนาคตอันใกล้

  • การใช้แนวคิด "ไฟล์เทียบกับแอป"

    • ในประกาศมีการพูดถึงแนวคิด "ไฟล์เทียบกับแอป"
    • สามารถสร้าง data visualization และแดชบอร์ดที่ซับซ้อนได้ด้วยการใช้ code block ในไฟล์ Markdown
    • ความสามารถในการทำงานร่วมกันลักษณะนี้น่าสนใจมาก
    • ได้ลองแก้ไขไซต์ Observable ใน Obsidian แล้วพบว่าใช้งานได้ดี

  • คำชื่นชมต่อแนวทางของ Observable

    • แนวทางที่แยก Observable ออกจาก observablehq.com นั้นยอดเยี่ยม
    • ทำให้นักข่าวทุกคนสร้างบล็อกที่มีความไดนามิกและขับเคลื่อนด้วยข้อมูลได้ง่ายขึ้น
    • ผู้ก่อตั้ง Observable เคยมีผลงาน data visualization ที่น่าทึ่งที่ NYTimes
    • เครื่องมือแบบนี้ช่วยคืนพลังให้กับนักข่าว และทำให้เกิดการเปลี่ยนผ่านออกห่างจากบริษัทที่น่ากังขา
    • Svekyll เป็น static site generator ที่ได้แรงบันดาลใจจาก Jekyll สำหรับคนที่อยากใช้ Svelte กับบล็อก

  • ไอเดียหลากหลายเกี่ยวกับ Observable Framework

    • data loader คือสคริปต์ที่สามารถส่งข้อมูลออกทาง standard output ได้ (เช่น JSON)
    • ไฟล์ Markdown ที่มี ```js block ที่รันได้
    • การสร้าง Observable notebook ขึ้นใหม่โดยหลีกเลี่ยงไวยากรณ์แบบกำหนดเอง
    • จุดเหล่านี้สำคัญมาก

  • คำขอเกี่ยวกับการใช้งาน Observable Framework

    • ชอบการแยกส่วนที่ชัดเจนระหว่างการโหลด/เตรียมข้อมูลกับการแสดงผล
    • ขอความชัดเจนเรื่องตัวอย่างแบบง่ายและเอกสารการ deploy
    • คาดว่าคนส่วนใหญ่จะชอบ deploy ผ่าน GitHub Actions จึงขอให้เพิ่มตัวอย่างไฟล์ deploy ที่ง่ายที่สุดในเอกสาร แทนไฟล์ deploy ที่ซับซ้อน
    • มีข้อเสนอเกี่ยวกับความเป็นไปได้ในการใช้อินเทอร์เฟซที่เชื่อมกับ GitHub repository และ build/deploy เมื่อมีการเปลี่ยนแปลง

  • คำถามเกี่ยวกับ Observable Framework

    • มีคำถามว่าความยืดหยุ่นของภาษาที่ใช้ใน data loader/backend จะขยายไปถึง frontend/UI ด้วยหรือไม่ หรือจะยังคงแนวทางที่ให้ผู้ใช้เลือกภาษาที่ต้องการสำหรับการโหลดข้อมูล แล้วสร้างแดชบอร์ดด้วย observablejs/observable plot ต่อไป
    • เมื่อพิจารณาว่า ObservableJS ได้รับการรองรับโดย Quarto จึงมีคำถามว่าจะคาดหวัง Observable Framework ที่ผสานกับ Quarto ได้หรือไม่ หรือว่า Quarto เวอร์ชันล่าสุดที่มีจุดเด่นด้านแดชบอร์ดจะกลายเป็นคู่แข่งของ Framework
    • เห็นการเปรียบเทียบกับ Evidence.dev และรู้สึกถึงความคล้ายกันในประสบการณ์พัฒนาแบบยึด Markdown เป็นศูนย์กลาง แต่จำได้ว่า Evidence เลือก Apache Echarts เป็นไลบรารีกราฟหลัก จึงสงสัยถึงข้อดีข้อเสียของ Echarts เทียบกับ ObservableJS/Plot

  • พัฒนาการทางประวัติศาสตร์ของ Observable

    • หากย้อนดูประวัติของ Observable จะเห็นว่าเริ่มจากบริษัทที่สร้าง static site generator สำหรับแดชบอร์ด จากนั้นพยายามนำ data science ไปสู่ผู้จัดการระดับกลางแต่หาความเหมาะสมกับตลาดได้ยาก และสุดท้ายจึงโฟกัสไปที่เครื่องมือที่เรียบง่ายและสง่างามสำหรับ exploratory programming, data visualization และการเขียนเอกสารเชิงโต้ตอบใน JavaScript

  • คำถามเพิ่มเติมเกี่ยวกับการใช้ Observable Framework

    • หากต้องการสร้าง plot/ตารางที่ดึงและแสดงข้อมูลเพียงบางส่วนจากไฟล์ฐานข้อมูล Sqlite/Duckdb บนเซิร์ฟเวอร์ทีละส่วนด้วย slider/filter มีคำถามว่าปฏิสัมพันธ์แบบนี้ทำได้อย่างไร
    • หาก Observable Framework ให้ frontend มาให้ มีคำถามว่าสามารถใช้ไลบรารี authentication ใดก็ได้เพื่อสร้างเว็บไซต์ที่มีตัวเลือกล็อกอินและสมัครสมาชิกหรือไม่
    • หากเป็นหน้าเว็บแบบ static มีคำถามว่าทุกครั้งที่ผู้ใช้ดูกราฟ จะสามารถใช้ Dev Tools ดาวน์โหลดไฟล์ข้อมูลที่อยู่เบื้องหลัง visualization ได้หรือไม่
    • มีคำถามเกี่ยวกับกำหนดวันเปิดตัวของ interaction ใน Plot (zoom, pan, interactive legend, brush)
    • เมื่อมีไฟล์ parquet, sqlite, csv ขนาดใหญ่ จะไม่สามารถทำ CI/CO ผ่าน GitHub หรือ Vercel ได้ จึงมีคำถามว่าจะมีบริการโฮสติ้งสำหรับไฟล์เหล่านี้และสำหรับสร้าง runtime หรือไม่

  • ข้อสังเกตเกี่ยวกับไอเดียที่คล้ายกัน

    • กำลังพัฒนาเครื่องมือที่คล้ายกันมาก (และในบางด้านก็แตกต่างมาก) อยู่ที่ rysana.com
    • ไอเดียเหล่านี้โผล่มาเป็นระลอกโดยแทบไม่มีการประสานกัน ราวกับตอนที่แคลคูลัสถูกคิดค้นขึ้นครั้งแรก
    • มีเทคโนโลยีตั้งต้นอยู่มากมาย แต่ก็ยังน่าสนใจที่การก้าวกระโดดไปสู่ 'แอป' Markdown แบบไฟล์เดียวที่ใช้ได้หลายภาษานั้นเกิดขึ้นพร้อมกันในหลายที่