Quick Start

Welcome to the Visi.js documentation! Here you will learn how to use Visi and simple concepts.

Workflow

Visi is designed to seamlessly integrate with your existing React workflow. As it is built on top of React, the only aspect you'll need to sacrifice is the node modules you have utilized in your project. However, you'll be able to leverage the benefits and libraries that Visi includes without needing to overhaul your entire React setup. By incorporating Visi into your project, you can enhance your React application without significant rewrites or disruptions to your existing codebase.

Components

Visi takes a different approach compared to Node.js or regular React CDN setups. It utilizes asynchronous compiling techniques where each component is compiled once on a service worker. This approach enables multithreading capabilities, which enhance's the performance of your application.

When importing components in Visi, you'll need to adjust your code to work with the asynchronous nature of component compilation. Instead of directly importing components, you may need to use hooks like useState or variables to utilize the elements within the component you are importing.

For example

function MainComponent(){
  dispose('/path/to/component', (Component) =>{
   // do something with component!
  }, {
  props...
  })
}

In the example we imported our component within a component using an asynchronous approach -> you can save it to a state variable or use directly within your code.

While components in Visi are compiled separately and set up to render as soon as both are finished, it is advisable to import only specific components that require separation, such as models or cards. For optimal layout stability, it is recommended to keep the main content within the initially rendered component. By following this approach, you can take advantage of the asynchronous compilation while maintaining a consistent layout structure.

Utilizing the router

When utilizing the ReactRouter() we first bind the root element simply type the id of the element in app.bindRoot()

const app = new ReactRouter()
// bind the rendering root element
app.bindRoot("app")

Now we can start rendering our initial components at the routes we want- First we call the root route since we need a page as soon as the webpage is shown.

 
app.root("/", (req, res)=>{
   dispose('/views/main.jsx', (Main) => {
     res.jsx(<Main />)
     res.return()
   }, null)
})

By calling res.return() we are telling the route to release the last hook which allows us to stop the route from listening to new requests until the next initial load. This helps prevent memory leaks with event listeners.

Global objects

all methods within react CDN and Visi methods are all binded to the window, so you do not need to import each from the library!