阅读 4154

[译] 新一代 JavaScript 的开发图谱(2017)

过去 5 年里你一直使用 REST 接口。或者你一直在优化搜索公司里庞大的数据库。又或者你一直在给微波炉写嵌入式软件。自从你用 Prototype.js 来对浏览器进行面向对象编程已经过去很久了,现在你想提升一下你的前端技能,你看了一下发现情况是这样

当然你不是要从一堆徐峥里找出葛优,你在找 25 个连名字都不知道的人。这种情况在 JavaScript 社区特别常见,以至于存在 “JavaScript 疲劳” 这个词。当你有时间去看一些关于这个主题的有趣的东西的时候,你会看到在2016年学习JavaScript是怎样的体验?绝妙的反映了这个现象。

但你现在没时间了,你在一个大迷宫里,你需要一张地图,所以我做了一张。

一点声明在前:这是一张可以让你快速行动,不必做自己太多决定的作弊表。基本我会给通用的前端开发制定一套工具,这将会给你一个舒服的环境而不会让你太头疼。一旦你搞定了这些问题,你就可以根据需要自信地调整技术栈。

地图结构

我将会将这张地图分为几个你需要解决的问题,对于每个问题,我将会:

  • 描述问题或工具需求
  • 决定你需要选取哪种工具
  • 讨论为什么这样选
  • 给一些其他选择

包管理

  • 问题:需要管理项目和其依赖。
  • 解决办法:NPM 和 Yarn
  • 原因:NPM 是目前相当多的软件包管理器。Yarn 基于 NPM 但是优化了依赖的解决方案,并且维护一个锁文件(lock file),用来保存库确切的版本号(它可以集成在 NPM 中,它们是相辅相成而不是单独存在的)。
  • 可选:暂时未知。

JavaScript风格

  • 问题:ECMAScript5 (老版本 JavaScript) 太烂。
  • 解决办法:ES6
  • 原因:这是未来的 JavaScript ,但是你可以现在就用了。结合其他多种语言有用的特性。比如说:箭头函数、模块导入/导出功能、解构、模版字符串、let 和 const、生成器、promises。如果你是写 Python 的你会感觉更舒服和习惯。
  • 可选:TypeScript、CoffeeScript、PureScript、Elm

编译

  • 问题:许多浏览器目前不支持 ES6,你需要东西来把你现代的 ES6 编译成 ES5。
  • 解决办法:babel
  • 原因:在服务端编译,完美的解决办法,也是事实上的标准。
  • 可选:Traceur
  • 注意:你需要使用 babel-loader,一个 Webpack loader (以及一些其他的),如果你计划使用任何风格的 JavaScript 你都需要编译。

Linting

  • 问题:有一万种写 JavaScript 的方式所以很难达到一致性。一些 bug 可以用 linter 检查出来。
  • 解决办法:ESLint
  • 原因:完美的检查和很好的可配置性。airbnb preset 值得遵循。对你熟悉新的语法绝对有帮助。
  • 可选:JSLint

打包工具

  • 问题:你不能使用分开的单独文件,依赖需要被解析和正确的加载。
  • 解决办法:Webpack
  • 原因:高度可配置性,可以加载所有的依赖和文件,支持热插拔。事实上,他是 React 项目的打包工具。
  • 可选:Browserify
  • 不利性:一开始可能很难配置
  • 注意:你需要一点时间来了解这东西是怎样工作的,你还需要了解一点 babel-loader、style-loader、 css-loader、file-loader、url-loader。

测试

  • 问题:你的应用很脆弱,很容易崩溃,所以你需要测试。
  • 解决办法:mocha (测试运行),chai (断言库) 和 chai-spies (对于假的对象,你可以查询某些事件应不应该发生)。
  • 原因:使用简单,功能强大。
  • 可选:Jasmine、Jest、Sinon、Tape。

UI 库/状态管理

  • 问题:这是大家伙,单页应用越来越复杂,状态管理也很麻烦
  • 解决办法:React 和 Redux
  • 使用 React 的原因:令人兴奋的范式转变,打破许多 web 领域的教条更好的实现。关注比传统方法更好的分离:取代分离 HTML/CSS/JavaScript 而采取组件化的思想。你的交互界面只是状态的反映。
  • 使用 Redux 的原因:如果你的应用不是很轻量,你需要你个东西来管理状态 (否则你疲于对于组件间的交互与数据传递,以及组件化的局限性)。网上的每一个采取抽象的 Flux 架构模式的解决办法对会让你摆脱迷惑。帮助你节省时间直接采用 Redux 就行了。 他的实现模式很精简。即使 Facebook 也使用他。另外的美妙之处:重载并保持应用状态,可测试性。
  • 可选:Angular2、Vue.js。
  • 警告:当你第一次看到 JSX 风格的代码你可能会很吃惊。然后找一个社区大喊,这是多年来认知的失调,事实上将 HTML、JavaScript 和 CSS 写在一起是很棒的。相信我— 不需要在一个文件里写两个蹩脚的引用。

DOM 操作和动画

  • 问题:猜猜看?当你在选择元素和执行操作 DOM 节点时你仍然需要一点权宜之计。
  • 解决办法:原生 ES6 或者 jQuery。
  • 原因:是的,jQuery还活着,React 和 jQuery 并不冲突,你的大多数需求都可以用 vanilla React 来实现 (和querySelector)。添加 jQuery 将会使你的打包速度变慢,我想说在 React 上使用 jQuery 不是很好你应当避免他。如果你被 ES6 和 React 不能解决的问题卡住了,或者你正在处理讨厌的跨浏览器问题,也许需要使用一下jQuery。
  • 可选:Dojo (不知还在不?)。

样式

  • 问题:现在你有了正确的模块,你希望他们都是独立的并且可以有组织化的重用。组件化的样式应该像组件本身一样轻便。
  • 解决办法:CSS 模块化。
  • 原因:我喜欢内联样式(并且广泛的使用),我必须承认他们有很多弱点。是的,在 React 内可以写行内样式,但是你不能使用伪类选择器(比如:hover),这将会导致很多问题。
  • 可选:内联样式。我特别喜欢内联风格的原因是他们把样式看作常规的 JavaScript 对象,可以让你程序化的处理。另外,他们在你每一个的组件文件里,可以让你更好的维持。一些人仍推荐 SASS/SCSS/Less。这些语言意味着额外的构建步骤,他们并不像 CSS 模块/内联风格一样便携,但是功能强大。

就这样

你现在有一堆的东西来学习,但至少你不要在花费时间来做调查了。如果发现我少做了或者漏了什么东西?在 twitter 上给我留言或者评论吧 @bug_factory

掘金翻译计划 是一个翻译优质互联网技术文章的社区,文章来源为 掘金 上的英文分享文章。内容覆盖 AndroidiOSReact前端后端产品设计 等领域,想要查看更多优质译文请持续关注 掘金翻译计划

关注下面的标签,发现更多相似文章
评论