Comment concevoir une application Ember.js
Il a été difficile de suivre l'évolution de Ember JS à l'approche (et à atteindre!) De la version 1.0.0. Les didacticiels et la documentation sont venus et ont disparu, ce qui a créé beaucoup de confusion au sujet des meilleurs pratiques et l'intention des développeurs d'origine.
Ma question est exactement la suivante: quelles sont les meilleures pratiques pour Ember JS? Y a-t-il des tutoriels mis à jour ou des exemples de travail montrant comment Ember JS est destiné à être utilisé ? Des échantillons de code seraient formidables!
Merci à tous, en particulier aux développeurs de Ember JS!
Il existe un projet important dont les développeurs Ember.js nouveaux et vétérans devraient tirer parti:
Bien qu'il 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 le faire pour le code de production. Surtout quand nous avons un projet aussi puissant et facile à utiliser comme Ember-CLI pour nous montrer le Yehuda approuvé chemin heureux .
Guide de démarrage rapide de Mike Grassotti Minimum Viable Ember.js
Ce guide de démarrage rapide devrait vous faire passer de zéro à légèrement supérieur à 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, être suffisamment intéressé pour en savoir plus.
AVERTISSEMENT: N'essayez pas simplement ce guide, puis pensez que la braise de braise cause "Je pourrais mieux écrire ce guide de démarrage rapide dans jQuery ou Fortran" ou autre chose. Je n'essaye pas de vous vendre sur ember 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 - Inclure ember.js et 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 guidon
Par défaut ember remplacera le corps de votre page html en utilisant le contenu d'un ou plusieurs modèles de guidons. 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 conservera tout dans un seul fichier et utilisera des balises de script.
Tout d'abord, ajoutons un seul modèle 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>
Étape 3 - Initialisez votre application ember
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 ember, 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. Ainsi, le modèle application a un ApplicationController correspondant. Ember crée est automatiquement si vous n'en définissez pas un, mais ici personnalisons-le 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éfinir des itinéraires + davantage 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 assistant {{outlet}}. Ember rendra le modèle approprié dans la prise en fonction de l'itinéraire de l'utilisateur. Nous utiliserons également l'aide {{linkTo}} 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 de travail de cette application est disponible ici .
Vous pouvez utiliser ce jsFiddle comme point de départ pour vos propres applications ember
Prochaines étapes...
- Lisez les Ember Guides
- Peut-être acheter le Peepcode screencast
- Posez des questions ici sur Stack Overflow ou dans ember IRC
Pour référence, ma réponse originale:
Ma question s'adresse à tout expert Ember.js, et certainement aux auteurs respectifs du didacticiel: quand dois-je utiliser les modèles de conception d'un didacticiel et quand de l'autre?
Ces deux didacticiels représentent les meilleures pratiques au moment de leur rédaction. Bien sûr, il y a quelque chose à apprendre de chacun, les deux sont malheureusement condamné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 évolue? Si vous développez une nouvelle application ember je ne recommanderais pas de suivre l'approche Code Lab. Elle est tout simplement trop dépassée pour être utile.
Dans la conception de Code Lab, Ember semble être plus proche d'exister dans l'application (même si c'est 100% de son JS personnalisé), tandis que l'application de Trek semble vivre davantage dans Ember.
Votre commentaire est super. CodeLab tire parti des principaux composants ember et y accède à partir de la portée mondiale. Quand il a été écrit (il y a 9 mois), c'était assez courant, mais aujourd'hui la meilleure pratique pour écrire ember applications est beaucoup plus proche de ce que faisait Trek.
Cela dit, même le didacticiel de Trek devient obsolète. Les composants qui étaient requis ApplicationView et ApplicationController sont maintenant générés par le framework lui-même.
La ressource la plus récente est de loin l'ensemble des guides publiés sur http://emberjs.com/guides/ - ils ont été rédigés de fond en comble au cours des dernières semaines et reflètent les derniers (pré -release) version de braise.
Je vérifierais également le projet wip de trek ici: https://github.com/trek/ember-todos-with-build-tools-tests-and-other-modern-conveniences
[~ # ~] éditez [~ # ~] :
@ sly7_7: Je donnerais également un autre exemple, en utilisant ember-data https://github.com/dgeb/ember_data_example
Il y a 30 minutes de capture d'écran fraîche faite par @tomdale: https://www.youtube.com/watch?v=Ga99hMi7wfY
Je recommande fortement d'utiliser Yeoman et son générateur ember générateur). De la boîte, vous obtenez tous les outils dont vous avez besoin pour développer, tester et préparer une application pour la production. En prime, vous pourrez diviser vos modèles de vue en plusieurs fichiers et commencer par une structure de répertoires intelligente qui vous facilitera la création d'une base de code maintenable.
J'ai écrit un tutoriel sur sa mise en place et son fonctionnement en environ 5 minutes. Installez simplement node.js et suivez ici
The Fire Up Ember - Peepcode screencast vaut une montre.
Consultez également ce didacticiel gratuit intitulé Apprenons la braise de Tuts + Premium. C'est gratuit parce que c'est de leur free courses séries. Ce cours, comme l'appellent les gars de Tuts, est divisé en quatorze chapitres faciles à suivre.
J'espère que ça aide.
Cordialement,
Bien que dépassé Flame on Ember.js est toujours un bon tutoriel pour quelqu'un qui regarde ember pour la première fois.
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
J'ai commencé à construire une série de vidéos qui commencent avant Ember et qui visent à utiliser Ember en colère dans des cas d'utilisation sérieux pour des choses du monde réel).
Si vous êtes intéressé à voir ce succès à la lumière du jour (je suis plus qu'heureux de le rendre public s'il y a un intérêt), vous devriez certainement consulter le post que j'ai fait et cliquer sur "J'aime" (ou simplement commenter ici, J'imagine):
Je suis très désireux de le faire pour aider la communauté à prospérer, mais aussi pour aider les gens à apprendre comment créer des sites Web standard de manière simple.
Je préfère l'approche du charbon de bois. Il vous donne une tonne de choses hors de la boîte, y compris:
- une architecture de dossier sympa utilisant une approche "module".
- neutre
- rechargement en direct
- minimiser
- enlaidir
- jshint
et plus.
et son super facile à installer, lancez simplement yo charcoal pour créer une application puis yo charcoal:module myModule pour ajouter un nouveau module.
plus d'informations ici: https://github.com/thomasboyt/charcoal