扫一扫分享
openInula 是一款用于构建用户界面的 JavaScript 库,提供响应式 api 帮助开发者简单高效构建 web 页面,比传统虚拟 dom 方式渲染效率提升30%以上!同时 openInula 提供与 react 保持一致的 API,并且提供5大常用功能丰富的核心组件:状态管理器、路由、国际化、请求组件、应用脚手架,以便开发者高效、高质量的构筑基于 openInula 的前端产品。
· 高精度响应式渲染机制
openInula的响应式API在初次运行时绑定状态数据与网页结构,使得在后续数据的变动时,仅需触发对应元素的渲染。相较于传统的Hooks API,响应式API大幅减少了渲染用时,使得综合性能提升超过30%。
· 前端全场景解决方案
openInula提供了状态管理、路由、请求、国际化等功能组件,覆盖90%以上前端开发场景。其一体化的脚手架与适配器设计,使开发者快速高效地构建前端项目,并与现有生态轻松集成,实现前端全场景解决方案。
· LLM提升开发体验
openInula正在与上海交通大学软件学院合作,积极探索基于大语言模型的前端开发模式。研发中的AI for Debug调试工具,以及未来的意图驱动代码生成模型,都将大大提高前端开发的效率,并进一步提升开发体验。
inula-X 是 openInula 默认提供的状态管理器,无需额外引入三方库,就可以简单实现跨组件/页面共享状态。 inula-X 与 Redux 相比,可创建多个 Store,不需要在 Reducer 中返回 state 并且简化了 Action 和 Reducer 的创建步骤,原生支持异步能力,组件能做到精准重渲染。inula-X 均可使用函数组件、class 组件,能提供 redux 的适配接口及支持响应式的特点。
inula-router 是 openInula 生态组建的一部分,为 openInula 提供前端路由的能力,是构建大型应用必要组件。 inula-router 涵盖 react-router、history、connect-react-router 的功能。
inula-request 是 openInula 生态组件,涵盖常见的网络请求方式,并提供动态轮询钩子函数给用户更便捷的定制化请求体验。
inula-intl 是基于 openInula 生态组件,其主要提供了国际化功能,涵盖了基本的国际化组件和钩子函数,便于用户在构建国际化能力时方便操作。
inula-dev-tools 是一个为 openInula 开发者提供的强大工具集,能够方便地查看和编辑组件树、管理应用状态以及进行性能分析,极大提高了开发效率和诊断问题的便捷性。
inula-cli 是一套针对 openInula 的编译期插件,它支持代码优化、JSX 语法转换以及代码分割,有助于提高应用的性能、可读性和可维护性。
方式一:使用 npm 安装
在命令行中运行以下命令来通过 npm 安装 openInula:
npm install openinula
上述命令会将最新版本的 openInula 包添加到您的项目中,当然,您也可以指定特定版本来安装包。最新版本号请在 npm 官网查看:访问官网
方式二:使用 yarn 安装
openInula 也支持 yarn 命令安装,前提已安装了 yarn,如未安装,则通过 npm install -g yarn 命令来安装(全局安装)。
在命令行中运行以下命令来通过 yarn 安装 openInula:
yarn add openinula
如果你已经安装了openInula,则可以简单地创建一个新的 JavaScript 文件,尝试使用 openInula,例如 index.jsx,并在其中添加以下代码:
import { render } from 'openinula';
const HelloWorld = () => {
return (
<div>
<h1>Hello, World!</h1>
</div>
);
};
render(
<HelloWorld/>,
document.getElementById('root')
);
上述代码片段主要分为三部分,首先通过 import 语法导入 openInula 包,其次构建一个名为 HelloWorld 的函数组件,最后将 HelloWorld 组件挂载在 html 中 id 为 root 的 DOM元素上,详细使用请查阅API参考Inula。index.jsx 经过 babel 编译后,您将看到一个显示 "Hello, World!" 的页面。
步骤一: 启动openInula脚手架
在您需要创建项目的目录下执行以下命令:
npx create-inula <项目名>
步骤二: 选择需要项目模板
执行启动命令后,您将收到以下回显信息询问,可根据回显信息进行相应的输入:
Need to install the following packages:create-inula@0.0.2
Ok to proceed? (y) y
? Please select the template (Use arrow keys)
> Simple-app
在创建项目过程中脚手架提供 Simple-app 模板供开发者使用:Simple-app 已默认安装 openInula,开发者可以直接在项目中专注于核心代码的开发。
步骤三:选择打包方式
在创建项目过程中有两种打包方式供选择,您可以根据自己使用习惯选择:
? Please select the build type (Use arrow keys)
> webpack
vite
至此,可以使用 openInula 框架,通过 npm run start 命令运行项目,您会看到简单的 openInula 的示例。当然,您也可以基于 openInula 框架构建您的 web 项目。
手机预览