Desenvolvedor(a) Front-End: O guia de estudos completo

Publicado por Atlas Technologies em

O guia de estudos para Desenvolvedor(a) Front-End tem o objetivo de apresentar um caminho cheio de informações necessárias para todos(as) que possuem o interesse em ingressar na Atlas como Desenvolvedor(a) Front-end. Dessa forma, o guia é separado em uma lista de tópicos para auxiliar no desenvolvimento de diversas habilidades, com uma sequência de artigos e documentações das tecnologias apresentadas e utilizadas no Front-end da Atlas.

Dos requisitos obrigatórios, podem ser destacados os conhecimento de: conhecimentos em algumas linguagens, frameworks, bibliotecas ou bundler como Vue, Vuex, PHP Laravel (Blade, Routes, Templates), Axios, Webpack, SSR ou SSG, CSS / SASS / SCSS, Git, conhecimento em Figma e uma boa comunicação entre os colegas desenvolvedores.

Dos requisitos diferenciais, destacamos a experiência de desenvolvimento utilizando biblioteca TailwindCSS e conhecimento em Docker.

O que será abordado neste guia:

  • Estudos de Tecnologias
  • Padrões de estrutura e código
  • Testes e performance
  • Comunicação
  • Ferramentas

Estudos de Tecnologias:

Durante o período de avaliação para Desenvolvedor(a) Front-end são solicitados conhecimentos em algumas linguagens, frameworks, bibliotecas ou bundler.

Sendo eles:

  • Vue
  • Vuex
  • PHP
  • Laravel (Blade, Routes, Templates)
  • Axios
  • Webpack
  • SSR ou SSG
  • CSS / SASS / SCSS

Padrões de estrutura e código:

A Atlas, a fim de facilitar o desenvolvimento coletivo da aplicação, escolheu alguns padrões para serem seguidos na criação de códigos e estrutura de pastas. Assim facilitando que qualquer desenvolvedor que for fazer manutenção em um código já existente consiga de forma ágil entender aquele código e sua estrutura e realizar a correção ou implementação de novos recursos.

Para isso usamos:

  • Nomenclatura BEM, ou BEM CSS;
  • Ícones dentro de arquivos blade;
  • Ícones dentro de componentes Vuejs;
  • Nested Selector;
  • Nomenclatura camelCase;
  • Utilizar early return;
  • Vue: Bind de Classes CSS;
  • Nomenclatura dos componentes Vue deve ser no padrão kebab-case;
  • Nomenclatura dos arquivos .vue deve ser no formato Pascal Case;
  • Nomenclatura dos Slots devem ser no padrão kebab-case;
  • Ordem das Options do componente Vue Deve ser do VueJS;
  • Template Engine Blade Laravel;

Testes e performance:

Um Desenvolvedor(a) Front-end sempre terá que ser tudo dentro de uma empresa, o designer, o QA (Quality Assurance), o PM (Product Manager) ou PO (Product Owner). Porque é dever do programador verificar se o design entregue a ele é um design que é possível ser aplicado na programação e se não irá quebrar em demais dispositivos. Precisa também agir como um QA, analisando seu código, vendo se o mesmo funciona antes de finalizar, afinal de contas é um entregável seu. E por algumas vezes podemos pegar algumas regras de negócio que poderiam ser melhor, ou estão diferentes das tarefas anteriores, e cabe aos programadores avisar que encontrou esses problemas.

Sendo assim é esperado que sejam realizados os seguintes testes na plataforma:

Pixel Perfect:

Trazer para a interface visual, utilizando programação, exatamente como está na plataforma de prototipação de Interfaces. Aqui na Atlas, utilizamos o figma. Por exemplo: Se na plataforma está 20px para a margem esquerda do botão, na sua programação deve estar 20px, de acordo com a plataforma de Prototipação; Obs: Para que esse processo seja o mais fidedigno possível, não é recomendado utilização de medidas variáveis;

Mobile First:

O desenvolvimento esperado na Atlas sempre será a partir da menor tela para a maior, ou, do Mobile para o Desktop. Sendo assim todo o desenvolvimento de CSS é realizado a partir de 360px, e então, utilizamos os breakpoints para cada dispositivo.

Manutenibilidade:

É responsabilidade do desenvolvedor garantir que seu código esteja em perfeitas condições de ser mantido pela equipe de desenvolvimento, isto é, todo seu código tem que ser o mais fácil possível de se entender e tentar minimizar a quantidade de ramificações que seu código pode fazer. Separá-los em componentes pode ajudar o próximo desenvolvedor a entender que tudo referente a aquele bloco do sistema se encontra naqueles arquivos.

Comunicação:

Aprenda como se expressar bem e ser compreendido. Pratique e escreva MUITO! Desenvolvedores trabalham demais com comunicação, síncrona e assíncrona, e auxílio.

Faça muito uso de boas práticas de comunicação e da ética no trabalho! Existem cursos interessantes sobre CNV (Comunicação Não Violenta), que ajudam bastante a compreender sobre comunicação.

Ajudar outro desenvolvedor de forma neutra, sem criticar a pessoa ou seu desenvolvimento, descrevendo com clareza e objetividade como pode melhorar o seu código, com base em documentações de auxílio.

Poderia dizer que a comunicação é grande parte do trabalho, e base de conhecimento para um desenvolvedor. É de extrema importância sabermos nos comunicar, tanto de forma síncrona ou assíncrona!

Ferramentas:

Durante todo o tempo que estiver executando serviços de desenvolvimento você precisará usar algumas ferramentas no seu dia a dia, seja para melhorar as suas entregas, ou para ajudar a equipe de PMs a entender sobre as tarefas e sobre o seu tempo gasto com as atividades.

Docker:

Docker é um projeto que torna a criação e gerenciamento de containers Linux muito mais fácil. Ele ajuda administradores a implementar e executar qualquer aplicativo em qualquer infraestrutura de forma rápida e confiável.

Aprenda mais sobre docker e como utilizá-lo.

Git e Github:

Git e Github: Estratégias de ramificação, Conflitos e Pull Requests O git tem vários comandos que são utilizados no nosso dia-a-dia, alguns exemplos são:

  • git fetch
  • git pull
  • git commit
  • git push
  • git checkout
  • git reset

Aprenda mais sobre comandos Git, e o uso do Github, que é uma plataforma para controlar e compartilhar o seu código.

Figma:

Figma é um editor gráfico de vetor e prototipagem de projetos de design baseado principalmente no navegador web, com ferramentas offline adicionais para aplicações desktop. Nesse editor estarão disponíveis todas as interfaces dos projetos que a Atlas precisará que seja desenvolvido. A partir do figma podemos pegar imagens, folhas de estilos(css) e também cotas de alinhamento dos objetos. Assim garantindo o Pixel Perfect. Referências e estudos: Segue alguns links para te ajudar a entender mais sobre tudo que foi falado neste guia.

BEM CSS:

VUE:

VUEX:

Webpack:

Template Engine Blade:


Gostou do nosso guia de estudos para Desenvolvedor(a) Front-End? Se você sente confiança e tem domínio da maior parte das tecnologias e práticas vem se juntar ao time Atlas, vagas abertas em nosso site.

Confira outros guias para Desenvolvedor Back-End e Quality Assurance.


2 comentários

William · 16/08/2022 às 10:29

Material muito bom para nortear trilha de estudos!

    Atlas Technologies · 23/08/2022 às 10:36

    Ficamos felizes que tenha gostado, bons estudos, William!

Deixe um comentário

Avatar placeholder

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *