Web 开发的未来:React、Falcor 和 ES6

Widen是一家数字资产管理解决方案提供商。目前,其技术栈还非常传统,包括服务器端的Java、浏览器端的AngularJS、提供REST API支持的Jersey以及jQuery、 Underscorelodash、jQuery UI和Bootstrap等各种库。近日,该公司的首席开发人员Ray Nicholus在一篇文章中提出了一个面向未来的Web开发技术栈,用于取代现有的工具。

虽然他们已经习惯并信任现有的技术栈,但为了实现以下几个目标,Ray希望引入一个全新的技术集合:

  • 一种新的、闪亮的方法:作为一名开发人员,他希望通过采用一个全新的工具集获得全新的视角,并有所进步。

  • 简洁:他不喜欢 AngularJS 1.x 陡峭的学习曲线,更令他失望的是,AngularJS v2的学习曲线更加陡峭。Java也有这样的特点。另外,他希望能够尽可能地避免样板代码,应用程序可以快速投入应用而又无损可扩展性,前端很容易描述为 一组独立的专用组件的集合。他还希望用一种更好的方法取代难以维护和改进的传统REST API。

  • 高效:他希望可以消除由传统REST API所导致的不必要的请求和响应开销。

  • 优雅:他希望编写优雅、易读的代码。在用户界面上查找和修改数据要直观,最好是开发者只需要考虑自己的数据模型,而不用关心可用的API端点。

放弃现有的技术栈意味着开发人员要走出自己的舒适区,部分人可能会抵触,认为新选择不必要或过于复杂。Ray也有类似的想法,但当他对React、 webpack、Falcor有了深入地了解之后,他改变了这种想法,认为这是一个面向未来的Web开发技术栈,Widen即将推出的部分软件产品将会使 用下面讨论的所有技术:

  • React:Ray认为,React与Angular&Ember 的不同之处在于其有限的应用范围和空间占用。Angular&Ember的定位是框架,而React主要是作为应用程序“视图”。React不包含依赖注入或“服务”支持,不需要“jq-lite”,也不依赖于jQuery。开发人员可以直接使用JSX编写标记,而无需Ember Handlebars。React会维护一个“虚拟DOM”,并通过它更新真正的DOM,避免了不必要的重排与重绘。总之,他非常喜欢React这种用途相对专一的特性。而且,React让他可以将复杂的应用程序切分成更小的组件。

  • Falcor:这是一个由Netflix开源的、非常新的库。不同于传统REST API,它只提供唯一的一个端点。有了它,开发者不再需要向不同的服务器端点请求不同的数据,而是向同一个端点请求不同的模型数据。服务器端可以识别请求参数,并由Falcor Router调用恰当的router函数。也就是说,Falcor提供了一个更加直观的API,就是开发者的数据模型。这可以确保服务器永远不会返回不必要的模型数据, 节省了带宽。Falcor客户端还可以使用缓存数据为连续的请求提供服务,减少服务器响应时间。要了解更多关于Falcor的信息,可以查看Jafar Husain的视频

  • webpack:作为一个模块绑定器,webpack可以为React组件模块化提供进一步的支持。它使开发者可以轻松压缩和连接CSS及JavaScript,并通过生成source map大大地简化调试工作。配置完成后,webpack会监控代码,每次代码发生变化,它就会生成新的bundles。客户端无需再导入大量的CSS或JS文件,而只需要导入bundles,减少了页面加载时的HTTP请求数。此外,webpack还提供了大量的插件,例如,使用jsx-loader可以将JSX转换成JavaScript,使用babel-loader 可以将ES6代码转换成兼容ES5的代码。

  • ES6:即ECMAScript 2015,是JavaScript的最新规范,定义了若干重要的新特性,比如胖箭头函数、类、字符串插值、块作用域等。更多信息,请查看Mozilla Developer Network上的ECMAScript 6参考指南

为了帮助读者更好地理解这些技术,Ray使用它们创建了一个单页应用程序,并详细解释了整个的创建过程及相关技术的工作原理。感兴趣的读者可以阅读原文,并从GitHub上下载该应用程序的源码

相关链接

Web 开发的未来:React、Falcor 和 ES6的更多相关文章

  1. 谷歌宣称web组件才是web开发的未来

    谷歌宣称web组件才是web开发的未来 虽然今年的谷歌I/O大会没有出现像去年谷歌眼镜发布时直播疯狂跳伞这样的活动,但是上周仍然有不少产品推出.谷歌宣布对谷歌地图.搜索.安卓,以及其他 很多产品做出更 ...

  2. Facebook的Web开发三板斧:React.js、Relay和GraphQL

    2015-02-26 孙镜涛  InfoQ Eric Florenzano最近在自己的博客上发表了一篇题为<Facebook教我们如何构建网站>的文章,他认为软件开发有些时候需要比较大的跨 ...

  3. Web和移动开发的未来

    Web和移动开发的未来 当我们与来自整个IT行业的专家交谈时,他们告诉我们技术,PWA和优化的持续整合是关键. 为了收集有关网络和移动开发当前和未来状况的见解,我们与19位IT主管进行了交流,我们问道 ...

  4. 2016年后web开发趋势是什么?

    2016 年后 Web开发趋势是什么 来源:yafeilee.me 发布时间:2016-05-06 阅读次数:1378 3   近二年的进展 前端发展日新月异, 甚至有一句戏言: "每六星期 ...

  5. 超全的web开发工具和资源

    首页 新闻 产品 地图 动态 城市 帮助 论坛 关于 登录 注册 · 不忘初心,继续前进,环境云V2接口正式上线 · 环境云测点地图全新改版 · 祝福各位环境云用户中秋快乐!   平台信息 培训互动 ...

  6. 关于web开发前端h5框架的选择

    关于web开发前端h5框架的选择 看了很多移动版框架都是基于app混合式开发的,不是单独h5网站的基于h5开发的web框架从组件丰富度,兼容性,相关教程来说bootstrap还是最好的react和vu ...

  7. 从小白到使用antd+react+react-router+issue+es6搭建博客

    概述 本身是前端小白,学过html,css,js的各种书,各种视屏,就是没有接触web开发的内容.偶然看见一个朋友用react搭建了一个博客,于是本着程序员无所不能的精神,也尝试着用react搭建博客 ...

  8. [转帖]2019 简易Web开发指南

    2019 简易Web开发指南     2019年即将到来,各位同学2018年辛苦了. 不管大家2018年过的怎么样,2019年还是要继续加油的! 在此我整理了个人认为在2019仍是或者将成为主流的技术 ...

  9. Node.js 全栈开发(一)——Web 开发技术演化

    这些年一直不断接触学习 Node 技术栈,个人的技术开发学习兴趣也越来越倾向 node 流.也许是由于英语的关系,也许是因为墙增加了学习国外一手资料的难度,加上现在流行的 web 开发技术并不太容易上 ...

随机推荐

  1. python 网址

    https://www.liaoxuefeng.com/wiki/0014316089557264a6b348958f449949df42a6d3a2e542c000/001431752945034e ...

  2. 【CCPC-Wannafly Winter Camp Day3 (Div1) F】小清新数论(莫比乌斯反演+杜教筛)

    点此看题面 大致题意: 让你求出\(\sum_{i=1}^n\sum_{j=1}^n\mu(gcd(i,j))\). 莫比乌斯反演 这种题目,一看就是莫比乌斯反演啊!(连莫比乌斯函数都有) 关于莫比乌 ...

  3. 【转】如何手动添加Android Dependencies包

    在ADT16 之前可以在工程里面做关联,eclipse会在工程上自动添加ReferenceLibrary.新版本的ADT修改了第三方jar的导入方式,只需要在工程目录下新建libs文件夹,注意是lib ...

  4. 【转】Android BroadcastReceiver介绍

    本文主要介绍BroadcastReceiver的概念.使用.生命周期.安全性.分类.特殊的BroadcastReceiver(本地.粘性.有序.粘性有序广播).示例代码见BroadcastReceiv ...

  5. CentOS下用rinetd做端口转发

    windows下的端口转发一般用的是自带的nat和porttunnel.portmap linux下端口转发映射的程序叫rinetd,启动方法rinetd -c /etc/rinetd.conf  , ...

  6. theano提示:g++ not detected的解决办法

    导入theano包后出现如下警告: WARNING (theano.configdefaults): g++ not detected ! Theano will be unable to execu ...

  7. 前端框架之bootstrap及相关技术网站

    1.web框架之bootstrap bootstrap来源Twitter,是一个CSS/HTML框架,它是基于HTML,CSS,JavaScript下的,使用简洁,当中提供了很多HTML和CSS 如用 ...

  8. virtual base classes

    virtual base classes用来实现菱形继承解决多个重复subobject的问题 //: C09:VirtualBase.cpp // Shows a shared subobject v ...

  9. Linux平台下卸载MySQL的方法

    转载自: https://www.cnblogs.com/taomylife/p/7234925.html Linux平台下卸载MySQL的方法: MySQL的安装主要有三种方式:二进制包安装.RPM ...

  10. Python学习第一弹

    开发语言: 高级:Python.java.PHP  C#   GO  ruby   C++           ——>字节码   低级:C.汇编                          ...