阿里专家直击前端盛会JSConf2017 Day1:ES6兴起 ES6+Babel成最佳拍档-阿里云开发者社区

开发者社区> 黎山> 正文

阿里专家直击前端盛会JSConf2017 Day1:ES6兴起 ES6+Babel成最佳拍档

简介: 2017年JSConf在柏林举行,为期2天,5月7日-8日。JSConf在前端领域是相当有影响力的,可以通过JSconf的分享内容了解前端技术驱势及发展方向。今年重点在以下几个方面:移动端的性能、各种NodeJS编写的提高前端工程化效率的工具、React的周边工具,AngularJS已不被提起。
+关注继续查看

JSConf 2017 Day2:https://yq.aliyun.com/articles/79329


2017年JSConf在柏林举行,为期2天,5月7日-8日。JSConf在前端领域是相当有影响力的,可以通过JSconf的分享内容了解前端技术驱势及发展方向。今年重点在以下几个方面:移动端的性能、各种NodeJS编写的提高前端工程化效率的工具、ReactJS的周边工具,AngularJS已不被提起。ES6已大面积兴起,ES6+Babel是最佳拍档。

IMG_20170506_091248

会议举办还是相当专业的,分为主会场和一个分会场,以一段音乐party开场,主持人也用唱的方式表述了JSConf的开场宣词。每个topic的时间是30分钟,绝不拖堂,每个topic的演讲嘉宾都会控制在25-27分钟左右,整个会场严格按照议程进行,方便听众听取提前规划的参会议程。今年的特点是女性演讲嘉宾偏多,而且都特别漂亮。在演讲嘉宾分享后听众都会给予持续半分钟的热烈掌声(可能与文化有关,在国内很少听到有如此热烈和长时间的掌声)。

下面详细讲解下其中比较有意思的topic:

一、如何提高web端的加载速度仍然是值得深究的课题,所以第一个议题也是围绕着性能展开的。

根据最新的2017年的数据显示,移动端的webpage平均需要16秒可以交互,19秒全部加载完成,JS大小为420KB左右。之所以这么慢的原因是处理过程需要三大步:

IMG_20170506_100050

1)、初始化请求-->返回html

2)、根据返回的html请求css、js、images--->返回css、js、images

3)、解析css、js、images再显示。
在web端解析时间占12.4%,编译时间占8.3%;移动端解析占13.2%,编译时间占10.2%。

如果要缩短可交互的等待时间,以下建议可以采纳:

1)、webpack:将js分成一个个的小文件,使用webpack做加载/打包。 webpack更多资料可参考 https://doc.webpack-china.org/

2)、使用babel-preset-env明确指明要转换js的浏览器。注:BABEL是自带了一组 ES2015 (ES6)语法转化器,这些转化器能让你现在就使用最新的 JavaScript 语法(ES6的语法),而不用等待浏览器提供支持。更多BABEL介绍请参见:http://babeljs.cn/

3)、使用babel-plugin-lodash加载需要的最小化的module。

4)、PRPL模式或HTTP/2:
IMG_20170506_101232

PRPL即推送、渲染、预缓存、延迟加载。PRPL详细介绍可参见:https://developers.google.com/web/fundamentals/performance/prpl-pattern/#http2_http2 。PRPL模式中可以使用Preload标签。Preload是提前加载资源,HTML 解析器在创建 DOM 时如果碰上同步脚本,解析器会停止创建 DOM,转而去执行脚本。而preload标签是告诉浏览器加载此资源但不执行。可以预加载js、css、字体。preload 的 onload 事件可以在资源加载完成后修改 rel 属性,从而实现非常酷的异步资源加载。例:

<link rel="preload" href="late_discovered_thing.js" as="script">
<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" as="style" href="asyncstyle.css" onload="this.rel='stylesheet'">

HTTP/2(或称http2.0):
IMG_20170506_101402

上面说的处理过程需要三大步,主要是源于http1.x的通讯协决定,http1.x建立一个TCP连接需要三次握手,也就是三次往返于服务器和客户端之间。现在的网页一般都内容丰富,在 HTTP/1.x 下载完整个网页一般需要很多很多个 TCP 连接。如果用开发者工具查看网络加载流,可以看到阻塞时间,尤其是小资源的阻塞时间占比非常大。此外,每次 TCP 连接都需要传递 HTTP Header 信息,也是一笔带宽开销。HTTP/1.x 由于基本是无脑按顺序加载资源,需要浏览器和前端工程师对预加载、加载优先级等做很多额外的工作。HTTP/2 一方面复用同一IP且同一证书下的一个 TCP 连接,另一方面压缩了 HTTP Header,还提供了 Server Push 特性。Google 、Twitter 和 Facebook 这三个著名的网站已经启用了 HTTP/2 支持。这里有一篇文章介绍了Nginx如何开启HTTP/2( https://www.nginx.com/blog/nginx-1-9-5/ ),另外让服务器支持 https 是必须的先决条件。目前除IE8/9/10外,其他浏览器均已支持HTTP/2。

5)、requestIdleCallback:requestIdleCallback是2017年1月31日W3C定义的标准,使用requestIdleCallback函数实现延迟图片的加载。

二、JS函数式编程之不可变的数据结构

函数式编程的三大特点:

1):“immutable data 不可变数据”:默认上变量是不可变的,如果你要改变变量,你需要把变量copy出去修改,可以让你的程序少很多Bug。

2):“first class functions(让你的函数就像变量一样来使用)”:你的函数可以像变量一样被创建,修改,并当成变量一样传递,返回或是在函数中嵌套函数。如Javascript的Prototype。

3):“尾递归优化”:即是递归调用放在方法末尾的递归方式。

本topic讲解了“不可变的数据结构”在JS中的应用。使用mori工具,他的优势是共享此变量,而不是copy,性通上会比较有优势。下面看下具体代码示例:

//例1
var v1 = mori.vector(1,2,3);
var v2 = mori.conj(v1, 4);
v1.toString(); // => '[1 2 3]'
v2.toString(); // => '[1 2 3 4]'

//例2
var sum = function(a, b) {
  return a + b;
};
mori.reduce(sum, mori.vector(1, 2, 3, 4)); // => 10

详细的mori源码及示例参见 https://github.com/swannodette/mori 。另外facebook的immutable-js也能起到相同的作用,详见https://facebook.github.io/immutable-js/

三、来自facebook的工程师分享工程化之自动化测试工具Jest

Jest is a complete and easy to set up JavaScript testing solution. In fact, Jest works out of the box for any React project. 从性能、功能方面介绍了Jest的优势,其中Jest有更详细的输出,可以watch某个指定路径的文件,snapshot测试比较有亮点,可以将执行结果存为snapshot,之后的testcase与此snapshot做对比,并且通过watch可以看到具体哪里有错误,snapshot支持array、object、webcomponent。Jest的详细文档参见 http://facebook.github.io/jest/docs/getting-started.html#content 。包管理工具使用的是yarn,yarn的详细介绍参见 https://yarn.bootcss.com/docs/ .最后呼吁更多的人来翻译此工具 https://crowdin.com/project/jest .

四、一个安全密码存储的小工具

https://github.com/emilbayes/secure-password ,有兴趣的可以试试。

五、开源社区主张的价值观、做法在各大生态系统中有很大不同,分享者以Eclipse、R、NodeJS做了比较

开源社区的工具或系统组成了软件生态系统,而被依赖的软件如果代码变更结果可能是破坏性的,例如:删除、重命名 可能会在整个生态系统中产生波动,从而导致许多软件包维护者和用户的返工。变更的原因主要是:新功能,消除技术债务,提高效率和修复错误。不同的开发商和不同的社区对于谁应该支付变更的成本和时间有不同的态度。

1) eclipse:向后兼容降低维护人员的成本,平台稳定,开发者门槛较高。自2001年以来超过1600个扩展。代码中的方法使用弃用制,而不是删除,已弃用的方法保留>10年。

2) R/CRAN(https://www.r-project.org/): 每个包的最新版本应与存储库中每个其他包的最新版本兼容,小版本迭代,CRAN团队审核提交给CRAN的每个包的变更。自1997年以来超过8000个包。

3) nodejs: 一个比喻“上个星期的教程今天已经不适应”,门槛较低,社区没有审查或测试要求,自2009年以来超过25万个npm包,并且仍在快速增长。npm平台有一些不寻常的特征,即一个包的多个修订版本可以在同一个项目中共存。开发人员可以轻松快速地发布和使用包,社区对于快速变化而言是开放的,并且具有实验API的文化,直到它们是正确的。草根推动,重点强调工具建设和社区。

所以各个开源社区采用什么样的行动与其“价值观”高度稳合。eclise与nodejs形成了鲜明对比,一个是以稳定向后兼容为价值观,一个是以草根、使开发者轻松快速发布和使用包为价值观,你的社区主张什么价值观呢?

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
阿里云服务器怎么设置密码?怎么停机?怎么重启服务器?
如果在创建实例时没有设置密码,或者密码丢失,您可以在控制台上重新设置实例的登录密码。本文仅描述如何在 ECS 管理控制台上修改实例登录密码。
10062 0
沃土前端社区教程 - es6(7)常用技能点
教程使用指南 教程地址: https://github.com/wotu-courses/es2015.git 下载压缩包或运行命令把代码克隆本地 cd es2015 运行 npm i 运行 npm start 如何进行练习 方法一在项目里的src文件内的index.js里面写你要练习的代码 方法二打开chrome浏览器控制台,把代码贴到控制台运行 es6(7)常用知识点 块级作用域 if (true) { var a = 3; // let命令,用来声明变量。
713 0
阿里专家直击前端盛会JSConf2017 Day1:ES6兴起 ES6+Babel成最佳拍档
2017年JSConf在柏林举行,为期2天,5月7日-8日。JSConf在前端领域是相当有影响力的,可以通过JSconf的分享内容了解前端技术驱势及发展方向。今年重点在以下几个方面:移动端的性能、各种NodeJS编写的提高前端工程化效率的工具、React的周边工具,AngularJS已不被提起。
6112 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,阿里云优惠总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系.
13875 0
阿里专家直击前端盛会JSConf2017 Day2:见证Moment.js精彩分享
第二天的会议个人认为最精彩的是来自于微软的一位女分享者,她是moment库的作者之一。此分享的精彩之处在于作者以moment为例讲解了开发一个类库的4个关键要素,一方面推广了moment,同时也不失理论基础。自认为这是一个很棒的演讲技巧,非常值得学习。
4996 0
阿里云ECS云服务器初始化设置教程方法
阿里云ECS云服务器初始化是指将云服务器系统恢复到最初状态的过程,阿里云的服务器初始化是通过更换系统盘来实现的,是免费的,阿里云百科网分享服务器初始化教程: 服务器初始化教程方法 本文的服务器初始化是指将ECS云服务器系统恢复到最初状态,服务器中的数据也会被清空,所以初始化之前一定要先备份好。
11888 0
阿里云ECS云服务器初始化设置教程方法
阿里云ECS云服务器初始化是指将云服务器系统恢复到最初状态的过程,阿里云的服务器初始化是通过更换系统盘来实现的,是免费的,阿里云百科网分享服务器初始化教程: 服务器初始化教程方法 本文的服务器初始化是指将ECS云服务器系统恢复到最初状态,服务器中的数据也会被清空,所以初始化之前一定要先备份好。
7361 0
阿里云服务器ECS登录用户名是什么?系统不同默认账号也不同
阿里云服务器Windows系统默认用户名administrator,Linux镜像服务器用户名root
4498 0
+关注
黎山
阿里云高级专家,负责过阿里云主要产品线的管控系统,带领团队完成管控系统的服务化改造。目前主要负责开源DevOps工具与阿里云的集成, 专注通过主流开源高效的自动化工具提高云上运维/开发的便利性。
12
文章
1
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载