Mise à jour d'octobre 2018
Si vous n'êtes toujours pas sûr du développement frontal, vous pouvez jeter un coup d'œil à une excellente ressource ici.
https://github.com/kamranahmedse/developer-roadmap
Mise à jour juin 2018
Apprendre le JavaScript moderne est difficile si vous n'y êtes pas allé depuis le début. Si vous êtes le nouveau venu, n'oubliez pas de vérifier cet excellent écrit pour avoir une meilleure vue d'ensemble.
https://medium.com/the-node-js-collection/modern-javascript-explained-for-dinosaurs-f695e9747b70
Mise à jour juillet 2017
Récemment, j'ai trouvé un guide très complet de l'équipe Grab sur la façon d'aborder le développement frontal en 2017. Vous pouvez le consulter ci-dessous.
https://github.com/grab/front-end-guide
Je recherche également cela depuis un certain temps car il existe de nombreux outils et chacun d'eux nous profite sous un aspect différent. La communauté est divisée en plusieurs outils comme Browserify, Webpack, jspm, Grunt and Gulp. Vous pourriez également en entendre parler Yeoman or Slush. Ce n'est pas vraiment un problème, c'est juste déroutant pour tous ceux qui essaient de comprendre une voie claire à suivre.
Quoi qu'il en soit, je voudrais apporter quelque chose.
1. Gestionnaire de packages
Les gestionnaires de packages simplifient l'installation et la mise à jour des dépendances de projet, qui sont des bibliothèques telles que jQuery, Bootstrap:, etc. - tout ce qui est utilisé sur votre site et qui n'est pas écrit par vous.
Parcourir tous les sites Web de la bibliothèque, télécharger et décompresser les archives, copier des fichiers dans les projets - tout cela est remplacé par quelques commandes dans le terminal.
NPMsignifie: Node JS package managervous aide à gérer toutes les bibliothèques sur lesquelles votre logiciel s'appuie. Vous définiriez vos besoins dans un fichier appelé package.jsonet exécuté npm installen ligne de commande ... puis BANG, vos packages sont téléchargés et prêts à l'emploi. Peut être utilisé à la fois pour les front-end and back-endbibliothèques.
Bower: pour la gestion des packages front-end, le concept est le même avec NPM. Toutes vos bibliothèques sont stockées dans un fichier nommé bower.jsonpuis exécutées bower installdans la ligne de commande.
La plus grande différence entre Boweret NPMest que NPM fait un arbre de dépendance imbriqué tandis que Bower nécessite un arbre de dépendance plat comme ci-dessous.
Citations tirées de Quelle est la différence entre Bower et npm?
NPM
project root
[node_modules] // default directory for dependencies
-> dependency A
-> dependency B
[node_modules]
-> dependency A
-> dependency C
[node_modules]
-> dependency B
[node_modules]
-> dependency A
-> dependency D
Tonnelle
project root
[bower_components] // default directory for dependencies
-> dependency A
-> dependency B // needs A
-> dependency C // needs B and D
-> dependency D
Il y a quelques mises à jour sur npm 3 Duplication and Deduplication, veuillez ouvrir le document pour plus de détails.
Yarn: Un nouveau gestionnaire de paquets pour JavaScript publié par Facebookrécemment avec quelques autres avantages par rapport à NPM. Et avec Yarn, vous pouvez toujours utiliser les deux NPMet Bowerregistre pour récupérer le package. Si vous avez déjà installé un package, yarncrée une copie en cache qui facilite offline package installs.
jspm: est un gestionnaire de packages pour le SystemJSchargeur de module universel, construit au-dessus du ES6chargeur de module dynamique . Ce n'est pas un gestionnaire de packages entièrement nouveau avec son propre ensemble de règles, il fonctionne plutôt sur les sources de packages existantes. Hors de la boîte, il fonctionne avec GitHubet npm. Comme la plupart des Bowerpackages basés sont basés sur GitHub, nous pouvons également installer ces packages jspm. Il dispose d'un registre qui répertorie la plupart des packages frontaux couramment utilisés pour une installation plus facile.
Voir la différence entre Boweret jspm:
Package Manager: Bower vs jspm
2. Chargeur / groupage de modules
La plupart des projets de n'importe quelle échelle verront leur code divisé entre plusieurs fichiers. Vous pouvez simplement inclure chaque fichier avec une <script>balise individuelle , cependant, <script>établit une nouvelle connexion http, et pour les petits fichiers - ce qui est un objectif de modularité - le temps pour établir la connexion peut prendre beaucoup plus de temps que le transfert des données. Pendant le téléchargement des scripts, aucun contenu ne peut être modifié sur la page.
- Le problème du temps de téléchargement peut être largement résolu en concaténant un groupe de modules simples en un seul fichier et en le minimisant.
Par exemple
<head>
<title>Wagon</title>
<script src=“build/wagon-bundle.js”></script>
</head>
- Cependant, la performance se fait au détriment de la flexibilité. Si vos modules ont des interdépendances, ce manque de flexibilité peut être un exemple.
Par exemple
<head>
<title>Skateboard</title>
<script src=“connectors/axle.js”></script>
<script src=“frames/board.js”></script>
<!-- skateboard-wheel and ball-bearing both depend on abstract-rolling-thing -->
<script src=“rolling-things/abstract-rolling-thing.js”></script>
<script src=“rolling-things/wheels/skateboard-wheel.js”></script>
<!-- but if skateboard-wheel also depends on ball-bearing -->
<!-- then having this script tag here could cause a problem -->
<script src=“rolling-things/ball-bearing.js”></script>
<!-- connect wheels to axle and axle to frame -->
<script src=“vehicles/skateboard/our-sk8bd-init.js”></script>
</head>
Les ordinateurs peuvent faire cela mieux que vous, et c'est pourquoi vous devez utiliser un outil pour tout regrouper automatiquement dans un seul fichier.
Ensuite , nous avons entendu parler RequireJS, Browserify, WebpacketSystemJS
RequireJS: est un JavaScriptchargeur de fichiers et de modules. Il est optimisé pour une utilisation dans le navigateur, mais il peut être utilisé dans d'autres environnements JavaScript, comme Node.
Par exemple: myModule.js
// package/lib is a dependency we require
define(["package/lib"], function (lib) {
// behavior for our module
function foo() {
lib.log( "hello world!" );
}
// export (expose) foo to other modules as foobar
return {
foobar: foo
}
});
Dans main.js, nous pouvons importer en myModule.jstant que dépendance et l'utiliser.
require(["package/myModule"], function(myModule) {
myModule.foobar();
});
Et puis dans notre HTML, nous pouvons nous référer à utiliser avec RequireJS.
<script src=“app/require.js” data-main=“main.js” ></script>
En savoir plus sur CommonJSet AMDpour comprendre facilement.
Relation entre CommonJS, AMD et RequireJS?
Browserify: conçu pour permettre l'utilisation de CommonJSmodules formatés dans le navigateur. Par conséquent, ce Browserifyn'est pas autant un chargeur de module qu'un bundle de module: Browserifyc'est entièrement un outil de construction, produisant un paquet de code qui peut ensuite être chargé côté client.
Commencez avec une machine de génération sur laquelle node & npm est installé et obtenez le package:
npm install -g –save-dev browserify
Écrivez vos modules au CommonJSformat
//entry-point.js
var foo = require('../foo.js');
console.log(foo(4));
Et lorsque vous êtes satisfait, lancez la commande pour regrouper:
browserify entry-point.js -o bundle-name.js
Browserify recherche récursivement toutes les dépendances du point d'entrée et les assemble dans un seul fichier:
<script src=”bundle-name.js”></script>
Webpack: Il regroupe tous vos actifs statiques, y compris les JavaScriptimages, CSS et plus, dans un seul fichier. Il vous permet également de traiter les fichiers via différents types de chargeurs. Vous pouvez écrire votre syntaxe JavaScriptavec CommonJSou AMDmodules. Il s'attaque au problème de construction d'une manière fondamentalement plus intégrée et réfléchie. Dans Browserifyvous utilisez Gulp/Gruntet une longue liste de transformations et de plugins pour faire le travail. Webpackoffre suffisamment de puissance hors de la boîte dont vous n'avez généralement pas besoin Gruntou pas Gulpdu tout.
L'utilisation de base est plus que simple. Installez Webpack comme Browserify:
npm install -g –save-dev webpack
Et passez la commande un point d'entrée et un fichier de sortie:
webpack ./entry-point.js bundle-name.js
SystemJS: est un chargeur de modules qui peut importer des modules au moment de l'exécution dans l'un des formats populaires utilisés aujourd'hui ( CommonJS, UMD, AMD, ES6). Il est construit au-dessus du ES6polyfill du chargeur de modules et est suffisamment intelligent pour détecter le format utilisé et le gérer de manière appropriée. SystemJSpeut également transpiler du code ES6 (avec Babelou Traceur) ou d'autres langues telles que TypeScriptet en CoffeeScriptutilisant des plugins.
Vous voulez savoir quel est le node moduleet pourquoi il n'est pas bien adapté au navigateur.
Article plus utile:
Pourquoi jspmet SystemJS?
L' un des principaux objectifs de la ES6modularité est de rendre très simple à installer et à utiliser une bibliothèque Javascript où que vous soyez sur Internet ( Github, npm, etc.). Deux choses seulement sont nécessaires:
- Une seule commande pour installer la bibliothèque
- Une seule ligne de code pour importer la bibliothèque et l'utiliser
Donc, avec jspm, vous pouvez le faire.
- Installez la bibliothèque avec une commande:
jspm install jquery
- Importez la bibliothèque avec une seule ligne de code, pas besoin de référence externe à l'intérieur de votre fichier HTML.
display.js
var $ = require('jquery');
$('body').append("I've imported jQuery!");
Ensuite, vous configurez ces choses System.config({ ... })avant d'importer votre module. Normalement, lors de l'exécution jspm init, il y aura un fichier nommé config.jsà cet effet.
Pour exécuter ces scripts, nous devons charger system.jset config.jssur la page HTML. Après cela, nous chargerons le display.jsfichier à l'aide du SystemJSchargeur de module.
index.html
<script src="jspm_packages/system.js"></script>
<script src="config.js"></script>
<script>
System.import("scripts/display.js");
</script>
Noté: Vous pouvez également l'utiliser npmavec Webpackcomme Angular 2 l'a appliqué. Depuis a jspmété développé pour s'intégrer à SystemJSet il fonctionne au-dessus de la npmsource existante , donc votre réponse dépend de vous.
3. Gestionnaire de tâches
Les exécuteurs de tâches et les outils de génération sont principalement des outils de ligne de commande. Pourquoi nous devons les utiliser: En un mot: l' automatisation . Le moins de travail que vous avez à faire lors de l'exécution de tâches répétitives telles que la minification, la compilation, les tests unitaires, les peluches qui nous coûtaient auparavant beaucoup de temps en ligne de commande ou même manuellement.
Grunt: Vous pouvez créer une automatisation pour votre environnement de développement pour prétraiter des codes ou créer des scripts de construction avec un fichier de configuration et il semble très difficile de gérer une tâche complexe. Populaire ces dernières années.
Chaque tâche Gruntest un tableau de configurations de plugins différentes, qui sont simplement exécutées les unes après les autres, de manière strictement indépendante et séquentielle.
grunt.initConfig({
clean: {
src: ['build/app.js', 'build/vendor.js']
},
copy: {
files: [{
src: 'build/app.js',
dest: 'build/dist/app.js'
}]
}
concat: {
'build/app.js': ['build/vendors.js', 'build/app.js']
}
// ... other task configurations ...
});
grunt.registerTask('build', ['clean', 'bower', 'browserify', 'concat', 'copy']);
Gulp: L'automatisation, Gruntmais au lieu de configurations, vous pouvez écrire JavaScriptavec des flux comme s'il s'agissait d'une application de nœud. Préférez ces jours-ci.
Il s'agit d'un Gulpexemple de déclaration de tâche.
//import the necessary gulp plugins
var gulp = require('gulp');
var sass = require('gulp-sass');
var minifyCss = require('gulp-minify-css');
var rename = require('gulp-rename');
//declare the task
gulp.task('sass', function(done) {
gulp.src('./scss/ionic.app.scss')
.pipe(sass())
.pipe(gulp.dest('./www/css/'))
.pipe(minifyCss({
keepSpecialComments: 0
}))
.pipe(rename({ extname: '.min.css' }))
.pipe(gulp.dest('./www/css/'))
.on('end', done);
});
Voir plus: https://medium.com/@preslavrachev/gulp-vs-grunt-why-one-why-the-other-f5d3b398edc4#.fte0nahri
4. Outils d'échafaudage
Slush and Yeoman: Vous pouvez créer des projets de démarrage avec eux. Par exemple, vous prévoyez de construire un prototype avec HTML et SCSS, puis au lieu de créer manuellement un dossier comme scss, css, img, fonts. Vous pouvez simplement installer yeomanet exécuter un script simple. Alors tout ici pour vous.
Trouvez plus ici .
npm install -g yo
npm install --global generator-h5bp
yo h5bp
Voir plus: https://www.quora.com/What-are-the-differences-between-NPM-Bower-Grunt-Gulp-Webpack-Browserify-Slush-Yeoman-and-Express
Ma réponse ne correspond pas vraiment au contenu de la question, mais lorsque je recherche ces connaissances sur Google, je vois toujours la question en haut de sorte que j'ai décidé d'y répondre en résumé. J'espère que vous l'avez trouvé utile.