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: [email protected]

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

https://bower.io/

https://www.npmjs.com/

http://jspm.io/

Download and copy

Bower

NPM

JSPM





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

https://www.npmjs.com/

https://npms.io/

NPM

NPMS.IO





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

http://coffeescript.org/

http://babeljs.io/

https://www.typescriptlang.org/

https://facebook.github.io/react/docs/jsx-in-depth.html

https://www.dartlang.org/

CoffeeScript

Babel

TypeScript

JSX

Dart





Task runners• Grunt• Gulp• Broccoli• NPM Scripts

https://github.com/gruntjs/grunt

https://github.com/gulpjs/gulp

https://github.com/broccolijs/broccoli

https://docs.npmjs.com/misc/scripts

Grunt

Gulp

Broccoli

NPM Scripts

NPM Scripts





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

https://github.com/mishoo/UglifyJS2

https://github.com/jakubpawlowicz/clean-css

https://github.com/jakubpawlowicz/clean-css

https://github.com/kangax/html-minifier

https://github.com/kangax/html-minifier

Uglify

Clean CSS

HTML Minifier





Bundling• Browserify• SystemJS• Webpack• Rollup• jspm

http://browserify.org/

https://github.com/systemjs/systemjs

http://webpack.github.io/

http://rollupjs.org/

http://jspm.io/0.17-beta-guide/bundling.html

Browserify

SystemJS

Webpack

Rollup

JSPM





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

https://developer.chrome.com/devtools


https://developers.google.com/web/tools/chrome-devtools/debug/console/console-reference?utm_source=dcc&utm_medium=redirect&utm_campaign=2016q3

https://developers.google.com/web/tools/chrome-devtools/debug/readability/pretty-print?hl=en

Console API

Pretty Print

Pretty Print

Break on DOM modifications

Break on XHR

Asynchronous stack trace

Timeline

Audits

Profile





Performance testing• YSlow• WebPageTest• Chrome DevTools• Lighthouse

http://yslow.org/

https://www.webpagetest.org/



https://github.com/GoogleChrome/lighthouse

YSlow

WebPageTest

Chrome timeline

Chrome audit





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

https://github.com/testem/testem

https://mochajs.org/

http://chaijs.com/

https://github.com/domenic/chai-as-promised

https://github.com/tmpvar/jsdom

Testem

Mocha

Chai

Chai as promised

JS Dom





End 2 End Testing• Selenium• Nightwatch• Browserstack

http://www.seleniumhq.org/

http://nightwatchjs.org/

https://www.browserstack.com/

Selenium

Nightwatch

BrowserStack





Code generators• Angular CLI• Create React App• Yeoman

https://cli.angular.io/

https://facebook.github.io/react/blog/2016/07/22/create-apps-with-no-configuration.html

http://yeoman.io/

Angular CLI

Create React App

Yeoman





Linting• ESLint• TSLint• Stylelint• SonarQube

http://eslint.org/

http://palantir.github.io/tslint/

http://stylelint.io/

http://www.sonarqube.org/

ESLint

TSLint

StyleLint

SonarQube





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

http://lesscss.org/

http://sass-lang.com/

http://stylelint.io/

https://github.com/brigade/scss-lint

https://github.com/brigade/scss-lint

http://postcss.org/

https://github.com/postcss/autoprefixer

LESS

SASS

SyleLint

SCSS Lint

Post CSS

Autoprefixer





Online editor• JSFiddle• JSBin• HyperDev

https://jsfiddle.net/

https://jsbin.com/

https://hyperdev.com/

JS Fiddle

JS Bin

Hyperdev





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

https://www.zenhub.com/

https://shields.io/

https://david-dm.org/

https://greenkeeper.io/

https://travis-ci.org/

https://codecov.io/

Zenhub

Gulp-main-bower-files

Shields

David

Greenkeeper

Travis CI

Codecov





Thank you

Maurice de Beijer - @mauricedb

Technology

Tooling for the productive front-end developer