Como arquitetar um aplicativo Ember.js

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!

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 .

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

Há 30 minutos de screencast fresco feito por @tomdale: https://www.youtube.com/watch?v=Ga99hMi7wfY

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

The Fire Up Ember - screencast Peepcode vale a pena assistir.

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,

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

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

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

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.