JSer.info #351 - React 16.0が正式リリースされました。
15.6.2と共にMITライセンスへ変更されています。
APIの基本的な互換は持ちつつコアを書きなおされたバージョンとなります。
renderがフラグメントや文字列を返せるように、コンポーネントのエラーハンドリングの改善、ReactDOM.createPortalの追加、SSRの改善など。
SSRの改善については次の記事で解説されています。
また、破壊的な変更としてunstable_*なAPIが削除されたり、contextなどのライフサイクルをイベントに変更があります。
npmパッケージではUMDバンドルを配布するようになったため、require("react/lib/xxx")のようなdirect requireはエラーとなります。
ブラウザネイティブの機能としてMap/Set/requestAnimationFrameに依存するため、
core-jsやbabel-polyfillといったpolyfillを入れる必要があります。
Firefox 56.0がリリースされました。
CSS Grid DevToolsの追加、<link rel="preload">のサポートされています。
CSS Gridについては次のサイトで詳しく書かれていて、あわせてDevToolsの使い方も紹介されています。
また、setTimeout(fn, 0)が仕様/他ブラウザに合わせて4msで呼ばれるように変更されています。
Essential Image Optimizationという無料の電子書籍では画像の最適化について多岐にわたって書かれています。
画像の形式や最適化の方法/ツール、それによってブラウザではどのような効果があるかなどについて書かれています。
主にブラウザを対象にした画像の最適化や配信に関するTipsが多く含まれていますので興味がある人は読んでみると良さそうです。
JSer.infoをサポートするには
- 😘 知り合いにJSer.infoをおすすめする
- 💸 GitHub Sponsorsで@azuのスポンサーになる
- 🐦 Twitterで@jser_infoをフォローする
- 🔁 JSer.infoについての最新のTweetをRetweetする
ヘッドライン
React v16.0 - React Blog
facebook.github.io/react/blog/2017/09/26/react-v16.0.html
React 16.0リリース。
15.6.2と共にMITライセンスへ変更された。
APIの基本的な互換は持ちつつコアを書き変え(Fiber)、
renderがフラグメントや文字列を返せるように、コンポーネントのエラーハンドリングの改善、ReactDOM.createPortalの追加、SSRの改善など。
Map/Set/requestAnimationFrameに依存する。
- What’s New With Server-Side Rendering in React 16 – Sasha Aickin – Medium
- React v15.6.2 - React Blog
- React 16: A look inside an API-compatible rewrite of our frontend UI library | Engineering Blog | Facebook Code
Node v8.6.0 (Current) | Node.js
nodejs.org/en/blog/release/v8.6.0/
Node.js v8.6.0リリース
N-APIがフラグなしで利用できるようになるなど
Release v0.56.0 · facebook/flow
github.com/facebook/flow/releases/tag/v0.56.0
Flow 0.56.0リリース。
$Rest typeの追加、Object.create(null)のようなnullプロトタイプのサポート、__proto__のサポートなど
Path validation vulnerability, September 2017 | Node.js
nodejs.org/en/blog/vulnerability/september-2017-path-validation/
Node.js 8.5.0にはpathの..の扱いに脆弱性があるため8.6.0で修正されたリリースがされている。
Firefox — Notes (56.0) — Mozilla
www.mozilla.org/en-US/firefox/56.0/releasenotes/
Firefox 56リリース。
CSS Grid DevToolsの追加、<link rel="preload">のサポート、Intl APIがAndroid版で有効化。
setTimeout(fn, 0)の仕様に合わせて4msに変更など
- Firefox 56 for developers - Mozilla | MDN
- Master CSS Grid with Firefox DevTools – Mozilla Tech – Medium
- WindowOrWorkerGlobalScope.setTimeout() - Web APIs | MDN
- Firefox 56 サイト互換性情報 | Firefox サイト互換性情報
アーティクル
React v16 changes - blog.koba04.com
blog.koba04.com/post/2017/09/27/react-v16-changes/
React 16の変更点について
JavaScript ♥ C++: Modern Ways to Use C++ in JavaScript Projects
medium.com/@zandaqo/javascript-c-modern-ways-to-use-c-in-javascript-projects-a19003c5a9ff
C++で書かれたコードをNode.jsで扱う方法について。
N-APIを使ったネイティブモジュールとWebAssemblyを使った方法について。
Abortable fetch | Web | Google Developers
developers.google.com/web/updates/2017/09/abortable-fetch
Fetch APIなどでリクエストのキャンセルを行うAbortControllerとAbortSignalについて。
fetch(url, { signal })のようにFetch APIに渡す使い方やAPIの歴史的経緯についてなど
Let’s Build a Pokedex with React: Part 1 – CloudBoost
blog.cloudboost.io/lets-build-a-pokedex-with-react-part-1-e1ba0b9387a7
Reactを使ってPokedexというサイトをつくっていく連載記事。
Next.js 3.0 Release: What's New?
auth0.com/blog/nextjs-3-release-what-is-new/
Next.js 3.0の変更点についての解説。
Dynamic Import/Dynacmic Loading Component、Static Export、エラーメッセージ表示の改善、起動速度の改善など
How to write reliable browser tests using Selenium and Node.js
medium.freecodecamp.org/how-to-write-reliable-browser-tests-using-selenium-and-node-js-c3fdafdca2a9
Seleniumを扱う時なぜsleepを避けるべきかについて。
Node.jsのselenium-webdriverを例に紹介してる。
How to drop Bower support? · Bower blog
bower.io/blog/2017/how-to-drop-bower-support/
ライブラリの開発者はどのようにBowerサポートを終了するべきかについて。
リポジトリからbower.jsonなど関連ファイルを削除し、majorアップデートを行い、bower unregisterはしないことについて
webpack-dev-server/middleware security issues – webpack – Medium
medium.com/webpack/webpack-dev-server-middleware-security-issues-1489d950874a
webpack-dev-serverにいくつか脆弱性があるため1.xと2.xそれぞれsecurity fixのリリースが行われた。
ECMAScript proposal updates @ 2017-09 | ECMAScript Daily
ecmascript-daily.github.io/ecmascript/2017/10/02/ecmascript-proposal-updates-2017-09
2017-09に行われたTC39ミーティング結果のProposal変更まとめ
サイト、サービス、ドキュメント
CSS Grid PlayGround | Terminology | Mozilla
mozilladevelopers.github.io/playground/
CSS Gridの解説サイト。
CSS Gridの用語や基本的な使い方、Firefoxの開発者ツールでのデバッグ、frという単位、Template Area、Named Lineなどについて
ソフトウェア、ツール、ライブラリ関係
cherow/cherow: A fast, Typescript-based Javascript parser
TypeScriptで書かれたJavaScriptパーサ。
ESTree互換のASTを生成し、ES.nextなProposal仕様もサポートしている。
roman01la/closure-compiler-handbook: How to use Google's Closure Compiler
github.com/roman01la/closure-compiler-handbook
Closure Compilerの使い方について書かれたハンドブック
Shopify/draggable: The JavaScript Drag & Drop library your grandparents warned you about.
D&Dライブラリ
Strudel.js | Lightweight component framework
AngularのようなDecoratorを使ったコンポーネントライブラリ
書籍関係
Essential Image Optimization
ウェブサイトにおける画像の最適化についての書籍。
どのようなフォーマットを選び、サイズとパフォーマンスへの影響について。
各フォーマットやエンコーダーの最適化手法、ブラウザのデコード時間や最適化手法、モニタリングツールなどについて
JPEG、PNG、WebP、GIF/Videoの比較、SVG
