Fork me on GitHub

2016-07-26のJS: AngularJS 2でのState管理、React Componentパターン、アクセシビリティガイドライン

Edit on GitHub 編集履歴を見る

JSer.info #289 - Tackling State — angular2という記事ではAngular 2のアプリケーションにおけるState管理について書かれています。

作り的にはReduxなどと似ていますが、次のような事をAngular 2 + RxJSで効率的に実装するにはどうするかが書かれています。

  • Immutable Stateである
  • ActionによってのみStateは変更される
  • ApplicationはObservableを受け取りObservableを返すもの
  • ApplicationとViewは分離される

React.js in patternsという記事ではReact Component + JSXの色々なパターンについて書かれています。

コンポーネント同士を組み合わせて使う方法や、this.props.childrenを使ったやり方、高階関数を使う方法など色々なパターンについて書かれています。

高階関数を使ったコンポーネントについては以下の記事も見てみると良いです。


Vox Product Accessibility Guidelinesというサイトではアクセシビリティのガイドラインが公開されています。

職種ごとのチェックリストが書かれていて、また根拠となるドキュメントへのリンクがまとまっているためそちらを参照してみるといいかもしれません。

  • Designers
  • Engineers
  • Project Managers
  • QA
  • Editorial

チェックリスト自体は結構ざっくりとした内容が多いですが、一度見てみると面白いかもしれません。


ヘッドライン


Dojo Recap – June, 2016 | The Dojo Toolkit Blog

dojotoolkit.org/blog/dojo-recap-june-2016

JavaScript library ReleaseNote

Dojo 1.11.2リリース。
またDojo 2の進捗について


Release 2.0.1 · jquery/qunit

github.com/jquery/qunit/releases/tag/2.0.1

JavaScript testing ReleaseNote

QUnit 2.0.1リリース。
Symbolのダンプができるように


Qt WebBrowser 1.0 - Qt Blog

blog.qt.io/blog/2016/07/18/qt-webbrowser-1-0/

browser

Qt WebBrowser 1.0リリース。
Qt WebEngine(Chromium)を使ったブラウザ。


Release Notes for Safari Technology Preview Release 9 | WebKit

webkit.org/blog/6800/release-notes-for-safari-technology-preview-release-9/

safari ReleaseNote

Safari Technology Preview 9リリース。


V8 JavaScript Engine: V8 Release 5.3

v8project.blogspot.com/2016/07/v8-release-53.html

V8 ReleaseNote

V8 5.3リリース。
Ignition Interpreterの追加、Promiseのパフォーマンス改善、V8 APIの変更など


アーティクル


Why object literals in JavaScript are cool

rainsoft.io/why-object-literals-in-javascript-are-cool/

JavaScript

JavaScriptのオブジェクトリテラルについて。
プロパティの定義やES2015のshorthandやcomputed property nameについて


The Most In-Depth Yet Understandable ES6 Destructuring Tutorial (complete with Assembled Avengers) | Untangled

untangled.io/in-depth-es6-destructuring-with-assembled-avengers/

JavaScript ECMAScript

ES2015のDestructuringの挙動についての記事。
大量のサンプルと共に複雑なパターンのDestructuringについてを解説してる。
またDestructuringを応用した使い方についてなど


6 compelling use cases for ES6 proxies

devbryce.com/use-cases-for-es6-proxies/

proxy JavaScript ECMAScript

Proxy APIのユースケースについて。
バリデーション、private、ログ、変更禁止、Proxy.revocableについて


Tackling State — angular2

vsavkin.com/managing-state-in-angular-2-applications-caf78d123d02

redux JavaScript AngularJS

AngularJS 2とRxJSでのstate管理について。

Immutable State、ActionによってStateは変更される。
ApplicationはObservableを受け取りObservableを返す、ApplicationとViewは分離される。
これらのコンセプトをどのように実現するかについてかかれている。


React.js in patterns

krasimirtsonev.com/blog/article/react-js-in-design-patterns

React

React Componentのパターン。
コンポーネントの入れ子やthis.props.children、propsのやり取り、コンポーネント間のstate管理、DIについてなど


Debugging the Production Web — Medium

medium.com/@jrullmann/debugging-the-production-web-d36373b9440

JavaScript debug

本番のウェブアプリケーションのログについて。
ブラウザからどのようなログをどのように集めるか、手順をどのように再現するか、DevToolsについて


Create Apps with No Configuration | React

facebook.github.io/react/blog/2016/07/22/create-apps-with-no-configuration.html

React Tools console

設定なしでReactアプリを書き始められるツール。
npm startでサーバを立てて、npm run buildでビルドできる。
npm run ejectでロックインから外れる事ができる。


The Service Worker Lifecycle

bitsofco.de/the-service-worker-lifecycle/

ServiceWorker

ServiceWorkerのライフサイクルについて


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


Vox Product Accessibility Guidelines

accessibility.voxmedia.com/

accessibility

Vox Mediaのアクセシビリティガイドライン。
職種ごとにチェックリストが書かれている


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


Object Model

objectmodel.js.org/

JavaScript library

プロパティの型定義したモデルクラスを作れるライブラリ


nodeca/pica: Resize image in browser with high quality and high speed

github.com/nodeca/pica

JavaScript 画像 library

TypedArray、WebWorker、WebGLを使った画像リサイズライブラリ。


stefanjudis/forrest: An npm scripts desktop client

github.com/stefanjudis/forrest

npm software

npm run-scriptのGUIクライアント


diegomura/react-log: React for the Console

github.com/diegomura/react-log

React library

console.logへの出力をJSXで書くことができるReact Component


Download Blisk - a browser for web developers

blisk.io/

browser Chrome debug

開発者向けの機能を持ったChromeベースのブラウザ。
モバイル向けの機能、自動更新、パフォーマンス やエラーの可視化など


書籍関係


Manning | Web Performance in Action

www.manning.com/books/web-performance-in-action

web performance book

2017年 春発売。
ウェブパフォーマンスについての書籍。
ブラウザでのレンダリング、HTTP/2などについて


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