🍦 ⚾️ 🤢 Como aprender o desenvolvimento front-end, encontrar seu primeiro emprego e não ter problemas 🙏🏽 🙋🏽 🛂

Frontend, a melhor, melhor e mais acolhedora direção para entrar na TI. Mas nem tudo é tão simples com ele - no front-end é fácil começar e é difícil se tornar um mestre. Não será o tormento de escolher uma linguagem de programação, mas haverá uma luta com suas deficiências. Nesta área, existem muitas ferramentas, cujo estudo se baseia no desenvolvimento de uma profissão específica.

Perguntamos a Oleg Shikov, reitor do departamento de desenvolvimento web da GeekBrains, e a Daria Dyachkova, uma desenvolvedora web iniciante , sobre como aprender corretamente, como não obter figurões e seguir uma carreira .

Em 2015, Daria Dyachkova ingressou na Escola Superior de Economia da Faculdade de Economia Mundial e Assuntos Internacionais porque amava idiomas, principalmente na escola - estudou inglês e alemão e sempre ganhava as Olimpíadas. Ela gostava dessa esfera, mas não para o esplendor em seus olhos, então Daria continuou a procurar uma futura profissão. Em 2018, ela veio em um dia de carreira para uma das agências de RH, após o que mudou de direção em uma direção inesperada.

“Passei em um longo teste psicológico, onde eles consideraram o tipo de personalidade, mentalidade e muito mais. Sem ofensa aos psicólogos, mas sou cético em relação a esses testes. Após o teste, eles me disseram: “eh, o programador desaparece” e se ofereceram para ouvir uma palestra sobre a transição para o mundo da TI. Dei de ombros, fui e acendi.

Em casa, ela começou a pesquisar no Google, assistir a críticas de profissões. Anteriormente, Daria fez páginas da Web em Tilda e Wix, manteve seu blog revisando notícias internacionais, então pensei no frontend em primeiro lugar. No entanto, ela examinou todos os webinars introdutórios de profissões e linguagens de programação, tentou escrever um pequeno pedaço de código em várias linguagens de programação e escolheu JS como o espírito mais próximo.

O que os front endors fazem

“Se você abrir qualquer página no navegador, tudo o que você vê na sua frente na página é o front-end. Mas, na verdade, o trabalho deles é muito mais complicado do que uma aparência ”, diz Oleg Shikov, reitor do departamento de desenvolvimento web da GeekBrains.

Oleg escreveu o código desde a infância. Os primeiros experimentos foram em C, e em 2011 ele mudou para Javascript. Muito do que está em tecnologia agora estava apenas na sua infância. HTML e CSS não tinham muito potencial, e o Flash prevaleceu no setor. A profissão como um todo era muito mais simples - apenas um layout HTML e um layout simples. Foi o suficiente para escrever tags e estilizá-las lindamente em CSS. Os usuários clicaram em um botão e a página foi completamente atualizada. A solicitação para o servidor saiu, o servidor deu um novo layout. Mas essa abordagem não permitiu uma interface responsiva.

“A tarefa do fornecedor front-end atualmente é construir a lógica dos sites no lado do navegador”, diz Oleg, “essa lógica é desenvolvida na linguagem de programação JavaScript. Os sites modernos podem funcionar totalmente no lado do cliente, solicitando ao servidor apenas ocasionalmente, por exemplo, para salvar dados do usuário ou baixar as informações necessárias. Ou seja, agora estamos solicitando uma página não completamente atualizada, mas apenas as informações necessárias, e a renderizamos corretamente no navegador. Graças a esse comportamento, os sites se tornam mais responsivos e economizam parte do tráfego do usuário. ”

Frontend de aprendizagem - está aprendendo JavaScript?

Tendo decidido a direção, Daria ingressou na faculdade de desenvolvimento web da GeekBrains. Na opinião de muitos, o treinamento de front-end se fundiu com o estudo da linguagem Javascript, mas, segundo Oleg Shikov, isso não é inteiramente verdade.

“A primeira coisa é começar com o HTML. É extremamente simples, é muito fácil de lidar, é muito fácil escrever seu primeiro site. Obviamente, ele não será responsivo, mas funcionará e já poderá ser publicado na Internet. Em seguida, você precisa adicionar uma aparência bonita a este site para que não seja apenas uma tela de texto, mas uma página conveniente e bonita com elementos visuais. As folhas de estilos em cascata CSS ajudarão. Algumas semanas são suficientes para dominar HTML e CSS. E logo depois disso, você precisa iniciar o JavaScript, porque é a base da base para criar uma interface responsiva. ”

Mas quando a popularidade chega à tecnologia, ela é seguida por um mar de críticas. Muitos desenvolvedores experientes, um após o outro, revelam problemas e linguagem em seus relatórios, discursos e artigos e oferecem alternativas. Iniciante essas discussões só podem se perder. Segundo Oleg, seria um erro começar a aprender frontends de outros idiomas apenas porque são mais elogiados pelos profissionais.

"Alguns anos atrás, todo mundo culpava o PHP, agora todo mundo culpava o JavaScript, é tão popular. Obviamente, o JavaScript não está isento de problemas, ninguém discute com isso. Mas, por exemplo, o TypeScript (outra linguagem popular da Microsoft, que é uma extensão dos recursos do JS) não é executado no próprio navegador - é traduzido (compilado) em JavaScript. Se escrevermos algo no TypeScript, ainda obteremos o JavaScript, que já será executado no navegador. Para depurar corretamente o código, você precisa conhecer o JavaScript e poder trabalhar com o navegador. ”

Mas Daria gasta tempo para aprender coisas que não estão incluídas no programa.
"Estou acostumado a aprender e entender muito até o fim. Sou uma dessas pessoas que lê todos os materiais adicionais de artigos e realiza tarefas adicionais, porque estão interessadas apenas. Estou aprendendo a aprender, por exemplo, Nuxt.js, Typescript, Vue.js, Webpack e Stylus ".

O que são React, Vue e Angular e como escolhê-los

Além do Javascript e de outros idiomas, os desenvolvedores de front-end exigem conhecimento de várias ferramentas para trabalhar. Em JavaScript puro, é bastante difícil desenvolver interfaces de páginas da web responsivas interativas sem o uso de bibliotecas de terceiros.

Uma biblioteca também é um código JavaScript já gravado por outros desenvolvedores. Ele fornece um conjunto conveniente de soluções para executar as ações preparadas que são regularmente necessárias no trabalho. Há uma grande variedade de bibliotecas na Web que facilitam a criação de interfaces de sites responsivas. Entre eles, os mais famosos são React, Vue e Angular.

“A escolha entre eles é uma pergunta difícil. Você pode aprender todos os três. Esta não é uma tarefa extremamente difícil, porque quando você entender como trabalhar com uma, será mais fácil aprender cada uma subsequente. Mas, de acordo com minhas observações, eles são usados um pouco em diferentes áreas. Angular é um dos mais antigos. É frequentemente usado no segmento corporativo, em grandes projetos, com suporte ao código legado que foi escrito há vários anos. Reagir é onipresente. Ele é o primeiro da lista quando eles escrevem novas interfaces e serviços da web. Sobre Vue, você pode dizer que ele é simples, jovem, legal e popular.

Eu recomendaria tentar escrever uma lógica simples em todas as três estruturas - relativamente falando uma folha de tarefas - com base em meus sentimentos, entender qual delas eu mais gosto e aprender. Ou observe as vagas na sua cidade e escolha, por exemplo, React, porque a maioria das vagas para desenvolvedores front-end exige conhecimento do React. Mas, então, a reciclagem não será difícil. ”

Daria escreve romances de aventura e desenvolve um guia para o universo de seu livro no Nuxt.js. Ela também faz projetos e aterrissagens para seus amigos, por isso aprendeu layout adaptável, consultas de mídia e muito mais. “Comecei o React.js, criei um projeto para o futuro que quero implementar no React Native. Enquanto planejo a arquitetura, desenho com fluxogramas e leio sobre tecnologias que podem ser usadas. ”

Como é o estudo

“Quando o treinamento começou, os professores explicaram tudo perfeitamente - é importante para mim incorporar o conhecimento adquirido em um sistema. A lição de casa ajudou a consolidar a habilidade, um bônus deu uma dica sobre onde e o que mais ensinar. Eu li e dominei muito, assisti manuais e mini lições no YouTube. No GeekBrains, você sempre pode escrever para um professor ou tutor ou seu grupo para conversar. Tudo vai ajudar, eles vão explicar. Se você encontrar um artigo interessante, também há alguém para compartilhar e discutir.

Eu acho que quando você vê seu primeiro Olá mundo, ninguém vai esquecer. E, em geral, a sensação de criar uma interface do usuário bonita a partir do layout, e também funciona, é uma unidade. ”

O estudo dura um ano e meio. Oleg Shikov acredita que apenas aprender a sintaxe é chato, então o aprendizado é construído em torno de projetos imediatamente. “Damos coisas básicas, sintaxe, e imediatamente tentamos colocá-las em prática, escrevemos páginas da web simples. Depois disso, fornecemos PHP, ensinando aos alunos o desenvolvimento de back-end (servidor). Para alguns desenvolvedores iniciantes, parece suficiente aprender HTML com JavaScript, e isso é suficiente para se tornar popular no mercado. De fato, não é bem assim. Você precisa conhecer a arquitetura, algoritmos, padrões e estruturas - e não apenas saber. É necessária outra prática: precisamos escrever nosso próprio produto, participar do desenvolvimento coletivo. ”

No início do treinamento, os alunos escrevem o código separadamente, verificando-o com o professor e, no meio do treinamento, começam a desenvolver o produto com seus colegas de classe, graças ao qual adquirem experiência no desenvolvimento de equipes.

Além de estudar, Daria gosta de estudar na plataforma Kodiri.com, onde são realizadas competições internacionais em JS. “Lá você pode treinar sozinho, resolver tarefas pelo tempo, precisão e beleza do código. Eu conheci o fundador da plataforma Ricardo - ele é um cara legal. Agora estou escrevendo quebra-cabeças para eles. Para cada tarefa, aplico uma solução de referência e testes (então, a propósito, comecei a escrever testes de unidade). É divertido para mim competir com outros jogadores quando a probabilidade de que pelo menos uma das cinco tarefas seja sua autoria é .90,94. Sim, pensei, fiquei curioso por encontrá-los com tanta frequência. Sinceramente, decido por mim mesmo e não olho para as respostas. Ele captura o elemento de gamificação, já recebi as dragonas mais altas (Majestade Imperial), agora resta mover Yurash como o melhor jogador do mês. Em geral, eu não tinha esse elemento do jogo e o espírito de competição nos treinos.Eu acho que vale a pena adicionar essas oportunidades às plataformas educacionais. Alguns dias dos quebra-cabeças de Kodiri sobre velocidade e, em um sonho, escreverei arr.map (e => ".

Encontrando seu primeiro emprego

Em que estágio iniciar uma busca de emprego é uma questão muito controversa no setor. Alguns estão convencidos de que apenas anos de ensino e desenvolvimento da teoria na prática em condições seguras dão à pessoa o direito de pedir dinheiro para o desenvolvimento. Outros, pelo contrário, que você precisa aprender enquanto trabalha no presente trabalho. Segundo o professor, muitos alunos seguem o segundo caminho.

“Conheço estudantes que receberam os primeiros pedidos ou conseguiram um emprego em empresas no terceiro trimestre. Eles continuaram seus estudos, combinando-o com o trabalho. Tudo depende da pessoa e sua capacidade de aprender. É mais fácil para um desenvolvedor iniciante entrar em uma empresa pequena do que em uma grande. Em empresas como Mail.ru ou Yandex, seleção rigorosa. Nem todo desenvolvedor experiente será capaz de chegar lá. Mas todos podem tentar a sorte, é claro.

Quando Daria teve seis meses de treinamento e um resumo do portfólio na forma de um site, ela passou por várias entrevistas, mas não possuía habilidades suficientes para obter um desenvolvedor front-end.

“Na primeira entrevista, foi assustador. Candidatei-me a um emprego como desenvolvedor front-end do Vue. Eu me preparei com cuidado, repeti todo o material de JS e Vue, e tudo o que a GeekUniversity aprendeu em seis meses, resolvi perguntas complicadas e todo tipo de pequenas coisas em que JS se comporta de maneira imprevisível. A entrevista ocorreu no Skype. Uma pequena empresa, imediatamente uma entrevista técnica, ignorando o RH. Respondi alegremente a perguntas, conversamos por uma hora ... e então eles ainda estavam procurando a pilha cheia de um desenvolvedor. Acontece".

imagem

_{Na Habr Career, você pode ver as vagas mais recentes para concursos públicos e assinar o boletim informativo para novas vagas .}

“Os desenvolvedores juniores fazem perguntas simples para se certificar de que conhecem o básico", disse Oleg. "Gostaria de perguntar sobre o layout adaptativo e semântico, sobre como trabalhar com JavaScript puro. Agora, a tendência está em estruturas e bibliotecas, o mesmo React, Vue e Angular e JavaScript "vanilla" sem bibliotecas adicionais - nem todo mundo sabe disso. Eu gostaria de ter certeza de que o desenvolvedor sabe como trabalhar com ele e não correu imediatamente para o campo de React condicional.

De qualquer forma, você terá que gastar algum tempo para responder a diferentes vagas, para passar em diferentes entrevistas. Passá-los também é uma certa experiência e habilidade. Falhas são uma situação normal, você não precisa ter medo. "

“Depois de mais duas entrevistas, fui aconselhado a continuar meus estudos e tentar novamente mais tarde. Também precisávamos de conhecimentos gerais - protocolos, soluções arquitetônicas e muito mais. Eu mesmo entendi, era muito cedo para se estabelecer. Portanto, encontrei um trabalho interessante relacionado à TI - consegui um engenheiro de suporte técnico no Bookmate. É de responsabilidade do leitor responder a perguntas sobre a operação do aplicativo e do site, aconselhar algo pequeno sobre como corrigi-lo e solucionar problemas maiores para emitir bugs no JIRA e no Confluence. Além disso, agora posso imaginar como usuários comuns usam a UI / UX do nosso aplicativo. Dica, "isso não é um bug, é um recurso". Ou quando os desenvolvedores queriam o melhor, mas os usuários não entendiam como era e por quê.

Uma boa chance de olhar para os dois lados é como os usuários usam o aplicativo e como os desenvolvedores o desenvolvem e reparam. ”

Como desenvolver na profissão

- Eu recomendaria que você desenvolvesse um desenvolvedor full-stack, para conhecer o back-end e o front-end. Se falarmos apenas sobre o frontend, então - embora seja necessário conhecer bem o JavaScript - sem estruturas em qualquer lugar. Eles precisam ser ensinados.

O TypeScript vale uma olhada, embora não seja obrigatório em todos os trabalhos. É realmente interessante e é muito fácil para um desenvolvedor JavaScript aprendê-lo. De fato, esse é o mesmo idioma com recursos adicionais que permitem escrever sistemas mais confiáveis. O TypeScript adiciona um sistema de tipos explícito à linguagem, o que nos permite dizer que essa variável será numérica e essa variável será string.

No JavaScript puro, isso não existe, a variável pode ser de qualquer tipo e, às vezes, leva a erros. Você espera um número em uma variável, mas obtém, por exemplo, uma string ou um objeto e, por causa disso, a lógica do trabalho do programa é interrompida. O TypeScript ajuda a evitar esse erro.

Agora muitos estão olhando para o PWA. O fato é que, como eu disse, o mercado de smartphones é enorme. A maioria dos usuários que visitam seu site tem mais chances de fazer isso pelo telefone.

PWA (Aplicativos da Web progressivos) - são sites que possuem recursos adicionais que permitem trabalhar com eles de maneira conveniente, inclusive a partir de um smartphone. Por exemplo, em um site do Android PWA, você pode adicioná-lo à sua tela inicial e iniciá-lo simplesmente clicando no ícone. Existem oportunidades que podem melhorar o site para que ele funcione mesmo quando não há Internet no smartphone. Ou seja, é quase um aplicativo nativo. Recentemente, o Google lançou uma atualização para o Google Play, graças à qual você pode adicionar seu site PWA à loja, e os usuários podem fazer o download e atualizá-lo como um aplicativo nativo regular, quase indistinguível de um aplicativo escrito em Java, por exemplo. Mas, na verdade, ele é escrito em JavaScript e criado usando HTML.

Salários

O salário médio do trainee front-end é de 35 mil rublos. O especialista em nível júnior pode contar com 50 mil, o meio - já com 97 mil - o signor e o chumbo recebem uma média de 170 a 190 mil rublos. _{De acordo com a calculadora de salário da Habr Career, o salário médio de um desenvolvedor front-end é de pouco menos de}_{110.000 rublos}_{(o diagrama é clicável).}

O que ler e ver para auto-estudo

Conectados:

Site de aprendizagem JS learn.javascript.ru
Refactoring.guru - Site de Estudo de Padrões
Sandbox JS e HTML / CSS muito conveniente diretamente no navegador, com a capacidade de compartilhar os resultados de seu trabalho - jsfiddle.net

Livros diretamente sobre JS e HTML / CSS:

Você não conhece JS (há uma tradução para o russo "Você não conhece JS")
»HTML5. ".
« CSS3».
«JavaScript. ».
«JavaScript. ».
«JavaScript. ». .

«- ».
« ».
« SQL. MySQL 5». ,
« ».
« - . ». , , ,
« ».
« ». ,
« ». ,
«. ». . , . , . , .

Como aprender o desenvolvimento front-end, encontrar seu primeiro emprego e não ter problemas