หน้าจอธุรกิจที่เร็ว แม้ข้อมูลหลักแสนแถว
CKN UI คือ component framework สำหรับสร้างหน้าจอระบบงาน พร้อม component สำเร็จรูปเกือบร้อยตัว, router, offline sync และ chart ในชุดเดียว ทีมของคุณสร้างหน้าจอได้เร็วขึ้น ไม่ต้องประกอบไลบรารีหลายเจ้า และไม่ต้องพึ่ง dependency ภายนอก
diagram ที่อัปเดตสด
แผนที่ระบบวาดด้วย component ของ CKN UI และเปลี่ยนตามข้อมูลจาก WebSocket
ตาราง filter และ badge สำเร็จรูป
หน้ารายการงานประกอบจาก component มาตรฐาน ไม่ต้องเขียน HTML เอง
กราฟจาก chart engine ของเราเอง
กราฟแท่งและตัวเลขสรุปใน dashboard ใช้ชุดเดียวกับทุกแอปในเครือ
สิ่งที่ CKN UI ทำได้
Component และ template ที่เขียนง่าย
เขียน component เป็น class ธรรมดา เก็บ state ใน field แล้วหน้าจอ update เอง ไม่ต้องมี build step บังคับ และไม่มี virtual DOM ให้ debug
- template แบบ HTML พร้อม :if, :for, two-way binding
- อัปเดต DOM เฉพาะจุดที่เปลี่ยน
- template linter จับข้อผิดพลาดตั้งแต่ตอนพัฒนา
- Thai-friendly: พ.ศ., เลขไทย, ข้อความภาษาไทย
Component มาตรฐานสำหรับระบบงาน
ตาราง, ฟอร์ม, ปฏิทิน, drawer, kanban, timeline, command palette และอื่น ๆ ใช้ได้ทันที ปรับหน้าตาด้วย theme
- data table: sort, filter, เลือกหลายแถว, export CSV
- ฟอร์ม: date range, tag input, number input, file upload
- theme: ckn-ui (ค่าเริ่มต้น), Bootstrap, Tailwind
- ปรับข้อความทุก component ผ่านจุดเดียว (i18n)
ข้อมูลขนาดใหญ่
แสดงข้อมูลจำนวนมากโดย render เฉพาะแถวที่มองเห็น รองรับทั้งรายการ, grid สองมิติ และเอกสารยาว
- virtual list สำหรับแถวหลักแสน
- ckn-grid แบบ DOM หรือ canvas พร้อม frozen row / column
- เลือก cell, undo / redo, copy / paste, shortcut
- อัปเดตแถวเดียวจาก live feed โดยไม่ render ทั้งตาราง
ทำงานได้แม้ไม่มีเน็ต
แอปที่เปิดแล้วหนึ่งครั้งจะเปิดต่อได้แม้ออฟไลน์ ข้อมูลที่บันทึกตอนออฟไลน์จะถูกส่งเมื่อเน็ตกลับมา และส่งครั้งเดียวไม่ซ้ำ
- query cache พร้อม stale-while-revalidate และ retry
- outbox บน IndexedDB และ sync engine
- ตรวจสถานะเชื่อมต่อ และจัดการ conflict ให้ผู้ใช้เลือก
- service worker ในตัว
Chart, แผนที่ และ editor
กราฟ, แผนที่, QR, diagram, code editor และ rich-text editor สร้างขึ้นเองในแพ็กเกจ ไม่ต้องติดตั้งไลบรารีเสริม
- กราฟ line, bar, pie, scatter, sparkline บน canvas
- แผนที่ GeoJSON พร้อมคำนวณพื้นที่และระยะทาง
- QR Code เวอร์ชัน 1 ถึง 40 รวม payload แบบ PromptPay
- diagram (ERD) และ code editor สำหรับ SQL / JSON
App shell, ความปลอดภัย และหลาย platform
router, store, การทำงานร่วมกันแบบ real-time และ template เดียวกันที่รันได้ทั้ง browser, SSR และ native ใช้ได้กับนโยบาย CSP ที่เข้มงวด
- router พร้อม guard, lazy route และ keep-alive
- แก้ไขเอกสารร่วมกันหลายคนพร้อม presence
- ไม่ต้องใช้ 'unsafe-eval' ใน CSP
- render บน server (SSR) และ native ผ่าน ui-native
ตัวเลขที่วัดจริง
ตัวเลขทั้งหมดวัดจาก benchmark และ test ของแพ็กเกจเอง บน Chrome ยกเว้นที่ระบุว่า jsdom ผลจริงขึ้นกับเครื่องและข้อมูลของคุณ
ตัวเลขจากชุดทดสอบและ benchmark ภายในของ CKN ผลจริงขึ้นกับเครื่องและปริมาณข้อมูลของแต่ละระบบ
ธุรกิจของคุณได้อะไร
ส่งมอบหน้าจอได้เร็วขึ้น ต้นทุนต่ำลง
ตาราง, ฟอร์ม, กราฟ, แผนที่ และ editor มีมาในชุดเดียว ทีมไม่ต้องเลือก ซื้อ และดูแลไลบรารีหลายตัวให้เข้ากัน หน้าจอใหม่จึงเริ่มจากส่วนประกอบที่พร้อมใช้ ไม่ใช่จากศูนย์
ความเสี่ยงด้าน supply chain ต่ำ
ตอน runtime ใช้เพียง CKN core ไม่มีไลบรารีบุคคลที่สามให้ติดตามช่องโหว่หรือ license และรันภายใต้ CSP ที่เข้มงวดได้โดยไม่ต้องเปิด 'unsafe-eval'
ใช้งานได้จริงหน้างาน และเป็นของคุณ
ระบบใช้งานต่อได้เมื่อเน็ตหลุด และข้อมูลที่บันทึกไว้จะถูกส่งเมื่อกลับมาออนไลน์ โค้ดและสถาปัตยกรรมเป็นของ CKN ที่เราดูแลเอง จึงปรับให้เข้ากับงานของคุณได้ ไม่ขึ้นกับ roadmap ของเจ้าอื่น
component รายการ 100,000 แถว ด้วย template เดียว
ใช้งานอยู่ในส่วนต่าง ๆ ของ CKN stack
- หน้าจอของ business service ในชุด CKN (ผ่าน theme มาตรฐาน)
- หน้า admin ของ platform service เช่น identity และ portal
- แอปภายในและเดโมของ industry solution
- แอป native บน iOS / Android ผ่าน @ckn-technology/ui-native
import { Component } from "@ckn-technology/ui";
class OrderList extends Component {
rows = Array.from({ length: 100000 }, (_, i) => ({ id: i, name: `Order ${i}` }));
async onTemplateBuilding(): Promise<string> {
return /*html*/`
<div style="height: 600px; overflow: auto">
<ul>
<li :for="{{r of this.rows}}" :key="{{r.id}}"
ckn-for-mode="virtual immutable" ckn-item-size="40">{{r.name}}</li>
</ul>
</div>`;
}
}
Component.register(OrderList, "order-list");
Component.render(".cknui");