[RuPy Campinas 2016] Que bagunça é essa, JavaScript?!

Uma tentativa de explicar essa bagunça que anda o mundo JavaScript e desmistificar algumas dúvidas.

Transcript

1. Mas que bagunça é essa, JavaScript?
2. Talysson / @talyssonoc talyssonoc.github.io Frontend / Codeminer42
3. O mundo JavaScript está evoluindo rápido demais.
4. O mundo JavaScript está evoluindo rápido demais. E isso não é ruim.
5. O mundo JavaScript está evoluindo rápido demais. E isso não é ruim. < 2009
6. O mundo JavaScript está evoluindo rápido demais. E isso não é ruim. < 2009 ≥ 2009, < 2013
7. O mundo JavaScript está evoluindo rápido demais. E isso não é ruim. < 2009 ≥ 2009, < 2013
8. O mundo JavaScript está evoluindo rápido demais. E isso não é ruim. < 2009 ≥ 2009, < 2013 ≥ 2013
9. O mundo JavaScript está evoluindo rápido demais. E isso não é ruim. < 2009 ≥ 2009, < 2013 ≥ 2013
10. OMFG!!!
11. A culpa é da comunidade JavaScript...
12. … ou talvez não.
13. Admita:
14. Talvez você não entenda JavaScript Admita:
15. Você não entende JavaScript ➔ Não entende porque JavaScript não tem uma standard lib ➔ Acha que jQuery é a solução pra todo projeto ➔ Espera que JavaScript seja igual a <sua linguagem preferida> ➔ Acha que “classes” arrumaram o JavaScript ➔ Acompanha hypes
16. Não se preocupe, acontece com todo mundo
17. JavaScript só passou a ser levado a sério recentemente ➔ O Node surgiu em 2009 ➔ O Ruby on Rails já tinha 3 anos ➔ O Django já tinha 4 anos ➔ O Symfony já tinha 4 anos ➔ A comunidade JavaScript é diferente das anteriores
18. Ok, mas e aquela bagunça?!
19. Ok, mas e aquela bagunça?! Ela existe (em partes).
20. Mas e aquela bagunça?! ➔ Gulp, Grunt ou npm scripts? ➔ NPM ou Bower? ➔ Pra que tanto micromódulo? ➔ Qual framework usar? ➔ Babel? Webpack? Browserify? ➔ JSX = HTML no meio do JS? ➔ Pra que PostCSS? E o SASS? ➔ CSS no meio do JS também?!
21. Grunt, Gulp ou npm scripts?
22. grunt.initConfig({ sass: { options: { sourceMap: true }, dist: { files: { 'main.css': 'main.scss' } } } }); var gulp = require('gulp'); var sass = require('gulp-sass'); gulp.task('sass', function () { return gulp .src('./sass/**/*.scss') .pipe(sass()) .pipe(gulp.dest('./dest’)); }); { … “sass”: “node-sass style.scss style.css" … }
23. grunt.initConfig({ sass: { options: { sourceMap: true }, dist: { files: { 'main.css': 'main.scss' } } } }); var gulp = require('gulp'); var sass = require('gulp-sass'); gulp.task('sass', function () { return gulp .src('./sass/**/*.scss') .pipe(sass()) .pipe(gulp.dest('./dest’)); }); { … “sass”: “node-sass style.scss style.css" … } Instalação de global Instalação de global Não escala
24. grunt.initConfig({ sass: { options: { sourceMap: true }, dist: { files: { 'main.css': 'main.scss' } } } }); var gulp = require('gulp'); var sass = require('gulp-sass'); gulp.task('sass', function () { return gulp .src('./sass/**/*.scss') .pipe(sass()) .pipe(gulp.dest('./dest’)); }); + OU { … “sass”: “grunt sass", “sass”: “gulp sass" … }
25. grunt.initConfig({ sass: { options: { sourceMap: true }, dist: { files: { 'main.css': 'main.scss' } } } }); var gulp = require('gulp'); var sass = require('gulp-sass'); gulp.task('sass', function () { return gulp .src('./sass/**/*.scss') .pipe(sass()) .pipe(gulp.dest('./dest’)); }); + OU { … “sass”: “grunt sass", “sass”: “gulp sass" … }
26. NPM ou Bower?
27. ➔ Package manager padrão do Node ➔ Módulos (JavaScript) em geral ➔ Pode conter dependências compiladas ➔ NPM + Browserify/Webpack ➔ Instalado com o NPM ➔ Pacotes front-end ➔ Dependências estáticas ➔ Comunidade inconstante ➔ Bower + RequireJS
28. ➔ Package manager padrão do Node ➔ Módulos (JavaScript) em geral ➔ Pode conter dependências compiladas ➔ NPM + Browserify/Webpack ➔ Instalado com o NPM ➔ Pacotes front-end ➔ Dependências estáticas ➔ Comunidade inconstante ➔ Bower + RequireJS
29. Pra que tanto micromódulo?
31. Pra que tanto micromódulo? ➔ O JavaScript não tem uma standard lib rica ➔ O tamanho do executável (bundle) é importante ➔ Fazer polyfill de uma std lib deixa o bundle maior ➔ Difícil de entender se você vem de uma linguagem de backend ➔ Micromódulos oferecem apenas o necessário ➔ Exageros acontecem
32. Qual framework usar?
34. Qual framework usar? ➔ Não existe bala de prata ➔ O seu problema deve caber no framework, não o contrário ➔ A escolha não se relaciona só com a complexidade da UI ➔ Não use um framework se você não entende porque está usando ➔ Ignore os hypes
35. Babel? Webpack? Browserify?
37. Babel? Webpack? Browserify? ➔ Não use o Babel se você não sabe programar sem ele ➔ Browserify deve ser sua escolha inicial ➔ Caso precise do Babel, use o Babelify ➔ Só migre para o Webpack se surgir a necessidade
38. JSX = HTML no JS?
39. <div ng-repeat="item in ctrl.items"> <list-item item="item"></list-item> </div> Ou você coloca JavaScript no HTML com mágica
40. // ... render() { return (<div> { items.map((item) => { return <ListItem item={ item } /> }) } </div>); } // ... Ou coloca HTML no seu JavaScript tornando-o JavaScript puro JSX
41. // ... render() { return React.createElement('div', null, items.map((item) => { return React.createElement( ListItem, { item: item } ); }) ); } // ... Sim, JavaScript puro JS
42. console.log(something);
43. JSX é apenas JavaScript.
44. Pra que PostCSS? E o SASS?
45. Pra que PostCSS? E o SASS? ➔ Só substitua SASS para PostCSS se surgir a necessidade ➔ PostCSS dá mais controle ao desenvolvedor ➔ Você pode usá-los juntos
46. CSS no meio do JS também?!
47. var divStyle = { color: 'white', backgroundImage: `url(${ imgUrl })` }; ReactDOM.render(<div style={divStyle}>Hello World!</div>, mountNode);
48. CSS no meio do JS também?! ➔ A maioria da comunidade não usa essa técnica ➔ Diminui a performance ➔ Hypes fazem parecer que é estritamente necessário
49. Ignore os hypes Pare de procurar balas de prata Aprenda JavaScript
50. become@codeminer42.com Você
51. Perguntas? Talysson / @talyssonoc talyssonoc.github.io