É comum no meio da tecnologia vermos atualizações e mudanças nas formas de se desenvolver software, pois a inovação tecnológica revela aos desenvolvedores a possibilidade de melhorar ainda mais as ferramentas que utilizamos.

Para entendermos melhor o contexto da criação do Propshaft, precisamos primeiro compreender as limitações dos pipelines de assets mais antigos, como o utilizado anteriormente no Rails, o Sprockets.

Existem quatro pontos essenciais que o Sprockets visava tratar como um pipeline de assets. Vamos ver agora quais são eles e o que mudou, servindo de motivação para a criação do Propshaft.

Sprockets

Transpiling: É o processo de transformação do código escrito para uma forma que o navegador possa compreender diretamente. Um exemplo simples é a introdução de variáveis no CSS. Como os navegadores não compreendem nativamente variáveis, utilizavam-se preprocessadores como o Sass para isso. Durante o processo de transpilação, um código Sass, por exemplo, é convertido para CSS e ajustado de modo que o navegador possa renderizar esses estilos corretamente. O mesmo princípio se aplica ao JavaScript, onde ferramentas como o CoffeeScript eram utilizadas para facilitar o desenvolvimento até que os navegadores suportassem as versões mais recentes nativamente.

Bundling: É o processo de agrupamento dos assets em arquivos únicos. Por exemplo, todo o CSS importado no arquivo application.css é unificado em um único arquivo durante o processo de “empacotamento”. Isso era necessário porque o HTTP/1.1 tinha limitações quanto ao número de requisições simultâneas, o que prejudicava a performance. Embora o HTTP/2 tenha melhorado essa situação permitindo múltiplas requisições em uma única conexão, o bundling ainda é usado para otimização e organização de assets.

Fingerprinting: É uma técnica para evitar o redownload desnecessário de assets já presentes no cache do navegador. Um hash único, conhecido como “fingerprint”, é adicionado ao nome do arquivo de asset. Se o conteúdo do asset não mudar, o navegador pode usar a versão em cache, melhorando a eficiência.

Compression: Nesta fase, os assets são comprimidos para reduzir seu tamanho, melhorando o tempo de carregamento da página. Isso inclui a minificação (remoção de espaços em branco e comentários) e a compressão gzip.

Propshaft e o que mudou?

Para entender o que motivou o Propshaft e como ele funciona, é importante considerar as atualizações tecnológicas ao longo do tempo e entender a proposta do Propshaft como um pipeline de assets, oferecendo melhorias em relação ao Sprockets.

Com avanços tecnológicos, como o suporte nativo a funcionalidades modernas em JavaScript (como ES6) e CSS (como propriedades avançadas), a necessidade de transpilação e preprocessamento diminuiu. No entanto, o Propshaft ainda oferece configurações básicas para essas tarefas.

Além disso, a adoção do HTTP/2 pelos navegadores permitiu múltiplas requisições em uma única conexão, reduzindo a dependência do bundling para otimização de desempenho. No entanto, o bundling continua sendo relevante em cenários específicos.

O Propshaft mantém o conceito de fingerprinting como uma técnica essencial para gerenciar o cache de assets de forma eficiente. Além disso, ele suporta o uso de importmaps para integração com bundlers, oferecendo flexibilidade e melhorando a gestão de dependências.

Conclusão

O Propshaft foi desenvolvido para oferecer um pipeline de assets mais leve e adequado às necessidades atuais de desenvolvimento, abandonando processos extensos que se tornaram menos necessários. Com sua abordagem simplificada e foco em eficiência, o Propshaft representa uma evolução em relação às práticas anteriores, como o Sprockets, adaptando-se às tecnologias modernas e melhorando o desempenho geral das aplicações web.

Gostou do artigo? Veja mais sobre o propshaft em seu repositório