Taming Javascript

Your first 10 minutes with a new Javascript project

whoami

UI Designer

Frontend Developer

Remotely for @frylondon

@tricinel on Twitter and Github

I write Javascript every day

I don't give talks in public every day

...I might freeze

Object.freeze()


const life = { meaning: 42 };
Object.freeze(life);
life.meaning = 43; // Throws error
  

Javascript is weird


if (life == 42 && life == 43) {
  console.log('Magic!');
}
  

const life = {
  meaning: 41,
  valueOf() {
    return this.meaning += 1;
  }
};
  
Magic

Did you know

Javascript was developed in...10 days

World created in...7 days

The next 10 minutes

  1. Good Javascript developers
  2. Tools and Configurations
  3. #ZeroConfiguration

Good Javascript developers

  • Manage their dependencies wisely
  • Test their code
  • Lint their code
  • Format their code
  • Write modern Javascript
  • Bundle their code

Manage dependencies

  • NodeJS
  • npm
  • yarn

CLI differences


$ yarn global add pkg
$ yarn add pkg
$ yarn add pkg --dev
      

$ npm install pkg -g
$ npm install pkg --save
$ npm install pkg --save-dev
      

...and a few more

Jumpstart a project


$ yarn init -y
  

// package.json
{
  "name": "taming-javascript",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT"
}
  

Test your code with Jest

  • Open source
  • Parallel test running
  • Super fast
  • One stop shop for unit testing

Install


$ yarn add jest --dev
  

Configuration

  • No configuration needed out of the box
  • Very powerful when extended


// package.json
{
  "jest": {
    "testEnvironment": "jsdom",
    "coverage": true,
    "coverageThreshold": {}
  }
}
  

All the configuration options are available at https://facebook.github.io/jest.

Running


$ jest
  

$ jest [options] [file.js] [dir]
  

All the CLI options are available at https://facebook.github.io/jest.

Lint your code with ESLint

  • Flexible
  • Extensible
  • Plugins and Presets

Install


$ yarn add eslint --dev
  

$ yarn add eslint-config-airbnb-base --dev
  

Configuration


// .eslintrc.js
{
  "extends": "eslint-config-airbnb-base",
  "rules": {}
}
  

All the rules are available at eslint.org.

Running


$ eslint file.js
  

$ eslint [options] file.js [file.js] [dir]
  

All the CLI options are available at eslint.org.

Format your code with Prettier

  • Open source
  • Opinionated to a T
  • Automatic, hands-off approach
  • Great benefit for teams and newcommers

Install


$ yarn add prettier --dev
  

Configuration

No configuration needed out of the box


// prettier.config.js
module.exports = {
  printWidth: 80,
  tabWidth: 2,
  useTabs: false,
  semi: true,
  singleQuote: true,
  trailingComma: 'none',
  bracketSpacing: true,
  jsxBracketSameLine: false
};
  

Running


$ prettier
  

$ prettier [options] [file.js] [dir]
  

All the CLI options are available at https://prettier.io.

Write modern Javascript

  • ECMAScript - no relation to Java
  • ES5
  • ES6 / ES2015
  • ES2016
  • ES.Next

ES6

  • The 6th edition of Javascript
  • Standardised in 2015
  • Supported by most modern browsers
  • Not all features work cross-browser

Babel

  • Compiler for modern Javascript
  • Lets you write without worring about browsers
  • Works based on presets and plugins


$ yarn add babel-cli @babel/preset-env --dev
  

Configuration


// .babelrc
{
  "presets": [
    ["@babel/preset-env", {
      "targets": {
        "browsers": ["last 2 versions", "ie 10", "ie 11"]
      }
    }]
  ]
}
  

Running


$ babel file.js
  

$ babel [file.js] [dir] [options]
  

All the CLI options are available at https://babeljs.io.

Bundle your code

  • Webpack
  • Rollup
  • ParcelJs
  • Browserify
  • Gulp
  • Grunt

Same but different

Webpack

  • Build complex single-page applications
  • Code-splitting
  • Static assets
  • Use loaders to understand various file types
  • Use plugins to automate operations
  • Hot module replacement
  • Tree shaking

Install Webpack


$ yarn add webpack --dev
  

// webpack.config.js
module.exports = {
  entry: './app.js',
  output: {
    filename: 'bundle.js'
  }
};
  

$ webpack
  

Rollup

  • Build JS libraries
  • No good code splitting yet
  • Tree shaking

Rollup


$ yarn add rollup --dev
  

// rollup.config.js
module.exports = {
  input: './app.js',
  output: 'bundle.js'
};
  

$ rollup
  

All together now

  • Test your code with Jest
  • Lint your code with ESLint
  • Format your code with Prettier
  • Write ES6 and use Babel to compile
  • Bundle your SPA with Webpack
  • Bundle your library with Rollup

One project

Mic drop

Multiple projects?

Nothing fits

This is a nightmare!

😱

#ZeroConfiguration

  • Developer experience
  • Consistency across projects
  • Consistency across teams
  • Bye bye maintenance nightmare

Configuration should not stand in the way of getting started

@dan_abramov

How

  • One toolset to rule them all
  • Have sensible defaults for newcommers
  • Advanced configuration for special use cases
  • Have an escape hatch

Toolsets

...and also...

Shameless plug

frontwerk

  • Test your code with Jest
  • Lint your code with ESLint
  • Format your code with Prettier
  • Write ES6 and use Babel to compile
  • Bundle your SPA with Webpack
  • Bundle your library with Rollup

Install


$ yarn add frontwerk --dev
  

$ frontwerk test # test your javascript
$ frontwerk lint # lint your javascript
$ frontwerk prettier # format your javascript
$ frontwerk build # build your javascript
  

Extensible


// .eslintrc.js
{
  "extends": "./node_modules/frontwerk/eslint.js",
  "rules": {
    "comma-dangle": ["error", {
      "arrays": "never",
      "objects": "always",
    }]
  }
}
  

Actively developed

Oh the joy!

😍

Final words

  • Javascript is weird
  • Make use of the tools given to you
  • Implement cross-project, cross-team solutions
  • Learn, automate and simplify

Thank you!

Quick demo