看架构师对于前端框架的技术选型
Posted 程序员周先生
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了看架构师对于前端框架的技术选型相关的知识,希望对你有一定的参考价值。
前端技术选型手册
1、技术选型的背景
前端技术发展日新月异,互联网上出现的新型框架也比较多,如何让新招聘的人员能够直接上手接替项目,或者有相关人员请假,替补人员的接替工作,如何做到不同前端工程师的开发的差异性更小,是我们公司应该考虑的一个问题。
BAT公司的招聘要求都提到了“至少熟悉React、Vue、Angular其中一种前端MVVM框架,有前端工程化与模块化开发实践经验”相关字眼。
2、VUE技术的优势
互联网前端大潮后,前端出现了3大框架,分别是Angular、React与Vue。
2.1 BAT公司的技术选型
一个好的技术框架选型应该参考优秀的BAT公司,让我们来通过boss直聘看一下这些大公司都用了什么技术框架。
公司 |
技术栈 |
其他 |
百度 |
React Vue Angular |
|
阿里巴巴 |
React Vue |
Weex,Nodejs,koa |
腾讯 |
Vue React |
Nodejs |
京东 |
React Vue |
Aotu.io |
2.2前端开发三大框架的比较
既然BAT公司都提到了三大框架,那我们来比较一下各框架的优劣势。
2.2.1 Angular
Angular发展到2019年,已经出现第7版本,它可以媲美iPhone的更新速度,平均一年一个版本,而且不同版本的学习还都有一定的差异,最大的差异就是1和2的版本。Angular的2.0几乎是一个推翻重做的框架,估计不会有1.X的upgrade方案。所以如果现在新开始的项目采用Angular的话,会是一个很尴尬的时机。同样,如此大的改动似乎也反面印证了1.X并不是那么好。而angular的教程,一上来就是cli, npm, typescript,一大堆东西砸到你面前,每个东西他都要提一大段,连组件的理念,都要讲半天,教程门槛,一下子就被拉高了,导致学习成本很高。
众多程序员废弃原因:难调试+笨重。
2.2.2 React
对于跨平台应用程序开发,React Native是一个理想的选择,因为它提供了现代功能,您可以轻松地找到资源。
2.2.3 Vue
但是对于其他5%的人来说,Vue.js是超轻量级(但功能非常丰富)的框架,它们结合了AngularJS和React两者。
它实际上大部分与React类似,但模板与AngularJS(html + Mustache)几乎相同。
实际上,它与AngularJS有很大的不同,但从整体的角度来看,如果您有React或AngularJS经验,那么很容易理解。
渐进式构建能力是 vue.js 最大的优势,vue 有一个简洁而且合理的架构,使得它易于理解和构建。vue 有一个强大的充满激情人群的社区,这为 vue.js 增加了巨大的价值,使得为一个空白项目创建一个综合的解决方案变得十分容易。相对于国内来说,相当于华为手机的等级,学习成本比较亲民。
从特点上说,Vue有以下特点:
(1)API设计上简单,语法简单,学习成本低 ;
(2)构建方面不包含路由和ajax功能,使用vuex, vue-router ;
(3)指令(dom)和组件(视图,数据,逻辑)处理清晰 ;
(4)性能好,容易优化 ;
(5)基于依赖追踪的观察系统,并且异步队列更新 ;
(6)独立触发 ;
(7)v-model 实时渲染;
(8)适用于:模板和渲染函数的弹性选择 ;
(9)简单的语法及项目搭建 ;
(10)更快的渲染速度和更小的体积。
2.3 三大框架适用范围
Angular |
React |
Vue |
|
类型 |
一个框架 |
用于构建UI的库 |
图书馆 |
为什么选择 |
如果要使用typescript |
如果您想要一切都是javascript的方法 |
简单的JavaScript和html |
创始人 |
由Google提供支持 |
由Facebook维护 |
由前google员工创建 |
初始发行 |
2016年9月 |
2013年3月 |
2014年2月 |
应用类型 |
如果你想开发native应用程序,混合应用程序和web应用程序 |
如果你想开发SPA和移动应用程序 |
高级SPA并开始支持Native应用程序 |
非常适合 |
如果你想专注于大规模,功能丰富的应用程序 |
适用于web开发和单页面应用程序 |
|
学习曲线 |
陡峭的学习曲线 |
比angular容易一点 |
一个小的学习曲线 |
开发者友好 |
如果要使用基于结构的框架 |
如果你希望在开发环境中具有灵活性 |
如果你想分离关注点 |
模型 |
基于MVC(模型-视图-控制器)架构 |
基于Virtual DOM(文档对象模型) |
基于Virtual DOM(文档对象模型) |
写在 |
打字稿 |
JavaScript的 |
JavaScript的 |
社区支持 |
庞大的开发者和支持者社区 |
Facebook的开发者社区 |
开源项目通过众包赞助 |
语言首选型 |
建议使用TypeScript |
建议使用JSX-JavaScript XML |
HTML模板和Javascript |
声望 |
在开发人员中广受欢迎 |
全年增加了27000多颗星 |
在这一年里,GitHub上增加了超过40000颗星 |
公司使用 |
由google.Forbes.wix和weather使用 |
用于Facebook,Uber,Netfix,Twitter,Reddit,PayPal,Walmart等 |
由阿里巴巴,百度,GitLab等 |
2.4 vue框架脱颖而出的原因
比较了三个框架后,我们最终在react和vue的选型上做决定,最后我们为什么选择了vue?这主要考虑以下几个方面。
(2)API文档简单,上手容易,学习成本比较亲民,华人开发,更接地气;
(3)BAT公司的招聘要求都有在使用该框架;
3、vue在各个平台上的技术选型
3.1 小程序的技术选型
3.1.1 wepy
· 一个类Vue开发风格的小程序框架
特性:
o 类Vue开发风格
o 支持组件化开发
o 支持NPM
o 支持Promise, 主动选择是否开启
o 支持ES2015
o 编译器:支持less/sass/TypeScript等开发
o 小程序性能优化
o 框架大小:24.3k+8.9k
o wepy-redux数据管理
· 构建与编译工具:wepy-cli,编译配置:wepy.config.js
· 项目目录结构:
3.1.2 mpvue
· 命名意思:mp, mini program的缩写,mpvue, Vue.js in mini program
· 框架基于 Vue.js 核心,mpvue 修改了 Vue.js 的 runtime 和 compiler 实现,使其可以运行在小程序环境中,从而为小程序开发引入了整套 Vue.js 开发体验。
特性:
o 组件化开发
o 完整Vue.js开发体验,全部.vue单文件组件
o Vuex数据管理方案
o webpack构建机制:自定义构建策略、开发阶段hotReload
o 支持npm
o 使用 Vue.js 命令行工具 vue-cli 快速初始化项目
o H5代码转换编译成小程序目标代码能力(可使用html开发)
· 构建与编译工具:vue-cli,编译配置:build
配套设施
o mpvue-loader
o mpvue-webpack-target
o postcss-mpvue-wxss
o px2rpx-loader
o 其他
3.1.3 选择mpvue的原因
特性对比
mpvue |
WePY |
原生开发 |
|
开发风格 |
单文件组件 |
类Vue风格 |
每个页面由4个同名文件组成 |
组件化支持 |
支持,Vue单文件组件 |
支持,同时可兼容原生自定义组件 |
模板(template),自定义组件 |
外部依赖npm |
支持 |
支持 |
不支持 |
原生API Promise化 |
基本不支持,请求可以选用fly |
大部分API均支持,选用 |
无,为回调函数 |
优化 |
优化了setData,npm资源不引用则不会占用体积 |
setData不可太频繁使用,需控制图片资源大小,第三方资源不用需及时清理 |
|
less/sass/es6/typescript/eslint等 |
均支持 |
均支持 |
支持es6 |
自动化构建 |
vue-cli, webpack |
wepy-cli |
|
数据统一管理 |
vuex, 选用 |
wepy-redux, 选用 |
全局数据globalData, Storage |
框架体积 |
无说明 |
压缩后 24.3KB, +8.9KB 可使用 Promise 和 Async Function |
无 |
web H5支持 |
已上线H5页面转小程序,更改小部分平台差异代码和 webpack配置可运行 |
可输出web版本,暂不适合投入生产 |
|
理想状态:一套代码跑多端 |
WEB、小程序(微信和支付宝)、Native(借助weex) |
Web, 小程序 |
各端有各端特性,需处理差异化 |
以上技术对比,故mpvue更具优势。
3.2 公众号H5的技术选型
Nuxt/Vue SSR,Nuxt.js框架,解决服务器端渲染问题和首屏加载时长问题,实现 Vue SSR。
3.3 App的技术选型
首选WEEX,其次是Flutter,再者是React native。
3.4 PC端的技术选型
Nuxt.js框架,解决服务器端渲染问题和首屏加载时长问题,实现 Vue SSR。
3.5 UI框架的技术选型
PC端:element-ui
APP端:view-ui、vux
3.6 CSS处理器的选型
Stylus,stylus在追求代码的整洁性上取得了优异性的胜利。
4、基于vue的SSR框架nuxtjs的推荐
Nuxt.js简单的说是Vue.js的通用框架,最常用的就是用来作SSR(服务器端渲染)。再直白点说,就是Vue.js原来是开发SPA(单页应用)的,但是随着技术的普及,很多人想用Vue开发多页应用,并在服务端完成渲染。这时候就出现了Nuxt.js这个框架,她简化了SSR的开发难度。还可以直接用命令把我们制作的vue项目生成为静态html。使用SSR将带来大量的SEO提升,更好的用户体验和更多的机会(与传统的Vue SPA相比)。
4.1服务器端渲染的好处
最主要的原因时SPA(单页应用)不利于搜索引擎的SEO操作。比如你作一个新闻网站,流量的一个主要来源是通过百度、谷歌、bing这些搜索引擎,但是它们对SPA的抓取并不好,特别是百度根本没法抓取到SPA的内容页面,所以我们必须把我们的应用在服务端渲染成适合搜索引擎抓取的页面,再下载到客户端。那Nuxt.js适合作新闻、博客、电影、咨询这样的需要搜索引擎提供流量的项目。如果你要作移动端的项目,就没必要使用这个框架了。(其实Nuxt.js个人觉的是一个解决方案)
4.2什么是SSR?
SSR,即服务器渲染,就是在服务器端将对Vue页面进行渲染生成html文件,将html页面传递给浏览器。
4.2.1 SSR两个优点
(1)SEO 不同于SPA的HTML只有一个无实际内容的HTML和一个app.js,SSR生成的HTML是有内容的,这让搜索引擎能够索引到页面内容。
(2)更快内容到达时间 传统的SPA应用是将bundle.js从服务器获取,然后在客户端解析并挂载到dom。而SSR直接将HTML字符串传递给浏览器。大大加快了首屏加载时间。
4.2.2 Nuxt.js的特点
Nuxt.js的官方网站是这样介绍的:
Nuxt.js 是一个基于 Vue.js 的通用应用框架。 通过对客户端/服务端基础架构的抽象组织,Nuxt.js 主要关注的是应用的 UI渲染,它主要有以下特点。
(1)基于 Vue.js
(2)自动代码分层
(3)服务端渲染
(4)强大的路由功能,支持异步数据【使用更方便】
(5)静态文件服务
(6)ES6/ES7 语法支持
(7)打包和压缩 JS 和 CSS
(8)HTML头部标签管理
(9)本地开发支持热加载
(10)集成ESLint
(11)支持各种样式预处理器: SASS、LESS、 Stylus等等
结束语
在大框架流行和公司招聘合适的程序员,对精准技术的技术和能力上的面试考核,对于公司的长期发展来说,更具有深远的意义,故特此编写该前端技术选型的开发评审手册,如有说得不恰当的地方,欢迎批评指正,谢谢!
编写人: 前端架构师·周大伟
以上是关于看架构师对于前端框架的技术选型的主要内容,如果未能解决你的问题,请参考以下文章