Fork me on GitHub

2020-08-11のJS: React 17.0 RC、Rome、Thinking in Microfrontend

Edit on GitHub 編集履歴を見る

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

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

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


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

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

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

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

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

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


お知らせ

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

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


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

JSer.info Sponsors

JSer.info SponsorsGitHub 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を削除、エラー時のコンポーネントスタックの改善など。


アーティクル


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だけでビルド時に統合をすると個別のアプリケーションをデプロイできなくなる問題、サブアプリケーションモデルでの複数チームの並行開発について


Migrating Large TypeScript Codebases To Project References

engineering.shopify.com/blogs/engineering/migrating-large-typescript-codebases-project-references

TypeScript article

大きなTypeScriptのコードベースのビルド速度や解析速度をProject Referencesで改善した話。
どのようにProject Referencesへ移行したかについて


A Roadmap for Angular. At the beginning of 2020 at ng-conf… | by Jules Kremer | Aug, 2020 | Angular Blog

blog.angular.io/a-roadmap-for-angular-1b4fa996a771

Angular document article

Angularのロードマップが公開された。
TypeScript 4.0への対応、RxJS v7への対応、Trusted Typesのサポートなどが進行中。
将来的な予定としてZone.jsのオプショナル化、Legacy View Engineの削除、NgModulesの削除などが予定されている。


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


indexeddbshim/IndexedDBShim: A polyfill for IndexedDB using WebSql

github.com/indexeddbshim/IndexedDBShim

node.js JavaScript library

WebSQL、SQLiteを使ったブラウザとNode.jsで動くIndexedDBのpolyfill


shikijs/shiki: A beautiful Syntax Highlighter.

github.com/shikijs/shiki

JavaScript library

TextMateの構文を使ったシンタックスハイライトをしたHTMLを出力できるライブラリ


この記事へ修正リクエストをする
JSer.info Slackに参加する