Share
Embed
Slide 1
Slide 1 text
Front-end tooling
Porque e como?
Slide 2
Slide 2 text
Talysson
@talyssonoc
Front-end/Codeminer42
Slide 3
Slide 3 text
Agenda
• O problema
• A solução
• Como agregar à sua stack
Slide 4
Slide 4 text
Mas que problema?
(☉_☉)
Slide 5
Slide 5 text
(^ᴗ^)
$(function() {
$('#dont-try-ids-at-home').show();
});
Slide 6
Slide 6 text
(^ᴗ^)
jquery.js
script.js
style.css
Slide 7
Slide 7 text
(^_^)
jquery.js
script.js
style.css
jquery.
plugin.js
Slide 8
Slide 8 text
(-_-)
jquery.
plugin2.css
script.js
jquery.
plugin2.js
jquery.js style.css
jquery.
plugin.js
Slide 9
Slide 9 text
(◕_◕)
Minificação
jquery.
plugin2.css
script.js
jquery.
plugin2.js
jquery.js style.css
jquery.
plugin.js
Slide 10
Slide 10 text
(◔_◔)
Styleguide
Minificação
jquery.
plugin2.css
script.js
jquery.
plugin2.js
jquery.js style.css
jquery.
plugin.js
Slide 11
Slide 11 text
(◑_◑)
Testes
Styleguide
Minificação
jquery.
plugin2.css
script.js
jquery.
plugin2.js
jquery.js style.css
jquery.
plugin.js
Slide 12
Slide 12 text
(●_●)
Testes
Styleguide
Minificação
jquery.
plugin2.css
script.js
jquery.
plugin2.js
jquery.js style.css
jquery.
plugin.js
Sprites
Slide 13
Slide 13 text
(●_●)
Testes
Styleguide
Minificação
Dependências
jquery.
plugin2.css
script.js
jquery.
plugin2.js
jquery.js style.css
jquery.
plugin.js
Sprites
Slide 14
Slide 14 text
(●_●)
Testes
Styleguide
Minificação
Dependências
Transpilação
jquery.
plugin2.css
script.js
jquery.
plugin2.js
jquery.js style.css
jquery.
plugin.js
Sprites
Slide 15
Slide 15 text
(●_●)
Testes
Styleguide
Minificação
Dependências
Transpilação
Precompilação
jquery.
plugin2.css
script.js
jquery.
plugin2.js
jquery.js style.css
jquery.
plugin.js
Sprites
Slide 16
Slide 16 text
(●_●)
Testes
Styleguide
Minificação
Dependências
Transpilação
Precompilação
Lint
jquery.
plugin2.css
script.js
jquery.
plugin2.js
jquery.js style.css
jquery.
plugin.js
Sprites
Slide 17
Slide 17 text
(●□●)
Testes
Styleguide
Minificação
Dependências
Sprites
Transpilação
Precompilação
Lint
Modularização
jquery.
plugin2.css
script.js
jquery.
plugin2.js
jquery.js style.css
jquery.
plugin.js
Slide 18
Slide 18 text
(^ᴗ^)
Escrever código → Juntar arquivos → Ser feliz
Slide 19
Slide 19 text
(」゜ロ゜)」
Escrever
código
→
Copiar dependência
para a pasta
→
Copiar código
todo pro
minificador
Tentar
executar
→ Falhar
miseravelmente
→ Testar na
mão
Corrigir o código
→
Esquecer de
adicionar
dependência
→
→
Atualizar
dependência
→
Resolver conflito
De dependência
→
→
Entrar em
desespero
→
Ir vender arte
na praia
→
→
Slide 20
Slide 20 text
A solução:
Slide 21
Slide 21 text
A solução:
Automatização
Slide 22
Slide 22 text
Vantagens
• Redução de erro humano
• Maior produtividade
• Criação de um fluxo de desenvolvimento
• Aplicações mais confiáveis
Slide 23
Slide 23 text
Como?
Slide 24
Slide 24 text
Como?
Tooling
(/*0*)/ \(*0*\)
Slide 25
Slide 25 text
Tooling
• Gerenciadores de dependência
• Transpilers, preprocessors e bundlers
• Scaffolders e generators
• Task runners e builders
• Test runners, linters, minifiers, etc.
Slide 26
Slide 26 text
Gerenciadores
de
dependência
Slide 27
Slide 27 text
Gerenciadores de dependência
• Dependências explícitas
• Fácil versionamento (teoricamente (^-^;) )
• Dependências não precisam fazer parte do
codebase
Slide 28
Slide 28 text
Exemplo: npm + package.json
{
"name": "front-end-tooling",
"version": "1.0.0",
"description": “Front-end tooling",
"main": "index.js",
"dependencies": {
"jquery": "^2.1.4",
"lodash.template": "^3.6.2"
},
"devDependencies": {
"browserify": "^11.0.0"
}
}
Slide 29
Slide 29 text
Exemplo: npm + package.json
+ npm install
{
"name": "front-end-tooling",
"version": "1.0.0",
"description": “Front-end tooling",
"main": "index.js",
"dependencies": {
"jquery": "^2.1.4",
"lodash.template": "^3.6.2"
},
"devDependencies": {
"browserify": "^11.0.0"
}
}
Slide 30
Slide 30 text
Exemplo: npm + package.json
+ npm install
=
~(*0*)~
{
"name": "front-end-tooling",
"version": "1.0.0",
"description": “Front-end tooling",
"main": "index.js",
"dependencies": {
"jquery": "^2.1.4",
"lodash.template": "^3.6.2"
},
"devDependencies": {
"browserify": "^11.0.0"
}
}
Slide 31
Slide 31 text
Transpilers,
preprocessors
e bundlers
Slide 32
Slide 32 text
Transpilers, preprocessors e bundlers
• Código mais organizado
• Maior programmer experience
• Maior manutenibilidade
Slide 33
Slide 33 text
Exemplo: Browserify
• Permite módulos no padrão CommonJS executáveis no
browser
• Utiliza pacotes do npm como dependências
• Remove a necessidade de várias tags script
• npm install –g browserify
app.js React
+
Immutable
+
Slide 34
Slide 34 text
Exemplo: Browserify
app.js React
+
Immutable
+ + browserify app.js
• Permite módulos no padrão CommonJS executáveis no
browser
• Utiliza pacotes do npm como dependências
• Remove a necessidade de várias tags script
• npm install –g browserify
Slide 35
Slide 35 text
Exemplo: Browserify
app.js React
+
Immutable
+ + browserify app.js =
bundle.js
(*0*)
• Permite módulos no padrão CommonJS executáveis no
browser
• Utiliza pacotes do npm como dependências
• Remove a necessidade de várias tags script
• npm install –g browserify
Slide 36
Slide 36 text
Exemplo: SASS
• Possibilita escrita de CSS com uso de variáveis
• Aninhamento de seletores
• Funções e mixins
• Permite usar pacotes do npm como dependências
• npm install –g node-sass
style.scss Foundation
+
React-Modal
+
Slide 37
Slide 37 text
Exemplo: SASS
style.scss Foundation
+
React-Modal
+
node-sass
+ style.scss
style.css
• Possibilita escrita de CSS com uso de variáveis
• Aninhamento de seletores
• Funções e mixins
• Permite usar pacotes do npm como dependências
• npm install –g node-sass
Slide 38
Slide 38 text
Exemplo: SASS
style.scss Foundation
+
React-Modal
+
node-sass
+ style.scss
style.css
=
style.css
(*0*)
• Possibilita escrita de CSS com uso de variáveis
• Aninhamento de seletores
• Funções e mixins
• Permite usar pacotes do npm como dependências
• npm install –g node-sass
Slide 39
Slide 39 text
Exemplo: Babel
• Compila JavaScript ES6 para JavaScript ES5
• Adiciona somente funcionalidades que possuem polyfill
• npm install –g babel
Slide 40
Slide 40 text
Exemplo: Babel
class User {
construtor(name) {
this.name = name;
}
}
Slide 41
Slide 41 text
Exemplo: Babel
+ babel script.js
class User {
construtor(name) {
this.name = name;
}
}
Slide 42
Slide 42 text
Exemplo: Babel
var User = (function () {
function User() {
_classCallCheck(this, User);
}
_createClass(User, [{
key: "construtor",
value: function construtor(name) {
this.name = name;
}
}]);
return User;
})();
= ~(*0*)~
+ babel script.js
class User {
construtor(name) {
this.name = name;
}
}
Slide 43
Slide 43 text
Scaffolders
e
Generators
Slide 44
Slide 44 text
Scaffolders e generators
• Gera código inicial
• Gera arquivos baseados em padrões
(controllers, models...)
• Prepara o ambiente
• Evita criação de boilerplate na mão
Slide 45
Slide 45 text
Exemplo: yeoman + generator-flux
$ npm install –g yo
$ npm install –g generator-flux
Slide 46
Slide 46 text
Exemplo: yeoman + generator-flux
$ npm install –g yo
$ npm install –g generator-flux
+ yo flux
= ~(*0*)~
Slide 47
Slide 47 text
Exemplo: yeoman + generator-flux
$ npm install –g yo
$ npm install –g generator-flux
+ yo flux:component MyComponent
= ~(*0*)~
Slide 48
Slide 48 text
Task runners
e
builders
Slide 49
Slide 49 text
Task runners e builders
• Organizar tarefas rotineiras
• Integrar outras ferramentas
• Automatizar tarefas
• Gerar código final
Slide 50
Slide 50 text
Exemplo: Gulp + gulpfile.js
var gulp = require('gulp');
var sass = require('gulp-sass');
var path = require('path');
var cssGlob = 'src/css/**/*.scss';
gulp.task('css', function () {
return gulp.src(cssGlob)
.pipe(sass({
includePaths: [path.resolve('./node_modules')]
}).on('error', sass.logError))
.pipe(gulp.dest('build/css'));
});
gulp.task('watch', ['css'], function () {
gulp.watch(cssGlob, ['css']);
});
Slide 51
Slide 51 text
Exemplo: Gulp + gulpfile.js
+ gulp watch
var gulp = require('gulp');
var sass = require('gulp-sass');
var path = require('path');
var cssGlob = 'src/css/**/*.scss';
gulp.task('css', function () {
return gulp.src(cssGlob)
.pipe(sass({
includePaths: [path.resolve('./node_modules')]
}).on('error', sass.logError))
.pipe(gulp.dest('build/css'));
});
gulp.task('watch', ['css'], function () {
gulp.watch(cssGlob, ['css']);
});
Slide 52
Slide 52 text
Exemplo: Gulp + gulpfile.js
+ gulp watch
=
~(*0*)~
var gulp = require('gulp');
var sass = require('gulp-sass');
var path = require('path');
var cssGlob = 'src/css/**/*.scss';
gulp.task('css', function () {
return gulp.src(cssGlob)
.pipe(sass({
includePaths: [path.resolve('./node_modules')]
}).on('error', sass.logError))
.pipe(gulp.dest('build/css'));
});
gulp.task('watch', ['css'], function () {
gulp.watch(cssGlob, ['css']);
});
Slide 53
Slide 53 text
Entre outros
• Test runners
• Linters
• Minifiers
• Sprite generators
Slide 54
Slide 54 text
Integrando
à sua stack
Slide 55
Slide 55 text
Integrando à sua stack
• Ferramentas providas pela stack
• Ferramentas que deixam o desenvolvedor
mais confortável/ágil
• Independente de qual seja, automatizar de
alguma forma
Slide 56
Slide 56 text
Ruby on Rails
Slide 57
Slide 57 text
RoR - Dependências
Gemfile + Bower = Rails assets
source 'https://rails-assets.org' do
gem 'rails-assets-react'
gem 'rails-assets-immutable'
end
Slide 58
Slide 58 text
RoR – Transpilers, preprocessors e packers
• Geralmente plugins para o Sprockets
• Transpilers: sprockets-es6, coffee-rails, etc.
• Preprocessors: sassc-rails, autoprefixer-rails,
etc.
• Packers: browserify-rails (sem rails-assets)
Slide 59
Slide 59 text
RoR – Scaffolders, generators e task runners
• Gems geralmente já vem com seus próprios
scaffolders e tasks do Rake
• Exemplo: react-rails:
rails g react:component Message content:string
Slide 60
Slide 60 text
Node.js
Slide 61
Slide 61 text
Node.js - Dependências
• npm (geralmente JS, no padrão CommonJS)
• Bower (todo tipo de asset, porém estático)
Slide 62
Slide 62 text
Node.js – Transpilers, preprocessors e packers
• Favorecer ferramentas em JavaScript ou compiladas*
• Transpilers: babel, coffee-script, typescript
• Preprocessors: node-sass*, less, stylus
• Packers: browserify, webpack
Slide 63
Slide 63 text
Node.js – Scaffolders e generators
• Yeoman/yo
• Slush
Slide 64
Slide 64 text
Node.js – Task runners e builders
• Gulp
• Grunt*
• Broccoli
• Brunch
• Fly
Slide 65
Slide 65 text
Laravel
Slide 66
Slide 66 text
Laravel - Dependências
composer.json + npm + bower = composer-extra-assets
{
"require": {
"koala-framework/composer-extra-assets": "~1.1"
},
"extra": {
"require-npm": {
"react": "0.13.3"
},
"require-bower": {
"bootstrap": "4.0.0"
}
}
}
Slide 67
Slide 67 text
Laravel – Transpilers, preprocessors, packers e task runners
• Laravel + Gulp = Elixir
elixir(function(mix) {
mix.sass('app.scss')
.browserify('App.js');
});
• Larasset (semelhante ao do Rails)
Slide 68
Slide 68 text
Cordova
Slide 69
Slide 69 text
Cordova – Dependências, transpilers, preprocessors e packers
• Igual ao Node.js
• Próprio Cordova está no npm
• Plugins do Cordova estão no npm
Slide 70
Slide 70 text
Cordova – Task runner e builder
• Cordova hooks
• Exemplos: after_build, before_compile, etc.
• Permite escrever hooks em qualquer linguagem,
inclusive JavaScript
• Hooks em JavaScript já aceitam o padrão CommonJS
• Liberdade para escrever próprias tasks
Slide 71
Slide 71 text
A chave é:
Slide 72
Slide 72 text
A chave é:
Automatize
Slide 73
Slide 73 text
Perguntas?
Talysson/@talyssonoc
Front-end/Codeminer42
Slide 74
Slide 74 text
Obrigado!