Comment concevoir une application Ember.js

Il a été difficile de suivre l'évolution d'Ember JS alors que sa version 1.0.0 approchait (et atteignait!). Des didacticiels et de la documentation se sont succédés, ce qui a entraîné une grande confusion sur les meilleures pratiques et l'intention des développeurs d'origine.

Ma question est exactement la suivante: quelles sont les meilleures pratiques pour Ember JS? Existe-t-il des didacticiels mis à jour ou des exemples de travail montrant comment Ember JS est destiné à être utilisé? Des échantillons de code seraient super!

Merci à tous, en particulier aux développeurs Ember JS!

Il existe un projet important dont les développeurs Ember.js, nouveaux et vétérans, devraient tirer parti:

Ember-CLI

Bien que cela nécessite un certain niveau de confort avec la ligne de commande, vous pouvez générer un projet Ember moderne avec les meilleures pratiques recommandées par la communauté en quelques secondes.

Bien qu'il soit avantageux de configurer un projet Ember.js à la dure comme dans la réponse de Mike Grassotti, vous ne devriez pas faire cela pour le code de production. Surtout quand nous avons un projet aussi puissant et facile à utiliser que Ember-CLIde nous montrer le chemin heureux approuvé par Yehuda .

Guide de démarrage rapide d'Ember.js minimum viable de Mike Grassotti

Ce guide de démarrage rapide devrait vous permettre de passer de zéro à un peu plus de zéro en quelques minutes. Une fois terminé, vous devriez vous sentir un peu confiant que ember.js fonctionne réellement et, espérons-le, sera suffisamment intéressé pour en savoir plus.

AVERTISSEMENT: N'essayez pas simplement ce guide, alors pensez que les braises sont nulles parce que "je pourrais mieux écrire ce guide de démarrage rapide dans jQuery ou Fortran" ou autre. Je n'essaie pas de vous vendre en braise ou quoi que ce soit, ce guide n'est guère plus qu'un bonjour-monde.

Étape 0 - Découvrez jsFiddle

ce jsFiddle a tout le code de cette réponse

Étape 1 - Incluez ember.js et les autres bibliothèques requises

Ember.js nécessite à la fois jQuery et Handlebars. Assurez-vous que ces bibliothèques sont chargées avant 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>

Étape 2 - Décrivez l'interface utilisateur de votre application à l'aide d'un ou plusieurs modèles de guidons

Par défaut, ember remplacera le corps de votre page html en utilisant le contenu d'un ou plusieurs modèles de barres de navigation. Un jour, ces modèles seront dans des fichiers .hbs séparés assemblés par des pignons ou peut-être grunt.js. Pour l'instant, nous allons tout conserver dans un seul fichier et utiliser des balises de script.

Tout d'abord, ajoutons un seul applicationmodèle:

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

Étape 3 - Initialisez votre application de braise

Ajoutez simplement un autre bloc de script avec App = Ember.Application.create({});pour charger ember.js et initialiser votre application.

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

C'est tout ce dont vous avez besoin pour créer une application de base de braise, mais ce n'est pas très intéressant.

Étape 4: Ajouter un contrôleur

Ember évalue chaque modèle de guidon dans le contexte d'un contrôleur. Le applicationmodèle a donc une correspondance ApplicationController. Ember crée automatiquement si vous n'en définissez pas, mais personnalisons-le ici pour ajouter une propriété de message.

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

Étape 5: Définissez les routes + plus de contrôleurs et de modèles

Le routeur Ember facilite la combinaison de modèles / contrôleurs dans une application.

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

Pour que cela fonctionne, nous modifions notre modèle d'application en ajoutant un {{outlet}}assistant. Le routeur Ember rendra le modèle approprié dans la prise en fonction de l'itinéraire de l'utilisateur. Nous utiliserons également l' {{linkTo}}assistant pour ajouter des liens de navigation.

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

Terminé!

Un exemple fonctionnel de cette application est disponible ici .

Vous pouvez utiliser ce jsFiddle comme point de départ pour vos propres applications de braise

Prochaines étapes...

• Lisez les guides Ember
• Peut-être acheter le screencast Peepcode
• Posez vos questions ici sur Stack Overflow ou dans IRC de braise

Pour référence, ma réponse originale:

Ma question s'adresse à tout expert Ember.js, et certainement aux auteurs de tutoriels respectifs: quand dois-je utiliser les modèles de conception d'un tutoriel, et quand de l'autre?

Ces deux didacticiels représentent les meilleures pratiques au moment de leur rédaction. Pour sûr, il y a quelque chose qui peut être appris de chacun, les deux sont malheureusement voués à devenir obsolètes car ember.js évolue très rapidement. Des deux, Trek est beaucoup plus actuel.

Quels composants de chacun sont des préférences personnelles et quels composants s'avéreront essentiels à mesure que mon application mûrit? Si vous développez une nouvelle application de braises, je ne recommanderais pas de suivre l'approche Code Lab. Il est tout simplement trop obsolète pour être utile.

Dans la conception de Code Lab, Ember semble être plus proche de l'existant au sein de l'application (même s'il s'agit à 100% de son JS personnalisé), alors que l'application de Trek semble vivre davantage dans Ember.

Votre commentaire est parfait. CodeLab tire parti des composants de base de la braise et y accède à partir d'une portée mondiale. Quand il a été écrit (il y a 9 mois), c'était assez courant, mais aujourd'hui, les meilleures pratiques pour écrire des applications de braise sont beaucoup plus proches de ce que faisait Trek.

Cela dit, même le tutoriel de Trek devient obsolète. Composants qui étaient requis ApplicationViewet ApplicationControllersont maintenant générés par le framework lui-même.

La ressource de loin la plus récente est l'ensemble de guides publiés sur http://emberjs.com/guides/ - ils ont été écrits à partir de zéro au cours des dernières semaines et reflètent la dernière version (pré-version) de ember.

Je vais également consulter le projet wip de trek ici: https://github.com/trek/ember-todos-with-build-tools-tests-and-other-modern-conveniences

MODIFIER :

@ sly7_7: Je donnerais également un autre exemple, en utilisant des données de braise https://github.com/dgeb/ember_data_example

Il y a 30 minutes de screencast frais réalisé par @tomdale: https://www.youtube.com/watch?v=Ga99hMi7wfY

Je recommande fortement d'utiliser Yeoman et son générateur de braises qui l'accompagne. Vous disposez de tous les outils dont vous avez besoin pour développer, tester et préparer une application pour la production. En prime, vous serez en mesure de diviser vos modèles de vue en plusieurs fichiers et de commencer avec une structure de répertoires intelligente qui vous facilitera la création d'une base de code maintenable.

J'ai écrit un tutoriel pour le mettre en service en environ 5 minutes. Installez simplement node.js et suivez ici

Le screencast Fire Up Ember - Peepcode vaut le détour.

Parcourez également ce tutoriel gratuit intitulé Apprenons les braises de Tuts + Premium. C'est gratuit parce que c'est de leur free coursessérie. Ce cours, comme l'appellent les gars Tuts, est divisé en quatorze chapitres faciles à suivre.

J'espère que ça aide.

Cordialement,

Je préfère l'approche yeoman au charbon de bois. Cela vous donne une tonne de choses hors de la boîte, y compris:

• une belle architecture de dossiers utilisant une approche «module».
• neutre
• rechargement en direct
• minifier
• enlaidir
• jshint

et plus.

et c'est super facile à configurer, il suffit de lancer yo charcoalpour créer une application puis yo charcoal:module myModulepour ajouter un nouveau module.

plus d'informations ici: https://github.com/thomasboyt/charcoal

Je viens de créer un kit de démarrage, si vous souhaitez utiliser le dernier EmberJS avec Ember-Data, avec le moteur de modèle Emblem. Le tout enveloppé dans Middleman, vous pouvez donc développer avec CoffeeScript. Tout sur mon GitHub: http://goo.gl/a7kz6y

Bien que Flame sur Ember.js soit obsolète, il reste un bon tutoriel pour quelqu'un qui regarde la braise pour la première fois.

J'ai commencé à créer une série de vidéos qui partent d'avant Ember et développent l'utilisation d'Ember dans la colère dans des cas d'utilisation sérieux pour des choses du monde réel.

Si cela vous intéresse (je suis plus qu'heureux de le rendre public si cela vous intéresse), vous devez absolument consulter le message que j'ai publié et cliquer sur "J'aime" (ou simplement commenter ici, J'imagine):

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

Je veux vraiment aider la communauté à s'épanouir, mais aussi aider les gens à apprendre à créer des sites Web standard de manière simple.