如何做商业前端框架+UI库选型?

Posted 2023-04-30

参考技术A

这将帮助你了解前端社区中海量的工具。

当然，这些只是一些可选的列表，当你需要做出选择的时候帮助你抉择。

我自己使用它吗？

是的，当我需要开始项目的时候，我用它来作为提醒。

同时，每当有人问“我该使用什么框架呢？”的时候，我就会把这篇文章给他看。

因为，正如你明白的，事情没有绝对的对与错，但是有一些优质的框架能够帮助做出我们更好的选择。

另外，我也会不时的更新本文，因为有时候当我学习更多后也会改变当初的想法。
我应该怎样开始?

如果你的项目不是很小，你应该需要下面几件事：

   项目模块化 我个人比较喜欢 Component-based architecture，因为他适用于 various-frameworks

同时，考虑一些其他的例子，比如 BOT 、 Elm Architecture 或者 re-frame 或者 CycleJS

模块加载器(RequireJS，Browserify, Webpack, ComponentJS, SystemJS)

这些东西能够帮助我们保持javascript(或者components)彼此独立和可维护。

包管理器(npm, jspm, bower)

我个人一直比较喜欢 npm ，似乎他是javascript和nodejs真正的标准。另外我会考虑bower来做补足，因为他是一个很好的下载静态资源的工具，但它在管理组件和依赖又不如npm强大。

自动部署/编译/构建流水线(grunt/gulp/brunch/broccoli)

因为，如果一直做重复的事情的话生命是很短暂的。

CSS预处理(jss/stylus/sass/css-modules)和 postprocessors(css0, autoprefixer, postcss)

这些工具使css更美好，去除了一些浏览器兼容的问题。是的，我是从2015知道这些的，但是不论如何，它在过去确实是痛点。

构建框架(Bootstrap, Zurb Foundation, Elemental UI, Material Lite)

这些框架让很多web开发者合作，它们会帮助你处理基本的布局和样式。

尽管，你可以考虑构建你自己的解决方案，如果你感觉构建很厉害或者希望成为前端专家，或者你需要为你的公司构建基本的视觉元素。

如果是这样的话，建议你尽快使用方法论(BEM, OOCSS)，它们可以帮助你节约时间。

我个人比较喜欢 BEM 命名方式和基本工作流，你能够从 styleguide for Brainly.com找到一些可以帮助你的灵感。

如果你不构建基本的组成，建议看一看 html5 Boilerplate

    测试工具(jasmine, karma, mocha, tape, itern)

    任何人都需要测试，没有例外的。

    代码质量监控工具(eslint, husky, editorconfig)

    可以获取帮助的社区(chats, IRC, meetups, twitter)

好了，下一步呢？

在选择你的工具前有一些值得思考的问题需要解决。

准备好了吗？

    我需要和其他人合作吗？他们是谁？他们想要什么？

这个问题会帮助你选择语言和工作流，这对你和你的伙伴都有帮助。

    我最关注什么？质量，开发速度，还是可维护性？

这样你可以决定是否试验一些新工具，以及是否能承担失败的风险。

    是否需要开放给第三方？

面向的团队不同可能会限制我们语言的选择。

    我是否在处理核心的项目

如果你处理核心项目，请最好选择高稳定性的语言和框架，这更安全，让你睡得更好。

    是一个可交互的app还是基本的文档页面。

结果很可能是你仅仅需要基本的HTML ＋CSS ＋ tools，或者静态网站生成器或者CMS。

    这是一个单一的项目还是其他项目的相关项目？

即使你有一系列项目，你也应该用一些组件和样式引导，这些有不错的文档。

直接减少代码重用，保持一致性。

另外，考虑SEO，和服务端渲染。
语言列表

当你回答完上面这些问题后，就可以和你的队友聊聊，然后选择一个语言了。

因为这里有很多的东西，而不是糟糕的Javascript，你可以选择

    是否有js开发团队

考虑ES6(babel兼容)

这会让你的生活简单一些。

    你是否偏爱typed语言？开发typed是否可以？

考虑 typescript

    函数式编程是否接受？

你可以从简单ES6库开始，比如 lo-dash 或者 ramda。

这里有一些教程和书来帮助你开始美好的旅行。

    你是否尝试过函数式编程，想要更好的东西？

试试 elm ，很酷的！

    你是否能够全栈？

试试 clojurescript，很酷很酷的

    你喜欢沙拉吗？

试试scalaJS

    你知道Haskell吗?

试试 purescript，真的很酷

    想要更多疯狂的？

这里有一个可以编译成javascript的语言列表，选一个然后享受吧。
框架列表

    你仅仅需要基本的可运行的app？

没有时间做更复杂的工作？

试试 angular. start looking for help imediately

    你是否经常需要快速的原型开发？

    是否能在未来修复一些问题？

    试试 angular. 一些问题

    你是尝试前端开发的后端？

试试 angular. 寻找一些前端开发者

    你是否需要很快的进行开发和构建，但是同时会丢失一些特点？

试试 ampersand/backbone

    同样的技术选型，怎样从中型到大型？

把 marionette/chaplin添加到你的backbone里面去，另外可以考虑 Reackjs

    你是否有一些时间来实验，同时得到很大的性能提升？

试试mithril/knockout/aurelia+

    你是否有不错的前端实验精神，对函数式编程熟悉？

试试 ReactJS＋Redux＋ImmutableJS+

    更多函数式编程技巧？或者偏好交互性强的应用？

使用 reactive streams(bacon, rxJS) 或者试试 Cycle.js(实验性)

注意1: add streams any会是很好的选择，可以推荐别人使用。

注意2: 请不要拒绝使用 FRP的reactive streams

    你想要使用严格的验证和通用处理方式？

你的应用会越来越大？

你计划扩充你的团队？

你有时间学习新东西？

建议花时间学习 EmberJS，他将会是很好的投资!

    你是否需要“类桌面应用”？

    你的应用有表格，图例，或者其他分析功能？你在构建企业应用？

    试试 ExtJS

    你们是一个为其他开发者提供服务的工作室？

    你最好有一个不错的工具集，另外，同事之间最好有一些公共用例。

    你是一个为他人提供工具的自由开发者？

    适应他们的选择。

    尝试angular，这将不会造成多大麻烦，让其他人得到他们想要的。

    注意：如果别人付费，请不要改变客户的需求

    你正在构建一个有吸引力的产品，它将会很多人使用？

    有了明确的需求后我们就从上面的列表中选择一个合适的框架。

    关于开发什么样的应用你有明确的需求（比如10屏的移动应用)

    花两周时间来试验特定的需求（ionic, famous, Sencha Touch)

怎样开始编码？

    花一些时间阅读你所选择框架或者工具的文档。
    在社区里面询问一些经验开发者怎样算是优秀项目的开端。
    准备所有的工具。
    极客精神。但是我建议更加工程化一点。
    ...
    成功。

不知道怎么用我介绍的一些不常见框架？

看看 TodoMVC Examples，找到你选择的框架。

但是记住，这些项目只是示例，大多数情况下他们不适合大中型项目。

前端框架选型指南

前面的话

有一个流传较广的笑话，一个人在stackoverflow中提了一个问题，如何使用javascript实现一个数字与另外一个数字相加。最高票回答是你应该使用jQuery插件，jQuery插件可以做任何事情。 历史总是在重演，以前是jQuery，现在可能是react或vue。不同的框架有不同的应用场景，杀鸡不要用牛刀。本文将详细介绍框架选型

框架与库

库(lib)具有以下三个特点：

1、是针对特定问题的解答，具有专业性；

2、不控制应用的流程

3、被动的被调用

框架(frameword)具有以下三个特点：

1、具有控制反转(inverse of control)的功能

2、决定应用程序的生命周期

3、一般来说，集成了大量的库

由下图所示，框架会在特定的时间要求程序执行某段代码。框架决定了什么时候调用库，决定了什么时候要求代码去执行特定功能

而实际上，一个库有时也可以称之为框架，而库里面集成的方法称之为库

框架和库的区别不由实际大小决定，而由思考角度来决定。框架和库实际上可以统称为解决方案

解决方案

前端开发中的解决方案主要用于解决以下7个方面的问题：

1、DOM

2、Communication(通信)

3、Utililty(工具库)

4、Templating(模板集成)

5、Component(组件)

6、Routing(路由)

7、Architecture(架构)

【why】

为什么要使用外部的解决方案呢？

1、提高开发效率

2、可靠性高（浏览器兼容，测试覆盖）

3、配备优良的配套，如文档、DEMO及工具等

4、代码设计的更合理、更优雅

5、专业性高

如果问题过于简单，或者备选框架的质量和可靠性无法保证，再或者无法满足业务需求，则不应该选择外部的框架。如果团队中已经有相关的积累，就更不需要使用了

【how】

一般地，解决方案要实际开发中有以下3种使用方式：

1、开放式：基于外部模块系统，并自由组合

2、半开放式：基于一个定制的模块系统，内部外部解决方案共存

3、封闭式：深度定制的模块系统，很少需要引入外部模块

DOM

接下来，将针对解决方案中提到的7个问题进行分别介绍，首先是DOM

关于DOM，主要包括Selector(选择器)、Manipulation(DOM操作)、Event(事件)、Animation(动画)这四个部分

DOM相关的解决方案主要用于提供以下操作

1、提供便利的 DOM 查询、操作、移动等操作

2、提供事件绑定及事件代理支持

3、提供浏览器特性检测及 UserAgent 侦测

4、提供节点属性、样式、类名的操作

5、保证目标平台的跨浏览器支持

【常用方案】

常用的DOM解决方案有 jQuery、zepto.JS、MOOTOO.JS等

jQuery是曾经风靡一时的最流行的前端解决方案，jQuery特有的链式调用的方式简化了javascript的复杂操作，而且使人们不再需要关心兼容性，并提供了大量的实用方法

zepto是jQuery的精简版，针对移动端去除了大量jQuery的兼容代码，提供了简单的手势，部分API的实现方式不同

mootools源码清晰易懂，严格遵循Command-Query(命令-查询)的接口规范，没有诸如jQuery的两义性接口。还有一个不得不提的特点是，使用选择器获取的是DOM原生对象，而不是被包装过的对象。而它支持的诸多方法则是通过直接扩展DOM原生对象实现的，这也是它的争议所在

相比较而言，最稳妥的DOM解决方案是jQuery

【专业领域】

上面的解决方案用于解决DOM一般的通用问题。随着技术的发展，DOM的专业领域出现一些小而精致的解决方案

1、手势

Hammer.JS包括了常见手势封装（Tab、Hold、Transform、Swifp）并支持自定义扩展

2、局部滚动

iscroll.JS是移动端position:fix + overflow:scroll的救星

3、高级动画

Velocity.JS可以复杂动画序列实现，不仅局限于 DOM

4、视频播放

Video.JS类似原生 video 标签的使用方式，对低级浏览器使用 flash 播放器

通信

关于通信，主要包括XMLHttpRequest、Form、JSONP、Socket等

通信相关的解决方案主要用于提供以下操作

1、处理与服务器的请求与相应

2、预处理请求数据与响应数据 Error/Success 的判断封装

3、多类型请求，统一接口（XMLHttpRequest1/2、JSONP、iFrame）

4、处理浏览器兼容性

【常用方案】

除了jQuery等，其他常用的通信解决方案有Reqwest、qwest等

Reqwest支持JSONP，稳定性高，IE6+支持，CORS 跨域，Promise/A 支持

qwest代码少、支持XMLHttpRequest2、CORS 跨域、支持高级数据类型（ArrayBuffer、Blob、FormData）

【专业领域】

对于实时性要求较高的需求可以使用socket.io，它实时性高，支持二进制数据流，智能自动回退支持，且支持多种后端语言

工具包

工具包(Utililty)的主要职责包括以下：

1、提供 JavaScript 原生不提供的功能

2、包装原生方法，使其便于使用

3、异步队列及流程控制

【常用方案】

常用的工具包解决方案有es5-shim、es6-shim、underscore、Lodash等

上面提到的shim，也是经常听到的一个词，翻译过来是垫片的意思。对于es5、es6等标准包括的一些新方法，由于浏览器兼容性不高，所以无法直接使用它们。这时，就需要在保证实现与规范一致的基础上，来扩展原型方法，这种做法就叫做shim。好处在于，实际上就是在使用javascript的语法，但不用去考虑低版本浏览器的兼容性问题

es5-shim 提供 ES3 环境下的 ES5 支持

es6-shim 提供 ES5 环境下的 ES6支持

underscore 提供兼容 IE6+ 的扩展功能函数

Lodash是underscore 的高性能版本，方法多为 runtime 编译出来的

模板

模板主要包括三类：基于字符串的模板(String-based)、基于DOM的模板(DOM-based)、活动模板(Living Template)

1、基于字符串的模板(String-based)，解决方案包括(dustjs、hogan.js、dot.js)

原理如下：输入一段模板字符串，通过编译之后 ，生成一段Function，通过Function的render或类render函数渲染输入的数据data，输出模板字符串，字符串通过innerHTML或类似的方式渲染成最后的DOM结构。这类模板的问题在于通过字符串生成DOM之后就不再变化，如果在改变输入的数据data，需要重新render，重新生成一个全新的DOM结构，性能较差。但该模板可以在服务器端运行

2、基于DOM的模板(DOM-based)，解决方案包括(angularjs、vuejs、knockout)

原理如下：将输入的字符串模板通过innerHTML转换为一个无状态DOM树，然后遍历该节点树，去抓取关键属性或语句，来进行相关的绑定，进而变成了有状态的DOM树，最终导致DOM树会与数据模型model进行绑定。这类模板的特点是修改数据时，会使有状态的DOM树实时更新，运行时性能更好，也会保留 DOM 中的已有事件

3、活动模板(Living Template)，解决方案包括(RegularJS、RactiveJS、htmlbar)

原理如下：活动模板融合了字符串模板和DOM模板的技术，模板字符串string通过自定义的解析器DSL-based Parse解析成AST(抽象语法树)，通过遍历AST，使用createElement()、setAttribute()等原生DOM方法，生成DOM树，最终导致DOM树会与数据模型model进行绑定。由于其内部完全不使用innerHTML，所以安全性较高

组件

组件(Component)的主要职责包括以下：

1、提供基础的 CSS 支持

2、提供常见的组件，如slider、Modal等

3、提供声明式的调用方式（类似 Bootstrap）

【常用方案】

常用的组件解决方案有Bootstrap、Foundation等，两者具有移动端first的流式栅格系统，由sass组织，可定制UI

Bootstrap封装了常用的组件，是目前最火的组件解决方案

Foundation在国内知名度不高

路由

路由在单页系统中非常重要，主要职责如下

1、监听 URL 变化，并通知注册的模块

2、通过 JavaScript 进行主动跳转

3、历史管理

4、对目标浏览器的兼容性支持

无论什么框架，在完成配置之后，内部都有如下图所示的类似的路由表。

【常用方案】

常用的路由解决方案有page.JS、Director.JS、Stateman、crossroad.JS等

page.JS类似 Express.Router 的路由规则的前端路由库

Director.JS可以前后端使用同一套规则定义路由

Stateman处理深层复杂路由的独立路优库

crossroad.JS老牌路由库，API 功能较为繁琐

架构

所有的架构(architecture)都是一个目的，就是解耦。解耦有很多方式，可以通过事件、分层等

市面上，有很多架构模式，包括MVC、MVVM、MV*等

架构的职责主要包括以下：

1、提供一种范式帮助（强制）开发者进行模块解耦

2、视图与模型分离

3、容易进行单元测试

4、容易实现应用扩展

以MVVM为例，如下图所示。它包括Model(数据层或模型层)、View(视图层)、ViewModel(控制层)

Model(数据层或模型层)表示数据实体，它们用于记录应用程序的数据

View(视图层)用于展示界面，界面是数据定制的反映，它包含样式结构定义以及VM享有的声明式数据以及数据绑定

ViewModel(控制层)是View与Model的粘合，它通过绑定事件与View交互并可以调用Service处理数据持久化，也可以通过数据绑定将Model的变动反映到View中

它们的关系是：各部分之间的通信，都是双向的；View 与 Model 不发生联系，都通过 ViewModel 传递；View 非常薄，不部署任何业务逻辑，称为”被动视图”（Passive View），即没有任何主动性，而ViewModel非常厚，所有逻辑都部署在那里

【SPA】

要特点注意的是，MV* !== SPA(单页系统)

SPA应用程序的逻辑比较复杂，需要一种模式来进行解耦，但并不一定是MV*模式

最后

最后推荐一个框架选型网站https://www.javascripting.com，该网站根据不同的需求的选择，给出当下流行的框架选型

本文是蔡剑飞、郑海波老师的《产品前端架构》课程中《框架选型》章节的学习记录