2017년 주목할 만한 자바스크립트 관련 기술 동향

새해를 이틀 앞둔 Dan Abramov는 트위터에 다음과 같은 질문을 했습니다.

JS 커뮤니티는 기대에 대해 주저 없이 버렸습니다. 그리고 신기술에 대한 기대 등을 반영하여, 본 기사의 내용도 트위터의 답변을 참고하여 인기순으로 정리하였습니다. 결정되지 않은 작은 점 중 하나는 함수형 프로그래밍이 더 이상 소수가 아니므로 레드 카펫에서 추방되어야 하는지 여부입니다.

WebAssembly

지난해 저자는 웹 플랫폼의 기본 코드인 WebAssembly에 대한 기대를 표명했습니다. 원래 의도는 모든 언어를 웹 플랫폼에서 컴파일하고 실행할 수 있도록 하는 것인데, 이는 함수형 프로그래밍과 반응형 프로그래밍을 좋아하는 많은 팬에게 매우 매력적입니다. 특히 최근 몇 년간 JavaScript 커뮤니티의 급속한 발전으로 인해 많은 개발자들이 이 언어의 발전 속도를 따라잡을 수 없게 되었습니다. 따라서 그들도 익숙한 언어를 직접 사용할 수 있기를 바랍니다. 입학부터 새로운 언어를 배우기 위해 직접 포기하는 언어. 그러나 JavaScript는 여전히 뚜렷한 상승 추세에 있으며 아직 이에 대해 나쁜 말을 하는 사람은 없습니다. 그리고 WebAssembly는 아직 초기 단계에 불과하여 미리 보기 단계에 들어섰고, 실제 출시까지는 아직 멀었습니다. 요약하자면, 저자는 우리 모두가 WebAssembly에 어느 정도 관심을 기울여야 한다고 제안합니다. 결국 WebAssembly는 JavaScript의 미래에 큰 영향을 미칠 것입니다. WebAssembly에 관심이 있다면 Eric Elliott의 관련 블로그를 읽어보는 것을 추천합니다.

Elm

저자는 개인적으로 Elm을 사용할 의향이 없지만 그 기능은 그래도 참고할만한 가치가 있습니다

2016년에는 많은 개발자들이 참여했습니다. Elm의 개발에 따라 Elm은 단순한 JavaScript 확장 라이브러리가 아니라 JavaScript로 컴파일할 수 있는 프로그래밍 언어입니다. 함수형 프로그래밍에 관심이 있는 많은 개발자에게 좋은 선택입니다. Elm 소개를 참조하면 Elm은 다음 기능을 제공합니다.

• 런타임 오류가 없으며 null도 없고 정의되지 않은 기능도 없습니다.

• 매우 친숙한 오류 메시지가 개발에 도움이 될 수 있습니다.

• 상대적으로 엄격한 코드 사양과 프로젝트 구조를 통해 애플리케이션은 빠른 반복 중에도 모범 사례를 계속 유지할 수 있습니다.

• 모든 Elm 패키지에 의미론적 버전 설명을 자동으로 추가합니다.

대체로 Elm은 깨끗하고 단순하며 단편적인 코드를 작성할 수 있는 훌륭한 도구를 제공합니다. Elm은 JavaScript로 컴파일할 수 있기 때문에 많은 JavaScript 개발자가 계속 지켜봐주거나 제공할 수 있습니다. 한번 시도해 보세요.

babili(babel-minify)

Babili는 2016년 8월에 처음 출시되었습니다. 기본 ES6 구문을 지원하는 Babel 툴 체인 기반의 압축 도구입니다. Henry Zhu는 이 기사에서 다른 압축 도구가 필요한 이유를 설명했습니다.

현재 대부분의 압축 도구는 ES5 코드만 처리할 수 있으므로 압축 전에 고급 컴파일이 필요하지만 Babili는 직접 지원이 가능합니다. ES2015+에 입력합니다. 브라우저 성능이 향상됨에 따라 점점 더 많은 브라우저가 ES2015 코드 직접 실행을 지원하므로 더 이상 변환하고 컴파일할 필요가 없습니다. 또한 Babili는 기존 Babel 구성에 Babel 프리셋으로 도입할 수도 있고, 직접 사용하기 위한 명령줄 도구로 사용할 수도 있습니다.

다음은 간단한 예입니다.

class Mangler {
  constructor(program) {
    this.program = program;
  }
}
// need this since otherwise Mangler isn't used
new Mangler();

컴파일 및 압축을 위해 기존 Babel을 사용하기 전에 다음 코드를 얻습니다.

// ES2015 code -> Babel -> Uglify/Babili -> Minified ES5 Code
var a=function a(b){_classCallCheck(this,a),this.program=b};a();

Babili의 효과는 다음과 같습니다.

// ES2015 code -> Babili -> Minified ES2015 Code
class a{constructor(b){this.program=b}}new a;

OCaml

OCaml 자체는 JS와 아무런 관련이 없지만 목록의 다음 두 항목은 OCaml을 기반으로 하므로 여전히 필요합니다. 먼저 소개받아요. 지난 2년 동안 함수형 프로그래밍의 성장을 따라왔다면 Haskell에 대해 들어봤을 것입니다. OCaml은 S로 컴파일할 수 있다는 사실 덕분에 Haskell보다 우월합니다. Facebook의 많은 개발자는 OCaml의 팬이며 Hack, Flow 및 Infer는 모두 OCaml을 기반으로 구축되었습니다.

BuckleScript

BuckleScript는 유명한 Bloomberg 팀이 만든 OCaml 기반의 서버측 프레임워크입니다. Duane Johnson은 이를 다음과 같이 설명합니다.
BuckleScript(bsc)는 OCaml 컴파일러를 기반으로 하는 비교적 새로운 JavaScript 서버측 프레임워크입니다. 즉, npm 패키지 관리자를 기반으로 하는 웹 생태계에 계속 의존하면서 뛰어난 기능을 갖춘 자체 유형의 OCaml 언어를 사용할 수 있습니다.

BuckleScript 코드 스타일을 간략하게 살펴보겠습니다. 예를 들어 BuckleScript를 사용하여 간단한 서버를 구현합니다.

let port = 3000
let hostname = "127.0.0.1"
let create_server http =
  let server = http##createServer begin fun [@bs] req resp ->
      resp##statusCode #= 200;
      resp##setHeader "Content-Type" "text/plain";
      resp##_end "Hello world\n"
    end
  in
  server##listen port hostname begin fun [@bs] () ->
    Js.log ("Server running at http://"^ hostname ^ ":" ^ Pervasives.string_of_int port ^ "/")
  end

let () = create_server Http_types.http

컴파일된 출력은 다음과 같습니다.

'use strict';
var Pervasives = require("bs-platform/lib/js/pervasives");
var Http       = require("http");

var hostname = "127.0.0.1";

function create_server(http) {
  var server = http.createServer(function (_, resp) {
    resp.statusCode = 200;
    resp.setHeader("Content-Type", "text/plain");
    return resp.end("Hello world\n");
  });
  return server.listen(3000, hostname, function () {
    console.log("Server running at http://" + (hostname + (":" + (Pervasives.string_of_int(3000) + "/"))));
    return /* () */0;
  });
}

create_server(Http);

가장 큰 특징은 다음과 같습니다. OCaml의 기능은 불변 유형에 대한 지원을 살펴보겠습니다. OCaml stdlib를 사용하여 구현하는 불변 유형은 다음과 같습니다.

module IntMap = Map.Make(struct
  type t = int
  let compare (x : int) y = compare x y
end)

let test () =
  let m = ref IntMap.empty in
  let count = 1000000 in
  for i = 0 to count do
    m := IntMap.add i i !m
  done;
  for i = 0 to count do
    ignore (IntMap.find i !m)
  done

let () = test()

그리고 Facebook Immutable을 사용하려는 경우 구현할 코드입니다. 그것은:

'use strict';

var Immutable = require('immutable');
var Map = Immutable.Map;
var m = new Map();

function test() {
  var count = 1000000;
  for(var i = 0; i < count; ++i) {
    m = m.set(i, i);
  }
  for(var j = 0; j < count; ++j) {
    m.get(j);
  }
}

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的定位就是在相对底层，因此将配置以编程块的方式实现会更加完备。

const { createConfig, defineConstants, env, entryPoint, setOutput, sourceMaps } = require('@webpack-blocks/webpack2')
const babel = require('@webpack-blocks/babel6')
const devServer = require('@webpack-blocks/dev-server2')
const postcss = require('@webpack-blocks/postcss')
const autoprefixer = require('autoprefixer')

module.exports = createConfig([
  entryPoint('./src/main.js'),
  setOutput('./build/bundle.js'),
  babel(),
  postcss([
    autoprefixer({ browsers: ['last 2 versions'] })
  ]),
  defineConstants({
    'process.env.NODE_ENV': process.env.NODE_ENV
  }),
  env('development', [
    devServer(),
    devServer.proxy({
      '/api': { target: 'http://localhost:3000' }
    }),
    sourceMaps()
  ])
])

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社区获得了不小的关注度。

以上就是2017 年值得一瞥的 JavaScript 相关技术趋势的内容，更多相关内容请关注PHP中文网（www.php.cn）！