Tooling for the productive front-end developer
Download as PPTX, PDF2 likes549 views
![Maurice De Beijer [MVP], profile picture](https://cdn.slidesharecdn.com/profile-photo-mauricedb-48x48.jpg?cb=1750747544)
The document discusses various tools for productive front-end development. It covers tools for getting scripts like Bower and NPM, searching for packages on sites like npmjs.com, transpiling languages like TypeScript and JSX with Babel, running tasks with tools like Gulp and Webpack, minifying code with Uglify and Clean CSS, bundling code, testing with tools like Mocha, ESLint and Selenium, generating code with Angular CLI and Create React App, and using GitHub with tools like Travis CI.
Tooling for the productive front-end developer
- 1. Tooling for the productive front-end developer Maurice 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] 2
- 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. Where to get scripts • Bower • NPM • JSPM
- 5. Download and copy
- 6. Bower
- 7. NPM
- 8. JSPM
- 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. Searching for NPM packages • https://www.npmjs.com • https://npms.io
- 11. NPM
- 12. NPMS.IO
- 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. ECMAScript 2015 and beyond • CoffeeScript • Babel • TypeScript • JSX • Dart
- 15. CoffeeScript
- 16. Babel
- 17. TypeScript
- 18. JSX
- 19. Dart
- 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. Task runners • Grunt • Gulp • Broccoli • NPM Scripts
- 22. Grunt
- 23. Gulp
- 24. Broccoli
- 25. NPM Scripts
- 26. NPM Scripts
- 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. Minification • uglify-js • clean-css • html-minifier
- 29. Uglify
- 30. Clean CSS
- 31. HTML Minifier
- 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. Bundling • Browserify • SystemJS • Webpack • Rollup • jspm
- 34. Browserify
- 35. SystemJS
- 36. Webpack
- 37. Rollup
- 38. JSPM
- 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. Chrome DevTools • Console API • Pretty Print • Break on DOM modifications • Break on XHR • Break on Event Listener • Asynchronous stack trace • Timeline • Audits • Profiles
- 41. Console API
- 42. Pretty Print
- 43. Pretty Print
- 44. Break on DOM modifications
- 45. Break on XHR
- 47. Timeline
- 48. Audits
- 49. Profile
- 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. Performance testing • YSlow • WebPageTest • Chrome DevTools • Lighthouse
- 52. YSlow
- 53. WebPageTest
- 54. Chrome timeline
- 55. Chrome audit
- 57. 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
- 58. Unit Testing • Testem • Mocha • Chai • Chai-as-promised • Jsdom
- 59. Testem
- 60. Mocha
- 61. Chai
- 62. Chai as promised
- 63. JS Dom
- 64. 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
- 65. End 2 End Testing • Selenium • Nightwatch • Browserstack
- 66. Selenium
- 67. Nightwatch
- 68. BrowserStack
- 69. 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
- 70. Code generators • Angular CLI • Create React App • Yeoman
- 71. Angular CLI
- 72. Create React App
- 73. Yeoman
- 74. 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
- 75. Linting • ESLint • TSLint • Stylelint • SonarQube
- 76. ESLint
- 77. TSLint
- 78. StyleLint
- 79. SonarQube
- 80. 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
- 81. CSS • Less • SASS • Stylelint • scss-lint • PostCSS • Autoprefixer
- 82. LESS
- 83. SASS
- 84. SyleLint
- 85. SCSS Lint
- 86. Post CSS
- 87. Autoprefixer
- 88. 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
- 89. Online editor • JSFiddle • JSBin • HyperDev
- 90. JS Fiddle
- 91. JS Bin
- 92. Hyperdev
- 93. 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
- 94. Tools I use with GitHub • Zenhub • Shields • David • Greenkeeper • Travis CI • Codecov
- 95. Zenhub
- 97. Shields
- 98. David
- 99. Greenkeeper
- 100. Travis CI
- 101. Codecov
- 102. 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
- 103. Thank you Maurice de Beijer - @mauricedb
Editor's Notes
- #104: https://www.flickr.com/photos/stevendepolo/4582437563/