Repost my killer answer on stackoverflow with more than 600 votes.
Update October 2018
If you are still uncertain about Front-end dev, you can take a quick look into an excellent resource here.
https://github.com/kamranahmedse/developer-roadmap
Update June 2018
Learning modern JavaScript is tough if you haven’t been there since the beginning. If you are the newcomer, remember to check this excellent written to have a better overview.
https://medium.com/the-node-js-collection/modern-javascript-explained-for-dinosaurs-f695e9747b70
Update July 2017
Recently I found a comprehensive guide from Grab team about how to approach front-end development in 2017. You can check it out as below.
https://github.com/grab/front-end-guide
I’ve been also searching for this quite some time since there are a lot of tools out there and each of them benefits us in a different aspect. The community is divided across tools like Browserify, Webpack, jspm, Grunt and Gulp. You might also hear about Yeoman or Slush. That’s not a problem, it’s just confusing for everyone trying to understand a clear path forward.
Anyway, I would like to contribute something.
Package managers simplify installing and updating project dependencies, which are libraries such as: jQuery, Bootstrap, etc - everything that is used on your site and isn’t written by you.
Browsing all the library websites, downloading and unpacking the archives, copying files into the projects — all of this is replaced with a few commands in the terminal.
It stands for: Node JS package manager helps you to manage all the libraries your software relies on. You would define your needs in a file called package.json and run npm install in the command line… then BANG, your packages are downloaded and ready to use. It could be used both for front-end and back-end libraries.
For front-end package management, the concept is the same with NPM. All your libraries are stored in a file named bower.json and then run bower install in the command line.
Bower is recommended their user to migrate over to npm or yarn. Please be careful
Bower and NPMThe biggest difference between
BowerandNPMis that NPM does nested dependency tree while Bower requires a flat dependency tree as below.Quoting from https://stackoverflow.com/questions/18641899/what-is-the-difference-between-bower-and-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 Dproject root
[bower_components] // default directory for dependencies
-> dependency A
-> dependency B // needs A
-> dependency C // needs B and D
-> dependency DThere are some updates on
npm 3 Duplication and Deduplication, please open the doc for more detail.
A new package manager for JavaScript published by Facebook recently with some more advantages compared to NPM. And with Yarn, you still can use both NPMand Bower registry to fetch the package. If you’ve installed a package before, yarn creates a cached copy which facilitates offline package installs.
JSPM is a package manager for the SystemJS universal module loader, built on top of the dynamic ES6 module loader. It is not an entirely new package manager with its own set of rules, rather it works on top of existing package sources. Out of the box, it works with GitHub and npm. As most of the Bower based packages are based on GitHub, we can install those packages using jspm as well. It has a registry that lists most of the commonly used front-end packages for easier installation.
See the different between
Bowerandjspm: https://stackoverflow.com/questions/25416813/package-manager-bower-vs-jspm
Most projects of any scale will have their code split between several files. You can just include each file with an individual <script> tag, however, <script> establishes a new HTTP connection, and for small files – which is a goal of modularity – the time to set up the connection can take significantly longer than transferring the data. While the scripts are downloading, no content can be changed on the page.
E.g
<head>
<title>Wagon</title>
<script src=“build/wagon-bundle.js”></script>
</head>E.g
<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>Computers can do that better than you can, and that is why you should use a tool to automatically bundle everything into a single file.
Then we heard about RequireJS, Browserify, Webpack and SystemJS
It is a JavaScript file and module loader. It is optimized for in-browser use, but it can be used in other JavaScript environments, like Node.
E.g: 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,
}
})In main.js, we can import myModule.js as a dependency and use it.
require(["package/myModule"], function(myModule) {
myModule.foobar();
});And then in our HTML, we can refer to use with RequireJS.
<script src=“app/require.js” data-main=“main.js” ></script>Read more about
CommonJSandAMDto get understanding easily. https://stackoverflow.com/questions/16521471/relation-between-commonjs-amd-and-requirejs
Set out to allow the use of CommonJS formatted modules in the browser. Consequently, Browserify isn’t as much a module loader as a module bundler: Browserify is entirely a build-time tool, producing a bundle of code that can then be loaded client-side.
Start with a build machine that has node & npm installed, and get the package:
npm install -g –save-dev browserifyWrite your modules in CommonJS format
//entry-point.js
var foo = require('../foo.js')
console.log(foo(4))And when happy, issue the command to bundle:
browserify entry-point.js -o bundle-name.jsBrowserify recursively finds all dependencies of entry-point and assembles them into a single file:
<script src="”bundle-name.js”"></script>It bundles all of your static assets, including JavaScript, images, CSS, and more, into a single file. It also enables you to process the files through different types of loaders. You could write your JavaScript with CommonJS or AMD modules syntax. It attacks the build problem in a fundamentally more integrated and opinionated manner. In Browserify you use Gulp/Grunt and a long list of transforms and plugins to get the job done. Webpack offers enough power out of the box that you typically don’t need Grunt or Gulp at all.
Basic usage is beyond simple. Install Webpack like Browserify:
npm install -g –save-dev webpackAnd pass the command an entry point and an output file:
webpack ./entry-point.js bundle-name.jsIt is a module loader that can import modules at run time in any of the popular formats used today (CommonJS, UMD, AMD, ES6). It is built on top of the ES6 module loader polyfill and is smart enough to detect the format being used and handle it appropriately. SystemJS can also transpile ES6 code (with Babel or Traceur) or other languages such as TypeScript and CoffeeScript using plugins.
Want to know what is the
node moduleand why it is not well adapted to in-browser.
More useful article:
Why
jspmandSystemJS?One of the main goals of
ES6modularity is to make it really simple to install and use any Javascript library from anywhere on the Internet (Github,npm, etc.). Only two things are needed:
- A single command to install the library
- One single line of code to import the library and use it
So with
jspm, you can do it.
- Install the library with a command:
jspm install jquery- Import the library with a single line of code, no need to external reference inside your HTML file.
display.js
var $ = require('jquery'); $('body').append("I've imported jQuery!");
Then you configure these things within
System.config({ ... })before importing your module. Normally when runjspm init, there will be a file namedconfig.jsfor this purpose.To make these scripts run, we need to load
system.jsandconfig.json the HTML page. After that, we will load thedisplay.jsfile using theSystemJSmodule loader.index.html
<script src="jspm_packages/system.js"></script> <script src="config.js"></script> <script> System.import("scripts/display.js"); </script>Noted: You can also use
npmwithWebpackas Angular 2 has applied it. Sincejspmwas developed to integrate withSystemJSand it works on top of the existingnpmsource, so your answer is up to you.
Task runners and build tools are primarily command-line tools. Why we need to use them: In one word: automation. The less work you have to do when performing repetitive tasks like minification, compilation, unit testing, linting which previously cost us a lot of times to do with command line or even manually.
You can create automation for your development environment to pre-process codes or create build scripts with a config file and it seems very difficult to handle a complex task. Popular in the last few years.
Every task in Grunt is an array of different plugin configurations, that simply get executed one after another, in a strictly independent, and sequential fashion.
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']);Automation just like Grunt but instead of configurations, you can write JavaScript with streams like it’s a node application. Prefer these days.
This is a Gulp sample task declaration.
//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)
})See more: https://medium.com/@preslavrachev/gulp-vs-grunt-why-one-why-the-other-f5d3b398edc4#.fte0nahri
You can create starter projects with them. For example, you are planning to build a prototype with HTML and SCSS, then instead of manually create some folder like scss, css, img, fonts. You can just install yeoman and run a simple script. Then everything here for you.
Find more here.
npm install -g yo
npm install --global generator-h5bp
yo h5bpMy answer is not matched with the content of the question but when I’m searching for this knowledge on Google, I always see the question on top so that I decided to answer it in summary. I hope you guys found it helpful.