Tooling for the productive front-end developer

Tooling for the productive front-

end developerMaurice de Beijer

@mauricedb

2

Who am I?• Maurice de Beijer• The Problem Solver• Microsoft Azure MVP• Freelance developer/instructor• Twitter: @mauricedb and @React_Tutorial• Web: http://www.TheProblemSolver.nl• E-mail: maurice.de.beijer@gmail.com

Overview• Where to get scripts• Searching for NPM pack

ages• ECMAScript 2015 and b

eyond• Task runners• Minification• Bundling• Chrome DevTools

• Performance testing• Unit Testing• E2E Testing• Code generators• Linting• CSS• Online editor• Tools I use with GitHub

Where to get scripts• Bower• NPM• JSPM

Download and copy

Bower

NPM

JSPM

Overview• Where to get scripts• Searching for NPM pack

ages• ECMAScript 2015 and b

eyond• Task runners• Minification• Bundling• Chrome DevTools

• Performance testing• Unit Testing• E2E Testing• Code generators• Linting• CSS• Online editor• Tools I use with GitHub

Searching for NPM packages• https://www.npmjs.com• https://npms.io

NPM

NPMS.IO

Overview• Where to get scripts• Searching for NPM pack

ages• ECMAScript 2015 and b

eyond• Task runners• Minification• Bundling• Chrome DevTools

• Performance testing• Unit Testing• E2E Testing• Code generators• Linting• CSS• Online editor• Tools I use with GitHub

ECMAScript 2015 and beyond• CoffeeScript• Babel• TypeScript• JSX• Dart

CoffeeScript

Babel

TypeScript

JSX

Dart

Overview• Where to get scripts• Searching for NPM pack

ages• ECMAScript 2015 and b

eyond• Task runners• Minification• Bundling• Chrome DevTools

• Performance testing• Unit Testing• E2E Testing• Code generators• Linting• CSS• Online editor• Tools I use with GitHub

Task runners• Grunt• Gulp• Broccoli• NPM Scripts

Grunt

Gulp

Broccoli

NPM Scripts

NPM Scripts

Overview• Where to get scripts• Searching for NPM pack

ages• ECMAScript 2015 and b

eyond• Task runners• Minification• Bundling• Chrome DevTools

• Performance testing• Unit Testing• E2E Testing• Code generators• Linting• CSS• Online editor• Tools I use with GitHub

Minification• uglify-js• clean-css• html-minifier

Uglify

Clean CSS

HTML Minifier

Overview• Where to get scripts• Searching for NPM pack

ages• ECMAScript 2015 and b

eyond• Task runners• Minification• Bundling• Chrome DevTools

• Performance testing• Unit Testing• E2E Testing• Code generators• Linting• CSS• Online editor• Tools I use with GitHub

Bundling• Browserify• SystemJS• Webpack• Rollup• jspm

Browserify

SystemJS

Webpack

Rollup

JSPM

Overview• Where to get scripts• Searching for NPM pack

ages• ECMAScript 2015 and b

eyond• Task runners• Minification• Bundling• Chrome DevTools

• Performance testing• Unit Testing• E2E Testing• Code generators• Linting• CSS• Online editor• Tools I use with GitHub

Chrome DevTools• Console API• Pretty Print• Break on DOM modifications• Break on XHR• Break on Event Listener• Asynchronous stack trace• Timeline• Audits• Profiles

Console API

Pretty Print

Pretty Print

Break on DOM modifications

Break on XHR

Asynchronous stack trace

Timeline

Audits

Profile

Overview• Where to get scripts• Searching for NPM pack

ages• ECMAScript 2015 and b

eyond• Task runners• Minification• Bundling• Chrome DevTools

• Performance testing• Unit Testing• E2E Testing• Code generators• Linting• CSS• Online editor• Tools I use with GitHub

Performance testing• YSlow• WebPageTest• Chrome DevTools• Lighthouse

YSlow

WebPageTest

Chrome timeline

Chrome audit

Overview• Where to get scripts• Searching for NPM pack

ages• ECMAScript 2015 and b

eyond• Task runners• Minification• Bundling• Chrome DevTools

• Performance testing• Unit Testing• E2E Testing• Code generators• Linting• CSS• Online editor• Tools I use with GitHub

Unit Testing• Testem• Mocha• Chai• Chai-as-promised• Jsdom

Testem

Mocha

Chai

Chai as promised

JS Dom

Overview• Where to get scripts• Searching for NPM pack

ages• ECMAScript 2015 and b

eyond• Task runners• Minification• Bundling• Chrome DevTools

• Performance testing• Unit Testing• E2E Testing• Code generators• Linting• CSS• Online editor• Tools I use with GitHub

End 2 End Testing• Selenium• Nightwatch• Browserstack

Selenium

Nightwatch

BrowserStack

Overview• Where to get scripts• Searching for NPM pack

ages• ECMAScript 2015 and b

eyond• Task runners• Minification• Bundling• Chrome DevTools

• Performance testing• Unit Testing• E2E Testing• Code generators• Linting• CSS• Online editor• Tools I use with GitHub

Code generators• Angular CLI• Create React App• Yeoman

Angular CLI

Create React App

Yeoman

Overview• Where to get scripts• Searching for NPM pack

ages• ECMAScript 2015 and b

eyond• Task runners• Minification• Bundling• Chrome DevTools

• Performance testing• Unit Testing• E2E Testing• Code generators• Linting• CSS• Online editor• Tools I use with GitHub

Linting• ESLint• TSLint• Stylelint• SonarQube

ESLint

TSLint

StyleLint

SonarQube

Overview• Where to get scripts• Searching for NPM pack

ages• ECMAScript 2015 and b

eyond• Task runners• Minification• Bundling• Chrome DevTools

• Performance testing• Unit Testing• E2E Testing• Code generators• Linting• CSS• Online editor• Tools I use with GitHub

CSS• Less• SASS• Stylelint• scss-lint• PostCSS• Autoprefixer

LESS

SASS

SyleLint

SCSS Lint

Post CSS

Autoprefixer

Overview• Where to get scripts• Searching for NPM pack

ages• ECMAScript 2015 and b

eyond• Task runners• Minification• Bundling• Chrome DevTools

• Performance testing• Unit Testing• E2E Testing• Code generators• Linting• CSS• Online editor• Tools I use with GitHub

Online editor• JSFiddle• JSBin• HyperDev

JS Fiddle

JS Bin

Hyperdev

Overview• Where to get scripts• Searching for NPM pack

ages• ECMAScript 2015 and b

eyond• Task runners• Minification• Bundling• Chrome DevTools

• Performance testing• Unit Testing• E2E Testing• Code generators• Linting• CSS• Online editor• Tools I use with GitHub

Tools I use with GitHub• Zenhub• Shields• David• Greenkeeper• Travis CI• Codecov

Zenhub

Gulp-main-bower-files

Shields

David

Greenkeeper

Travis CI

Codecov

Overview• Where to get scripts• Searching for NPM pack

ages• ECMAScript 2015 and b

eyond• Task runners• Minification• Bundling• Chrome DevTools

• Performance testing• Unit Testing• E2E Testing• Code generators• Linting• CSS• Online editor• Tools I use with GitHub

Thank you

Maurice de Beijer - @mauricedb