Share
Embed
Slide 1
Slide 1 text
Mas que bagunça é essa,
JavaScript?
Slide 2
Slide 2 text
Talysson / @talyssonoc
talyssonoc.github.io
Frontend / Codeminer42
Slide 3
Slide 3 text
O mundo JavaScript está evoluindo rápido demais.
Slide 4
Slide 4 text
O mundo JavaScript está evoluindo rápido demais.
E isso não é ruim.
Slide 5
Slide 5 text
O mundo JavaScript está evoluindo rápido demais.
E isso não é ruim.
< 2009
Slide 6
Slide 6 text
O mundo JavaScript está evoluindo rápido demais.
E isso não é ruim.
< 2009 ≥ 2009, < 2013
Slide 7
Slide 7 text
O mundo JavaScript está evoluindo rápido demais.
E isso não é ruim.
< 2009 ≥ 2009, < 2013
Slide 8
Slide 8 text
O mundo JavaScript está evoluindo rápido demais.
E isso não é ruim.
< 2009 ≥ 2009, < 2013 ≥ 2013
Slide 9
Slide 9 text
O mundo JavaScript está evoluindo rápido demais.
E isso não é ruim.
< 2009 ≥ 2009, < 2013 ≥ 2013
Slide 10
Slide 10 text
OMFG!!!
Slide 11
Slide 11 text
A culpa é da comunidade JavaScript...
Slide 12
Slide 12 text
… ou talvez não.
Slide 13
Slide 13 text
Admita:
Slide 14
Slide 14 text
Talvez você não entenda JavaScript
Admita:
Slide 15
Slide 15 text
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
➔
Acha que “classes” arrumaram o
JavaScript
➔
Acompanha hypes
Slide 16
Slide 16 text
Não se preocupe, acontece com todo mundo
Slide 17
Slide 17 text
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
Slide 18
Slide 18 text
Ok, mas e aquela bagunça?!
Slide 19
Slide 19 text
Ok, mas e aquela bagunça?!
Ela existe (em partes).
Slide 20
Slide 20 text
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?!
Slide 21
Slide 21 text
Grunt, Gulp ou
npm scripts?
Slide 22
Slide 22 text
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"
…
}
Slide 23
Slide 23 text
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
Slide 24
Slide 24 text
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"
…
}
Slide 25
Slide 25 text
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"
…
}
Slide 26
Slide 26 text
NPM
ou
Bower?
Slide 27
Slide 27 text
➔ 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
Slide 28
Slide 28 text
➔ 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
Slide 29
Slide 29 text
Pra que tanto micromódulo?
Slide 30
Slide 30 text
No content
Slide 31
Slide 31 text
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
Slide 32
Slide 32 text
Qual framework usar?
Slide 33
Slide 33 text
No content
Slide 34
Slide 34 text
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
Slide 35
Slide 35 text
Babel?
Webpack?
Browserify?
Slide 36
Slide 36 text
No content
Slide 37
Slide 37 text
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
Slide 38
Slide 38 text
JSX
=
HTML no JS?
Slide 39
Slide 39 text
Slide 40
Slide 40 text
// ...
render() {
return (
{
items.map((item) => {
return
})
}
);
}
// ...
Ou coloca HTML no seu JavaScript tornando-o JavaScript puro
JSX
Slide 41
Slide 41 text
// ...
render() {
return React.createElement('div', null,
items.map((item) => {
return React.createElement(
ListItem, { item: item }
);
})
);
}
// ...
Sim, JavaScript puro
JS
Slide 42
Slide 42 text
console.log(something);
Slide 43
Slide 43 text
JSX é apenas JavaScript.
Slide 44
Slide 44 text
Pra que PostCSS?
E o SASS?
Slide 45
Slide 45 text
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
Slide 46
Slide 46 text
CSS no meio do JS também?!
Slide 47
Slide 47 text
var divStyle = {
color: 'white',
backgroundImage: `url(${ imgUrl })`
};
ReactDOM.render(
Hello World!
, mountNode);
Slide 48
Slide 48 text
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
Slide 49
Slide 49 text
Ignore os hypes
Pare de procurar balas de prata
Aprenda JavaScript
Slide 51
Slide 51 text
Perguntas?
Talysson / @talyssonoc
talyssonoc.github.io