Saudações a todos! Meu nome é Anastasia Puchnina, sou uma desenvolvedora líder na DomClick, estou envolvida no front-end de vitrine de anúncios. Hoje eu gostaria de compartilhar com vocês minha opinião sobre o que é importante para um desenvolvedor front-end saber. Este artigo será útil para aqueles que estão apenas iniciando seu caminho no desenvolvimento ou têm experiência em programação em outra área e decidiram mudar para o front-end.
Conteúdo:
- Quem é um frontend e o que ele faz?
- Por onde começar e o que ler? Lista de verificação de treinamento
- Que dificuldades pode haver? Erros no início do caminho
- Preparando-se para uma Entrevista com Desenvolvedor Júnior
Quem é um frontend e o que ele faz?
Digamos que você queira alugar um apartamento: você tem um computador com acesso à Internet, sabe o endereço de outro computador mais potente que armazena uma grande quantidade de anúncios. Se você imagina que os sites usuais não existem e não pode, por exemplo, ver anúncios no mapa, filtrar os desnecessários preenchendo um formulário conveniente, você terá que redigir você mesmo uma solicitação de rede e descobrir como e para onde enviar os dados.
Felizmente, os engenheiros criaram navegadores e as tecnologias da web estão se desenvolvendo e você só precisa usar a interface conveniente fornecida por desenvolvedores de diferentes empresas. Resta fazer alguns cliques e as informações necessárias foram encontradas.
Os desenvolvedores de front-end são programadores responsáveis por criar esse site de front-end. É a parte cliente do site com a qual o usuário interage diretamente em seu computador ou telefone (cliente).
Muitas pessoas sabem que os sites incluem a marcação e os estilos necessários para fornecer uma estrutura e um design claros para a página, mas o desenvolvimento do front-end não para por aí. A maioria dos sites que usamos constantemente são aplicativos da web completos: e-mail, banco online, cinemas online, editores de fotos, notas. Para que tais aplicativos funcionem, os desenvolvedores de front-end adicionam código que roda no navegador, implementa a funcionalidade desejada e, se necessário, interage com o servidor, recebendo de forma dinâmica as informações necessárias.
Desenvolvedor front-end:
- cria interface de usuário, adiciona marcação e estilos de páginas de site;
- programa a lógica que roda no dispositivo cliente, desenvolve a arquitetura da aplicação cliente;
- otimiza o desempenho do front-end para que o projeto carregue rapidamente, os buscadores levantem o site no SERP, e os usuários não sintam atrasos na navegação e interação com a interface;
- testa a funcionalidade desenvolvida e grava testes automatizados para garantir alta qualidade e evitar erros ao alterar o código;
- configura a construção do projeto, o que permite automatizar o processamento adicional de código e arquivos antes de iniciar o aplicativo;
- executa a implantação do aplicativo: carrega-o no servidor para que o aplicativo esteja disponível na rede e os usuários possam usá-lo;
- monitora erros emergentes usando ferramentas de monitoramento e os elimina a tempo :)
Em equipes diferentes, os desenvolvedores front-end podem resolver tarefas completamente diferentes, por exemplo:
- Desenvolva o front-end de um aplicativo da Web de negócios (o que os usuários finais veem quando usam vários serviços online).
- Desenvolva uma biblioteca de componentes de interface: blocos individuais que outros desenvolvedores usam em seus projetos (por exemplo, botões, janelas pop-up, campos de formulário ou elementos para gráficos). Podem ser bibliotecas de código aberto que são conectadas por desenvolvedores em todo o mundo ou uma biblioteca de componentes internos de uma empresa com um design específico.
- . , , - -, . !
? -
Independentemente da área em que você deseja trabalhar e quais soluções criar, existe uma certa base que, na minha opinião, qualquer desenvolvedor de front-end deve conhecer.
No início da jornada, alguns se intimidam com a lista de tecnologias, nomes e abreviaturas no frontend. Existem muitos deles. Mas mesmo um desenvolvedor experiente não sabe, e não deve saber absolutamente todas as tecnologias e bibliotecas que existem (há rumores de que a cada segundo uma nova biblioteca é lançada no mundo do frontend :)
Três baleias de desenvolvimento para navegadores são HTML, CSS e JavaScript, com que vale a pena começar.
Se você não tem experiência em desenvolvimento e acha difícil aprender por conta própria, seria uma boa solução fazer um curso de desenvolvedor front-end com um mentor em uma das escolas de programação conhecidas. Também há bons cursos sobre layout e desenvolvimento de front-end no Udemy e no Coursera. No entanto, isso não é necessário, existem muitos materiais e fontes gratuitas na Internet sobre os tópicos necessários.
Para ajudá-lo a navegar, criei uma lista de verificação passo a passo para obter o conhecimento de que você precisa para entrevistar um desenvolvedor front-end iniciante. Também estão anexados links para materiais e fontes em russo e inglês, que podem ser úteis para você.
Salve em favoritos e use.
1. Como funciona a web
Antes de começar a desenvolver sites, você precisa entender o que acontece quando você abre um site em um navegador, como funciona o modelo cliente-servidor e qual é o protocolo HTTP.
- Como funciona a Web: uma cartilha para iniciantes no desenvolvimento da Web ou qualquer pessoa (FreeCodeCamp) ;
- Como funciona o Mozilla Web (MDN) ;
- Tudo que você precisa saber sobre HTTP .
2. Ambiente de desenvolvimento
Você pode até escrever código e marcação no bloco de notas, mas é mais conveniente usar editores especiais. Mais popular entre os desenvolvedores de front-end:
- VSCode é um editor rápido e gratuito com muitos complementos para desenvolvimento;
- JetBrains WebStorm - IDE completo, há um período de teste e a capacidade de obter acesso sob uma licença de estudante;
- Se precisar enviar um trecho de código a outra pessoa, verifique ou salve rapidamente o código online, você pode usar um editor online como o Codepen .
3. Noções básicas de HTML
Aprenda a estrutura de um documento HTML, o que são tags e o que são, meta tags, atributos, como adicionar imagens, criar formulários. A semântica e a acessibilidade são pontos importantes no layout.
- Guia HTML - Mozilla (MDN)
- Referência de HTML, tutoriais de HTML e CSS - Webref;
- FreeCodeCamp - Aprenda a codificar em casa - uma fonte muito útil para o aprendizado prático de HTML, CSS, JS, etc. (tarefas passo a passo em modo de aprendizado interativo);
- Introdução ao Chrome DevTools. Painel de elementos para visualização de elementos HTML do site ;
- Semântica ( Tags semânticas HTML5: O que são e como usá-las !, tradução para o russo );
- Acessibilidade ( escrever HTML com acessibilidade em mente , tradução para o russo ).
4. CSS
Adicionando estilos para elementos de página. Estudamos o modelo de blocos, posicionamento, estilos em cascata, especificidade do seletor, pseudo-elementos, layout adaptativo (para computadores, tablets e telefones). Aprenda a criar layouts modernos com Flexbox e Grid.
- CSS e CSS3. Propriedades para formatar elementos HTML - Html5Book;
- Cascading Style Sheets (CSS) - Mozilla (MDN);
- Referência CSS - Webref;
- Ferramentas de desenvolvedor do Chrome DevTools para visualizar estilos ;
- Layout em Flexbox em CSS. Referência completa ( traduzida e original em Truques CSS);
- 10 layouts modernos em 1 linha de CSS do Google ;
- Metodologia BEM ;
- BEM para iniciantes. Problemas de layout óbvios e não óbvios .
5. Sistema de controle de versão Git
Git pode ajudá-lo a levar seu processo de codificação para o próximo nível. Esta é uma ferramenta indispensável para desenvolvedores que permite salvar passo a passo informações sobre todas as alterações no código, retornar a um estado diferente e muito mais. É aconselhável aprender a trabalhar com Git no terminal, bem como praticar: crie um repositório no Github ou Gitlab e experimente os recursos básicos do Git em seu repositório de teste.
- Tour interativo do GIT para iniciantes - GitHowTo;
- Github é o maior serviço da web para hospedar projetos de TI e desenvolvê-los juntos.
Prática. Prática. Prática!
Nesta fase, sugiro que você pratique mais e faça seu próprio pequeno projeto para lembrar o material abordado. Não é necessário fazer você mesmo um design de site, você pode pegar um layout pronto. Crie uma página de destino ou, por exemplo, crie um site de portfólio, salve o código no Github durante o desenvolvimento e tente hospedar o site em hospedagem gratuita para sites estáticos - Páginas do Github . Se a prática não for suficiente para você, tente ver como os outros estão digitando e repita. Existem tutoriais em vídeo suficientes sobre este tópico no YouTube (por exemplo, para a consulta "layout do site usando layout figma").
Se você estudou profundamente HTML e CSS, depois de passar os parágrafos anteriores, pode se tornar um designer de layout de site. Mas para aprender a escrever aplicativos da web interativos e se tornar um desenvolvedor front-end profissional, você precisa continuar sua jornada no mundo do front-end e mergulhar na programação .
6. Linguagem de programação JavaScript
Não confunda JavaScript com Java. Aprenda o básico da linguagem: variáveis, objetos, tipos de dados, funções, contexto e encerramentos, classes. Compare as diferenças entre as especificações EcmaScript antigas e novas. Depois de entender o básico, passe para coisas mais complexas: as complexidades da programação assíncrona (callbacks, promises, async-await) e fazer solicitações ao servidor (XmlHttpRequest, Ajax, Fetch, Cookie).
- Um tutorial de JavaScript moderno é uma grande fonte com muitos exemplos;
- « JS» — ( );
- FreeCodeCamp JS;
- - JavaScript ( Facebook, Redux Create React App);
- Chrome Dev Tools. JavaScript .
7. DOM (Document Object Model)
O DOM é o Document Object Model, a árvore que o navegador constrói para renderizar sua página na tela. Depois de aprender a trabalhar com o DOM, você pode usar JavaScript para criar ou modificar elementos em uma página, responder aos cliques do usuário e muito mais. Uma parte separada de LearnJavascript é dedicada a trabalhar com o DOM e eventos no navegador .
O tópico DOM também é abordado em detalhes em Expressive JavaScript por Marein Haverbeck.
8. Node.js, NPM
Graças à plataforma de software Node.js, o JavaScript pode ser usado fora do navegador apenas. Com essa ferramenta, você pode escrever um programa de console ou um aplicativo do lado do servidor.
Tente escrever seu próprio pequeno servidor .
Você pode usar módulos escritos por outros desenvolvedores em seus programas JavaScript. Verifique o repositório online para pacotes NPM .
9. Babel
Babel Js é um compilador de código JavaScript que permite usar os recursos mais recentes da linguagem, como funções de seta, classes, encadeamento opcional, sem esperar por seu suporte total ao navegador. Você só precisa configurar o Babel corretamente para a versão necessária do EcmaScript ou a lista de navegadores suportados, o código-fonte será convertido automaticamente.
Tente usar o compilador de código online no site oficial para ver em que se transformam as construções JavaScript modernas. Configure a compilação de código para um pequeno aplicativo JavaScript incluindo o Babel como um pacote NPM.
10. Construtores de módulo, Webpack
Ao criar aplicativos, os desenvolvedores dividem o código em partes (módulos), conectam manipuladores de código adicionais e configuram aplicativos para diferentes ambientes (desenvolvimento e produção). Para tornar isso possível, e não tivemos que conectar manualmente os módulos no arquivo HTML na ordem necessária e monitorar as mudanças, os aplicativos usam coletores de módulo (bundlers).
Os construtores conectam e combinam módulos e suas dependências em um ou mais arquivos na ordem correta e também permitem transformações de código adicionais.
Webpack é um dos construtores de módulo mais populares. Este é um assistente de desenvolvedor, embora possa parecer assustador no início. Sua flexibilidade permite que você personalize a construção usando uma grande variedade de plug-ins e carregadores (pré e pós-processadores CSS e HTML, Babel, etc.), otimize recursos, carregue mudanças rapidamente durante o desenvolvimento usando a substituição de módulo a quente e muito mais.
- Webpack Screencast com LearnJavascript;
- Webpack. Curso completo 2020 (Vladilen Minin).
11. Pré-processadores CSS
O pré-processador CSS é um complemento do CSS que fornece uma nova sintaxe conveniente para o desenvolvedor, adicionando novos recursos que tornam mais fácil e rápido desenvolver e manter estilos.
Pré-processadores mais populares:
- Sass (SCSS);
- Stylus ;
- Menos .
As principais vantagens de usar pré-processadores CSS são:
- Modularidade. Você poderá criar código CSS em arquivos diferentes e importar estilos conforme necessário.
- Nesting. Aninhe os seletores um dentro do outro para uma estrutura de código compacta e lógica. Isso vai melhorar a legibilidade e reduzir a duplicação (especialmente útil se você usar a metodologia BEM para escrever CSS).
- Usando variáveis e funções CSS (mixins).
- Você pode escolher um pré-processador com uma sintaxe conveniente para você (por exemplo, código CSS sem chaves e ponto-e-vírgula).
Aconselho também nesta fase que se familiarize com a ferramenta de transformação de estilo PostCSS e, em particular, com o plugin Autoprefixer. Este plug-in permite adicionar prefixos de fornecedores automaticamente para as propriedades CSS do seu código.
12. Pré-processadores HTML (modelos)
Os pré-processadores HTML têm os mesmos benefícios que os pré-processadores CSS. Eles permitem que você escreva a marcação HTML com mais eficiência, divida o código em módulos e também use condições, loops, mixins e herança.
Mecanismos de modelo populares:
- Pug (anteriormente Jade);
- Guiador .
Personalize seu projeto adicionando carregadores à configuração do webpack para pré-processamento de código CSS e HTML.
13. Estilo de código e linters
O estilo do código é um conjunto de regras que permite que você torne seu código consistente, o mais amigável possível e legível para você e outros desenvolvedores. Essas regras descrevem onde e quais recuos e colchetes devem estar, o comprimento máximo das linhas, os nomes das variáveis, permitem que você determine um código muito confuso ou desnecessário e muitos outros aspectos.
Algumas empresas criam seu próprio estilo de código. Um conjunto de regras de front-end bem conhecido é o padrão Airbnb , com o qual você deve se familiarizar para melhorar a qualidade do seu código.
Existem ferramentas especiais que podem verificar seu código automaticamente e tornar mais fácil mantê-lo em um estilo específico, definindo a configuração do projeto uma vez:
- Mais bonita ;
- ESLint ;
- EditorConfig ;
- Husky .
Verifique a documentação das ferramentas, tente conectá-las ao seu projeto e IDE, siga um certo estilo de código em seu projeto para tornar o aplicativo melhor!
14. Aprendendo a biblioteca de framework / UI
React, Angular ou Vue? Para 2020, a principal luta é entre essas bibliotecas. Você pode escolher qualquer um deles. Se você gosta de uma empresa específica para a qual gostaria de trabalhar, pode escolher a estrutura que eles usam.
Aconselho você a começar com React - é extremamente popular entre desenvolvedores e empresas, continua a evoluir, é fácil de entender para desenvolvedores de front-end novatos, muitas outras ferramentas e uma grande comunidade foram desenvolvidas em torno dele.
Comece aprendendo React com a documentação oficial , é bem detalhada. Se você achar que é insuficiente, você pode encontrar um curso completo na Udemy (por exemplo, Modern React e Redux- em inglês, com uma explicação muito clara e detalhada para iniciantes, exercícios práticos e todo o material necessário sobre React e bibliotecas).
Preste atenção em descrever os tipos de parâmetros de entrada para componentes React ( verificação de tipo com PropTypes ), bem como escrever comentários sobre o padrão JSDoc (uma série de artigos sobre como usar JSDoc).
Conforme você avança, você precisará aprender como gerenciar o estado do aplicativo. Bibliotecas que ajudam nisso: Redux e Mobx. Eu recomendo começar com Redux - esta é a biblioteca mais popular em conjunto com React. Confira a documentação oficial ou tradução . Também recomendo um curso de um dos autores da biblioteca (Introdução ao Redux por Dan Abramov).
Em seguida, comece a explorar a biblioteca para executar convenientemente ações assíncronas (por exemplo, solicitações ao servidor). A biblioteca mais fácil para começar é Redux Thunk ( documentação ).
15. Teste automático
Teste é o processo de avaliar se todos os módulos de um aplicativo se comportam conforme o esperado. Ao testar, você pode evitar muitos erros que pode não notar. Aprenda o que é teste e quais são os tipos ( Teste para "manequins" ). Aprenda a escrever testes de unidade para o seu código usando uma das bibliotecas de teste como Jest .
16. Em profundidade
- (Ryan Seddon: So how does the browser actually render a website | JSConf EU 2015);
- — Html5Rocks;
- : event loop? | JSConf EU 2014;
- CSS- ( Glen Maddern);
- ;
- VSCode JS ( );
- HTTP REST;
- CORS;
- ( Javascript Design Patterns);
- Progressive Web Applications;
- Redux-Saga React-.
Que dificuldades pode haver? Erros no início do caminho
Estruturas de aprendizagem em vez de conhecimento básico
Às vezes, pode parecer que é melhor aprender uma estrutura ou biblioteca popular imediatamente. Este é um erro bastante comum, especialmente no front-end: as pessoas começam a aprender React ou codificação com Bootstrap e Material UI sem entender o básico e sem ter conhecimento suficiente de HTML, CSS e JavaScript. Você pode usar essa abordagem se estiver "correndo em uma curta distância" e precisar concluir um projeto rapidamente. Mas se você está planejando se tornar um desenvolvedor, isso não trará o resultado desejado.
Você não precisa saber de cor absolutamente todas as propriedades ou métodos CSS em JS. Você pode pesquisá-los se esquecer. Compreender os conceitos básicos e as complexidades é importante: essa é a sua base sólida no desenvolvimento de front-end.
Aprender é um trabalho árduo, autodisciplina e muita prática
É um erro esperar que você lide com todo o material em uma semana ou aprenda JS em um dia. O tempo de que você precisa é uma questão muito individual e, provavelmente, o processo levará mais de um mês.
Não se assuste, aprenda passo a passo e aos poucos, pratique mais - assim você pode avançar no aprendizado mais rápido. Todo mundo precisa de algum tempo para aprender coisas novas.
Decida por que e por que você deseja se tornar um desenvolvedor front-end. Frontend é uma área onde você pode implementar soluções interessantes e trabalhar em projetos que serão usados por um grande número de pessoas ao redor do mundo! Além disso, quanto mais conhecimento e experiência você ganha, maior será o seu pagamento.
Lembre-se dos momentos que te motivam, quando seu código não vai funcionar, e o próximo bloco não vai ficar do jeito que você quer :) Se você gosta de ver o resultado do seu trabalho, estude o material através de tarefas práticas ou criando seu projeto, assim você será mais rápido obter um retorno.
Copiar o código de outra pessoa
Se você encontrar problemas e erros que não consegue resolver, fique à vontade para procurar ajuda no Google. Aprenda a usar a pesquisa e encontrar a causa do problema, mas não copie cegamente o código de outra pessoa.
Certifique-se de descobrir o que está acontecendo na solução que você encontrar e por que está. Será mais longo e caro, mas se você não descobrir, é mais provável que você enfrente um problema semelhante e, novamente, não possa resolvê-lo sozinho, e seu código se transformará em macarrão com estilos diferentes devido à cópia do código de outra pessoa.
Não confie 100% no código que encontrar
Outras pessoas podem estar erradas ou também não ter experiência. Se você encontrar um vídeo tutorial de um Mestre em JavaScript ou Layout, nem sempre significa que o que está sendo apresentado é a solução perfeita e o melhor código possível.
Olhe para várias fontes e seja crítico de tudo o que encontrar. Conforme você ganha experiência, você vai entender qual código e abordagens são melhores, e o que só complica sua aplicação e adiciona muletas que você encontrará mais tarde.
Preparando-se para uma Entrevista com Desenvolvedor Júnior
Entrevistas em empresas diferentes podem ocorrer de formas completamente diferentes, gostaria de falar sobre o conhecimento necessário com base na minha experiência.
As áreas mais entrevistadas para o cargo de desenvolvedor front-end são layout, JavaScript, em particular, assincronia e conhecimento de uma das estruturas ou bibliotecas de front-end. Para a posição Júnior, mais atenção é dada ao layout e ao JavaScript.
As perguntas podem ser teóricas e práticas, para resolver pequenos problemas.
A comunidade de desenvolvedores compilou uma lista de exemplos de perguntas para entrevistas . Passe por todas as perguntas e tente dar uma resposta. Se você não conseguiu responder alguma coisa, este é um sinal para repetir o tópico.
Sites de problemas de programação podem ajudá-lo a se preparar para resolver problemas de JavaScript, onde você pode praticar online e testar suas habilidades (comece com a seção de problemas fáceis). Tarefas particularmente populares são aquelas que envolvem a aplicação de métodos para trabalhar com arrays. Um exemplo de tais tarefas: verificar se há um palíndromo ou anagrama.
Sites com tarefas de programação:
- LeetCode ;
- HackerRank ;
- CodeWars .
Canais de telegrama com tarefas e testes JavaScript (por exemplo, @js_test) também podem ajudar na verificação do conhecimento.
As tarefas de aplicação de algoritmos realmente complexos e de conhecimento de estruturas de dados, como árvores e gráficos, quase nunca são dadas em uma entrevista para um desenvolvedor front-end júnior. Portanto, não tenha medo: mesmo que a entrevista lhe pareça muito assustadora, na verdade, se você foi capaz de responder a todas as perguntas acima, provavelmente conseguirá obtê-la.
Uma dica: se você não está confiante em suas habilidades, ainda assim consiga uma entrevista com uma empresa. E mesmo que não receba uma oferta, você entenderá seus pontos fracos. Você pode se preparar ainda melhor para sua próxima entrevista!
Obrigado por ler até o fim. Espero que o artigo tenha sido útil para você. Se você sabe que pode ser útil para outra pessoa, compartilhe-o.
Desejo-lhe boa sorte na conquista de novos picos!