Começando com o desenvolvimento Front-end

Depois de algum tempo na faculdade escrevendo código e programas que funcionavam via terminal, ficava sempre com a impressão de que faltava algo.

Comecei escrevendo programas onde o usuário respondia via terminal, mas enquanto isso o mundo já usa o navegador e sites para interagir com sistemas. Essa casca final de interação com o usuário é a porta da frente de programas na web, e por isso mesmo chamamos de front-end.

Partindo do princípio que praticamente todas as empresas estão na web hoje em dia. É cada vez mais importante a criação de interfaces amigáveis e acessíveis a todas as pessoas, e o papel da pessoa desenvolvedora Front-end torna-se cada vez mais importante nesses cenários.

Então quais os passos para aprender o Front-end e conquistar uma vaga no mercado de trabalho ?

A base do desenvolvimento web

Para criar as páginas que eu queria, comecei com o básico de HTML5 e CSS3, com essas tecnologias somos capazes de indicar ao navegador o quê mostrar e como mostrar. Ah, já que estamos falando de HTML5 e CSS3, que são a base do Desenvolvimento Front-end, tem um conteúdo super bacana da GeekHunter que apresenta uma linha do tempo do Mercado Front-end. Você vai ler sobre o surgimento do Flash, até tecnologias em voga, como PWA e EcmaScript!

Após algumas semanas estudando aprendi a estruturar páginas de maneira semântica, para que os buscadores e leitores de tela conseguissem tornar o nosso conteúdo mais acessível ao usuário final. Aprendi o básico sobre posicionamento e também sobre a importância de escrever um código CSS limpo, flexível e reaproveitável.

O próximo passo foi aprofundar mais no meus estudo, aprendendo sobre alguns tópicos mais avançados como pseudoclasses, pseudoelementos, transições, animações, como criar formulários e tabelas semânticas e como utilizar alguns seletores mais avançados.

Depois de mais algumas semanas estudando, foi a vez de aprender sobre a diferença entre medida relativa e absoluta, e onde e como devemos utilizar cada unidade de medida, como em, rm e o famoso pixel e como organizar o meu código CSS.

Por último, estudei as vantagens e desvantagens de se utilizar frameworks CSS, como o famoso BootStrap. Foi então que percebi que o CSS tinha deixado de ser simples e poderia ser utilizado o para realizar várias outras funções, e não apenas estilizar texto.

Agora que já somos capazes de estilizar nossas páginas e estruturar nosso HTML, vamos aprender a dar vida a nossa página, deixando ela com comportamento dinâmico e interativo.

Deixando nossas páginas dinâmicas

Hoje em dia uma das linguagens mais populares e comentadas do mundo é o JavaScript, e é com a ajuda dela que iremos dinamizar e criar interatividade nas nossas páginas.

O meu plano para conhecer o reino encantado do JavaScript foi focar em tópicos base da linguagem como variáveis, operadores, arrays, laços e estilos. Para praticar essa parte fiz vários exercícios de lógica.

Após algum tempo comecei estudar os tópicos relacionados a interação com o usuário como criação de eventos, manipulação de elementos, criação de filtros, validação de formulários, até como utilizar o AJAX para preencher automaticamente formulários HTML.

Como eu já estava escrevendo muito código, percebi que estava na hora de aprender como organizar meu código JavaScript de maneira fácil.

Depois de estudar JavaScript puro foi a vez de aprender um pouco sobre JQuery, uma das bibliotecas mais conhecidas no mundo front-end. Além possuir diversas funções e plugins criadas para auxiliar nosso desenvolvimento no dia a dia, durante meus estudos aprendi que o JQuery facilita nosso trabalho com AJAX e como fazer requisições HTTP como GET e POST e animações.

Por fim aprendi a usar outras técnicas com o JavaScript para contornar a difícil tarefa de agradar as diversas versões e tipos de navegadores, ao mesmo tempo que usamos os recursos mais modernos do HTML5 e CSS3.

Como já aprendemos muita coisa sobre a base do front-end, chegou a hora de estudar técnicas mais avançadas para refinar nosso desenvolvimento.

Evoluindo nosso Front-end UI

Agora que já criamos uma boa base nos fundamentos da web, chegou a hora de estudar sobre tópicos mais avançados do desenvolvimento front-end.

Comecei entendendo o que são pré-processadores e como descomplicar o CSS. Também aprendi o que são e quais os 10 mixins em Saas que eu deveria usar em meus projetos.

Uma das minhas maiores dificuldade durante meu aprendizado foi sobre posicionamento e aprender sobre Flexbox facilitou muito esse processo. Assim como estudar o CSS Grid Layout me ajudou a criar layouts de forma mais rápida e eficiente. Uma dica que eu deixo para fugir da sobrescrita de estilos é criar componentes CSS utilizando o padrão BEM.

Por fim vamos estudar alguns dos tópicos mais importantes hoje em dia como, desenvolver páginas que se adaptam a qualquer tipo de aparelho, como lidamos com os limites de resolução em sites responsivos e porque usar ‘em’ no CSS.

Agora que já descomplicamos nosso CSS com a ajuda de pré-processadores e já sabemos deixar nossa página responsiva, vamo voltar ao JavaScript e ver o que as novas especificações trouxeram de novidade.

JavaScript Moderno

Ao longo dos anos nossa linguagem favorita passou por várias mudanças e como engenheiros front-end, não podemos deixar de acompanhar a evolução e especificação do JavaScript moderno.

A nova especificação do JavaScript simplificou nosso trabalho com programação orientada a objetos e trouxe recursos como arrow functions, spread operator, template strings e funções como map e reduce. Além de estudar os novos recursos, também aprendi mais sobre alguns padrões de projetos como o Proxy e Factory.

Até agora aprendemos a usar boas práticas durante o desenvolvimento das nossas páginas, mas inevitavelmente elas vão crescer, então precisamos conhecer algumas técnicas e ferramentas que vão nos auxiliar a lidar com essa complexidade, sem afetar o usuário.

SPA e React

Uma arquitetura muito famosa e utilizada hoje em dia é a Single Page Application, com ela criamos uma única página que passa a sensação ao usuário de estar em uma aplicação.

Temos algumas opções de frameworks para a criação de SPA, como por exemplo o Vue.js e o Angular.js. Porém eu optei por escolher o React tanto pela facilidade que ele oferece para manipular e atualizar o estado da nossa aplicação, como pela sua grande adoção no mercado de de trabalho.

Para ter uma melhor entendimento desse framework, primeiro vamos estudar como o React realiza a navegação e a comunicação entre os componentes, depois como funciona a criação dos container components e o ciclo de vida do React , até chegar na arquitetura flux, implementação do Redux e o server side rendering.

Conhecendo a formação Engenheiro Front-end

Uma formação nada mais é do que uma trilha de cursos onde podemos nos tornar proficiente em uma tecnologia. No caso, criamos a Formação Front-end. Nela, você começará desde o básico com HTML,CSS e JavaScript, até tópicos mais avançados como design responsivo e utilização de frameworks.

A formação não é formada apenas por cursos, mas sim por diversos outros conteúdos, como podcasts, posts e lives. Cada conteúdo tem uma parte no aprendizado e eles vão se complementando e integrando conforme avançamos na formação. Ao final da formação, você realizará um projeto.

Isto é, irá colocar em prática tudo que aprendeu nos cursos que estudou. Esse projeto será revisado por um instrutor ou instrutora aqui da Alura que te passará um feedback sobre o código que escreveu.