Now.js Framework

Modern JavaScript Framework that Minimizes Code Writing
Write Less JavaScript, Achieve More with the Power of Data Attributes

Overview

Now.js is a JavaScript Framework designed to minimize JavaScript coding by using Data Attributes to control web page behavior and automatically invoke pre-installed features.

Core Philosophy

<!-- Instead of writing JavaScript like this... -->
<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>

<!-- Just use Data Attributes! -->
<form data-form data-action="/api/submit" data-method="POST">
  <!-- Your form content -->
</form>

No additional JavaScript needed! The framework handles everything automatically.

Key Features

Zero JavaScript Writing

• No JavaScript required for common tasks
• Control everything through HTML Data Attributes
• Automatic initialization on page load

Component-Based Architecture

• Powerful Component System
• Two-Way Reactive Data Binding
• Built-in Template Engine
• Automatic State Management

Rich UI Components

• Form Management - Automatic form handling
• DataTable - Data tables with sorting, filtering, pagination
• Animation System - Easy-to-use animation system
• Modal & Dialog - Ready-to-use popups and dialogs
• Autocomplete - Automatic search system
• Calendar - Calendar and date picker
• File Upload - File upload with preview
• Tags Input - Easy-to-use tag system

Advanced Features

• Router System - Single Page Application (SPA) Routing
• HTTP Client - Automatic API request handling
• Authentication - Auth system with Token Management
• i18n Support - Multi-language support
• Service Worker - PWA Support
• Error Handling - Automatic error management
• Event System - Powerful event system

Framework Goals

Now.js aims to:

1. Minimize JavaScript writing as much as possible
2. Increase development efficiency using Data Attributes
3. Work automatically without additional code
4. Simplify complexity for developers
5. Support all use cases from simple websites to large SPAs

Getting Started

Start using Now.js today and experience web development where you write less code and achieve more!

Installation Now.js

Method 1: Use CDN (jsDelivr)

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

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

<!-- Optional Modules (Use as needed) -->
<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: Add preload and preconnect for better loading performance

<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">

Method 2: Download from GitHub

1. Download from GitHub Repository
2. Extract and copy the Now/dist folder to your project
3. Include in your HTML:

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

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

Method 3: Clone from Git

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

Getting Started

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'
  });
});

Simple Component Structure

// Register a component using Now.getManager('component').define()
Now.getManager('component').define('counter', {
  // Enable reactive state
  reactive: true,

  // Initial component state
  state: {
    count: 0,
    title: 'Counter App'
  },

  // Computed properties - automatically recalculate when state changes
  computed: {
    doubleCount() {
      return this.state.count * 2;
    }
  },

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

  // Lifecycle hook - called when component is mounted
  mounted() {
    console.log('Counter component mounted!');
  },

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

Using Component in 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]
Component Data Attributes:

• data-component - Registered component name
• data-text - Display value from state or computed
• data-on - Bind event to method (format: event:method)
• data-model - Two-way binding with inputs
• data-for - Loop rendering (format: item of items)

Basic Usage Examples

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">Save</button>
</form>

Automatic features:

• ✅ 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">Name</th>
      <th data-sort="email">Email</th>
      <th data-field="actions">Actions</th>
    </tr>
  </thead>
</table>

Automatic features:

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

3. Animation

<div data-show="fadeIn" data-hide="fadeOut">
  Animated content
</div>

<button data-on-click="toggle" data-target="#myElement">
  Toggle Display
</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>

Documentation

Core Modules

Form & Input

• FormManager - Automatic form management
• FormError - Form error handling
• ElementFactory - Custom form element creation

Data & API

• ApiComponent - API-connected components
• ApiService - API request management
• HttpClient - Basic HTTP client
• ResponseHandler - Response handling

Table & Data Display

• TableManager - DataTable management
• GraphComponent - Charts and graphs

Routing & Navigation

• RouterManager - SPA Router System
• ScrollManager - Scroll management

Authentication

• AuthManager - Authentication system
• AuthGuard - Route protection
• AuthErrorHandler - Auth error handling
• AuthLoadingManager - Loading states
• TokenService - Token management

Events & Interactions

• EventManager - Core event system
• EventSystemManager - Event system management

Internationalization

• I18nManager - Multi-language system

Progressive Web App

• ServiceWorkerManager - PWA Support

Guides

• HTTP & API Guide - HTTP and API usage guide
• Authentication Guide - Authentication system guide

Real-World Examples

Example 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="Product Name">

  <input type="number"
         name="price"
         data-required
         data-min="0"
         placeholder="Price">

  <select name="category" data-required>
    <option value="">Select Category</option>
    <option value="1">Electronics</option>
    <option value="2">Clothing</option>
  </select>

  <textarea name="description"
            data-required
            placeholder="Description"></textarea>

  <button type="submit">Save</button>
</form>

Example 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">Product Name</th>
      <th data-sort="price" data-field="price">Price</th>
      <th data-field="category">Category</th>
      <th data-field="actions">Actions</th>
    </tr>
  </thead>
</table>

Example 3: Reactive Component

<div data-component="ProductList" data-source="/api/products">
  <!-- Search -->
  <input type="text"
         data-model="search"
         placeholder="Search products">

  <!-- 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)">
        Add to Cart
      </button>
    </div>
  </div>

  <!-- Empty State -->
  <div data-if="filteredProducts.length === 0">
    <p>No products found</p>
  </div>
</div>

Architecture

Framework Workflow

1. Load Now.js - Framework loads and becomes ready
2. Scan DOM - Find elements with Data Attributes
3. Auto-Initialize - Create Components and Managers automatically
4. Bind Events - Attach Event Handlers based on Attributes
5. Ready - Ready to use without additional code

Core Concepts

1. Declarative Programming

Use HTML Attributes to declare what you want instead of coding how to do it

2. Convention over Configuration

Use sensible defaults, reduce complex configuration

3. Progressive Enhancement

Start with basics, add features as needed

4. Zero Configuration

Works immediately without setup

Important Data Attributes

Form Attributes

• data-form - Define as managed form
• data-action - URL for data submission
• data-method - HTTP Method (GET, POST, PUT, DELETE)
• data-required - Required field
• data-validate - Validation rules
• data-on-success - Action on success
• data-on-error - Action on error

Table Attributes

• data-table - Define as managed table
• data-source - URL for data loading
• data-pagination - Enable/disable pagination
• data-search - Enable/disable search
• data-sort - Sortable column
• data-row-actions - Actions for each row

Component Attributes

• data-component - Component name
• data-bind - Data binding
• data-model - Two-way data binding
• data-for - Loop template
• data-if - Conditional rendering
• data-show - Show animation
• data-hide - Hide animation

Event Attributes

• data-on-click - Click event
• data-on-change - Change event
• data-on-submit - Submit event
• data-target - Target element

Advantages of Now.js

For Developers

• ✅ Write less code - Reduce development time
• ✅ Easy to read - Code is easy to understand and maintain
• ✅ No build required - No Webpack, Babel, etc.
• ✅ Easy to learn - Low learning curve
• ✅ Flexible - Works with other libraries

For Projects

• ✅ Performance - Fast loading, fast execution
• ✅ Maintainable - Easy to maintain
• ✅ Scalable - Scales as needed
• ✅ SEO Friendly - SEO support
• ✅ Accessible - Accessibility support

When to Use Now.js

Ideal For

• ✅ General web applications
• ✅ Admin Panels / Dashboards
• ✅ CRUD Applications
• ✅ Forms-heavy Applications
• ✅ Data-intensive Applications
• ✅ Single Page Applications (SPA)
• ✅ Progressive Web Apps (PWA)

May Not Be Ideal For

• ❌ Games requiring very high performance
• ❌ Very complex real-time applications
• ❌ 3D Graphics Applications

Learning Path

Recommended Steps

1. Start with Basics

   • Read FormManager to learn form management
   • Try creating a simple form

2. Understand Data Attributes

   • Study commonly used attributes
   • Try them in a small project

3. Learn Components

   • Read ApiComponent
   • Create your first component

4. Study Advanced Features

   • RouterManager for SPA
   • AuthManager for authentication
   • TableManager for DataTable

5. Build Real Projects

   • Apply knowledge to real projects
   • Experiment with different features