O que é um fluxo de trabalho ressonável para projetar webapps?

Já faz um tempo desde que eu desenvolvi substancialmente a web e gostaria de aproveitar as práticas mais recentes, mas estou lutando para visualizar o fluxo de trabalho para incorporar tudo.

Aqui está o que eu estou procurando usar:

Framework CakePHP
jsmin (JavaScript Minify)
SASS (folhas de estilo incrivelmente impressionantes)
Git

CakePHP:

Muito auto-explicativo, faça modificações e atualize a fonte.

jsmin:

Ao modificar um script, você executa manualmente o jsmin para gerar o novo código minificado ou seria melhor executar um gancho de pré-confirmação que gera automaticamente saídas jsmin dos arquivos javascript que foram alterados. Suponha que eu não tenha conhecimento de implementar ganchos de confirmação.

SASS:

Eu realmente gosto do que o SASS tem a oferecer, mas também sei que o código SASS não é suportado pelos navegadores por padrão; portanto, em algum momento, o código SASS precisa ser transformado em CSS normal. Em que ponto do fluxo de trabalho isso é feito.

Git

Estou com medo de admitir, mas, na última vez que desenvolvi substancialmente a Web, não usei o controle de origem do SCM (IE, usei o controle de origem, mas consistia em um log de alterações muito detalhado com backups).

Desde então, tenho muita experiência em usar o Git (além de mercurial e SVN) para o desenvolvimento de desktops, mas estou me perguntando como implementá-lo da melhor maneira para o desenvolvimento da web).

É prática comum implementar um repositório remoto no host da Web para que eu possa enviar as alterações diretamente para o servidor de produção ou existe alguma ferramenta de plataforma cruzada (windows / linux) que facilita o upload de apenas arquivos alterados para o servidor de produção . Existem empresas de hospedagem na Web que facilitam a implementação de um repositório remoto, preciso de acesso SSH, etc ...

Eu sei como fazer isso no meu próprio servidor de teste com um repositório remoto com uma ramificação de rastreamento remoto separada, mas nunca o fiz em um servidor de hospedagem de produção remota antes, então ainda não estou ciente das opções.

Extra:

Eu estava pensando em implementar uma estrutura javascript em que arquivos javascript separados usados em uma página são compilados em um único arquivo para cada página no servidor de produção para limitar o número de downloads de arquivos necessários por página.

Algo assim já existe? Já existe um projeto de código aberto que implementa algo semelhante com o qual eu poderia usar e contribuir?

Considerando como os desenvolvedores da Web paranóicos são sobre desempenho (e o fato de o número de solicitações de arquivos em um site ser um grande sucesso para o desempenho), estou supondo que haja algum hacker assistente na rede que já tenha abordado esse problema.

web-development workflows

— Evan Plaice
fonte

Respostas:

Você pode conferir a extensão PageSpeed do Google para Apache : existe uma opção para agregar e reduzir Javascript e CSS automaticamente e combinados com o cache, isso seria adequado ao que você menciona no final da postagem.

— picos selvagens
fonte

Legal, eu não percebi que tudo isso poderia ser feito com um módulo Apache. Minificação Javascript / css, concatenação javascript / css, além de várias outras melhorias de desempenho opcionais. Depois de pesquisar no Google, descobri que o Dreamhost fornece hospedagem compartilhada / VPN. Estou surpreso que não haja mais informações sobre isso em webmasters.stackexchange.com ou stackoverflow.com.

— Evan Plaice

jsmin

Se você não tiver uma tonelada de JS, poderá configurar algo para reduzir a cada vez que clicar em salvar. Se você possui muitas JS, faça parte do seu processo de implantação (veja Git abaixo).

SASS

Use o Compass Framework . Ele inclui o SASS, além de um pequeno script que "observa" o diretório do SASS e compila os arquivos em CSS (incluindo CSS minificado, se você desejar) toda vez que você salvar. Ele foi criado com o RoR em mente, mas você pode usá-lo facilmente com qualquer estrutura da Web criando um arquivo de configuração do Compass e executando o comando "compass watch". O Compass também inclui muitas outras ferramentas úteis, como Blueprint , mixins úteis e geração automática de sprites por meio do plug-in Lemonade (que deve ser incorporado ao Compass na próxima versão ).

Git

Dependendo do tamanho / complexidade do site, considere seguir as instruções do Capistranomodelo de implantação. Não tenho certeza se você pode usar o Capistrano diretamente com o CakePHP, mas o essencial é este: cada servidor de produção possui uma pasta "atual" que contém todo o código que está sendo executado na produção naquele momento. Cada vez que você deseja implantar um novo código, você executa um script que é ssh para cada servidor de produção e solicita que (a) copie o conteúdo da pasta "atual" para uma pasta de backup (com o nome da versão / carimbo de data / hora), ( b) verifique o código mais recente do Git na pasta "atual" e (c) comece a veicular esse novo código na pasta "atual". Dessa forma, você pode reverter para qualquer release anterior, se necessário, e saber exatamente qual revisão está em produção. O Capistrano também permite adicionar todos os tipos de tarefas personalizadas como parte do processo de implantação, incluindo minifração JS / CSS,

Extra

Sim, há um monte. Google para algo como "CSS / JS concat". Aqui está uma rápida que eu encontrei para CakePHP: Asset Packer .

— Yevgeniy Brikman
fonte

Muito obrigado pela contribuição. Eu realmente gosto do que vi com o Compass Framework. Eu só queria saber de uma maneira de implementá-lo em PHP. Eu pesquisei por aí, mas não consigo encontrar uma alternativa. O Capistrano também parece muito interessante, mas, em vez do modelo caro e frágil de cópia de arquivo, eu usaria o ssh para dizer ao cliente git em todos os servidores remotos para fazer um rápido 'git pull --rebase' depois de verificar se funcionou em um teste servidor primeiro.

— Evan Plaice

(cont) O empacotador de ativos também parece muito interessante. A única razão pela qual escolhi a outra resposta sobre a sua foi que ela continha tudo de uma só vez, com o processamento sendo feito no próprio servidor (portanto, nenhum script extra é necessário). A única desvantagem que vejo para PageSpeed é o processamento adicional de conteúdo estático (que é facilmente tratadas usando o cache de conteúdo estático e / ou CDN Eu realmente gostaria de poder aceitar 2 porque a sua resposta tem um monte de informações valiosas..

— Evan Solha

Você não "implanta" a estrutura do Compass com PHP. Você apenas o executa enquanto codifica, ele compila seus arquivos CSS toda vez que você clica em salvar, e os arquivos CSS são o que realmente é implantado. Para "executar" a bússola, você precisa primeiro gerar seu arquivo de configuração (compass.rb) - use-o para gerar as opções da linha de comando: jsfiddle.net/chriseppstein/PG46q/3 . Depois de configurar o arquivo de configuração com todos os seus caminhos, basta executar "compass watch" na mesma pasta que o arquivo de configuração, e o compass começará a recompilar seu SASS toda vez que você clicar em salvar. Experimente em algum projeto paralelo: é MUITO fácil e rápido.

— Yevgeniy Brikman 6/02/11

Além disso, até onde eu sei, Capistrano não copia muito. Cada vez que você implanta, ele verifica o código mais recente e apenas troca os nomes das pastas. A vantagem é que você sempre pode reverter para uma versão anterior apenas trocando os nomes das pastas novamente.

— Yevgeniy Brikman 6/02/11

Encontrei um artigo sobre como colocá-lo em funcionamento no PHP. É mais fácil usar fora de um projeto Ruby do que eu esperava. Arranhe meu último comentário sobre Capistrano. Eu pensei que era usado para enviar um comando distribuído para vários servidores. Se eu tiver acesso ssh aos servidores remotos, prefiro largar um cliente git como forma de extrair as alterações mais recentes do ramo de produção. IMHO, a troca de pastas é uma má idéia. Eu preferiria marcar as revisões no ciclo de lançamento e fazer check-out de uma tag anterior, se a atual tiver problemas.

— Evan Plaice