【干货】2017年值得关注的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.” 或者跟着 Dan Abramov的官方课程:

“Getting Started with Redux”

“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:

它更简单

社区很强大

RxJS

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

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

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

来源:中国物联网

原文发布于微信公众号 - 钱塘大数据(qtbigdata)

原文发表时间:2016-12-18

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏闰土大叔

在没有DOM操作的日子里,我是怎么熬过来的(上)

前言 在我动笔写这篇文章的时候,我刚刚从我的项目中删除了最后一行JQuery代码。至于我为何要这么做,请听闰土娓娓道来。前几年我还在想,假如有一天,前端世界里...

401120
来自专栏前端桃园

别再说虚拟 DOM 快了,要被打脸的

我经常听到有人在群里,或者在社区里说的一个很严重的错误,那就是说 React 的 Virtual Dom 是以快出名的,比原生 DOM 快多了,啥啥啥的,每次都...

19630
来自专栏QQ会员技术团队的专栏

来看看机智的前端童鞋怎么防盗

很多开发的童鞋都是只身混江湖、夜宿城中村,如果居住的地方安保欠缺,那么出门在外难免担心屋里的财产安全。

547110
来自专栏闰土大叔

西安电话面试:谈谈Vue数据双向绑定原理,看看你的回答能打几分

最近我参加了一次来自西安的电话面试(第二轮,技术面),是大厂还是小作坊我在这里按下不表,先来说说这次电面给我留下印象较深的几道面试题,这次先来谈谈Vue的数据双...

16130
来自专栏前端说吧

echarts - 特殊需求实现代码汇总之【饼图】篇

其实很简单,就是设置全局的color属性即可。color属性可以是一套数组,里边的样式以字符串格式设置。

22610
来自专栏程序员互动联盟

【入门指导第十三讲】概念墙

存在问题: 最近有小伙伴问html/html5/xhtml/xml这四个有什么区别? 解决方案: 小编在这里为大家详细解释一下。 html 学名叫做超文本标记语...

367100
来自专栏企鹅号快讯

2017年最佳的20款css工具

1.Radiobox ? 小型CSS3动画集合,适用于表现无线电输入内容。 2.SpinThatShit ? 面向单一元素加载器与运行器的SCSS集合。 3.T...

217100
来自专栏微信小程序开发

CSS3有哪些好用的属性?

1.前言 在月初的时候,发了CSS3热身实战--过渡与动画(实现炫酷下拉,手风琴,无缝滚动)。js的代码库也发过两次,两篇文章。之前也写了css3的热身实战,既...

59170
来自专栏无原型不设计

你所不知道的快速原型设计技巧

快速原型设计工具,怎么选?当然是要快,要简单,这样回答很正确,但太笼统。具体来讲,交互设置要简单方便,组件的交互和样式要复用高效,方便重复使用,才能算真正的更快...

13960
来自专栏程序员互动联盟

你所不知道的html5与html中的那些事(四)——文本标签

文章简介: 关于html5相信大家早已经耳熟能详,但是他真正的意义在具体的开发中会有什么作用呢?相对于html,他又有怎样的新的定义与新理念在里面呢?为什么...

36390

扫码关注云+社区

领取腾讯云代金券