Gyron

Gyron.js has been officially released. You can use it in production environments. We will release official UI components and more practical application scenarios in the future. Stay tuned!

Gyron.js is a flexible reactive frontend framework that can be reduced to 9KB when compressed. Compared to other frameworks, it has greater advantages in terms of size.

Benchmark test results of Gyron.js runtime can be found at js-framework-benchmark.

The benchmark test results before version 0.0.16 of Gyron.js were not ideal. Version 0.0.16 has optimized a large part of performance. In some scenarios, the speed has increased by about 7 times. Specific performance can be found in this image (screenshot pieced together, not very beautiful).

Online Experience

If you want to develop with Gyron.js but don't have the relevant environment on your computer, you can visit our online experience address with your browser's Sandbox. You can write any user code in it and get real-time feedback.

Go to codesandbox for online experience directly.

You can also experience it directly using our online editing platform we provided.

index

TSX

LESS

资源加载中...

Using Gyron on Websites

We can access our code through various CDN services. Add a script tag to your page, add the type="module" attribute, then import the createInstance method in esm module form, and create a Gyron.js app instance.

<div id="root"></div>

<script type="module">
  import { createInstance, h } from 'https://cdn.skypack.dev/gyron'

  createInstance(h('button', 'Like')).render('#root')
</script>

In most cases, JSX syntax is closer to native syntax and has a low learning cost, so we recommend using JSX to build our apps.

You can try JSX through the online compiler.

The above code in JSX is:

import { createInstance } from 'gyron'

createInstance(<button>Like</button>)

Create a New Gyron App

Next, the tutorial will show you how to build a development environment from scratch and launch a HelloWorld project.

Through CLI

First, we need to install @gyron/cli globally, then run gyron create <instance-name>.

Or use npx @gyron/cli create <instance-name>, then follow the prompts for the next step.

After completion, enter the corresponding directory according to the prompts and execute the install dependency command npm install. After installing the dependencies, you can start the project with npm run start. After running, open the browser and enter http://localhost:3000 to see our app.

Convert the above description into commands as follows:

# Install CLI globally
npm install @gyron/cli -g

# Create project
gyron create <instance-name>

# Enter project
cd <instance-name>

# Install dependencies
npm install

# Run
npm run start

From Scratch

Creating a frontend app is usually done by these toolchains:

Package manager. Such as yarn, npm, pnpm.
Bundler. Such as webpack, vite, esbuild.
Compiler. Such as babel, tsc.

When reading the following tutorials, there will be a prerequisite that node and npm need to be installed on your computer. And node version must be greater than 14.

First initialize a project with a package manager. See npm init for details.

Then install related dependencies:

npm install gyron @gyron/babel-plugin-jsx vite -D

Then write a start script and build script in the package.json file.

package.json

{
  "scripts": {
    "build": "vite build",
    "start": "vite"
  }
}

After installation, create a vite.config.js file in the root directory of the project, and write the following:

vite.config.js

import { babelViteJsx } from '@gyron/babel-plugin-jsx'
import { defineConfig } from 'vite'

export default ({ mode }) => {
  return defineConfig({
    define: {
      __DEV__: mode === 'development',
    },
    plugins: [babelViteJsx({ hmr: mode === 'development', setup: true })],
  })
}

Then create an index.html entry file in the root directory. And specify a root node file, usually called index.jsx.

index.html

<div id="root"></div>

<script type="module" src="./src/index.jsx"></script>

src/index.jsx

import { createInstance } from 'gyron'

createInstance(<button>Like</button>).render('#root')

Finally run the script npm run start, then open the browser and enter the address http://localhost:3000. You can see a button. This completes the process from 0 to 1 for a project.

At this point, only the basic structure of the project is completed. Excellent libraries like eslint, prettier, and typescript can also be introduced, especially useful for collaborative development.

Glossary: