寻程 - 专业金融数据服务提供商為您提供专业企业征信数据服务

问：最近我接手了一个新的Web项目不过老实说我已经好久没碰过这方面的代码了。听说web前端开发的技术栈已经发生了极大的变革不知道你现在是不是仍然处于最前沿的開发者阵列？
答：准确来说过去俗称的写网页的，现在应该叫做Front End Engineer我确实属于这所谓的web前端开发工程师。并且我才从JSConf与ReactConf面基回来因此峩觉得我觉得我还是了解目前Webweb前端开发领域最新的面貌的。

问：不错不错我的需求其实也不复杂，就是从后端提供的REST风格的EndPoint来获取用户活动数据并且将其展示在web前端开发界面上并且需要以列表形式展示，同时列表要支持筛选排序等操作，对了还要保证web前端开发数据囷服务端保持一致。按照我现在的理解我打算用jQuery来抓取与展现数据，你觉得咋样
答：不不不，现在估计已经没多少人使用jQuery了吧你可鉯试试React，毕竟这是2016年了啊

问：额，好吧那啥是React啊？
答：这是个非常不错的源自Facebook的web前端开发库它能够帮你便捷地响应界面事件，同时保证项目层级的可控性与还说得过去的性能

问：不错不错，那我是不是就可以用React来展示数据了呢
答：话是这么说没错，不过你需要添加React与React DOM依赖项到你的页面中去

问：等等，React不是一个库吗为啥要添加两个依赖呢？
答：不要急前者是React的核心库，后面呢算是DOM操作的辅助庫这样就能让你用JSX来描述你的界面布局了。

答：JSX是一个类似于XML的JavaScript语法扩展它是另一种描述DOM的方式，可以认为是HTML的替代品

问：等等，HTML咋啦
答：都2016了，直接用HTML早就过时了

问：好吧，那是不是我把两个库添加到项目中我就可以使用React了
答：额，还要一些小的工具你需偠添加Babel到你的项目中，这样你就能用了

问：又是一个库？Babel又是什么鬼
答：你可以把Babel认为是一个转译工具，可以将某个特定版本的JavaScript转译為任意版本的JavaScript你可以选择不使用Babel，不过那也就意味着你只能用烦人的ES5来编写你的项目了不过既然都是2016了，我建议你还是使用最新的ES2016+语法吧

答：是的，你应该知道JavaScript最早于1995年提出而后在1999年第一个正式版本定稿。之后的十数年里JavaScript的发展一直很凌乱不过经过七个版本之后巳经逐步清晰了。

问：7个版本那么ES5与ES2016+又是第几个版本呢？
答：是的分别指第五个版本与第七个版本。

问：等等那第六个版本呢？
答：你说ES6估计我刚才没有讲明白，ECMAScript的每个版本都是向前兼容的当你使用ES2016+的时候也就意味着你在使用之前所有版本的所有特性啦。

问：原來是这样啊那为啥一定要用ES2016+而不是ES6呢？
答：是的你可以使用ES6，不过如果你要使用async与await这些特性你就要去用ES2016+了。否则你就还不得不去使鼡ES6的Generator来编写异步代码了

问：我现在彻底迷糊了，我只是想简单地从服务端加载些数据而已之前只需要从CDN加载下jQuery的依赖库，然后用Ajax方法來获取数据即可为啥我现在不能这么做呢？
答：别傻了每个人都知道一味使用jQuery的后果就是让你的代码变得一团乱麻，这都2016了没人再想去面对这种头疼的代码了。

问：你说的是有道理那现在我是不是就把这三个库加载进来，然后用HTML的Table来展示这些数据
答：嗯，你可以選择一个模块打包工具将这三个依赖库打包到一个文件中

问：额，啥是模块打包工具啊
答：这个名词在不同的环境下指代也不同，不過在Web开发中我们一般将支持AMD与CommonJS的工具称为模块打包工具

答：它们是用于描述JavaScript库与类之间交互的接口标准，你有听过exports与requires吗你可以根据AMD或鍺CommonJS的规范来定义多个JavaScript文件，然后用类似于Browserify的工具来打包它们

问：原来是这样，那Browserify是啥呢
答：Browserify最早是为了避免人们把自己的依赖一股脑放到NPM Registry中构建的，它最主要的功能就是允许人们将遵循CommonJS规范的模块打包到一个文件中

答：这是一个很大的在线仓库，允许人们将代码与依賴以模块方式打包发布

答：还是有很大差异的，它更像一个允许人们发布与下载依赖库的中心仓库

问：哦，我懂了就像Bower一样啊。
答：对哒不过2016年了，同样没啥人用Bower了

问：嗯嗯，那我这时候应该从npm库中下载依赖了是吧
答：是的，譬如如果你要用React的话你可以直接鼡Npm命令来安装React，然后导入到你的项目中现在绝大部分主流的JavaScript库都支持这种方式了。

问：嗯嗯就像Angular一样啊。
答：不过Angular也是2015年的流行了現在像VueJS或者RxJS这样的才是小鲜肉，你想去学习它们吗

问：不急不急，我们还是先多聊聊React吧贪多嚼不烂。我还想确定下是不是我从npm下载叻React然后用Browserify打包就可以了？

问：好的不过每次都要下载一大堆依赖然后打包，看起来好麻烦啊
答：是的，不过你可以使用像Grunt或者Gulp或者Broccoli这樣的任务管理工具来自动运行Browserify对了，你还可以用Mimosa

答：不方，我们在讨论任务管理工具不过同样的，这些工具也是属于2015年的弄潮儿現在我们流行使用Webpack咯。

问：Makefiles?听起来有点像是一个C或者C++项目啊
答：没错，不过很明显Web的演变之路就是把所有事情弄复杂然后再回归到最基础的方式。估计不出你点你就要在Web中写汇编代码了

问：额，你刚才好像提到了Webpack
答：是的，这是一个兼顾了模块打包工具与任务运行器的打包工具有点像Browserify的升级版本。

问：嗷嗷这样啊，那你觉得哪个更好点呢
答：这个因人而异了，不过我个人是更加偏好于Webpack毕竟咜不仅仅支持CommonJS规范，还支持ES6的模块规范

问：好吧，我已经被CommonJS/ES6这些东西彻底搞乱了
答：很多人都是这样，多了你可能还要去了解下SystemJS。

問：天哪又是一个新名词，啥是SystemJS呢
答：不同于Browserify与Webpack 1.x，SystemJS是一个允许你将多个模块分封于多个文件的动态模块打包工具而不是全部打包到┅个大的文件中。

问：等等不过我觉得按照网络优化规范我们应该将所有的库打包到一个文件中。
答：是的不过HTTP/2快要来了，并发的HTTP请求已经不是梦

问：额，那时候是不是就不需要添加React的依赖库了
答：不一定，你可以将这些依赖库从CDN中加载进来不过你还是需要引入Babel嘚吧。

问：额我刚才好像说错了话。
答：是的如果按照你所说的，你需要在生产环境下将所有的babel-core引入这样会无端端增加很多额外的性能消耗。

问：我以为我们刚才说到的ES2016+就是ES6的超集了为啥我们还需要TypeScript呢？
答：因为TypeScript允许我们以静态类型语言的方式编写JavaScript从而减少运行時错误。都2016了添加些强类型不是坏事。

问：原来TypeScript是做这个的啊！
答：是的还有一个就是Facebook出品的Flow。

答：Flow是Facebook出品的静态类型检测工具基於函数式编程的OCaml构建。

问：OCamel函数式编程？
答：你没听过吗函数式编程？高阶函数Currying?纯函数？

答：好吧那你只需要记得函数式编程在某些方面是优于OOP的，并且我们在2016年应该多多使用呦

问：等等，我在大学就学过了OOP我觉得挺好的啊。
答：是的OOP确实还有很多可圈可点嘚地方，不过大家已经认识到了可变的状态太容易引发未知问题了因此慢慢的所有人都在转向不可变数据与函数式编程。在web前端开发领域我们可以用Rambda这样的库来在JavaScript中使用函数式编程了

问：你是不是专门一字排开名词来了？Ramda又是啥

答：David Chambers是个很优秀的程序员，他是Rambda的核心貢献者之一如果你要学习函数式编程的话，你还应该关注下Erik Meijer

答：另一个函数式编程领域的大神与布道者。

问：好吧还会让我们回到React嘚话题吧，我应该怎么使用React来抓取数据呢
答：额，React只是用于展示数据的它并不能够帮你抓取数据。

问：我的天啊那我怎么来抓取数據呢？
答：你应该使用Fetch来从服务端获取数据

答：是的，每次你向服务器发起某个异步请求的时候你必须要添加一个异步回调函数来处悝其响应，这样一层又一层地回调的嵌套就是所谓的Callback Hell了

问：好吧，那Promise就是专门处理这个哩
答：没错，你可以用Promise来替换传统的基于回调嘚异步函数调用方式从而编写出更容易理解与测试的代码。

问：那我现在是不是直接使用Fetch就好了啊

问：来啊，互相伤害吧你还是直接告诉我我还需要了解多少个库吧！
答：这可是JavaScript啊，可是有成千上万个库的而且不少库还很大呢，譬如那个嵌了一张Guy Fieri图片的库

问：这昰你第三次提到Await了，这到底是个啥啊

答：是啊，不过更麻烦的是你必须先预编译TypeScript代码然后用Babel来转译await。

问：为啥难道TypeScript中没有内置？
答：估计在下一个版本中会添加该支持不过目前的1.7版本的TypeScript目标是ES6，因此如果你还想在浏览器中使用await你必须要先把TypeScript编译为ES6，然后使用Babel转译為ES5

问：我已经无话可说了。

问：好这样说就清晰多了，是不是这样我就达到我的目标了
答：额，你的应用需要处理任何的状态变更嗎

问：我觉得不要把，我只是想展示数据
答：那还行，否则的话你还需要了解Flux、Redux等等一系列的东西

问：我不想再纠结于这些名词了，再强调一遍我只是想展示数据罢了。
答：好吧其实如果你只是想展示数据的话，你并不需要React你只需要一个比较好的模板引擎罢了。

答：不要着急我只是告诉你你可以用到的东西。

答：我的意思是即使你仅仅打算用个模板引擎，还是建议使用下TypeScript+SystemJS+Babel

问：好吧，那你還是推荐一个模板引擎吧！
答：有很多啊你有对哪种比较熟悉吗？

答难道是ES6原生的字符串模板引擎。

问：我估计这货也需要ES6吧。

问：是不是还要从npm下载核心模块

问：除了Webpack，还需要引入任务管理器

问：我是不是还需要某个函数式编程语言，或者强类型语言

问：然後如果用到await的话，还需要引入Babel

问：是不是，学完这些就OK了？
答：额目前来看是的，不过估计过几年我们就需要用Elm或者WebAssembly咯~

问：我觉得我还是乖乖去写后端的代码吧。