Premiers pas avec ember.js

Installation ou configuration #

Démarrer avec Ember est facile. Les projets Ember sont créés et gérés via notre outil de construction en ligne de commande Ember CLI. Cet outil fournit :

• Gestion moderne des actifs d’application (y compris la concaténation, la minification et la gestion des versions).
• Générateurs pour aider à créer des composants, des itinéraires, etc.
• Une mise en page de projet conventionnelle, rendant les applications Ember existantes faciles à aborder.
• Prise en charge de JavaScript ES2015/ES6 via le projet Babel. Cela inclut la prise en charge des modules JavaScript, qui sont utilisés tout au long de ce guide.
• Un harnais de test QUnit complet.
• La possibilité de consommer un écosystème croissant de [Ember Addons] (https://emberobserver.com/).

Dépendances #

Node.js et npm #

Ember CLI est construit avec JavaScript et attend le Node.js Durée. Il nécessite également des dépendances récupérées via npm. npm est fourni avec Node.js, donc si votre ordinateur a Node.js installé, vous êtes prêt à partir.

Ember nécessite Node.js 0.12 ou supérieur et npm 2.7 ou supérieur. Si vous n’êtes pas sûr d’avoir Node.js ou la bonne version, exécutez ceci sur votre ligne de commande:

node --version
npm --version

Si vous obtenez une erreur “command not found” ou une version obsolète pour Node :

• Les utilisateurs Windows ou Mac peuvent télécharger et exécuter [ce programme d’installation Node.js] (http://nodejs.org/download/).
• Les utilisateurs de Mac préfèrent souvent installer Node en utilisant Homebrew. Après installant Homebrew, exécutez brew install node pour installer Node.js.
• Les utilisateurs de Linux peuvent utiliser ce guide pour l’installation de Node.js sur Linux.

Si vous obtenez une version obsolète de npm, exécutez npm install -g npm.

Gite #

Ember nécessite que Git gère bon nombre de ses dépendances. Git est livré avec Mac OS X et la plupart des distributions Linux. Les utilisateurs de Windows peuvent téléchargez et exécutez ce programme d’installation Git.

Veilleur (facultatif) #

Sur Mac et Linux, vous pouvez améliorer les performances de surveillance des fichiers en installant Watchman.

PhantomJS (facultatif) #

Vous pouvez exécuter vos tests à partir de la ligne de commande avec PhantomJS, sans le besoin d’un navigateur pour être ouvert. Consultez les instructions de téléchargement de PhantomJS.

Installation #

Installez Ember à l’aide de npm :

npm install -g ember-cli

Pour vérifier que votre installation a réussi, exécutez :

ember -v

Si un numéro de version s’affiche, vous êtes prêt à commencer.

Attribuer des ports localhost (en particulier les problèmes d’autorisations/de disponibilité, l’exécution simultanée de plusieurs sites Ember) #

Parfois, il est utile d’attribuer un ou plusieurs ports manuellement plutôt que d’utiliser les valeurs par défaut. Cela peut résoudre les problèmes de disponibilité/permissions des ports ou permettre l’exécution de plusieurs instances ember à la fois.

Pour qu’ember-cli tente d’identifier et d’attribuer un port disponible, utilisez :

ember serve --port 0

Aide par Ember : “Passez 0 pour sélectionner automatiquement un port disponible”. (Dans un terminal, tapez ember help).

Pour exécuter plusieurs sites Ember en même temps, chacun a besoin de son propre serveur et de ports de rechargement en direct. Une approche simple : dans des fenêtres Terminal distinctes, accédez à chaque instance et utilisez ce qui suit pour les lancer avec leurs propres ports :

ember serve --port 0 --live-reload-port 0

Si vous obtenez une erreur de disponibilité ou d’autorisation dans l’un de ces cas, saisissez le script Python suivant à l’invite de votre terminal pour identifier un port disponible :

python -c 'import socket; s=socket.socket(); s.bind(("", 0)); print(s.getsockname()[1]); s.close()'

Utilisez les résultats pour spécifier les ports dont vous savez maintenant qu’ils sont disponibles :

ember serve --port <known_port_1> --live-reload-port <known_port_2>

Création d’application #

Ember CLI vous permet d’utiliser l’une des deux options pour générer une nouvelle application :

1. Créez un dossier et exécutez ember init (génère la structure de l’application et configure git et effectue votre premier commit)
2. Exécutez ember new <app name> (crée un dossier avec le nom spécifié, y entre et exécute ember init)

Une fois le processus de génération terminé, démarrez un serveur de rechargement en direct dans le dossier de l’application en exécutant :

ember server

ou ’ember s’ pour faire court. *Ta-da, vous avez maintenant une application Ember en cours d’exécution ! [Documents officiels][1]

[1] : https://ember-cli.com/user-guide/#getting-started

Création de votre premier modèle

Créons un nouveau modèle en utilisant la commande ember generate.

ember generate template application

Le modèle “application” est toujours affiché à l’écran lorsqu’un utilisateur visite votre application. Dans l’éditeur de votre choix, ouvrez app/templates/application.hbs et ajoutez le code suivant :

<h2>My first Ember application</h2>

{{outlet}}

Vous devriez maintenant voir le texte nouvellement ajouté sur la page d’accueil de votre application. Notez également qu’Ember détecte automatiquement le nouveau fichier et recharge la page pour vous. Propre, non ?

Déployer l’application #

Pour déployer une application Ember, transférez simplement la sortie d’ember build vers un serveur Web. Cela peut être fait avec des outils de transfert de fichiers Unix standard tels que rsync ou scp. Il existe également des services qui vous permettront de vous déployer facilement.

ember build
scp -r dist/* myserver.com:/var/www/public/

normalement, nous utiliserions ember build --environment=production qui fait plus pour rendre votre code prêt pour la production (gzip et minify code).

Comment travailler avec les plugins JavaScript #

Il existe quatre façons de travailler avec les plugins JavaScript,

1. Module complémentaire Ember
2. Importez des plugins JavaScript dans le monde entier
3. Consommez des plugins AMD nommés
4. Via ember-browserify