首先必须分清六个基本概念：Library，Toolkit，Framework，Design，Boilerplate，Scaffolding。
Library库：分为2类
一类是方法库，用来实现特定需求的一组API集合。最常见的就是jQuery，它是一系列操作DOM和AJAX的API组成的方法库。除了jQuery，还有早期的Prototype，Dojo，Mootools，后面这三个在当时也被称为三大前端工具库。
操作Data的有UnderScore和Lodash，操作Event的有现在流行的RxJS，他们都是Library，在需要的时候，正确调用他们提供的方法就可以。
一类是UI组件库，满足特定业务需要的高可复用的常见UI组件集合。例如Ant Design of React/Ant Design of Angular(NG-ZORRO)，Element UI，LayUI，EasyUI。早期的Yahoo UI，Extjs，jQuery UI。
Toolkit`(工具箱): 如Bootstrap，给你提供创建现代响应式页面所需要的工具，包含一套完整的响应式CSS类库，字体，同时还有一套很完整的UI组件。只是这些组件原生是用jQuery写的，不适用于现在主流的前端。所以产生了很多衍生UI库，例如Angular实现的ng-bootstrap和ngx-bootstrap，React实现的react-bootstrap，Vue实现的bootstrap-vue。
Framework框架: 用来构建一个应用的主体结构。然后你在这个主体结构上添砖加瓦，实现自己的需求。Web服务器端的框架基本实现的都是MVC设计模式，你在Model、View、Controller层分别去添加代码。Web前端，Angular(以及它的前身Angularjs)实现的都是MVP模式，是Model、View、Presenter三层。老一辈的其他前端框架，例如Backbone、Ember，实现的是所谓MVVM。
只有Angular算作严格意义上的Framework，vue、react本质上是一个解决View层的Library。
Design设计语言： 当说到xxx Design的时候，前端应该经常听到Material Design和Ant Design，分别是Google和阿里的推出的两种前端UI设计语言。
Scaffolding脚手架工具： 前端的脚手架工具一般都是用cli提供的，cli是(Command Line Interface的缩写)，不是Client的前三个字母。例如ng-cli, create-react-app, vue cli，以及用Yeoman(YO)做出来的许多generator。
Scaffolding的作用就是辅助你快速搭建项目。但是Scaffolding不是最终成果物的一部分
Boilerplate模板、样板： 一般程序员很少了解这个概念，而是Library和Framework知道的多一些。上面说过了，当你用React开发的时候，React本身不能满足全部需求，就需要周边辅助的项目。如何把这些全家桶用最佳实践(Best Practice)的方式组合在一起？就需要有人给一个样板，Ant Design Pro就产生了。所以Ant Design是设计语言、Ant Design of React是遵循这门设计语言并且用React实现的UI组件库，Ant Design Pro就是模板。
网友评论