Fork me on GitHub

2019-09-30のJS: React 16.10.0、Node.js 12.11.0(worker_thread)、ネットワークリクエストとUI更新の競合

Edit on GitHub 編集履歴を見る

JSer.info #455 - React 16.10.0がリリースされました。

useSubscriptionに関するバグHooks APIでメモ化が上手く動かないエッジケースの修正など細かいバグ修正が中心です。

また、現在experimentalとして実装されているschedulerのメモリ効率の改善やメッセージループにrequestAnimationFrameではなくpostMessageを使った実装の追加なども行われています。


Node.js 12.11.0がリリースされました。

Node.js 12.11.0ではChrome 77相当のV8 7.7.299.11にアップデートされています。

また、Node.jsで並列処理ができるworker_threadモジュールがStableとなりました。


Handling API request race conditions in Reactという記事では、ネットワークリクエストでUIを更新する場合などに発生するrace conditionsについて書かれています。

単純にリクエストに成功したらUIを更新するという処理を書いた場合に、
ネットワークの遅延などにより複数のリクエストが送信され、リクエストが成功タイミングとUIの状態が一致しなくなる問題が発生する場合があります。

Reactを例に、リクエストに問題があった場合にどのように問題を回避するかについて書かれていて、
不要なレスポンスを無視、リクエストをキャンセルなどの実装方法についても紹介されています。


ヘッドライン


React Training: React Router v5.1

reacttraining.com/blog/react-router-v5-1/

React library ReleaseNote

React Router 5.1リリース。
Hooks APIの追加サポート。
useParamsuseLocationuseHistoryなどのAPIが追加されている。


Announcing React Native 0.61 with Fast Refresh · React Native

facebook.github.io/react-native/blog/2019/09/18/version-0.61

React iOS Android ReleaseNote

React Native 0.61リリース。
Fast Refresh = live reload + hot reloading。
use_frameworks!を使った場合のCocoapodの問題を修正、React 16.9へアップデート、useWindowDimensions Hook APIの追加など。


Release 16.10.0 (September 27, 2019) · facebook/react

github.com/facebook/react/releases/tag/v16.10.0

React ReleaseNote

React 16.10.0リリース。
ExperimentalなSchedulerのメモリ消費の改善、requestAnimationFrameではなくpostMessageを使ったより短いインターバルでのチェックの実装。
useSubscriptionのバグ修正など


V8 release v7.8 · V8

v8.dev/blog/v8-release-78

V8 ReleaseNote

V8 v7.8リリース。
Script StreamingによるJavaScriptのロードパフォーマンスの改善、オブジェクトのDestructuringのパフォーマンス改善。
またV8 APIとしてWebAssembly C/C++ APIを公式にサポートなど


Node v12.11.0 (Current) | Node.js

nodejs.org/en/blog/release/v12.11.0/

node.js ReleaseNote

Node v12.11.0リリース。
V8 7.7へアップデート、worker_threadモジュールがStableになるなど。


Release v2 Cosmic Jellyfish · gpujs/gpu.js

github.com/gpujs/gpu.js/releases/tag/2.0.0

JavaScript library ReleaseNote

gpu.js 2.0.0リリース。
Video inputのサポート、gpu.setInjectedNative()の追加、modeオプションにdevを追加など


アーティクル


Handling API request race conditions in React

sebastienlorber.com/handling-api-request-race-conditions-in-react

JavaScript React article

ネットワークの遅延などにより複数のリクエストが送信され、リクエストが成功タイミングとUIの状態が一致しなくなる問題について。
Reactを例に、リクエストに問題があった場合にどのように問題を回避するかについて書かれている。
不要なレスポンスを無視、リクエストをキャンセルなどの実装方法について


TypeScript Tutorial for Beginners: The Missing Guide (2019)

www.valentinog.com/blog/typescript/

TypeScript tutorial article

初心者向けのTypeScriptチュートリアル。


Working with GitHub Actions | Jeff Rafter

jeffrafter.com/working-with-github-actions/

node.js Github Actions article testing

Node.js + TypeScriptでGitHub Actionsを作成するチュートリアル。
@actions/coreの使い方やGitHub APIへのリクエスト、デバッグ方法、テスト方法などについて


Why Your Angular App Is Not Working: 7 Common Mistakes - DEV Community 👩‍💻👨‍💻

dev.to/valeriopisapia/why-your-angular-app-is-not-working-7-common-mistakes-2ba1

Angular article

Angularアプリでよくある間違いとその修正方法について


swyx Writing | Why JavaScript Tooling Sucks

www.swyx.io/writing/js-tooling/

JavaScript community Tools opinion article

JavaScriptのツールがなぜ難しいのかについての話。
JavaScriptの始まり、巨大なコミュニティ、ターゲットの変遷、ボトムアップ、オーナーシップやsemver、ツールを作る人と使う人、Fundingの問題、良い所なども含めて書かれている。
JavaScriptアプリケーションの97%はnpmから来ているため、OSSの問題はJavaScriptの問題と見られることについてなど


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


Webtest.app - Testing websites with and without adblocker

webtest.app

webservice Tools performance

ウェブサイトにuBlock OriginなどのAdblockを経由した場合のブロックされたリクエストやCookie、ページサイズ、パフォーマンスメトリクスの比較結果を計測するツール


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


chroventer/endb: Simple key-value database with multi adapter support

github.com/chroventer/endb

node.js JavaScript library

MySQLやRedisなどをバックエンドにできるKVSライブラリ


oframe/ogl: Minimal WebGL framework

github.com/oframe/ogl

WebGL library

WebGLフレームワーク。
抽象度は低めで、Math/Core/Extrasのモジュールから構成される


書籍関係


valentinogagliardi/Little-JavaScript-Book: The Little JavaScript Book

github.com/valentinogagliardi/Little-JavaScript-Book

JavaScript book

JavaScriptについての書籍


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