多端框架uni-app和Taro选型对比 一. 背景
小程序原生开发有不少槽点:
1.原生wxml开发对Node、预编译器、webpack支持不好,影响开发效率和工程构建流程。所以大公司都会用框架开发 2.微信定义的这套语法,wxml、wxs,以及wx:if等语法,私有化太强。不如正经学vue或react,学会了全端通用,而不是只为微信小程序 3.vue或react生态里有太多周边工具,可以提高开发效率,比如ide、校验器、三方库。。。而微信的开发者工具和专业编辑器相比实在不好用,个性化设置也非常少
作为前端工程师,除了微信小程序,还要开发web、其他小程序甚至App,人们不喜欢来回切换开发工具和变更语法思考方式。
一些多端框架uni-app或taro可以解决这些问题,但开发者又经常有些顾虑:
1.怕使用框架后,微信小程序里有的功能无法实现,受制于uni-app的更新 2.怕性能不如原生WXML 3.怕框架不成熟,跳到坑里 4.担心社区生态不完善
本文从开发者关心的功能、性能、学习门槛、开发体验、生态、可扩展性等维度对uniapp和taro进行了分析测评。
二. uni-app和Taro的介绍1.### uni-app:uni-app 是一个使用 Vue.js 开发跨平台应用的前端框架,开发者编写一套代码,可编译到iOS、Android、H5、小程序等多个平台。
详细介绍见官方文档:uniapp.dcloud.io/
1.### taro:taro是多端统一开发框架,支持用 React 的开发方式编写一次代码,生成能运行在微信/百度/支付宝/字节跳动小程序、H5、React Native 等的应用.
详细介绍见官网:nervjs.github.io/taro/
三.uni-app和Taro的特点1.### 官网介绍uni-app的特点:* 跨端数量更多;一套代码,可以发布到IOS,Android,小程序,H5等多个平台。
平台能力不受限:在跨端的同时,通过推荐编译+平台特有API调用,可以优雅的为某平台写个性化代码,调用专有能力而不影响其他平台;支持原生代码编写和原生sdk生成。
性能体验优秀:体验更好的Hybrid框架,加载新页面速度更快
周边生态丰富:支持NPM包管理,兼容微信小程序自定义组件及JS,SDK,支持mpvue项目及组件,APP端支持和原生混合编码;相当于微信小程序中丰富的三方sdk克直接用于跨平台开发。
学习成本低:基于通前端技术栈,采用vue语法+微信小程序api,无额外学习成本。
开发成本低:人力成本大幅度节省,招聘,人力,管理,研发,测试各方面成本大幅度下降;HbuildX是高效开发利器,熟练掌握后研发效果至少翻倍(即便值开发一个平台)。
2.### 官网介绍taro的特点:* 多端运行:一键生成可以在微信小程序/H5/ReactNative等端运行的代码。
语法风格:采用React语法标准,支持JSX书写,让代码更具表现性。组件化:支持组件化开发,让代码可以复用,让功能开发更加清晰。TypeScript:全面支持TypeScript,提供更强大的生产力。现代开发流程:配套的开发工具Taro CLI让开发流程自动化,一切都从一行命令开始 四. 内容测评比较具体分析对比详细情况可参考:
ask.dcloud.net.cn/article/364… 或者 ask.dcloud.net.cn/article/371…
五. 总结橱窗里的衣服再漂亮,适合自己的才有用,开发框架亦是如此。基于公司业务及团队人员技能考虑,经过开会综合考量,决定选择uni-app, 具体原因如下:
1.uni-app在不同平台的运行效果更好; 2.uni-app有它自带的IDE,能够帮助我们快速构建项目和打包项目; 3.如何在有限前端团队人数下搞定更多平台,是我们的首要考虑,没有人想踩太多坑导致任务完不成,并且跨端方面uni-app更成熟; 4.学习uni-app(vue)的学习成本更低,用户体量大,社区生态完整,开发时间和风险更低。
App端框架选型:
现在我们做的项目主要以小程序为主,但既然选择了跨端框架,就必然要考虑到后续如果开发app的情况。下列对一些热门的跨端app框架包括flutter,react native,uniapp,taro做了分析对比。
一. 各框架优劣分析以下是论坛中一些使用过uniapp开发app的意见,仅作为参考:
1.个人感觉uniapp是数字天堂完成度较低,较不成熟的产品。来源:知乎 2.uni-app看似完美,小问题确实太多 来源:知乎 3.uni-app和taro 推荐用在跨端小程序中。跨平台的app不建议使用,可以考虑react native(产品成熟度高,体验性好),和 flutter(热度高,ui和性能接近原生)
目前的市面上多端应用开发主要还是小程序 + H5 的形式比较多,app的相对很少。一套代码横跨 iOS Android Web 和小程序比较复杂,可能会存在大量兼容性问题。uniapp开发的app目前来看没有大型的成熟案例,使用的话踩坑会比较多,所以综合考虑暂不使用uniapp去开发app应用。
uniapp语法选择跨平台小程序的框架已选定uniapp,众所周知uniapp支持的是vue语法,vue3自出世以来备受好评,那么unipp是否要用vue3去开发呢,他对vue3的支持度是否良好,学习资料是否完善,还需深入研究。
一、uniapp对vue3的更新史uni-app对vue3 & Vite的升级,是一个渐进式过程:
2020年9月:小程序平台支持 vue3 开发,小程序平台编译器依然使用webpack;
2021年5月:H5平台支持 vue3 开发,H5平台编译器升级为 Vite;
2021年8月:App平台支持 vue3 开发,App平台编译器升级为 Vite;
2021年11月:小程序平台编译器升级为 Vite;
至此,uni-app在全平台支持了 Vite 编译及Vue 3.x 运行。
二、vue2和vue3在开发uniapp中的对比新版 uni-app 框架主要做了三大改进:
重写框架内核:基于vue3 + ts重写内置组件和API,实现更彻底、更高效的tree-shaking;
新增支持 Vite 构建工具,在H5平台实现秒开预览;
新增支持 Vue3.x,实现更灵活的开发方式,及更高的运行性能;
基于这三大改进,我们从语法支持,编译速度,运行性能,代码体积,学习资料五方面进行分析对比:
1.### 语法支持:新版uni-app支持Vue 3.x框架,支持组合式API,可实现更聚焦的业务开发。
Vue 3.x的一些新增特性,uni-app也已经完全支持,如: - 支持<script setup> - 支持<style scoped>、<style module>、State-Driven Dynamic CSS(v-bind) - 支持jsx、tsx(h5,app 平台支持,小程序不支持)
另外,在小程序平台,新版uni-app也扩展了更多的语法,如: - 更完善的模板语法支持(如 class、style 支持函数、变量等,不再局限数组、对象类型) - 更完整的 props 支持(如传递函数) - 更完善的 slot 支持(如作用域插槽)
2.### 编译速度以下挑选了uni-app常用项目模板,在小程序平台编译,测试其编译时间:
从上图对比数据来看,我们可以得出结论:小程序平台,vue 3.x版本下的运行编译,相比vue 2.6版本,编译性能至少提升30%;且项目越复杂,编译性能提升越明显,可以达到40% ~ 50%。
3.### 运行性能开发一个仿微博小程序首页的复杂长列表,支持下拉刷新、上拉翻页、点赞。界面如下:
进行多次测试,求其平均值,结果如下:
从表格中可以看出:
随着页面记录的增加,vue 2.6版本的uni-app项目,点赞组件响应时间快速增加,响应越来越慢;基于vue 3.x的uni-app项目,点赞组件的响应时间跟页面条数无关,一直保持极高的响应灵敏度,性能体验远高于vue 2.6版本。4.### 代码体积选择uni-app常用项目模板,在小程序平台,分别测试vue 2.6和vue 3.x的编译包大小
从统计结果来看,uni-app的vue3.x版本,在小程序平台上也有大幅瘦身。
5.### 学习资料* 文档。官网对 vue2和vue3,以及升级迁移都有专门的官方文档,另外也可参考vue3官方文档
视频课程。官方视频教程和大多数视频课程以vue2为主的多,vue3相对较少插件市场。目前插件市场中vue2的插件数量多于vue3 三、总结综上,以数字说话,vue3版本uni-app开发的是有诸多好处的
更多的语法支持,支持组合式API,业务聚焦,开发效率更高;
更快的编译速度,H5平台十倍加速,小程序、App加速30%以上;
更好的运行性能,用户端响应更快,体验更好;
更小的代码体积,瘦身30%以上,更省体积、更省流量
vue3 2020年09月正式发布,更是有很多优秀的新特性,例如 Composition 组合 API、基于 Proxy 的响应式系统、自定义渲染器等。可以说很好地拥抱了未来,并在新?友好度上做到了极致,为开发人员提供了更多的控制。虽然vue2的学习资料和项目经验较多,但随着vue3成为vue的默认版本,越来越多的企业将来肯定会升级到Vue3.0,这是趋势。所以对于新项目而言,使用vue3是最好的建议。
1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,会注明原创字样,如未注明都非原创,如有侵权请联系删除!;3.作者投稿可能会经我们编辑修改或补充;4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。 |