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

Question

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

Mi pregunta es exactamente eso: ¿cuáles son las mejores prácticas para Ember JS? ¿Hay algún tutorial actualizado o ejemplos de trabajo que muestren cómo se pretende utilizar Ember JS? ¡Las muestras de código serían geniales!

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

Answer 1

Guía de inicio rápido de Minimum Eble.js de Mike Grassotti

Esta guía de inicio rápido debería llevarlo de cero a poco más de cero en un par de minutos. Cuando hayas terminado, deberías sentirte algo seguro de que ember.js realmente funciona y con suerte se interesará lo suficiente como para obtener más información.

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

Paso 0 - Mira jsFiddle

este jsFiddle tiene todo el código de esta respuesta

Paso 1 - Incluye ember.js y otras bibliotecas requeridas

Ember.js requiere jQuery y Handlebars. Asegúrese de que esas bibliotecas estén cargadas 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 manubrios

Por defecto, Ember reemplazará el cuerpo de su página html utilizando el contenido de una o más plantillas de barra de herramientas. Algún día estas plantillas estarán en archivos .hbs separados ensamblados por piñones o tal vez grunt.js. Por ahora guardaremos todo en un archivo y usaremos etiquetas de script.

Primero, agreguemos una sola plantilla de application :

<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 - Inicializa tu aplicación de brasas

Simplemente agregue otro bloque de script con App = Ember.Application.create({}); 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 ascua 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. Así application plantilla de la application tiene un ApplicationController coincidente. Ember crea automáticamente si no define uno, pero aquí lo personalizamos 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 router 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 ayudante de {{outlet}} . El enrutador Ember presentará la plantilla adecuada en la toma de corriente dependiendo de la ruta del usuario. También usaremos el ayudante {{linkTo}} 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 de trabajo de esta aplicación está disponible here .

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

Próximos pasos...

• Lea las Guías de Ember
• Tal vez compre el screencast de Peepcode
• Haga preguntas aquí en o en el IRC ascua

Como referencia, mi respuesta original:

Mi pregunta es para cualquier experto de Ember.js, y ciertamente para los autores del tutorial respectivo: ¿Cuándo debo usar 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 fueron escritos. Seguro que hay algo que se puede aprender de cada uno, ambos están tristemente condenados a volverse obsoletos porque ember.js se está moviendo muy rápido. De los dos, Trek es mucho más actual.

¿Qué componentes de cada uno son preferencias personales y qué componentes serán esenciales a medida que madure mi aplicación? Si está desarrollando una nueva aplicación de brasas, no recomendaría seguir el enfoque 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 bang-on. CodeLab está aprovechando los componentes básicos de la brasa y accediendo a ellos desde un alcance global. Cuando fue escrito (hace 9 meses) esto era bastante común, pero hoy en día las mejores prácticas para escribir aplicaciones de ascuas están mucho más cerca de lo que Trek estaba haciendo.

Dicho esto, incluso el tutorial de Trek está desactualizado. Los componentes requeridos ApplicationView y ApplicationController ahora los genera el propio framework.

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

También vería el proyecto de 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

Answer 2

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

Answer 3

Aunque Flame on Ember.js es obsoleto, sigue siendo un buen tutorial para alguien que está mirando una brasa por primera vez.

Answer 4

Empecé a crear una serie de videos que comenzaban antes de Ember y desarrollo hacia el uso de Ember enojado en casos de uso serio para cosas del mundo real.

Si estás interesado en ver esto 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

Tengo muchas ganas de hacerlo para ayudar a la comunidad a prosperar, pero también para ayudar a las personas a aprender a construir sitios web estándar de una manera fácil.

Answer 5

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

Answer 6

Hay un proyecto importante que los desarrolladores nuevos y 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 más difícil como en la respuesta de Mike Grassotti, no debería hacer eso para el código de producción. Especialmente cuando tenemos un proyecto tan poderoso y fácil de usar como Ember-CLI para mostrarnos el feliz camino aprobado por Yehuda.

Answer 7

Prefiero el enfoque del carbonero. Te da un montón de cosas de la caja que incluye:

• una bonita arquitectura de carpetas usando un enfoque de ''módulo''.
• neutro
• recarga en vivo
• minify
• afear
• jshint

y más.

y es súper fácil de configurar, solo ejecuta yo charcoal para crear una aplicación y luego yo charcoal:module myModule para agregar un nuevo módulo.

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

Answer 8

Recomiendo usar Yeoman y su generador de brasas. Al instante obtienes todas las herramientas que necesitas para desarrollar, probar y preparar una aplicación para producción. Como una ventaja adicional, podrá dividir sus plantillas de vista en varios archivos y comenzar con una estructura de directorios inteligente que le facilitará la creación de una base de código que pueda mantenerse.

He escrito un tutorial sobre cómo ponerlo en funcionamiento en aproximadamente 5 minutos. Simplemente instale node.js y siga por here

Answer 9

También ve a través de este tutorial gratuito titulado Let''s Learn Ember de Tuts + Premium. Es gratis porque es de sus series de free courses . Este curso, como lo llaman los Tuts, está dividido en catorce capítulos fáciles de seguir.

Espero que esto ayude.

Saludos,

Answer 10

Peepcode screencast vale la pena mirar.