title | author | layout | date | category | tags | |||
---|---|---|---|---|---|---|---|---|
2019-08-06のJS: Chrome 76、React 16.9、Slack Desktopのリファクタリング |
azu |
post |
2019-08-06 01:52:28 UTC |
JSer |
|
JSer.info #447 - Chrome 76がリリースされました。
- New in Chrome 76 | Web | Google Developers
- Deprecations and removals in Chrome 76 | Web | Google Developers
- Chrome Platform Status
Stage 4となったPromise.allSettled()
の実装、Blob#text()
/Blob#arrayBuffer()
/Blob#stream()
のサポートが追加されています。
また、Async Clipboard APIで画像のサポートが追加されています。
Fetch Metadataリクエストヘッダ(Sec-Fetch-*
)の実装、フラグ付きでCookieのデフォルトがSameSite=Lax
となる変更が入っています。
SameSite CookieがデフォルトとなるのはChrome 80の予定で、詳細は次の記事で解説されています。
React 16.9のRC版がリリースされています。
試験的に実装されていた<React.Profiler>
がStableな機能としてサポートされました。
プロファイルについては次の記事もあわせて読むとよさそうです。
非推奨となっていたUNSAFE_componentWillMount
などのUNSAFE_*
のライフサイクルメソッドに対して警告出すようになっています。
またXSSの攻撃に使われる<a href="javascript:">
などjavascript:
スキームに対して警告を出すようになっています。
これに類似する仕組みやEmberやAngularにも実装されています。
- Warn for javascript: URLs in DOM sinks by sebmarkbage · Pull Request #15047 · facebook/react
- Ember.js - Ember.js 1.9.1 Released
- Angular - Security
その他としてDevToolsでuseState
の編集、Suspenseのトグル表示に対応などの開発者ツールの改善や、テスト用のact
関数がAsync Functionに対応などが含まれています。
developers.google.com/web/updates/2019/07/nic76
Chrome ReleaseNote
Chrome 76リリース。
Stage 4となったPromise.allSettled()
の実装、Blob#text()
/Blob#arrayBuffer()
/Blob#stream()
の追加。
Fetch Metadataリクエストヘッダ(Sec-Fetch-*
)の実装、フラグ付きでCookieのデフォルトがSameSite=Lax
となる変更が入るなど
- Chrome Platform Status
- Deprecations and removals in Chrome 76 | Web | Google Developers
- w3c/webappsec-fetch-metadata: WebAppSec has adopted sec-metadata as fetch-metadata
github.com/GoogleChrome/workbox/releases/tag/v5.0.0-alpha.0
ServiceWorker ReleaseNote JavaScript
Service WorkerフレームワークのWorkbox 5αリリース。
Service WorkerのRuntimeをCDNからではなく、ローカルを生成したものを使うように。
injectManifest
で置換されるプレースホルダが[]
からself.__WB_MANIFEST
に変更など
github.com/preactjs/preact/releases/tag/10.0.0-rc.1
React JavaScript library ReleaseNote
Preact 10.0.0 RC1リリース。 Preact 8.xから10へのマイグレーションガイドが公開された。 またメンテナンスリリースとして8.5.0も公開された
github.com/facebook/react/pull/16254
React ReleaseNote issue
React 16.9 RC.0リリース。
<React.Profiler>
の追加、非推奨となっていたUNSAFE_*
のライフサイクルメソッドに対する警告の表示、<a href="javascript:">
に対して警告を出すように。
また、DevToolsでuseState
の編集、Suspenseのトグル表示に対応、テスト用のact
がAsync対応など
slack.engineering/rebuilding-slack-on-the-desktop-308d6fe94ae4
slack JavaScript refacoring article
Slack Desktopのアーキテクチャをどのようにリファクタリングしたかについて。
jQuery+SignalからReact+Reduxへの移行。
既存のコードベースを維持しつつ、徐々にモダンへ移行していく戦略について。
名前空間オブジェクトとモジュールの混在時における相互運用性。古いコードは新しいコードを直接importできず、新しいコードは古いコードを直接importできないというlegacy-interop
の概念の導入。
Multi workspaceを意識した書き換えによってメモリ使用量の削減の効果などがあったことについてなど
tech.smarthr.jp/entry/2019/08/01/151100
React UI library TypeScript article
アプリケーション間の共通UIをライブラリ化することについて。 React + TypeScript + Styled Componentsでの実装、Storybookでのプレビューやreg-suitでの回帰テストについてなど
github.com/WebMemex/freeze-dry
JavaScript library DOM
ウェブサイトのDOMとリソースのスナップショットを取るライブラリ
JavaScript library template TypeScript
Liquid互換のテンプレートエンジンのJavaScript実装
unshiftio/url-parse: Small footprint URL parser that works seamlessly across Node.js and browser environments.
github.com/unshiftio/url-parse
JavaScript library browser node.js
Browser、Node.js、Workerで動くURLパースライブラリ
git node.js ruby Tools
Git Hooksをymlで管理できるツール。 Node.jsやRubyなどパッケージマネージャーでインストールできる
JavaScript library DOM
要素のドラッグ、リサイズなどのイベントハンドリングを扱うライブラリ
JavaScript TypeScript SQL library security
Tagged Template LiteralベースのSQLクエリエスケープライブラリ。 Tagged Template Literalで書いたSQL文からクエリとパラメータを分解して取り出し、その結果をデータベースエンジンにわたすことで安全なSQLエスケープを行う目的。 Postgres、MySQL、SQLiteなどに対応してる
kerimdzhanov/dotenv-flow: Loads environment variables from .env.[development|test|production][.local] files for Node.js® projects.
github.com/kerimdzhanov/dotenv-flow
node.js library
.env
や.env.development
ファイルなどを環境によって読み分けるライブラリ。
exploringjs.com/impatient-js/index.html
JavaScript book
Dr.AxelのJavaScript入門本