Environment Tools: The Facebook Way

  • Browserify - allows you to write code (in the browser) that uses require, in the same way you would use it in Node.js. In essence, it allows the browser to use NPM modules.

  • Babel - compiles statically (strongly) typed code (e.g. ES6 or JSX) to dynamically (weakly) typed, browser-readable JavaScript.

  • Babelify - compile JSX code to work with Browserify - i.e. allows you to use Babel with Browserify.

  • Babel-Preset-React (NPM) - a babel preset (array of babel plugins), which is specific to React. It is used to transform Babelify and Babel into JavaScript code. In other words, it tells Babel how to compile JSX.

  • Watchify - a watch mode for browserify builds. It instantly compiles code everytime a script change is made - i.e. watches for code changes and instantly starts compiling when they are made.

  • NPM - starting as a node package manager for the server-side, NPM has evolved to include packages that can be used in the browser - on the front-end. Thus, NPM is a registry for JavaScript modules (bits of reusable code called packages). It's a way to reuse code from other developers, and also a way to share your code with them, and it makes it easy to manage the different versions of code.

  • Node.js - a JavaScript runtime built on Chrome's V8 JavaScript engine. Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient. Node.js' package ecosystem, npm, is the largest ecosystem of open source libraries in the world.

  • React - an open-source JavaScript library for building user interfaces. Built and maintained by Facebook.