Utils and Tools

Enrique Barra
Contents
 Node
– NPM
– Package.json

 Transpile (Babel)

 Webpack

 Linters

 Test Tools

2
Node or Node.js
 Node.js is 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
 The Node run-time environment includes everything you need to
execute a program written in JavaScript

 More info: https://nodejs.org/en/

3
NPM
 NPM (node package manager): the package manager for the Node
JavaScript platform. It puts modules in place so that node can find them,
and manages dependency conflicts intelligently.
 https://www.npmjs.com/

 Useful commands:
– To install all packages that are indicated in package.json
• npm install
– To install a single package (will leave its code in node_modules):
• npm install package_name
– To install a package and save its name and version to the package.json:
• npm install --save package_name
• npm install --save-dev package_name
– To install a package globally in the system (usually sudo is needed in Unix
systems):
• sudo npm install -g package_name
– To exec a script (the script name has to exist in the package.json):
• npm run script_name

4
package.json
 package.json is a file that holds various metadata relevant to the
project
 This file is used to give information to NPM that allows it to identify
the project as well as handle the project’s dependencies
 It can also contain other metadata such as a project description, the
version of the project in a particular distribution, license
information, even configuration data
 Most important sections are:
– Information about the app, name, version, author, repository location,
homepage, bugs page, keywords, …
– Packages dependencies (libraries and tools) and their versions
• For production
• For development
– Scripts that can be executed
• Very useful to see the commands that are supported and that will execute the
server, tests, other tasks

 See http://package.json.is/ for more info (interactive guide with an

example)
5
package.json example file
{
"name": "tictactoe_reactjs",
"version": "0.0.1",
"description": "Tic Tac Toe created with reactjs",
"main": "./src/app.js",
"author": "Enrique Barra",
"license": "ISC",
"bugs": {
"url": "https://github.com/blablabla/issues"
},
"homepage": "http:/blablabla.com",
"repository": {
"type": "git",
"url": "https://github.com/blablabla.git"
},
"keywords": [
"ReactJS", "TICTACTOE"
],
"scripts": {
"start": "static -p 3000",
"build": "browserify -t babelify src/js/* > build/app.js"
},
"dependencies": {},
"devDependencies": {
"babelify": "^6.3.0",
"browserify": "^11.2.0",
"watchify": "^3.4.0"
}
}

6
Webpack
 Webpack is a module bundler
 Packages all our app JS in one single file (called bundle or main)
– all transpiled JSX and TypeScript with all dependencies
 It can even include other resources (fonts, images, css, …) => less files to
worry about

 Allows the use of require(‘module’) in any component

– Or the ES6 alternative -> import * from ‘module’

 Allows the transformation of the code

– Transpiling JSX or compiling TypeScript
– Optimization of the code

 Requires one or several config files (for different environments)

 Documentation: https://webpack.js.org/
7
Webpack
 Allows different configs for development and production
– In development: starts a development server (webpack-dev-server),
creates a bundle.js with all the code, usually including sourcemaps
and transpiles automatically all the code. It also includes hot
reloading, this means that all changes in the code are automatically
reloaded in the browser
– In production: packages all our app in one single js and html. It can
also compress resources, uglify the code, …

 It is usually used from npm scripts. For example:

"scripts": {
"start": "webpack-dev-server --config webpack.config.js",
"production": "webpack --config webpack.production.config.js“
}

8
Example: webpack.config.js
const path = require('path');
const webpack = require('webpack');

module.exports = {
entry: './src/index',
output: {
path: path.join(__dirname, 'dist'),
filename: 'myapp.min.js',
library: 'MyApp',
libraryTarget: 'umd',
},
module: {
loaders: [
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/,
query: {
plugins: ['lodash'],
},
}
],
}
};

9
Compilers and transpilers
 Browsers only “understand” JavaScript (and HTML and CSS)
– Not JSX
– Not Typescript
– Not ES6 or ES7 completely

 So, we need to transform our code to standard JS

– This action is called transpile or compile

 For example
– The TypeScript compiler
– Babel (for JSX transpilation)

10
Example: index.html in React App

<!DOCTYPE html>
<html lang="es">
<head>
<title>My React App</title>
</head>
<body>
<div id="root">
</div>
<script type="text/javascript" src="bundle.js"></script>
</body>
</html>

The whole app. Created

with Webpack

11
Example: index.html in Angular App

<!doctype html>
The whole app. Created
<html lang="en">
with Webpack
<head>
<meta charset="utf-8">
<title>My Angular App</title>
<base href="/”>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root></app-root>
<script type="text/javascript" src="inline.bundle.js"></script>
<script type="text/javascript" src="polyfills.bundle.js”></script>
<script type="text/javascript" src="styles.bundle.js"></script>
<script type="text/javascript" src="vendor.bundle.js"></script>
<script type="text/javascript" src="main.bundle.js"></script>
</body>
</html>

12
Testers
 Types or tests : Unit tests, Integration Tests, UI Tests (A.K.A
Functional Tests)
 Test Tools Types
1. Provide a testing structure (Mocha, Jasmine, Jest, Cucumber)
2. Provide assertions functions (Chai, Jasmine, Jest, Unexpected)
3. Generate and display test results (Mocha, Jasmine, Jest, Karma)
4. Generate and compare snapshots of component and data
structures to make sure changes from previous runs are intended
(Jest, Ava)
5. Provide mocks, spies, and stubs (Sinon, Jasmine, enzyme, Jest)
6. Generate code coverage reports (Istanbul, Jest, Blanket)
7. Provide a browser or browser-like environment with a control on
their scenarios execution (Protractor, Nightwatch, Phantom, Casper)

More info: https://medium.com/welldone-software/an-overview-of-javascript-

testing-in-2018-f68950900bc3

13
Linters
 Linter or lint refers to tools that analyze source code to flag
programming errors, bugs, stylistic errors, and suspicious
constructs

 Lint-like tools are especially useful for interpreted languages

like JavaScript and Python. Because such languages lack a
compiling phase that displays a list of errors prior to execution

 Examples of Linter Tools:

– For JavaScript: JSLint or ESLint
– For TypeScript: TSLint

14
Utils and Tools
Enrique Barra