Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Tooling for the productive front-end developer

308 views

Published on

Tooling for the productive front-end developer presentation at the QNH DevDays 2016

Published in: Technology
  • Be the first to comment

Tooling for the productive front-end developer

  1. 1. Tooling for the productive front-end developer Maurice de Beijer @mauricedb
  2. 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 2
  3. 3. Overview • Where to get scripts • Searching for NPM packages • ECMAScript 2015 and beyond • Task runners • Minification • Bundling • Chrome DevTools • Performance testing • Unit Testing • E2E Testing • Code generators • Linting • CSS • Online editor • Tools I use with GitHub
  4. 4. Where to get scripts • Bower • NPM • JSPM
  5. 5. Download and copy 
  6. 6. Bower
  7. 7. NPM
  8. 8. JSPM
  9. 9. Overview • Where to get scripts • Searching for NPM packages • ECMAScript 2015 and beyond • Task runners • Minification • Bundling • Chrome DevTools • Performance testing • Unit Testing • E2E Testing • Code generators • Linting • CSS • Online editor • Tools I use with GitHub
  10. 10. Searching for NPM packages • https://www.npmjs.com • https://npms.io
  11. 11. NPM
  12. 12. NPMS.IO
  13. 13. Overview • Where to get scripts • Searching for NPM packages • ECMAScript 2015 and beyond • Task runners • Minification • Bundling • Chrome DevTools • Performance testing • Unit Testing • E2E Testing • Code generators • Linting • CSS • Online editor • Tools I use with GitHub
  14. 14. ECMAScript 2015 and beyond • CoffeeScript • Babel • TypeScript • JSX • Dart
  15. 15. CoffeeScript
  16. 16. Babel
  17. 17. TypeScript
  18. 18. JSX
  19. 19. Dart
  20. 20. Overview • Where to get scripts • Searching for NPM packages • ECMAScript 2015 and beyond • Task runners • Minification • Bundling • Chrome DevTools • Performance testing • Unit Testing • E2E Testing • Code generators • Linting • CSS • Online editor • Tools I use with GitHub
  21. 21. Task runners • Grunt • Gulp • Broccoli • NPM Scripts
  22. 22. Grunt
  23. 23. Gulp
  24. 24. Broccoli
  25. 25. NPM Scripts
  26. 26. NPM Scripts
  27. 27. Overview • Where to get scripts • Searching for NPM packages • ECMAScript 2015 and beyond • Task runners • Minification • Bundling • Chrome DevTools • Performance testing • Unit Testing • E2E Testing • Code generators • Linting • CSS • Online editor • Tools I use with GitHub
  28. 28. Minification • uglify-js • clean-css • html-minifier
  29. 29. Uglify
  30. 30. Clean CSS
  31. 31. HTML Minifier
  32. 32. Overview • Where to get scripts • Searching for NPM packages • ECMAScript 2015 and beyond • Task runners • Minification • Bundling • Chrome DevTools • Performance testing • Unit Testing • E2E Testing • Code generators • Linting • CSS • Online editor • Tools I use with GitHub
  33. 33. Bundling • Browserify • SystemJS • Webpack • Rollup • jspm
  34. 34. Browserify
  35. 35. SystemJS
  36. 36. Webpack
  37. 37. Rollup
  38. 38. JSPM
  39. 39. Overview • Where to get scripts • Searching for NPM packages • ECMAScript 2015 and beyond • Task runners • Minification • Bundling • Chrome DevTools • Performance testing • Unit Testing • E2E Testing • Code generators • Linting • CSS • Online editor • Tools I use with GitHub
  40. 40. Chrome DevTools • Console API • Pretty Print • Break on DOM modifications • Break on XHR • Break on Event Listener • Asynchronous stack trace • Timeline • Audits • Profiles
  41. 41. Console API
  42. 42. Pretty Print
  43. 43. Pretty Print
  44. 44. Break on DOM modifications
  45. 45. Break on XHR
  46. 46. Asynchronous stack trace
  47. 47. Timeline
  48. 48. Audits
  49. 49. Profile
  50. 50. Overview • Where to get scripts • Searching for NPM packages • ECMAScript 2015 and beyond • Task runners • Minification • Bundling • Chrome DevTools • Performance testing • Unit Testing • E2E Testing • Code generators • Linting • CSS • Online editor • Tools I use with GitHub
  51. 51. Performance testing • YSlow • WebPageTest • Chrome DevTools • Lighthouse
  52. 52. YSlow
  53. 53. WebPageTest
  54. 54. Chrome timeline
  55. 55. Chrome audit
  56. 56. Overview • Where to get scripts • Searching for NPM packages • ECMAScript 2015 and beyond • Task runners • Minification • Bundling • Chrome DevTools • Performance testing • Unit Testing • E2E Testing • Code generators • Linting • CSS • Online editor • Tools I use with GitHub
  57. 57. Unit Testing • Testem • Mocha • Chai • Chai-as-promised • Jsdom
  58. 58. Testem
  59. 59. Mocha
  60. 60. Chai
  61. 61. Chai as promised
  62. 62. JS Dom
  63. 63. Overview • Where to get scripts • Searching for NPM packages • ECMAScript 2015 and beyond • Task runners • Minification • Bundling • Chrome DevTools • Performance testing • Unit Testing • E2E Testing • Code generators • Linting • CSS • Online editor • Tools I use with GitHub
  64. 64. End 2 End Testing • Selenium • Nightwatch • Browserstack
  65. 65. Selenium
  66. 66. Nightwatch
  67. 67. BrowserStack
  68. 68. Overview • Where to get scripts • Searching for NPM packages • ECMAScript 2015 and beyond • Task runners • Minification • Bundling • Chrome DevTools • Performance testing • Unit Testing • E2E Testing • Code generators • Linting • CSS • Online editor • Tools I use with GitHub
  69. 69. Code generators • Angular CLI • Create React App • Yeoman
  70. 70. Angular CLI
  71. 71. Create React App
  72. 72. Yeoman
  73. 73. Overview • Where to get scripts • Searching for NPM packages • ECMAScript 2015 and beyond • Task runners • Minification • Bundling • Chrome DevTools • Performance testing • Unit Testing • E2E Testing • Code generators • Linting • CSS • Online editor • Tools I use with GitHub
  74. 74. Linting • ESLint • TSLint • Stylelint • SonarQube
  75. 75. ESLint
  76. 76. TSLint
  77. 77. StyleLint
  78. 78. SonarQube
  79. 79. Overview • Where to get scripts • Searching for NPM packages • ECMAScript 2015 and beyond • Task runners • Minification • Bundling • Chrome DevTools • Performance testing • Unit Testing • E2E Testing • Code generators • Linting • CSS • Online editor • Tools I use with GitHub
  80. 80. CSS • Less • SASS • Stylelint • scss-lint • PostCSS • Autoprefixer
  81. 81. LESS
  82. 82. SASS
  83. 83. SyleLint
  84. 84. SCSS Lint
  85. 85. Post CSS
  86. 86. Autoprefixer
  87. 87. Overview • Where to get scripts • Searching for NPM packages • ECMAScript 2015 and beyond • Task runners • Minification • Bundling • Chrome DevTools • Performance testing • Unit Testing • E2E Testing • Code generators • Linting • CSS • Online editor • Tools I use with GitHub
  88. 88. Online editor • JSFiddle • JSBin • HyperDev
  89. 89. JS Fiddle
  90. 90. JS Bin
  91. 91. Hyperdev
  92. 92. Overview • Where to get scripts • Searching for NPM packages • ECMAScript 2015 and beyond • Task runners • Minification • Bundling • Chrome DevTools • Performance testing • Unit Testing • E2E Testing • Code generators • Linting • CSS • Online editor • Tools I use with GitHub
  93. 93. Tools I use with GitHub • Zenhub • Shields • David • Greenkeeper • Travis CI • Codecov
  94. 94. Zenhub
  95. 95. Gulp-main-bower-files
  96. 96. Shields
  97. 97. David
  98. 98. Greenkeeper
  99. 99. Travis CI
  100. 100. Codecov
  101. 101. Overview • Where to get scripts • Searching for NPM packages • ECMAScript 2015 and beyond • Task runners • Minification • Bundling • Chrome DevTools • Performance testing • Unit Testing • E2E Testing • Code generators • Linting • CSS • Online editor • Tools I use with GitHub
  102. 102. Thank you Maurice de Beijer - @mauricedb

×