Language
- ES2015: A new generation of Javascript language specs. It supports modules and classes. It’s also know as ES6
- Typescript: An object-oriented language that will be converted to Javascript and then be run in browsers
- Babel: make code run in an browser that doesn’t support this code, for example running ES6+ in current browsers, or converting Typescript/ JSX to javascript
Module system
if your application requires several javascript files which depends on either other, you have to carefully include one in another. This may lead to problems such as out-of-order including, duplicate including and naming confliction. A module system fixes this problem for you. Instead of including a Javascript file, you use "export", "import" or "require" to tell the system about the dependency.
- CommonJs: A module system before ES6. It by itself is not implementation
- Browserify: An implementation of CommonJS
- AMD: A module system before ES6. It by itself is not implementation
- RequireJS: An implementation of CommonJS
- System.js: An implementation that supports CommonJS + AMD + ES6 Module system
- Webpack: An implementation that supports CommonJS + AMD + ES6 Module system
Module bundling: Bundle the modules in to a single big file at building time, instead of runtime. The browser will only have to download a single file. This in most of cases will increase the performance. Webpack and Browserify do this.
Development Env Tools
- npm/yarn: Just like Maven/Gradle. With some configurations it can also be used to run the node server which hosts your code, just like “mvn jetty:run” in Java
- browserSync: Keep multiple browsers & devices in sync when building websites.
- lite-server: Lightweight development only node server that serves a web app, opens it in the browser, refreshes when html or javascript change, injects CSS changes using sockets, and has a fallback page when a route is not found. It’s a wrapper around browserSync