UDN-企业互联网技术人气社区

板块导航

浏览  : 2004
回复  : 0

[讨论交流] 2017值得一瞥的JavaScript相关技术趋势

[复制链接]
开花包的头像 楼主
发表于 2017-1-3 10:53:36 | 显示全部楼层 |阅读模式

  跨年前两天,Dan Abramov在Twitter上提了一个问题:

2.png


  JS社区毫不犹豫的抛出了它们对于新技术的预期与期待,本文内容也是总结自Twitter的回复,按照流行度降序排列。有一个尚未确定的小点是既然函数式编程已不再是少数派,是否要把它踢出红毯呢?

  WebAssembly

1.jpg


  去年笔者就表示过了对于WebAssembly的期待,WebAssembly就是面向Web平台的底层代码。其初衷是希望能够使所有语言都能够编译运行到Web平台,这一点对于很多函数式编程、响应式编程的粉丝充满吸引力。特别是随着这几年JavaScript社区的突飞猛进,很多开发者并不能跟得上这门语言衍化的速度,因此他们也非常希望能够直接用自己习惯的语言而不是要去重头学一门从入门到直接放弃的语言。不过JavaScript目前还处于明显的上升势头,暂时还没人唱衰它。并且WebAssembly仍处于襁褓中,才进入到预览阶段,离真正的发布还有很长的距离。总结而言,笔者建议我们都应该对WebAssembly保持一定的关注,毕竟它会对未来的JavaScript造成极大的影响。如果你对于WebAssembly有兴趣,那么推荐阅读Eric Elliott的相关博客。

  Elm

  笔者个人不太意愿使用Elm,不过其特性还是很有借鉴价值

  2016年不少的开发者参与到Elm的开发中,Elm不仅仅是JavaScript的扩展库,而是一门可以编译到JavaScript的编程语言,对于很多热衷于函数式编程的开发者是个不错的选择。参考Elm 入门介绍,Elm提供了如下特性:

  并不会存在运行时错误,没有null,没有undefined is not a funtion。

  非常友好的错误提示信息能够辅助你开发。

  比较严格的代码规范与项目架构,保证了你的应用在快速迭代中依然保持着最佳实践。

  自动为所有的Elm包添加语义版本描述。

  总而言之,Elm为我们提供了优秀的工具来保证编写干净、简单与碎片化的代码,并且因为Elm是可以编译到JavaScript,因此很多JavaScript开发者都可以保持下关注或者尝试下。

  babili(babel-minify)

  Babili最早于2016年8月份发布,它是基于Babel工具链上的支持原生ES6语法的压缩工具。Henry Zhu在这篇文章中称述了为什么我们需要另一个压缩工具,关键点如下:

  目前大部分压缩工具只能够处理ES5代码,因此在压缩之前需要先进性编译,而Babili能够支持直接输入ES2015+。随着浏览器性能的提升,越来越多的浏览器支持直接运行ES2015的代码,因此我们不需要再进行转换编译。另外Babili也可以作为Babel preset引入到现有的Babel配置中,也可以作为直接使用的命令行工具。

  这里举个简单的例子,我们编写了如下的ES6类:

  1.   class Mangler {

  2.   constructor(program) {

  3.   this.program = program;

  4.   }

  5.   }

  6.   // need this since otherwise Mangler isn't used

  7.   new Mangler();
复制代码


  之前,利用传统的Babel进行编译与压缩,会得到如下代码:

  1.   // ES2015 code -> Babel -> Uglify/Babili -> Minified ES5 Code

  2.   var a=function a(b){_classCallCheck(this,a),this.program=b};a();
复制代码


  而Babili的效果如下:

  1.   // ES2015 code -> Babili -> Minified ES2015 Code

  2.   class a{constructor(b){this.program=b}}new a;
复制代码


  OCaml

  OCaml本身和JS没啥关系,不过列表接下来的两项都是基于OCaml,因此还是要先介绍下。如果你关注了近两年来的函数式编程崛起之路,你或许听过Haskell。而得益于OCaml能够编译到就S,其以后来居上的姿态凌驾于Haskell。Facebook的不少开发者都是OCaml的粉丝,他们的Hack、Flow以及Infer都是基于OCaml构建的。

  BuckleScript

  BuckleScript是基于OCaml实现的服务端框架,由著名的Bloomberg团队创造而来。Duane Johnson对他们的解释如下:

  BuckleScript或者bsc,是个基于OCaml编译器的相对较新的JavaScript服务端框架。换言之,你可以使用优秀的函数式、自带类型的OCaml语言,同时也能继续背靠基于npm包管理器的Web生态系统。

  我们来简要的看下BuckleScript代码风格,譬如用BuckleScript实现简单的服务端:

  1.   let port = 3000

  2.   let hostname = "127.0.0.1"

  3.   let create_server http =

  4.   let server = http##createServer begin fun [@bs] req resp ->

  5.   resp##statusCode #= 200;

  6.   resp##setHeader "Content-Type" "text/plain";

  7.   resp##_end "Hello world\n"

  8.   end

  9.   in

  10.   server##listen port hostname begin fun [@bs] () ->

  11.   Js.log ("Server running at http://"^ hostname ^ ":" ^ Pervasives.string_of_int port ^ "/")

  12.   end

  13.   let () = create_server Http_types.http
复制代码

  编译输出为:

  1.   'use strict';

  2.   var Pervasives = require("bs-platform/lib/js/pervasives");

  3.   var Http = require("http");

  4.   var hostname = "127.0.0.1";

  5.   function create_server(http) {

  6.   var server = http.createServer(function (_, resp) {

  7.   resp.statusCode = 200;

  8.   resp.setHeader("Content-Type", "text/plain");

  9.   return resp.end("Hello world\n");

  10.   });

  11.   return server.listen(3000, hostname, function () {

  12.   console.log("Server running at http://" + (hostname + (":" + (Pervasives.string_of_int(3000) + "/"))));

  13.   return /* () */0;

  14.   });

  15.   }

  16.   create_server(Http);
复制代码


  OCaml最大的特性就是其函数式语言特性,我们再看下其对于不可变类型的支持,我们使用OCaml stdlib实现的不可变类型如下:

  1.   module IntMap = Map.Make(struct

  2.   type t = int

  3.   let compare (x : int) y = compare x y

  4.   end)

  5.   let test () =

  6.   let m = ref IntMap.empty in

  7.   let count = 1000000 in

  8.   for i = 0 to count do

  9.   m := IntMap.add i i !m

  10.   done;

  11.   for i = 0 to count do

  12.   ignore (IntMap.find i !m)

  13.   done

  14.   let () = test()
复制代码


  而如果要用Facebook Immutable实现的代码为:

  1.   'use strict';

  2.   var Immutable = require('immutable');

  3.   var Map = Immutable.Map;

  4.   var m = new Map();

  5.   function test() {

  6.   var count = 1000000;

  7.   for(var i = 0; i < count; ++i) {

  8.   m = m.set(i, i);

  9.   }

  10.   for(var j = 0; j < count; ++j) {

  11.   m.get(j);

  12.   }

  13.   }

  14.   test();
复制代码


  性能评测下,二者的执行时间对比为:

  BuckleScript: 1186ms

  JavaScript: 3415ms

  编译后的体积为:

  BuckleScript (production): 899 Bytes

  JavaScript: 55.3K Bytes

  ReasonML

  ReasonML与React师出同门,是基于OCamel设计的语法友好、编辑器支持程度高,并且有强大的编译工具支持的语言。建议阅读Sean Grove对ReasonML的介绍。本文简单介绍几个JavaScript与Reason的语法对比:

  元类型| JavaScript | Reason |

  333.14153.1415"Hello world!""Hello world!"'Hello world!'Strings must use “Characters are strings'a'truetrue[1,2,3][1,2,3]null()const x = y;let x = y;let x = y;reference cellsvar x = y;No equivalent (thankfully)[x, ...lst] (linear time)[x, ...lst] (constant time)[...lst, x] (linear time)Not supported{...obj, x: y}{...obj, x: y}

  表达式| JavaScript | Reason |

  login ? "hi" : "bye"login ? "hi" : "bye"let res = undefined;switch (thing) { case first: res = "first"; break; case second: res = "second"; break;};`let res = switch thing {first => "first"second => "second"}; `

  Purescript

  另一个强类型、高性能的能够编译到JavaScript的编程语言,其定位与Elm类似,主要特性为:

  没有运行时错误

  严格的,类似于JavaScript的计算

  支持JavaScript 对象语法

  提供相较于Hashkell更强大方便的类型系统

  更方便地JavaScript库集成

  Webpack-blocks

  Dan Abramov说过,Webpack的定位就是在相对底层,因此将配置以编程块的方式实现会更加完备。

  1.   const { createConfig, defineConstants, env, entryPoint, setOutput, sourceMaps } = require('@webpack-blocks/webpack2')

  2.   const babel = require('@webpack-blocks/babel6')

  3.   const devServer = require('@webpack-blocks/dev-server2')

  4.   const postcss = require('@webpack-blocks/postcss')

  5.   const autoprefixer = require('autoprefixer')

  6.   module.exports = createConfig([

  7.   entryPoint('./src/main.js'),

  8.   setOutput('./build/bundle.js'),

  9.   babel(),

  10.   postcss([

  11.   autoprefixer({ browsers: ['last 2 versions'] })

  12.   ]),

  13.   defineConstants({

  14.   'process.env.NODE_ENV': process.env.NODE_ENV

  15.   }),

  16.   env('development', [

  17.   devServer(),

  18.   devServer.proxy({

  19.   '/API': { target: 'http://localhost:3000' }

  20.   }),

  21.   sourceMaps()

  22.   ])

  23.   ])
复制代码


  GraphQL

  GraphQL是个不错的REST替代查询语言,特别是对于那些拥有大量数据的公司。这个案例分析很好地阐述了从REST到GraphQL的转变之路。我能够想象2017年GraphQL会继续处于上升势头,不过要谈到真的大规模实施,还要到2018年吧。

  React Storybook

  相信大家对于React Storybook并不陌生了,你能够独立于应用而交互式的开发你的组件,就如下图所示:

  jQuery 3.0

  爷爷辈的jQuery仍然处于不断的迭代更新中,可能很多开发者忽略了2016年6月份发布的jQuery 3.0版本,可以参考这里获取更多信息。

  Pixi.js

  如果你打算在浏览器中实现精彩的2D效果,特别是对于使用WebGL的游戏开发者,Pixi.js是个值得一看的库,可以参考这里获取更多的Demo。

  Preact与inferno

  非常优秀的React的替代库。

  Rust

  Rust可以编译到JavaScript啦(通过emscripten)。

  Custom Elements

  Custom Elements(包括Shadow DOM)一直不被主流的开发者接受,不过看似2017这一点将会发生些许变化。变化的关键因素在于浏览器支持比例的改善。个人还是蛮期待Custom Elements的,可以关注SmashingMag或者Google’s关于Custom Elements的解释。

  WebRTC

  很难相信WebRTC已经五岁了,Facebook、Slack、Snapchat以及WhatsApp都在他们的服务中集成了WebRTC。可以预见WebRTC会在2017年被更多的公司采用,蒸蒸日上。

  Next.js

  Next.js是个基于React、Webpack与Babel构建的,支持服务端渲染的小框架,其来源于ZEIT团队,在React社区获得了不小的关注度。

原文作者:王下邀月熊   来源:开发者头条

相关帖子

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关于我们
联系我们
  • 电话:010-86393388
  • 邮件:udn@yonyou.com
  • 地址:北京市海淀区北清路68号
移动客户端下载
关注我们
  • 微信公众号:yonyouudn
  • 扫描右侧二维码关注我们
  • 专注企业互联网的技术社区
版权所有:用友网络科技股份有限公司82041 京ICP备05007539号-11 京公网网备安1101080209224 Powered by Discuz!
快速回复 返回列表 返回顶部