Vistas frente a componentes en Ember.js

143

Estoy aprendiendo ember.js, y estoy tratando de entender la diferencia entre una vista y un componente. Veo ambos como una forma de hacer componentes reutilizables.

Desde el sitio web de Ember en vistas:

Las vistas en Ember.js generalmente solo se crean por las siguientes razones:
-Cuando necesita un manejo sofisticado de los eventos del usuario
-Cuando desea crear un componente reutilizable

Desde el sitio web de Ember sobre componentes:

Un componente es una etiqueta HTML personalizada cuyo comportamiento se implementa usando JavaScript y cuya apariencia se describe usando plantillas de manillar. Le permiten crear controles reutilizables que pueden simplificar las plantillas de su aplicación.

Entonces, ¿cuál es la principal diferencia entre una vista y un componente? ¿Y cuál sería un ejemplo común en el que preferiría usar una vista sobre un componente y viceversa?

javascript ember.js handlebars.js

— Bradley Trager
fuente

Respuestas:

170

Ember.View

Un Ember.View está actualmente limitado a las etiquetas que W3C ha creado para usted. ¿Pero si desea definir sus propias etiquetas HTML específicas de la aplicación y luego implementar su comportamiento usando JavaScript? No puedes hacer esto realmente con una Ember.View .

Ember.Component

Eso es exactamente lo que los componentes te permiten hacer. De hecho, es una buena idea que el W3C esté trabajando actualmente en la especificación de Elementos personalizados .

La implementación de componentes de Ember intenta estar lo más cerca posible de la especificación de Componentes Web. Una vez que los elementos personalizados estén ampliamente disponibles en los navegadores, debería poder migrar fácilmente sus componentes Ember al estándar W3C y hacer que otros marcos también puedan utilizarlos y que hayan adoptado el nuevo estándar.

Esto es tan importante para nosotros que estamos trabajando estrechamente con los organismos de normalización para garantizar que nuestra implementación de componentes coincida con la hoja de ruta de la plataforma web.

También es importante tener en cuenta que un Ember.Component es en realidad un Ember.View (una subclase) pero que está completamente aislado . El acceso a la propiedad en sus plantillas va al objeto de vista y las acciones están dirigidas también al objeto de vista . No hay acceso al entorno contexto al exterior, controller se pasa toda la información contextual , que no es el caso con un Ember.View que de hecho tiene acceso a su controlador circundante, por ejemplo, dentro de una vista, podría hacer algo como lo this.get('controller')que le daría el controlador actualmente asociado con la vista.

Entonces, ¿cuál es la principal diferencia entre una vista y un componente?

Entonces, la principal diferencia además de que los componentes le permiten crear sus propias etiquetas y, en algún momento en el futuro, cuando los Elementos personalizados estén disponibles, también migrar / usar esos componentes en otros marcos que admitirán elementos personalizados, es que en algún momento un componente de ascuas hará que una vista sea algo obsoleta dependiendo del caso de implementación específico.

¿Y cuál sería un ejemplo común en el que preferiría usar una vista sobre un componente y viceversa?

Seguir lo anterior depende claramente de sus casos de uso. Pero como regla general, si necesita en su vista acceso a su controlador circundante, etc., use Ember.View , pero si desea aislar la vista y pasar solo la información que necesita para funcionar, haciendo que sea independiente del contexto. y mucho más reutilizable, use un componente Ember .

Espero eso ayude.

Actualizar

Con la publicación de Road to Ember 2.0 , ahora se recomienda utilizar Componentes en lugar de Vistas en la mayoría de los casos.

— píxel intuitivo
fuente

Mi única preocupación sobre los componentes es cuando se vuelven complejos. Todavía no sé cómo separar la parte lógica de la parte de representación. Tengo puntos de vista regulares, tienes esta separación y podrías poner la lógica en el controlador, pero con el componente, tiendo a decir que terminarás teniendo un problema muy complejo y tal vez enorme. ¿Sabes si es posible definir un controlador dedicado para componentes? O quizás los componentes simplemente no están destinados a administrar elementos gráficos complejos.

— sly7_7

@ sly7_7, sí, entiendo tu punto. Pero pensaría en un componente como un recuadro negro, que se comporta solo en función de los datos que ingresa. Y sí, dependiendo de lo que haga, esto podría convertirse en un desastre muy rápidamente. Un controlador dedicado tendría sentido absoluto, y una forma en que podría funcionar sería si los componentes pudieran ser inyectados lógicamente en él, pero por lo que sé, los componentes no son parte del contenedor de Ember por diseño, supongo, pero puede cambiar en el futuro a resuelve exactamente algo como esto. Buen punto de todos modos!

— intuitivopixel

pueden ningún enlace ir cabo de un componente? Es decir, con la forma de bloque de un componente, ¿pueden los elementos de contenido en el bloque unirse a las propiedades del componente, o debo usar una vista en este caso?

— Michael Johnston

ah, si pueden. {{view.xxxx}}funciona en un componente igual que en una vista.

— Michael Johnston

Comentarios de Tom Dale sobre este tema: ember.zone/the-confusion-around-ember-views-and-components/…

— Akshay Rawat

La respuesta es simple: usar componentes

Según un video de capacitación que se grabó en agosto de 2013, Yehuda Kats y Tom Dale (miembros del equipo de Ember Core) le dijeron a la audiencia que no use las vistas a menos que sea un desarrollador de framework. Han realizado muchas mejoras en los manillares y los componentes introducidos, por lo que las vistas ya no son necesarias. Las vistas se usan internamente para potenciar cosas como {{#if}} y {{outlet}}.

Los componentes también imitan estrechamente el estándar de componentes web que se integrará en el navegador, por lo que hay muchos beneficios secundarios para sentirse cómodo construyendo componentes Ember.

Actualización 27/11/2014

Ahora es aún más importante usar componentes en lugar de vistas, ya que Ember 2.0 usará Componentes enrutables cuando se ingrese una ruta, en lugar de un controlador / vista. Para probar su aplicación en el futuro, es mejor mantenerse alejado de Views.

Fuentes:

Road to Ember 2.0: https://github.com/emberjs/rfcs/pull/15
Preparar su código Ember 1.x para el futuro: https://gist.github.com/samselikoff/1d7300ce59d216fdaf97
No hay vista, solo componente (Tom Dale): https://speakerdeck.com/tomdale/ember-2-dot-0-in-practice?slide=27

— Johnny Oshika
fuente

"Si cree que necesita usar una vista, use un Componente". es un consejo terrible y revela una falta de comprensión del aislamiento que implican los componentes.

— jmcd

@jmcd, aunque ese comentario vino de los propios desarrolladores del framework, lo eliminé.

— Johnny Oshika

Encontré la fuente: capacitación en video de Gaslight, video 10.3 Preguntas y respuestas sobre los componentes @ 26m. Tom dice: '' Dado que esos ejemplos fueron escritos, ... hemos agregado Componentes [que] no existían cuando esos ejemplos fueron escritos. En general, diría que las Vistas no son algo que esperaríamos que escribieran la mayoría de los desarrolladores, son más un objeto interno de contabilidad en este momento '

— jmcd

@jmcd, en ese video @ 26:15, Tom dice "básicamente no use las vistas". Además, si saltas a 30m en el mismo video, Yehuda Katz dice: "La vista es básicamente un detalle de implementación interna ... podrías usar una Vista, pero luego eres un desarrollador de framework. En su lugar, deberías usar una de las cosas que hemos creado para usted que utiliza View, y el que está más cerca de View pero tiene una semántica mejor es Component. Cualquier cosa para la que haya utilizado una Vista anteriormente, Component está bien ".

— Johnny Oshika

Tal como está ahora, v2.xsiendo una versión estable actual, las vistas han quedado completamente en desuso. Se dice que las vistas se están eliminando de la API Ember 2.0 .

Entonces, el uso de la {{view}}palabra clave en Ember 2.0 desencadenará una afirmación:

Error de aserción: el uso {{view}}o cualquier ruta basada en él se ha eliminado en Ember 2.0

Si tiene que usar vistas en Ember 2.0, puede usar el complemento ember-legacy-views , que será compatible con Ember hasta la versión 2.4 .

En resumen, los componentes son el presente (se eliminan las vistas) y el futuro, también reemplazarán a los controladores. Ver Componentes enrutables RFC .

— Daniel Kmak
fuente