前端项目技术选型

• 1. 项目技术分类
• 2. 脚本语言
• 3. 样式语言
• 4. 框架及生态链
  • 4.1. Web框架
  • 4.2. 跨平台框架
• 5. 组件库
  • 5.1. 移动端
  • 5.2. PC端
• 6. 构建工具
• 7. JS代码检查工具

1. 项目技术分类

项目开发中，所以用到的前端技术分为以下几类：

• 脚本语言，如：JavaScript、TypeScript
• 样式语言，如：CSS、Sass、Less、Stylus
• 框架及生态链，如：Vue、React、Angular
• 组件库，如：ElementUI
• 构建工具，如：Webpack
• 其它工具库，如：网络请求的工具

2. 脚本语言

选项：
目前成熟且广泛使用的脚本语言有如下两个：

• JavaScript：浏览器的默认脚本语言
• TypeScript：TypeScript 是 JavaScript 的超集，扩展了 JavaScript 的语法，因此现有的 JavaScript 代码可与 TypeScript 一起工作无需任何修改，TypeScript 通过类型注解提供编译时的静态类型检查。TypeScript 可处理已有的 JavaScript 代码，并只对其中的 TypeScript 代码进行编译。

通用工具的封装： 应选择 TypeScript
业务代码开发： 优先选择 TypeScript，如果学习成本是问题 或者 追求效率，则也可选择 JavaScript

选择理由：

• TypeScript 是 JavaScript 的超集，扩展了 JavaScript 的语法；JavaScript 代码可与 TypeScript 一起工作无需任何修改；
• TypeScript 有丰富的类型系统，支持编译时对代码进行静态类型检查；而 JavaScript 是弱类型语法，没有类型描述和约束，故也不能完成静态类型检查；
• TypeScript 有 JavaScript 没有的许多特性，比如：元组、枚举、接口、交叉、联合、泛型、可选、类型推导 等等；
• 将来我们的项目是需要撰写规范、严谨的接口文档的，而 TypeScript 可以方便地导出类型描述，有助于 接口文档 的撰写；即使用 JavaScript 开发，撰写接口文档的工作量 就相当于 完成了 将 JavaScript 改成 TypeScript 的工作量；
• TypeScript 代码可读性比 JavaScript 高许多，非常利于协作开发；

3. 样式语言

选项：

• CSS：浏览器默认的样式语言
• Less：CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。Less 可以运行在 Node 或浏览器端。
• Sass：Sass 是一款强化 CSS 的辅助工具，它在 CSS 语法的基础上增加了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、导入 (inline imports) 等高级功能，这些拓展令 CSS 更加强大与优雅。使用 Sass 以及 Sass 的样式库（如 Compass）有助于更好地组织管理样式文件，以及更高效地开发项目。
• Stylus : Stylus是一种创新的样式表语言，可编译为CSS。受SASS的启发，Stylus是由node.js构建的，并能够在本交互式教程中说明的浏览器中运行。编辑左侧的Stylus源，以查看所产生的更改出现在右侧的CSS中。

选择建义： 如果有使用 UI库 ，则优先选择 UI库 使用的样式语言；如果 没有使用 UI库，或 使用了多种UI库，希望统一样式语言，则建义选择 Stylus

选择理由：

• Less的特性与 Sass、Stylus 较弱，并且较老，故排除；
• Sass : 在安装项目依赖时，经常因为 Sass 相关的依赖而安装失败，Sass基于Ruby语言开发而成，因此安装sass前需要安装Ruby，而国内安装 Ruby 需要 更改镜像源，而这不是前端技术栈满园内的东西；而 Stylus 是 NodeJS 项目，不存在 Sass 这样的问题；
• Stylus : 对于逻辑上的语法和关键字 更接近 JavaScript，比如：变量、函数、条件语句、循环语句 等等；
• Stylus 支持属性查找，可以方便地引用其它 css 属性的值，Sass 不支持；
• Stylus 支持任意父级选择器的引用，也可以你使用相对路径和绝对路径的方式来引用父级选择器，利用些特性，可以方便实现关注点分离；
• Stylus 有丰富的运算符，和强大的运算机制；可以对各种单位的数值及颜色进行运算；
• Stylus 的扩展 @extend 支持 嵌套的选择器，Sass 不支持；
• 总之，Stylus 如 JS 般强大；

4. 框架及生态链

4.1. Web框架

对于以Web产品为主的项目，建义主要使用Web技术，Web技术的框架选择如下：

选项：

• Vue : 一套用于构建用户界面的渐进式框架。
• React : 用于构建用户界面的 JavaScript 库。
• Angular

优先选择： Vue

选择理由：

• Angular 的学习成本太高，而且体量太大，故排除；
• React 和 Vue 性能和体量都差不多； React 有两种使用模式 JSX、和 createElement ，前者 需要经过构建才能在浏览器中运算，后者不需要，但编写代码时十分麻烦；而 Vue 有四种使用模式 Vue文件、JSX、createElement、配置对象，其中 Vue文件、JSX 得需要构建的， createElement、配置对象 是不需要构建的，且 配置对象 的方式 比 createElement 的方式方便的多；
• React 特性 Vue 基本上都有（虽然在 createElement 方式编写方面没有 React 强大，但我也封装了一些工具阿弥补了这点，并且这种场景也不常用，只有在实现一些非常高级的特性时有可能会用到），而 Vue 具有特性， React 不一定具有，比如 Vue文件 和 配置对象 的 编写方式；
• Vue 的 Vue文件的编写方式 与 我一直推行的 功能点分离（详见Vue项目组织规范/项目结构的核心思想） 的思想相吻合；

4.2. 跨平台框架

对于需要跨多个平台的项目（比如：IOS、Android、Web、小程序 等等），且各端的重要性比重均等的情况下，建义使用跨平台框架来解决跨平台问题；

选项：

• Flutter：Flutter 是 Google推出并开源的移动应用开发框架，主打跨平台、高保真、高性能。开发者可以通过 Dart语言开发 App，一套代码同时运行在 iOS 和 Android平台。 Flutter提供了丰富的组件、接口，开发者可以很快地为 Flutter添加 native扩展。
• React Native：使用Javascript语言，类似于HTML的JSX，以及CSS来开发移动应用，将虚拟DOM映射为原生控件，因此熟悉Web前端开发的技术人员只需很少的学习就可以进入移动应用开发领域。
• uni-app：是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、H5、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉）等多个平台。

优先选择： uni-app
选择理由：

• Flutter 目前只能跨 Android 和 IOS，且使用的是 Dart 语言，目前在前端行业会 Dart 语言的人很少，所以弃之；
• React Native 使用的技术栈是 JavaScript + React，目前只能跨 Android 和 IOS，还不能跨小程序等平台，所以弃之；
• 选择 uni-app 的原因：
  • uni-app 可跨 Android、IOS、Web、各种小程序（微信/支付宝/百度/头条/QQ/钉钉）等多个平台；
  • 提供云打包和本地打包，对没有苹果电脑的人是福音，可以使用云打包进行苹果ipa制作；
  • 使用 Vue 语法，微信小程序 Api，使得前端开发学习成本低；

5. 组件库

前端的组件库太多了，这是给出做的较好的Vue组件库；

5.1. 移动端

选项：

• Vant : Vue官网合作UI，有赞团队开发的 轻量、可靠的移动端 Vue 组件库
• Vux : vux 基于WeUI和Vue(2.x)开发的移动端UI组件库

优先选择： Vant
选择理由：

• 相比其它移动端组件库（比如：Vux），组件功能较强大，且全面；
• 支持占位组件，占位组件能在视觉上提升加载速度；
• 有专门的图片组件，并且支持懒加载；

5.2. PC端

选项：

• ViewUI : 一套基于 Vue.js 的高质量 UI 组件库
• ElementUI : Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库

优先选择： ElementUI、ViewUI
选择理由：

• ElementUI 的组件 强大、充分可配置; 由饿了么官方团队开发和维护，且更新频率快，文档详尽且规范,同时支持 Angular、Vue、React；
• ViewUI 的免费版本 和 ElementUI 一样强大、充分可配置；由 北京视图更新科技有限公司 开发，并且有 收费的 Pro 版本；
• 个人觉得 ElementUI 没有 ViewUI 美观；
• 我公司前端人员几乎都用过 ElementUI；

6. 构建工具

选项：

• 框架对应的脚手架，如：Vue CLi
• Webpack
• Parcel

优先选择： 框架对应的脚手架
选择理由：

• 开箱即用；

7. JS代码检查工具

选项：

• ESLint
• JSHint
• JSLint
• TSLint

优先选择： ESLint
选择理由：

• 相比 JSLint、JSLint，强大、可扩展、充分可配；并且是现在主流；
• 针对对于 TypeScript 语言 的 TSLint 官方已经停止维护并改为用 ESLint 实现；即，现在通过更改配置可以让 ESLint 即可以对 JavaScript 进行检查，也可以对 TypeScript 进行检查；