Let's make assets management great again

A Asset Pipeline do Rails parece um tanto defasada frente às novas tecnologias de front-end e o Webpack pode servir como uma ótima alternativa para lidar com os assets estáticos das nossas aplicações Rails. Nesta talk, veremos como podemos integrar o Webpack com Rails e tornar nosso ambiente de desenvolvimento front-end mais modularizado e atualizado com as mais modernas tecnologias.

Transcript

1. LET’S MAKE ASSETS MANAGEMENT GREAT AGAIN Bernardo Gurgel Filho
2. Bernardo Gurgel Filho Fullstack Dev na Codeminer 42 github.com/brnrdog twitter.com/brnrdog
3. RAILS 3.1 (AGOSTO, 2011)
4. Rails 3.1 Mudanças introduzidas • HTTP Streaming • jQuery por padrão • Migrations reversíveis • Asset Pipeline
5. Rails 3.1 Asset Pipeline • Concatenação • Compressão • Pré-processamento • SASS • CoffeeScript • ERB
6. Rails 3.1 Asset Pipeline
8. RAILS 5.0 (JUNHO, 2016)
9. Rails 5.0 Mudanças Introduzidas • Action Cable • API Mode • Turbolinks 5 • Sprockets 3 • …
10. Sprockets 3: O que mudou na asset pipeline?
11. Rails 5.0 Asset Pipeline • Concatenação • Compressão • Pré-processamento • SASS • CoffeeScript • ERB
12. Rails Asset Pipeline: Nada mudou em 5 anos ):
13. Ok. Mas será que realmente precisa mudar?
14. Front-end Frameworks • Angular (2011) • Ember (2011) • React (2013) • Vue.js (2014) • …
15. Front-end Ferramentas • Browserify (2012) • Grunt (2013) • Broccoli (2013) • PostCSS (2013) • Babel (2014) • Gulp (2014) • Webpack (2014) • Rollup (2015)
16. A maneira como desenvolvemos aplicações web está mudando.
17. websites webapps
18. Asset Pipeline Downsides • Ausência de um gerenciador de pacotes • Baixa modularização • Difícil organização dos arquivos de manifestos • Pipelines restritas
19. JS JS JS JS JS CSS CSS CSS CSS CSS CSS JPG PNG PNG SVG JPG JPG JPG Asset Pipeline
20. Alternativas à Asset Pipeline?
22. Webpack Principais Características • Todo asset estático pode ser um módulo • Code splitting • Alta customização • Integração com npm • Adequado para grandes projetos
23. Webpack Sistemas de Módulos Suportados
24. Webpack JS JS JS JS CSS CSS CSS CSS CSS PNG JPG JPG JPG WOF
25. $ npm install -g webpack $ webpack <entry> <output>
26. Webpack webpack.config.js module.exports = { entry: …, output: …, resolve: …, module: { loaders: … }, plugins: … }
27. webpack.config.js entry option
28. webpack.config.js output option
29. webpack.config.js resolve option
30. webpack.config.js configurando loaders
31. webpack.config.js alguns loaders • babel-loader • sass-loader • coffee-loader • typescript-loader • handlerbars-loader • image-loader
32. http://webpack.github.io/docs/list-of-loaders.html
33. webpack.config.js configurando plugins var UglifyJsPlugin = require(‘webpack’).optimize.UglifyJsPlugin; var DashboardPlugin = require(‘webpack- dashboard/plugin'); module.exports = { plugins: [ new UglifyJsPlugin(), new DashboardPlugin() ] };
34. Integrando webpack com Rails
36. webpack-rails Características • webpack.config.js • foreman • rails helpers • estrutura de diretórios
37. webpack + rails não há necessidade de gems
38. Rails e Webpack o que precisaremos • NPM Depedências • webpack.config.js • Rails Helper
39. Rails e Webpack Nossa Pipeline • Pré-processar arquivos • SASS • ES2015 (Babel) • React • Gerar SourceMaps • Comprimir e Minificar • Gerar fingerprints
40. Rails e Webpack estrutura de diretório app-rails |- … |-- public | |- assets | +- … +- webpack |- images |- scripts |- styles |- scripts.js +- styles.scss
41. Rails e Webpack Preparando o ambiente $npm init -y $npm install -D webpack
42. Rails e Webpack Preparando o ambiente
43. Rails e Webpack entry e output
44. Rails e Webpack configurando Babel $npm install -D babel-loader babel-core babel-preset-es2015 babel-preset-react
45. Rails e Webpack configurando Babel
46. Rails e Webpack configurando SASS $npm install -D sass-loader node-sass
47. Rails e Webpack configurando SASS
48. Rails e Webpack Instalando React $npm i -S react react-dom
49. Rails e Webpack Criando um componente
50. Rails e Webpack Instalando Bootstrap $npm i -S bootstrap@next
51. Rails e Webpack Incluindo o Bootstrap
52. Rails e Webpack gerando fingerprints
53. Rails e Webpack rails helpers • Incluir os assets compilados em nossos layouts • Checar se o webpack está rodando em desenvolvimento
56. Rails e Webpack Instalando o plugin Assets Webpack $npm install -D assets-webpack-plugin
57. Rails e Webpack Adicionando o plugin Assets Webpack
60. Rails e Webpack Incluindo nossos assets compilados <%= webpack_bundle_tag 'styles' %> <%= webpack_bundle_tag 'scripts' %>
61. Rails e Webpack Incluindo nossos assets compilados <%= webpack_bundle_tag 'styles' %> <%= webpack_bundle_tag 'scripts' %>
62. $rails server $npm run watch
66. https://github.com/brnrdog/webpack-on-rails
67. Obrigado!
68. Perguntas?
69. become@codeminer42.com