Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Gerenciando Assets com Symfony Encore

Gerenciando Assets com Symfony Encore

Os assets são elementos fundamentais de uma aplicação web. Nesta palestra mostrarei como utilizar o Symfony Encore para o gerenciamento de assets de sua aplicação de forma simples e sem as complexidades do Webpack. Nesta palestra veremos como lidar com CSS, JavaScript, Sass e outros pré-processadores, invalidação de cache entre outras coisas.

Avatar for Marcel dos Santos

Marcel dos Santos

May 16, 2019
Tweet

More Decks by Marcel dos Santos

Other Decks in Programming

Transcript

  1. Interaja nas mídias sociais!
 
 - fale sobre o evento,

    palestrantes e conteúdo - tire fotos do evento e publique
 - interaja com outros participantes do evento - tire dúvidas ou dê feedbacks para os palestrantes
  2. 1. seguir @marcelgsantos no Twitter
 2. tuitar utilizando as hashtags

    #Symfony_Live, #Encore e #PHP
 3. não vale tuíte em branco e retuíte
 4. ler e preencher este simples formulário
 bit.ly/sorteio-sflive-2019 Concorra a um livro da Casa do Código!
  3. JavaScript - module bundling - transpiling - geração de sourcemaps

    - tree-shaking ou dead code elimination - minificação
 - cache busting
  4. CSS - pré-processamento (Sass, Less ou Stylus) - geração de

    sourcemaps - pós-processamento (vendor-prefixes) - ajustar o caminho de imagens e fontes - minificação - cache busting
  5. imagens e fontes - otimização de imagens (redução da
 qualidade

    e remoção de metadados) - codificação em base64 - cache busting
  6. gerais - copiar e remover arquivos - notificar processo de

    compilação - atualizar o navegador (após salvar)
  7. Parte 1 - código JavaScript em um “arquivão” - variáveis

    globais por todo lado - inclusão manual de bibliotecas - preocupação com a ordem de inclusão - vários pontos de entrada na aplicação - pouca preocupação com versionamento
 - minificação manual ou inexistente
  8. Parte 2 - organização em módulos (revealing 
 module pattern)

    - simulação de namespaces (com objetos)
 - gerenciamento de dependências
 - concatenação de módulos
 - melhor organização de códigos
  9. Problemas - concatenação de módulos de 
 forma manual e

    propensa a erros
 - gerenciamento de dependências imaturo
  10. Parte 3 - organização em módulos (CommonJS e AMD) -

    gerenciamento de dependências ganhando
 maturidade (NPM)
 - resolução de dependências automatizada 
 (Browserify e Require.js)
 - automação de tarefas com Gulp
  11. Problemas - especificação de módulos oficial ainda
 pouco utilizada
 -

    muitas bibliotecas sem suporte 
 (necessidade de utilização de Shims)
  12. Parte 4 - organização em módulos (ES2015) - gerenciamento de

    dependências maduro 
 e robusto (NPM e Yarn)
 - resolução de dependências automatizada
 (Webpack)
 - automação de tarefas com NPM Scripts
  13. loader: "babel-loader", options: { presets: ['env'] } } }, "//html-loader

    { test: /\.html$/, use: ['html-loader'] } ] }, plugins: [ new CleanWebpackPlugin(['dist']), "//html-webpack-plugin instantiation new HtmlWebpackPlugin({ template: 'index.html' }) ], devServer: { contentBase: path.resolve("__dirname, "./dist/assets/media"), compress: true, port: 12000, stats: 'errors-only', open: true }, devtool: 'inline-source-map' } module.exports = config;
  14. o Webpack é um module bundler, ou seja, uma ferramenta

    que empacota o seu código JavaScript e CSS
  15. o Node.js é o V8 (engine JavaScript do Chrome) +

    biblioteca padrão + event loop
  16. ele envolve o Webpack e fornece uma API simples e

    poderosa para o gerenciamento de assets
  17. ele é inspirado pelo Webpacker e Mix, porém preserva o

    espírito do Webpack usando suas funcionalidades, conceitos e convenções
  18. as dependências são instaladas em um diretório node_modules e as

    dependências são registradas no package.json
  19. { "devDependencies": { "@symfony/webpack-encore": "^0.27.0", "core-js": "^3.0.0", "webpack-notifier": "^1.6.0" },

    "license": "UNLICENSED", "private": true, "scripts": { "dev-server": "encore dev-server", "dev": "encore dev", "watch": "encore dev "--watch", "build": "encore production "--progress" } }
  20. "// enables Sass/SCSS support "//.enableSassLoader() "// uncomment if you use

    TypeScript "//.enableTypeScriptLoader() "// uncomment to get integrity="""..." attributes on your script & link t "// requires WebpackEncoreBundle 1.4 or higher "//.enableIntegrityHashes() "// uncomment if you're having problems with a jQuery plugin "//.autoProvidejQuery() "// uncomment if you use API Platform Admin (composer req api-admin) "//.enableReactPreset() "//.addEntry('admin', './assets/js/admin.js') ; module.exports = Encore.getWebpackConfig();
  21. o JavaScript evoluiu e projetos passaram a ser organizados em

    módulos ao invés de apenas um arquivo
  22. import $ from 'jquery'; import Utils from './helpers/utils'; class Subscription

    { constructor(container) { let $container = $(container); this.$form = $container.find('#subscription-form'); } init() { this.$form.find('#cep').on('blur', this.findAddress.bind(this)); this.$form.find('#query').on('click',this.findAddress.bind(this)); } "// findAddress implementation""... } export default Subscription;
  23. os módulos instalados via NPM são referenciado pelo nome e

    módulos da aplicação são iniciados com ./
  24. { "devDependencies": { "@symfony/webpack-encore": "^0.27.0", "core-js": "^3.0.0", "webpack-notifier": "^1.6.0" },

    "license": "UNLICENSED", "private": true, "scripts": { "dev-server": "encore dev-server", "dev": "encore dev", "watch": "encore dev "--watch", "build": "encore production "--progress" } }
  25. para fazer parte do bundle de vendors deve satisfazer algumas

    condições como estar em node_modules e ser maior que 30kB
  26. para facilitar a inclusão de tags script e style no

    HTML, o Encore fornece funções helpers
  27. <!doctype html> <html lang="pt-br"> <head> <title> {% block title %}Welcome

    to SymfonyLive Brasil '19{% endblock %} "</title> <meta charset="utf-8"> {% block stylesheets %} {{ encore_entry_link_tags('app') }} {% endblock %} "</head> <body> """<!-- implementation ""-->
 {% block javascripts %} {{ encore_entry_script_tags('app') }} {% endblock %} "</body> "</html>
  28. o Webpack possui um modo watch que permite ouvir alterações

    no sistema de arquivos e iniciar a execução
  29. a utilização de pré-processadores CSS como Sass, Less ou Stylus

    é importante para projeto front-end moderno
  30. "// Sass utilities @import "helpers/variables"; @import "helpers/functions"; @import "helpers/mixins"; @import

    "helpers/placeholders"; "// Vendors and external stylesheets @import "vendors/slider"; @import "vendors/tipsy"; "// Base stuff @import "base/reset"; @import "base/typography"; "// Layout related stylesheets @import "layout/site/header"; @import "layout/site/footer"; @import "layout/site/navigation"; @import "layout/site/content"; @import "layout/site/forms";
  31. .cart { @extend %clearfix; &-list { display: flex; flex-wrap: wrap;

    justify-content: center; } &-item { list-style-type: none; margin: 0 10px 15px; max-width: 90px;
 }
 }
  32. nem todos os módulos são instalados por padrão, isso torna

    o projeto mais enxuto e dependências são instaladas se necessárias
  33. as bibliotecas modernas podem ser retornadas de forma global e

    adicionada no objeto window ou retornada como objeto e atribuída a uma variável local
  34. porém existem inúmeras bibliotecas que ainda não utilizam a abordagem

    mais moderna e esperam um objeto global como $ ou jQuery
  35. os plugins de jQuery como o Bootstrap modificam o objeto

    jQuery e adiciona funcionalidades a ele
  36. o Encore possui a funcionalidade de cópia de arquivos, ideal

    para copiar imagens de assets para public
  37. var Encore = require('@symfony/webpack-encore'); Encore .setOutputPath('public/build') .setPublicPath('/build')
 .splitEntryChunks() .copyFiles({ from:

    './assets/images', to: 'images/[path][name].[hash:8].[ext]' }) .addEntry('app', './assets/js/app.js'); module.exports = Encore.getWebpackConfig();
  38. o Encore faz a verificação e ajusta os caminhos de

    imagens e fontes em CSS para o caminho do diretório de saída
  39. 1. utilize um workflow moderno de desenvolvimento front-end com módulos

    e processo de build 2. deixe tarefas repetitivas para ferramentas como o Webpack 3. utilize o Webpack Encore para facilitar a configuração do Webpack