Visualizações versus componentes no Ember.js

143

Estou aprendendo o ember.js e estou tentando entender a diferença entre uma exibição e um componente. Eu vejo os dois como uma maneira de criar componentes reutilizáveis.

No site da Ember, exibições:

As exibições no Ember.js geralmente são criadas apenas pelos seguintes motivos:
-Quando você precisa de tratamento sofisticado de eventos do usuário
-Quando você deseja criar um componente reutilizável

No site da Ember sobre componentes:

Um componente é uma tag HTML personalizada cujo comportamento você implementa usando JavaScript e cuja aparência você descreve usando modelos de guidão. Eles permitem criar controles reutilizáveis que podem simplificar os modelos do seu aplicativo.

Então, qual é a principal diferença entre uma visão e um componente? E qual seria um exemplo comum em que eu preferiria usar uma exibição sobre um componente e vice-versa?

Bradley Trager
fonte

Respostas:

170

Ember.View

No momento, um Ember.View está limitado às tags criadas para você pelo W3C. Mas se você deseja definir suas próprias tags HTML específicas do aplicativo e implementar o comportamento delas usando JavaScript? Na verdade, você não pode fazer isso com um Ember.View .

Ember.Component

É exatamente isso que os componentes permitem que você faça. De fato, é uma idéia tão boa que o W3C esteja atualmente trabalhando na especificação de elementos personalizados .

A implementação de componentes da Ember tenta estar o mais próximo possível da especificação de componentes da Web. Uma vez que elementos personalizados estão amplamente disponíveis em navegadores, você deve ser capaz de migrar facilmente seus componentes Ember com o padrão W3C e tê-los ser usado por outras estruturas, bem que adotaram o novo padrão.

Isso é tão importante para nós que estamos trabalhando em estreita colaboração com os órgãos de padrões para garantir que nossa implementação de componentes corresponda ao roteiro da plataforma da web.

Também é importante notar que um Ember.Component é realmente um Ember.View (uma subclasse), mas que é completamente isolado . O acesso à propriedade em seus modelos vai para o objeto de exibição e as ações também são direcionadas ao objeto de exibição . Não há acesso ao ambiente contextexterno ou externo aonde controller todas as informações contextuais são passadas , o que não é o caso de um Ember.View que realmente tem acesso ao seu controlador circundante; por exemplo, dentro de um modo de exibição, você poderia fazer algo parecido com o this.get('controller')que controlador atualmente associado à visualização.

Então, qual é a principal diferença entre uma visão e um componente?

Portanto, a principal diferença além desses componentes permite criar suas próprias tags e, em algum momento no futuro, quando os elementos personalizados estiverem disponíveis, também migrar / usar esses componentes em outras estruturas que suportam elementos personalizados, é que, em algum momento, um componente de brasa tornará uma visão um pouco obsoleta, dependendo do caso de implementação específico.

E qual seria um exemplo comum em que eu preferiria usar uma exibição sobre um componente e vice-versa?

Seguindo o exposto, isso depende claramente de seus casos de uso. Mas, como regra geral, se você precisar acessar o controlador circundante, etc., use um Ember.View , mas se quiser isolar a visualização e passar apenas as informações necessárias para torná-la independente de contexto e muito mais reutilizável, use um Ember.Component .

Espero que ajude.

Atualizar

Com a publicação do Road to Ember 2.0, agora você é incentivado a usar componentes em vez de visualizações na maioria dos casos.

intuitivepixel
fonte
1
Minha única preocupação com os componentes é quando eles se tornam complexos. Ainda não sei como separar a parte lógica da parte de renderização. Vistas regulares, você tem essa separação e pode colocar a lógica no controlador, mas com o componente, costumo dizer que você acabará tendo uma bagunça muito complexa e talvez enorme. Você sabe se é possível definir um controlador dedicado para componentes? Ou talvez os componentes não tenham a intenção de gerenciar elementos gráficos complexos.
S05_13
3
@ sly7_7, sim, eu entendo o seu ponto. Mas eu pensaria em um componente como uma caixa preta, comportando-se apenas com base nos dados em que é passado. E sim, dependendo do que faz, isso pode se tornar uma bagunça muito rapidamente. Um controlador dedicado faria sentido absoluto, e da maneira que poderia funcionar, se os componentes pudessem ser injetados lógicos nele, mas até onde eu sei, os componentes não fazem parte do recipiente da brasa por design, eu acho, mas pode mudar no futuro para resolver exatamente algo assim. Bom ponto de qualquer maneira!
intuitivepixel
2
quaisquer ligações podem sair de um componente? IE, com a forma de bloco de um componente, os elementos de conteúdo no bloco podem se vincular às propriedades do componente, ou devo usar uma visualização nesse caso?
Michael Johnston
2
ah sim eles podem. {{view.xxxx}}funciona em um componente da mesma maneira que em uma exibição.
Michael Johnston
Comentários de Tom Dale sobre este tópico: ember.zone/the-confusion-around-ember-views-and-components/…
Akshay Rawat
17

A resposta é simples: use componentes

De acordo com um vídeo de treinamento gravado em agosto de 2013, Yehuda Kats e Tom Dale (membros da equipe principal da Ember) disseram ao público para não usar visualizações, a menos que você seja um desenvolvedor de framework. Eles fizeram muitos aprimoramentos no guidão e introduziram componentes, portanto, as visualizações não são mais necessárias. As visualizações são usadas internamente para alimentar coisas como {{#if}} e {{outlet}}.

Os componentes também imitam de perto o padrão de componentes da Web que será incorporado ao navegador; portanto, há muitos benefícios colaterais em tornar-se confortável na construção de componentes de Ember.

Atualização 2014-11-27

Agora é ainda mais importante usar componentes em vez de visualizações, pois o Ember 2.0 usará Componentes Rotáveis ​​quando uma rota for inserida, em vez de um controlador / exibição. Para comprovar seu aplicativo no futuro, é melhor ficar longe do Views.

Fontes:

Johnny Oshika
fonte
5
"Se você sentir que precisa usar uma exibição, use um componente." é um péssimo conselho e trai a falta de compreensão do isolamento que os componentes envolvem.
jmcd
@jmcd, embora esse comentário tenha sido dos próprios desenvolvedores do framework, eu o retirei.
precisa
2
Encontrei a fonte: treinamento em vídeo Gaslight, vídeo 10.3 Perguntas e respostas sobre componentes com marca de 26m. Tom diz: '' Desde que esses exemplos foram escritos, ... adicionamos Componentes [que] não existiam quando esses exemplos foram escritos. Em geral, eu diria Visualizações não são algo que seria de esperar a maioria dos desenvolvedores para ser escrito, eles são mais de um objeto interno de manutenção de livro neste momento'
jmcd
2
@jmcd, Nesse vídeo, às 26:15, Tom diz "basicamente não usa Views". Além disso, se você pular para 30 metros no mesmo vídeo, Yehuda Katz diz: "O View é basicamente um detalhe interno da implementação ... você pode usar um View, mas é um desenvolvedor de framework. Em vez disso, use uma das coisas que criamos para você que usa o View, e o que está mais próximo do View, mas que tem melhor semântica, é o Component. Tudo o que você poderia ter usado antes do View, o Component é bom. "
precisa
5

Como está agora - v2.xsendo a versão estável atual - as visualizações foram completamente reprovadas. Dizem que as visualizações estão sendo removidas da API do Ember 2.0 .

Portanto, o uso da {{view}}palavra-chave no Ember 2.0 acionará uma afirmação:

Falha na declaração: o uso {{view}}ou qualquer caminho baseado nele foi removido no Ember 2.0

Se você precisar usar modos de exibição no Ember 2.0, poderá usar o complemento de ember-legacy-views , que será compatível com o Ember até a versão 2.4 .

Então, para resumir - os componentes são o presente (visualizações sendo removidas) e o futuro - eles também substituirão os controladores. Consulte RFC de componentes roteáveis .

Daniel Kmak
fonte