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

相信关注前端开发的同学，一定听过近些年，DSL描述式的UI构建写法，大有取代传统命令式布局的趋势。

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

结果就是，把人人都炼成了一身诸哥的本事，事必躬亲，鞠躬尽瘁…

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

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

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

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

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

{}花括号里是一个关于价格的变量， div是价格UI元素的容器，只要price发生变化， div就自动更新，不再需要去设置它的值。这样前端程序员就不用再费脑子去更新UI了。

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

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

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

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

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

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

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

苹果、谷歌的大佬们看的很不是滋味，这不是釜底抽薪么？

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

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

Flutter确实发展太快了，几乎占据了新原生App开发市场的半壁江山，对纯iOS和Android原生开发者简直是雪上加霜。

2019年,苹果再也忍不住了，在开发者大会上重磅推出SwiftUI框架，从名字就知道，苹果命名是非常精准的，就是写UI用的。发布会上的keynote对比，把原先的iOS上的UIKit简直虐成渣，台下听众纷纷欢呼，好像苹果重新发明了开发框架一样。

我其实一直在搞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