JSer.info #500 - React 17.0 RC(Release Candidate)がリリースされました。

React v17.0 Release Candidate: No New Features – React Blog

機能的な追加ではなくReactの内部的な仕組みの更新を目的としたメジャーアップデートです。
新しいバージョンのReactから古いバージョンReactのルートコンポーネントをLazy Loadして利用できるようにするGradual Upgradesが主な目的となっています。
複数のバージョンのReactを同時に使えるようにすることで、React 18など未来のアップデートを段階的にしやすくすることを目的としています。
これはAngularJS(1.x)からAngular(2.x)へのngUpgrade を使ったアップグレードと似た話かもしれません。

reactjs/react-gradual-upgrade-demo: Demonstration of how to gradually upgrade an app to a new version of React

関連する変更としてイベントの仕組みを変更し複数のReactを同一ページ内で動くように、イベントの仕組みが変わったためEvent Poolingを削除したためevent.persist()は何もしないようになり、エラー時のコンポーネントスタックの改善などが行われています。

フロントエンドのlinter/compiler/bundlerなどを統合したモノリシックツールを目指すRomeがベータリリースされました。

Introducing Rome

現時点ではJavaScriptを対象としたLinterとFormatterのみが機能として公開されています。

記事では、Linter/Compiler/Bundlerなどコードを扱うものをモノリシックツール内で扱うことでよりパワフルな処理ができる可能性について書かれています。

これはLint処理を統合的にしていたJSHintに対して、プラグインで拡張できるESLintとは逆のアプローチではあります。

Rome aims to replace ESLint, Babel, Webpack, Prettier, and Jest.https://t.co/VSNT8TzZag

Fascinating and ambitious. It will be interesting to see if this catches on. (It took nearly five years before ESLint overtook JSHint, so we may not know for a while.)
— Nicholas C. Zakas (@slicknet) August 10, 2020

一方でRomeとBabelの作者でもある@sebmckがBabel 6.0.0でBabelをプラグインで拡張できるようにするために、BabelのAPIを広く公開したことで、変更が難しくなった話についても書かれています。

現時点では、JavaScript(JS/JSX/TS)を対象としていますが、CSSやHTMLなどのLintなどもサポートしていく予定のようです。

お知らせ

今回の投稿でJSer.infoは500回の投稿を迎えました。
次の記事で500回の振り返りを書いています。

JSer.info 500回目の更新 - Slackワークスペース作成、コラボレータ募集、10年に向けて

新しい試みとしてJSer.info slackワークスペースを作成したので、ぜひ雑談しに参加してみてください！

JSer.info slackに参加する

JSer.infoをサポートするには

😘 知り合いにJSer.infoをおすすめする
❤️ GitHub Sponsorsで@azuのスポンサーになる
🐦 X(Twitter)で@jser_infoをフォローする

JSer.info Sponsors

JSer.info SponsorsはGitHub SponsorsとしてJSer.infoを支援してくれている方々です。

ヘッドライン

TestCafe v1.9.0 Released | TestCafe

devexpress.github.io/testcafe/blog/testcafe-v1-9-0-released.html

browser testing ReleaseNote

TestCafe v1.9.0リリース。
Multi Windowのテストをサポート、失敗したAssertionsのDiffの詳細を表示するようになるなど

Announcing TypeScript 4.0 RC | TypeScript

devblogs.microsoft.com/typescript/announcing-typescript-4-0-rc/

TypeScript ReleaseNote

TypeScript 4.0 RCリリース。 Variadic Tuple Types、Labeled Tuple Elements、コンストラクタからClass Propertyの推論ができるように。 catch節の変数がanyからunknownに変更。 Stage 4のlogical assignmentをサポート、jsxFragmentFactoryオプションのサポート、--incrementalと--noEmitの組み合わせをサポート。
TypeScript公式ウェブサイトの刷新など

Introducing Rome

romefrontend.dev/blog/2020/08/08/introducing-rome.html

JavaScript Tools ReleaseNote

JavaScriptツールチェインのRomeベータリリース。
JavaScript Compiler、Bundler、Tester、Linterなどを包含的に含むモノリシックツール

React v17.0 Release Candidate: No New Features – React Blog

reactjs.org/blog/2020/08/10/react-v17-rc.html

React ReleaseNote

React 17.0 RCリリース。
Reactの内部的な仕組みの更新をしたため、メジャーアップデートしている。
新しいバージョンのReactから古いバージョンReactのルートコンポーネントをLazy Loadして利用できるようにするGradual Upgradesが主な目的。
イベントの仕組みを変更し複数のReactを同一ページ内で動くように、イベントの仕組みが変わったためEvent Poolongを削除、エラー時のコンポーネントスタックの改善など。

reactjs/react-gradual-upgrade-demo: Demonstration of how to gradually upgrade an app to a new version of React

アーティクル

hacks.mozilla.org/2020/08/changes-to-samesite-cookie-behavior/

Firefox security article

FirefoxもCookieのSameSite属性をデフォルトLaxに変更していくという話。
現時点ではBetaでテストしているが、Stableリリースのスケジュールは未定。

Announcing the new TypeScript Website | TypeScript

devblogs.microsoft.com/typescript/announcing-the-new-typescript-website/

TypeScript article

TypeScriptの公式サイトがアップデートされた。

Setting Up Redux For Use In A Real-World Application — Smashing Magazine

www.smashingmagazine.com/2020/08/redux-real-world-application/

React redux tutorial

React + Redux + @reduxjs/toolkitを使ったアプリケーション開発のチュートリアル

How To Launch Child Processes in Node.js | DigitalOcean

www.digitalocean.com/community/tutorials/how-to-launch-child-processes-in-node-js

node.js article

Node.jsのchild_processについての記事

microfrontends/english.md at master · phodal/microfrontends

github.com/phodal/microfrontends/blob/master/english.md

MicroFrontend article opinion

Microfrontendについての記事。
MicroServiceがサービス間の依存を切り離すのに対して、MicroFrontendは複数のアプリケーションを1つのアプリケーションに見えるように集約する。
ルーティングによる分散/iframeのコンテナの利用/MicroFrontEnd/アプリケーションをモジュール化/Web Componentsでの実装についての比較。
MicroFrontendのコンセプト、mooaでのMicroFrontend設計について。
Lazy LoadingとRoutingだけでビルド時に統合をすると個別のアプリケーションをデプロイできなくなる問題、サブアプリケーションモデルでの複数チームの並行開発について