I made a cdn library based on react

Malik Whitten — Thu, 08 Jun 2023 02:21:44 +0000

Visi.js is not a framework but a library that enhances the usage of React in a CDN version. While it may seem unconventional, our team has found it to be beneficial in certain scenarios. I understand that some may find it amusing or even consider it inefficient for production use, but I beg to differ.

In fact, our documentation site is entirely built using Visi.js and has shown significant performance improvements compared to using the base CDN version of React. Visi.js handles compilation off the main thread and optimizes the page by scanning for opportunities to improve performance.

Here is an image of cfr performance:

You may be wondering why we chose to develop Visi.js. The idea came about when I was experimenting with the React CDN because I wanted to avoid dealing with modules and dependencies. This approach allowed me and other developers to code more efficiently and make changes quickly. However, I encountered an issue: I wanted to import components inside JSX files, but the traditional React approach required everything to be within a single file. It was only later, after reading the Babel documentation, that I discovered it was possible. I wish I had known earlier, but the experience led me to create "disposable components."

Disposable components are compiled using service workers and then loaded asynchronously. Once I witnessed the speed of this approach, I immediately began working on Visi.js.

I won't go into the nitty-gritty details of the development process here, but if you're interested, you can check out the npm repository to explore the versions and updates over the past month.

But is that all? Not quite. Version 1.7.6 introduced Component-First Rendering (CFR), which involves caching components that render as soon as the page loads. This significantly improved performance compared to versions 1.0.0 to 1.4.4, where prefetching was used. Prefetching turned out to be a major mistake, as you can read about in the npm versions. I learned from that experience and created CFR to enhance browser load times. When combined with production mode, which optimizes asset links and lazy loads images, your site can achieve performance comparable to Server-Side Rendering (SSR) or Static Site Generation (SSG), with just a slight difference of 1%.

While I could demonstrate this in code, it would be quite complex to explain. Instead, I invite you to explore our documentation, where you can find examples and further information: New Visi.js Documentation

// for more scroll below and click older docs

In conclusion, if someone tells you that using a CDN is slow or that your apps built with Visi.js are a waste of time, I kindly suggest that they reconsider their opinion. While Visi.js may not be perfect, it provides a viable option for those seeking faster workflows.

Links:
Website
Github repo
Npm repo
Older docs

I created a framework called lazyjs based on json!

Malik Whitten — Thu, 29 Dec 2022 06:48:09 +0000

Lazy JS

LazyJS is a programming language that is designed to make it easier to write and manage complex code by reducing the amount of code needed to achieve the desired results. It is based on the JSON object-oriented language and is intended for use in large and complex workflows. LazyJS aims to provide a concise and organized way to write code, while still maintaining the flexibility and power of a full-featured programming language.

Syntax

lazyjs syntax is relatively simple if you understand json syntax:

{
  /* Variables can be declared for extensive use!*/
 "variable":{
  "main":{
   // there are two value setters currently in v1.0
   "value":"hello world"
   // this can also be used to add subtract, multiply and divide
   "value":"1+2*4/4"
  }
  // to get the variable value we can use return this is how we print stuff!
  "return":"main"
  // output --> 3
 }



}

## Features

Note: as lazy keeps progressing overtime more will be added, here is what v1.0 has

Http Web Server

// Simple way to serve html files via lazy js
{
  "variable":{
   "main":"index.html"
 }
  "http":{
   "port":8080,
   // routes is your webpages routing this sets binds /main to the ip
   "routes":{
    "1":"main",
  }
  // pages is how u bind html files to the router! it returns the variable.main! - note this only works if dom is not present in the file!
  "pages":{
  "1":"main"
 }
 }
}

Virtual Dom

"http":{
   "port":8080,
   "routes":{
    "1":"/main",
  }
  "pages":{
  "1":"main"
 }
 // when dom is in use regular static pages will not work!
 "dom":{
    // this is the main element when using vdom
    "div":{
      "1":"<center>",
      "2":"<p style='color:#938E8E; font-weight:400; font-size: 70px; font-family:Arial, Helvetica, sans-serif ; position:relative; top:120px '>505</p>",
      "3":"<p style=' font-family:Arial, Helvetica, sans-serif ; color:#dd6464; position:relative; top:50px;'>This is lazyjs v2.0 Virtual Dom</p>",
      "4":"</center>"
    }
   }
 }

Currently still working on it :}

Release date: Sometime January!

DEV Community: Malik Whitten

I made a cdn library based on react

I created a framework called lazyjs based on json!

Lazy JS

Syntax