O caminho para desenvolver para a Web

Desde a criação da World Wide Web por Tim Berners Lee, temos cada vez mais informações disponíveis na internet. Saber criar, divulgar e exibir conteúdo é uma etapa importante para o sucesso de muitas empresas. Com essa necessidade surgiu o desenvolvedor web, também conhecido como desenvolvedor front-end.

True Web Developer

Você que está interessado em entrar nesse mundo tem um longo caminho de estudos pela frente. Nesse post irei listar algumas habilidades que considero importantes para um desenvolvedor web.

Os pilares da web

Existem diversas tecnologias para criar aplicações e páginas para a web. Acredito que todo desenvolvedor front-end deve possuir um bom entendimento nas seguintes tecnologias.

HTML e CSS

A primeira parte para se estudar no desenvolvimento front-end são a dupla HTML e CSS. Consideradas a base do desenvolvimento web, essas duas linguagens foram criadas nos primórdios da internet e são utilizadas até hoje para a criação de sites e aplicações web.

Vale ressaltar que CSS pode parecer simples, mas isso não o torna fácil. É provável que, em algum momento, você irá quebrar a cabeça tentando alinhar algum conteúdo em seu site. Então, para evitar dores de cabeça no futuro, entenda como são aplicadas as regras dos seus estilos e como os navegadores entendem essa linguagem.

overflow: auto;

JavaScript

Sendo HTML uma linguagem de marcação e CSS uma linguagem para formatação e estilo, vamos precisar de uma linguagem de programação para adicionar lógica à nossa página web.

O JavaScript (ou JS para os mais íntimos) é uma linguagem de programação utilizada como parte dos navegadores web para que ações e informações possam ser executadas no computador do usuário. O JS possibilita a criação de websites mais complexos e com maior interatividade com o usuário da sua página web.

Essa é uma das linguagens de programação mais utilizadas no mundo e possivelmente você será avaliado por seu conhecimento nessa linguagem ao se candidatar para uma oportunidade de trabalho.

jQuery

Algo interessante sobre JS que você precisa saber é que ele possui inúmeras bibliotecas que auxiliam a construir tarefas de forma mais simples. A mais famosa delas é o jQuery.

O jQuery permite que tarefas comuns (que requerem múltiplas linhas de código em JS) sejam comprimidas em um único comando, que pode ser executado em apenas uma linha. Em seu caminho como desenvolvedor web você irá cruzar inúmeras vezes com essa biblioteca e seu apelido no código: $.

Testes

Para melhorar a qualidade de seu código, uma prática essencial para todo desenvolvedor de software é a implementação de testes automatizados.
Existem diferentes níveis de teste: unitário, aceitação, integração, etc. Estude sobre cada um deles e descubra o que utilizar na sua aplicação.

Uma das técnicas mais famosas para o desenvolvimento de software e que irá te auxiliar nesse processo é o TDD (Test Driven Development), vale a leitura do post publicado pelo Hélio para entender melhor essa técnica.

Testar é grande parte do processo de desenvolvimento, e frameworks como Jasmine e Mocha podem te ajudar a simplificar e agilizar a implementação dessa etapa.

Encontrando erros (debugging)

Acredite, mesmo com todo o processo de testes e qualidade de código, erros irão acontecer. Para lhe ajudar a encontrar e corrigir esses problemas, existem algumas ferramentas que podem facilitar esse doloroso processo.

Você e as ferramentas de debug para os browsers serão amigos por muito tempo. Estude essas ferramentas (Chrome devTools, Firefox Developer Tools) e descubra o que elas possuem para te ajudar nessas horas difíceis.

Erros são inevitáveis e cabe a você desenvolvedor identificá-los. Então, esteja preparado.

Indo além

Após consolidar seus conhecimentos nos pilares da web existe um universo de tecnologias que podem auxiliar você na missão de criar uma aplicação para a web.

Frameworks

Após o início do desenvolvimento web até os dias de hoje vários desenvolvedores de software passaram por diversos problemas na criação de aplicações web, e por isso, diversas soluções foram desenvolvidas. Então você em seu caminho como desenvolvedor, provavelmente, irá passar pelos mesmos problemas.

E é aí onde entram os Frameworks, que são um conjunto de arquivos que possuem códigos para a solução de problemas comuns entre desenvolvedores durante a criação de aplicações.

Mas primeiro é importante entender seu problema e escolher de maneira sábia, já que frameworks são opinativos e podem engessar o fluxo da sua aplicação ou página web, impedindo que elas cresçam ou, seja difícil incluir novas funcionalidades.

Web Frameworks

No universo do desenvolvimento web existem diversos frameworks que proporcionam soluções para os mais diversos problemas na construção de páginas web ou para o gerenciamento de conteúdo. Nesse post, vamos focar no mundo JavaScript e CSS.

Um dos mais famosos modelos de arquitetura de software é o modelo MVC, cujo objetivo é separar o projeto em três camadas independentes que ajudam na redução de acoplamento, promovem o aumento de coesão das classes do projeto e facilitam a manutenção do código. Em JavaScript, existem diversos frameworks que implementam essa arquitetura, exemplos: Angular, Ember, Vue.

Possivelmente você irá esbarrar com diversos frameworks ao longo de sua carreira, mas, a dica para você que está começando é: Caso esteja procurando vagas de emprego tente escolher o framework mais popular do momento. Porém, para desenvolver um projeto dentro de uma empresa evite o hype train e escolha com sabedoria qual framework ou arquitetura utilizar.

http://knowyourmeme.com/memes/hype-train
The hype train is never empty

Caso você não tenha nenhum designer em sua equipe e tenha dificuldades em combinar cores, os frameworks CSS fornecem um guia de estilo para sua aplicação, facilitando a criação de componentes e páginas web. Exemplos: Bootstrap, Foundation, Polymer.  

Design responsivo

Atualmente existem inúmeros tipos de dispositivos que podem acessar seu site e cabe a você desenvolvedor preparar sua aplicação para se adaptar à maioria deles.

Estudar sobre design responsivo irá ajudar você a construir sites que funcionam em diferentes tamanhos de tela e dispositivos. Frameworks CSS podem facilitar essa tarefa, mas não deixe de entender como de fato essa tecnologia funciona.

Ferramentas de compilação/automatização

Como citado acima, existem diversas bibliotecas e frameworks que podem ser utilizados por você em um projeto. Uma das técnicas para facilitar o processo de deploy é a automatização de tarefas como minificação de código, gerenciamento de pacotes e testes.

Ferramentas como Webpack, Grunt e Gulp irão facilitar essa etapa e podem diminuir significativamente o processo de geração de código para produção.

Concluindo

O mundo do desenvolvimento web é cheio de novas tecnologias e muda constantemente,  foque em solidificar seu conhecimento em HTML, CSS e JavaScript. Dessa forma, aprender novas tecnologias será muito mais fácil.

Mas não pare por aí, existe um universo de tecnologias utilizadas para o desenvolvimento em geral, um excelente guia que irá ajudar você a escolher o que estudar está compilado nesse mapa mental criado pelo Learn Code Academy.

Bons estudos! =)

Desenvolvedor de telas coloridas a.k.a front-end.
Gosta de descobrir e entender novas tecnologias.
Desconfia que vivemos em uma realidade virtual criada pelos reptilianos.