O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.

TDC2016POA | Trilha JavaScript - O Rei dos Plugins - Tornando-se produtível e melhorando o seu código

135 visualizações

Publicada em

O Rei dos Plugins - Tornando-se produtível e melhorando o seu código

Publicada em: Educação
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

TDC2016POA | Trilha JavaScript - O Rei dos Plugins - Tornando-se produtível e melhorando o seu código

  1. 1. O Rei dos Plugins Tornando-se produtível e melhorando o seu código @thiagodorneles
  2. 2. Who am I? Developer and computer scientist. Over 9 years working with development. C#, Python, Ruby, Objective-C, Swift, SQL, HTML, JavaScript, … Backend and fronted developer at Superplayer
  3. 3. Superplayer is a music recommendation service which aims to improve every moment of peoples lives through the perfect soundtrack.
  4. 4. That's why we carefully combine human curation and technology to deliver taylor made playlists for each situation and person.
  5. 5. jointheband@superplayer.fm
  6. 6. WTF "rei dos plugins”?
  7. 7. CODE plugins
  8. 8. https://babeljs.io/
  9. 9. babel why? • Use next generation JavaScript, today. • A compiler / transpiler for your JavaScript • Pluggable • Supports: ES6, JSX, Flow, transformers, …
  10. 10. babel when? • Of course, if you want to use all stable (or not) features of JavaScript and make it compatible with unsupported browsers and versions
  11. 11. babel how do you use it? npm install -g babel babel scripts.js > dis.min.js babel src -d dist babel-node scripts.js
  12. 12. babel transformers / plugins • async / await functions • decorators • function-bind • react (jsx) • many, many others
  13. 13. ESLint http://eslint.org/
  14. 14. ESLint why? • The pluggable linting utility for JavaScript • Standard code pattern across the team • Prevent code errors • Real-time code validation* • Fully customizable
  15. 15. ESLint when? • To guarantee a unique code style across the team • Prevent errors, of course • Performance when coding
  16. 16. ESLint how do you use it?
  17. 17. ESLint how do you use it? https://medium.com/@dan_abramov/lint-like-it-s-2015-6987d44c5b48
  18. 18. ESLint how do you use it? https://github.com/airbnb/javascript
  19. 19. ESLint how do you use it?
  20. 20. ESLint how do you use it?
  21. 21. ESLint how do you use it?
  22. 22. ESLint how do you use it?
  23. 23. ESLint fully customizable
  24. 24. ESLint fully customizable • "off" or 0 - turn the rule off • "warn" or 1 - turn the rule on as a warning (doesn’t affect exit code) • "error" or 2 - turn the rule on as an error (exit code will be 1)
  25. 25. ESLint fully customizable
  26. 26. https://webpack.github.io/
  27. 27. Webpack why? • Webpack is the latest and greatest in front-end development tools. • Module bundler (javascript, images, fonts, css) • Works great with Babel, ReactJS, CommonJS, among others • Pluggable
  28. 28. Webpack when? • If you’re building a complex front-end application, Webpack will be useful for you • If is a fairly small application, then Webpack is overhead than you need
  29. 29. Webpack how do you use it?
  30. 30. Webpack how do you use it?
  31. 31. Webpack how do you use it?
  32. 32. Webpack how do you use it?
  33. 33. Webpack why don’t use ES2016 features with Babel?
  34. 34. Webpack why don’t use ES2016 features with Babel?
  35. 35. Webpack why don’t use ES2016 features with Babel?
  36. 36. Webpack how do you use it?
  37. 37. Webpack how do you use it?
  38. 38. Webpack loaders • Modules to load / import files and transform it • e.g. transform ES2015 files to make compatible with unsupported browsers
  39. 39. Webpack plugins • Plugins are additional modules to transform your final result • By example: • uglifyJSPlugin to minimize your JS files
  40. 40. Webpack loaders x plugins • Loaders: work before building bundle.js • Plugins: work directly on bundle.js. Final step of build process
  41. 41. IDE plugins
  42. 42. My atom plugins
  43. 43. Recommended Atom plugins • EditorConfig • DocBlockr • Atom TernJS • Auto-detect indentation • Sublime-Style-Column-Selection • Trailing spaces • Linter plugins https://medium.com/@satya164/supercharged-javascript-development-in-atom-ea034e22eabc
  44. 44. Obrigado! @thiagodorneles

×