Como arquitetar um aplicativo Ember.js

105

Tem sido difícil acompanhar a evolução do Ember JS conforme sua versão 1.0.0 se aproximou (e alcançou!). Tutoriais e documentação vêm e vão, levando a muita confusão sobre as melhores práticas e a intenção dos desenvolvedores originais.

Minha pergunta é exatamente esta: Quais são as melhores práticas para o Ember JS? Há algum tutorial atualizado ou amostra de trabalho mostrando como o Ember JS deve ser usado? Amostras de código seriam ótimas!

Obrigado a todos, especialmente aos desenvolvedores do Ember JS!

Craig Labenz
fonte
7
Esta questão está no topo de uma pesquisa no Google por 'tutorial EmberJS', mas realmente não responde a essa questão. Esta é realmente uma pergunta sobre 2 links na internet. Você consideraria alterar esta pergunta para caber no título? Acho que a melhor resposta seria aquela que realmente conduzisse alguém pelo processo de criação de um aplicativo com o EmberJS.
George Stocker

Respostas:

17

Há um projeto importante que os desenvolvedores novos e veteranos de Ember.js devem aproveitar:

Ember-CLI

Embora exija algum nível de conforto com a linha de comando, você pode gerar um projeto Ember moderno com as melhores práticas recomendadas pela comunidade em questão de segundos.

Embora seja benéfico configurar um projeto Ember.js da maneira mais difícil, como na resposta de Mike Grassotti, você não deve fazer isso para código de produção. Especialmente quando temos um projeto tão poderoso e fácil de usar como Ember-CLIpara nos mostrar o caminho feliz aprovado pelo Yehuda .

Matt Jensen
fonte
1
Obrigado Matt! Tornei esta a resposta aceita para direcionar o tráfego para o Ember-CLI.
Craig Labenz de
Comecei a usar o Ember pela primeira vez há alguns dias, e o Ember-CLI é muito fácil de começar e usar. A única desvantagem é que ele apresenta muita complexidade que você pode não querer / precisar (embora complexidade que possa ser negligenciada, se você for um tipo de pessoa que confia). Bower e JSHint e Ember-CLI e Travis CI e EditorConfig e arquivos de configuração Git, junto com outras coisas como Broccoli para ativos e PhantomJS para teste ...
JKillian
Ponto justo @JKillian. Sei que existe uma preocupação com a curva de aprendizado do Ember, por esses motivos. Embora o Ember-cli introduza alguma complexidade (Ember-data & Broccoli), ele remove a confusão significativa em torno dos requisitos do fornecedor e da estruturação do seu projeto. Portanto, há um grão de sal.
Matt Jensen de
1
Concordo plenamente com o caminho feliz Ember CLI! O guia de início rápido de Mike Grassotti abaixo seria o "próximo passo" perfeito se não fosse tão ... desatualizado. Para aqueles que procuram construir aplicativos Ember 2.0, a melhor coisa, no que diz respeito às melhores práticas, é ter certeza de entender os conceitos básicos: modelos, rotas, serviços, componentes, etc. Os documentos Ember são um ótimo recurso, mas desde que eu não encontrei um único guia atualizado conectando todos os conceitos (muito menos com um aplicativo de amostra). Decidi escrever isto: emberigniter.com/5-essential-ember-2.0-concepts
Frank Treacy
110

Guia de início rápido de Ember.js mínimo viável de Mike Grassotti

Este guia de início rápido deve levá-lo de zero a um pouco mais que zero em alguns minutos. Quando terminar, você deve se sentir um pouco confiante de que o ember.js realmente funciona e, com sorte, estará interessado o suficiente para aprender mais.

AVISO: Não tente este guia, mas pense que ember-suga, porque "Eu poderia escrever aquele guia de início rápido melhor em jQuery ou Fortran" ou qualquer outra coisa. Não estou tentando convencê-los de brasa nem nada, este guia é pouco mais do que um alô-mundo.

Etapa 0 - Confira jsFiddle

este jsFiddle tem todo o código desta resposta

Etapa 1 - Incluir ember.js e outras bibliotecas necessárias

Ember.js requer jQuery e Handlebars. Certifique-se de que essas bibliotecas sejam carregadas antes de ember.js:

<script type='text/javascript' src='http://code.jquery.com/jquery-1.9.1.js'></script>
<script type='text/javascript' src="http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0-rc.3/handlebars.js"></script>
<script type='text/javascript' src="http://cdnjs.cloudflare.com/ajax/libs/ember.js/1.0.0-rc.1/ember.js"></script>

Etapa 2 - Descreva a interface do usuário do seu aplicativo usando um ou mais modelos de guidão

Por padrão, o ember substituirá o corpo da sua página html usando o conteúdo de um ou mais modelos de barras de orientação. Algum dia esses modelos estarão em arquivos .hbs separados montados por sprockets ou talvez grunt.js. Por enquanto, vamos manter tudo em um arquivo e usar tags de script.

Primeiro, vamos adicionar um único applicationmodelo:

<script type="text/x-handlebars" data-template-name="application">
  <div class="container">
    <h1>Ember.js is easy?<small> Minimum Viable Ember.js QuickStart Guide</small></h1>
    <p>{{message}}</p>
  </div>
</script>

Etapa 3 - inicializar seu aplicativo ember

Basta adicionar outro bloco de script com App = Ember.Application.create({});para carregar ember.js e inicializar seu aplicativo.

<script type='text/javascript'>
  App = Ember.Application.create({});
</script>

Isso é tudo que você precisa para criar um aplicativo básico do ember, mas não é muito interessante.

Etapa 4: adicionar um controlador

O Ember avalia cada modelo de guiador no contexto de um controlador. Portanto, o applicationmodelo tem uma correspondência ApplicationController. O Ember cria é automaticamente se você não definir um, mas aqui vamos personalizá-lo para adicionar uma propriedade de mensagem.

<script type='text/javascript'>
App.ApplicationController = Ember.Controller.extend({
    message: 'This is the application template' 
});
</script>

Etapa 5: definir rotas + mais controladores e modelos

O roteador Ember facilita a combinação de modelos / controladores em um aplicativo.

<script type='text/javascript'>
  App.Router.map(function() {
    this.route("index", { path: "/" });
    this.route("list", { path: "/list" });
  });

  App.IndexController = Ember.Controller.extend({
    message: 'Hello! See how index.hbs is evaluated in the context of IndexController' 
  });

  App.ListRoute = Ember.Route.extend({
    setupController: function(controller) {
      controller.set('content', ['angular.js', 'backbone.js', 'ember.js']);
    }
  });

</script>

Para fazer isso funcionar, modificamos nosso modelo de aplicativo adicionando um {{outlet}}auxiliar. O roteador Ember processará o modelo apropriado na tomada, dependendo da rota do usuário. Também usaremos o {{linkTo}}auxiliar para adicionar links de navegação.

    <script type="text/x-handlebars" data-template-name="application">
      <div class="container">
          <h1>Ember.js is easy?<small> Minimum Viable Ember.js QuickStart Guide</small></h1>
        <p>{{message}}</p>
        <div class="row">
          {{#linkTo index class="span3 btn btn-large btn-block"}}Home{{/linkTo}}
          {{#linkTo list class="span3 btn btn-large btn-block"}}List{{/linkTo}}
        </div>
        {{outlet}}
      </div>
    </script>

    <script type="text/x-handlebars" data-template-name="list">
      <h3 class="demo-panel-title">This is the list template</h3>
      <ul>
      {{#each item in content}}
          <li>{{item}}</li>
      {{/each}}
       </ul>
    </script>

    <script type="text/x-handlebars" data-template-name="index">
      <h3 class="demo-panel-title">This is the index template</h3>
      <p>{{message}}</p>
    </script>

Feito!

Um exemplo prático deste aplicativo está disponível aqui .

Você pode usar este jsFiddle como um ponto de partida para seus próprios aplicativos ember

Próximos passos...

  • Leia os guias do Ember
  • Talvez compre o screencast Peepcode
  • Faça perguntas aqui no Stack Overflow ou no EMber IRC

Para referência, minha resposta original:


Minha pergunta é para qualquer especialista em Ember.js e, certamente, para os respectivos autores do tutorial: Quando devo usar padrões de design de um tutorial e quando do outro?

Esses dois tutoriais representam as melhores práticas na época em que foram escritos. Com certeza há algo que pode ser aprendido com cada um, ambos estão tristemente condenados a se tornarem desatualizados porque ember.js está se movendo muito rapidamente. Dos dois, o Trek's é muito mais atual.

Quais componentes de cada um são preferências pessoais e quais componentes serão essenciais conforme meu aplicativo amadurece? Se você estiver desenvolvendo um novo aplicativo ember, não recomendo seguir a abordagem do Code Lab. É muito desatualizado para ser útil.

No design do Code Lab, o Ember parece estar mais perto de existir dentro do aplicativo (embora seja 100% de seu JS personalizado), enquanto o aplicativo da Trek parece viver mais dentro do Ember.

Seu comentário é estrondoso. O CodeLab está tirando proveito dos principais componentes do ember e acessando-os de escopo global. Quando foi escrito (9 meses atrás), isso era bastante comum, mas hoje a melhor prática para escrever aplicativos ember está muito mais próxima do que o Trek estava fazendo.

Dito isso, até o tutorial do Trek está ficando desatualizado. Componentes que eram necessários ApplicationViewe ApplicationControlleragora são gerados pela própria estrutura.

De longe, o recurso mais atual é o conjunto de guias publicados em http://emberjs.com/guides/ - eles foram escritos do zero nas últimas semanas e refletem a versão mais recente (pré-lançamento) do ember.

Eu também verificaria o projeto wip do trek aqui: https://github.com/trek/ember-todos-with-build-tools-tests-and-other-modern-conveniences

EDITAR :

@ sly7_7: Eu também daria outro exemplo, usando ember-data https://github.com/dgeb/ember_data_example

Mike Grassotti
fonte
1
Originalmente, escrevi o Code Lab como uma forma de fazer com que as pessoas acelerassem os frameworks Ember e MVC, mas, infelizmente, não tive tempo de mantê-lo desde então e parece que mudou o suficiente para que outras pessoas tenham criado recursos melhores. Pessoalmente, desde então mudei para o uso do Angular para a maioria dos meus projetos, acho que requer menos JavaScript e é um pouco mais fácil de entender. Sua escolha de MVC é totalmente pessoal, então não me deixe influenciar você.
PeteLe
1
Fui até emberjs.com/guides e, embora as explicações tenham sido extremamente bem feitas, os exemplos não eram completos o suficiente para serem executados como estão e sofriam de referências cognitivas futuras, o que é problemático para alguém que chega completamente novo. Eles ainda estão sendo atualizados ou existe um recurso complementar?
Walt Stoneburner
1
Com certeza eles ainda estão sendo atualizados. A partir de hoje, provavelmente a melhor maneira de começar rapidamente é conferindo o screencast do peepcode em: peepcode.com/products/emberjs
Mike Grassotti
2
@MikeGrassotti Existe alguma maneira de editar sua resposta para mostrar o código-fonte para começar a usar o EmberJS? Talvez instruções passo a passo sobre como criar um aplicativo "Hello World" com o EmberJS?
George Stocker
2
@MikeGrassotti O wiki da tag ember.js deve ser atualizado para incluir esta pergunta e resposta
MilkyWayJoe
4

Eu recomendo usar Yeoman e seu gerador de brasa que o acompanha. Fora da caixa, você obtém todas as ferramentas de que precisa para desenvolver, testar e preparar um aplicativo para produção. Como um bônus adicional, você poderá dividir seus modelos de visualização em vários arquivos e começar com uma estrutura de diretório inteligente que irá facilitar a criação de uma base de código sustentável.

Escrevi um tutorial sobre como colocá-lo em funcionamento em cerca de 5 minutos. Basta instalar o node.js e seguir aqui

Matthew Lehner
fonte
1

Também siga este tutorial gratuito intitulado Let's Learn Ember do Tuts + Premium. É gratuito porque é de sua free coursessérie. Este curso, como os caras do Tuts o chamam, é dividido em quatorze capítulos fáceis de seguir.

Eu espero que isso ajude.

Saudações,

Junaid Qadir
fonte
0

Eu prefiro a abordagem de yeoman de carvão. Dá a você uma tonelada de coisas prontas para usar, incluindo:

  • uma bela arquitetura de pasta usando uma abordagem de 'módulo'.
  • neutro
  • recarregar ao vivo
  • minificar
  • enfear
  • jshint

e mais.

e é super fácil de configurar, basta executar yo charcoalpara criar um aplicativo e yo charcoal:module myModuleadicionar um novo módulo.

mais informações aqui: https://github.com/thomasboyt/charcoal

Ben
fonte
0

Acabei de criar um Starter Kit, se você gostaria de usar o mais recente EmberJS com Ember-Data, com motor de modelo Emblem. Tudo empacotado em Middleman, para que você possa desenvolver com CoffeeScript. Tudo no meu GitHub: http://goo.gl/a7kz6y

Zoltan
fonte
0

Embora o Flame desatualizado no Ember.js ainda seja um bom tutorial para quem está olhando para o ember pela primeira vez.

Steve
fonte
0

Comecei a construir uma série de vídeos anteriores ao Ember e voltados para o uso do Ember com raiva em casos de uso sérios para coisas do mundo real.

Se você estiver interessado em ver isso chegar à luz do dia (estou mais do que feliz em eventualmente divulgá-lo se houver interesse), você deve definitivamente ir até a postagem que fiz e clicar em "curtir" (ou apenas comentar aqui, Eu acho):

http://discuss.emberjs.com/t/making-ember-easier-to-approach-aka-crazy-screencasts-videos-that-will-stick-in-your-mind-for-learning-ember/5284

Estou muito interessado em fazê-lo ajudar a comunidade a florescer, mas também ajudar as pessoas a aprender como construir sites padrão de maneira fácil.

Julian Leviston
fonte