遥遥领先！华为自研的前端框架开源了

大家好，我是「前端实验室」爱分享的了不起~

在程序员界，vue、react的大名相信大家都听过，今天给大家介绍一个新的前端框架，由遥遥领先的华为开源的——openInula

openInula

openInula 是一款用于构建用户界面的 JavaScript 库，提供响应式 API 帮助开发者简单高效构建 web 页面，比传统虚拟 DOM 方式渲染效率提升30%以上！同时把大语言模型、前端 AI 赋能结合在一起，主打一个高性能、全场景、智能化。

特点

• 响应式API：相比传统虚拟DOM方式，提升渲染效率30%以上。
• 兼容React API:完全兼容React API，支持React应用无缝切换至openInula。
• 大模型驱动: 由大模型驱动的智能框架
• 核心组件：官方提供提供两套开发 API、六款常用组件，助力您高质高效开发。
• 5大常用功能：状态管理器、路由、国际化、请求组件、应用脚手架

安装使用

方式一：npm安装

通过命令行安装

npm install openinula

方式二：脚手架安装

使用openInula脚手架安装

npx create-inula <项目名>

安装过程中可以选择 webpack、 vite两种打包方式

开发

与react一样 使用 JSX语法进行开发

import Inula, { render, Component } from 'openinula';

// 示例组件 - 按钮组件
class Button extends Component {
  render() {
    const { text, onClick } = this.props;
    return (
      <button onClick={onClick}>{text}</button>
    );
  }
}

// 示例组件 - 表单组件
class Form extends Component {
  handleSubmit = (event) => {
    event.preventDefault();
    // 处理表单提交逻辑
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <input type="请输入文本" />
        <Button text="提交" onClick={this.handleSubmit} />
      </form>
    );
  };
}

// 示例组件 - 页面组件
class Page extends Component {
  render() {
    return (
      <div>
        <h1>示例页面</h1>
        <Form />
      </div>
    );
  };
}

// 渲染页面
render(<Page />, document.getElementById('root'));

官方组件

同时openlnula提供了一系列的组件

• 状态管理器：Inula-X是openInula默认提供的状态管理器，无需额外引入三方库，就可以简单实现跨组件/页面共享状态。
• 路由：Inula-router为openInula提供前端路由的能力，是构建大型应用必要组件。
• 请求：Inula-request 涵盖常见的网络请求方式，并提供动态轮询钩子函数给用户更便捷的定制化请求体验。
• 国际化：Inula-intl提供了国际化功能，涵盖了基本的国际化组件和钩子函数，便于用户在构建国际化能力时方便操作。
• 脚手架:Inula-create是一套使用openInula为前端开发框架的脚手架工具。它预置了一系列项目模板，允许开发者通过命令行按需一键生成可运行的项目代码。
• 调试工具:Inula-dev-tools是一个为openInula开发者提供的强大工具集，能够方便地查看和编辑组件树、管理应用状态以及进行性能分析，极大提高了开发效率和诊断问题的便捷性。