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
Dojo 1.11.2リリース。
またDojo 2の進捗について
Release 2.0.1 · jquery/qunit
github.com/jquery/qunit/releases/tag/2.0.1
QUnit 2.0.1リリース。
Symbolのダンプができるように
Qt WebBrowser 1.0 - Qt Blog
blog.qt.io/blog/2016/07/18/qt-webbrowser-1-0/
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 Technology Preview 9リリース。
V8 JavaScript Engine: V8 Release 5.3
v8project.blogspot.com/2016/07/v8-release-53.html
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のオブジェクトリテラルについて。
プロパティの定義や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/
ES2015のDestructuringの挙動についての記事。
大量のサンプルと共に複雑なパターンのDestructuringについてを解説してる。
またDestructuringを応用した使い方についてなど
6 compelling use cases for ES6 proxies
devbryce.com/use-cases-for-es6-proxies/
Proxy APIのユースケースについて。
バリデーション、private、ログ、変更禁止、Proxy.revocableについて
Tackling State — angular2
vsavkin.com/managing-state-in-angular-2-applications-caf78d123d02
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 Componentのパターン。
コンポーネントの入れ子やthis.props.children、propsのやり取り、コンポーネント間のstate管理、DIについてなど
Debugging the Production Web — Medium
medium.com/@jrullmann/debugging-the-production-web-d36373b9440
本番のウェブアプリケーションのログについて。
ブラウザからどのようなログをどのように集めるか、手順をどのように再現するか、DevToolsについて
Create Apps with No Configuration | React
facebook.github.io/react/blog/2016/07/22/create-apps-with-no-configuration.html
設定なしでReactアプリを書き始められるツール。
npm startでサーバを立てて、npm run buildでビルドできる。
npm run ejectでロックインから外れる事ができる。
The Service Worker Lifecycle
bitsofco.de/the-service-worker-lifecycle/
ServiceWorkerのライフサイクルについて
サイト、サービス、ドキュメント
Vox Product Accessibility Guidelines
Vox Mediaのアクセシビリティガイドライン。
職種ごとにチェックリストが書かれている
ソフトウェア、ツール、ライブラリ関係
Object Model
プロパティの型定義したモデルクラスを作れるライブラリ
nodeca/pica: Resize image in browser with high quality and high speed
TypedArray、WebWorker、WebGLを使った画像リサイズライブラリ。
stefanjudis/forrest: An npm scripts desktop client
github.com/stefanjudis/forrest
npm run-scriptのGUIクライアント
diegomura/react-log: React for the Console
github.com/diegomura/react-log
console.logへの出力をJSXで書くことができるReact Component
Download Blisk - a browser for web developers
開発者向けの機能を持ったChromeベースのブラウザ。
モバイル向けの機能、自動更新、パフォーマンス やエラーの可視化など
書籍関係
Manning | Web Performance in Action
www.manning.com/books/web-performance-in-action
2017年 春発売。
ウェブパフォーマンスについての書籍。
ブラウザでのレンダリング、HTTP/2などについて
