阅读 1954

每一个前端er必须构建的技术栈

背景

独立的前端团队早已经不是什么新鲜事,在那些大厂大寨子里早已经存在,前端的发展可谓如日中天,一片从未有过的繁荣。前端三大件:HTML,CSS,JavaScript,这几年都有质的飞跃。HTML5的兼容性提升,多媒体支持,表单验证等等。CSS开发中加入的编程能力,JS领域内各种场景下基于Node的大规模应用,各种框架的推陈出新......

前端技术的融合更加紧密,应用的领域也更加广泛,大前端时代,也可以称为泛GUI时代,人机交互时代。前端领域的内容呈现多样化,手机App开发,考虑到生态的不同,还会涉及到Android、iOS、WP等,电视App应用,桌面端开发,微信公众号,微信/支付宝的小程序,数据展现(各种图表),JS已成为IoT开发的四大语言之一,区块链智能合约的开发中也有JS的身影,人工智能中前端开发也起着举足轻重的作用,诸如此类

那么在如此繁杂的技术当中如何去选择适合自己技术栈将至关重要,在目前的前端框架中以React,Vue,Angular三大框架为主。那么选择哪个技术框架成为了很多前端er需要🤔思考的头等大事。那么接下来以国内比较火的vue和react进行对比(ng在近几年的受欢迎程度在日益减少,这里就不在进行对比)

在近几年看来vue在国内遍地开花,对国人友好的中文文档、选择众多的模版,低门槛成为了不少小公司快速开发的首要选择,当然vx小程序采用了类似vue的语法糖方式,更是为vue这个在国内蜜月期的新星,添上了一把火。那么vue适合作为自己长久选择技术栈吗?

在当前国内除了最火的vue,那么仅次vue的就是react技术栈。react-facebook出品,正式版推出是在2013年,比angular晚了4年,但得益于其创新式的VirtualDOM,性能上碾压angularJS,一经推出,火的一塌糊涂。 特点很多,VirtualDOM、JSX、Diff算法,fiber等,支持ES6语法,采用函数式编程,门槛稍高,但也更灵活,能让开发具有更多可能性。

可能不少杠精会说小孩子才做选择大人全都要!但是仔细想想我们每一个人的精力是有限的。 近期vue推出了vue3提出了hook,react 推出了17,优化了很多fiber架构带来的问题,为react18提前铺路。在每一个单独技术如此频繁更新的情况下,如果不能专注于一个技术栈的周边及社区那么很容易出现每个都会每个都不精的情况。

cli

umi 是蚂蚁金服基于react的底层前端框架,可开发 H5 无线、离线(Hybrid)应用、纯前端 assets 应用、CMS 应用等。Umi 内置了路由、构建、部署、测试等,仅需一个依赖即可上手开发。

vue cli 是vue官方推出的脚手架工具,内置了对 Babel、TypeScript、ESLint、PostCSS、PWA、单元测试和 End-to-end 测试的支持。

两者本质上都是将自身的技术周边进行集成,对webpack的二次封装,提供了基础的开发配置的功能。

但是在某些方面,umi是优于vue cli 的。例如umi提供了ssr渲染和预选染等。

跨端

taro 是京东提供的一个开放式跨端跨框架解决方案,支持使用 React/Vue/Nerv 等框架来开发 微信 / 京东 / 百度 / 支付宝 / 字节跳动 / QQ 小程序 / H5 等应用。

uni-app 是DCloud公司基于 Vue.js 开发的跨多端的框架,可发布到iOS、Android、Web(响应式)、以及各种小程序(微信/支付宝/百度/头条/QQ/钉钉/淘宝)、快应用等多个平台。

看官方介绍都很流批,taro 甚至开始支持rn。但是深入搜索和研究发现,其实此类框架都是跨端使用可以,如果单独开发h5不如选择各自的cli方便。如果选择其中之一的话也就是有兼融h5和小程序同步开发的需求是可以的

其实在这方便vue是更胜一筹的,这也得益于小程序是类似于vue语法糖。不过在开发体验方面是相差不大的

app

react native是 Facebook基于react开发的一个可跨端兼融主流的iOS和Android的框架,其中热更新代码更是频发发版的利器,其开发的组件和效果体验完全不属于原生开发的体验效果

weex是致力于使开发者能基于通用跨平台的 Web 开发语言和开发经验,来构建 Android、iOS 和 Web 应用。简单来说,在集成了 WeexSDK 之后,你可以使用 JavaScript 语言和前端开发经验来开发移动应用。

Flutter是谷歌的移动UI框架,可以快速在iOS和Android上构建高质量的原生用户界面。 Flutter可以与现有的代码一起工作。在全世界,Flutter正在被越来越多的开发者和组织使用,并且Flutter是完全免费、开源的。

其实以上三种选择 Flutter是未来,但是需要学习一下dart语言,语法糖与js类型,唯一当前不太好的就是ui库不是很多,现在部分大厂都在部分非核心项目中使用。

其次是react native,react 的语法糖大大减少了学习成本。而且在热更新和当前的社区繁荣程度而言react native是更胜一筹的

pc端-后台管理类型项目

Ant Design Pro 是react一个企业级中后台前端/设计解决方案,基于 Ant Design 的设计价值观 和umi脚手架,提炼出典型模板/业务组件/配套设计资源。(pro-table强力推荐)

vue 模版太多了实在不知道推荐哪个比较好,当前使用vue-cli + Ant Design的方案比较多。

综合来讲如果从模版角度来看vue相对来说比较多一些,不过此类项目来看选择react技术栈 和Ant Design Pro是更好的选择。

综上所述的对比

其实不难看出两个技术栈都是各有千秋的,不过整体收益而言是react更胜一筹的,不过上手难度系数更高一些。vue 相对简单,但是在app 方面可能相对差一些,weex当前貌似处于无人管理的状态。

希望此文章能为大家为今后的选择提供帮助,可以更好的选择适合自己的技术栈。

如果对您有帮助可以给作者一个赞👍!

文章分类
前端
文章标签