Conhecendo o fluxo de trabalho front-end

Antes de qualquer coisa, cada um/equipe sabe o que é melhor para o workflow do seu projeto. Cada projeto tem suas necessidades e o ideal que seja feito um planejamento para o mesmo. O que interessa é a organização, automação das tarefas, gerenciamento de dependências e padrão único da equipe.

Para iniciar o fluxo de trabalho, temos que criar um controle de versão. Afinal, não podemos perder o que fizermos no projeto.

A partir desse momento vem o processo de desenvolvimento de código, com uma arquitetura sólida e preferencialmente com TDD ou BDD.

O importante é a criação de padrões e documentação. Para que o projeto fique de fácil compreensão na hora da manutenção. Os testes unitários, automatização de tarefas e ferramentas que auxiliam na depuração são de grande valia para assegurar que o seu código seja estável.

Como não queria que o artigo ficasse muito extenso, nos próximos artigos vou falar mais detalhadamente sobre cada etapa e ferramenta. Por enquanto, listei por categorias o que uso no fluxo de trabalho como front-ender, com pequenos comentários.


Linguagem

As linguagens que nós front-enders mais usamos, são:


Diversos e Produtividade

Como editor utilizei por um bom tempo o Sublime e o Bracket, no momento utilizando o Atom. Ter um bom editor que auxilia com seus plugins, facilita e agiliza muito o processo de desenvolvimento.

Para gerenciar as tarefas:

Poderia colocar tudo no mesmo lugar, mas tenho a preferência de versionar os arquivos gráficos como os layouts em PSD no Dropbox, documentos e livros no Google Drive.


Softwares

Gosto de usar o Rails Installer, pois em uma só tacada ele já instala o Ruby, Rails, Git bash e etc..

Para criar, visualizar e editar os layouts web.


Referências

Ótimas referências para consultar a compatibilidade crossbrowser e novos recursos.


Ferramentas Online

Para fazer testes rápidos com bibliotecas JavaScript, HTML e CSS

Nem sempre conseguimos ter todos os ícones que precisamos em um lugar só, o Icomoon ajuda nisso e com ícones que você mesmo criou.

Para testar a performance do site:

Avaliar a performance do seu código JavaScript.

Depois de estruturar seu código HTML com o Schema, aqui você pode ver como o Google vê.


Plataforma

Além de ser um pré-requisito para utilizar muitas ferramentas que estão listadas nesse artigo, o Node consegue levar o front-ender para o lado do servidor. Não vou falar muito porque isso merece um artigo à parte. ^^


Geradores & Gerenciadores

Para conectar a criação de estrutura, automatização e gerenciamento de tarefas, temos:

Gerenciador de Pacotes do Node

Gerenciador de dependências

Para gerar páginas estáticas. Uso para este blog. :)


Automatização de tarefas

Sempre utilizei o Grunt, mas já testando o Gulp. ^^


Pré-processador de CSS

Sou grande adepto do SCSS, e utilizo bastante o Compass.


Versionamento

Para versionar os meus projetos utilizo o Git, dividindo entre o Github e o Bitbucket


Depuração & teste

Muito útil para garantir a qualidade e padrão do código.

Teste unitário para o seu código JavaScript, é indispensável.

Para visualização rápida em várias resoluções


Por questão de memória RAM, largando o Chrome como meu navegador principal para voltar para o Firefox.


Complementos do navegador


Bibliotecas & Frameworks

O mais famoso e mais utilizado com certeza é o JQuery. Também utilizo no momento, mas já tive um bom contato com o Dojo e foi um preríodo de um bom conhecimento.

Avaliando os prós e contras desses 2 frameworks que tem muito a acrescentar.


Sintaxe & metodologias

Com uma junção de padrões e metodologias, você cria um boa estrutura para o seu projeto.


Documentação

Para a documentação do código SCSS e JS. Para as demais documentações, utilizo o Jekyll.


Inspiração & Blogs

É sempre bom ter uma inspiração e segue algumas.

Por enquanto é isso. :)

Ao fechar este aviso ou continuar navegando no site Nerd Calistênico, você aceita o uso de cookies.

Este site usa cookies para assegurar a melhor experiência para os nossos usuários. Consulte nossa política de privacidade.

Uma nova versão está disponível. Clique aqui para atualizar.