Comment concevoir une application Ember.js

105

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!

Craig Labenz
la source
7
Cette question se classe en tête pour une recherche Google sur «tutoriel EmberJS», mais elle ne répond pas vraiment à cette question. C'est vraiment une question sur 2 liens sur Internet. Envisageriez-vous de modifier cette question pour l'adapter au titre? Je pense que la meilleure réponse serait celle qui a conduit quelqu'un à travers le processus de création d'une application avec EmberJS.
George Stocker

Réponses:

17

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 .

Matt Jensen
la source
1
Merci Matt! J'en ai fait la réponse acceptée pour diriger le trafic vers Ember-CLI.
Craig Labenz
Je viens de commencer à utiliser Ember pour la première fois il y a quelques jours, et Ember-CLI est assez facile à utiliser et à utiliser. Le seul inconvénient est que cela introduit beaucoup de complexité que vous pourriez ne pas vouloir / avoir besoin (bien que la complexité puisse être négligée, si vous êtes une sorte d'individu confiant). Bower et JSHint et Ember-CLI et Travis CI et les fichiers de configuration EditorConfig et Git, ainsi que d'autres choses comme Broccoli pour les actifs et PhantomJS pour les tests ...
JKillian
Bon point @JKillian. Je sais que la courbe d'apprentissage d'Ember est préoccupante, pour ces raisons. Bien qu'Ember-cli introduit une certaine complexité (Ember-data & Broccoli), il supprime une confusion importante autour des exigences des fournisseurs et de la structuration de votre projet. Il y a donc un grain de sel.
Matt Jensen
1
Entièrement d'accord avec le chemin heureux Ember CLI! Le guide de démarrage rapide de Mike Grassotti ci-dessous serait la "prochaine étape" parfaite s'il n'était pas si ... obsolète. Pour ceux qui cherchent à créer des applications Ember 2.0, la meilleure chose, en ce qui concerne les meilleures pratiques, est de s'assurer que vous comprenez les concepts de base: modèles, itinéraires, services, composants, etc. Les documents Ember sont une excellente ressource, mais depuis que je Je n'ai pas trouvé un seul guide mis à jour reliant tous les concepts (et encore moins avec un exemple d'application) J'ai décidé d'écrire ceci: emberigniter.com/5-essential-ember-2.0-concepts
Frank Treacy
110

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

Mike Grassotti
la source
1
J'ai initialement écrit le Code Lab comme un moyen d'inciter les gens à se familiariser avec les frameworks Ember et MVC, mais malheureusement, je n'ai pas eu le temps de le suivre depuis, et il semble que cela ait suffisamment changé pour que d'autres personnes aient créé de meilleures ressources. Personnellement, j'ai depuis opté pour Angular pour la plupart de mes projets, je trouve que cela nécessite moins de JavaScript et qu'il est un peu plus facile à comprendre. Votre choix MVC est tout à fait personnel, alors ne me laissez pas vous influencer.
PeteLe
1
Je suis allé sur emberjs.com/guides et bien que les explications aient été extrêmement bien faites, les exemples n'étaient pas assez complets pour être exécutés tels quels et souffraient de références cognitives avancées, ce qui est gênant pour quelqu'un qui arrive complètement nouveau. Sont-ils toujours en cours de mise à jour ou existe-t-il une ressource complémentaire?
Walt Stoneburner
1
Bien sûr, ils sont toujours en cours de mise à jour. À partir d'aujourd'hui, la meilleure façon de commencer rapidement est de consulter le screencast peepcode à l' adresse
Mike Grassotti
2
@MikeGrassotti Pouvez-vous modifier votre réponse pour afficher le code source pour démarrer avec EmberJS? Peut-être des instructions étape par étape pour créer une application "Hello World" avec EmberJS?
George Stocker
2
@MikeGrassotti Le wiki de la balise ember.js devrait être mis à jour pour inclure cette question et réponse
MilkyWayJoe
4

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

Matthew Lehner
la source
1

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,

Junaid Qadir
la source
0

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

Ben
la source
0

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

Zoltan
la source
0

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.

Julian Leviston
la source