Gyron

Gyron.js已经正式发布，您可以用于生产环境。后续我们将会推出官方的 UI 组件和更多的实际应用场景，尽情期待吧！

Gyron.js是一款灵活的响应式前端框架，压缩后可减少到 9KB ，相比于其它框架，体积上面它有更大的优势。

Gyron.js运行时的基准测试结果可以前往js-framework-benchmark。 Gyron.js的 0.0.16 版本之前的基准测试结果不太理想，在 0.0.16 版本中已经优化了很大部分的性能，在某些场景下速度提升了 7 倍左右，具体表现可以参考https://i.imgur.com/QZdm5NW.png这张图（截图拼凑，不太美观）

在线体验

如果你想使用Gyron.js进行开发但是电脑上没有相关环境，可以使用自带浏览器访问我们的在线体验地址，在里面可以编写任何的用户代码，并且可以得到实时反馈。

去codesandbox直接在线体验。

也可以直接使用我们提供的在线编辑平台体验。

index

TSX

LESS

资源加载中...

在网站中使用 Gyron

我们可以使用各种 CDN 服务来访问我们的代码，在你的页面中添加一个script标签，并且加上type="module"属性，然后再通过 esm 模块的形式导入createInstance方法，创建一个 Gyron.js 应用实例。

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

<script type="module">
  import { createInstance, h } from 'https://cdn.skypack.dev/gyron'
  createInstance(h('button', 'Like')).render('#root')
</script>

在大多数情况下，JSX 语法更接近原始语法，学习成本不高，所以我们推荐使用 JSX 构建我们的应用。

你可以通过在线编译器试用 JSX。

上述代码通过 JSX 表示如下

import { createInstance } from 'gyron'
createInstance(<button>Like</button>)

创建一个新的 Gyron 应用

接下来教程会带着大家如何从 0 搭建一个开发环境，并启动 HelloWorld 项目。

通过 CLI

首先，我们需要全局安装@gyron/cli，然后运行gyron create <instance-name>。

或者使用npx @gyron/cli create <instance-name>，然后根据提示进行下一步。

完成之后，我们根据提示，进入到对应目录下执行安装依赖命令npm install。安装完依赖后就可以使用npm run start启动项目，运行完成后打开我们的浏览器输入http://localhost:3000就可以看到我们的应用。

将上面描述转换为命令如下：

# 全局安装 CLI
npm install @gyron/cli -g
# 创建项目
gyron create <instance-name>
# 进入项目
cd <instance-name>
# 安装依赖
npm install
# 运行
npm run start

从 0 开始

创建一个前端应用通常由这些工具链完成：

包管理器。比如yarn、npm、pnpm。
打包器。比如webpack、vite、esbuild。
编译器。比如babel、tsc。

在阅读后面教程时，会有一个前置条件，您的电脑中需要安装 node 和 npm。并且 node 的版本必须大于 14。

先使用包管理器初始化一个项目，详情参阅npm init。

接着安装相关依赖

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

然后在 package.json 文件中编写一个启动脚本和构建脚本。

package.json

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

安装后在项目根目录中创建一个vite.config.js文件，并写入下面的内容。

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 })],
  })
}

完成后在根目录再创建一个 index.html 入口文件。并指定一个根节点文件，通常都叫 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')

最后再运行脚本npm run start，再打开浏览器输入http://localhost:3000地址，就可以看到一个按钮，至此，就完成了一个项目从 0 到 1 的过程。

到这里也只是完成了项目的基本结构，还可以引入eslint、prettier、typescript这些优秀的库，在多人协作开发时尤其有用。

文档名词解释：