Mais de 40 anos, sem formação técnica, foi assim que aprendi um frontend framework em 2 semanas

Nas últimas duas semanas, compartilhei minhas experiências pessoais de aprendizado rápido dos fundamentos de HTML, CSS e JavaScript, sem qualquer conhecimento prévio, experiência ou orientação. No entanto, se seu objetivo, como o meu, é se tornar um desenvolvedor web full-stack ou um desenvolvedor independente capaz de criar seus próprios produtos, dominar essas três pilhas básicas de tecnologia não é suficiente. Portanto, nesta semana, compartilharei um guia completo para iniciantes para aprender rapidamente os fundamentos de uma estrutura de front-end e criar produtos simples. Todos os recursos de aprendizado envolvidos neste post são gratuitos!

Depois de terminar meu aprendizado, criei um aplicativo da web como este aplicativo da web . Perdoe-me por não implantar meu próprio projeto, mas usar o exemplo de projeto no tutorial relacionado. Aqui está o meu próprio repositório . Na verdade, repliquei mais de 90% de todos os efeitos no projeto de amostra. Os motivos para não implantar serão discutidos posteriormente. Como você pode ver, este é um projeto relativamente completo, envolvendo muitos aspectos, como comunicação de front-end e back-end, design de animação de front-end, design de gancho de ciclo de vida, design de estrutura de dados de back-end, gerenciamento de estado, gerenciamento de rota e assim por diante. Eu até integrei um editor de rich text e tailwindcss neste projeto, tornando o front-end muito profissional. Se até eu consigo dominar rapidamente o básico de um framework de front-end, por que você não?

Como de costume, vamos primeiro falar sobre os desvios que fiz durante meu processo de aprendizado do frontend framework.

Com tantos frameworks de front-end, qual deles um iniciante deve escolher?

Esta é uma das perguntas mais confusas para iniciantes, especialmente iniciantes autodidatas. É uma pergunta altamente personalizada que envolve suas habilidades básicas, escolha do caminho de aprendizado, capacidade de aprendizado, objetivos de curto e longo prazo e até mesmo o país e a região em que você mora. Portanto, é difícil dar uma resposta padrão. Os iniciantes muitas vezes carecem de conhecimento e experiência no setor para avaliar a melhor opção entre todos esses fatores.

Essa é uma questão crucial porque a estrutura de front-end está intimamente relacionada à linguagem de programação principal que você usa ao criar um aplicativo da web. Além disso, se você escolher uma estrutura menos popular, poderá achar difícil encontrar recursos relevantes da comunidade e até mesmo se sentir constrangido ao fazer cursos e colaborar com outras pessoas. Estou confuso sobre isso há muito tempo e até tentei aprender Flask e Django, mas acabei desistindo por vários motivos.

Eu poderia escrever um artigo de 10.000 palavras sobre esse assunto, mas esse não é o objetivo do post de hoje. Então, aqui está minha resposta curta: se você está procurando um emprego, é melhor aprender React e torná-lo seu framework principal. Se você é iniciante como eu, com pouco conhecimento prévio e deseja aprender rapidamente, criar rapidamente e desenvolver produtos de forma independente no futuro, pode escolher o Vue3. Sua curva de aprendizado é relativamente mais suave e fácil para os iniciantes começarem.

É suficiente para um iniciante aprender apenas um framework?

Certa vez, pensei que escolher uma estrutura de front-end no ecossistema da minha linguagem de programação principal resolveria todos os problemas porque as estruturas convencionais têm ecossistemas muito ricos que podem lidar com todos os tipos de cenários em desenvolvimento. Porém, conforme fui aprendendo outros cursos e construindo produtos, percebi que essa ideia era ingênua.

Por exemplo, atualmente estou aprendendo o bootcamp Solidity da Alchemy University. O pré-requisito oficial para este curso é um conhecimento básico de JavaScript. Achei que poderia lidar com este curso facilmente, pois não só aprendi HTML, CSS, JavaScript, mas também Vue3. No entanto, na terceira semana, de repente descobri que o projeto da semana foi construído com o frontend do React. Eu estava estupefato. Felizmente, o projeto da semana foi direto e exigia apenas o básico do React. Ainda assim, demorei meio dia para aprender rapidamente o básico do React e finalmente concluí o projeto da semana com sucesso. Portanto, como iniciante, nunca deposite suas esperanças em uma única pilha de tecnologia. Aprendizado rápido e adaptabilidade são habilidades essenciais para nós.

Minha Estratégia de Aprendizagem Front-end Framework

Simplicidade, Praticidade e Orientação para Objetivos

Não espero me tornar um especialista em um framework front-end em apenas 2 semanas. Apesar do Vue3 ser mais amigável para iniciantes do que o React, seu ecossistema é rico e cheio de conteúdo, incluindo vários documentos, como o próprio Vue3, Vite, Vue Router, Pinia e muito mais. Se você deseja criar uma interface do usuário de front-end de qualidade, também precisa estudar bibliotecas de interface do usuário como o Element Plus. Além disso, se nosso produto tiver alguns recursos especiais, precisamos aprender algumas bibliotecas especificamente para esse recurso, como o editor de rich text, wangEditor, que integrei ao meu aplicativo da web.

É impossível aprender tudo isso em 2 semanas, então estabeleci meu objetivo de entender as funções principais do Vue3 e inicialmente construir um front-end com aparência profissional.

Centrando-se na documentação do Vue3 e aumentando gradualmente a complexidade da prática

Revisei muitos documentos desde que comecei a programar por conta própria e devo admitir que o Vue3 é um dos mais amigáveis para iniciantes. A excelente redação da documentação possibilitou que eu aprendesse frameworks front-end. Portanto, em vez de recomendar quaisquer tutoriais de terceiros, sugiro enfaticamente àqueles que desejam aprender Vue que façam da própria documentação do Vue3 seu principal material de estudo.

Ter bons materiais de estudo por si só não é suficiente para dominar um framework; a melhor maneira de entender um framework é usá-lo para construir projetos. No entanto, tentar criar o aplicativo da web que demonstrei no início deste artigo pode não ser uma boa ideia. Na verdade, construí dois projetos durante meu estudo, sendo o primeiro muito simples, principalmente para ter uma ideia de como usar a estrutura, entender o processo geral e as partes principais. O segundo projeto é uma extensão do primeiro, aprendendo como encontrar os recursos necessários para construir um aplicativo web real dentro do ecossistema de um framework.

Horário e Cronograma de Estudo

1. Passei meio dia organizando os possíveis recursos de aprendizado, principalmente alguns documentos e dois tutoriais de projetos cuidadosamente selecionados. Os documentos incluem o seguinte: documentação Vue3 , documentação Vite , documentação Vue Router , documentação Axios , documentação Element+ e documentação Pinia . A documentação do Vue3 é a mais crucial entre elas.

   
   

2. Então, passei cerca de 3 dias e meio lendo a maior parte da documentação do Vue. O foco é o básico, e mesmo iniciante garanto que você consegue passar por essa parte sem dificuldade. No entanto, quando cheguei às partes posteriores, alguns conteúdos gradualmente se tornaram menos claros. Isso é normal para iniciantes e está tudo bem. As partes que não consegui entender por enquanto, anotei e segui em frente. Algumas partes, como Melhores Práticas, TypeScript e Tópicos Avançados, decidi pular completamente. Resumindo, se você se concentrar apenas nas partes mais essenciais e básicas, 3 dias e meio é tempo suficiente. Não aprendo rápido e meu básico era fraco, talvez você não precise de tanto tempo.

   
   

3. No dia e meio seguinte, segui um tutorial gratuito clássico da Traversy Media e fiz um pequeno projeto - um rastreador de tarefas. Eu particularmente quero falar sobre o estilo de ensino de Brad aqui. Ele é certamente uma figura lendária, considerado o padrinho da programação por muitos autodidatas. Sempre que assisto seus cursos, aprendo muito. Ele é muito bom em usar um pequeno projeto para demonstrar completamente todos os aspectos que se precisa aprender dentro de uma pilha de tecnologia. ** Mas como iniciante, você tem que prestar atenção em uma coisa, não ouça suas aulas sem nenhum fundamento. ** Porque o estilo de ensino de Brad é muito conciso e elegante. Se você não tem o básico, pode não conseguir acompanhar o ritmo dele. Portanto, agendei deliberadamente este pequeno tutorial de projeto no segundo estágio do meu aprendizado, não no primeiro.

   
   

4. Se você seguiu seriamente o tutorial dele, acredito que encontrou a sensação de construir um front-end com um framework, mas, ao mesmo tempo, você tem mais perguntas. Era assim que eu estava, mal podia esperar para navegar rapidamente pelos documentos do vite, vue Router, Axios e pinia. Desta vez, passei apenas um dia e meio. Como já sei aproximadamente qual conhecimento básico da pilha de tecnologia acima é necessário para criar um projeto vue3, concentro-me neste conteúdo. E outros conteúdos relativamente complicados, mas não tão comumente usados, eu apenas naveguei rapidamente. Se você não entender tudo de uma vez, pule.

   
   

5. Na segunda semana, eu estava confiante o suficiente para consolidar o conhecimento básico que aprendi na primeira semana, construindo um projeto relativamente complexo. E de acordo com as necessidades de construção de um aplicativo da web real, expanda o conteúdo aprendido anteriormente. Desta vez eu ainda escolhi um popular tutorial vue - FireBlog da Traversy Media. Este tutorial é explicado por John Komarnicki , deixe-me explicar porque escolhi este tutorial.

   
   

• A vantagem deste projeto é que ele é muito completo, com uma interface de usuário front-end profissional e uma API de back-end implementada com a ajuda do firebase. Todo o projeto envolve muitos aspectos, como comunicação de front-end e back-end, design de animação de front-end, design de gancho de ciclo de vida, design de estrutura de dados de back-end, gerenciamento de estado, gerenciamento de rota e assim por diante. Até aprendi muito conteúdo que não entendia ao ler a documentação durante o processo de construção. Se quisermos desenvolver aplicativos da web no futuro, esta é uma ótima oportunidade de experiência prática.

• Sua principal desvantagem é que este é um tutorial de dois anos atrás, então, inevitavelmente, algumas pilhas de tecnologia foram atualizadas. Por exemplo, o vue-cli usado no tutorial agora está em manutenção, usei o vite ao compilar. Outro exemplo é o editor de rich text usado no tutorial que não é atualizado há muito tempo, usei o wangEditor que também é leve, mas tem manutenção mais recente e se integra melhor com o vue3 na hora de construir.

  
  

6. O back-end deste tutorial usa firebase para construir, embora não seja complicado, pode não atender às nossas próprias necessidades práticas. Por exemplo, meu back-end ideal é uma API restful criada com node.js+express+mongodb+mongoose. Portanto, não segui o tutorial para construir um back-end do firebase, mas construí temporariamente um back-end virtual com json-server para simular o comportamento de uma API restful. É também por isso que não implantei meu projeto online. Como a página do github e o vercel só podem implantar páginas da Web estáticas e o terminal do json-server só pode ser executado localmente, ele não pode ser implantado nelas. Você pode escolher de acordo com suas próprias necessidades ao seguir este tutorial ou pode criar um back-end do firebase como ele.

   
   

7. Este tutorial dura seis horas e meia. Normalmente, se você estuda o conteúdo de uma hora todos os dias, seis dias devem ser mais do que suficientes. À medida que sou mais velho, minha velocidade de aprendizado é mais lenta. Você pode concluir a construção em menos de seis dias. No último dia ainda revisei os conteúdos anteriores como de costume, o mais importante é organizar as anotações que fiz durante as duas semanas de aprendizado e fazer uma boa cábula. Porque eu achei essa ação crucial. Muitas vezes, um mês depois de terminar de aprender, quando abro meu código novamente, há muitas partes que não entendo ou não lembro. Neste ponto, se você deseja construir um novo projeto, notas e folhas de dicas podem ser úteis.

Alguns conselhos finais:

1. Antes, eu estava sempre obcecado em encontrar o "tutorial perfeito". Mas depois descobri que na verdade não existe um tutorial perfeito. Veja o tutorial do FireBlog que aprendemos na segunda semana como exemplo, ele tem muitas deficiências e até mesmo algumas partes não atendem aos nossos requisitos. Mas e daí? Ainda é um excelente tutorial e um raro projeto prático. Só precisamos atualizar ou modificar as peças que não atendem aos requisitos.

   
   

2. Aprender uma estrutura de front-end é um pouco semelhante a aprender javascript sobre o qual falamos na semana passada, não espere realizar tudo em duas semanas. Há muito conteúdo em seu ecossistema e está em constante atualização. Sem mencionar que, como discutimos anteriormente, não é realista esperar conquistar todos os aspectos com apenas o aprendizado de uma estrutura, portanto, esse será um processo de aprendizado contínuo. O que precisamos fazer é aproveitar tudo isso e não ver como um fardo.

   
   

3. Se você planeja aprender a reagir em vez de vue, ou mesmo angular, o conteúdo que mencionei acima ainda se aplica. É assim com os frameworks front-end, os métodos de aprendizado e a direção da escolha dos recursos de aprendizado são bastante semelhantes.

   
   

#WebDevelopment #FrontendDevelopment #VueJS #JavaScript #LearningToCode #CodeNewbie #TraversyMedia #SelfImprovement #SelfTaught #CodingResources #React