一等奖 5 万，华为 openinula 的开源大赛有点东西啊

前几天和华为 openinula 项目组总负责人陈超涛闲聊，无意中得知他们又组织了一次开源大赛。

为什么是『又』呢，因为上一次，我带队参加了，并且还得了个三等奖。你们可不要小瞧三等奖，许多大厂的参赛作品也只有三等奖，而我作为散兵游将，能拿到三等奖已经非常不容易了，含金量非常高。

但是当我点进去看了一眼大赛主页，发现这一次报名的居然才 7 个人，这竞争也太小了吧。这宣传力度该不会只是在公司内部群发了一下吧？

然后我就看了一下比赛的题目，发现大多数都是跟 openinula 生态建设有关系的。所以我就想，是不是大家对 openinula 不了解，也就没心思来搞这个了。

于是我就跟涛哥沟通了一下，最终我们决定在周一晚上八点钟，由他主讲，为大家详细介绍一下 openinula 的底层实现机制，让更多的人能够有机会参与到这个比赛中来。于是，就有了这个主题分享会议，具体信息如下：

分享主题

题目：openInula 项目与实现机制介绍

时间:  07/15(周一) 20:00-21:00

分享方式：华为会议

会议ID：95121182

会议密码：916305

External：：https://app.huawei.com/wmeeting/join/95121182/MmnTDkZ7kWK3U6hA0OSojYO7boOGSYJzD

不管大家是否有意愿参加比赛，都欢迎大家前来观看，也是一个不可多得的学习机会。

如果你决定参与这次主题分享，并愿意和我们讨论，欢迎大家添加我的微信 icanmeetu，一起交流学习心得。

大赛报名地址如下

https://www.gitlink.org.cn/competitions/track1_openInula

openinula 介绍

openinula 是华为内部孵化的一款前端框架，定位上与 React 相似。他的立项之初包含了两个阶段的大目标。

第一个阶段就是完全覆盖兼容 React，能够保证公司内部大量的 React 项目无缝迁移。因此我们可以看到，openinula 在第一个版本中，几乎包含了所有 React 的 API。目前，这一阶段已经取得圆满的成功。

第二个阶段就是在第一个阶段的基础之上发展出来自己的特色。第二个阶段被他们内部团队称之为 api 2.0，我们已经可以在如下地址中，初步尝试感受 api 2.0 的魅力。

https://inula-next-repl.vercel.app/

api 2.0 语法介绍

说实话，当我看到 api 2.0 的时候，还是非常激动的，因为设计得确实的太简洁了。我们先来看一个例子，可以使用如下的方式定义一个响应式组件

function App() {
  let count = 20

  function __click() {
    count += 1
  }

  return (
    <div>
      <Button onClick={__click}>count++</Button>
      <h1>Hello from inula-next!! {count}</h1>
    </div>
  )
}

代码的演示效果如下。

它遵循了无 API 的设计原则。这一点确实太酷了。在充分借鉴 React 函数式设计的基础之上，又对语法进行了大胆的简化。

watch

使用watch时，函数组件体内每一个非赋值语句都会被自动用于监听数据的变化。在数据源变化后重新运行 watch 函数

例如下面这个例子，只有 data 会被监听。

const FetchComponent = ({ url }) => {
  let data;
  
  const realUrl = baseUrl + url;

  watch(() => {
    fetch(realUrl)
      .then(response => response.json())
      .then(_data => {
        data = _data;
      });
  });

  return (
    <div>
      <h2>Data Fetched</h2>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
};

jsx 借鉴了 react 中的语法，但是又不同于 react。例如，它内置了 if，else-if，else 标签用于条件判断。

const TRAFFIC_LIGHTS = ["red", "orange", "green"];

export default function TrafficLight() {
  let lightIndex = 0;

  const light = TRAFFIC_LIGHTS[lightIndex];

  function nextLight() {
    lightIndex = (lightIndex + 1) % TRAFFIC_LIGHTS.length;
  }

  return (
    <>
      <button onClick={nextLight}>Next light</button>
      <p>Light is: {light}</p>
      <p>
        You must
        <if cond={light === "red"}>
          <span>STOP</span>
        </if>
        <else-if cond={light === "orange"}>
          <span>SLOW DOWN</span>
        </else-if>
        <else-if cond={light === "red"}>
          <span>GO</span>
        </else-if>
      </p>
    </>
  );
}

也内置了 for 标签用于遍历数据

export default function Colors() {
  const colors = ["red", "green", "blue"];
  return (
    <ul>
      <for each={colors}>{(color) => <li>{color}</li>}</for>
    </ul>
  );
}

openinula 还明确的提供了生命周期函数

export default function PageTitle() {
  let pageTitle = "";

  didMount(() => {
    pageTitle = document.title;
  });

  return <p>Page title: {pageTitle}</p>;
}

更详细的介绍，大家可以通过 https://gitee.com/openInula/rfcs/blob/master/src/002-zouyu-API2.0.md 查看。

看到这样的 API 设计，还是非常期待他的生态能够发展成熟的那天。

大赛赛题介绍

为了让更多的小伙伴能够融入到本次开源大赛的比赛中来，我们组织了这次技术分享活动。大家在参与之后，可以根据自己的能力，选择自己最擅长的赛题准备参赛作品。

⭕ 赛题一：openInula API2.0（零API、编译优先、高性能）

openInula API-2.0是一套完整API，目标是能使用原生JS语法和JSX来编写接近原生JS性能的设计。目前已具备初步能力试用能力，需要提升对JSX灵活度的支持能力，让框架具有完整jsx灵活性的同时提供静态编译带来的高性能。

⭕ 赛题二：openInula AI代码生成器（基于图片生成代码）

openInula AI 代码生成工具是一个利用大语言模型能力,结合视觉识别技术，生成基于 openInula 生态和特定UI组件库的应用页面代码的工具。

⭕ 赛题三：openInula 元框架（基于插件、组装式）

openInula 元框架是一个用于构建 web 应用程序的 openInula 框架，用户可以使用 openInula 来构建用户界面，并使用元框架提供的附加功能来快速实现和优化开发需求。

⭕ 赛题四：openInula 页面调试工具（基于chrome的插件）

目前 openInula 框架页面调试工具已实现一些基础能力，但对于性能分析、可视化及AI辅助调试功能等进阶功能有所缺失，本项目需要参与者选择一点或几点进一步提升调试工具基础能力和易用性能力。

⭕ 赛题五：openInula 渲染器设计（定义渲染器接口）

openInula是一款响应式前端框架，可以运行在浏览器端。前端领域除了web还包括移动端和小程序，为了方便二次开发集成框架，统一web、移动端和小程序，openInula将compiler解耦。这样开发者可以自定义compiler，openInula不再关注渲染形式，实现业务代码的跨端。

⭕ 赛题六：openInula 测试工具（类似@testing-library/react）

基于 openInula 应用程序的测试工具库，它主要用于提供了一套简单、直观的 API，帮助开发人员编写有效的、可维护的测试代码。

⭕ 赛题七：openInula 服务端渲染

⭕ 赛题八：openInula 新API设计开发（可参考React19 API）

参赛指南

⭕ 步骤一：赛事报名

报名须知：

（1）参赛对象：高校教师、学生，企业从业人员，自由职业者

（2）组队方式：参赛队伍由1名导师（可选）和不超过5名成员组成

（3）截止时间：2024年9月20日23:30

报名步骤：

进入官网：https://www.gitlink.org.cn/competitions/track1_openInula，在本页面点击右上角“立即报名”按钮，进入报名页面，填写报名信息，报名参赛。报名一般流程如下：

（1）创建战队：点击“创建战队”，填写战队名称，添加指导老师和队员，即可完成战队创建。

（2）加入战队：点击“加入战队”，填入邀请码，即可加入已有战队。注意：每名学生在每项赛事中只能参与1个战队，每名老师可以担任多个参赛小组的指导老师。

（3）战队编辑：战队创建者可以在报名列表中对自己创建的战队进行编辑和修改，包括组员的添加、删除，指导老师的添加，战队名称的修改等。

⭕ 步骤二: 作品提交

openlnula 项目在 GitLink 平台的地址为：https://gitlink.org.cn/openinula/inula

详细提交方式见 openInula 赛事官网

时间安排

● 报名截止时间：2024年9月20日 23:30

● 初赛：2024年5月17日 - 2024年8月26日

开发项目原型

提交创意应用介绍书（包含项目简介、技术架构）

初赛评审：2024年8月28日 - 2024年8月30日

● 决赛：2024年10月7日 - 2024年10月11日

完成完备的项目开发

完成答辩PPT

决赛评审：2024年10月

● 颁奖典礼：2024年11月，具体时间待定

奖项设置

获取帮助/技术指导的链接/联系方式：

官网：https://openinula.net/

代码库：https://gitee.com/openInula

添加 openinula 小助手微信（备注CCF开源大赛）拉你进群 ~