Now.js Framework

Framework JavaScript สมัยใหม่ที่ลดการเขียนโค้ดให้เหลือน้อยที่สุด
เขียน JavaScript น้อยลง ทำงานได้มากขึ้น ด้วยพลังของ Data Attributes

ภาพรวม

Now.js เป็น JavaScript Framework ที่ออกแบบมาเพื่อลดการเขียน JavaScript ให้เหลือน้อยที่สุด โดยใช้ Data Attributes เป็นตัวควบคุมพฤติกรรมของหน้าเว็บ และเรียกใช้ฟีเจอร์ที่ติดตั้งไว้แล้วโดยอัตโนมัติ

ปรัชญาหลัก

<!-- แทนที่จะเขียน JavaScript แบบนี้... -->
<script>
  document.querySelector('#myForm').addEventListener('submit', async (e) => {
    e.preventDefault();
    const data = new FormData(e.target);
    await fetch('/api/submit', { method: 'POST', body: data });
  });
</script>

<!-- เพียงแค่ใช้ Data Attributes! -->
<form data-form data-action="/api/submit" data-method="POST">
  <!-- ฟอร์มของคุณ -->
</form>

ไม่ต้องเขียน JavaScript เพิ่มเติม! Framework จะจัดการให้อัตโนมัติ

จุดเด่นหลัก

Zero JavaScript Writing

• ไม่ต้องเขียน JavaScript สำหรับงานทั่วไป
• ควบคุมทุกอย่างผ่าน HTML Data Attributes
• ระบบทำงานอัตโนมัติทันทีที่โหลดหน้าเว็บ

Component-Based Architecture

• Component System ที่ทรงพลัง
• Reactive Data Binding แบบ Two-Way
• Template Engine ในตัว
• State Management อัตโนมัติ

Rich UI Components

• Form Management - จัดการฟอร์มอัตโนมัติ
• DataTable - ตารางข้อมูลพร้อม sorting, filtering, pagination
• Animation System - ระบบแอนิเมชันที่ใช้งานง่าย
• Modal & Dialog - ป๊อปอัพและไดอะล็อกสำเร็จรูป
• Autocomplete - ระบบค้นหาอัตโนมัติ
• Calendar - ปฏิทินและตัวเลือกวันที่
• File Upload - อัปโหลดไฟล์พร้อม Preview
• Tags Input - ระบบแท็กที่ใช้งานง่าย

Advanced Features

• Router System - Single Page Application (SPA) Routing
• HTTP Client - จัดการ API Requests อัตโนมัติ
• Authentication - ระบบ Auth พร้อม Token Management
• i18n Support - รองรับหลายภาษา
• Service Worker - PWA Support
• Error Handling - จัดการ Error อัตโนมัติ
• Event System - ระบบ Event ที่ทรงพลัง

เป้าหมายของ Framework

Now.js มุ่งเน้นที่จะ:

1. ลดการเขียน JavaScript ให้เหลือน้อยที่สุด
2. เพิ่มประสิทธิภาพการพัฒนา ด้วยการใช้ Data Attributes
3. ทำงานอัตโนมัติ โดยไม่ต้องเขียนโค้ดเพิ่มเติม
4. จัดการความซับซ้อน ให้เป็นเรื่องง่าย
5. รองรับทุกการใช้งาน ตั้งแต่เว็บไซต์ธรรมดาไปจนถึง SPA ขนาดใหญ่

เริ่มต้นใช้งาน

เริ่มต้นใช้งาน Now.js วันนี้ และสัมผัสประสบการณ์การพัฒนาเว็บที่เขียนโค้ดน้อยลง ทำงานได้มากขึ้น!

การติดตั้ง Now.js

วิธีที่ 1: ใช้ CDN (jsDelivr)

<!-- CSS (จำเป็น) -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/goragodwiriya/nowjs@main/Now/dist/now.core.min.css">

<!-- JavaScript Core (จำเป็น) -->
<script src="https://cdn.jsdelivr.net/gh/goragodwiriya/nowjs@main/Now/dist/now.core.min.js"></script>

<!-- Optional Modules (เลือกใช้ตามต้องการ) -->
<script src="https://cdn.jsdelivr.net/gh/goragodwiriya/nowjs@main/Now/dist/now.table.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/goragodwiriya/nowjs@main/Now/dist/now.graph.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/goragodwiriya/nowjs@main/Now/dist/now.queue.min.js"></script>

[!TIP]
Performance Optimization: เพิ่ม preload และ preconnect เพื่อเพิ่มประสิทธิภาพการโหลด

<link rel="preconnect" href="https://cdn.jsdelivr.net" crossorigin>
<link rel="preload" href="https://cdn.jsdelivr.net/gh/goragodwiriya/nowjs@main/Now/dist/now.core.min.css" as="style">
<link rel="preload" href="https://cdn.jsdelivr.net/gh/goragodwiriya/nowjs@main/Now/dist/now.core.min.js" as="script">

วิธีที่ 2: ดาวน์โหลดจาก GitHub

1. ดาวน์โหลดจาก GitHub Repository
2. แตกไฟล์และคัดลอกโฟลเดอร์ Now/dist ไปยังโปรเจคของคุณ
3. เรียกใช้งาน:

<!-- CSS -->
<link rel="stylesheet" href="/path/to/dist/now.core.min.css">

<!-- JavaScript -->
<script src="/path/to/dist/now.core.min.js"></script>

วิธีที่ 3: Clone จาก Git

git clone https://github.com/goragodwiriya/nowjs.git

เริ่มต้นใช้งานอย่างง่าย

การ Initialize Framework

document.addEventListener('DOMContentLoaded', async () => {
  // Initialize Now.js
  await Now.init({
    environment: 'production'
  });

  // Create application instance
  const app = await Now.createApp({
    name: 'MyApp',
    version: '1.0.0'
  });
});

โครงสร้าง Component อย่างง่าย

// ลงทะเบียน Component ด้วย Now.getManager('component').define()
Now.getManager('component').define('counter', {
  // เปิดใช้งาน Reactive State
  reactive: true,

  // State เริ่มต้นของ Component
  state: {
    count: 0,
    title: 'Counter App'
  },

  // Computed Properties - คำนวณอัตโนมัติเมื่อ State เปลี่ยน
  computed: {
    doubleCount() {
      return this.state.count * 2;
    }
  },

  // Methods ของ Component
  methods: {
    increment() {
      this.state.count++;
    },
    decrement() {
      this.state.count--;
    },
    reset() {
      this.state.count = 0;
    }
  },

  // Lifecycle Hook - เรียกเมื่อ Component ถูก mount
  mounted() {
    console.log('Counter component mounted!');
  },

  // Event Handlers
  events: {
    'app:cleanup:end': function() {
      console.log('Cleanup completed');
    }
  }
});

การใช้งาน Component ใน HTML

<article data-component="counter">
  <h2 data-text="title"></h2>

  <div class="counter-display">
    <span data-text="count"></span>
    <small>Double: <span data-text="doubleCount"></span></small>
  </div>

  <div class="counter-buttons">
    <button data-on="click:decrement">-</button>
    <button data-on="click:reset">Reset</button>
    <button data-on="click:increment">+</button>
  </div>
</article>

[!NOTE]
Data Attributes ที่ใช้กับ Component:

• data-component - ชื่อ Component ที่ลงทะเบียนไว้
• data-text - แสดงค่าจาก State หรือ Computed
• data-on - ผูก Event กับ Method (format: event:method)
• data-model - Two-way binding กับ Input
• data-for - Loop rendering (format: item of items)

ตัวอย่างการใช้งานพื้นฐาน

1. Form Management

<form data-form="user" data-ajax-submit="true" data-action="/api/user" method="POST">
  <input type="text" name="name" data-required>
  <input type="email" name="email" data-required data-validate="email">
  <button type="submit">บันทึก</button>
</form>

ฟีเจอร์ที่ทำงานอัตโนมัติ:

• ✅ Validation
• ✅ AJAX Submission
• ✅ Error Handling
• ✅ Loading States

2. DataTable

<table data-table
       data-source="/api/users"
       data-pagination="true"
       data-search="true">
  <thead>
    <tr>
      <th data-sort="name">ชื่อ</th>
      <th data-sort="email">อีเมล</th>
      <th data-field="actions">จัดการ</th>
    </tr>
  </thead>
</table>

ฟีเจอร์ที่ทำงานอัตโนมัติ:

• ✅ Data Loading
• ✅ Sorting
• ✅ Filtering
• ✅ Pagination
• ✅ Search

3. Animation

<div data-show="fadeIn" data-hide="fadeOut">
  เนื้อหาที่มีแอนิเมชัน
</div>

<button data-on-click="toggle" data-target="#myElement">
  สลับการแสดงผล
</button>

4. Component System

<div data-component="UserProfile" data-user-id="123">
  <h2 data-bind="user.name"></h2>
  <p data-bind="user.email"></p>

  <ul data-for="post in user.posts">
    <li data-bind="post.title"></li>
  </ul>
</div>

เอกสารประกอบ

Core Modules

Form & Input

• FormManager - จัดการฟอร์มอัตโนมัติ
• FormError - จัดการ Error ในฟอร์ม
• ElementFactory - สร้าง Custom Form Elements

Data & API

• ApiComponent - Component ที่เชื่อมต่อ API
• ApiService - จัดการ API Requests
• HttpClient - HTTP Client พื้นฐาน
• ResponseHandler - จัดการ Response

Table & Data Display

• TableManager - จัดการ DataTable
• GraphComponent - แสดงกราฟและชาร์ต

Routing & Navigation

• RouterManager - SPA Router System
• ScrollManager - จัดการการเลื่อนหน้า

Authentication

• AuthManager - ระบบ Authentication
• AuthGuard - ป้องกันเส้นทาง
• AuthErrorHandler - จัดการ Auth Errors
• AuthLoadingManager - Loading States
• TokenService - จัดการ Token

Events & Interactions

• EventManager - ระบบ Event หลัก
• EventSystemManager - จัดการ Event System

Internationalization

• I18nManager - ระบบหลายภาษา

Progressive Web App

• ServiceWorkerManager - PWA Support

คู่มือการใช้งาน

• HTTP & API Guide - คู่มือการใช้งาน HTTP และ API
• Authentication Guide - คู่มือระบบ Authentication

ตัวอย่างการใช้งานจริง

ตัวอย่างที่ 1: CRUD Form

<form data-form
      data-action="/api/products"
      data-method="POST"
      data-on-success="redirect:/products">

  <input type="text"
         name="name"
         data-required
         data-min-length="3"
         placeholder="ชื่อสินค้า">

  <input type="number"
         name="price"
         data-required
         data-min="0"
         placeholder="ราคา">

  <select name="category" data-required>
    <option value="">เลือกหมวดหมู่</option>
    <option value="1">อิเล็กทรอนิกส์</option>
    <option value="2">เสื้อผ้า</option>
  </select>

  <textarea name="description"
            data-required
            placeholder="รายละเอียด"></textarea>

  <button type="submit">บันทึก</button>
</form>

ตัวอย่างที่ 2: Interactive DataTable

<table data-table
       data-source="/api/products"
       data-pagination="true"
       data-page-size="10"
       data-search="true"
       data-row-actions="edit,delete">
  <thead>
    <tr>
      <th data-sort="name" data-field="name">ชื่อสินค้า</th>
      <th data-sort="price" data-field="price">ราคา</th>
      <th data-field="category">หมวดหมู่</th>
      <th data-field="actions">จัดการ</th>
    </tr>
  </thead>
</table>

ตัวอย่างที่ 3: Reactive Component

<div data-component="ProductList" data-source="/api/products">
  <!-- Search -->
  <input type="text"
         data-model="search"
         placeholder="ค้นหาสินค้า">

  <!-- Product List -->
  <div data-for="product in filteredProducts">
    <div class="product-card">
      <h3 data-bind="product.name"></h3>
      <p data-bind="product.price" data-format="currency"></p>
      <button data-on-click="addToCart(product.id)">
        เพิ่มในตะกร้า
      </button>
    </div>
  </div>

  <!-- Empty State -->
  <div data-if="filteredProducts.length === 0">
    <p>ไม่พบสินค้า</p>
  </div>
</div>

สถาปัตยกรรม

การทำงานของ Framework

1. โหลด Now.js - Framework โหลดและพร้อมใช้งาน
2. สแกน DOM - ค้นหา Elements ที่มี Data Attributes
3. Auto-Initialize - สร้าง Components และ Managers อัตโนมัติ
4. Bind Events - ผูก Event Handlers ตาม Attributes
5. Ready - พร้อมใช้งานโดยไม่ต้องเขียนโค้ดเพิ่ม

แนวคิดหลัก

1. Declarative Programming

ใช้ HTML Attributes บอกว่าต้องการอะไร แทนที่จะเขียนโค้ดว่าทำอย่างไร

2. Convention over Configuration

ใช้ค่าเริ่มต้นที่สมเหตุสมผล ลดการตั้งค่าที่ซับซ้อน

3. Progressive Enhancement

เริ่มจากพื้นฐาน เพิ่มฟีเจอร์ตามต้องการ

4. Zero Configuration

ใช้งานได้ทันทีโดยไม่ต้องตั้งค่า

Data Attributes ที่สำคัญ

Form Attributes

• data-form - กำหนดให้เป็น Managed Form
• data-action - URL สำหรับส่งข้อมูล
• data-method - HTTP Method (GET, POST, PUT, DELETE)
• data-required - ฟิลด์จำเป็น
• data-validate - กฎการตรวจสอบ
• data-on-success - Action เมื่อสำเร็จ
• data-on-error - Action เมื่อเกิด Error

Table Attributes

• data-table - กำหนดให้เป็น Managed Table
• data-source - URL สำหรับโหลดข้อมูล
• data-pagination - เปิด/ปิด Pagination
• data-search - เปิด/ปิด Search
• data-sort - คอลัมน์ที่สามารถเรียงได้
• data-row-actions - Actions สำหรับแต่ละแถว

Component Attributes

• data-component - ชื่อ Component
• data-bind - Bind ข้อมูล
• data-model - Two-way Data Binding
• data-for - Loop Template
• data-if - Conditional Rendering
• data-show - Animation เมื่อแสดง
• data-hide - Animation เมื่อซ่อน

Event Attributes

• data-on-click - Event เมื่อคลิก
• data-on-change - Event เมื่อเปลี่ยนค่า
• data-on-submit - Event เมื่อ Submit
• data-target - Element เป้าหมาย

ข้อดีของ Now.js

สำหรับนักพัฒนา

• ✅ เขียนโค้ดน้อยลง - ลดเวลาพัฒนา
• ✅ อ่านง่าย - โค้ดเข้าใจง่าย บำรุงรักษาง่าย
• ✅ ไม่ต้อง Build - ไม่ต้อง Webpack, Babel, etc.
• ✅ เรียนรู้ง่าย - Curve การเรียนรู้ต่ำ
• ✅ Flexible - ใช้ร่วมกับ Library อื่นได้

สำหรับโปรเจค

• ✅ Performance - โหลดเร็ว ทำงานเร็ว
• ✅ Maintainable - บำรุงรักษาง่าย
• ✅ Scalable - ขยายได้ตามต้องการ
• ✅ SEO Friendly - รองรับ SEO
• ✅ Accessible - รองรับ Accessibility

เมื่อไหร่ควรใช้ Now.js

เหมาะสำหรับ

• ✅ เว็บแอปพลิเคชันทั่วไป
• ✅ Admin Panels / Dashboards
• ✅ CRUD Applications
• ✅ Forms-heavy Applications
• ✅ Data-intensive Applications
• ✅ Single Page Applications (SPA)
• ✅ Progressive Web Apps (PWA)

อาจไม่เหมาะสำหรับ

• ❌ เกมที่ต้องการ Performance สูงมาก
• ❌ Real-time Applications ที่ซับซ้อนมาก
• ❌ 3D Graphics Applications

เริ่มต้นเรียนรู้

ขั้นตอนที่แนะนำ

1. เริ่มจากพื้นฐาน

   • อ่าน FormManager เพื่อเรียนรู้การจัดการฟอร์ม
   • ทดลองสร้างฟอร์มง่ายๆ

2. ทำความเข้าใจ Data Attributes

   • ศึกษา Attributes ที่ใช้บ่อย
   • ทดลองใช้ในโปรเจคเล็กๆ

3. เรียนรู้ Components

   • อ่าน ApiComponent
   • สร้าง Component แรกของคุณ

4. ศึกษา Advanced Features

   • RouterManager สำหรับ SPA
   • AuthManager สำหรับระบบ Auth
   • TableManager สำหรับ DataTable

5. ลงมือทำโปรเจคจริง

   • นำความรู้ไปใช้ในโปรเจคจริง
   • ทดลองฟีเจอร์ต่างๆ