Cómo diseñar una aplicación Ember.js

Ha sido difícil mantenerse al día con la evolución de Ember JS cuando se acercó (¡y alcanzó!) La versión 1.0.0. Los tutoriales y la documentación han ido y venido, lo que ha generado mucha confusión sobre las mejores prácticas y la intención de los desarrolladores originales.

Mi pregunta es exactamente esa: ¿Cuáles son las mejores prácticas para Ember JS? ¿Hay tutoriales actualizados o muestras de trabajo que muestren cómo se pretende usar Ember JS? ¡Las muestras de código serían geniales!

¡Gracias a todos, especialmente a los desarrolladores de Ember JS!

Hay un proyecto importante que tanto los desarrolladores nuevos como los veteranos de Ember.js deberían aprovechar:

Ember-CLI

Si bien requiere cierto nivel de comodidad con la línea de comandos, puede generar un proyecto Ember moderno con las mejores prácticas recomendadas por la comunidad en cuestión de segundos.

Si bien es beneficioso configurar un proyecto Ember.js de la manera difícil como en la respuesta de Mike Grassotti, no debería hacerlo para el código de producción. Especialmente cuando tenemos un proyecto tan poderoso y fácil de usar como Ember-CLIpara mostrarnos el camino feliz aprobado por Yehuda .

Guía de inicio rápido de Ember.js mínimo viable de Mike Grassotti

Esta guía de inicio rápido debería llevarlo de cero a un poco más de cero en un par de minutos. Cuando termine, debe sentirse algo seguro de que ember.js realmente funciona y, con suerte, estará lo suficientemente interesado como para aprender más.

ADVERTENCIA: No intente simplemente esta guía y luego piense que las brasas apestan porque "Podría escribir esa guía de inicio rápido mejor en jQuery o Fortran" o lo que sea. No estoy tratando de venderte brasa ni nada, esta guía es poco más que un hola mundo.

Paso 0: echa un vistazo a jsFiddle

este jsFiddle tiene todo el código de esta respuesta

Paso 1: incluye ember.js y otras bibliotecas necesarias

Ember.js requiere jQuery y Handlebars. Asegúrese de que esas bibliotecas se carguen 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>

Paso 2: describe la interfaz de usuario de tu aplicación usando una o más plantillas de manubrio

Por defecto, ember reemplazará el cuerpo de su página html usando el contenido de una o más plantillas de handlbars. Algún día estas plantillas estarán en archivos .hbs separados ensamblados por sprockets o tal vez grunt.js. Por ahora, mantendremos todo en un archivo y usaremos etiquetas de script.

Primero, agreguemos una sola applicationplantilla:

<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>

Paso 3: inicialice su aplicación ember

Simplemente agregue otro bloque de script App = Ember.Application.create({});para cargar ember.js e inicializar su aplicación.

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

Eso es todo lo que necesita para crear una aplicación de brasas básica, pero no es muy interesante.

Paso 4: agrega un controlador

Ember evalúa cada plantilla de manillar en el contexto de un controlador. Entonces la applicationplantilla tiene una coincidencia ApplicationController. Ember crea es automáticamente si no define uno, pero aquí vamos a personalizarlo para agregar una propiedad de mensaje.

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

Paso 5: definir rutas + más controladores y plantillas

El enrutador Ember facilita la combinación de plantillas / controladores en una aplicación.

<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 que esto funcione, modificamos nuestra plantilla de aplicación agregando un {{outlet}}ayudante. El enrutador Ember presentará la plantilla adecuada en la salida según la ruta del usuario. También usaremos el {{linkTo}}ayudante para agregar enlaces de navegación.

    <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>

¡Hecho!

Un ejemplo funcional de esta aplicación está disponible aquí .

Puede usar este jsFiddle como punto de partida para sus propias aplicaciones de ascuas

Próximos pasos...

• Leer las guías de Ember
• Tal vez compre el screencast de Peepcode
• Haga preguntas aquí en Stack Overflow o en ember IRC

Como referencia, mi respuesta original:

Mi pregunta es para cualquier experto en Ember.js, y ciertamente para los respectivos autores de los tutoriales: ¿Cuándo debería usar los patrones de diseño de un tutorial y cuándo del otro?

Estos dos tutoriales representan las mejores prácticas en el momento en que se redactaron. Seguro que hay algo que se puede aprender de cada uno, ambos están condenados a quedar desactualizados porque ember.js se está moviendo muy rápido. De los dos, Trek's es mucho más actual.

¿Qué componentes de cada uno son preferencias personales y qué componentes resultarán esenciales a medida que mi aplicación madure? Si está desarrollando una nueva aplicación Ember, no recomendaría seguir el enfoque de Code Lab. Está demasiado desactualizado para ser útil.

En el diseño de Code Lab, Ember parece estar más cerca de existir dentro de la aplicación (a pesar de que es el 100% de su JS personalizado), mientras que la aplicación de Trek parece vivir más dentro de Ember.

Tu comentario es genial. CodeLab está aprovechando los componentes centrales de Ember y accediendo a ellos desde un alcance global. Cuando se escribió (hace 9 meses), esto era bastante común, pero hoy en día las mejores prácticas para escribir aplicaciones de ember están mucho más cerca de lo que estaba haciendo Trek.

Dicho esto, incluso el tutorial de Trek está desactualizado. Componentes que eran necesarios ApplicationViewy que ApplicationControllerahora genera el propio marco.

Con mucho, el recurso más actual es el conjunto de guías publicadas en http://emberjs.com/guides/ ; se han escrito desde cero durante las últimas semanas y reflejan la última versión (prelanzamiento) de ember.

También vería el proyecto wip de trek aquí: https://github.com/trek/ember-todos-with-build-tools-tests-and-other-modern-conveniences

EDITAR :

@ sly7_7: también daría otro ejemplo, usando ember-data https://github.com/dgeb/ember_data_example

Hay un nuevo screencast de 30 minutos realizado por @tomdale: https://www.youtube.com/watch?v=Ga99hMi7wfY

Recomiendo encarecidamente usar Yeoman y el generador de ascuas que lo acompaña. De inmediato, obtiene todas las herramientas que necesita para desarrollar, probar y preparar una aplicación para producción. Como beneficio adicional, podrá dividir sus plantillas de vista en varios archivos y comenzar con una estructura de directorio inteligente que le facilitará la creación de una base de código mantenible.

Escribí un tutorial sobre cómo ponerlo en funcionamiento en unos 5 minutos. Simplemente instale node.js y siga aquí

Vale la pena ver el screencast Fire Up Ember - Peepcode .

También revise este tutorial gratuito titulado Aprendamos Ember de Tuts + Premium. Es gratis porque es de su free coursesserie. Este curso, como lo llaman los chicos de Tuts, está dividido en catorce capítulos fáciles de seguir.

Espero que esto ayude.

Saludos,

Prefiero el enfoque de labradores de carbón. Te ofrece un montón de cosas listas para usar, que incluyen:

• una bonita arquitectura de carpetas con un enfoque de "módulo".
• neutro
• recarga en vivo
• minificar
• afear
• jshint

y más.

y es muy fácil de configurar, simplemente ejecute yo charcoalpara crear una aplicación y luego yo charcoal:module myModulepara agregar un nuevo módulo.

más información aquí: https://github.com/thomasboyt/charcoal

Acabo de crear un Starter Kit, si desea utilizar el último EmberJS con Ember-Data, con el motor de plantillas Emblem. Todo envuelto en Middleman, para que puedas desarrollar con CoffeeScript. Todo en mi GitHub: http://goo.gl/a7kz6y

Aunque Flame obsoleto en Ember.js sigue siendo un buen tutorial para alguien que mira a Ember por primera vez.

Comencé a crear una serie de videos que comienzan antes de Ember y se basan en el uso de Ember con ira en casos de uso serios para cosas del mundo real.

Si estás interesado en que esto salga a la luz del día (estoy más que feliz de publicarlo eventualmente si hay interés) definitivamente deberías ir a la publicación que hice y presionar "me gusta" (o simplemente comentar aquí, Supongo):

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

Estoy muy interesado en hacerlo para ayudar a la comunidad a prosperar, pero también para ayudar a las personas a aprender cómo crear sitios web estándar de una manera fácil.