Vues vs Composants dans Ember.js
J'apprends ember.js et j'essaie de comprendre la différence entre une vue et un composant. Je vois les deux comme un moyen de fabriquer des composants réutilisables.
Sur le site Web d'Ember sur les vues:
Les vues dans Ember.js ne sont généralement créées que pour les raisons suivantes:
- Lorsque vous avez besoin d'une gestion sophistiquée des événements utilisateur
- Lorsque vous voulez créer un composant réutilisable
Sur le site Web d'Ember sur les composants:
Un composant est une balise HTML personnalisée dont le comportement est implémenté à l'aide de JavaScript et dont l'apparence est décrite à l'aide de modèles de guidon. Ils vous permettent de créer contrôles réutilisables pouvant simplifier les modèles de votre application.
Quelle est donc la principale différence entre une vue et un composant? Et quel serait un exemple commun dans lequel je préférerais utiliser une vue sur un composant et inversement?
Ember.View
Un Ember.View est actuellement limité aux tags créés pour vous par le W3C. Mais si vous vouliez définir vos propres balises HTML spécifiques à une application, puis implémenter leur comportement en utilisant JavaScript? Vous ne pouvez pas faire cela avec Ember.View .
Composant Ember
C'est exactement ce que les composants vous permettent de faire. En fait, c’est une si bonne idée que le W3C travaille actuellement sur la spécification Custom Elements .
L'implémentation des composants par Ember tente d'être aussi proche que possible de la spécification des composants Web. Une fois , les éléments personnalisés sont largement disponibles dans les navigateurs. Vous devriez donc être en mesure de faire migrer facilement vos composants Ember vers le standard W3C et d'avoir qu’ils soient également utilisables par d’autres cadres ayant adopté la nouvelle norme.
Cela est tellement important pour nous que nous travaillons en étroite collaboration avec les organismes de normalisation pour nous assurer que la mise en œuvre des composants correspond à la feuille de route de la plate-forme Web.
Il est également important de noter qu'un Ember.Component est en fait un Ember.View (une sous-classe) mais qu'il est complètement isolé L'accès à la propriété dans ses modèles va à l'objet vue et les actions sont également ciblées à l'objet vue . Il n’ya pas d’accès aux informations context ou externes controller environnantes ; toutes les informations contextuelles sont passées dans , ce qui n’est pas le cas avec un Ember.View qui a effectivement accès à son contrôleur environnant, par exemple, dans une vue, vous pouvez faire quelque chose comme this.get('controller') qui vous donnerait le contrôleur actuellement associé à la vue.
Quelle est donc la principale différence entre une vue et un composant?
Ainsi, la principale différence à part que les composants vous permettent de créer vos propres balises et à un moment donné dans le futur quand Les éléments personnalisés sont également disponibles, migrez/utilisez-les composants dans d’autres frameworks qui supporteront des éléments personnalisés, c’est bien qu’à un moment donné, un composant ember rendra une vue quelque peu obsolète en fonction du cas d’implémentation spécifique.
Et quel serait un exemple commun dans lequel je préférerais utiliser une vue sur un composant et inversement?
Après cela, cela dépend clairement de vos cas d'utilisation. Mais en règle générale, si vous avez besoin dans votre vue, accédez à son contrôleur environnant, etc. utilisez un Ember.View , mais si vous souhaitez isoler la vue et ne transmettre que les informations dont elle a besoin pour travailler en le rendant indépendant du contexte et beaucoup plus réutilisable, utilisez un Ember.Component .
J'espère que ça aide.
Mise à jour
Avec la publication de Road to Ember 2. , vous êtes maintenant encouragé à utiliser des composants plutôt que des vues dans la plupart des cas.
La réponse est simple: utilisez des composants
Selon une vidéo de formation enregistrée en août 2013, Yehuda Kats et Tom Dale (membres de l'équipe Ember Core) ont dit au public de ne pas utiliser les vues à moins d'être un développeur de framework. Ils ont apporté de nombreuses améliorations au guidon et aux composants, de sorte que les vues ne sont plus nécessaires. Les vues sont utilisées en interne pour alimenter des éléments tels que {{#if}} et {{outlet}}.
Les composants imitent également de près la norme des composants Web qui sera intégrée au navigateur. Il y a donc de nombreux avantages à devenir plus confortable à construire Ember Composants.
Mise à jour 2014-11-27
Il est encore plus important maintenant d’utiliser des composants au lieu de vues, car Ember 2.0 utilisera des composants routables lorsqu’un itinéraire est entré, au lieu d’un contrôleur/vue. Pour pouvoir mettre à jour votre application, il vaut mieux rester à l'écart des vues.
Sources:
- Route vers Ember 2.0: https://github.com/emberjs/rfcs/pull/15
- Pour pérenniser votre Ember 1.x: https://Gist.github.com/samselikoff/1d7300ce59d216fdaf97
- Il n'y a pas de vue, seulement composant (Tom Dale): https://speakerdeck.com/tomdale/ember-2-dot-0-in-practice?slide=27
Dans l'état actuel des choses - v2.x étant la version stable actuelle - les vues sont complètement obsolètes. On dit que les vues sont en train d'être supprimées de Ember 2.0 API .
Donc, en utilisant {{view}} mot-clé dans Ember 2.0 déclenchera une assertion:
Échec de l'assertion: utilisation de
{{view}}ou tout chemin basé sur celui-ci a été supprimé dans Ember 2.0
Si vous devez utiliser des vues dans Ember 2.0, vous pouvez utiliser l'addon de ember-legacy-views , qui sera compatible avec = Ember jusqu'à la version 2.4 .
En résumé, les composants sont le présent (les vues sont supprimées) et le futur, ils remplaceront également les contrôleurs. Voir RFC pour les composants routables .