Mapa de aprendizado Front-End, parte 1
Quando eu trabalhava na Huge, uma das partes mais legais e que a equipe mais gostava era o tempo que o time reservava para aprendizado formal. Diferentes pessoas participaram da organização desse tempo, e testamos vários modelos diferentes. Eventualmente, depois de fazer vários rodízios de palestras, workshops e cursos livres, o que mais sentimos falta foi de um direcionamento, principalmente sobre Front-End. De forma bem informal, comecei a montar um mapa de conhecimento e diferentes caminhos que podíamos seguir. A partir daí, cada um poderia apresentar o que soubesse, estudar, ou convidar outros para ensinar.
Decidi usar um Mindmap para isso, e o que acontece quando você usa um “mapa mental”, como o nome diz, é uma enxurrada de conexões com diversos assuntos, então o mapa vai um pouco além do Front-End. Além disso, apesar de estar bastante abrangente, como fiz em tempo livre, está longe de ser completo e tem várias imperfeições. Tentei achar um modelo mais fácil de compartilhar para que outras pessoas pudessem colaborar e polir, mas não encontrei. Até para escrever um artigo é um pouco difícil com o formato que um mindmap toma. Por isso, o objetivo desse mapa não é explicar o mundo, mas ser uma inspiração para que você pesquise e se aprofunde nos pontos que quiser e compreenda alguns pontos que podem te ajudar a direcionar os seus estudos, já existem recursos bem profundos para cada tópico. No total são cerca de 12 seções, que serão divididas em alguns artigos:
- Computador e Programação
- Internet e Network
- Requests e Servidores
- Browser, HTML, CSS e Javascript
- Fluxo de renderização e APIs nativas
- Performance
Para começar, temos que refletir sobre o que é desenvolvimento Front-end, o que esse profissional sabe. Mas, ao contrário de outras profissões como desenvolvedor back-end de uma linguagem específica (como Java ou C#) que tem um ecossistema bem definido, o Front-end sempre foi uma metamorfose ambulante.
Uma possível evolução até o front-end developer
Quando a web começou, nem fazia muito sentido ter uma profissão para o client-side, visto que HTML e CSS eram tópicos bem simples e enxutos naquela época. O programador era alguém que achava uma forma de conectar uma pasta na sua máquina à web, e gerar algumas páginas de conteúdo. Eventualmente diferentes tecnologias e empresas se especializaram (se responsabilizaram e claro, monetizaram) em cuidar da infraestrutura de colocar algo na web, o que levou alguns profissionais a estudarem mais a parte de administração de servidores e bancos de dados. As linguagens disponíveis nesses ambientes online deram aos desenvolvedores back-end material de estudo. E com a evolução dos navegadores, criação do Javascript e maturidade dos usuários, cada vez mais foi necessário um profissional para cuidar do client-side (você pode ler mais sobre a evolução do ecossistema Javascript nesse artigo aqui).
Programador —> Webmaster < Back-end e DBA < Infraestrutura, DBA, Back-end e Front-end.
O que faz um front-end developer
Se você pensar bem, o trabalho de um desenvolvedor Front-end, é a ponta de uma série de profissionais cujo o objetivo é organizar e compartilhar informações. Na verdade, as pessoas já estão ocupadas com isso faz muito tempo.
E assim começa o nosso mapa…
Uma vez que se tornou possível armazenar e organizar informações no computador, começou a jornada do Front-end. Desde aqui, é útil para o desenvolvedor client-side aprender pelo menos um pouco desses assuntos.
Podemos fazer uma “engenharia reversa” do nosso ecossistema, a partir do resultado do trabalho do front-end. Esse resultado está na tela de determinados aparelhos, que possuem cada um seu próprio mecanismo de interação humano-computador. Mais especificamente, o nosso trabalho roda encapsulado em algum ecossistema dentro desses aparelhos, como o navegador por exemplo. Os navegadores têm acesso à parte do mecanismo do aparelho onde habita, através de APIs, e por consequência nós temos acesso a algumas dessas APIs nativas e as APIs do browser.
O browser por sua vez, além de renderizar HTML, CSS e Javascript, lida com o networking, fazendo requests e baixando conteúdo dos servidores pertinentes, sejam os arquivos originais do seu código front-end, ou APIs back-end que provavelmente acessam bancos de dados. Tanto os aparelhos, quanto o navegador, quanto os servidores são feitos com linguagens de programação, que foram feitas exclusivamente para funcionar em computadores, que tem uma série de características para serem chamados assim.
Essas aplicações foram desenvolvidas usando diferentes paradigmas e padrões que evoluíram para lidar com os problemas mais comuns. No fim, são compiladas e manipuladas pelas unidades mais básicas da máquina.
Para apresentar de maneira didática as conclusões desse mapa, cada parte terá uma lista com os principais pontos importantes para o front-end.
Computador e Programação
- Saber um pouco sobre como as informações são transformadas em diferentes formatos, bits, bytes, e armazenadas, fornece um pano de fundo para entender estruturas e formatos de dados, como arrays tipados (Uint8Array, etc), Buffers, e assim por diante.
- Entender como informações (variáveis por exemplo) são apontadas e registradas na memória, é importante para aprender estruturas de dados específicas que estão cada vez mais sendo implementadas no Javascript. Set, Map, Lists e outras com características bem definidas (ao contrário do Array) como tamanho fixo, chaves e árvores binárias. Como tudo isso influencia em performance, e a importância de compiladores Javascript que utilizam tipagem e outros recursos para tentar trazer um pouco dos benefícios das linguagens compiladas.
- Gravar informações no HD é lento, evite cachear ou gravar coisas direto em arquivo.
- Prefira a memória RAM, o acesso é mais rápido. Raramente você vai precisar de algo tão persistente que não possa ser gravado na memória.
- O GPU processa dados gráficos mais rápido que o CPU, por isso aceleração de hardware em animações CSS é importante.
- Se você entender como threads e processos funcionam, vai facilitar bastante entender diferenças entre as linguagens e as características do Node e Eventloop.
- Entenda o processo de compilação para saber a diferença de linguagem compilada para interpretada. Isso ajuda a entender algumas razões na escolha de linguagens em projetos, além de agilizar o seu processo de debug (você vai saber onde cada erro vai aparecer, pois entende que parte é interpretada, compilada, ou renderizada no browser).
- Sabendo sobre threads, você vai saber o que é concorrência e paralelismo, dando um plano de fundo para entender WebWorkers e Parallel.js.
Contextos e propósitos dos diferentes paradigmas, conceitos e design patterns de programação:
- Contexto acadêmico/matemático/científico, dependendo do propósito você encontra bastante o paradigma funcional.
- Software enterprise, orientação a objeto.
- Interface gráfica (GUI), bastante MVC e suas variações.
A sua linguagem e ferramentas front-end foram programadas inicialmente com linguagens “back-end”, compartilhamos muitos dos conceitos básicos:
- Estrutura de dados e algoritimos
- Garbage collection
- Código bloqueante e não bloqueante
- Síncrono e asincrono
- Paradigmas, como o imperativo, funcional e orientação objeto
O Front-end lida diretamente com pessoas e suas necessidades e hábitos. De vez em quando alguém porta ou adapta um conceito para um novo framework ou biblioteca client-side, para abarcar a interatividade crescente e a evolução da tecnologia e da demanda das pessoas. Alguns exemplos (muito mais fáceis de entender com o pano de fundo anterior):
Se você tem alguma idéia de como melhorar o mindmap, ou de como possibilitar um formato colaborativo de conhecimento, deixe seu comentário. Idéias são bem vindas, tentarei incorporar nos próximos artigos da série. ✋
