jac-client 0.2.4

Build full-stack web applications with Jac - one language for frontend and backend.

Jac Client

Build full-stack web applications with Jac - one language for frontend and backend.

Jac Client enables you to write React-like components, manage state, and build interactive UIs all in Jac. No need for separate frontend frameworks, HTTP clients, or complex build configurations.

---

Features

• Single Language: Write frontend and backend in Jac
• No HTTP Client: Use jacSpawn() instead of fetch/axios
• React Hooks: Use standard React useState and useEffect hooks
• Component-Based: Build reusable UI components with JSX
• Graph Database: Built-in graph data model eliminates need for SQL/NoSQL
• Type Safety: Type checking across frontend and backend
• Vite-Powered: Optimized production bundles with Vite

---

Quick Start

Installation

pip install jac-client

Create a New App

jac create --cl my-app
cd my-app
jac serve src/app.jac

Visit http://localhost:8000/page/app to see your app!

Note: The --cl flag creates a client-side project with an organized folder structure. Without --cl, jac create creates a standard Jac project.

---

Documentation

For detailed guides and tutorials, see the docs folder:

• Getting Started Guide - Complete beginner's guide
• Routing - Multi-page applications with declarative routing (<Router>, <Routes>, <Route>)
• Lifecycle Hooks - Using React hooks (useState, useEffect)
• Advanced State - Managing complex state with React hooks
• Imports - Importing third-party libraries (React, Ant Design, Lodash), Jac files, and JavaScript modules

---

Example

Simple Counter with React Hooks

cl import from react { useState, useEffect }

cl {
    def Counter() -> any {
        [count, setCount] = useState(0);

        useEffect(lambda -> None {
            console.log("Count changed:", count);
        }, [count]);

        return <div>
            <h1>Count: {count}</h1>
            <button onClick={lambda e: any -> None {
                setCount(count + 1);
            }}>
                Increment
            </button>
        </div>;
    }

    def app() -> any {
        return Counter();
    }
}

Full-Stack Todo App

cl import from react { useState, useEffect }
cl import from '@jac-client/utils' { jacSpawn }

# Backend: Jac nodes and walkers
node Todo {
    has text: str;
    has done: bool = False;
}

walker create_todo {
    has text: str;
    can create with `root entry {
        new_todo = here ++> Todo(text=self.text);
        report new_todo;
    }
}

walker read_todos {
    can read with `root entry {
        visit [-->(`?Todo)];
    }
}

# Frontend: React component
cl {
    def app() -> any {
        [todos, setTodos] = useState([]);

        useEffect(lambda -> None {
            async def loadTodos() -> None {
                result = await jacSpawn("read_todos", "", {});
                setTodos(result.reports);
            }
            loadTodos();
        }, []);

        return <div>
            <h1>My Todos</h1>
            {todos.map(lambda todo: any -> any {
                return <div key={todo._jac_id}>{todo.text}</div>;
            })}
        </div>;
    }
}

---

Requirements

• Python: 3.12+
• Node.js: For npm and Vite
• Jac Language: jaclang (installed automatically)

---

️ How It Works

Jac Client is a plugin that:

1. Compiles your .jac client code to JavaScript
2. Bundles dependencies with Vite for optimal performance
3. Provides a runtime for reactive state and components
4. Integrates seamlessly with Jac's backend graph operations

---

Learn More

• Full Documentation: See docs/ for comprehensive guides
• Examples: Check jac_client/examples/ for working examples
• Issues: Report bugs on GitHub Issues

---

License

MIT License - see LICENSE file.

---

Happy coding with Jac!