【新年快乐】2017年你应该关注的JavaScript框架与主题

2017-01-01 王下邀月熊 JavaScript

JavaScript的繁荣促生了很多优秀的技术、框架与工具库,这空前的繁荣也给很多人造成了困惑,无所适从。到底何者是值得投入,代表了未来的方向,而何者又是真正适合于当前项目,当前团队的?而本文即时作者基于自身实践的一些思考,与诸君共享。

JavaScript & DOM Fundamentals

工欲善其事,必先知其器。在我们准备了解使用其他JavaScript框架的时候,我们首先需要去了解JavaScript的语法要点与一些工程实践:

  • 内建方法: 我们需要了解标准数据类型 (特别是 arrays, objects, strings, 以及 numbers).

  • 函数 & 纯函数: 或许你觉得自己已经很了解函数了,但是总有些小技巧是你没有接触过的。另外不仅仅是对于基本的函数的用法,我们还要对函数式编程的思想,譬如纯函数高阶函数等有所掌握。

  • Closures: 在学习闭包的过程中了解JavaScript传统的函数作用域。

  • Callbacks: 回调是JavaScript异步编程的基本概念,某个回调函数会在某个异步操作结束后被调用,就好比领导对你说:好好干你的工作,做好了跟我汇报下。

  • Promises: Promise是处理将来值的方法之一,当某个函数返回的是Promise对象时,你可以调用该对象的then函数来获取异步传入的值。而调用者是通过传入的resolve回调来传值,譬如doSomething().then(value => console.log(value));

  • Ajax & 服务端API调用: 绝大部分有趣的应用都需要与服务端通过网络进行交互,你应该了解基本的HTTP Client知识。

  • ES6: 最新的JavaScript版本为ES7,或者叫ES2016,不过很多人ES6还没用熟练,正在过渡期吧。

  • Classes (note: 避免类继承. 参考 How to Use Classes and Sleep at Night.)

  • 函数式编程基础: 函数式编程基于数据函数的组合来构建业务逻辑,避免了共享状态与可变数据,这一点会避免很多的问题。

  • Generators & async/await: 个人观点,最好的异步代码的写法就是用写同步代码的方式去写异步代码。不可否认这些都存在学习曲线,不过磨刀不误砍柴工。

  • Performance: RAIL — 参考 “PageSpeed Insights” & “WebPageTest.org”

  • Progressive Web Applications (PWAs): 参考 “Native Apps are Doomed”& “Why Native Apps Really Are Doomed”

  • Node & Express: Node允许你在服务端运行JavaScript程序,而Express则是目前最为流行的基于NodeJS的Web框架。

  • Lodash: 一个非常好用的、模块清晰的JavaScript辅助工具,其也遵循了很多函数式编程的理念,你可以通过 lodash/fp导入。

Tooling

  • Chrome Dev Tools: DOM inspect & JS debugger: Chrome Dev Tools算是最为优秀的调试工具了,Firefox也有很多不错的扩展。

  • npm: 官方开源的JavaScript包管理工具。

  • git & GitHub: 分布式版本管理系统,很适合团队协作。

  • Babel: 能够将ES6代码编译到ES5使之能够兼容老版本浏览器。

  • Webpack: 最著名的模块打包工具之一,有不少优秀的模板配置奥,譬如Webpack2-React-Redux-Boilerplate。

  • Atom, VSCode, or WebStorm + vim: 你需要为自己选择合适的编辑器来辅助你快速开发。Atom与VSCode都是非常优秀的JavaScript编辑器,WebStorm也不错但是它是收费版本。如果你打算直接在服务端开发的话,Vim是个不错的选择。

  • ESLint: ESLint能够帮助开发者更快地发现语法错误与样式问题,在Code Review与TDD之后这是个不错的减少Bug的方法。

  • Tern.js: 基于编辑器插件的标准JavaScript类型推导工具,不需要任何编译步骤或者注解支持。

  • Yarn*: 类似于NPM的工具,不过安装起来更为可靠快速。

  • TypeScript*: JavaScript的静态类型支持,不过需要特别注意的是,除非你在学习Angular 2,不然我觉得你如果要选用Angular 2的话还是要慎重考虑。我个人很喜欢TypeScript,也很钦佩他们团队的优秀工作,不过任然有很多的权衡,可以参阅 “The Shocking Secret About Static Types” & “You Might Not Need TypeScript”.

  • Flow*: JavaScript静态类型检测工具,可以阅读 “TypeScript vs Flow” 来对于这二者有个大概的了解,如果你打算Flow的话也是推荐我的编辑器 Nuclide。

React

React 是个专注于构建用户视图层的JavaScript库,其基于单向数据流的设计思想,也就意味着:

  • React 以Props的形式将参数传入Components,并且在数据发生变化的时候选择性重渲染部分DOM。在重渲染阶段发生的数据变化并不会立刻触发重渲染,而是在下一个绘制阶段的时候才会进行重渲染。

  • 渲染完毕之后,就进入了事件处理,React使用特殊的合成事件帮助开发者监听与响应事件,将所有的节点上的事件交托单一事件监听器处理以获得更好的性能体验。你可以在这些事件的监听函数中通过外部传入的回调重新设置Props或者直接修改内部State。 
    对于数据的任何变化都会重复步骤1。

  • 这种单向数据流与当时以Angular 1 / Knockout为代表的双向数据绑定形成对比,双向数据绑定中如果发现绑定的数据发生变化则会立刻触发重渲染,而无论当前是否处于渲染流程中,这一点也就导致了Reflows与Repaints的性能表现非常差。React并没有预置专门的数据管理系统,不过官方推荐基于Flux的解决方案。React 的单向数据流的概念借鉴了很多函数式编程的设计思想,并且对于不可变数据结构的应用也在很大程度上改变了我们对前端框架的认识。如果你希望了解更多关于React与Flux架构的知识,推荐阅读 “The Best Way to Learn to Code is to Code: Learn App Architecture by Building Apps”。

  • create-react-app*: 官方出品的快速脚手架搭建工具。

  • react-router*: 方便的React路由解决方案。

  • Next.js*: 非常简单的通用React应用开发框架。

  • velocity-react*: 非常不错的React动画辅助库。

Redux

Redux 为应用提供了事务式的,确定性的状态管理支持。在Redux中,我们仅可以通过Action来修改当前的应用状态。如果你希望深入了解为啥这么做,可以参阅 “10 Tips for Better Redux Architecture.”(https://medium.com/javascript-scene/10-tips-for-better-redux-architecture-69250425af44)或者跟着 Dan Abramov(https://medium.com/u/a3a8af6addc1)的官方课程:

  • “Getting Started with Redux”(https://egghead.io/courses/getting-started-with-redux

  • “Building React Applications with Idiomatic Redux”(https://egghead.io/courses/building-react-applications-with-idiomatic-redux) 
    实际上即使你不使用Redux,也很推荐学习Redux的设计思想,它可以给你很多关于状态管理的最佳实践,告诉你纯函数的价值所在,以及告诉你何谓Reducers,何谓General-Purpose函数。在Redux的工程实践中,对于异步Action的处理也是值得讨论的:

  • redux-saga*: A synchronous-style side-effect library for Redux. Use this to manage I/O (such as handling network requests).

Angular 2*

Angular 2 脱胎于风靡一时的Angular 1,鉴于当年疯狂的流行度,学会这个会是你简历上浓墨重彩的一笔,不过我还是推荐先学习React。我个人也认为React是优于Angular 2的,React over Angular 2 because:

  1. 它更简单

  2. 社区很强大

RxJS

RxJS 是JavaScript中一系列响应式编程工具的集合,就好比流处理领域的Lodash,它把响应式编程带入到了JavaScript的领域。ECMAScript Observables是stage-1阶段的草稿,RxJS 5+则是当前的标准实现。虽然我个人非常喜欢RxJS,但是如果你想在工程中使用RxJS的话还是需要考虑下,因为其内置了很多的Operators,其会增加你的包体尺寸。不过我们可以通过仅引入部分所需要的库来解决这个问题,最后大概只会使得包体增加200KB左右吧。

为什么没有提到其他框架?

有不少人问我为啥没有把他们喜欢的框架也列举进来,对于我而言我会先考虑:这个在真实的工作中会所有帮助吗?当然,这一点见仁见智,我也是打算从一些所谓的人气投票中一窥变化。首先,我会去Google Trends中查看各个框架关联关键词的被搜索情况:

另一个很有帮助的网站就是Indeed.com,会聚合不同站点上对于不同职位的开发者的需求信息,可以看出目前招聘上对于前端开发者技能需求的情况为:

在上图中,Angular(Angular 1+Angular 2)还是高于React的,不过我个人还是会推荐React,有如下几个原因吧:

  • More people are interested in learning React than Angular

  • React significantly leads Angular in user satisfaction

 

近期流行的JavaScript框架与主题的更多相关文章

  1. 16 款最流行的 JavaScript 框架

    本文列举了16个当前最流行的JavaScript框架.在这个列表中,既包括jQuery和Mootools,也有Zepo移动JavaScript框架. 里面一定有你正在用的或想尝试用的JavaScrip ...

  2. 16 款最流行的JavaScript 框架

    1. jQuery – Javascript框架 jQuery 是最流行的 JavaScript 框架,它简化了HTML 文档遍历.事件处理.动画和Ajax交互.jQuery插件非常之多. 2. Do ...

  3. 赶快收藏!16款最流行的 JavaScript 框架

    下面为大家介绍 16款最流行的 JavaScript 框架,赶快收藏! 1. jQuery – Javascript框架 jQuery 是最流行的 JavaScript 框架,它简化了HTML 文档遍 ...

  4. 15款加速 Web 开发的 JavaScript 框架

    JavaScript 可以通过多种方式来创建交互式的网站和 Web 应用程序.利用 JavaScript,可以让你移动 HTML 元素,创建各种各样的自定义动画,给你的访问者更好的终端用户体验. 对于 ...

  5. JavaScript 框架比较

    显著增强 JavaScript 开发的框架概览 Joe Lennon, 软件开发人员, 自由职业者 简介: 现代 Web 站点和 Web 应用程序倾向于依赖大量客户端 JavaScript 来提供丰富 ...

  6. 主流JavaScript框架(Dojo、Google Closure、jQuery、Prototype、Mootools和YUI)的分析和对比

    本文主要选取了目前比较流行的JavaScript框架Dojo.Google Closure.jQuery.Prototype.Mootools和YUI进行对比,主要是根据网上的资料整理而成,希望可以供 ...

  7. Javascript框架

    网易开源框架http://www.oschina.net/p/nej http://www.linuxeden.com/html/develop/20120716/127404.html 16 款最流 ...

  8. javascript框架(库)

    javascript框架(库)高级JavaScript编程,尤其是复杂的浏览器差异处理,通常是困难和耗时的.为了响应这些调整,出现了许多javascript(helper)库.这些JavaScript ...

  9. 一张图告诉你最流行的 7 个 JavaScript框架特点

    欢迎大家持续关注葡萄城控件技术团队博客,更多更好的原创文章尽在这里~~​ AngularJ.js                                                  由g ...

随机推荐

  1. ajax 工作原理以及其优缺点

    1.什么是AJAX?AJAX全称为“Asynchronous JavaScript and XML”(异步JavaScript和XML),是一种创建交互式网页应用的网页开发技术.它使用:使用XHTML ...

  2. File "<ipython-input-20-ac8d4b51998e>"

    环境:Python 3.6 word = "Jesse" ") File "<ipython-input-20-ac8d4b51998e>" ...

  3. SQL Server Reporting Service(SSRS) 第五篇 自定义数据处理扩展DPE(Data Processing Extension)

    最近在做SSRS项目时,遇到这么一个情形:该项目有多个数据库,每个数据库都在不同的服务器,但每个数据库所拥有的数据库对象(table/view/SPs/functions)都是一模一样的,后来结合网络 ...

  4. python函数基础学习

    函数的定义与调用: def 函数名(参数1,参数2): ‘’’函数注释’’’ print(‘函数体’) return 返回值 定  义:def关键字开关,空格之后接函数名和圆括号,最后冒号结尾 def ...

  5. 闲里偷忙的CPU-某个kwoker进程忙

    https://zhuanlan.zhihu.com/p/34311472 有一类比较特殊的CPU使用率问题,这类问题的特点是,系统平均CPU使用率很低,但是个别CPU的使用率非常高.今天借助这个真实 ...

  6. Linux下判断磁盘是SSD还是HDD的几种方法

    环境介绍 Fedora release 25 (Twenty Five) 判断方法 方法一 判断cat /sys/block/*/queue/rotational的返回值(其中*为你的硬盘设备名称,例 ...

  7. Horizon

    python manage.py compress python manage.py collectstatic {% extends "horizon/common/_modal_form ...

  8. Neutron命令测试1

    Refer: http://wenku.baidu.com/link?url=DtrbhO0A393hg8kOWKX0XYuZtSC8Iu0occn8NF1pYcUwNzlaSq5qXCQoNEBDM ...

  9. Murano Weekly Meeting 2015.07.28

    Meeting time: 2015.July.28th 1:00~2:00 Chairperson: Kirill Zaitsev, core from Mirantis Meeting summa ...

  10. jemeter的简单使用

    建立测试计划 启动jmeter后,jmeter会自动生成一个空的测试计划,用户可以基于该测试计划建立自己的测试计划. 添加线程组 一个性能测试请求负载是基于一个线程组完成的.一个测试计划必须有一个线程 ...