前端架构师对于框架的技术选型

更新日期: 2019-06-15阅读: 5.4k标签: 架构

1、技术选型的背景

前端技术发展日新月异,互联网上出现的新型框架也比较多,如何让新招聘的人员能够直接上手接替项目,或者有相关人员请假,替补人员的接替工作,如何做到不同前端工程师的开发的差异性更小,是我们公司应该考虑的一个问题。

BAT公司的招聘要求都提到了“至少熟悉reactvueangular其中一种前端MVVM框架,有前端工程化与模块化开发实践经验”相关字眼。

我们主要从PC端、公众号(移动端H5)、小程序三大平台进行前端的技术选型,并来说说选其技术的几大优势。


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应用程序

非常适合

如果你想专注于大规模,功能丰富的应用程序

适用于iOS和Android的现代web开发和原生渲染应用程序

适用于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?这主要考虑以下几个方面。

(1)小程序可以使用mpvue , 公众号H5可以使用vux,app开发可以使用weex,PC端可以用nuxt.js,UI框架可以使用elementUI,以上框架都基于vue开发做到了跨平台,有更好的代码复用性,做到了开发习惯的统一;

(2)API文档简单,上手容易,学习成本比较亲民,华人开发,更接地气;

(3)BAT公司的招聘要求都有在使用该框架;


3、vue在各个平台上的技术选型

3.1 小程序的技术选型

3.1.1 wepy

一个类Vue开发风格的小程序框架

特性:

类Vue开发风格

支持组件化开发

支持NPM

支持Promise, 主动选择是否开启

支持ES2015

编译器:支持less/sass/TypeScript等开发

小程序性能优化

框架大小:24.3k+8.9k

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 开发体验。

特性:

组件化开发

完整Vue.js开发体验,全部.vue单文件组件

Vuex数据管理方案

webpack构建机制:自定义构建策略、开发阶段hotReload

支持npm

使用 Vue.js 命令行工具 vue-cli 快速初始化项目

H5代码转换编译成小程序目标代码能力(可使用html开发)

构建与编译工具:vue-cli,编译配置:build

配套设施

mpvue-loader

mpvue-webpack-target

postcss-mpvue-wxss

px2rpx-loader

其他


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等等

原文来自: 程序员周先生


链接: https://www.fly63.com/article/detial/3723

微内核架构在大型前端系统中的应用

架构和框架是独立的,本文仅仅是提出一种架构思路,而且这个架构也在百度的某款用户量很大的复杂前端产品中得以应用。基于这一套弹性架构并结合Vue/React的现代化开发理念,可以很好的完成高复杂度的前端系统。

怎么判定web前端架构师的能力高低?

软件架构(software architecture)是一系列相关的抽象模式,用于指导大型软件系统各个方面的设计。传统软件架构描述的对象是直接构成系统的抽象组件,侧重于系统的抽象、拆分、组织方式等

成为一个顶尖架构师

架构师的一个重要职责是,确保团队有共同的技术愿景,以帮助我们向客户交付他们想要的系统。在某些场景下,架构师只需要和一个团队一起工作,这时他们等同于技术引领者。在其他情况下,他们要对整个项目的技术愿景负责,通常需要协调多个团队之间,甚至是整个组织内的工作。

C/S和B/S两种架构区别与优缺点分析

C/S 架构是一种典型的两层架构,其全程是Client/Server,即客户端服务器端架构,其客户端包含一个或多个在用户的电脑上运行的程序,而服务器端有两种,一种是数据库服务器端,客户端通过数据库连接访问服务器端的数据

架构/构建高可用的网站

目的为保证服务器硬件故障时依然可用,数据依然保持并能够访问,手段:数据和服务的冗余备份以及失效转移机制,有状态 :在服务端保留之前的请求信息,用以处理当前请求(例如:session)无状态 :没有特殊状态的服务

大型web系统架构详解

动态应用,是相对于网站静态内容而言,是指以c/c++、php、Java、perl、.net等服务器端语言开发的网络应用软件,比如论坛、网络相册、交友、BLOG等常见应用。动态应用系统通常与数据库系统、缓存系统、分布式存储系统等密不可分。

讲讲亿级PV的负载均衡架构

本来没想写这个题材的,为了某某童鞋能够更好的茁壮成长,临时写一篇负载均衡的。负载均衡,大家可能听过什么3层负载均衡、4层负载均衡、7层负载均衡什么的?那这是怎么分的呢,ok,是根据osi七层网络模型来分的,例如nginx是工作在应用层

朱晔的互联网架构实践心得:品味Kubernetes的设计理念

Kubernetes(k8s)是一款开源的优秀的容器编排调度系统,其本身也是一款分布式应用程序。虽然本系列文章讨论的是互联网架构,但是k8s的一些设计理念非常值得深思和借鉴,本人并非运维专家,本文尝试从自己看到的一些k8s的架构理念结合自己的理解来分析 k8s在稳定性

大型网站核心架构要素

一般来说,除了当前的系统功能需求外,软件架构还需要关注性能、可用性、伸缩性、扩展性和安全性这5个架构要素。性能是网站的一个重要指标,任何软件架构设计档案都必须考虑可能会带来的性能问题。

大型网站技术架构 构建高可用的网站 高可用的服务

本章介绍如何去构建高可用的服务,关键词:服务分级,超时设置,异步调用,服务降级,幂等性设计,一些架构设计中的常用方案,但是需要结合实际业务场景进行设计,没有一套方案能解决所有问题

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!