# Framework Analysis

使用过的框架/库以及分析

Knockout.js（MVVM框架） Ko.js是我第一款接触到的前端框架。当时是用于报修系统的开发，通过将各个页面的ViewModel写好，从而实现页面的动态效果、表单控制、翻页控制、API交互等操作。在事件绑定方面，Knockout.js基于脏检测的绑定方式提供了简单的数据双向绑定——由ko.observable实现。这样带来的好处是可以轻松的解决view和model层的联系，但是也带来了严重的性能问题。在报修系统中，我们并没有遇到一些对于性能要求非常高的页面，也使用了分页的解决方案。同时ko.js不是一个轻量化的框架，接近60k的minified js文件也已经较为庞大。作为老牌框架，ko.js在兼容性方面有很大的优势，从IE6就可以支持，在未来的方案选型中，ko.js可以在一些快速开发，对性能不敏感，且对兼容性有需求的项目中采用。

优点：兼容性好，MVVM双向绑定操作简单，拓展相对灵活。

缺点：框架老，社区不再活跃，性能差，文件偏大，workflow较陈旧。

React（View框架） React是我在Obsidian下使用的框架。在2015年Facebook带领的热潮中，React因为他的轻量化而进入了我的视线。同时期的框架还有Angular, Vue等。然而在2015年后半年，React所倡导的Virtual DOM架构已经被这些框架所借用。这也体现了React在同时期的领先性。React带来的有纯粹的View层控制，JSX语法以及Pure Component带来的f(d) => v的函数式编程思想。在react中的Components都是纯函数，从而可以加入React的更新检测机制，控制事件的分发和停止。在用户触发事件后，UI的更新先在V-DOM中完成，然后才会整个与真实的DOM进行同步。React仅仅实现了View层的控制，并没有任何双向绑定的功能。所以在实际应用中，纯React实现的用户输入控制较为繁琐，需要手动去绑定onChange事件等，再在回调中调用Container的函数，该函数再去操作Container的State。通过setState方法，react会触发UI更新，从而达到一种getter/setter的效果。除此之外，高阶组件的构造也给了react相当可观的可拓展性。

优点：国内外最火的框架，拥有活跃的开源社区。优秀的性能，良好的拓展性，函数式编程带来的高可读性，JSX带来的纯JS下的前端workflow。

缺点：需要自己编写绑定的函数，较为繁琐。

JQuery（DOM库/Ajax库） JQuery作为一款老牌且非常常用的库，我在几个项目中都有使用过。作为一款大而全的库，他提供了CSS Manipulation, AJAX Queries, DOM Queries, Event Handling等等非常重要的功能。在浏览器集成VanillaJS之前，这些功能都解决了当时的痛点，所以在IE6-IE8的年代，JQuery几乎是不可或缺的一项技术，他成为了当时js层操作DOM层的不二选择。JQuery通过遍历浏览器的DOM树，从而实现了许多功能，这也决定了他的性能不会很高。

优点：功能强大，兼容性非常强，有很多最佳实践，有丰富的插件。

缺点：许多功能已经被浏览器所内置，性能差，测试性较差，回调带来的代码可读性差。现在可以被Zepto.js取代（同样API下实现了更好的性能和更现代的结构）。

Bootstrap 3（UI库）

Bootstrap 作为一款相当优秀的UI库，我在旧版的Obsidian和整个报修系统中都有所采用。他提供了许多方便的方法和漂亮的控件，拥有众多主题可以覆盖使用。并且，他具有完善的Grid系统，在早期可以提供非常良好的布局功能。同时，对IE8+的支持也是亮点之一，做一些shim/workaround还能支持到IE6+，对于老浏览器提供了不少的支持。（虽然还是要一个个排坑，IE6的坑太丰富了）

优点：快速上手，用于后端管理页面效果优秀，功能庞大

缺点：缺乏个性化，在许多实际应用中过于臃肿。

// 2017/12/7更新

Vue (View框架) Vue这款框架我在最近撸的一个简单轮子http://kontent.za-pt.org/中使用。给我的印象是API简洁，比React好上手，有Angular的方便，又没有React的条条框框，双向绑定又不需要用到Object.bind()，同时一些scoped css, scoped scss真的很方便。Vue file的结构清晰，可以说是快速构建SPA的不二之选。性能同样很快，正如官网上所说，渐进式Javascript框架，我认为Vue真的做到了。

网上很多Vue的非议，无非是抄袭/diss别家框架/作者素质不高之类的。但我认为，学习他人好的地方，that’s how open-source works。没有必要为了这些是是非非来阻碍自己的发展。

优点：API简洁，上手简单，效果良好，小程序首选。

缺点：无法大规模工程化（Typescript的支持在最近才上stable），有些cutting-edge没有React成熟，社区没有那么火爆（相比于React）。

Bulma (UI库) Bulma是一款新生的UI库，全范围使用了Grid+Flex的布局，制作一些类似全屏居中，Metro 磁贴，瀑布流等的效果非常方便，表格的效果相当好看，开关/Datepicker/Selection的实现也十分完善。还有完善的响应式布局，在现代浏览器中，Bulma可以提供一个快速，现代化，代码简洁的前端UI解决方案。（同类方案还有ant-design, element-ui等等）。

优点：全局Flex，功能强大，效果前卫。

缺点：对旧版浏览器兼容较差（参照caniuse），Flex布局支持到Firefox 57+ ,Chrome 62+.

现在的感受

前端框架千千万，轻量级从Riot.js到Vanillajs到lodash到Backbone.js，重量级从Vue到React到Angular，其实没有什么框架是可以解决一切的，每一个框架都有自己的特点和擅长的领域。

之前我专注于一项技术（从Ko.js到React），现在发现其实自己以前的应用场景中，有更好的替代品，只是自己没有发现。所以，我决心关注现在前端圈，不断了解最适合这个时候的框架和最适合这个应用场景的框架，从而在接手一个项目时，有个大概的思路，从架构到实现，不至于杀鸡用牛刀。大家都知道React好用，React HOC实现美观方便，Redux Reducer, Action, Dispatcher, Store函数式编程效果拔群，但是你要实现一个todo，带出2-30个文件，意义实在不大。

除此之外，加强自己对于语言的理解更为重要。谁也不会想到Vue的内核就是一句Object.defineProperty()。现在从ES5->ES6->ES7->ESNEXT->ES2017->ES2018，js本身在发展，一些以js为编译目标的语言也在发展（Typescript, Kotlin），甚至还有asm.js乃至WebAssembly的native级别的语言。也就是说，除开框架，底层的理解在今天更为重要。