Fork me on GitHub

2015-08-17のJS: Redux 1.0.0、flux-utils、Firefox 40

Edit on GitHub 編集履歴を見る

JSer.info #241 - Fluxのように単方向データの流れを行うフレームワークであるRedux 1.0.0がリリースされました。

Reduxのコンセプトについては作者が以前The Evolution of Flux Frameworks — Mediumという記事で書いています。

ざっくり書くと、Stateを管理するコンテナ(reduxオブジェクト)を提供することでFluxのActionCreatorとStoreにあたるものをただの関数として書けるようにして、状態の変化が予測できるようにすることを目的としています。

ドキュメントや人気のFluxフレームワークReduxをさわってみた - マルシテイアは月の上などを見てみると特徴や、どういう制約を元に作られているのかが分かるかもしれません。

また同時期に、今まで他のFluxフレームワークのようにStoreやActionCreatorに関する機能を提供してなかったfacebook/fluxFlux Utilsという形でそれらの機能が提供されるようになりました。

以下に簡単にどういう機能が提供されているかについてまとめてあります。

Immutable.jsを使っているなどの特徴もありますが、その中でもReduceStoreのstateを受け取り変更したstateを返すreduceメソッドが副作用のないただの関数であるべきと書かれているように、Reduxと似た概念を提供していることがわかります。

This method should be pure and have no side-effects.

これらは互いに影響を受けているような気がするので、Redux作者Flux作者の会話を見てみると面白いかもしれません。


Firefox 40がリリースされました。

開発者ツールのPerformanceツールが改善され、Waterfall view、Call Tree view、Flame Chart viewなどに対応しています。

また同時に延長サポート版(ESR)としてFirefox 38.2.0がリリースされています


ヘッドライン


Release v1.0.0 · rackt/redux

github.com/rackt/redux/releases/tag/v1.0.0

JavaScript Flux library ReleaseNote

Redux 1.0.0リリース。
Stateを管理するコンテナを提供することでFluxのActionCreatorとStoreにあたるものをただの関数として書けるようにし、単方向データの流れを行うライブラリ。


1.1 Release

blog.polymer-project.org/announcements/2015/08/13/1.1-release/

WebComponents library ReleaseNote

Polymer 1.1リリース。
コンポーネントとグローバルスコープでStyleを共有する仕組みの追加など


MozillaZine.jp » Blog Archive » Firefox 40 がリリースされた

mozillazine.jp/?p=4868

firefox ReleaseNote

Firefox 40リリース。
returnに書かれた到達できないコードへの警告がコンソールへ出るように開発者ツールの改善、Web Audio APIの仕様追従、Web Animations APIの仕様追従など


アーティクル


4.0 is the new 1.0 — Node & JavaScript — Medium

medium.com/node-js-javascript/4-0-is-the-new-1-0-386597a3436d

node.js ReleaseNote 歴史

Node.js 4.0がio.jsとのマージが完了したバージョンとしてリリースされる予定。


Browserify dependencies in depth! | TEJI TECH BLOG

www.tejitak.com/blog/?p=1468

browserify

Browserifyでの依存関係の解決パターンについて。
依存するモジュールのバージョンが複数ある場合の問題についての色々なアプローチ


ES6 In Depth: Modules ✩ Mozilla Hacks – the Web developer blog

hacks.mozilla.org/2015/08/es6-in-depth-modules/

JavaScript ECMAScript

ES6 modulesのimport/exportの多様な構文のそれぞれの動作についての解説。
Moduleの仕様を分解してみた時にLoadingについてはECMAScriptでは未定義であること、構文的にstaticであることなどについて書かれている


es6-coding-style/es6-coding-style-en.md at master · gf-web/es6-coding-style

github.com/gf-web/es6-coding-style/blob/master/es6-coding-style-en.md

JavaScript ECMAScript

ES6コーディングスタイルガイド。
Destructuringの使いすぎへの注意、ES5での書き方をES6の機能でキレイに書けるケースについて比較、moduleの*asについて書かれている。


flux-utilsについて

gist.github.com/azu/e0274b703ef97226b0db

Flux JavaScript

Facebookのfluxモジュールに追加されたutilsについて。
今まではDispatcherのみだったがStoreやReact Componentと連携するためのContainerなどが提供されたことについて


スライド、動画関係


フロントエンドMVCとFlux // Speaker Deck

speakerdeck.com/sangotaro/hurontoendomvctoflux

Flux スライド

Fluxとはどういうものなのかについてのスライド。
MVCと何が違って何が違わないのかがわかりやすく書かれている。


サイト、サービス、ドキュメント


mdast - markdown processor powered by plug-ins

mdast.js.org/

Markdown JavaScript library

Markdownパーサであるmdastのサイト。
プラグインを使ってMarkdownからHTMLへの変換、Lintなど様々なことができる


Perf.Rocks

perf.rocks/

performance まとめ

ウェブパフォーマンスについての記事やツール、人、スライド、動画、書籍などについてのまとめ


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


Relay | A JavaScript framework for building data-driven React applications

facebook.github.io/relay/

React JavaScript library facebook

GraphQLを使ったデータのやりとりをするフレームワーク。
Relay.QLなどES6 template literalが前提になった作りになっていて面白い。


patrick-steele-idem/morphdom

github.com/patrick-steele-idem/morphdom

DOM library

Virutal DOMではなくDOMを使ってdiff/patchをしてDOM Nodeを置き換えるライブラリ。
virtual-domと比較したベンチマークも書かれている。


jamesshore/quixote

github.com/jamesshore/quixote

CSS JavaScript testing

mochaなどと組み合わせて使えるCSSのユニットテスト向けのassertionライブラリ


scottcorgan/immu

github.com/scottcorgan/immu

JavaScript library

Immutable Objectを扱うライブラリ。
Object.definePropertyやObject.freezeを使ってArrayやObjectの変更を防止したオブジェクトを作成する


書籍関係


Designing for Performance by Lara Callender Hogan

designingforperformance.com/

performance book

ブラウザのパフォーマンスについての書籍。


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