当前位置:首页 > 科技  > 软件

华为自研的前端框架是什么样的?

来源: 责编: 时间:2023-12-04 17:27:10 205观看
导读大家好,我卡颂。最近,华为开源了一款前端框架 —— openInula[1]。根据官网提供的信息,这款框架有3大核心能力:响应式API兼容ReactAPI官方提供6大核心组件并且,在官方宣传视频里提到 —— 这是款「大模型驱动」的「智能框

lkj28资讯网——每日最新资讯28at.com

大家好,我卡颂。lkj28资讯网——每日最新资讯28at.com

最近,华为开源了一款前端框架 —— openInula[1]。根据官网提供的信息,这款框架有3大核心能力:lkj28资讯网——每日最新资讯28at.com

响应式API

lkj28资讯网——每日最新资讯28at.com

兼容ReactAPI

lkj28资讯网——每日最新资讯28at.com

官方提供6大核心组件

lkj28资讯网——每日最新资讯28at.com

并且,在官方宣传视频里提到 —— 这是款「大模型驱动」的「智能框架」。lkj28资讯网——每日最新资讯28at.com

那么,这究竟是款什么样的前端框架呢?我在第一时间体验了Demo,阅读了框架源码,并采访了框架核心开发者。本文将包括两部分内容:lkj28资讯网——每日最新资讯28at.com

  • 对框架核心开发者陈超涛的采访
  • 卡颂作为一个老前端,阅读框架源码后的一些分析

采访核心开发者

开发Inula的初衷是?

回答:lkj28资讯网——每日最新资讯28at.com

华为内部对于业务中强依赖的软件,考虑到竞争力,,会开发一个内部使用的版本。lkj28资讯网——每日最新资讯28at.com

Inula在华为内部,从立项到现在两年多,基本替换了公司内绝大部分React项目。lkj28资讯网——每日最新资讯28at.com

卡颂补充背景知识:Inula兼容React 95% API,最初开发的目的就是为了替换华为内部使用的React。为了方便理解,你可以将Inula类比于华为内部的Reactlkj28资讯网——每日最新资讯28at.com

为什么开源?

回答:lkj28资讯网——每日最新资讯28at.com

华为对于「自研软件」的公司策略,只要是公司内部做的,觉得还ok的自研都会开源。lkj28资讯网——每日最新资讯28at.com

接下来的提问涉及到官网宣传的内容lkj28资讯网——每日最新资讯28at.com

宣传片提到的大模型赋能、智能框架是什么意思?

回答:lkj28资讯网——每日最新资讯28at.com

这主要是Inula团队与其他外部团队在AI、低代码方向的一些探索。比如:lkj28资讯网——每日最新资讯28at.com

  • 团队与上海交大的一个团队在探索「大模型赋能chrome调试业务代码」方面有些合作,目的是为了「自动定位问题」
  • 团队与华为内部的「大模型编辑器」团队合作,探索「框架与编辑器定制」可能性

以上还都属于探索阶段。lkj28资讯网——每日最新资讯28at.com

Inula未来有明确的发展方向么?

回答:lkj28资讯网——每日最新资讯28at.com

团队正在探索引入「响应式API」,相比于「React的虚拟DOM」方案,响应式API能够提高运行时性能。24年可能会从Vue composition API中寻求些借鉴。lkj28资讯网——每日最新资讯28at.com

新的发展方向会在项目仓库以RFC的形式展开。lkj28资讯网——每日最新资讯28at.com

补充:RFC是「Request for Comments」的缩写。这是一种协作模式,通常用于提出新的特性、规范或者改变现有的一些规则。RFC的目的是收集不同的意见和反馈,以便在最终确定一个决策前,考虑尽可能多的观点和影响。lkj28资讯网——每日最新资讯28at.com

为什么要自研核心组件而不用社区成熟方案?

卡颂补充:所谓「核心组件」,是指状态管理、路由、国际化、请求库、脚手架这样的框架生态相关的库。既然Inula兼容React,为什么不直接用React生态的成熟产品,而要自研呢?毕竟,这些库是没有软件风险的。lkj28资讯网——每日最新资讯28at.com

lkj28资讯网——每日最新资讯28at.com

回答:lkj28资讯网——每日最新资讯28at.com

主要还是丰富Inula生态,根据社区优秀的库总结一套Inula官方推荐的最佳实践。至于开发者怎么选择,我们并不强求。lkj28资讯网——每日最新资讯28at.com

卡颂的分析

以上是我对Inula核心开发者陈超涛的采访。下面是我看了Inula源码后的一些分析。lkj28资讯网——每日最新资讯28at.com

要分析一款前端框架,最重要的是明白他是如何更新视图的?这里我选择了两种触发时机来分析:lkj28资讯网——每日最新资讯28at.com

首次渲染

触发的方式类似如下:lkj28资讯网——每日最新资讯28at.com

Inula.render(<App />, document.getElementById("root"));

执行useState的更新方法触发更新

触发的方式类似如下:lkj28资讯网——每日最新资讯28at.com

function App() {  const [num, update] = useState(0);  // 触发更新  update(xxx);  // ...}

顺着调用栈往下看,他们都会执行两步操作:lkj28资讯网——每日最新资讯28at.com

  • 创建名为update的数据结构
  • 执行launchUpdateFromVNode方法

比如这是首屏渲染时:lkj28资讯网——每日最新资讯28at.com

lkj28资讯网——每日最新资讯28at.com

这是useState更新方法执行时:lkj28资讯网——每日最新资讯28at.com

lkj28资讯网——每日最新资讯28at.com

launchUpdateFromVNode方法会向上遍历到根结点(源码中遍历的节点叫VNode),再从根节点开始遍历树。由此可以判断,Inula的更新机制与React类似。lkj28资讯网——每日最新资讯28at.com

所有主流框架在触发更新后,都不会立刻执行更新,中间还有个调度流程。这个流程的存在是为了解决:lkj28资讯网——每日最新资讯28at.com

  • 哪些更新应该被优先执行?
  • 是否有些更新是冗余的,需要合并在一块执行?

在Vue中,更新会在微任务中被调度并统一执行,在React中,同时存在微任务(promise)与宏任务(MessageChannel)的调度模式。lkj28资讯网——每日最新资讯28at.com

在Inula中,存在宏任务的调度模式 —— 当宿主环境支持MessageChannel时会使用它,不支持则使用setTimeout调度:lkj28资讯网——每日最新资讯28at.com

lkj28资讯网——每日最新资讯28at.com

同时,与这套调度机制配套的还有个简单的优先级算法 —— 存在两种优先级,其中:lkj28资讯网——每日最新资讯28at.com

  • ImmediatePriority:对应正常情况触发的更新。
  • NormalPriority:对应useEffect回调。

每个更新会根据「更新的ID」(一个自增的数字)+ 「优先级对应的数字」 作为优先级队列中的排序依据,按顺序执行。lkj28资讯网——每日最新资讯28at.com

假设先后触发2次更新,优先级分别是ImmediatePriority与NormalPriority,那么他们的排序依据分别是:lkj28资讯网——每日最新资讯28at.com

  • 100(假设当前ID到100了)- 1(ImmediatePriority对应-1) = 99。
  • 101(100自增到101)+ 10000(NormalPriority对应10000)= 10101。

99 < 10101,所以前者会先执行。lkj28资讯网——每日最新资讯28at.com

需要注意的是,Inula中对更新优先级的控制粒度没有React并发更新细,比如对于如下代码:lkj28资讯网——每日最新资讯28at.com

useEffect(function cb() {  update(xxx);  update(yyy);})

在React中,控制的是每个update对应优先级。在Inula中,控制的是cb回调函数与其他「更新所在回调函数」之间的执行顺序。lkj28资讯网——每日最新资讯28at.com

这意味着本质来说,Inula中触发的所有更新都是「同步更新」,不存在React并发更新中「高优先级更新打断低优先级更新」的情况。lkj28资讯网——每日最新资讯28at.com

这也解释了为什么Inula兼容 95% 的React API,剩下 5% 就是「并发更新相关API」(比如useTransition、useDeferredvalue)。lkj28资讯网——每日最新资讯28at.com

现在我们已经知道Inula的更新方式类似React,那么官网提到的「响应式API」该如何实现呢?这里存在三条路径:lkj28资讯网——每日最新资讯28at.com

  • 一套外挂的响应式系统,类似React与Mobx的关系。
  • 内部同时存在两套更新系统(当前一套,响应式一套),调用不同的API使用不同的系统。
  • 重构内部系统为响应式系统,通过编译手段,使所有API(包括当前的React API与未来的类 Vue Composition API)都走这套系统。

lkj28资讯网——每日最新资讯28at.com

其中第一条路径比较简单,第二条路径应该还没框架使用,第三条路径想象空间最大。不知道Inula未来会如何发展。lkj28资讯网——每日最新资讯28at.com

总结

当前,Inula是一款「类React的框架」,功能上可以类比为「React并发更新之前的版本」。lkj28资讯网——每日最新资讯28at.com

下一步,Inula会引入「响应式API」,目的是提高渲染效率。lkj28资讯网——每日最新资讯28at.com

对于未来的发展,主要围绕在:lkj28资讯网——每日最新资讯28at.com

  • 探索类 Vue Composition API的可能性
  • 迭代官方核心生态库

对于华为出的这款前端框架,你怎么看?lkj28资讯网——每日最新资讯28at.com

参考资料

[1]openInula:https://www.openinula/。lkj28资讯网——每日最新资讯28at.com

本文链接:http://www.28at.com/showinfo-26-37690-0.html华为自研的前端框架是什么样的?

声明:本网页内容旨在传播知识,若有侵权等问题请及时与本网联系,我们将在第一时间删除处理。邮件:2376512515@qq.com

上一篇: 前端开发者如何消除代码中的技术债务

下一篇: WorkManager让开发者轻松地管理后台任务调度和执行的库

标签:
  • 热门焦点
  • 7月安卓手机性价比榜:努比亚+红魔两款新机入榜

    7月安卓手机性价比榜:努比亚+红魔两款新机入榜

    7月登场的新机有努比亚Z50S Pro和红魔8S Pro,除了三星之外目前唯二的两款搭载超频版骁龙8Gen2处理器的产品,而且努比亚和红魔也一贯有着不错的性价比,所以在本次的性价比榜单
  • iPhone卖不动了!苹果股价创年内最大日跌幅:市值一夜蒸发万亿元

    iPhone卖不动了!苹果股价创年内最大日跌幅:市值一夜蒸发万亿元

    8月5日消息,今天凌晨美股三大指数高开低走集体收跌,道指跌0.41%;纳指跌0.36%;标普500指数跌0.52%。热门科技股也都变化极大,其中苹果报181.99美元,跌4.8%,创
  • 三言两语说透设计模式的艺术-单例模式

    三言两语说透设计模式的艺术-单例模式

    写在前面单例模式是一种常用的软件设计模式,它所创建的对象只有一个实例,且该实例易于被外界访问。单例对象由于只有一个实例,所以它可以方便地被系统中的其他对象共享,从而减少
  • 学习JavaScript的10个理由...

    学习JavaScript的10个理由...

    作者 | Simplilearn编译 | 王瑞平当你决心学习一门语言的时候,很难选择到底应该学习哪一门,常用的语言有Python、Java、JavaScript、C/CPP、PHP、Swift、C#、Ruby、Objective-
  • 只需五步,使用start.spring.io快速入门Spring编程

    只需五步,使用start.spring.io快速入门Spring编程

    步骤1打开https://start.spring.io/,按照屏幕截图中的内容创建项目,添加 Spring Web 依赖项,并单击“生成”按钮下载 .zip 文件,为下一步做准备。请在进入步骤2之前进行解压。图
  • 腾讯VS网易,最卷游戏暑期档,谁能笑到最后?

    腾讯VS网易,最卷游戏暑期档,谁能笑到最后?

    作者:无锈钵来源:财经无忌7月16日晚,上海1862时尚艺术中心。伴随着幻象的精准命中,硕大的荧幕之上,比分被定格在了14:12,被寄予厚望的EDG战队以绝对的优势战胜了BLG战队,拿下了总决
  • 大厂卷向扁平化

    大厂卷向扁平化

    来源:新熵作者丨南枝 编辑丨月见大厂职级不香了。俗话说,兵无常势,水无常形,互联网企业调整职级体系并不稀奇。7月13日,淘宝天猫集团启动了近年来最大的人力制度改革,目前已形成一
  • iQOO Neo8 Pro抢先上架:首发天玑9200+ 安卓性能之王

    iQOO Neo8 Pro抢先上架:首发天玑9200+ 安卓性能之王

    经过了一段时间的密集爆料,昨日iQOO官方如期对外宣布:将于5月23日推出全新的iQOO Neo8系列新品,官方称这是一款拥有旗舰级性能调校的作品。随着发布时
  • 上海举办人工智能大会活动,建设人工智能新高地

    上海举办人工智能大会活动,建设人工智能新高地

    人工智能大会在上海浦江两岸隆重拉开帷幕,人工智能新技术、新产品、新应用、新理念集中亮相。8月30日晚,作为大会的特色活动之一的上海人工智能发展盛典人工
Top