Fork me on GitHub

2015-02-17のJS: Babel(6to5)、BrowserSync 2.0、Flux実装比較

Edit on GitHub 編集履歴を見る

JSer.info #215 - ES6+のコードをES5に変換するツールである6to5Babelにリネームされてリリースされました。

また、BabelはAcornをベースにしたパーサーを利用していて、そのASTの元になっているSpiderMonkey parserのASTはES6以降についての仕様が曖昧になっていてその部分を各パーサがそれぞれ実装していました。

最近になってjQuery FoundationにEsprimaが移管されたのが契機となって、Esprima、Acorn、Mozilla、Shift ASTの人たちが中心となってASTの仕様を定義していくESTreeが始まりました。(基本的には現行のASTと互換性を重視しています)

Babelとしても@sebmck氏がESTreeでのASTの策定に関わっていくようです。


LiveReload的な機能を持っている開発用のローカルサーバを立ててくれるBrowserSync 2.0がリリースされました。

元々多機能でしたが、Pesticideを使ったCSSアウトラインのデバッグ機能やレイテンシーのシミュレート等Remote debug機能が強化されています。


Flux solutions compared by example - Pixelhunter.me | Dmitri Voronianski's blogという記事ではvoronianski/flux-comparisonというFlux実装の比較をした経験から得た事について書かれています。

"Flux Online Shop"を題材にそれぞれのライブラリがどのようなアプローチをとっているかや、そこから見えてくるFluxアーキテクチャについて書かれています。
一度、Facebookで紹介されている素のFluxを実装してみてから読んでみると面白いと思います。


ヘッドライン


Release v1.11.0 · jscs-dev/node-jscs

github.com/jscs-dev/node-jscs/releases/tag/v1.11.0

JavaScript Tools ReleaseNote

jscs v1.11.0リリース。
既存のファイルの用意されてるプリセットでチェックして、自動で設定ファイルを作成出来る--auto-configureのオプションの追加、ルールの追加修正など。


jQuery UI 1.11.3 | jQuery UI Blog

blog.jqueryui.com/2015/02/jquery-ui-1-11-3/

jQuery UI ReleaseNote

jQuery UI 1.11.3リリース。


Changelog · lodash/lodash Wiki

github.com/lodash/lodash/wiki/Changelog#v320

JavaScript library ReleaseNote

lodash v3.2.0リリース。
_.fill_.spread等の追加、lazyサポートの修正や対応メソッドの追加


BrowserSync 2.0 - JH

www.wearejh.com/news/browsersync-2-0/

JavaScript browser debug Tools ReleaseNote

LiveReloadなどが入った開発用サーバであるBrowserSync 2.0リリース。
デバッグのUI画面が追加され、履歴、接続してる端末一覧、CSSでデバッグ用にアウトライン表示などの機能が追加されている


Download RequireJS

requirejs.org/docs/download.html#2-1-16

JavaScript AMD library ReleaseNote

RequireJS 2.1.16リリース。
依存関係のパースをするのにEsprima 2.0を使うように、r.jsがNashornをサポート、UMDサポートのアップデート


Release Pure 0.6.0-rc-1 – New Pure Menus · yahoo/pure

github.com/yahoo/pure/releases/tag/v0.6.0-rc-1

CSS ReleaseNote

Pure 0.6.0-rc-1リリース。
Menusの書き直し、Normalizeのアップデート(IE 7以下はサポート廃止)など


js2coffee/Newin2.0.md at master · js2coffee/js2coffee

github.com/js2coffee/js2coffee/blob/master/notes/Newin2.0.md

JavaScript CoffeeScript ReleaseNote

JavaScriptをCoffeeScriptに変換するJs2coffee 2.0リリース。
エディタや警告の表示、ASTの表示、SourceMap対応など


harmony:specification_drafts [ES Wiki]

wiki.ecmascript.org/doku.php?id=harmony:specification_drafts

ECMAScript ReleaseNote

ECMAScript 2015 (ES6) Draft Rev 33リリース。
super()に関する制約の記述の追加、module周りのリファクタリング


アーティクル


Not Born to Die · Babel

babeljs.io/blog/2015/02/15/not-born-to-die

JavaScript Tools

6to5が"Babel"にリネームされた。
多くのツールがparsersとtranspilersに依存しているため、Babelプロジェクトではこの部分を解決していく。
ESTreeというASTの仕様の標準化作業にも協力していくとのこと


estree/estree · GitHub

github.com/estree/estree

ECMAScript JavaScript AST

SpiderMonkey Parser APIのASTのドキュメントがGitHubに移行し、ES6についてのドキュメント化が開始された。
現行の多くのツールがこれに依存していて、明文化されてないASTについてを仕様に落とすのが目的。


JSCS in use

varya.me/en/posts/jscs-in-use/

JavaScript Tools

JavaScriptのコードスタイルチェックツールであるJSCSの使い方について


Extensible Web を支える低レベル API 群 - Block Rockin’ Codes

jxck.hatenablog.com/entry/extensible-lowlevel-api

JavaScript WebPlatformAPI

現在策定や実装が進んでいる低レベルなAPIとしてどのようなものがあるかについてのまとめ


Change Detection in Angular 2 | Victor Savkin

victorsavkin.com/post/110170125256/change-detection-in-angular-2

AngularJS アルゴリズム

Angular 2の変更検知の仕組みについての解説。
基本的にはComponentツリーを上から走査して変更を検知するが、ReactのshouldComponentUpdate()のように子への探索を減らす仕組みが導入されている


Year in review: Spidermonkey part 1 | H4writer

h4writer.com/?p=14

firefox 歴史

2014年のFirefoxに入ったAPI、機能や改善点等の振り返り


TouchDevelop - TouchDevelop goes open-source

www.touchdevelop.com/blog/touchdevelopgoesopensource

JavaScript TypeScript MS オープンソース

タッチ操作でアプリを開発出来るウェブアプリである TouchDevelopがオープンソースとして公開された。
TypeScriptで書かれている


A Guide To ES6 Classes - I Like Kill Nerds

ilikekillnerds.com/2015/02/a-guide-to-es6-classes/

JavaScript ECMAScript

ES6 Classesについて。
ES5ではどのように"クラス"を書いてたかと、ES6ではどのように書けるかについて。
継承やsuper()についても触れている


Flux solutions compared by example - Pixelhunter.me | Dmitri Voronianski's blog

pixelhunter.me/post/110248593059/flux-solutions-compared-by-example

Flux サンプル JavaScript

Flux実装のライブラリは多種多様で、小さなサンプルをそれぞれのライブラリを使って分かった事について。
通信でデータ取得はどこですべきか、
Isomorphicとシングルトン、ComponentをラップしたContainerのレイヤーを設ける事についてなど


60fps on the mobile web — Flipboard Engineering

engineering.flipboard.com/2015/02/mobile-web/

JavaScript canvas React DOM

React Canvasについて。
canvas要素でUIを作ることで60FPSのスクロールを実現する。
宣言的にUIを作れるためDOM的な抽象レイヤーとしてReactを使い、内部的にCanvasでレンダリングするReact Canvasを開発した話


maxogden/maintenance-modules

github.com/maxogden/maintenance-modules

JavaScript npm Tools

npmでモジュールを公開するのを補助する色々なツールの紹介。
Travis CIの設定、gh-pagesへのデプロイスクリプト、package.jsonの整形、npm release、依存パッケージのチェックなど


Detect JavaScript Problems with ESLint

davidwalsh.name/eslint

JavaScript Tools

ESLintを使ったJavaScriptのLintについて。
オプションの設定方法


スライド、動画関係


ES6 at PayPal

www.slideshare.net/JamundFerguson/es6-at-paypal

ECMAScript JavaScript スライド

ES6を使ってみようという感じのスライド


Asynchronous Programming: The End of The Loop - Video Tutorial Series @eggheadio

egghead.io/series/mastering-asynchronous-programming-the-end-of-the-loop

JavaScript 動画

NetflixのJafar HusainさんによるJavaScriptの非同期プログラミングについてのスクリーンキャスト。
聞きやすくて、分かりやすくて、書き起こしもある


Tagtree course: Expert ES6

tagtree.io/courses/expert-es6/

JavaScript ECMAScript tutorial

ES6について学べる講座。
ES6の新しい機能についての解説と練習問題を解いて学べる


nodefest 2014 - YouTube

www.youtube.com/playlist?list=PL42hYWKFRfN689rx3pVReAkYjs2F05Kum

node.js イベント 動画

東京Node学園祭2014 http://nodefest.jp/2014/ の動画が公開された


サイト、サービス


npm/how-to-npm

github.com/npm/how-to-npm

node.js npm tutorial

npmについてコマンドラインで学べるインタラクティブな教材


css2scss - from css to scss

sebastianpontow.de/css2compass

CSS Sass webservice

CSSからSCSSの機能を使ったものを変換したり、色見本を作ってくれるサービス。


ソフトウェア、ツール、ライブラリ関係


wooorm/eslint-md

github.com/wooorm/eslint-md

JavaScript Markdown Tools

Markdownの中にあるCodeBlockのJavaScriptをESLintでチェックできるツール


Phoenixmatrix/phoenixmatrix-proxy

github.com/Phoenixmatrix/phoenixmatrix-proxy

node-webkit proxy app

node-webkit(nw.js)で書かれたプロキシアプリ。
SSLにもCharlesみたいに証明書を使ってプロキシ出来る。Fiddlerとかみたいにスクリプタブルなデバッグプロキシとなるのが目的


wix/react-templates

github.com/wix/react-templates

React template library

ReactのJSXへ変換できるテンプレートとコンパイラ。
JetBrains IDEで動くプラグインが用意されている
https://github.com/idok/react-templates-plugin


Flipboard/react-canvas

github.com/flipboard/react-canvas

React canvas library

CanvasのレンダリングをするReact components。
基本的な要素、Events、Text sizing、css-layout(パフォーマンス優先なのでなくなるかも?)、Accessibilityへの配慮が予定されてる


Reapp - Hybrid apps, fast

reapp.io/

React mobile library

ReactベースのモバイルUIフレームワーク


maxogden/wzrd

github.com/maxogden/wzrd

JavaScript browserify debug library

beefyみたいなBrowserifyを使ったローカルサーバを立てるコマンドラインツール


typicode/jsop

github.com/typicode/jsop

node.js library

Object.observeを使って読み込んだJSONを書き換えたら自動的に保存するNode.jsモジュール


acdlite/flummox

github.com/acdlite/flummox

Flux JavaScript library

Flux実装ライブラリ。
コアとなるFlummoxクラスを継承して、そこにStoreとActionを登録することでシングルトンを避ける作りになっている。ES6 Classesやasync/awaitを使った書き方等が考慮されている。


fdecampredon/jsx-typescript

github.com/fdecampredon/jsx-typescript

TypeScript React

TypeScript + React(JSX)なTypeScript fork.


書籍関係


Exploring ES6: Upgrade to the next version of JavaScript

exploringjs.com/

ECMAScript JavaScript book

Speaking JavaScriptの著者でもあるDr. AxelによるES6についての書籍


この記事へ修正リクエストをする
記事を紹介する