What Is the Asset Pipeline

BY admin
|

Objectives

  1. Understand the 4 main features of the asset pipeline.
  2. Identify the Asset Paths
  3. Know how Asset Manifests provide concatenation of CSS and JS.
  4. Use linguagens de pré-processamento como SAS ou CoffeeScript
  5. defina as impressões digitais dos ativos

delinear

por um longo tempo, nós tratámos JavaScript e CSS como uma reflexão posterior no desenvolvimento de aplicações web. Todos os nossos códigos de ativos – coisas como imagens, stylesheets e JavaScripts — foram mantidos em uma pasta massiva chamada public e servidos fora do contexto de nossa aplicação de trilhos. À medida que a web evoluía, isso já não fazia sentido.

the asset pipeline is the Rails answer to managing stylesheets, JavaScripts, and images.

Patrimoios

muitos arquivos vão para a criação de aplicações web. Os arquivos css e JavaScript podem ser difíceis de organizar. Que pastas criamos? Que Ficheiros vão para onde? O oleoduto de ativos fornece uma resposta para este problema. Temos que manter as coisas muito organizadas em nossa aplicação, mas, mantendo arquivos separados e pastas para cada conceito ou unidade de código, temos dois problemas.

  1. Como É que os carris sabem onde as coisas estão? O ficheiro JS do calendário está em app/assets/javascripts/calendar.js ou vendor/javascripts/calendar.js?
  2. não queremos servir cada ficheiro separadamente, uma vez que isto fará com que a nossa carga de página seja muito lenta. Faz sentido para nós manter arquivos pequenos separados para legibilidade e organização, mas, para o navegador, nós preferimos esmagar todos esses arquivos pequenos juntos e Carregar Arquivo 1 JS e Arquivo 1 CSS. Este processo é chamado de concatenação.

vamos falar sobre o nosso primeiro problema: como é que os carris sabem onde procurar? O oleoduto de ativos tem um conceito chamado caminhos de ativos para lidar com isso. Assim como em BASH, onde temos uma variável de ambiente de caminho que é uma combinação de caminhos de pasta, o caminho de recurso é uma combinação de caminhos de pasta para trilhos para procurar ativos em. Vamos dar uma olhada em um exemplo de como nosso caminho de ativos está configurado.

Rails.application.config.assets.paths =>

se pusermos um activo em qualquer destas pastas, podemos aceder a elas através do URL ‘/assets’ na nossa aplicação. Se você tiver pastas adicionais para trilhos para procurar, você pode adicionar as pastas para o caminho do ativo. Isto é feito no arquivo config/initializers/assets.rb.

Rails.application.config.assets.paths << "New Path"

podemos colocar ativos em qualquer lugar, configurar o nosso caminho de ativos, e acessá-los através de um único URL ‘/assets’.

Manifests and Concatenation

Now that we can put files anywhere, how do we get them to be included in our web pages? O oleoduto de ativos usa um arquivo manifesto para dizer a Rails o que carregar. Este ficheiro manifesto é um local central onde podemos listar todos os ficheiros CSS e JS de que a nossa aplicação necessita. Esta não é uma característica de JS ou CSS, mas sim o oleoduto de ativos. Aqui está um exemplo de como o nosso ficheiro Manifesto JS se parece:

File: app/assets/javascripts/application.js

//= require jquery//= require calendar

Quando incluir o ficheiro manifesto na sua disposição com o javascript_include_tag, o oleoduto dos activos irá procurar por todos os ficheiros listados na localização dos activos. Repare como precisamos de calendário. Este arquivo vive em app/assets/javascripts/calendar.js, no entanto, só especificamos o nome e não o caminho completo. O Pipeline de ativos irá procurar em todos os caminhos configurados por um arquivo com o nome que fornecemos.Agora que resolvemos a questão da descoberta, vamos falar de concatenação. Como discutimos anteriormente, não queremos carregar os nossos ficheiros no navegador um a um. É melhor realizar um download do que um monte de pequenos downloads do nosso navegador. Os arquivos manifesto que configuramos em trilhos irá automaticamente concatenar os arquivos listados neles em um arquivo em produção. Esta pode não ser a melhor opção quando estamos desenvolvendo nossa aplicação, uma vez que pode tornar a depuração difícil. No entanto, os carris realmente servirão cada arquivo separadamente quando estivermos rodando no modo de desenvolvimento. Não precisas de fazer nada.Finalmente, as diretivas sprocket que o poder que nosso ativo manifesta serão cobertas em detalhes mais tarde.

pré-processamento

ser capaz de combinar arquivos e carregá-los a partir de um conjunto de locais predefinidos em nossa aplicação é um grande benefício do Pipeline de ativos. É só o começo. Como estamos carregando recursos através de trilhos, podemos pré-processar os arquivos usando linguagens populares como SCSS para escrever melhor CSS e Coffeescript para JS mais limpos. Se fizeres um recurso chamado Tema.Forum.scss, você está dizendo ao oleoduto de ativos para executar o arquivo através do pré-processador SCSS antes de servir o tema.css para o navegador. O pré-processador SCSS compila o ficheiro em CSS. A única coisa que tínhamos de fazer era fornecer a extensão de arquivo correta, .scss, para o arquivo e o pipeline de ativos sabe executá-lo através do pré-processador SCSS.

impressões digitais

o último benefício de que falaremos é de Impressões Digitais, mas primeiro vamos falar sobre o problema que nos ajuda a resolver. Quando servimos arquivos para o navegador, é provável que eles sejam cache para evitar baixá-los novamente no futuro. O que é caching você pode perguntar?

Cache algo significa manter uma cópia de uma operação demorada localmente para que você não tenha que refazer a operação cara novamente se as entradas e Saídas forem exatamente as mesmas. Caches são geralmente lojas de valor-chave, onde o valor é a resposta para a operação cara e a chave é algo que é único para esse item. Se você solicitar uma página do servidor e, em seguida, solicitar a mesma página do servidor novamente, a maneira mais rápida de obter esse pedido cumprido é realmente manter uma cópia do que você recebeu da última vez localmente. Browsers cache muitas das respostas que recebem aos pedidos que fizeram usando os cabeçalhos que são enviados com a resposta. Os cabeçalhos dizem ao navegador Quanto tempo a página permanece ‘fresca’ antes de expirar.’Uma vez expirada a página, o navegador fará um novo pedido para que a página refresque seu cache. Dizemos que o pedido mais rápido é o pedido que não foi feito. Também é frequentemente dito que a invalidação de cache é um dos dois problemas difíceis na ciência da computação, então pense cuidadosamente quando você começa a cachar coisas! Cache economiza largura de banda para nós e fornece um impulso de velocidade para o usuário. Isso é ótimo até que você mude o arquivo e você quer que todos os seus usuários para obter o novo em vez da versão antiga que eles armazenaram em seu cache de navegador. Mas como é que deixamos o navegador saber que modificámos o ficheiro? Se a nova versão tiver o mesmo nome da versão antiga, o navegador continuará usando o arquivo antigo de seu cache. Precisamos de uma maneira de mudar o nome do arquivo quando o conteúdo mudar para que os navegadores não continuem servindo o arquivo antigo.

from the Rails Guides Primer

“Fingerprinting is a technique that makes the name of a filename dependent on the contents of the file. Quando o conteúdo do arquivo muda, o nome do arquivo também é alterado. Para o conteúdo que é estático ou pouco frequentemente alterado, isso fornece uma maneira fácil de dizer se duas versões de um arquivo são idênticas, mesmo em servidores diferentes ou datas de implantação.

quando um nome de ficheiro é único e baseado no seu conteúdo, os cabeçalhos HTTP podem ser configurados para encorajar caches em todo o lado (seja em CDNs, em ISPs, em equipamento de rede ou em navegadores web) a manter a sua própria cópia do conteúdo. Quando o conteúdo é atualizado, a impressão digital vai mudar. Isso fará com que os clientes remotos solicitem uma nova cópia do conteúdo. Isto é conhecido como cache busting.

the technique sprockets uses for fingerprinting is to append a hash of the content to the end of the file name. Por exemplo, tome um arquivo CSS chamado global.css. Os Sprockets irão adicionar o hash 908e25f4bf641868d8683022a5b62f54 ao fim do nome do ficheiro assim:

global-908e25f4bf641868d8683022a5b62f54.css

se por acaso estiver a utilizar uma versão mais antiga dos carris (Rails 2.x), a estratégia costumava ser adicionar uma string de consulta baseada em data a cada ativo ligado com um helper incorporado. Parece que sim.:

global.css?1309495796

a estratégia de cadeia de consultas tem várias desvantagens:

  • nem todos os caches Irão confiavelmente cache conteúdo onde o nome do arquivo só difere pelos parâmetros da consulta.
    • Steve Souders recomenda ” evitar uma querystring para recursos cacheáveis.”5-20% dos seus pedidos não serão atendidos. Strings de pesquisa em particular não funcionam em tudo com alguns CDNs para invalidação de cache.
  • o nome do arquivo pode mudar entre nós em ambientes multi-servidores.
    • the default query string in Rails 2.x é baseado no tempo de modificação dos arquivos. Quando os ativos são implantados em um cluster, não há garantia de que as datas serão as mesmas, resultando em valores diferentes sendo usados dependendo de qual servidor lida com a solicitação.
  • demasiada invalidação de cache.
    • quando os ativos estáticos são implantados com cada nova versão do código, o mtime (tempo da última modificação) de todos esses arquivos muda, forçando todos os clientes remotos a buscá-los novamente, mesmo que o conteúdo desses ativos não tenha mudado.

a recolha de Impressões Digitais corrige todos estes problemas, garantindo que os nomes dos ficheiros são consistentes com base no seu conteúdo.

a impressão digital é ativada por padrão para a produção e desativada para todos os outros ambientes. Você pode ativá-lo ou desativá-lo em sua configuração através da opção config.assets.digest.”

Conclusion

the Asset Pipeline is definitely more complex then just serving assets from a public folder and it can be hard to debug. Aprender a usá-lo vai valer a pena a longo prazo, poupando-nos tempo e dores de cabeça. Pensa em todos os problemas que resolve para nós.

  1. Caminhos de recursos
  2. Manifestos e Concatenação
  3. pré-Processamento
  4. Fingerprinting

Finalmente, definitivamente verificar para fora o keynote onde DHH introduz o asset pipeline.