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

La Brasa Mínima Viable de Mike Grassotti.guía de inicio rápido de js

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

ADVERTENCIA: No solo intentes esta guía, luego piensa ember-sucks porque "Podría escribir esa guía de inicio rápido mejor en jQuery o Fortran" o lo que sea. No estoy tratando para venderte en ember o cualquier cosa, 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 requeridas

<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 uno o más manillares plantillas

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

Primero, vamos a añadir una única application plantilla:

<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 con 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 ember básica, pero no es muy interesante.

Paso 4: Añadir un controlador

Ember evalúa cada plantilla de manillar en el contexto de un controlador. Así que la plantilla application tiene un ApplicationController coincidente. Ember creates 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

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 hacer que esto funcione, modificamos nuestra plantilla de la aplicación agregando un ayudante {{outlet}}. Ember router renderizará la plantilla apropiada en el outlet dependiendo de la ruta del usuario. También usaremos el ayudante {{linkTo}} para añadir 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 aquí.

Puedes usar este jsFiddle como punto de partida punto para sus propias aplicaciones ember

Próximos Pasos...

• Lea las Guías de brasas
• tal vez comprar el Peepcode screencast
• Haga preguntas aquí en Stack Overflow o en ember IRC

Para referencia, mi respuesta original:

Mi pregunta es para cualquier brasa.js experto, y sin duda los respectivos autores tutorial: ¿Cuándo debo utilizar patrones de diseño de un tutorial, y cuando de la ¿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 quedar anticuados porque ember.js se está moviendo muy rápidamente. De los dos, el de Trek 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 lo recomendaría siguiendo el enfoque del Laboratorio de Código. Es demasiado anticuado 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.

Su comentario es bang-on. CodeLab está aprovechando los componentes ember principales y accediendo a ellos desde el ámbito 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 Trek estaba haciendo.

Dicho esto, incluso el tutorial de Trek se está volviendo obsoleto. Los componentes que se requerían ApplicationView y ApplicationController ahora son generados por el propio framework.

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

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

EDIT :

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

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

Recomiendo encarecidamente usar Yeoman y su generador de brasas. De inmediato, obtiene todas las herramientas que necesita para desarrollar, probar y preparar una aplicación para la producción. Como 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 mantenible.

He escrito un tutorial para ponerlo en marcha en unos 5 minutos. Simplemente instale node.js y siga a lo largo aquí

El screencast Fire Up Ember - Peepcode vale la pena verlo.

También ir a través de este tutorial gratuito titulado Vamos a aprender Ember de Tuts+ Premium. Es libre porque es de su serie free courses. Este curso, como lo llaman los Tuts, está dividido en catorce capítulos fáciles de seguir.

Espero que esto ayude.

Saludos,

Prefiero el enfoque de carbonero yeoman. Te da un montón de cosas fuera de la caja incluyendo:

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

Y más.

Y es muy fácil de configurar, simplemente ejecute 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

Acabo de crear un Kit de inicio, si desea utilizar los últimos EmberJS con Ember-Data, con motor de plantilla de emblema. Todo envuelto en Middleman, para que pueda desarrollar con CoffeeScript. Todo en mi GitHub: http://goo.gl/a7kz6y

Aunque anticuado Llama en Brasa.js sigue siendo un buen tutorial para alguien que mira a ember por primera vez.

He comenzado a construir una serie de videos que comienzan desde antes de Ember y construir hacia el uso de Ember en la ira en casos de uso graves para cosas del mundo real.

Si estás interesado en ver este éxito a la luz del día (estoy más que feliz de finalmente ponerlo público si hay interés) definitivamente debes ir al post que hice y golpear "me gusta" (o simplemente comentar aquí, yo supongo que):

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 florecer, pero también para ayudar a la gente a aprender a construir sitios web estándar de una manera fácil.