Discourse で使用されている Ember のバージョンを更新したいと考えています。
現在、3.15 を使用していますが、4.1 への移行を目指しています。
今年末までにこの作業を完了することを目標としています。なお、本トピックはロードマップであり、すべての計画と推定値は暫定的なものです。特定のアップグレードや変更に関する重要な議論を行う場ではありません。したがって、ここでの会話は焦点を絞って進めましょう。これらのアップデートがあなたのサイト/プラグイン/テーマに与える影響に関する質問は、本トピックの範囲外です。計画されている変更はすべてフロントエンド（Ember アプリ）のみを対象としています。
導入する変更については非常に慎重に進めます。すべての公式プラグイン/テーマは更新されます**（CDCK が顧客のために行ったカスタム作業を含む）**。また、人気のある非公式プラグイン/テーマの更新に向けた PR も送信します。
独自に作成したカスタムプラグイン/テーマをお持ちの方もご安心ください。必要な変更を行うための十分な時間を確保するために、廃止予定の警告を追加し、必要な告知を適時に行います。必要に応じて、これらの変更のサポートも提供いたします。
まずは目標から始めましょう。もちろん利用可能な最高バージョンへの移行を目指していますが、現在から最終目的地までの間に中間目標を設定する必要があります。
段階的なアップデートを行う予定です。4.1 への大規模なアップデートを一度に行うのではなく、この作業を6つのステージに分割します。各ステージは1つの Ember アップグレードに焦点を当てます。
| ステージ | サイズ | アップデート |
|---|---|---|
| 1 | size-l | Ember 3.15 → Ember 3.16 |
| 2 | size-m | Ember 3.16 → Ember 3.25 |
| 3 | size-xl | Ember 3.25 → Ember 3.26 (パート1 - 一般) Ember 3.25 → Ember 3.26 (パート2 - テンプレート) Ember 3.25 → Ember 3.26 (パート3 - jQuery) Ember 3.25 → Ember 3.26 (パート4 - Octane 準備) Ember 3.25 → Ember 3.26 (パート5 - Octane) |
| 4 | size-l | Ember 3.26 → Ember 3.27 (パート1 - 一般) Ember 3.26 → Ember 3.27 (パート2 - RenderTemplate) Ember 3.26 → Ember 3.27 (パート3 - レガシービルトインコンポーネント) |
| 5 | size-s | Ember 3.27 → Ember 3.28 |
| 6 | size-s | Ember 3.28 → Ember 4.1 |
これらの特定のバージョンを選択したのは、それらが導入する非推奨機能と作業量、およびそれに伴うリスクに基づいています。
より明確にするために、これらをさらに詳しく分解してみましょう。
アップデートごとの非推奨機能
ステージ 1 (size-l)
Ember 3.15 → Ember 3.16
このアップデートは1つの非推奨機能のみを導入します。
-
ember-CLI resolver を使用し、レガシーなグローバル resolver を使用しない
- 期限: 4.0.0 - size-lDiscourse には独自の resolver があり、現在
Ember.DefaultResolverを拡張しています。推奨される修正は、カスタム resolver をすべて廃止し、Ember-CLI の resolver を使用することです。これは言うは易し、行うは難しで、プラグインやテーマを処理するためのかなりのカスタムロジックを持っているためです。
代わりに
Ember.DefaultResolverを拡張するのではなく、Ember-CLI resolver を拡張するという妥協案が機能します。
ステージ 2 (size-m)
Ember 3.16 → Ember 3.25
このアップデートは8つの非推奨機能を導入します。
-
@ember/string#locおよび{{loc}} 期限: 4.0.0 - 
-
Without for - Ember のビルトイン非推奨機能
期限: 4.0.0 - -
Without since - Ember のビルトイン非推奨機能
期限: 4.0.0 - -
tryInvoke from @ember/utils
期限: 4.0.0 - -
Meta Destruction APIs
- 期限: 3.25.0 - これらは使用していないため、ここでは何も行う必要はありません。
-
Ember getter を使用し、undefined を明示的にチェックする - 期限: 4.0.0 - size-sこれは単純な非推奨機能です。コードベースからgetWithDefaultを削除するだけでよく、使用している場所はわずかです。 -
String prototype extensions - 期限: 4.0.0 - size-mこれも単純でリスクの低い変更ですが、Ember の拡張された文字列プロトタイプをかなり多くの場所で使用しています。簡単な確認によると、コアとプラグイン/テーマの間で約 100 箇所以下で使用しているようです。これらを更新した後、次のような設定で Ember がそのプロトタイプを拡張しないようにする必要があります。EXTEND_PROTOTYPES: { String: false }を environment ファイルに追加します。
-
htmlSafeとisHTMLSafeを @ember/string からインポートする - 期限: 4.0.0 - size-mこのアップデートでは #7 と大きな重複があり、単純でリスクが低いはずです。
ステージ 3 (size-xl)
3.25 から 3.26 へのアップグレードはかなり複雑です。ここで大部分の「追いつき」を行います。合計16の非推奨機能があります。このアップデートを5つのパートに分割し、すべての非推奨機能が処理された後にのみバージョンを上げる予定です。
Ember 3.25 → Ember 3.26 (パート1 - 一般)
このパートは、比較的処理しやすい9つの非推奨機能に対応します。
-
Array Observers
- 期限: 4.0.0 - -
Component Manager Capabilities
- 期限: 4.0.0 - -
Modifier Manager Capabilities
- 期限: 4.0.0 - -
Optional Feature: application-template-wrapper
- 期限: 4.0.0 - -
classBinding and classNameBindings as args in templates
- 期限: 4.0.0 - これらは使用していないため、何も行う必要はありません。
-
Transition methods of routes and controllers
- 期限: 5.0.0 - size-mこの非推奨機能は
routesとcontrollersからいくつかのメソッドを削除します。複雑な変更に見えるかもしれませんが、実際には単純です。必要な場合にのみRouterをサービスとして注入し、そこから呼び出すようにすればよいです。難しい点は、これらを多くの場所で使用しており、すべてを更新する必要があることです。 -
Browser Support Policy - 期限: 4.0.0 - size-s~~これは比較的単純な変更です。Ember は 4.0 以降 IE11 をサポートしなくなります。良い点は、私たちはすでに長い間 IE11 をサポートしていないことです。変更が必要なことは、本番環境で IE11 向けのトランスパイルを停止することだけです。
discourse/app/assets/javascripts/discourse/config/targets.js at 1472e47aae5bfdfb6fd9abfe89beb186c751f514 · discourse/discourse · GitHubいくつかの基本的なテストを行い、この変更により本番環境の Ember-CLI インストールでメインバンドルとベンダーバンドルから約 60kb (gzip) または約 6% を節約できることがわかりました。 -
{{hasBlock}} and {{hasBlockParams}} - 期限: 4.0.0 - size-sこれらをいくつかの場所で使用しています。これは単純でリスクの低いリネームです。 -
{{with}}helper - 期限: 4.0.0 - size-sこれはほとんど使用していませんが、修正が必要です。{{let}}または{{if}}/{{else}}の組み合わせに置き換えるだけです。
Ember 3.25 → Ember 3.26 (パート2 - テンプレート)
このパートは主に .hbs テンプレートに関連する非推奨機能に焦点を当てます。ここでは3つの非推奨機能に注目する必要があります。
-
Property Fallback Lookup
- 期限: 4.0.0 - size-lEmber 4.0 からこれは機能しなくなります。
Hello, {{name}}!テンプレートにプロパティがある場合、次のように先頭に
thisを付けて参照する必要があります。Hello, {{this.name}}!これはすべてのテンプレートで行う必要があります。ここでの痛みを軽減する方法があります。ember-no-implicit-this-codemod を試して、どこまで進められるか見てみましょう。
1 PR につき 1 ファイルの変更を制限することに賛成です。これにより、レビューが容易になり、問題が発生した場合のロールバックも容易になります。
-
Accessing named args via {{attrs}}
- 期限: 4.0.0 size-xl{{attrs}}オブジェクトは Ember 4.0 で削除されます。変更自体は非常に単純で、Ember の例はかなり優れています。変更前:
{{attrs.foo}} {{this.attrs.foo.bar}} {{deeply (nested attrs.foobar.baz)}}変更後:
{{@foo}} {{@foo.bar}} {{deeply (nested @foobar.baz)}}これはすべてのテンプレートで行う必要があります。この変更をテンプレートを角括弧構文に変換することと組み合わせることができます。私は角括弧の大きなファンで、標準のカスタムウェブコンポーネント構文に非常に近いからです。
ここでの進捗を早める可能性があるのは ember-angle-brackets-codemod です。これを実験して、どこまで進められるか見てみましょう。非推奨機能を処理し、輝く角括弧構文を提供してくれます。
このパートの #1 と同様に、1 PR につき 1 テンプレートを修正してテストすることに賛成です。
-
<LinkTo>positional arguments - 期限: 4.0.0 - size-mこれも混乱を減らすことを目的とした非推奨機能です。link-to で位置引数を使用している場所がいくつかあります。これらを次のように修正できます。
変更前:
{{link-to "About Us" "about"}} {{#link-to "about"}}About Us{{/link-to}} {{#link-to "post" @post}}Read {{@post.title}}...{{/link-to}}変更後 (角括弧を使用):
<LinkTo @route="about">About Us</LinkTo> <LinkTo @route="about">About Us</LinkTo> <LinkTo @route="post" @model={{@post}}>Read {{@post.title}}...</LinkTo>
Ember 3.25 → Ember 3.26 (パート3 - jQuery)
これについてあなたがすでに知らないことはほとんどありません。新しい Ember アプリは jQuery を使用しておらず、Ember 4.0 で削除されます。
このパートでは1つの非推奨機能に焦点を当てます。
-
Optional Feature: jquery-integration
- 期限: 4.0.0 - size-xl過去数年間で、jQuery の使用を減らすために多大な進歩を遂げてきました。まだ必要な場所があり、特にコンポーザーや使用しているいくつかのベンダーライブラリの依存関係です。この変更の詳細には立ち入りません。要するに、jQuery の使用から離れるべきです。
しかし、強調しておきたいのは、jQuery をどこでも排除しても、Ember 4.0 に準備ができるまでこのオプションを true に設定し続けるべきだということです。制御できないカスタムテーマ/プラグインを持つサイトの移行を円滑にするための計画が必要です。言い換えれば、作業は行いますが、オプションをオフにするに関する非推奨警告と共存します。
Ember 3.25 → Ember 3.26 (パート4 - Octane 準備)
このパートでは、ファイルが Octane に準備できることに焦点を当てます。2つの非推奨機能を処理します。
-
Optional Feature: template-only-glimmer-components
- 期限: 4.0.0 - size-mこれは理論的には単純な変更ですが、このオプションを切り替える前に行う必要がある暗黙的な作業があります。
現在のテンプレートのみコンポーネントが glimmer セマンティクスと互換性があることを確認する必要があります。いくつかのテストを行い、このオプションをオンにするとテストが失敗しました。ここにコアにあるいくつかのテンプレートのみコンポーネントの例を示します。
- app/templates/components/activation-email-form.hbs - app/templates/components/cancel-link.hbs - app/templates/components/categories-with-featured-topics.hbs - app/templates/components/category-name-fields.hbs - app/templates/components/color-input.hbs - app/templates/components/custom-html-container.hbs - app/templates/components/emoji-group-buttons.hbs - app/templates/components/emoji-group-sections.hbs - app/templates/components/empty-state.hbs - app/templates/components/ip-lookup.hbs - app/templates/components/modal-footer-close.hbs - app/templates/components/popup-menu.hbs - app/templates/components/reviewable-created-by-name.hbs - app/templates/components/reviewable-created-by.hbs - app/templates/components/reviewable-field-editor.hbs - app/templates/components/reviewable-field-text.hbs - app/templates/components/reviewable-field-textarea.hbs - app/templates/components/reviewable-field.hbs - app/templates/components/reviewable-flagged-post.hbs - app/templates/components/reviewable-post-header.hbs - app/templates/components/reviewable-post.hbs - app/templates/components/reviewable-scores.hbs - app/templates/components/reviewable-tags.hbs - app/templates/components/reviewable-topic-link.hbs - app/templates/components/score-value.hbs - app/templates/components/selected-posts.hbs - app/templates/components/subcategories-with-featured-topics.hbs - app/templates/components/text-overflow.hbs - app/templates/components/user-fields/confirm.hbs - app/templates/components/user-fields/dropdown.hbs - app/templates/components/user-fields/multiselect.hbs - app/templates/components/user-fields/text.hbs - app/templates/components/user-profile-avatar.hbs - app/templates/components/user-summary-users-list.hbsまた、Admin/テーマ/プラグインのテンプレートを確認し、このオプションをリリースする前にすべてが機能することを確認する必要があります。
頭の中で、生の
.hbrテンプレートがこれにどのように適合するかは正確にはわかりません。ただし、@david は glimmer ベースのトピックリストに取り組んでいます。したがって、生のテンプレートを完全に排除できるかもしれません。 -
Implicit Injections
- 期限: 4.0.0 size-xl暗黙的な注入を至る所で使用しています。次のように初期化子で行います。
discourse/app/assets/javascripts/discourse/app/pre-initializers/inject-discourse-objects.js at ac79c5efc61d259705eeb487ca21d0ec3c535807 · discourse/discourse · GitHubEmber は暗黙的な注入から離れています。推奨される進路は、可能な限り多くのオブジェクトをサービスに変換し、必要な場所で明示的に注入することです。もちろん、サービスが最適ではないいくつかのケースがあるかもしれません。そのような場合、必要なときに次のように直接オブジェクトを検索できます。
getOwner(this).lookup('thing:main')もう一つのオプション（パフォーマンスへの影響に応じて）は、Ember クラスを独自の Discourse クラスでラップすることです。その後、アプリ全体でこのクラスを使用します。
GlimmerComponent Classのように。
discourse/app/assets/javascripts/discourse/app/components/glimmer.js at fa0c796baf9a7f64a3b27823b1aa4b370a74c3eb · discourse/discourse · GitHub これにより、このタスクは size-l または size-m になります。いずれにせよ、この変更にはいくつかの検討が必要です。
Ember 3.25 → Ember 3.26 (パート5 - Octane)
これは 3.25 → Ember 3.26 アップグレードの最終段階です。この時点で1つの非推奨機能が残りますが、それは大きなものです。
-
Edition: Classic
- 期限: 4.0.0 - size-xlバージョンを Octane に切り替える前に、クラスをネイティブクラスに変換し、コンポーネントを Glimmer コンポーネントに変換する時間を費やしたいと思います。少しの痛みが伴いますが、それは価値があります。ember-native-class-codemod がその痛みの一部を軽減するはずです。どこまで進められるか見てみましょう。
考慮すべき点やワークフローの問題がたくさんあります。強調したいのは、テンプレートで述べたのと同じ流れに従うことです - 1 PR につき 1 コンポーネントを修正してテストします。
ステージ 4
Ember 3.26 → Ember 3.27 アップグレードは12の非推奨機能を導入します。これらを3つのパートに分割することを提案します。すべての非推奨機能が処理された後にバージョンを上げます。
Ember 3.26 → Ember 3.27 (パート1 - 一般)
-
Reopening Classic Component Super Class
- 期限: 4.0.0 - -
Class-based template compilation plugins
- 期限: 4.0.0 - -
LinkTo @disabled-when argument
- 期限: 4.0.0 - これらは使用していないと思うので、ここでは何も行う必要はありません。
-
Deprecate
Route#disconnectOutlet - 期限: 4.0.0 - size-sこれは1つの場所でしか行っていません。それは
build-category-routeで、修正は単純です。 -
Invoking Helpers Without Arguments and Parentheses In Named Argument Positions
- 期限: 4.0.0 - size-sどこでもこれを行っていないと思うので、時期が来たら確認します。本質的には、引数を渡さずにヘルパーを呼び出すことです。
たとえそのようなものを使用しても、括弧を追加するだけです。したがって、
<SomeComponent @arg={{someHelper}} />は
<SomeComponent @arg={{(someHelper)}} />になります。
someHelperの周りの括弧に注意してください。 -
Run loop and computed dot access
- 期限: 4.0.0 - size-m.を使用してcomputed関数にアクセスしています。decoratorsアドオンでこれを行います。例えば、次のようになります。
discourse/app/assets/javascripts/discourse-common/addon/utils/decorators.js at b05fddaa7ce3968ffc70cd8d4bf290e15d06eb11 · discourse/discourse · GitHubまた、いくつかの散在するワンオフもあります。私がわかる限り、これらを修正することは主にインポート方法を修正することです。
したがって、
computed.filterは次のようにインポートする必要があります。import { filter } from '@ember/object/computed';外部ベンダーの
buffered-proxyアドオンのバージョンは.を使用してcomputed関数にアクセスしています。これを上げる必要があります。また、いくつかの場所で
.を使用してrun関数にアクセスしています。ただし、同じ修正が適用されます。インポート方法を更新する必要があります。特にテーマとプラグインは、runでこれを行う場所がかなりあるかもしれません。 -
Deprecate the Ember Global
- 期限: 4.0.0 - (#size ?)Emberは 4.0 以降グローバルコンテキストでは利用できなくなります。詳細な調査なしにここでの作業量/影響を推定するのは難しいです。ただし、@cvx がこのパターンを排除するために多大な作業を行っていることは知っています。
Ember 3.26 → Ember 3.27 (パート2 - renderTemplate)
このパートは1つの非推奨機能にのみ焦点を当てます。
-
Deprecate
Route#renderTemplate - 期限: 4.0.0 - size-l要するに、Ember 4.0 では名前付きアウトレットを使用できません。したがって、これは機能しません。
{{outlet "thing"}}コアだけで
renderTemplateを約 30 の場所で使用しています。アップグレード自体はかなり単純です。{{#in-element}}と、以前の名前付きアウトレットでレンダリングしていたもののプレースホルダーとして単純な空の HTML 要素を使用できます。
Ember 3.26 → Ember 3.27 (パート3 - レガシービルトインコンポーネント)
このパートはビルトインレガシーコンポーネントに焦点を当て、4つの非推奨機能を処理します。
- Importing Legacy Built-in Components - 期限: 4.0.0
- Built-in Components Legacy Arguments - 期限: 4.0.0
- Built-in Components Legacy HTML Attribute Arguments - 期限: 4.0.0
- Reopening Legacy Built-in Components - 期限: 4.0.0
これらにサイズを追加しなかったのは… それは本当に依存します。説明しましょう。
Checkbox、TextField、TextArea、LinkComponent などのレガシービルトインコンポーネントは Ember 4.0 で削除されます。これらをかなり多くの場所で使用しており、いくつかの非推奨パターンも使用しています。
Ember はそれらを引き続き使用できるアップグレードパスを提供しますが、異なる方法でインポートする必要があります。ただし、Ember から更新を受け取らず、凍結されたままになります。すべてを排除できることを願っていますが、それは少し複雑かもしれません。この変更は時期が来たときにさらに議論が必要です。
ステージ 5
Ember 3.27 → Ember 3.28
これはバージョンアップのみなので size-s です。3.28 は 3.x 開発サイクルの最後の LTS リリース です。3.27 以降に新しい非推奨機能は導入されず、状況が落ち着くまで数週間停止するのに適したバージョンです。
3.28 LTS は 2022 年 8 月までサポートされます（バグ修正とセキュリティパッチの両方）
この「休憩」にはいくつかの利点があります。
- 問題が発生するかどうかを確認する時間が得られます
- 安定したバージョンをリリースする場合、それは 3.28 上になります
- 自己管理のテーマとプラグインに関する必要な告知を行う時間が得られます
- jQuery → no jQuery が可能な限りスムーズになることを確認する時間が得られます。
ステージ 6
数週間経過した後、ようやくバージョンを Ember 4 に上げることができます。
Ember 3.28 → Ember 4.1
これで、3.x サイクルの最後の非推奨機能として、オプションの jQuery 統合をオフに切り替えることができます。
このアップデートは2つの小さな非推奨機能を導入します。
-
Deprecate Ember.assign - 期限: 5.0.0 - size-sコアでは使用していませんが、テーマ/プラグインを確認する必要があります。いずれにせよ、単純なリネームです。 -
AutoLocation Class
- 期限: 5.0.0 - size-s理論的には、Ember 環境ファイルで
locationType: 'auto'をlocationType: 'history'に変更するだけで、そのまま機能するはずです。
ワークフロー
冒頭で述べたように、これらのアップデートには非常に注意深く対応します。すべての公式プラグイン/テーマを各アップデートでテスト/修正/固定し、人気のある非公式プラグイン/テーマにも PR を送信します。
ここでの目標は、開発を遅らせたり頭痛の種を作ったりすることではありません。したがって、PR は厳密にスコープされ、1 PR につき 1 つの変更で、大きすぎないものになります。
理想的な世界では、すべての変更は他の人の仕事を中断せずにバックグラウンドで発生します。これが、PR を短く簡潔に保つ理由です。また、混合パターンはあまり好きではありません。したがって、ファイルごとに中間状態に陥りたくありません。コンポーネントは classic か Glimmer のどちらかであり、テンプレートは波括弧か角括弧のどちらかを使用し、その中間はありません。
このロードマップが明確であることを願っています。冒頭で述べたように、これは一般的なトップレベルの概要に過ぎません。不明確、不正確、または気にならないことがあれば、ぜひお知らせください。
）？
