Actualización octubre 2018
Si aún no está seguro sobre el desarrollo de Front-end, puede echar un vistazo rápido a un excelente recurso aquí.
https://github.com/kamranahmedse/developer-roadmap
Actualización junio 2018
Aprender JavaScript moderno es difícil si no has estado allí desde el principio. Si eres el recién llegado, recuerda revisar este excelente escrito para tener una mejor visión general.
https://medium.com/the-node-js-collection/modern-javascript-explained-for-dinosaurs-f695e9747b70
Actualización de julio de 2017
Recientemente encontré una guía realmente completa del equipo de Grab sobre cómo abordar el desarrollo front-end en 2017. Puede consultarlo a continuación.
https://github.com/grab/front-end-guide
También he estado buscando esto desde hace bastante tiempo, ya que hay muchas herramientas disponibles y cada una de ellas nos beneficia en un aspecto diferente. La comunidad está dividida en herramientas como Browserify, Webpack, jspm, Grunt and Gulp. También puede escuchar sobre Yeoman or Slush. Eso no es realmente un problema, es confuso para todos los que intentan entender un camino claro hacia adelante.
De todos modos, me gustaría contribuir con algo.
1. Administrador de paquetes
Los administradores de paquetes simplifican la instalación y actualización de las dependencias del proyecto, que son bibliotecas como:, jQuery, Bootstrapetc., todo lo que se usa en su sitio y no está escrito por usted.
Navegando por todos los sitios web de la biblioteca, descargando y desempacando los archivos, copiando archivos en los proyectos, todo esto se reemplaza con algunos comandos en el terminal.
NPMsignifica: lo Node JS package managerayuda a administrar todas las bibliotecas en las que se basa su software. Definiría sus necesidades en un archivo llamado package.jsony ejecutado npm installen la línea de comando ... luego BANG, sus paquetes están descargados y listos para usar. Podría usarse tanto para front-end and back-endbibliotecas.
Bower: para la gestión de paquetes front-end, el concepto es el mismo con NPM. Todas sus bibliotecas se almacenan en un archivo llamado bower.jsony luego se ejecutan bower installen la línea de comando.
La mayor diferencia entre Bowery NPMes que NPM hace un árbol de dependencia anidado, mientras que Bower requiere un árbol de dependencia plano como se muestra a continuación.
Citando de ¿Cuál es la diferencia entre Bower y 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
Cenador
project root
[bower_components] // default directory for dependencies
-> dependency A
-> dependency B // needs A
-> dependency C // needs B and D
-> dependency D
Hay algunas actualizaciones sobre npm 3 Duplication and Deduplication, abra el documento para obtener más detalles.
Yarn: Un nuevo administrador de paquetes JavaScript publicadoFacebook recientemente por con algunas ventajas más en comparación con NPM. Y con Yarn, aún puede usar ambos NPMy el Bowerregistro para obtener el paquete. Si ha instalado un paquete anteriormente, yarncrea una copia en caché que facilita offline package installs.
jspm: es un administrador de paquetes para el SystemJScargador de módulos universal, construido sobre el ES6cargador de módulos dinámico . No es un administrador de paquetes completamente nuevo con su propio conjunto de reglas, sino que funciona sobre las fuentes de paquetes existentes. Fuera de la caja, funciona con GitHuby npm. Como la mayoría de los Bowerpaquetes basados se basan GitHub, también podemos instalar esos paquetes jspm. Tiene un registro que enumera la mayoría de los paquetes front-end comúnmente utilizados para una instalación más fácil.
Vea la diferencia entre Bowery jspm:
Administrador de paquetes: Bower vs jspm
2. Módulo cargador / agrupación
La mayoría de los proyectos de cualquier escala tendrán su código dividido entre varios archivos. Solo puede incluir cada archivo con una <script>etiqueta individual , sin embargo, <script>establece una nueva conexión http, y para archivos pequeños, que es un objetivo de modularidad, el tiempo para configurar la conexión puede llevar mucho más tiempo que la transferencia de datos. Mientras se descargan los scripts, no se puede cambiar el contenido de la página.
- El problema del tiempo de descarga puede resolverse en gran medida concatenando un grupo de módulos simples en un solo archivo y minimizándolo.
P.ej
<head>
<title>Wagon</title>
<script src=“build/wagon-bundle.js”></script>
</head>
- Sin embargo, el rendimiento viene a expensas de la flexibilidad. Si sus módulos tienen interdependencia, esta falta de flexibilidad puede ser un éxito espectacular.
P.ej
<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>
Las computadoras pueden hacerlo mejor que tú, y es por eso que debes usar una herramienta para agrupar automáticamente todo en un solo archivo.
Entonces oímos acerca de RequireJS, Browserify, WebpackySystemJS
RequireJS: es un JavaScriptcargador de archivos y módulos. Está optimizado para el uso en el navegador, pero se puede usar en otros entornos JavaScript, como Node.
Por ejemplo: 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
}
});
En main.js, podemos importar myModule.jscomo dependencia y usarlo.
require(["package/myModule"], function(myModule) {
myModule.foobar();
});
Y luego en nuestro HTML, podemos referirnos al uso con RequireJS.
<script src=“app/require.js” data-main=“main.js” ></script>
Lea más sobre CommonJSy AMDpara comprender fácilmente.
Relación entre CommonJS, AMD y RequireJS?
Browserify: establecido para permitir el uso de CommonJSmódulos formateados en el navegador. En consecuencia, Browserifyno es tanto un cargador de módulos como un paquete de módulos: Browserifyes una herramienta de tiempo de construcción que produce un paquete de código que luego puede cargarse en el lado del cliente.
Comience con una máquina de compilación que tenga instalados node & npm y obtenga el paquete:
npm install -g –save-dev browserify
Escribe tus módulos en CommonJSformato
//entry-point.js
var foo = require('../foo.js');
console.log(foo(4));
Y cuando esté contento, emita el comando para agrupar:
browserify entry-point.js -o bundle-name.js
Browserify encuentra recursivamente todas las dependencias del punto de entrada y las ensambla en un solo archivo:
<script src=”bundle-name.js”></script>
Webpack: Agrupa todos sus activos estáticos, incluidas JavaScriptimágenes, CSS y más, en un solo archivo. También le permite procesar los archivos a través de diferentes tipos de cargadores. Podrías escribir tu JavaScriptcon CommonJSo AMDsintaxis de módulos. Ataca el problema de compilación de una manera fundamentalmente más integrada y obstinada. En el Browserifyuso Gulp/Grunty una larga lista de transformaciones y complementos para hacer el trabajo. Webpackofrece suficiente potencia fuera de la caja que normalmente no necesita Grunto no necesita Gulp.
El uso básico es más que simple. Instale Webpack como Browserify:
npm install -g –save-dev webpack
Y pase el comando un punto de entrada y un archivo de salida:
webpack ./entry-point.js bundle-name.js
SystemJS: es un cargador de módulos que puede importar módulos en tiempo de ejecución en cualquiera de los formatos populares utilizados hoy en día ( CommonJS, UMD, AMD, ES6). Está construido en la parte superior del ES6cargador de módulos polyfill y es lo suficientemente inteligente como para detectar el formato que se utiliza y manejarlo adecuadamente. SystemJSTambién puede transpilar el código ES6 (con Babelo Traceur) u otros idiomas, como TypeScripty CoffeeScriptutilizando complementos.
Quiere saber qué es node moduley por qué no está bien adaptado al navegador.
Artículo más útil:
¿Por qué jspmy SystemJS?
Uno de los principales objetivos de ES6 la modularidad es hacer que sea muy simple de instalar y utilizar cualquier librería Javascript desde cualquier lugar en Internet ( Github, npm, etc.). Solo se necesitan dos cosas:
- Un solo comando para instalar la biblioteca
- Una sola línea de código para importar la biblioteca y usarla
Entonces con jspm , puedes hacerlo.
- Instale la biblioteca con un comando:
jspm install jquery
- Importe la biblioteca con una sola línea de código, sin necesidad de referencias externas dentro de su archivo HTML.
display.js
var $ = require('jquery');
$('body').append("I've imported jQuery!");
Luego configura estas cosas System.config({ ... })antes de importar su módulo. Normalmente cuando se ejecuta jspm init, habrá un archivo llamado config.jspara este propósito.
Para ejecutar estos scripts, necesitamos cargar system.jsy config.jsen la página HTML. Después de eso, cargaremos el display.jsarchivo usando el SystemJScargador de módulos.
index.html
<script src="jspm_packages/system.js"></script>
<script src="config.js"></script>
<script>
System.import("scripts/display.js");
</script>
Nota: también se puede usar npmcon WebpackAngular 2 como lo ha aplicado. Dado que jspmfue desarrollado para integrarse SystemJSy funciona sobre la npmfuente existente , su respuesta depende de usted.
3. Corredor de tareas
Los corredores de tareas y las herramientas de compilación son principalmente herramientas de línea de comandos. Por qué necesitamos usarlos: en una palabra: automatización . Cuanto menos trabajo tenga que hacer al realizar tareas repetitivas como minificación, compilación, pruebas unitarias, linting, que anteriormente nos costó muchas veces hacer con la línea de comandos o incluso manualmente.
Grunt: Puede crear automatización para su entorno de desarrollo para preprocesar códigos o crear scripts de compilación con un archivo de configuración y parece muy difícil manejar una tarea compleja. Popular en los últimos años.
Cada tarea Gruntes un conjunto de configuraciones de complementos diferentes, que simplemente se ejecutan una tras otra, de forma estrictamente independiente y secuencial.
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: Automatización igual que, Gruntpero en lugar de configuraciones, puede escribir JavaScriptcon secuencias como si fuera una aplicación de nodo. Prefiero estos días.
Esta es una Gulpdeclaración de tarea de muestra.
//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);
});
Ver más: https://medium.com/@preslavrachev/gulp-vs-grunt-why-one-why-the-other-f5d3b398edc4#.fte0nahri
4. Herramientas de andamios
Slush and Yeoman: Puede crear proyectos iniciales con ellos. Por ejemplo, planea construir un prototipo con HTML y SCSS, luego, en lugar de crear manualmente una carpeta como scss, css, img, fonts. Simplemente puede instalar yeomany ejecutar un script simple. Entonces todo aquí para ti.
Encuentra más aquí .
npm install -g yo
npm install --global generator-h5bp
yo h5bp
Ver más: https://www.quora.com/What-are-the-differences-between-NPM-Bower-Grunt-Gulp-Webpack-Browserify-Slush-Yeoman-and-Express
Mi respuesta no coincide con el contenido de la pregunta, pero cuando busco estos conocimientos en Google, siempre veo la pregunta en la parte superior, así que decidí responderla en resumen. Espero que les haya resultado útil.