Aktualisierung von Discourse auf Ember 4

Wir möchten die in Discourse verwendete Ember-Version aktualisieren.

Derzeit sind wir bei 3.15 und möchten zu 4.1 wechseln.

Wir haben uns zum Ziel gesetzt, diese Arbeiten bis Ende dieses Jahres abzuschließen. Bitte beachte, dass dieses Thema eine Roadmap ist und alle Pläne und Schätzungen vorläufig sind. Dieses Thema ist nicht dafür gedacht, umfangreiche Diskussionen über bestimmte Upgrades oder Änderungen aufzunehmen. Halten wir die Diskussion hier also etwas fokussiert. Fragen dazu, wie sich diese Updates auf deine Site/dein Plugin/dein Theme auswirken, sind Off-Topic. Die geplanten Änderungen betreffen zu 100 % das Frontend (Ember-App).

Wir werden bei den eingeführten Änderungen äußerst vorsichtig sein. Alle offiziellen Plugins/Themes werden aktualisiert (einschließlich jeglicher individueller Arbeit, die CDCK für seine Kunden geleistet hat). Wir werden auch PRs einreichen, um alle beliebten inoffiziellen Plugins/Themes zu aktualisieren.

Keine Sorge, wenn du ein benutzerdefiniertes Plugin/ein benutzerdefiniertes Theme hast, das du für deine Site erstellt hast. Wir werden Deprecation-Warnungen hinzufügen und rechtzeitig die notwendigen Ankündigungen treffen, um dir genug Zeit zu geben, alle erforderlichen Änderungen vorzunehmen. Wir werden dich bei Bedarf auch durch diese Änderungen führen.

Beginnen wir mit den Zielen. Wir wollen natürlich zur höchsten verfügbaren Version wechseln, aber wir müssen Zwischenziele zwischen jetzt und unserem Endziel setzen.

Wir planen inkrementelle Updates. Anstatt eines großen Updates auf 4.1 werden wir diese Arbeit in sechs Phasen aufteilen. Jede Phase konzentriert sich auf ein Ember-Update.

Phase Größe Updates
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 (Teil 1 - Allgemein)
Ember 3.25 → Ember 3.26 (Teil 2 - Templates)
Ember 3.25 → Ember 3.26 (Teil 3 - jQuery)
Ember 3.25 → Ember 3.26 (Teil 4 - Octane-Vorbereitung)
Ember 3.25 → Ember 3.26 (Teil 5 - Octane)
4 size-l Ember 3.26 → Ember 3.27 (Teil 1 - Allgemein)
Ember 3.26 → Ember 3.27 (Teil 2 - RenderTemplate)
Ember 3.26 → Ember 3.27 (Teil 3 - Legacy-eingebaute Komponenten)
5 size-s Ember 3.27 → Ember 3.28
6 size-s Ember 3.28 → Ember 4.1

Die Auswahl dieser spezifischen Versionen basiert ausschließlich auf den Deprecations und dem Umfang der Arbeit, die sie mit sich bringen – und dem implizierten Risiko.

Also, lassen wir uns das für mehr Klarheit genauer ansehen.

Deprecations pro Update

Phase 1 (size-l)

Ember 3.15 → Ember 3.16

Dieses Update führt nur eine Deprecation ein.

  1. Verwende ember-CLI-Resolver statt Legacy-Global-Resolver :link: - bis: 4.0.0 - size-l

    Discourse hat einen eigenen benutzerdefinierten Resolver, der derzeit Ember.DefaultResolver erweitert.

    Die empfohlene Lösung ist, alle benutzerdefinierten Resolver zu entfernen und den Ember-CLI Resolver zu verwenden. Das ist leichter gesagt als getan, da wir eine ganze Menge benutzerdefinierter Logik zur Handhabung von Plugins und Themes haben.

    Ein Kompromiss, der funktioniert, ist, den Ember-CLI-Resolver zu erweitern, anstatt Ember.DefaultResolver zu erweitern.

Phase 2 (size-m)

Ember 3.16 → Ember 3.25

Dieses Update führt acht Deprecations ein.

  1. @ember/string#loc und {{loc}} :link: bis: 4.0.0 - :heavy_check_mark:

  2. Without for - Eingebaute Deprecation von Ember :link: bis: 4.0.0 - :heavy_check_mark:

  3. Without since - Eingebaute Deprecation von Ember :link: bis: 4.0.0 - :heavy_check_mark:

  4. tryInvoke aus @ember/utils :link: bis: 4.0.0 - :heavy_check_mark:

  5. Meta-Destruction-APIs :link: - bis: 3.25.0 - :heavy_check_mark:

    Wir verwenden keine davon, also gibt es hier nichts zu tun.

  1. Verwende Ember-Getter und prüfe explizit auf undefined :link: - bis: 4.0.0 - size-s

    Dies ist eine einfache Deprecation. Wir müssen nur getWithDefault in unserem Codebase entfernen, und es gibt nur wenige Stellen, an denen wir es verwenden.

  2. String-Prototyp-Erweiterungen :link: - bis: 4.0.0 - size-m

    Dies ist auch ein einfacher, risikoarmer Austausch, aber wir verwenden Embers erweiterten String-Prototyp an ziemlich vielen Stellen. Bei einer schnellen Überprüfung glaube ich, dass wir etwa < 100 Stellen haben, an denen wir das zwischen Core und Plugins/Themes tun. Sobald wir diese aktualisiert haben, sollten wir Ember auch davon abhalten, diesen Prototyp mit etwas wie diesem zu erweitern.

    EXTEND_PROTOTYPES: {
       String: false
    }
    

    in unserer environment Datei.

  3. Importieren von htmlSafe und isHTMLSafe aus @ember/string :link: - bis: 4.0.0 - size-m

    Hier gibt es viel Überschneidung mit #7 in diesem Update, und es sollte straightforward und risikoarm sein.

Phase 3 (size-xl)

Das Upgrade von 3.25 auf 3.26 ist ziemlich aufwendig. Hier holen wir den Großteil des „Nachholens“ ein. Es gibt insgesamt sechzehn Deprecations. Wir werden dieses Update in fünf Teile aufteilen – wobei wir erst nach der Bearbeitung aller Deprecations eine Versionsänderung vornehmen.

Ember 3.25 → Ember 3.26 (Teil 1 - Allgemein)

Dieser Teil befasst sich mit neun Deprecations, die relativ einfacher zu handhaben sind.

  1. Array-Observers :link: - bis: 4.0.0 - :heavy_check_mark:

  2. Komponenten-Manager-Fähigkeiten :link: - bis: 4.0.0 - :heavy_check_mark:

  3. Modifier-Manager-Fähigkeiten :link: - bis: 4.0.0 - :heavy_check_mark:

  4. Optionale Funktion: application-template-wrapper :link: - bis: 4.0.0 - :heavy_check_mark:

  5. classBinding und classNameBindings als Argumente in Templates :link: - bis: 4.0.0 - :heavy_check_mark:

    Hier gibt es nichts zu tun; wir verwenden diese nicht.

  1. Übergangsmethoden von Routen und Controllern :link: - bis: 5.0.0 - size-m

    Diese Deprecation entfernt ein paar Methoden aus routes und controllers. Es mag wie eine aufwendige Änderung aussehen, aber sie sollte straightforward sein. Wir müssten nur den Router als Service injizieren und sie von dort aus aufrufen – wenn erforderlich. Der schwierige Teil ist, dass wir diese an vielen Stellen verwenden, und alle müssen aktualisiert werden.

  2. Browser-Support-Richtlinie :link: - bis: 4.0.0 - size-s

    ~~Dies sollte eine relativ einfache Änderung sein. Ember wird ab 4.0 keinen Support für IE11 mehr bieten. Das Schöne daran ist, dass wir es ohnehin schon seit langer Zeit nicht unterstützen. Das Einzige, was wir ändern müssen, ist, die Transpilation für IE11 in der Produktion zu stoppen.
    discourse/app/assets/javascripts/discourse/config/targets.js at 1472e47aae5bfdfb6fd9abfe89beb186c751f514 · discourse/discourse · GitHub

    Ich habe einige grundlegende Tests durchgeführt, und diese Änderung wird uns etwa 60kb (gzip) oder ~6 % unserer Haupt- und Vendor-Bundles in Produktions-Ember-CLI-Installationen sparen.

  3. {{hasBlock}} und {{hasBlockParams}} :link: - bis: 4.0.0 - size-s

    Wir verwenden diese an ein paar Stellen. Dies ist eine einfache, risikoarme Umbenennung.

  4. {{with}}-Helper :link: - bis: 4.0.0 - size-s

    Wir verwenden diesen selten, aber er muss dennoch behoben werden. Wir müssen sie nur austauschen und {{let}} oder eine Kombination aus {{if}} / {{else}} verwenden

Ember 3.25 → Ember 3.26 (Teil 2 - Templates)

Dieser Teil wird sich hauptsächlich auf Deprecations konzentrieren, die .hbs-Templates betreffen. Hier gibt es drei Deprecations, auf die wir uns konzentrieren müssen.

  1. Eigenschafts-Fallback-Suche :link: - bis: 4.0.0 - size-l

    Ab Ember 4.0 wird dies nicht mehr funktionieren.

    Hallo, {{name}}!
    

    Wenn wir eine Eigenschaft in einem Template haben, müssen wir sie mit einem vorangestellten this wie folgt suchen

    Hallo, {{this.name}}!
    

    Das müssten wir mit all unseren Templates machen. Es gibt Möglichkeiten, den Schmerz hier zu reduzieren. Wir können versuchen, den ember-no-implicit-this-codemod zu verwenden und sehen, wie weit er uns bringt.

    Ich bin dafür, Änderungen auf 1 Datei pro PR zu beschränken. Das macht es einfach zu überprüfen – und zurückzusetzen, wenn etwas schiefgeht.

  2. Zugriff auf benannte Argumente über {{attrs}} :link: - bis: 4.0.0 size-xl

    Das {{attrs}}-Objekt wird in Ember 4.0 entfernt. Die Änderung selbst ist sehr straightforward, und Embers Beispiel ist ganz nett.

    Vorher:

    {{attrs.foo}}
    {{this.attrs.foo.bar}}
    {{deeply (nested attrs.foobar.baz)}}
    

    Nachher:

    {{@foo}}
    {{@foo.bar}}
    {{deeply (nested @foobar.baz)}}
    

    Das müssten wir für all unsere Templates tun. Wir können diese Änderung mit der Konvertierung der Templates in die Winkelklammer-Syntax kombinieren. Ich bin ein großer Fan von Winkelklammern, weil sie viel näher an der Standard-Syntax für benutzerdefinierte Web-Komponenten sind.

    Etwas, das unseren Fortschritt hier beschleunigen könnte, ist der ember-angle-brackets-codemod. Wir müssen damit experimentieren und sehen, wie weit er uns bringt. Er behandelt die Deprecation und gibt uns die schicke Winkelklammer-Syntax.

    Ähnlich wie bei #1 in diesem Teil bevorzuge ich auch, Template für Template zu reparieren und zu testen, und zwar pro PR.

  3. <LinkTo>-Positional-Argumente :link: - bis: 4.0.0 - size-m

    Dies ist auch eine Deprecation, die darauf abzielt, Verwirrung zu reduzieren. Es gibt ein paar Stellen, an denen wir Positional-Argumente bei link-to verwenden. Wir können diese wie folgt beheben

    Vorher:

    {{link-to "Über uns" "about"}}
    {{#link-to "about"}}Über uns{{/link-to}}
    {{#link-to "post" @post}}Lesen {{@post.title}}...{{/link-to}}
    

    Nachher (mit Winkelklammern):

     <LinkTo @route="about">Über uns</LinkTo>
     <LinkTo @route="about">Über uns</LinkTo>
     <LinkTo @route="post" @model={{@post}}>Lesen {{@post.title}}...</LinkTo>
    

Ember 3.25 → Ember 3.26 (Teil 3 - jQuery)

Da gibt es nicht viel zu sagen, was du nicht schon weißt. Neue Ember-Apps verwenden kein jQuery, und es wird in Ember 4.0 entfernt.

In diesem Teil konzentrieren wir uns auf eine Deprecation.

  1. Optionale Funktion: jquery-integration :link: - bis: 4.0.0 - size-xl

    In den letzten Jahren haben wir enorme Fortschritte bei der Reduzierung unserer jQuery-Nutzung gemacht. Es gibt immer noch Stellen, an denen wir es brauchen, insbesondere im Composer und als Abhängigkeit für einige Vendor-Bibliotheken, die wir verwenden. Ich will hier nicht auf die Details dieser Änderung eingehen. Kurz gesagt, wir sollten uns von der Verwendung von jQuery verabschieden.

    Ich möchte jedoch hervorheben, dass wir diese Option auch dann auf true setzen sollten, wenn wir jQuery ÜBERALL entfernen, bis wir für Ember 4.0 bereit sind. Wir brauchen einen Plan, um den Übergang für Sites mit benutzerdefinierten Themes/Plugins, die wir nicht kontrollieren, zu erleichtern. Mit anderen Worten: Lassen wir die Arbeit erledigen, aber leben wir mit der Deprecation-Warnung darüber, die Option auszuschalten.

Ember 3.25 → Ember 3.26 (Teil 4 - Octane-Vorbereitung)

In diesem Teil sollten wir uns darauf konzentrieren, unsere Dateien für Octane vorzubereiten. Wir werden zwei Deprecations bearbeiten.

  1. Optionale Funktion: template-only-glimmer-components :link: - bis: 4.0.0 - size-m

    Theoretisch ist dies eine einfache Änderung, aber es gibt implizite Arbeit, die wir leisten müssen, bevor wir diese Option umschalten können.

    Wir müssen sicherstellen, dass unsere aktuellen template-only-Komponenten mit Glimmer-Semantik funktionieren. Ich habe einige Tests durchgeführt, und unsere Tests sind mit dieser Option aktiviert gescheitert. Hier ist eine Beispiel-Liste einiger template-only-Komponenten, die wir im Core haben

    - 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
    

    Wir müssen auch unsere Admin/Theme/Plugin-Templates überprüfen und sicherstellen, dass alles funktioniert, bevor wir diese Option ausliefern.

    Mir ist nicht ganz klar, wie unsere rohen .hbr-Templates hier hineinpassen werden. Allerdings hat @david an glimmer-basierten Themenlisten gearbeitet. Vielleicht können wir rohe Templates ganz abschaffen.

  2. Implizite Injektionen :link: - bis: 4.0.0 size-xl

    Wir verwenden implizite Injektionen überall. Wir tun dies in einem Initializer wie folgt
    discourse/app/assets/javascripts/discourse/app/pre-initializers/inject-discourse-objects.js at ac79c5efc61d259705eeb487ca21d0ec3c535807 · discourse/discourse · GitHub

    Ember verabschiedet sich von impliziten Injektionen. Der bevorzugte Weg ist, so viele unserer Objekte wie möglich in Services umzuwandeln und sie explizit dort zu injizieren, wo sie benötigt werden. Natürlich gibt es vielleicht ein paar Dinge, bei denen ein Service nicht ideal ist. In diesen Fällen können wir diese Objekte direkt nachschlagen, wenn sie benötigt werden, wie folgt

    getOwner(this).lookup('thing:main')
    

    Eine weitere Option, die wir haben (je nach Performance-Auswirkungen), ist, die Ember-Klassen mit unserer eigenen Discourse-Klasse zu umschließen. Wir würden dann unsere Klasse in der gesamten App verwenden. Ähnlich wie wir es mit der GlimmerComponent Class tun
    discourse/app/assets/javascripts/discourse/app/components/glimmer.js at fa0c796baf9a7f64a3b27823b1aa4b370a74c3eb · discourse/discourse · GitHub. Dies würde diese Aufgabe zu einer size-l oder sogar size-m machen

    Auf jeden Fall wird diese Änderung etwas Nachdenken erfordern.

Ember 3.25 → Ember 3.26 (Teil 5 - Octane)

Dies ist die letzte Etappe des 3.25 → Ember 3.26 Upgrades. Wir werden zu diesem Zeitpunkt nur noch eine Deprecation haben, aber sie ist eine große.

  1. Edition: Classic :link: - bis: 4.0.0 - size-xl

    Bevor wir unsere Version auf Octane umschalten können, möchte ich Zeit damit verbringen, unsere Klassen in native Klassen und unsere Komponenten in Glimmer-Komponenten umzuwandeln. Es wird ein bisschen Schmerz geben, aber es lohnt sich. Der ember-native-class-codemod sollte etwas von diesem Schmerz lindern. Wir werden sehen, wie weit er uns bringt.

    Es gibt viele Überlegungen und Workflow-Probleme, die man im Auge behalten muss. Das Einzige, was ich hervorheben möchte, ist, dass es dem gleichen Fluss folgen wird, den ich für Templates erwähnt habe – repariere und teste 1 Komponente pro PR.

Phase 4

Das Ember 3.26 → Ember 3.27 Update führt zwölf Deprecations ein. Ich schlage vor, wir teilen sie in drei Teile auf. Wir werden die Versionsänderung vornehmen, nachdem alle Deprecations bearbeitet wurden.

Ember 3.26 → Ember 3.27 (Teil 1 - Allgemein)

  1. Wiedereröffnung der Classic-Komponenten-Superklasse :link: - bis: 4.0.0 - :heavy_check_mark:

  2. Klassenbasierte Template-Kompilierungs-Plugins :link: - bis: 4.0.0 - :heavy_check_mark:

  3. LinkTo @disabled-when-Argument :link: - bis: 4.0.0 - :heavy_check_mark:

    Ich glaube nicht, dass wir irgendeines davon verwenden, also gibt es hier nichts zu tun.

  1. Deprecate Route#disconnectOutlet :link: - bis: 4.0.0 - size-s

    Wir tun dies nur an einer Stelle. Es ist die build-category-route, und es sollte straightforward sein, es zu beheben.

  2. Aufrufen von Helfern ohne Argumente und Klammern in benannten Argumentpositionen :link: - bis: 4.0.0 - size-s

    Ich glaube nicht, dass wir das irgendwo tun, aber ich werde es bestätigen, wenn die Zeit kommt. Im Wesentlichen den Aufruf eines Helfers, ohne ihm irgendwelche Argumente zu übergeben.

    Selbst wenn wir so etwas verwenden, müssten wir nur Klammern hinzufügen. Also, dies

    <SomeComponent @arg={{someHelper}} />
    

    wird zu

    <SomeComponent @arg={{(someHelper)}} />
    

    beachte die Klammern um someHelper

  3. Run loop und computed dot access :link: - bis: 4.0.0 - size-m

    Wir verwenden ., um auf computed-Funktionen in unserem decorators-Addon zuzugreifen. Sie sehen zum Beispiel so aus
    discourse/app/assets/javascripts/discourse-common/addon/utils/decorators.js at b05fddaa7ce3968ffc70cd8d4bf290e15d06eb11 · discourse/discourse · GitHub

    Wir haben auch hier und da ein paar einsame Einzelfälle. Soweit ich das beurteilen kann, geht es beim Beheben dieser hauptsächlich darum, zu korrigieren, wie wir sie importieren.

    Also, computed.filter sollte stattdessen so importiert werden.

    import { filter } from '@ember/object/computed';
    

    Unsere Version des externen Vendor-Addons buffered-proxy verwendet ., um auf computed-Funktionen zuzugreifen; wir müssten es bumpen.

    Wir verwenden auch ., um an ein paar Stellen auf run-Funktionen zuzugreifen. Das heißt, die gleiche Korrektur gilt. Wir müssen aktualisieren, wie wir sie importieren. Ich denke, Themes und Plugins haben besonders ziemlich viele Stellen, an denen wir das mit run tun.

  4. Deprecate das Ember-Global :link: - bis: 4.0.0 - (#size ?)

    Ember wird nach 4.0 nicht mehr im globalen Kontext verfügbar sein. Es ist schwierig, den Arbeits-/Auswirkungsumfang hier ohne einen tieferen Blick zu schätzen. Das gesagt, ich weiß, dass @cvx eine Menge Arbeit leistet, um dieses Muster zu beseitigen.

Ember 3.26 → Ember 3.27 (Teil 2 - renderTemplate)

Dieser Teil wird sich nur auf eine Deprecation konzentrieren.

  1. Deprecate Route#renderTemplate :link: - bis: 4.0.0 - size-l

    Kurz gesagt, wir können in Ember 4.0 keine benannten Outlets mehr verwenden. Also, dies wird nicht funktionieren.

    {{outlet "thing"}}
    

    Wir verwenden renderTemplate allein im Core an fast 30 Stellen. Das Upgrade selbst scheint ziemlich straightforward zu sein. Wir können {{#in-element}} und ein leeres HTML-Element als Platzhalter für das verwenden, was wir früher in benannten Outlets gerendert haben.

Ember 3.26 → Ember 3.27 (Teil 3 - Legacy-eingebaute Komponenten)

Dieser Teil wird sich auf eingebaute Legacy-Komponenten konzentrieren und vier Deprecations bearbeiten.

  1. Importieren von Legacy-eingebauten Komponenten :link: - bis: 4.0.0
  2. Eingebaute Komponenten Legacy-Argumente :link: - bis: 4.0.0
  3. Eingebaute Komponenten Legacy-HTML-Attribut-Argumente :link: - bis: 4.0.0
  4. Wiedereröffnung von Legacy-eingebauten Komponenten :link: - bis: 4.0.0

Ich habe keine Größen hinzugefügt, weil… es wirklich darauf ankommt. Lassen Sie mich erklären.

Legacy-eingebaute Komponenten wie Checkbox, TextField, TextArea und LinkComponent werden in Ember 4.0 entfernt. Wir verwenden sie an ziemlich vielen Stellen, und wir verwenden auch einige veraltete Muster darauf.

Ember bietet einen Upgrade-Pfad, der es uns ermöglicht, sie weiterzuverwenden, aber wir müssen sie anders importieren. Sie werden jedoch keine Updates von Ember erhalten und bleiben eingefroren. Ich hoffe, dass wir uns von allen verabschieden können; das könnte jedoch etwas aufwendig sein. Diese Änderung wird mehr Diskussion erfordern, wenn die Zeit kommt.

Phase 5

Ember 3.27 → Ember 3.28

Dies ist ein size-s, da es nur ein Versions-Bump ist. 3.28 ist die letzte LTS-Version im 3.x-Entwicklungszyklus. Sie führt keine neuen Deprecations nach 3.27 ein, und es ist eine gute Version, um für ein paar Wochen innezuhalten, während sich die Dinge beruhigen.

3.28 LTS wird bis August 2022 unterstützt (sowohl Bugfixes als auch Sicherheitspatches)

Diese “Pause” hat einige Vorteile.

  1. Sie gibt uns mehr Zeit, um zu sehen, ob Probleme auftreten
  2. Wenn wir eine stabile Version ausliefern, sollte sie auf 3.28 sein
  3. Sie gibt uns Zeit, um alle notwendigen Ankündigungen bezüglich selbst gewarteter Themes und Plugins zu machen
  4. Sie gibt uns Zeit, um sicherzustellen, dass der Übergang von jQuery zu kein jQuery so reibungslos wie möglich ist.

Phase 6

Nach ein paar Wochen können wir unsere Version endlich auf Ember 4 bumpen

Ember 3.28 → Ember 4.1

Wir können jetzt die optionale jQuery-Integration als letzte Deprecation aus dem 3.x-Zyklus ausschalten.

Dieses Update führt zwei geringfügige Deprecations ein.

  1. Deprecate Ember.assign :link: - bis: 5.0.0 - size-s

    Wir verwenden das nicht im Core, aber wir müssen Themes/Plugins überprüfen. Auf jeden Fall ist es eine einfache Umbenennung.

  2. AutoLocation-Klasse :link: - bis: 5.0.0 - size-s

    Theoretisch müssten wir nur locationType: 'auto' in locationType: 'history' in unserer Ember-Umgebungsdatei ändern, und es sollte einfach funktionieren.

Workflow

Wie ich am Anfang erwähnt habe, werden wir bei diesen Updates sehr vorsichtig sein. Wir werden alle offiziellen Plugins/Themes mit jedem Update testen/fixen/pinnen, und wir werden auch PRs an beliebte inoffizielle Plugins/Themes senden.

Das Ziel hier ist nicht, die Entwicklung zu verlangsamen oder Kopfschmerzen zu verursachen. Also, die PRs sollten streng umrissen sein, mit einer Änderung pro PR und nichts zu Großem.

In einer idealen Welt würden all diese Änderungen im Hintergrund stattfinden, ohne die Arbeit anderer zu unterbrechen. Deshalb planen wir, die PRs kurz und knackig zu halten. Außerdem sind wir nicht sehr an gemischten Mustern interessiert. Also, wir wollen nicht in einem Zwischenzustand auf Dateiebene stecken bleiben. Eine Komponente ist entweder classic oder Glimmer, und ein Template verwendet entweder geschweifte Klammern oder Winkelklammern, nichts dazwischen.

Ich hoffe, diese Roadmap war klar. Wie ich am Anfang erwähnt habe, ist dies nur eine allgemeine oberste Übersicht. Wenn etwas unklar, falsch oder nicht in Ordnung ist, lass es uns bitte wissen.

Core: Alle wurden :white_check_mark:

Plugins:

discourse-events

discourse-data-explorer


@Johani vielleicht nichts, was Ember 4 direkt blockiert, aber Mixins könnten auch auf der Roadmap berücksichtigt werden:

Darüber hinaus unterstützen einige neue Framework-Klassen, wie z. B. Glimmer-Komponenten, Ember-Mixins überhaupt nicht. In Zukunft werden Mixins aus dem Framework entfernt und nicht direkt ersetzt.

Haben wir eine Vorstellung davon, wann die Topic Lists zu Glimmer Components wechseln und Rohvorlagen verwerfen werden?

Ich hoffe, ich kann mich in den nächsten 3-6 Monaten darum kümmern, aber das ist noch nicht in Stein gemeißelt.

Derzeit liegt der Schwerpunkt unseres „Modernising JS“-Teams darauf, Discourse auf Ember 4.x+ zu bringen (3.28 ist jetzt EOL).

Hallo @david,

Interessenshalber, was wäre Ihre Empfehlung bezüglich des Themas? Wir untersuchen, ob wir Discourse einem erheblichen Re-Theming unterziehen sollen (Vereinfachungen, mehr „Social-Media-ähnlich“, weniger entwicklerzentriert, Verwendung von Beiträgen mit Kommentaren anstelle von Threads).

Angesichts des Umfangs der Änderungen, die in den nächsten 6 Monaten am Frontend von Discourse vorgenommen werden sollen, sollten wir möglicherweise warten, bevor wir versuchen, dies zu tun?

Viele Grüße,
Simon

Hallo Simon, es ist schwierig, hier eine definitive Antwort zu geben, da die Zeitachse unsicher ist.

Bei CDCK entwickeln wir weiterhin neue Themes für Kunden gegen die bestehende Version von Core. Größere Änderungen (z. B. eine Neufassung der Themenliste) werden zunächst optional sein, sodass Sie Zeit haben, Dinge anzupassen.

Im Allgemeinen haben Sie einen einfacheren Migrationspfad, wenn Sie „empfohlene“ APIs wie Plugin-Outlets verwenden und keine Vorlagen überschreiben.

Danke @david, das ist hilfreich.

Viele Grüße,
Simon

Wie gehen wir mit Modellmodifikationen um, angesichts von Octanes Glimmer und dem Ansatz „Daten nach unten, Aktionen nach oben“?

Wir haben eine Herausforderung mit Plugin-Outlets, wo wir zuvor eine Zwei-Wege-Bindung hatten, aber wenn wir eine Glimmer-Komponente an ein Outlet anhängen, haben wir diese Option nicht mehr.

Die Zwei-Wege-Bindung über Plugin-Outlets ist ein etabliertes Muster, bei dem wir in einigen Fällen das über das Plugin-Outlet übergebene Modell aktualisieren möchten.

Ich habe diese Empfehlung in den Ember-Dokumenten bemerkt:

Insbesondere:

„Die zweite Option besteht darin, den ember-native-class-codemod für alle verbleibenden Komponenten auszuführen. Dies wandelt sie in Komponenten um, die aus @ember/component importieren, wobei alle gleichen APIs wie klassische Komponenten beibehalten werden, aber nur in der Native-Class-Syntax dargestellt werden.“

Gedanken hierzu sind sehr willkommen.

Die Änderung der Zwei-Wege-Bindung bezieht sich auf die Neuzuweisung von Argumenten, aber Sie können sie immer noch ändern.

Zum Beispiel ist dies in Glimmer-Komponenten nicht erlaubt:

this.args.topic = blah

Aber diese Art von Dingen:

this.args.topic.title = "blah"

ist immer noch möglich.

Tatsächlich glaube ich nicht, dass die Neuzuweisung von Argumenten derzeit in Plugin Outlets möglich ist, da wir {{hash}} verwenden, um die Argumente zu übergeben. Daher erwarte ich in dieser Hinsicht keine Änderungen. :crossed_fingers:

Viele offizielle Themes/Plugins verwenden bereits Glimmer-Komponenten als Plugin-Outlet-Konnektoren, und die aktuellen Dokumente auf Meta beschreiben, wie das geht.

Glimmer-Komponenten bieten zwar eine verbesserte Entwicklererfahrung und verbesserte Leistung. Es ist jedoch erwähnenswert, dass es keinen unmittelbaren Grund gibt, von klassischen Komponenten zu Glimmer-Komponenten zu konvertieren. Klassische Komponenten werden in Ember 5 weiterhin unterstützt.

Das Wichtigste ist im Moment, alle Deprecations-Meldungen in Themes/Plugins zu beheben. Wir werden in den nächsten Wochen/Monaten mehr über Upgrade-Strategien veröffentlichen, aber wir machen gute Fortschritte bei der Vorbereitung des Kerns für das Upgrade. Es gibt sogar einen experimentellen Ember 5.3 Branch von Discourse, den wir seit einigen Wochen mit großem Erfolg auf einer internen Instanz laufen lassen! :tada:

Oh! Das ist sehr interessant, danke!

Verständlicherweise gibt es viel Spielraum für das Upgrade, und ich erkenne an, dass es sehr schwierig ist, dafür einen Zeitplan zu erstellen, aber gibt es schon Fortschritte bei den Themenlisten?

Das gibt es tatsächlich! @cvx arbeitet aktiv daran, und es gibt bereits eine Site-Einstellung „experimental glimmer topic list groups“, falls Sie sie ausprobieren möchten.

Allerdings haben wir noch nicht begonnen, den Anpassungsaspekt davon zu untersuchen. Versuchen Sie daher bitte nicht, Themes/Plugins dagegen zu entwickeln. Wir hoffen, in den nächsten Wochen daran zu arbeiten.

Ausgezeichneter Fortschritt!

Ja, es wäre sehr willkommen, die Anpassungsoptionen so offen wie möglich zu halten.

Wir sehen viele Anfragen nach sehr unterschiedlichen Layouts für das Topic List Item im Vergleich zum Standard.

Mir sind die neuen Deprecation Notices aufgefallen, z. B.:

„Verwenden Sie stattdessen den Value Transformer topic-list-columns und andere neue Topic-List-Plugin-APIs.“

Wird es hierzu eine Kommunikation geben (vielleicht habe ich eine verpasst? :thinking: )?

Ja, wir sollten in etwa einer Woche Dokumentationen haben!

Es handelt sich noch nicht um „richtige“ Deprecation-Meldungen – wir protokollieren sie mit console.debug anstelle von console.warn, sodass sie in der Standardkonfiguration der Chrome-Entwicklertools nicht einmal sichtbar sind. (cc @cvx)

Hier geht’s los @merefield

OOh. Vielleicht möchte ich das wissen. Wie kann man sie sehen? Sind console.debug-Meldungen für die Linter nicht in Ordnung?

Ich glaube, das ist Teil meiner Antwort:

Yup!

Der Grund, warum wir sie auf debug gesetzt haben, war, dass wir sicherstellen wollten, dass alles bereit ist, bevor wir die Warnfluttore öffnen. Es ist nur so, dass @merefield zu aufmerksam war und sie trotzdem gefunden hat :wink:

Jetzt, da das Thema veröffentlicht ist, werden wir sie umgehend auf normale Deprekationen hochstufen :fire:

Aber vielleicht möchte ich in meiner eigenen Entwicklungsarbeit console.debug anstelle von console.log verwenden. Als Regel sind die Dinge, die ich tue, nur für mich von Belang.