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

277 views

Published on

Tooling for the productive front end developer at the DWX-Developer Week conference. http://www.developer-week.de/

Published in: Technology
  • Be the first to comment

  • Be the first to like this

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  MicrosoftAzure 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 UnitTesting E2ETesting Code generators Linting CSS Online editor Tools I use with GitHub
  4. 4. Where to get scripts Bower NPM Yarn 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 UnitTesting E2ETesting 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 UnitTesting E2ETesting Code generators Linting CSS Online editor Tools I use with GitHub
  14. 14. ECMAScript 2015 and beyond CoffeeScript Babel TypeScript JSX Flow Dart
  15. 15. CoffeeScript
  16. 16. Babel
  17. 17. TypeScript
  18. 18. JSX
  19. 19. Flow
  20. 20. Dart
  21. 21. Overview Where to get scripts Searching for NPM packages ECMAScript 2015 and beyond Task runners Minification Bundling Chrome DevTools Performance testing UnitTesting E2ETesting Code generators Linting CSS Online editor Tools I use with GitHub
  22. 22. Task runners Grunt Gulp Broccoli NPM Scripts
  23. 23. Grunt
  24. 24. Gulp
  25. 25. Broccoli
  26. 26. NPMScripts
  27. 27. NPM Scripts
  28. 28. Overview Where to get scripts Searching for NPM packages ECMAScript 2015 and beyond Task runners Minification Bundling Chrome DevTools Performance testing UnitTesting E2ETesting Code generators Linting CSS Online editor Tools I use with GitHub
  29. 29. Minification uglify-js clean-css html-minifier
  30. 30. Uglify
  31. 31. CleanCSS
  32. 32. HTML Minifier
  33. 33. Overview Where to get scripts Searching for NPM packages ECMAScript 2015 and beyond Task runners Minification Bundling Chrome DevTools Performance testing UnitTesting E2ETesting Code generators Linting CSS Online editor Tools I use with GitHub
  34. 34. Bundling Browserify SystemJS Webpack Rollup jspm
  35. 35. Browserify
  36. 36. SystemJS
  37. 37. Webpack
  38. 38. Rollup
  39. 39. JSPM
  40. 40. Overview Where to get scripts Searching for NPM packages ECMAScript 2015 and beyond Task runners Minification Bundling Chrome DevTools Performance testing UnitTesting E2ETesting Code generators Linting CSS Online editor Tools I use with GitHub
  41. 41. Chrome DevTools Console API Pretty Print Break on DOM modifications Break on XHR Break on Event Listener Asynchronous stack trace Timeline Audits Profiles
  42. 42. ConsoleAPI
  43. 43. Pretty Print
  44. 44. Pretty Print
  45. 45. Break on DOM modificatio ns
  46. 46. Break on XHR
  47. 47. Asynchronous stack trace
  48. 48. Timeline
  49. 49. Audits
  50. 50. Profile
  51. 51. Overview Where to get scripts Searching for NPM packages ECMAScript 2015 and beyond Task runners Minification Bundling Chrome DevTools Performance testing UnitTesting E2ETesting Code generators Linting CSS Online editor Tools I use with GitHub
  52. 52. Performance testing YSlow WebPageTest Chrome DevTools Lighthouse
  53. 53. YSlow
  54. 54. WebPageTest
  55. 55. Chrome timeline
  56. 56. Chrome audit
  57. 57. Overview Where to get scripts Searching for NPM packages ECMAScript 2015 and beyond Task runners Minification Bundling Chrome DevTools Performance testing UnitTesting E2ETesting Code generators Linting CSS Online editor Tools I use with GitHub
  58. 58. UnitTesting Testem Mocha Jest Chai Chai-as-promised Jsdom
  59. 59. Testem
  60. 60. Mocha
  61. 61. Jest
  62. 62. Chai
  63. 63. Chai as promised
  64. 64. JS Dom
  65. 65. Overview Where to get scripts Searching for NPM packages ECMAScript 2015 and beyond Task runners Minification Bundling Chrome DevTools Performance testing UnitTesting E2ETesting Code generators Linting CSS Online editor Tools I use with GitHub
  66. 66. End 2 End Testing Selenium Nightwatch Browserstack
  67. 67. Selenium
  68. 68. Nightwatch
  69. 69. BrowserStack
  70. 70. Overview Where to get scripts Searching for NPM packages ECMAScript 2015 and beyond Task runners Minification Bundling Chrome DevTools Performance testing UnitTesting E2ETesting Code generators Linting CSS Online editor Tools I use with GitHub
  71. 71. Code generators Angular CLI Create ReactApp Yeoman Swagger
  72. 72. AngularCLI
  73. 73. Create React App
  74. 74. Yeoman
  75. 75. Overview Where to get scripts Searching for NPM packages ECMAScript 2015 and beyond Task runners Minification Bundling Chrome DevTools Performance testing UnitTesting E2ETesting Code generators Linting CSS Online editor Tools I use with GitHub
  76. 76. Linting ESLint JavaScript Standard Style JavaScript Semi-Standard Style TSLint Stylelint SonarQube Code Climate
  77. 77. ESLint
  78. 78. JavaScript StandardStyle
  79. 79. JavaScript Semi-Standard Style
  80. 80. TSLint
  81. 81. StyleLint
  82. 82. SonarQube
  83. 83. Overview Where to get scripts Searching for NPM packages ECMAScript 2015 and beyond Task runners Minification Bundling Chrome DevTools Performance testing UnitTesting E2ETesting Code generators Linting CSS Online editor Tools I use with GitHub
  84. 84. CSS Less SASS Stylelint scss-lint PostCSS Autoprefixer
  85. 85. LESS
  86. 86. SASS
  87. 87. SyleLint
  88. 88. SCSS Lint
  89. 89. PostCSS
  90. 90. Autoprefixer
  91. 91. Overview Where to get scripts Searching for NPM packages ECMAScript 2015 and beyond Task runners Minification Bundling Chrome DevTools Performance testing UnitTesting E2ETesting Code generators Linting CSS Online editor Tools I use with GitHub
  92. 92. Online editor JSFiddle JSBin Glitch
  93. 93. JS Fiddle
  94. 94. JS Bin
  95. 95. Glitch
  96. 96. Overview Where to get scripts Searching for NPM packages ECMAScript 2015 and beyond Task runners Minification Bundling Chrome DevTools Performance testing UnitTesting E2ETesting Code generators Linting CSS Online editor Tools I use with GitHub
  97. 97. Tools I use with GitHub Zenhub Refined GitHub Shields David Greenkeeper Travis CI Codecov Code Climate
  98. 98. Zenhub
  99. 99. Gulp-main- bower-files
  100. 100. Shields
  101. 101. David
  102. 102. Greenkeeper
  103. 103. TravisCI
  104. 104. Codecov
  105. 105. CodeClimate
  106. 106. Overview Where to get scripts Searching for NPM packages ECMAScript 2015 and beyond Task runners Minification Bundling Chrome DevTools Performance testing UnitTesting E2ETesting Code generators Linting CSS Online editor Tools I use with GitHub
  107. 107. Thank you Maurice de Beijer - @mauricedb

×