写点什么

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

2015 年 10 月 18 日

Widen 是一家数字资产管理解决方案提供商。目前,其技术栈还非常传统,包括服务器端的 Java、浏览器端的 AngularJS、提供 REST API 支持的 Jersey 以及 jQuery、 Underscore lodash 、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 上下载该应用程序的源码


感谢魏星对本文的审校。

给InfoQ 中文站投稿或者参与内容翻译工作,请邮件至 editors@cn.infoq.com 。也欢迎大家通过新浪微博( @InfoQ @丁晓昀),微信(微信号: InfoQChina )关注我们,并与我们的编辑和其他读者朋友交流(欢迎加入 InfoQ 读者交流群InfoQ 好读者)。

2015 年 10 月 18 日 19:009426
用户头像

发布了 1008 篇内容, 共 308.2 次阅读, 收获喜欢 273 次。

关注

评论

发布
暂无评论
发现更多内容

课程大作业

小胖子

架构师训练营第一周课程笔记及心得

Airs

架构师训练营第 1 期第一周总结

Geek_a01290

极客大学架构师训练营

深入理解JVM垃圾回收算法 - 标记清理算法

NORTH

GC算法 标记清理 位图标记 懒惰标记

第1周 作业

Pyr0man1ac

高效程序员的45个习惯:敏捷开发修炼之道(8)

石云升

敏捷开发 技术分享 轮换制

oeasy 教您玩转linux 010303文件管理器 nautilus

o

架构师训练营第一周总结

知鱼君

极客大学架构师训练营

第一周:学习总结

BOBBB

第1周 作业

wgl

UML

SpringBoot系列(1)-初识SpringBoot

引花眠

学习 springboot

架构师训练营第 1 期第一次作业

Geek_a01290

极客大学架构师训练营

java安全编码指南之:输入校验

程序那些事

java安全编码 安全编码规范 java安全编码指南

我搭建了一套企业级私有Git服务,抗住了每天上万次攻击!

冰河

git 代码管理 代码仓库 私有服务 远程协作

week-1-part2 学习总结

陈龙

ARTS打卡 第17周

引花眠

微服务 ARTS 打卡计划

架构师训练营1期-WEEK01-作业

Geek.Kwok

极客大学架构师训练营

Java新特性:数据类型可以扔掉了?

王磊

Java 新特性 Java新特性 var 局部类型推导

# 架构师训练营Week1总结

lggl

极客大学架构师训练营 UML

信任环:口碑传播的关键环节

boshi

用户增长 运营创新

架构师训练营-第一周命题作业

咖啡

第二周 - 框架设计

Arthur云剑

程序员为什么热衷于造轮子,升职加薪吗?

小傅哥

Java 小傅哥 代码质量 编程开发 编程经验

超全面分布式缓存高可用方案:哨兵机制

flyer0126

redis哨兵模式

架构师第一周笔记

Geek_Gu

早知道这 8 个锦囊,我的程序人生一定更精彩

沉默王二

程序员 程序员趣事

week1 架构方法总结

zero2onemore

git 常用操作及 git 工作流介绍

hepingfly

git git分支操作 git工作流

【架构师训练营1期】第一周作业

诺乐

腾讯PCG数据中台专场介绍&招聘报名

腾讯PCG招聘

数据中台 腾讯 招聘

第一周命题作业

BOBBB

NLP领域的2020年大事记及2021展望

NLP领域的2020年大事记及2021展望

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