Construire une application Web avec Yeoman – Serveur d’impression

Publié en 2012, Yeoman est un logiciel efficace à code source ouvert pour les applications Web d'échafaudage, utilisé pour rationaliser le processus de développement. Il est principalement connu pour son échafaudage, qui implique l’utilisation de nombreux outils et interfaces coordonnés pour une génération de projet optimisée. GitHub héberge Yeoman.

Les bases de Yeoman

L'expérience de Yeoman est à trois niveaux. Bien qu'ils travaillent ensemble de manière transparente, chaque partie de Yeoman a été développée séparément et fonctionne individuellement. Yeoman inclut principalement "Yo", la forme d’utilitaire de ligne de commande utilisée avec Yeoman. C’est la base de la plate-forme logicielle Yeoman. Ensuite, Yeoman a «Grunt» et «Gulp», qui sont des générateurs d’applications permettant d’automatiser le développement de votre application. Enfin, le logiciel Yeoman contient "npm", un gestionnaire de paquets. Les gestionnaires de packages gèrent les packages de code pour le développement back-end et front-end et leurs dépendances pour vous permettre de développer votre application. Yeoman offre aux développeurs de nombreuses options à combiner dans leur processus de développement.

Yo

Yo est la colle qui maintient une application ensemble. Yo fonctionne avec différents systèmes d'exploitation tels que macOS, Windows et Linux. Yo est conçu pour fonctionner avec les générateurs que vous choisissez pour créer la ligne de base de votre application via un fichier Grunt. Yo est votre point de départ pour comprendre comment fonctionne Yeoman.

Grunt contre Gulp

Grunt est une partie innovante de Yeoman en raison de sa principale caractéristique – automatisation. Les plugins Grunt et Gulp sont gérés et installés via npm, le gestionnaire de paquets de Node.js. En tant que coureur de tâches, Grunt rendra votre travail de développeur aussi simple que possible. Ce système de construction est utilisé pour construire, prévisualiser et tester des projets. Les tâches répétitives telles que la compilation, la minification, la formation de peluches ou les tests unitaires peuvent être effectuées par Grunt. En sauvegardant votre équipe avec le strict minimum du développement d'applications, vous pouvez vous concentrer sur les éléments importants et complexes de ce qui rend votre application unique. En particulier, Grunt peut effectuer des tâches de compilation, de lintérisation, de test unitaire et de minimisation, ainsi que d’autres tâches de base pour vous simplifier la vie. De nombreuses entreprises utilisent Grunt, y compris des grands noms tels que Walmart et WordPress.

Grunt fonctionne également avec des plugins pour personnaliser votre application. Des centaines de plugins sont disponibles pour effectuer diverses tâches. Par exemple, le plugin cc-templates-generator vous permet de générer des modèles basés sur des composants. Ou vous pouvez aussi exécuter des tâches de grunt simultanément, que vous utiliserez avec le plugin simultané. Il est important de noter que si les plug-ins existants ne répondent pas à vos besoins, vous pouvez créer votre propre plug-in sur Grunt via le plug-in grunt-init, puis le publier dans la base de données pour que d'autres puissent également l'utiliser. Le contenu exact et les fichiers créés dépendent du modèle que vous choisissez.

Gulp est très similaire à Grunt dans son utilisation et son utilisation en tant que gestionnaire de tâches automatisé pour la construction de vos applications. Gulp est conçu pour utiliser plusieurs plug-in pour effectuer chaque tâche, tandis que Grunt est conçu pour utiliser des plug-ins qui effectuent plusieurs tâches simultanément. Ensuite, Gulp est significativement plus rapide. Par exemple, Grunt a mis 2,348 secondes pour effectuer une compilation Sass, tandis que Gulp n'a que 1,27 seconde. Gorgée est plus rapide en utilisant des flux de nœuds, ce qui signifie qu’il n’est pas nécessaire d’écrire des fichiers intermédiaires sur le disque.

Votre équipe doit prendre en compte les besoins de votre application lors du choix entre Grunt et Gulp.

npm

Npm est un gestionnaire de paquets. Npm est une plateforme logicielle qui propose groupes et paquets de code, qui peuvent être utilisés pour rationaliser et personnaliser votre application. La disponibilité du code est souvent fournie par le biais de bibliothèques de codes "hébergées" via npm, y compris jQuery, React et Angular. En tant qu’architecte d’application, vous êtes en mesure de choisir le code dont vous avez besoin pour le développement de votre application. Une autre fonctionnalité de npm est que, comme avec Grunt, si le code ou les packages de codes trouvés avec cette plate-forme ne répondent pas à vos besoins, vous pouvez créer votre propre package et le partager avec d'autres. c'est vrai de tout ouvert

Les avantages de Yeoman

• Yeoman combine plusieurs fonctions de débutant dans son processus, rendant le développement d'applications Web facile pour les développeurs non assaisonnés et rationalisé pour les pros.
• Yeoman peut être utilisé pour développer tout type d'application web. Cela offre une incroyable liberté aux développeurs potentiels.
• Ce logiciel a été conçu pour être extrêmement convivial. Il est utilisable même par les développeurs les moins expérimentés, ce qui en fait un excellent choix pour le développement d'applications Web.
• Ce logiciel offre également des processus automatisés pour les applications de construction. La rationalisation du processus de développement complexe est une victoire pour tous les types de développeurs, quel que soit leur niveau d'expérience.
• Yeoman a outils pour d'autres parties du processus de développement d'applications Web que simplement un échafaudage, tel que le code de débogage. Vous pouvez utiliser Chrome Devtools ou votre IDE préféré. Les générateurs Yeoman peuvent également fournir des modes de débogage qui se connectent. Cela signifie que Yeoman peut répondre à différents besoins. vous n'avez pas à utiliser d'innombrables plates-formes logicielles pour créer l'application parfaite.
• Yeoman peut créer des applications dans n'importe quel langage de programmation, y compris Java et C #. La polyvalence offerte par ce logiciel polyglotte peut être extrêmement utile pour les développeurs qui souhaitent ou ont besoin de diversifier leurs applications.
• Yeoman intègre des générateurs. Les utilisateurs de Yeoman ont le choix entre de nombreuses options de générateurs et agissent comme des "plugins" pour le processus de développement de Yeoman. Différents générateurs sont utilisés pour les échafaudages. Par exemple, un utilisateur travaillera avec différents générateurs pour "échafauder" leur projet en les coordonnant et en collaborant entre eux. Les générateurs peuvent également être considérés comme des éléments essentiels d'un projet avant la personnalisation et le développement. Les générateurs populaires incluent:
  • Backbone.js: fournit une structure d'application Web et une base commune pour gérer les données, les vues, les événements, les API REST, etc.
  • AngularJS: Framework JavaScript largement utilisé et populaire capable de prendre en charge des modèles, des itinéraires de vues, etc. Ce générateur comprend également des générateurs solaires pour d’autres fonctions telles que contrôleurs, directives, services, fournisseurs, décorateurs, etc.
  • Bootstrap Generator: Générateur CSS populaire qui exploite sa simplicité en étant très efficace. Il commence avec 4 choix pour un projet Bootstrap: CSS, LESS, SASS et Stylus. De votre choix, le générateur téléchargera le cadre choisi dans les composants de votre projet.
  • JHipster Generator: travaille au développement et au déploiement d'applications Web Spring Boot et Angular / React.
  • Hyperledger-composer: utilise les définitions de réseau d'entreprise Hyperledger Composer en tant qu'entrée pour créer des artefacts liés à l'écriture de nouvelles applications.
• Yeoman est Open source. Cela signifie que les utilisateurs bénéficient du marché libre du développement de logiciels; ils peuvent tirer parti des meilleurs développeurs pour mettre en commun leurs talents afin de créer le meilleur système optimisé.

Inconvénients de Yeoman

• Être capable d'utiliser n'importe quel langage de programmation et de satisfaire les amateurs signifie que Yeoman peut ne pas être le meilleur système pour les développeurs expérimentés qui souhaitent rationaliser et personnaliser le processus autant que possible tout en offrant des options de développement avancées. La plate-forme de Yeoman pourrait être trop générique pour certains.

• Relativement au dernier point, certains développeurs peuvent constater qu’en raison de la configuration du générateur de Yeoman, ils passent trop de temps adapter et tester les générateurs au lieu de travailler sur le développement actuel des applications.

• Une autre plainte commune à propos de Yeoman est la entretien requis. Il est important que les développeurs s’assurent de disposer en permanence des programmes, générateurs et autres outils les plus à jour pour produire le meilleur produit. Ainsi, un projet ou une application n'est jamais vraiment terminé. Les meilleures pratiques changent constamment; pour rester compétitif, il est essentiel que les développeurs suivent le rythme.

L’API claire de Yeoman est une excellente option pour ceux qui débutent ou souhaitent explorer la possibilité de créer une application. En outre, il peut également aider à automatiser certaines tâches courantes pour améliorer le flux de travail des développeurs.

Yeoman, malgré quelques limitations, a une communauté croissante derrière elle et est intégrée au flux de travail des développeurs pour une intégration continue, un contrôle de version, etc., afin de rendre les applications de construction beaucoup moins décourageantes et fastidieuses. Yeoman permet également un grand nombre de choix – comme avec Grunt ou Gulp et npm – pour vous assurer que vous disposez de la combinaison logicielle qui correspond le mieux aux désirs de vos équipes pour le processus de développement de vos applications Web.

Maintenant que nous en savons plus sur Yeoman, passons à la construction. Voici un exemple d'utilisation de Yeoman pour créer un exemple d'application. Cet exemple d'application particulière sera une implémentation de TodoMVC.

Étape 1: Configurer l'environnement de développement

La majorité des interactions avec Yeoman se fera en ligne de commande.

Avant de commencer à installer Fountain Webapp Generator, assurez-vous que les éléments suivants sont installés:

• Node.js 6 ou supérieur
• npm 3 ou supérieur
• Git
• Yeoman toolet

Consultez ce guide si vous rencontrez des erreurs d'autorisation ou d'accès.

Étape 2: Installez un générateur Yeoman

Installez un générateur utilisé pour les projets FountainJS afin de réduire le temps passé à la configuration du code standard et de la structure des dossiers. Avec la commande npm, installez generator-fountain-webapp à l’aide de la commande npm install --global generator-fountain-webapp.

De plus, utilisez le menu interactif Yeoman pour rechercher d'autres générateurs. Exécutez la commande yo, sélectionnez installer un générateuret poursuivez la recherche d’autres générateurs publiés.

Étape 3: utilisez un générateur pour échafauder votre application

Cette étape montrera comment Yeoman génère des fichiers spécifiquement pour la bibliothèque ou la structure de votre choix. Il y aura également des options pour utiliser des bibliothèques externes telles que Webpack, Babel et Sass.

Commencez par créer un dossier de projet. Créez un dossier mytodo pour votre travail avec codelab en utilisant le code: mkdir mytodo && cd mytodo . Vos fichiers de projet échafaudés seront placés ici par le générateur.

Maintenant, accédez à vos générateurs via le menu Yeoman en exécutant yo. Bien que plusieurs générateurs soient installés, mettez en surbrillance le Fontaine Webapp et frapper entrer pour cet exemple.

Certains générateurs disposent de fonctionnalités facultatives pour personnaliser votre application avec des bibliothèques de développeurs. Commencez à configurer votre générateur pour accélérer la configuration de l'environnement de développement.

Voici quelques choix de générateurs FountainJS à utiliser:

Pour cet exemple, sélectionnez SaSS, Réagissez, Babel, Webpack et Redux TodoMVC avec les touches fléchées et appuyez sur Entrée. Votre application sera automatiquement échafaudée par Yeoman et récupérera les dépendances.

Étape 4: Consultez la structure du répertoire de l'application générée par Yeoman

Voir ce qui a été échafaudé à travers votre mytodo annuaire. Vous pourrez voir ce qui suit:

• src
• conf
• gulp_tasks
• gulpfile.js
• .babelrc
• package.json
• node_modules
• .gitattributes
• .gitignore

Une fois la génération et l'installation terminées, un nouveau référentiel git devrait être en cours d'initialisation. Utilisez la commande git add --all && git commit -m 'Premier commit' pour ajouter le premier commit qui sauvera l’état actuel.

Étape 5: prévisualisez votre application dans le navigateur

Vous devrez exécuter un script npm qui vous aidera à créer un serveur http local basé sur un nœud dans localhost: 3000 (ou, dans certaines configurations, 127.0.0.1:3000) en tapant ce qui suit: npm run serve. À l'aide de localhost: 3000, ouvrez un nouvel onglet.

(Remarque: vous pouvez utiliser la commande au clavier Ctrl + C si vous devez arrêter le serveur et quitter le processus CLI.)

Pour regarder vos fichiers, ouvrez votre éditeur de texte préféré et commencez à apporter des modifications. Une actualisation du navigateur sera automatiquement forcée après chaque sauvegarde, appelée rechargement en direct. Ceci est disponible pour vous via les tâches Gulp configurées dans gulpfile.js et configuré dans Browsersync via gulp_tasks / browsersync.js.

Étape 6: Utilisez le karma et le jasmin pour tester

Karma est un testeur Javascript pour les agnostiques du framework de test. Le framework de test Jasmine a été inclus dans le générateur fountainjs que vous utilisez dans cet exemple. Ils O Fontaine-Webapp qui a été exécuté précédemment généré *.spec.js fichiers d'échafaudage à motifs dans le mytodo dossier, créer un fichier conf / karma.conf / js. Cela a tiré des modules de nœud pour Karma.

Accédez à votre ligne de commande et utilisez Ctrl + C pour tuer tous les serveurs locaux. Exécutez des tests unitaires à l’aide du script npm échafaudé à partir du package.json. Utilisation test npm pour initier les tests.

Vous pouvez trouver vos tests unitaires d'échafaudage en ouvrant le src / app / réducers / todos.spec.js dans le src dossier.

Étape 7: Préparez-vous pour la production

Commencez par optimiser les fichiers pour la production en créant une version de production de l'application. Courir npm run build pour rationaliser les processus suivants:

• Lint le code
• Liez et réduisez les scripts et les styles
• Compiler la sortie des préprocesseurs
• Rendre l'application très maigre

Après avoir exécuté le npm run build script, vous pouvez accéder à l’application prête pour la production via le dossier dist de la racine du mytodo projet. Ces fichiers sont prêts à être placés sur votre serveur à l'aide de votre service de déploiement préféré.

Enfin, prévisualisez votre application produite localement en exécutant la commande script npm npm exécuter servir: dist. Cela construira et lancera votre projet sur un serveur Web local.

A propos de l'auteur

Oscar Salas est un spécialiste du marketing numérique B2B avec 5 ans d'expérience, qui a aidé les organisations à se développer grâce à des programmes de développement de marque et de marketing stratégiques. Penseur analytique, amoureux des chats, il aime jouer du piano et écouter Led Zeppelin. Il dirige actuellement les stratégies iTexico Demand Gen.