鸿蒙ArkUI即将取代Java UI?5大决定性优势! 原创 精华

入门大师小波哥
发布于 2021-12-7 14:25
浏览
5收藏

相信关注前端开发的同学,一定听过近些年,DSL描述式的UI构建写法,大有取代传统命令式布局的趋势。
鸿蒙ArkUI即将取代Java UI?5大决定性优势!-鸿蒙开发者社区

传统上,写一套UI代码,需要根据数据的逻辑,手动的在业务代码里,去改变界面UI元素的状态,造成业务代码和UI代码搅在一起,黑话=“耦合性极高”。

结果就是,把人人都炼成了一身诸哥的本事,事必躬亲,鞠躬尽瘁…
鸿蒙ArkUI即将取代Java UI?5大决定性优势!-鸿蒙开发者社区


好的。话说在网页开发的远古时代(2013年以前),想写一个炫酷的网页,往往需要直接操作HTML元素,比如控制网页上一个价格数字根据选择不同优惠券的变化,需要直接操作这个价格文字元素。
类似这样的代码:

if(chooseShuang12) {
	document.getElementById("oldPrice").value *= 2.5   //原价提升2.5倍
	document.getElementById("price").value *= 0.5     //现价显示为0.5倍
}

鸿蒙ArkUI即将取代Java UI?5大决定性优势!-鸿蒙开发者社区

这种写法对互联网老板来说不能说有问题,只能说不利于程序员偷懒。

时间来到2013年,Facebook里有一个大神年入百万刀,终于bear不了这种年复一年的低端手写操作UI元素“low”代码,于是他搞成这样的写法:

<div>
        {this.price}
</div>

{}花括号里是一个关于价格的变量, div是价格UI元素的容器,只要price发生变化, div就自动更新,不再需要去设置它的值。这样前端程序员就不用再费脑子去更新UI了。
鸿蒙ArkUI即将取代Java UI?5大决定性优势!-鸿蒙开发者社区

【至于如何去更新的,啥时候更新,他写了一套算法,叫内存差分算法,大致是把页面元素结构都事先拷贝到内存中,如果变量发生了变化,比较一下前后的差异,只更新发生变化的那部分,因为有了内存缓存和算法比较,更新效率远远超出了原有的直接设置的方法】

然后的事,你就知道了,这一套东西叫React,强势垄断了前端开发的前沿领域,不会React,可能面试都通不过。

鸿蒙ArkUI即将取代Java UI?5大决定性优势!-鸿蒙开发者社区

仅仅一年后的2014,有一个在谷歌纽约分部实习的中国留学生,叫尤雨溪,同样写UI也写烦了,然后想写个框架,正好吸收了React的先进理念并改进、优化了一下语法:

<div>
  {{ price }}
</div>

鸿蒙ArkUI即将取代Java UI?5大决定性优势!-鸿蒙开发者社区

他赢了!尤雨溪的Vue框架确实比React可能更接地气,更轻巧,React有的,基本上Vue都有,而且更好用好学。支持国人吸收好东西创新,并且让国人开发者的学习和普及成本大幅降低,这是功德无量的事。

看到这里,你是不是看到了ArkUI中的JS UI是怎么来的了?没错,ArkUI的JS UI范式,就是Vue的写法。

鸿蒙ArkUI即将取代Java UI?5大决定性优势!-鸿蒙开发者社区


故事刚刚开始,2015年,Facebook看React这么火爆,直接成立了专门的组来深度开发,于是看重了手机端原生跨平台的市场,推出了React Native, 直接用React的语法,可以编译出iOS和Android的原生App,性能远比H5的网页要好多了,抢了不少开发者,生态搞的有声有色。

苹果、谷歌的大佬们看的很不是滋味,这不是釜底抽薪么?
鸿蒙ArkUI即将取代Java UI?5大决定性优势!-鸿蒙开发者社区


故事渐入佳境,前端开发领域此刻暗流涌动,新一轮的iOS和Android端UI开发框架军备竞赛悄然发力。这次是主角们登场了。

憋足2年,谷歌率先发力,强势推出Flutter开发框架。
基于Chrome浏览器渲染网页的Skia 2D引擎,号称开发出来的App,几乎无需更改任何代码就可以跨平台,iOS和Android端表现没有任何差异,而且比React Native性能更好,生态更繁荣,这个确认他们做到了,而且更新迭代以天为单位,诚意非常足,然后唯一的缺陷就是,搭载一个谷歌内部无人问津的编程语言Dart,这个Dart语法非常啰嗦,写起UI来嵌套很严重,但是基于生态和性能优势,开发者也就一直忍了,毕竟没有完美。

鸿蒙ArkUI即将取代Java UI?5大决定性优势!-鸿蒙开发者社区

Flutter确实发展太快了,几乎占据了新原生App开发市场的半壁江山,对纯iOS和Android原生开发者简直是雪上加霜。
鸿蒙ArkUI即将取代Java UI?5大决定性优势!-鸿蒙开发者社区

2019年,苹果再也忍不住了,在开发者大会上重磅推出SwiftUI框架,从名字就知道,苹果命名是非常精准的,就是写UI用的。发布会上的keynote对比,把原先的iOS上的UIKit简直虐成渣,台下听众纷纷欢呼,好像苹果重新发明了开发框架一样。
鸿蒙ArkUI即将取代Java UI?5大决定性优势!-鸿蒙开发者社区

我其实一直在搞iOS开发,看到这样的东西,简直是着了魔,代码简化后少了90%而且更易懂,加上实时预览器,启动模拟器调试的时间也少了90%。惊呼这玩意简直就是未来。

到了2020年11月华为开完HDC后,一个非常偶然的机会,在51社区的引荐下,参与到鸿蒙的开发体验中来,其实有了前面的“世面”,我对JavaUI是不感冒的,认为太土了,啥年代还用小米加步枪。一直没有深入Java相关的开发者,就在要丧失信心之际。2021年5月,ArkUI组就带来了这震惊业界的消息,鸿蒙即将支持DSL开发,而且语法致敬了SwiftUI、Flutter,React,10月HDC正式随SDK 7推出了技术预览版, 编辑器和预览器一应俱全,非常有诚意。

经过一段时间的实际项目和课程实践,
《方舟框架ArkUI—实战类星巴克APP》
ArkUI双范式超级实战-鸿蒙社区App

我总结了相比较鸿蒙既有框架的5个优势:

  1. 减少了编译步骤,保证了最大的UI性能。实际体验,比JS UI提升20%。
  2. 使用DSL代码,比Java UI节省代码90%以上。200行的代码,如今只需要20行。
  3. 使用扩展的TS语法,强类型,相比JS UI减少了可能的运行时错误,更安全。
  4. 配套更好用的实时预览器,大大减少了启动模拟器的次数。
  5. 更使用的Preview修饰符,无需运行,即可单独调试一个组件的UI所有状态成为可能。

相比Flutter:

  1. ArkUI大大减少了Dart嵌套语法地狱的问题,写法上更简洁明快。
  2. 预览器和Preview修饰符是调试UI不可或缺的工具,效率提升100倍的利器。

相比SwiftUI:

  1. 状态管理更完善,有非常清晰的状态管理和存储修饰符配套。
  2. SwiftUI预览器缺少组件树功能,ArkUI的组件定位功能十分好用。

当然,相比较上述2大框架,ArkUI尚处于技术预览阶段,自带组件数量不足、缺失和bug
100%要遭遇的鸿蒙ArkUI要命bug?3步原地回血,真的香!
以及最要紧的生态库尚未建立,需要时间去完善,根据官网规划,相信到2022年中段,这方面会有长足的进步,期待更好的ArkUI!


为了让大家学起来更容易,我把鸿蒙社区App的制作过程,录制了js和ets两个版本的视频课程,可以大大降低学习曲线和时间成本,妈妈再也不用再愁我没有项目学习了!助力各位抢占ArkUI早期红利!

ArkUI双范式超级实战-鸿蒙社区App

©著作权归作者所有,如需转载,请注明出处,否则将追究法律责任
标签
已于2021-12-7 14:27:16修改
9
收藏 5
回复
举报
10条回复
按时间正序
/
按时间倒序
SummerRic
SummerRic

小波老师的这图丰富了。

回复
2021-12-7 14:46:41
入门大师小波哥
入门大师小波哥 回复了 SummerRic
小波老师的这图丰富了。

看的愉快不

回复
2021-12-7 15:02:57
vsrrrrrb
vsrrrrrb

ets语法要怎么学习?

回复
2021-12-7 15:14:48
入门大师小波哥
入门大师小波哥 回复了 vsrrrrrb
ets语法要怎么学习?

可以看ArkUI官网文档,很全面;或者参与我的那个项目课程,学的更有针对性,用不到的就先不学。

回复
2021-12-7 15:19:16
vsrrrrrb
vsrrrrrb 回复了 入门大师小波哥
可以看ArkUI官网文档,很全面;或者参与我的那个项目课程,学的更有针对性,用不到的就先不学。

好的谢谢分享,看aukui目前还是起步阶段,我感觉先把后端的一些spring 和redis等学精了,明年等arkui组件更加完善了再来向你学习!

回复
2021-12-7 15:44:13
鸿蒙开发
鸿蒙开发

可不可以这样说,鸿蒙要用js程序员去对抗Android的Java程序员和苹果的c程序员了

回复
2021-12-8 07:53:54
入门大师小波哥
入门大师小波哥 回复了 鸿蒙开发
可不可以这样说,鸿蒙要用js程序员去对抗Android的Java程序员和苹果的c程序员了

对抗谈不上,苹果和安卓的也在极速进化,不会坐等鸿蒙超越

回复
2021-12-8 11:08:26
鸿蒙张荣超
鸿蒙张荣超

小波老师的文风超级赞!

1
回复
2021-12-10 13:06:32
有意思的少年
有意思的少年

有理有据啊,赞

回复
2021-12-10 19:17:13
入门大师小波哥
入门大师小波哥 回复了 鸿蒙张荣超
小波老师的文风超级赞!

荣超老师过奖了。。。一点小体会

回复
2021-12-11 13:59:39
回复
    相关推荐