一个前端项目，到底要集成多少库和工具

最近忙于一些新做的项目，由于新入手，就想着往最佳实践去靠，也寻找一些可以借鉴的模板。其中前端的部分，有很成型的模板可以借鉴。大幅度减少了自己调查和集成的工作量。但是仔细看看，发现这里头的概念太多了，各种开源的库和工具，有人说 “前端玩的是广度” 是有道理的。

这个新项目并不算特别复杂，大致的技术是基于 React+Redux 的，但是大体上集成完毕以后，完成了几个 demo 的代码之后，粗粗地过了一遍，除了传统意义上的 HTML+CSS+JavaScript（遵循 ECMAScript 6 的标准）三大件，居然涉及到了那么多技术，把自己吓了一跳：

• React: an open-source declarative JavaScript library for building user interfaces.
• Redux: a predictable state container for JavaScript apps. It helps you write applications that behave consistently, run in different environments (client, server, and native), and are easy to test.
• Webpack: constructs two separate dependency graphs and emits bundle (compressed) files.
• Gulp: a task/build runner for development, who can compile sass files, uglify and compress js files and much more.
• Karma: a tool that enables the running of source code (i.e. JavaScript) against real browsers via the CLI.
• NPM: Node Package Manager, who provides two main functionalities: Online repositories for node.js packages/modules which are searchable on search.nodejs.org. Command line utility to install Node.js packages, do version management and dependency management of Node.js packages.
• ESLint: a tool for identifying and reporting on patterns found in ECMAScript/JavaScript code, with the goal of making code more consistent and avoiding bugs.
• PhantomJS: a headless WebKit scriptable with a JavaScript API, or in simple terms, PhantomJS is a web browser without a graphical user interface.
• Jasmine: Jasmine is a behavior-driven development framework for testing JavaScript code.
• Material-UI: A Set of React Components that Implement Google’s Material Design.
• Oboe.js: an open source Javascript library for loading JSON using streaming, combining the convenience of DOM with the speed and fluidity of SAX.
• Babel: a configurable transpiler, a compiler which translates from Javascript to Javascript unlike a compiler which translates high level application code into lower level code or binaries.
• …

还有一些次要或者简单一些的就不列出了。在 package dependency 的配置文件中，我数了一下这些大大小小的依赖库、框架和工具，差不多有三十项。在这里我不想展开叙述每一项到底是用来做什么的，以及怎样集成到一起的。我倒是想说说杂七杂八的感受：

虽然写了好些年前端代码了，但这里面超过一半的技术以前并未深入使用过，因此这个项目让我觉得获益匪浅。我大概花了五个工作日时间把这些没接触过的和接触过但尚且夹生的技术，挨个摸了一遍，完全摸清摸透在那么短时间内是不可能的，但是至少从概念上、意义上，以及怎样使用上心中有谱，并且了解了一些最佳实践的方式。

前端的技术确实如百花齐放，发展速度太恐怖了，但是总感觉缺少头绪，除了那些好些年不怎么办变化的基础，需要有一些意在最佳实践的开源项目来梳理梳理，把这些东西像 IDE 整合一大堆插件一样整合起来，天下代码一大抄，这会给很多项目开头的工作减少很多成本。我想起几年前用的 Grails，就干了类似的事情，但它并非是着力于前端的，因此还是很不一样的。

在接触软件以后，我的学习范畴一直是软硬通吃，前后兼修，一直到现在也是。从论坛门户网站，分布式服务到大数据处理的代码都写过，还写过满是业务的存储过程，赶鸭子上架的手机端代码，甚至切过图。但是要打磨更深刻的专业技术能力，日后应当更专注于专精某一领域。之前我讲过，所谓的全栈，大多数情况下并没有明显优势，除非一些特殊的团队角色，或者创业。

在没有一定深度和一定领域内的广度的情况下，所谓的 “精通” 和 “掌握” 都只能是笑笑而已。就好比去考察一些号称 “精通 JavaScript” 的工程师，那么多开源库只是用过 JQuery 而已。遇到这种情况其实没有必要再深入问下去了。前端的团队更需要专业的人才。

很多人都知道，一个前端工程师在国内往往受到一定程度的轻视。其实不光在国内，国外也不见得有多少改善。比如在 Amazon，一个 WDE（Web Development Engineer）的发展渠道，就是远不如一个传统意义上的 SDE 通畅，Principal 也少得多。事实上，有人觉得这些东西玩得再转，也不得不基于这小小的浏览器而已。后来我们发现这话完全不对，再后来我们发现以往那些给工程师分类的界限越来越模糊。现在 NodeJS 已经满世界跑了，就算不用 NodeJS 来掌管服务端，也不得不接受和使用基于它的一些工具。因此我相信这个不公平的现象会逐渐好转，虽说这个过程看起来会很漫长。

最后，工作了超过八年，如今的我依然觉得，一个项目组吸引我的最大因素在技术层面。似乎所有人都在谈 impact，但是那些有趣的新技术，哪怕有时只是一些小技术和小点子，都能令我在半夜的时候想到了笑出声来。因为一个项目，写一写新鲜的代码，用一些新鲜的方式，学一些新鲜的技术，真是工作中莫大的享受。

文章未经特殊标明皆为本人原创，未经许可不得用于任何商业用途，转载请保持完整性并注明来源链接 《四火的唠叨》