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/fluxにFlux Utilsという形でそれらの機能が提供されるようになりました。
以下に簡単にどういう機能が提供されているかについてまとめてあります。
Immutable.jsを使っているなどの特徴もありますが、その中でもReduceStoreのstateを受け取り変更したstateを返すreduceメソッドが副作用のないただの関数であるべきと書かれているように、Reduxと似た概念を提供していることがわかります。
This method should be pure and have no side-effects.
これらは互いに影響を受けているような気がするので、Redux作者とFlux作者の会話を見てみると面白いかもしれません。
@fisherwebdev @goatslacker @alexeyraspopov Also, with Store-is-function pattern, you can easily keep modularity by delegating to "substores"
— Dan Abramov (@dan_abramov) June 3, 2015Firefox 40がリリースされました。
開発者ツールのPerformanceツールが改善され、Waterfall view、Call Tree view、Flame Chart viewなどに対応しています。
- New Performance Tools in Firefox Developer Edition 40 ✩ Mozilla Hacks – the Web developer blog
- Firefox 40 for developers - Mozilla | MDN
また同時に延長サポート版(ESR)としてFirefox 38.2.0がリリースされています
JSer.infoをサポートするには
- 😘 知り合いにJSer.infoをおすすめする
- ❤️ GitHub Sponsorsで@azuのスポンサーになる
- 🐦 X(Twitter)で@jser_infoをフォローする
JSer.info Sponsors
JSer.info SponsorsはGitHub SponsorsとしてJSer.infoを支援してくれている方々です。
ヘッドライン
Release v1.0.0 · rackt/redux
github.com/rackt/redux/releases/tag/v1.0.0
Redux 1.0.0リリース。
Stateを管理するコンテナを提供することでFluxのActionCreatorとStoreにあたるものをただの関数として書けるようにし、単方向データの流れを行うライブラリ。
1.1 Release
blog.polymer-project.org/announcements/2015/08/13/1.1-release/
Polymer 1.1リリース。
コンポーネントとグローバルスコープでStyleを共有する仕組みの追加など
MozillaZine.jp » Blog Archive » Firefox 40 がリリースされた
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 4.0がio.jsとのマージが完了したバージョンとしてリリースされる予定。
Browserify dependencies in depth! | TEJI TECH BLOG
Browserifyでの依存関係の解決パターンについて。
依存するモジュールのバージョンが複数ある場合の問題についての色々なアプローチ
ES6 In Depth: Modules ✩ Mozilla Hacks – the Web developer blog
hacks.mozilla.org/2015/08/es6-in-depth-modules/
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
ES6コーディングスタイルガイド。
Destructuringの使いすぎへの注意、ES5での書き方をES6の機能でキレイに書けるケースについて比較、moduleの*やasについて書かれている。
flux-utilsについて
gist.github.com/azu/e0274b703ef97226b0db
Facebookのfluxモジュールに追加されたutilsについて。
今まではDispatcherのみだったがStoreやReact Componentと連携するためのContainerなどが提供されたことについて
スライド、動画関係
フロントエンドMVCとFlux // Speaker Deck
speakerdeck.com/sangotaro/hurontoendomvctoflux
Fluxとはどういうものなのかについてのスライド。
MVCと何が違って何が違わないのかがわかりやすく書かれている。
サイト、サービス、ドキュメント
mdast - markdown processor powered by plug-ins
Markdownパーサであるmdastのサイト。
プラグインを使ってMarkdownからHTMLへの変換、Lintなど様々なことができる
Perf.Rocks
ウェブパフォーマンスについての記事やツール、人、スライド、動画、書籍などについてのまとめ
ソフトウェア、ツール、ライブラリ関係
Relay | A JavaScript framework for building data-driven React applications
GraphQLを使ったデータのやりとりをするフレームワーク。
Relay.QLなどES6 template literalが前提になった作りになっていて面白い。
patrick-steele-idem/morphdom
github.com/patrick-steele-idem/morphdom
Virutal DOMではなくDOMを使ってdiff/patchをしてDOM Nodeを置き換えるライブラリ。
virtual-domと比較したベンチマークも書かれている。
jamesshore/quixote
mochaなどと組み合わせて使えるCSSのユニットテスト向けのassertionライブラリ
scottcorgan/immu
Immutable Objectを扱うライブラリ。
Object.definePropertyやObject.freezeを使ってArrayやObjectの変更を防止したオブジェクトを作成する
書籍関係
Designing for Performance by Lara Callender Hogan
ブラウザのパフォーマンスについての書籍。
