Noor JS The New JavaScript UI library

Yahya Messelmi — Sun, 12 Jan 2025 16:26:45 +0000

NoorJs a lightweight UI JavaScript framework designed to help you build fast, efficient, and scalable applications. NoorJs is built around the concept of First-Time-Rendering, which means your component is rendered once at the start and won't be re-rendered unless you explicitly choose to. You have full control over when and how your components are rendered, allowing for optimized performance.

Unlike other frameworks, NoorJs renders components directly to the DOM without relying on a Virtual DOM (VDOM). You can modify your component's view effortlessly by calling a simple function, without triggering a re-render.

NoorJs also introduces a powerful way to manage state. You can listen for changes to specific states and react accordingly, ensuring your components stay in sync with your data. Additionally, lifecycle functions enable you to perform tasks like data fetching or state updates at key points in your component's lifecycle.

Sharing data between components is made incredibly simple with the Channel API. Whether you're passing data to child components, parent components, or components outside of the direct scope, the Channel API allows for seamless and efficient data flow.

Continue reading these docs to explore how NoorJs can transform your approach to building modern web applications.

Key Features :

Lightweight Library
First-Time-Rendering
Element-Based Components
Direct DOM Rendering
Effortless View Modification
Powerful State Management
Channel API
Explicit Rendering Control
Provides modern framework feature like JSX

This's simple counter app will show you the power of NoorJs

import { createRoot, renderRoot, element, Component } from "@noorjs/core";

// app component
function App(this: Component) {
  // initializing the component by call the element plug function and setting the component HTML tag
  element("div", this);
  // setting a counter state
  const { getCounter, setCounter } = this.state(0);

  // adding an event listener to increase the counter state whenever the component is clicked
  this.setEvent("onClick", () => {
    // increasing the counter state
    setCounter((c) => c + 1);
    // rerendering the app when the counter is clicked
    this.render();
  });

  console.log("This runs once");

  // returning an arrow function that returns the JSX to be rendered
  return () => <h2>{getCount()}</h2>;
}

// creating the root
const root = createRoot();

// render the component
renderRoot(root, [<App />]);

In this simple counter app we initialized our App component by using the element plug function then we created the counter state with 0 as initial value ,then we added an onClick event listener with setEvent function to increase the counter state and rerender the component with this.render method (This Is The Power Of NoorJs. Render It When You Need It) then we returned JSX.

NoorJs treats each component as an HTML element that you choose when you initialize your component. For more examples see the Documentation

🚧 NoorJs is still under development and it has many bugs and issues and needs your help and contributions to make it stable

Please see the Issues and get started by contributing to it

GITHUB
https://github.com/MESSELMIyahya/NoorJs

Forem: Yahya Messelmi

Noor JS The New JavaScript UI library