[RubyConf Brazil 2015] Front-end tooling - Porque e como?

Transcript

1. Front-end tooling Porque e como?
2. Talysson @talyssonoc Front-end/Codeminer42
3. Agenda • O problema • A solução • Como agregar à sua stack
4. Mas que problema? (☉_☉)
5. (^ᴗ^) <link rel="stylesheet" href="style.css"> <script src="jquery.js"></script> <script> $(function() { $('#dont-try-ids-at-home').show(); }); </script>
6. (^ᴗ^) jquery.js script.js style.css
7. (^_^) jquery.js script.js style.css jquery. plugin.js
8. (-_-) jquery. plugin2.css script.js jquery. plugin2.js jquery.js style.css jquery. plugin.js
9. (◕_◕) Minificação jquery. plugin2.css script.js jquery. plugin2.js jquery.js style.css jquery. plugin.js
10. (◔_◔) Styleguide Minificação jquery. plugin2.css script.js jquery. plugin2.js jquery.js style.css jquery. plugin.js
11. (◑_◑) Testes Styleguide Minificação jquery. plugin2.css script.js jquery. plugin2.js jquery.js style.css jquery. plugin.js
12. (•_•) Testes Styleguide Minificação jquery. plugin2.css script.js jquery. plugin2.js jquery.js style.css jquery. plugin.js Sprites
13. (•_•) Testes Styleguide Minificação Dependências jquery. plugin2.css script.js jquery. plugin2.js jquery.js style.css jquery. plugin.js Sprites
14. (•_•) Testes Styleguide Minificação Dependências Transpilação jquery. plugin2.css script.js jquery. plugin2.js jquery.js style.css jquery. plugin.js Sprites
15. (•_•) 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
16. (•_•) 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
17. (•□•) 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
18. (^ᴗ^) Escrever código → Juntar arquivos → Ser feliz
19. (」゜ロ゜)」 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 → →
20. A solução:
21. A solução: Automatização
22. Vantagens • Redução de erro humano • Maior produtividade • Criação de um fluxo de desenvolvimento • Aplicações mais confiáveis
23. Como?
24. Como? Tooling (/*0*)/ \(*0*\)
25. Tooling • Gerenciadores de dependência • Transpilers, preprocessors e bundlers • Scaffolders e generators • Task runners e builders • Test runners, linters, minifiers, etc.
26. Gerenciadores de dependência
27. Gerenciadores de dependência • Dependências explícitas • Fácil versionamento (teoricamente (^-^;) ) • Dependências não precisam fazer parte do codebase
28. 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" } }
29. 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" } }
30. 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" } }
31. Transpilers, preprocessors e bundlers
32. Transpilers, preprocessors e bundlers • Código mais organizado • Maior programmer experience • Maior manutenibilidade
33. 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 +
34. 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
35. 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
36. 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 +
37. 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
38. 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
39. Exemplo: Babel • Compila JavaScript ES6 para JavaScript ES5 • Adiciona somente funcionalidades que possuem polyfill • npm install –g babel
40. Exemplo: Babel class User { construtor(name) { this.name = name; } }
41. Exemplo: Babel + babel script.js class User { construtor(name) { this.name = name; } }
42. 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; } }
43. Scaffolders e Generators
44. 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
45. Exemplo: yeoman + generator-flux $ npm install –g yo $ npm install –g generator-flux
46. Exemplo: yeoman + generator-flux $ npm install –g yo $ npm install –g generator-flux + yo flux = ~(*0*)~
47. Exemplo: yeoman + generator-flux $ npm install –g yo $ npm install –g generator-flux + yo flux:component MyComponent = ~(*0*)~
48. Task runners e builders
49. Task runners e builders • Organizar tarefas rotineiras • Integrar outras ferramentas • Automatizar tarefas • Gerar código final
50. 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']); });
51. 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']); });
52. 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']); });
53. Entre outros • Test runners • Linters • Minifiers • Sprite generators
54. Integrando à sua stack
55. Integrando à sua stack • Ferramentas providas pela stack • Ferramentas que deixam o desenvolvedor mais confortável/ágil • Independente de qual seja, automatizar de alguma forma
56. Ruby on Rails
57. RoR - Dependências Gemfile + Bower = Rails assets source 'https://rails-assets.org' do gem 'rails-assets-react' gem 'rails-assets-immutable' end
58. 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)
59. 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
60. Node.js
61. Node.js - Dependências • npm (geralmente JS, no padrão CommonJS) • Bower (todo tipo de asset, porém estático)
62. 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
63. Node.js – Scaffolders e generators • Yeoman/yo • Slush
64. Node.js – Task runners e builders • Gulp • Grunt* • Broccoli • Brunch • Fly
65. Laravel
66. 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" } } }
67. 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)
68. Cordova
69. Cordova – Dependências, transpilers, preprocessors e packers • Igual ao Node.js • Próprio Cordova está no npm • Plugins do Cordova estão no npm
70. 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
71. A chave é:
72. A chave é: Automatize
73. Perguntas? Talysson/@talyssonoc Front-end/Codeminer42
74. Obrigado!