Ember Octane est la nouvelle édition du framework Ember.js, ainsi que le meilleur moyen pour les équipes de créer des applications web ambitieuses.
Le 20 décembre, une nouvelle version d'Ember 3.15 est sortie. Et c'est Octane! Vous voulez savoir ce que cela signifie pour le développement Web? Ce message vous aidera à trouver votre chemin.
Googlotranslite et moi avons travaillé dur sur la traduction (en particulier googlotranslate). Bienvenue au chat!
Pour plus de détails techniques (stratégies de mise à niveau, fonctionnalités héritées, nouvelles fonctionnalités d'Ember Data), consultez le blog de la version Ember 3.15 .
Qu'est-ce que Ember Octane?
Ember s'est toujours concentré sur la création d'un meilleur environnement que les personnes ayant différents niveaux de compétence peuvent utiliser ensemble pour créer des applications Web. Octane met à jour les composants et le système de réactivité d'Ember pour les rendre plus modernes et faciles à utiliser. Maintenant, utiliser Ember sera beaucoup plus amusant!
À partir de la version 3.15, les développeurs Ember recommandent Octane pour les nouvelles applications et modules complémentaires. Si vous créez une nouvelle application en utilisant ember new avec la version 3.15 ou ultérieure, vous obtiendrez une nouvelle application Octane.
Octane est amusant
Au cœur des améliorations d'Octane, deux changements majeurs ont été apportés au cœur Ember: un nouveau modèle de composant et un nouveau système de réactivité.
Pour les applications existantes sur Ember, les deux modifications sont entièrement compatibles avec le code existant. La mise à jour de l'application Ember 3.14 vers Ember 3.15 est un changement compatible, comme le suggère le numéro de version.
Composants scintillants
La première grande amélioration d'Ember Octane est les composants Glimmer. Depuis Ember 1.0, Ember avait un système à un composant basé sur la syntaxe JavaScript qui était disponible à l'époque.
Avant: composants Ember classiques
Lorsque vous regardez des composants classiques, la première chose qui attire votre attention est que vous configurez «l'élément racine» à l'aide de la syntaxe JavaScript.
import Component from '@ember/component'; export default Component.extend({ tagName: 'p', classNames: ["tooltip"], classNameBindings: ["isEnabled:enabled", "isActive:active"], })
Après: composants Glimmer
Les composants Glimmer, d'autre part, permettent à l'élément racine d'être traité comme tout autre élément. Cela simplifie considérablement le modèle de composant, à l'exception des cas spéciaux associés à la présence de la deuxième API uniquement pour travailler avec l'élément racine du composant.
Cela signifie également que vous pouvez créer un composant sans élément racine, et cela fonctionnera.
Utilisation de modificateurs pour réutiliser le comportement DOM
La deuxième amélioration majeure du modèle de composant Ember est les modificateurs d'éléments, une fonctionnalité qui vous permet de créer un comportement DOM réutilisable qui n'est associé à aucun composant particulier.
À: Mixins
Dans Ember classique, si vous souhaitez définir une partie du comportement DOM que vous pouvez réutiliser dans votre application, vous devez définir une combinaison de composants qui implémente les crochets de cycle de vie correspondants.
Par exemple, nous avons une bibliothèque tierce qui fournit les fonctions activateTabs et deactivateTabs, chacune prenant un élément. Dans Ember classique, vous pouvez écrire un mixin comme celui-ci:
import Mixin from '@ember/object/mixin'; export default Mixin.create({ didInsertElement() { this._super(); activateTabs(this.element); } willDestroyElement() { this._super(); deactivateTabs(this.element); } })
Et puis vous l'utiliserez dans un tel composant:
import Component from '@ember/component'; export default Component.extend(Tabs, {
Les inconvénients de l'utilisation de mixins pour la composition de l'interface utilisateur sont bien documentés dans tout l'écosystème JavaScript ( Mixins Considéré Nocif , Hooks arrive à Vue.js version 3.0 , proposition de mixin refusée pour svelte , Ember RFC: Deprecate Mixins ). Le plus gros problème est les conflits de noms. Toute méthode dans un mixin peut entrer en conflit avec une méthode dans n'importe quel autre mixin, sans un bon moyen de résoudre les conflits.
Dans le contexte d'Ember, il existe un autre problème avec l'utilisation des mixins de composants Ember pour réutiliser le comportement DOM. Si vous souhaitez utiliser Tabs pour un élément, vous devez transformer cet élément en un composant avec une classe JavaScript, ce qui est plutôt gênant.
Bien que nous recommandons d'éviter les mixins, vous pouvez les utiliser dans Ember 3.15. Les modules complémentaires peuvent également vous fournir des mixins.
Après: Modificateurs d'éléments
Ember Octane fournit une nouvelle façon de réutiliser le comportement DOM: les modificateurs d'éléments. La façon la plus simple d'écrire un modificateur d'élément est d'écrire une fonction qui prend un élément et en fait quelque chose. La fonction peut éventuellement renvoyer une fonction destructrice, qui doit être exécutée lorsque Ember détruit l'élément.
Voici à quoi ressemble notre Tabs lorsqu'il est remplacé en tant que modificateur.
import { modifier } from 'ember-modifier'; export default modifier(element => { activateTabs(element); return () => deactivateTabs(element); });
D'accord, simple!
Vous pouvez utiliser un modificateur pour n'importe quel élément à l'aide de la syntaxe du modificateur d'élément.
Les modificateurs d'élément fonctionnent avec n'importe quel élément, ce qui signifie que vous n'avez pas besoin de créer un composant entier juste pour créer un comportement DOM réutilisable.
Cette façon d'écrire des modificateurs suppose que lorsque les arguments des modificateurs changent, vous pouvez démarrer le destructeur et démarrer le modificateur à partir de zéro. Si vous avez besoin d'un contrôle plus précis, le package ember-modifier fournit également une API plus avancée.
Réactivité empruntée à Glimmer
Une caractéristique distinctive de l'interface externe moderne est son «modèle de réactivité». Le modèle de réactivité vous indique comment identifier et manipuler les données de votre programme afin que le DOM de sortie soit correctement mis à jour lorsque des modifications sont apportées.
Ember Octane révèle un modèle de réactivité beaucoup plus simple appelé propriétés suivies.
Le modèle de réactivité de traçabilité est compatible avec le modèle de réactivité classique. Cela est dû au fait que les deux API sont implémentées dans le cadre du modèle de réactivité interne Ember basé sur les liens et les validateurs .
Avant: propriétés calculées et leurs limites
Dans Ember classique, vous modifiez les propriétés réactives à l'aide de set , et tous les calculs doivent être décrits comme des champs calculés qui doivent répertorier complètement toutes les dépendances.
Voici un exemple de champs calculés à partir des manuels Ember 3.14:
import EmberObject, { computed } from '@ember/object'; const Person = EmberObject.extend({ firstName: null, lastName: null, age: null, country: null, fullName: computed('firstName', 'lastName', function() { return `${this.firstName} ${this.lastName}`; }), description: computed('fullName', 'age', 'country', function() { return `${this.fullName}; Age: ${this.age}; Country: ${this.country}`; }) }); let captainAmerica = Person.create({ firstName: 'Steve', lastName: 'Rogers', age: 80, country: 'USA' }); captainAmerica.description;
Cette conception complique la décomposition de la propriété calculée en fonctions plus petites, car elle doit toujours répertorier toutes les propriétés qu'elle utilise, quel que soit l'endroit où elles sont utilisées. En pratique, cela signifie que dans le classique Ember, vous empilez certaines propriétés calculées sur d'autres, ce qui fonctionne, mais est plutôt lourd.
Après: Propriétés suivies
Dans le modèle de réactivité d'Octane, les propriétés suivies sont beaucoup plus concises.
class Person { @tracked firstName; @tracked lastName; @tracked age; @tracked country; constructor({ firstName, lastName, age, country }) { this.firstName = firstName; this.lastName = lastName; this.age = age; this.country = country; } get fullName() { return `${this.firstName} ${this.lastName}`; }), get description() { return `${this.fullName}; Age: ${this.age}; Country: ${this.country}`; }) } let captainAmerica = new Person({ firstName: 'Steve', lastName: 'Rogers', age: 80, country: 'USA' }); captainAmerica.description;
Vous commencez avec la classe JavaScript standard et annotez tous les champs susceptibles d'affecter le DOM avec @tracked . Vous n'avez pas besoin d'annoter des getters ou des fonctions, vous pouvez donc casser votre code comme vous le souhaitez.
Une caractéristique du modèle de réactivité des propriétés surveillées est que si vous supprimez l'annotation @tracked , le code fonctionnera exactement de la même manière. La seule chose qui change lorsque vous ajoutez @tracked est que si la propriété change, toute partie du DOM qui a utilisé cette propriété dans le cadre de ses calculs sera mise à jour correctement.
Attention à la documentation
Octane est bien plus que de nouvelles fonctionnalités. De plus, nous avons accordé une grande attention à la mise à jour de la documentation pour montrer aux utilisateurs comment créer des applications de style Octane.
Le didacticiel est la première façon d'apprendre à créer des applications Ember. Ember 3.15 a complètement mis à jour le tutoriel Super Rentals , en le réécrivant dans le style Octane. La structure de la leçon a également été mise à jour et mise à jour.
Les guides ont également été considérablement mis à jour. Maintenant, nous parlons d'abord des composants en éliminant l'organisation confuse (par exemple, la séparation entre les modèles et les composants). Le nouveau manuel supprime l'accent mis sur les contrôleurs qui sont moins importants dans Octane. Le modèle d'objet classique est maintenant inclus dans la section de migration Octane.
Ember Inspector vient de s'améliorer
L'inspecteur Ember est une partie très importante de la façon dont les développeurs Ember créent des applications Ember.
Nous sommes très fiers qu'au fil des ans, nous ayons conservé une note de cinq étoiles sur le Chrome Web Store.
Pour Octane, l'inspecteur Ember a été mis à jour pour prendre en charge les fonctionnalités de première classe d'Octane, y compris les propriétés suivies et les composants Glimmer.
L'inspecteur mis à jour élimine les concepts en double et un langage obsolète (par exemple, "Afficher l'arborescence"). Il a également de nombreuses améliorations visuelles, y compris une nouvelle info-bulle de composant qui reflète mieux les idiomes d'Octane. L'info-bulle d'un composant est également mise à jour, ce qui résout un ancien problème avec les petits composants.
Commencer le travail
Que vous soyez un nouveau développeur Ember qui est revenu sur Ember plusieurs années plus tard, ou déjà un développeur Ember actif, le moyen le plus rapide et le plus simple d'apprendre à créer des applications à l'aide d'Octane est de parcourir un guide mis à jour. (D'un traducteur: pour les développeurs actifs, il serait utile d'étudier la feuille de triche comparative )
L'écosystème de modules complémentaires Ember est une grande partie d'Ember, vous voudrez donc utiliser des modules complémentaires pour accélérer le processus de création de votre projet.
Ember Observer est un catalogue de l'écosystème des modules complémentaires Ember. Chaque addon reçoit une évaluation de la qualité basée sur une analyse de critères formels, tels que la présence d'un README significatif, si l'addon a un assemblage automatique et si l'addon est pris en charge par plus d'une personne. À partir de cette semaine, il sera également indiqué si l'addon est prêt pour Octane.
La plupart des modules complémentaires doivent être compatibles avec Octane sans aucune modification. Ember Observer aide la communauté à identifier et résoudre à l'avance les problèmes d'Octane dans les packages pris en charge.
Un peu plus sur l'interopérabilité transparente
En plus d'exclure les propriétés calculées, le modèle de réactivité Glimmer n'inclut pas les proxies ou observateurs Ember. Le modèle de réactivité Octane est plus puissant que le classique, mais il est beaucoup plus facile à utiliser.
Le modèle de réactivité Octane ne serait pas utile aux utilisateurs Ember existants s'il était difficile d'utiliser des objets implémentés à l'aide du modèle de réactivité classique à partir d'objets implémentés à l'aide du modèle Octane. Par conséquent, nous avons travaillé dur pour garantir que les applications Ember existantes puissent utiliser librement des objets classiques dans des classes créées à l'aide de propriétés suivies.
class Contact { @tracked person; constructor(person) { this.person = person; } get description() { return this.person.description; } } import EmberObject, { computed } from '@ember/object'; const Person = EmberObject.extend({ firstName: null, lastName: null, age: null, country: null, fullName: computed('firstName', 'lastName', function() { return `${this.firstName} ${this.lastName}`; }), description: computed('fullName', 'age', 'country', function() { return `${this.fullName}; Age: ${this.age}; Country: ${this.country}`; }) }); let captainAmerica = new Person({ firstName: 'Steve', lastName: 'Rogers', age: 80, country: 'USA' }); let contact = new Contact(captainAmerica); contact.description;
Étant donné que les deux systèmes sont compatibles, les bibliothèques peuvent utiliser le système de réactivité Octane sans modifications majeures de l'API.
Cela vous permet de réécrire les applications Ember existantes en utilisant Octane module par module.
Merci de votre intérêt pour Ember Octane.
Octane est un projet que la communauté Ember est heureuse de partager avec des développeurs, nouveaux ou expérimentés. Octane est un moyen moderne et productif de créer des applications Web qui vous permettent de profiter et de la stabilité dans notre travail.
Une mise à jour complète des API et de la documentation Ember n'aurait pas pu être réalisée sans les efforts de la communauté et de chaque membre des équipes centrales d'Ember . Merci d'en faire partie, de contribuer à ce projet et de continuer à aider Ember à être un excellent choix pour le développement Web.
du traducteur:
En russe sur Ember, vous pouvez demander dans la chaîne de télégramme ember_js