Share
Une chose est sûre: les temps ont bien changé. Il n'y a pas si longtemps, le développement frontal, bien que pas simple, était gérable. Apprenez le HTML, un peu de CSS et vous êtes sur la bonne voie. De nos jours, cependant, faute de meilleurs mots, il y a beaucoup plus de variables à jongler.
Les pré-processeurs, le réglage des performances, les tests, l'optimisation d'images et la minification ne représentent que quelques-uns des facteurs clés que le développeur front-end moderne doit garder à l'esprit..
Par exemple, bien que facile à utiliser, CSS n’évolue pas bien. Et, bien que puissant, JavaScript peut parfois être un langage laid et difficile à utiliser. Ensuite, il y a l'aspect performance; nous ne sommes plus simplement en train de concevoir pour Internet Explorer et Firefox. Non, ces derniers temps, nous avons une multitude de navigateurs, de périphériques, de résolutions et de vitesses de connexion à prendre en compte lors du développement de nouvelles applications..
Dire que notre industrie est incroyablement difficile serait le moins que l'on puisse dire du siècle..
L’avantage, c’est que, pour chaque blocage, des solutions ont certainement été apportées.
L'avantage est que, pour chaque blocage, des solutions ont certainement été fournies par les membres de la communauté. Considérons le problème de la mise à l'échelle CSS; Eh bien, les pré-processeurs, tels que Sass, Less et Stylus ont été introduits pour nous simplifier la vie de façon radicale. Qu'en est-il du problème méchant du préfixage de navigateur CSS3? Compass s'en occupe! Et le dilemme JavaScript? Encore une fois, CoffeeScript et maintenant, TypeScript à la rescousse! Le seul problème est que chaque nouvelle solution nécessite son propre système et son propre processus. Comme on pouvait s'y attendre, avec le temps, cela peut considérablement compliquer votre flux de travail. Nous avons maintenant plusieurs onglets de terminal ouverts, chacun surveillant un sous-ensemble des fichiers de nos projets et écoutant les modifications. Et ce n'est que la pointe de l'iceberg. Nous n'avons pas encore abordé le workflow, les meilleures pratiques de codage, l'optimisation d'image, les tests et le développement d'un processus de construction automatisé. Même écrire à propos de toutes ces étapes me raccourcit le souffle! Ne serait-il pas fantastique que quelqu'un réunisse tous ces pré-processeurs et ces meilleures pratiques dans un seul package facile à utiliser?
Créé par certaines personnes sympathiques de Google (dont Paul Irish et Addy Osmani), Yeoman est la solution à vos problèmes. Comme le dit l’équipe principale, Yeoman propose un flux de travail avisé pour vous permettre de démarrer et d’exécuter de nouveaux projets aussi rapidement que possible. Mais qu'est-ce que cela signifie vraiment? Eh bien, il offre la possibilité d’échafauder de nouveaux projets, ainsi que les cadres et outils de test nécessaires. Cela se traduit essentiellement par une configuration moins fastidieuse et davantage de création.
Pour commencer à utiliser Yeoman, nous devons d’abord l’installer à partir de la ligne de commande. Exécutez la commande suivante:
curl -L get.yeoman.io | frapper
Ce script exécute diverses tâches, y compris l’installation des bibliothèques nécessaires à Yeoman. Vous constaterez probablement que cela nécessite quelques étapes de votre part, mais ne vous inquiétez pas; ça va vous dire exactement ce qui doit être fait!
Une fois l'installation terminée, exécutez yeoman pour voir ce qui est disponible. Vous trouverez une variété d'options, telles que init, pour initialiser un nouveau projet, construire, pour créer un spécial, optimisé dist dossier pour le déploiement, et installer, ce qui rend le processus de gestion de paquets aussi simple que possible.
Pour en savoir plus sur ce que fait chaque option, ajoutez
--Aidez-moià la commande:yeoman init --help.
Créons un nouveau projet avec Yeoman. Créer un nouveau répertoire sur votre bureau, CD à partir du terminal, et exécutez:
yeoman init
À ce stade, vous serez invité à poser quelques questions..
Ces questions vous permettent de configurer votre nouveau projet immédiatement. Pour l'instant, choisissez «Non» à chaque question.
Si vous préférez éviter ces questions à l'avenir, lancez plutôt
yeoman init quickstart. Cela préparera une nouvelle application, avec Modernizr, jQuery et HTML5 Boilerplate cuit au four.
Avec cette seule commande, Yeoman échafaude instantanément un nouveau projet pour vous. Ne soyez pas submergé par tous ces fichiers, cependant; s'ils n'étaient pas générés pour vous, vous les créeriez éventuellement manuellement. Il suffit de penser à Yeoman en tant que robot utile, qui effectue tout le travail manuel pour vous..
"Salut mec; va me chercher jQuery and Modernizr! ”
Maintenant que nous avons un nouveau projet, lançons un serveur de prévisualisation et commençons à surveiller l'application pour en vérifier les modifications..
serveur yeoman
Instantanément, Google Chrome sera lancé, affichant votre projet (ainsi, plus aucune erreur de sécurité). Eh bien, c'est pratique, mais, comme vous le constaterez rapidement, il y a encore beaucoup à voir. Placez votre navigateur et votre éditeur côte à côte et essayez les choses suivantes:
Changer la h1 le texte de la balise et regardez-la se mettre à jour instantanément dans le navigateur, sans actualisation. Yeoman à votre service! Il y parvient via l’extension LiveReload Google Chrome, mais si ce n’est pas installé, un processus de rechargement de secours sera utilisé..
Changement main.css à main.sass (ou main.scss, si c'est votre préférence) et profitez d'une compilation et d'une mise à jour instantanées dans le navigateur. Pour le tester, essayez de créer et d'utiliser une variable.
// main.sass $ textColor: # 666 couleur du corps: $ textColor
Agréable! Aucune configuration requise. Vous pouvez maintenant séparer vos feuilles de style, si nécessaire, et les importer dans main.sass.
// main.sass @import 'grille' @import 'boutons' module @import ''
Chaque fois qu'un fichier est enregistré, Yeoman recompilera automatiquement votre Sass en CSS standard et actualisera le navigateur..
Si vous êtes un fan de Sass, il est probable que vous préfériez également l'excellent framework Compass. Pas de soucis; Yeoman est heureux d'obliger. Le support Compass est déjà disponible. il suffit d'importer les modules applicables et de continuer comme d'habitude.
// main.sass @import 'compass / css' * + taille de la boîte (border-box). largeur de la boîte: 200px + transition (largeur 1s) &: largeur du survol: 400px
Si vous n'êtes pas encore un préprocesseur converti, vous devez l'admettre: c'est nettement mieux que l'alternative:
* -webkit-box-sizing: border-box; -moz-box-dimensionnement: border-box; taille de la boîte: boîte-frontière; .box width: 200px; -webkit-transition: largeur 1s; -moz-transition: largeur 1s; -ms-transition: largeur 1s; -o-transition: largeur 1s; transition: largeur 1s; .box: survol largeur: 400px;
JavaScript est parfait, mais certains pensent que CoffeeScript fournit une syntaxe considérablement plus propre qui comble la plupart des lacunes du langage (au moins visuellement)..
Dans le scripts / répertoire, éventuellement créer un nouveau dossier, café/, et ajoutez votre premier fichier CoffeeScript: personne.café.
# scripts / coffee / person.coffee class Person
Enregistrez le fichier et, comme par magie, Yeoman le compile immédiatement en JavaScript vanille et place le nouveau fichier directement dans le fichier parent. scripts / annuaire. Voir par vous-même:
// scripts / person.js var Person; Person = (function () function Person () return Person;) ();
Parfait, et plus important encore, sans effort!
Si vous avez besoin de modifier la structure du répertoire de quelque manière que ce soit, reportez-vous à la
gruntfile.jsfichier à la racine de votre application. En coulisse, c'est l'outil Grunt de Ben Alman qui configure la compilation.
À ce stade seulement, Yeoman nous a donné beaucoup de flexibilité. Avec ce single yeoman init commande, vous pouvez maintenant créer un style pour vos sites Web avec Sass, le code dans CoffeeScript et, au fur et à mesure des modifications, afficher instantanément les mises à jour reflétées dans le navigateur. Mais nous n'avons pas encore fini! Même pas près.
Yeoman s'appuie sur un puissant gestionnaire de paquets pour le Web, appelé Bower. Qu'est-ce qu'un gestionnaire de paquets? Eh bien, si vous téléchargez toujours manuellement, par exemple, la bibliothèque Underscore de underscorejs.org, vous le faites mal. Que se passe-t-il lorsque la bibliothèque est mise à jour quelques mois plus tard? Voulez-vous retélécharger manuellement la bibliothèque à nouveau? Le temps, c'est de l'argent; alors laissez Yeoman faire le travail pour vous.
Tirons Underscore dans notre projet.
yeoman installer un trait de soulignement
Yeoman répondra à cette commande en téléchargeant la dernière version de la bibliothèque et en la plaçant dans une nouvelle vendeur annuaire. Maintenant, il est prêt à être utilisé!
Mais que se passe-t-il si nous ne sommes pas exactement sûr du nom de l'actif requis? Dans ces situations, on peut se référer à recherche yeoman. Sans transmettre d'arguments, Yeoman renverra une liste de tous les actifs pouvant être installés. Recherchons le populaire normaliser.css projet, de Nicolas Gallagher.
N'oubliez pas: Bower n'est pas exclusivement destiné aux ressources spécifiques à JavaScript..
bonne recherche normaliser
Au moment d'écrire ces lignes, deux projets doivent être retournés:
Ça ressemble à normaliser-css est celui que nous voulons.
yeoman installe normaliser-css
Maintenant, importez-le de la même manière que vous le feriez normalement:
Vous pouvez également renommer le fichier en normaliser.scss, et l'importer dans votre main.sass fichier.
// main.sass @import '…… / scripts / vendor / normalize-css / normalize'
Vous voudrez vous rappeler une variété d'autres commandes spécifiques à Bower:
Accentsconagua
yeoman désinstaller jquery - Désinstaller un paquet.yeoman update jquery - Mettre à jour la bibliothèque à la dernière version.liste yeoman - Lister tous les paquets actuellement installés.Si les tests ne font pas encore partie de votre flux de travail, cela devrait l'être! Quoi de mieux qu'un robot qui vérifie automatiquement votre travail après chaque sauvegarde? Heureusement, Yeoman facilite incroyablement le test de vos applications. Le framework Mocha et le PhantomJS (Headless Webkit) sont immédiatement disponibles, mais ils sont facilement configurables si vous préférez un autre outil, comme Jasmine. De plus, il offre la bibliothèque d’affirmations Chai, que vous allez rapidement aimer..
Ouvrez le tests / index.html fichier. Vers le bas, vous verrez quelques exemples de tests fournis. Allez-y, supprimez-les et créez un nouveau fichier de test: spec / person.js. Voici un test pour vous aider à démarrer.
// test / spec / person.js describe ('Une personne', function () it ('devrait avoir un âge supérieur à 0', function () var person = new Nom de la personne: 'Jeffrey', age: 27 expect (person.age) .to.be.above (0););); Si vous préférez utiliser Chai's (une bibliothèque d'assertions) devrait interface, retour à index.html, et changer attendre = chai.expect à devrait = chai.should (). Maintenant, vous pouvez mettre à jour vos spécifications, afin qu’elles se lisent:
person.age.should.be.above (0);
Quelle méthode vous choisissez est entièrement à vous. Il n'y a pas de choix correct; seulement les préférences.
Pour exécuter ce test, retournez au terminal et tapez:
test yeoman
Comme prévu, le test doit échouer avec le message suivant: “Impossible de trouver la variable: Personne.«Le test est un échec mais, plus important encore, il fonctionne: nous le testons! Parce que Yeoman exploite l'excellent outil PhantomJS (headless Webkit), ces tests peuvent même être exécutés sans le navigateur..
Si vous préférez écrire vos tests dans CoffeeScript, vous devrez apporter quelques modifications à votre gruntfile.js. Commencez par ajouter un nouveau compiler objecter à la boussole tâche. Dans cet objet, spécifiez les fichiers à surveiller. Dans ce cas, nous demandons à Grunt de compiler tous les fichiers CoffeeScript au sein de test / spec / café.
// Coffee to JS compilation coffee: dist: src: 'app / scripts / ** / *. Coffee', destination: 'app / scripts', compiler: fichiers: "test / spec /": " test / spec / coffee / *. coffee "
La dernière étape consiste à dire à Grunt de garder un œil sur ce répertoire. Lorsqu'un fichier est enregistré, il doit être recompilé en conséquence..
Trouvez le regarder tâche et mettre à jour le café objet, comme si:
# tweet.text 