前端项目技术选型

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 的桌面端组件库

优先选择: ElementUIViewUI
选择理由:

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

6. 构建工具

选项:

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

  • 开箱即用;

7. JS代码检查工具

选项:

优先选择: ESLint
选择理由:

  • 相比 JSLint、JSLint,强大、可扩展、充分可配;并且是现在主流;
  • 针对对于 TypeScript 语言 的 TSLint 官方已经停止维护并改为用 ESLint 实现;即,现在通过更改配置可以让 ESLint 即可以对 JavaScript 进行检查,也可以对 TypeScript 进行检查;
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 199,902评论 5 468
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 84,037评论 2 377
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 146,978评论 0 332
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 53,867评论 1 272
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 62,763评论 5 360
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,104评论 1 277
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,565评论 3 390
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,236评论 0 254
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,379评论 1 294
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,313评论 2 317
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,363评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,034评论 3 315
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,637评论 3 303
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,719评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,952评论 1 255
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,371评论 2 346
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 41,948评论 2 341

推荐阅读更多精彩内容