Atualização outubro 2018
Se você ainda não tem certeza sobre o desenvolvedor Front-end, pode dar uma olhada rápida em um excelente recurso aqui.
https://github.com/kamranahmedse/developer-roadmap
Atualização junho 2018
Aprender JavaScript moderno é difícil se você não estiver lá desde o início. Se você é o novato, lembre-se de verificar esta excelente redação para ter uma melhor visão geral.
https://medium.com/the-node-js-collection/modern-javascript-explained-for-dinosaurs-f695e9747b70
Atualização julho de 2017
Recentemente, encontrei um guia realmente abrangente da equipe Grab sobre como abordar o desenvolvimento front-end em 2017. Você pode conferir como abaixo.
https://github.com/grab/front-end-guide
Eu também tenho procurado por isso há algum tempo, já que existem muitas ferramentas por aí e cada uma delas nos beneficia em um aspecto diferente. A comunidade é dividida em ferramentas como Browserify, Webpack, jspm, Grunt and Gulp. Você também pode ouvir sobre Yeoman or Slush. Isso não é realmente um problema, é apenas confuso para todos que tentam entender um caminho claro a seguir.
Enfim, eu gostaria de contribuir com algo.
1. Gerenciador de Pacotes
Os gerenciadores de pacotes simplificam a instalação e a atualização das dependências do projeto, que são bibliotecas como:, jQuery, Bootstrapetc - tudo o que é usado no seu site e não é escrito por você.
Navegando em todos os sites da biblioteca, baixando e descompactando os arquivos, copiando arquivos para os projetos - tudo isso é substituído por alguns comandos no terminal.
NPMsignifica: Node JS package managerajuda você a gerenciar todas as bibliotecas nas quais seu software depende. Você definiria suas necessidades em um arquivo chamado package.jsone executaria npm installna linha de comando ... então BANG, seus pacotes serão baixados e prontos para uso. Pode ser usado para front-end and back-endbibliotecas.
Bower: para gerenciamento de pacotes front-end, o conceito é o mesmo do NPM. Todas as suas bibliotecas são armazenadas em um arquivo chamado bower.jsone, em seguida, executadas bower installna linha de comando.
A maior diferença entre Bowere NPMé que o NPM aninha a árvore de dependência, enquanto o Bower exige uma árvore de dependência simples, como abaixo.
Citando Qual é a diferença entre Bower e 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
Bower
project root
[bower_components] // default directory for dependencies
-> dependency A
-> dependency B // needs A
-> dependency C // needs B and D
-> dependency D
Existem algumas atualizações npm 3 Duplication and Deduplication, abra o documento para obter mais detalhes.
Yarn: Um novo gerenciador de pacotes para JavaScript publicada pela Facebookrecentemente com mais algumas vantagens em comparação com NPM. E com o Yarn, você ainda pode usar os dois NPMe o Bowerregistro para buscar o pacote. Se você instalou um pacote anteriormente, yarncria uma cópia em cache que facilita offline package installs.
jspm: é um gerenciador de pacotes para o SystemJScarregador de módulos universal, construído sobre o ES6carregador de módulos dinâmicos . Não é um gerenciador de pacotes totalmente novo com seu próprio conjunto de regras, mas funciona com base nas fontes de pacotes existentes. Fora da caixa, ele trabalha com GitHube npm. Como a maioria dos Bowerpacotes baseados é baseada GitHub, também podemos instalar esses pacotes jspm. Ele possui um registro que lista a maioria dos pacotes front-end comumente usados para facilitar a instalação.
Veja as diferenças entre Bowere jspm:
Gerenciador de Pacotes: Bower vs jspm
2. Carregador / Empacotamento de Módulos
A maioria dos projetos de qualquer escala terá seu código dividido entre vários arquivos. Você pode apenas incluir cada arquivo com uma <script>tag individual , no entanto, <script>estabelece uma nova conexão http e, para arquivos pequenos - que é um objetivo de modularidade - o tempo para configurar a conexão pode demorar muito mais do que transferir os dados. Enquanto os scripts estão sendo baixados, nenhum conteúdo pode ser alterado na página.
- O problema do tempo de download pode ser resolvido em grande parte concatenando um grupo de módulos simples em um único arquivo e minimizando-o.
Por exemplo
<head>
<title>Wagon</title>
<script src=“build/wagon-bundle.js”></script>
</head>
- O desempenho vem à custa da flexibilidade, no entanto. Se seus módulos tiverem interdependência, essa falta de flexibilidade pode ser um obstáculo.
Por exemplo
<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>
Os computadores podem fazer isso melhor do que você, e é por isso que você deve usar uma ferramenta para agrupar tudo automaticamente em um único arquivo.
Então ouvimos sobre RequireJS, Browserify, WebpackeSystemJS
RequireJS: é um JavaScriptcarregador de arquivos e módulos. É otimizado para uso no navegador, mas pode ser usado em outros ambientes JavaScript, como Node.
Por exemplo: 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
}
});
Em main.js, podemos importar myModule.jscomo dependência e usá-lo.
require(["package/myModule"], function(myModule) {
myModule.foobar();
});
E então, no nosso HTML, podemos nos referir ao uso com RequireJS.
<script src=“app/require.js” data-main=“main.js” ></script>
Leia mais sobre CommonJSe AMDentenda facilmente.
Relação entre CommonJS, AMD e RequireJS?
Browserify: definido para permitir o uso de CommonJSmódulos formatados no navegador. Consequentemente, Browserifynão é tanto um carregador de módulos quanto um empacotador de módulos: Browserifyé inteiramente uma ferramenta em tempo de construção, produzindo um pacote de código que pode ser carregado no lado do cliente.
Comece com uma máquina de compilação com o node & npm instalado e obtenha o pacote:
npm install -g –save-dev browserify
Escreva seus módulos em CommonJS formato
//entry-point.js
var foo = require('../foo.js');
console.log(foo(4));
E quando estiver feliz, emita o comando para agrupar:
browserify entry-point.js -o bundle-name.js
O Browserify encontra recursivamente todas as dependências do ponto de entrada e as reúne em um único arquivo:
<script src=”bundle-name.js”></script>
Webpack: Agrupa todos os seus recursos estáticos, incluindo JavaScriptimagens, CSS e muito mais, em um único arquivo. Também permite processar os arquivos através de diferentes tipos de carregadores. Você pode escrever sua sintaxe JavaScriptwith CommonJSou AMDmodules. Ele ataca o problema de construção de uma maneira fundamentalmente mais integrada e opinativa. Em Browserifyque você usa Gulp/Grunte uma longa lista de transformações e plugins para começar o trabalho feito. Webpackoferece energia suficiente para uso imediato que você normalmente não precisaGrunt ou Gulpem tudo.
O uso básico está além do simples. Instale o Webpack como o Browserify:
npm install -g –save-dev webpack
E passe ao comando um ponto de entrada e um arquivo de saída:
webpack ./entry-point.js bundle-name.js
SystemJS: é um carregador de módulo que pode importar módulos em tempo de execução em qualquer um dos formatos populares usados hoje ( CommonJS, UMD, AMD, ES6). Ele é construído sobre o ES6polyfill do carregador de módulos e é inteligente o suficiente para detectar o formato que está sendo usado e manipulá-lo adequadamente. SystemJStambém pode transpilar o código ES6 (com Babelou Traceur) ou outros idiomas como TypeScripte CoffeeScriptusando plug-ins.
Deseja saber o que é node modulee por que não está bem adaptado ao navegador.
Artigo mais útil:
Por que jspmeSystemJS ?
Um dos principais objetivos da ES6modularidade é torná-lo realmente simples de instalar e usar qualquer biblioteca Javascript de qualquer lugar na Internet ( Github, npm, etc.). Apenas duas coisas são necessárias:
- Um único comando para instalar a biblioteca
- Uma única linha de código para importar a biblioteca e usá-la
Então jspm, você pode fazer isso.
- Instale a biblioteca com um comando:
jspm install jquery
- Importe a biblioteca com uma única linha de código, sem necessidade de referência externa dentro do seu arquivo HTML.
display.js
var $ = require('jquery');
$('body').append("I've imported jQuery!");
Em seguida, você configura essas coisas System.config({ ... })antes de importar seu módulo. Normalmente, quando executado jspm init, haverá um arquivo nomeado config.jspara esse fim.
Para executar esses scripts, precisamos carregar system.jse config.jsna página HTML. Depois disso, carregaremos o display.jsarquivo usando o SystemJScarregador de módulos.
index.html
<script src="jspm_packages/system.js"></script>
<script src="config.js"></script>
<script>
System.import("scripts/display.js");
</script>
Observou: Você também pode usar npmcom Webpackcomo angular 2 que tenha pedido isso. Como jspmfoi desenvolvido para integrar-se SystemJSe funciona sobre a npmfonte existente , sua resposta é sua.
3. Executor de Tarefas
Executores de tarefas e ferramentas de construção são principalmente ferramentas de linha de comando. Por que precisamos usá-los: Em uma palavra: automação . Quanto menos trabalho você executar ao executar tarefas repetitivas, como minificação, compilação, teste de unidade, fiapos, que anteriormente nos custaram muitas vezes com linha de comando ou mesmo manualmente.
Grunt: Você pode criar automação para o seu ambiente de desenvolvimento para pré-processar códigos ou criar scripts de construção com um arquivo de configuração e parece muito difícil lidar com uma tarefa complexa. Popular nos últimos anos.
Cada tarefa Grunté uma variedade de configurações diferentes de plugins, que simplesmente são executadas uma após a outra, de maneira estritamente independente e seqüencial.
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: Automação exatamente como em Gruntvez de configurações, você pode escrever JavaScriptcom fluxos como se fosse um aplicativo de nó. Prefira estes dias.
Esta é uma Gulpdeclaração de tarefa de amostra.
//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);
});
Veja mais: https://medium.com/@preslavrachev/gulp-vs-grunt-why-one-why-the-other-f5d3b398edc4#.fte0nahri
4. Ferramentas para andaimes
Slush and Yeoman: Você pode criar projetos iniciais com eles. Por exemplo, você planeja criar um protótipo com HTML e SCSS e, em vez de criar manualmente alguma pasta, como scss, css, img, fonts. Você pode simplesmente instalar yeomane executar um script simples. Então tudo aqui para você.
Encontre mais aqui .
npm install -g yo
npm install --global generator-h5bp
yo h5bp
Veja mais: https://www.quora.com/What-are-the-differences-between-NPM-Bower-Grunt-Gulp-Webpack-Browserify-Slush-Yeoman-and-Express
Minha resposta não é realmente compatível com o conteúdo da pergunta, mas quando estou pesquisando esses conhecimentos no Google, sempre vejo a pergunta no topo, então decidi respondê-la em resumo. Espero que vocês tenham achado útil.