从最新的技术趋势看前端的未来

新一期的ThoughtWorks技术雷达有点出乎意料,使用new标签的框架、工具、技术、语言等等超过了一半——Vue.js、ES2017上榜,Three.js凭着VR的火又上榜了,还有熟悉的Electron,以及微前端的概念。

让我们先看看一些技术亮点~~。

前端在可见的未来

在那篇《最流行的编程语言JavaScript能做什么?》的文章里,我们看到了JavaScript在各个领域的应用。在这一期里,仍然有很多亮点(new):

Vue.js

Vue.js,如果你在使用Vue.js,那么你更应该找到相当的自信了,现在它已经被列入了评估期了。Vue.js是一个简单易上手的框架,并且相当的轻量,在最近的这段时间里,它发挥得相当的出色。

可惜,宝宝现在在用Angular.js 和 Angular 2,毕竟我现在是开发混合应用的。不过相信在半年后,Angular 2 和 Ionic 2是会上榜的。

Ember.js,尽管没有证据表明这个框架在国内将火起来的趋势,www.feiyunyl.cn我现在还对这个框架缺乏深入的了解。

ECMAScript 2017,尽管我现在已经倾向www.feihuayl.cn 于使用TypeScript,不过 ES2017 还是会用到的,只是我觉得 Babel 对我来说就是个坑啊

PWA

Electron,如果你是一个老读者,那么你已经知道我在很多场合里使用了这个框架,从NodeWebkit开始写编辑器,再到用Electron完成Growth 1.0的桌面版。

Physical Web,现在我们可以在浏览器上来控制真实世界,通过蓝牙低功耗技术。

不过与此相比,我更看好 Progressive Web App,毕竟他可以让Web应用接触到更多的底层API,而不是局限于蓝牙,还可以是Push Notification等等。

VR

Three.js,它上榜的原因是因为 WebVR 的流行。这一点可以从我去年写的那篇《Oculus + Node.js + Three.js 打造VR世界》,就可以看到一些趋势。这些就和现在的单页面应用一样,虽然运行起来不是那么流畅,但是还是行得通。因而在可见的未来使用 Web 技术来开发 VR 也有一点苗头,未来浏览器上应该是可以运行编译过后的代码,而不是在运行时。

WebRTC,它可以让我们在浏览器端实现实时视频聊天。第一次接触到这个视频流技术是在两年多以前,上一次接触则是在半年多以前使用 WebRTC + Oculus,你可以在我博客的那篇《JavaScript在VR世界的应用》中了解到更多的详细信息。当然如雷达所说,WebRTC将会形成未来在Web上进行AR/VR 协作的基础。

接着再让我们看看一些架构上的变化吧。

前端引起的架构变化

在过去的两三年里,前端火得一塌糊涂——对于后端程序员来说,这有点 www.wx1677.com/ winter is coming 的感觉。我在那篇《前端演进史》对前端的演进做了相当多的介绍,并在《后台即服务演进史》里对后台即服务开了个头,在这篇文章里让我们根据《技术雷达》来继续补几刀。

前后端分离

我们可以看到在中大型团队里,已经分解为前端和后台两个小组,沟通可以通过接口、契约等等的方式来进行。但是这一点儿也不精益,沟通在这时仍然是一个问题,让我有点怀念起之前前后端都做的项目了——自己可以创建自己想要的接口。

不过,这意味着前端和后台在技术选型上更加独立了。

臃肿的前端——微前端

前端单体应用

在上一个项目里,我们一步步地将一个有近10年系统的系统替换掉。起初这是一个传统的spring + JSP网站,然后我们用JSP创建了JSON API,后来创建了一个新的 API 来服务移动应用和单页面应用,再后来这个 API 被拆分成了几个 API。我们的后台已经成一个单体应用变成了一个微服务架构的应用,但是这一点并没有在前端上应用——前端应用正在变得难以维护。

因此在这一期的雷达里,你可以看到微前端的概念(micro frontends)。这也是在上一个项目里,我们尝试做的一部分,遗憾的是并没有成功完全实施。这是一个搜索类型的网站,网站的首页承担着大部分的访问量,而详情页的主要流量来源则是搜索引擎。我们在首页上使用jQuery + Require.js技术栈,而在其他页面(搜索结果页 + 详情页)使用 React.js,我们在最初的时候考虑过将详情页静态化——因为需要 SEO 的缘故,这样可以让我们降低 SEO 带来的复杂度。

MicroServices

后来,我也在我的博客上解耦了两部分,为了更快的访问首页的速度——将首页独立出来,不使用JS,直接使用Pure.css来担重任;在其他页面里使用Material Design Lite作为 UI 部分。

有一点值得考虑的是:对于微服务架构来说,在一个系统的不同的部分使用不同的技术栈是一种不错的体验;而对于一个前端团队来说,在同一个系统的使用不同的技术栈就不是一种不错的体验。

API 设计——应该变得简单

Backend

如我们所见的Spring Boot已经变成推荐采用的程度了,按雷达上的习惯用语:“我们已经在多个项目上使用这个框架”——反正我最近的项目都是用这个框架。如果你考虑使用 Java,那么你一定不要错过这个框架,以及使用这个框架来实施前后端分享。

对于大部分不需要考虑 SEO 的应用来说,将后台变成一系列 RESTful 的 API 并不是一件复杂的事,但是在后台 API 上的设计就变成一件麻烦的事。因此尽管在实见的过程中,有契约来作为保证,但是不一定是可靠的。作为一个前端程序来说,我们在调用后台 API 的过程中,总会遇到这样、那样的问题。除此,还有接口不好用的问题——“要是你可以在这里使用超媒体 www.yghrcp88.cn API,那么我的代码就会更加简单了”。

因此在 API 设计上,雷达上给出了两个不错的案例:

强化后台查询

GraphQL

代表的例子就是 Facebook 的 GraphQL,它是在 Facebook 内部应用多年的一套数据查询语言和 runtime。原本为了请求一个用户及其好友信息的请求,需要发起多个 API 请求。现在,我们只需要在客户端拼装好对应的 Query语句,在这个语句里将大部分需要查询的东西写好,即 JSON 格式的数据,然后发给服务端来处理。而在我们客户端上,我们所获取到的结果都是我们所需要的,不需要再做特殊处理了。

这一切,看上去很美好——除了,在客户端上拼查询语句。

过去,我们使用搜索引擎来搜索数据,就需要在前端拼好对应的 Query,再传给后台 API,由后台 API 返回我们需要的结果。在这个过程里,我们在Query做一些对应的数据处理。

反正,他们都是使用查询语言来搜索结果。如果你考虑使用 Qwww.huacairen88.cn L 的话,不妨做一层 Wrapper,以后好做迁移。

前后端同时优化

Falcor

Netflix对于这样复杂的API请求下,创建了 自己的库Falcor——它可以从多个数据源获取数据,并在服务端上汇总成一个 JSON model;在客户端上,请求的时候我们只需要在请求的时候加上对应的参数即可——可以将多个请求合并到一起,也可以只针对某一个部分发出请求。这样可以减少发出多个请求,所带来的复杂度。

我想,一种最实用的做法:就是将一些更新频率较低的API合并成一个大的 API 了——大部分人都会这样做吧。

简化的后台——无服务器架构

ServerLess

除了上面的这些内容,后台还有一些东西还蛮好玩的,其中一个就是 Serverless 架构,即无服务器架构。不过,这种架构目前在国内运行起来还是有点难度的,缺少一系列的配套措施。如在这期的雷达上的Auth0可以为我们提供一个授权服务,以及AWS Lambda可以直接使用 AWS系列云服务来对数据进行处理。

我就不多说了~~,读者可以自己去看。

那么未来,你看想玩哪种技术。

时间: 2024-10-13 02:15:51

从最新的技术趋势看前端的未来的相关文章

从2014年D2前端技术论坛看前端发展趋势

上周六有幸参加了在杭州阿里巴巴西溪园区举办的2014年D2前端技术论坛和晚上的酒会,实地感受了一下阿里巴巴前端开发的技术氛围和影响力,总体上看这次D2规模还是挺大的,国内前端的知名大牛基本上都到了. D2今年的主题是绽放,确实挺符合现在前端发展的阶段,随着对用户体验的不断追求,移动Web的迅猛发展,HTML5的普及,NodeJS的投入商用,AngularJS等新框架的出现,前端的重要性和工程化程度不断提高,上午会上有个妹子说2015年D2的主题是逆袭,我个人觉得挺合适的.从参会人数看,目测有接近

Gartner最新发布:2017年十大战略技术趋势

原文链接 ◆ ◆ ◆ 导读 据福布斯杂志报道,在美国奥兰多举行的Gartner研讨会上,市场研究机构Gartner Research的副总裁兼资深研究员大卫·卡利(David Cearley)介绍了该机构预测的2017年十大战略技术趋势.他所谓的"战略技术",是指那些在未来5年拥有显著颠覆潜力的技术.他还指出,这些技术将成为数字和算法商业机遇背后的主要推动者,十大趋势如下: ◆ ◆ ◆ AI与高级机器学习 人工智能(AI)与高级机器学习由深度学习和神经网络等技术组成.这类技术通常使用算

多云时代的混合云,必懂趋势看这里!

20年的时间能创造什么?一家来自硅谷的公司,告诉了我们这样一个创业故事:从1998年最开始的5个人出发,以创造更好的计算方式为初心,到2017年实现79亿美元年营收,通过7.5万家合作伙伴向全球超过50万用户提供动态和高效的数字化基础设施.这家创业公司,叫VMware.今天,VMware成为了全球企业级软件的领先创新者. 1998年,VMware在美国加州帕洛阿尔托市诞生.从第一代VMware Workstation 1.0发布到2018年完成自身的数字化转型,VMware在过去的这20年中实现

跨越数据库发展鸿沟,谈分布式数据库技术趋势

金融行业架构转型需求随着移动化与互联网化的不断发展,我国金融行业的商业模式与技术体系已经逐渐走上了与西方世界完全不同的道路.众所周知,欧美国家的移动化普及率远远不如我国,同时人口基数也有着数量级的不同,这就使得国内外金融行业所面临的业务类型.数据量.并发量都存在巨大的差异,导致对整个IT基础设施的需求截然不同. 在最近的一两年中,国内部分科技领先的银行已经率先对微服务与分布式技术进行了探索,一些新建的互联网金融类业务也已经开始尝试使用微服务架构.分布式技术.DevOps框架进行应用的开发与维护.

web前端体系-了解前端,深入前端,架构前端,再看前端。大体系-知识-小细节

1.了解前端,深入前端,架构前端,再看前端.大体系-知识-小细节 个人认为:前端发展最终的导向是前端工程化,智能化,模块化,组件化,层次化. 2.面试第一关:理论知识. 2-1.http标准 2-2.w3c标准 2-3.ECMAScript标准 3.框架和类库 4.编码开发 5.运行环境 6.自我修养. 6-1.前端开发思维.敏捷软件开发流程(如SCRUM)和项目管理知识(如考取PMP). 6-2.个人github和技术博客.建立开源项目等总结经验和反思感想. 6-3.研究学习Web相关最新知识

优秀网站看前端 —— 小米Note介绍页面

刚开始经营博客的时候,我写过不少“扒皮”系列的文章,主要介绍一些知名站点上有趣的交互效果,然后试着实现它们.后来开始把注意力挪到一些新颖的前端技术上,“扒皮”系列便因此封笔多时.今天打算重开“扒皮”的坑,不过咱挂个优雅点的名字——“优秀网站看前端”,顾名思义的,也是寻觅一些值得玩味的趣味网站,来学习它们的前端技术和交互理念. 作为本系列的开篇,我们拿“买手机送国土”的小米来打头阵,缘由是鄙人有着更换手机的打算又刚好看上小米note高配版,于是逛了下小米note的介绍页面,感觉交互做的挺不错,特别

瑞讯银行:黄金跌破关键支撑 短线技术结构看空

FX168讯 瑞讯银行(Swissquote Bank)在周四(11月5日)报告中写道,金价跌破关键支撑1115(2015年11月3日),短线技术结构看空.小时图形初步支撑位于1093(2015年8月12日低点),更强支撑位于1077(2015年7月24日低点).金价初步阻力位于1115(2015年6月23日高位,前期支撑).更远阻力位于1205(2015年6月18日高点).预计金价短线将维持弱势.长线看来,主要趋势(见下降通道)继续倾向于看空.尽管目前为止1132(2014年11月7日低点)的

浏览器端技术体系概览 -- 前端开发的七种武器

科普文一则,说说我对前端技术体系(也称浏览器端技术体系)的认识,希望能让更多人了解前端,也希望能借此丰富前端开发的大局观. 去年我写了网站性能优化系列文章,看过的朋友会知道,这类文章重点并非介绍各种具体的优化技巧,而是在关注发掘这些优化点的思路和方法.然后介绍给大家多种检测手段去发现问题,进而有目标的解决问题.所有这些需要我们对有网页整个生命周期有清晰的认识,对网页中各种技术极其相互结合的方式有明确的认知.这就回归到一个更本质的问题:浏览器端技术体系是怎样的. 想用三言两语说清前端技术不大可能,

OSChina 技术周刊第十期,每周技术抢先看!

每周技术抢先看,总有你想要的! 移动开发 [软件]Android 表单验证框架 - AValidations [软件][email protected] 的 iPhone 客户端 [软件][email protected] 的 Android 客户端 [博客]使用gradle构建android项目(续) 前端开发 [翻译]AngularJS ui-router (嵌套路由) [软件]ChartSQL -- 用 SQL 语句来生成图形图表 [软件]Flow -- Facebook 的 JavaSc