Como vocês estudam uma nova tecnologia? Queria uma visão da comunidade sobre Alura/Rocketseat/Aprender sozinho

[Lucas0liveira]

Pessoal, estou em um momento do início de carreira em que acredito que preciso trocar minha stack e aprender algumas tecnologias mais difundidas. Venho tentando me preparar pra concorrer a vagas no exterior e vejo que a grande maioria pede:

• React/Angular
• Typescript
• GraphQL

Conheço um pouco e tenho alguns projetinhos bobos desenvolvidos com React, quanto ao restante já não sei muito. Tenho 2 anos de experiência com Vue mas nunca usei GraphQL ou Typescript. Minhas opções pra aprender são:

• Alura Tem uma variedade de cursos úteis pra mim, mas por ser super generalista tenho receio de que seja um pouco superficial
• Rocketseat Os planos pra FrontEnd são bem focados em React, é mais barato que a Alura mas não sei quanto à qualidade
• **Estudar sozinho ** De graça, mas sem um bom direcionamento e correndo risco de criar maus hábitos

Queria saber como você aborda/abordaria uma situação como essa, quais dicas um desenvolvedor mais experiente pode passar pra um iniciante como eu, e o que os colegas júniores têm feito pra aprender coisas novas com tantas opções disponíveis.

[felquis]

É importante você se aproximar de pessoas que estão lá, ou estão chegando onde você quer chegar, seja youtubers, twitters, bloggers, escritores de livros, existe muita gente compartilhando, essa pessoa acaba te inspirando te mostrando o que é possível fazer com essas ferramentas que desejamos tanto dominar.

Se você já tem experiência com Vue, e você quer aprender TypeScript e GraphQL não há motivos de ir atrás do React e Angular, mas se você possui experiencia com Vue, provavelmente aprender React e Angular não é a tarefa mais difícil - acontece que ter um grande domínio nestes frameworks requerem exposição a projetos completos com rotas, formulários, links, imagens, integração com libs que só dependem no JavaScript etc...

Principios de Componentes

React e Angular tem documentações MUITO boas - se você já entende princípios da anatomia de um componente, você consegue pegar React, Angular apenas procurando nas documentações como se faz o que você quer fazer - ciclo de vida de componente e tudo mais - por exemplo:

• se eu quero entender como que faço rotas no Angular, eu vou tentar começar por aqui https://angular.io/guide/router
• eu nunca usei vuejs, mas se preciso aprender rotas com ele, eu começaria por aqui https://vuejs.org/guide/scaling-up/routing.html#simple-routing-from-scratch que de imediato me redireciona para https://router.vuejs.org/guide/ então, siga as dicas oficiais das docs.
• react se quer da dica de como fazer routing em sua doc oficial, mas buscando na internet "react routing" aparece sugestão de tutoriais que menciona a react-router-dom que é o package mais popular e bem documentado de como se fazer routing com React, e digo mais, frameworks que usam React como nextjs, remix documentam suas próprias convenções de como se fazer routing funcionar para seu caso.

TypeScript

TypeScript é algo que você só aprende usando, então começa pelo básico - https://www.typescriptlang.org/docs/handbook/typescript-in-5-minutes.html e simplesmente pare de usar javascript puro nos projetos, e sempre use o tsc - quando encontrar um bloqueio - simplesmente copie o erro e cole no buscador de internet - e principalmente leia as mensagens de erro e aprenda a decifra-las o que só vem depois de muito copia e cola na internet - mas enfim, leia as mensagem de erro mesmo que vc não as entenda.

TypeScript pode ser útil em qualquer projeto JavaScript, seja no backend, no front-end sem framework ou com vue, react, angular etc... então talvez seja melhor vc aprender TypeScript em um projeto VueJS mesmo, talvez algum maior que vc já tenha feito previamente.

GraphQL

GraphQL eu acho muito difícil e requer muita imersão no mundo GraphQL para vc passar a entender o básico dele! Estou apenas compartilhando minha experiência - recentemente passei a usar GraphQL (o básico) e só aprendi pois estou em um projeto que sou apenas eu mais uma pessoa que ela que começou o projeto, então eu copiei o projeto e removi tudo que era regra de negocio e deixei o mínimo do mínimo até eu entender como que uma lib se juntava com a outra para no final das contas entregar uma API GraphQL totalmente funcionando - e deixei neste repositório https://github.com/felquis/entity-to-entity-sql

Desde então, criei 3 projetos usando essa mesma estrutura com:

• nexus para gerar o schema do graphql
• prisma para servir como ORM e se comunicar com um banco de dados
• e o typescript para vir com toda a utilidade do auto-complete
• no front-end usa-se algo chamado gqty que é a principal lib de fetch de dados da API GraphQL que tenho usado, mas existem MUITAS libs de se fazer fetch com GraphQL, se vc entender GraphQL o suficiente irá escrever sua própria lib para faze-lo, mas eu não cheguei neste nível ainda.

Dissecar um projeto funcionando

Como eu sempre tive dificuldade de entender GraphQL, essa ideia de rodar um projeto pronto e reduzi-lo ao mínimo e entender como cada parte se junta foi o que me ajudou mais, e assim muita busca e muita doc, pq as vezes mesmo estando na doc ainda precisamos prestar muita atenção no que estamos lendo para interpretar as instruções.

Se vc quer aprender GraphQL, sugiro vc tentar rodar este projeto do link e remover tudo que é regra especifica que eu coloquei, e começar a colocar as suas, depois de brincar um pouco com o repositório - mas enfim fica a seu critério o caminho que você irá tomar.

---

Existe muitos caminhos de tooling que você pode tomar para usar Vue (React, Angular), GraphQL, TypeScript. Então se vc usar algo já feito e dissecar o topo em todas suas partes - isso vai te ajudar a entender como cada parte funciona, até o ponto que você se sentirá confidente para alterar uma parte dessas. Leve em consideração - "working software over documentation" - então vc tem que abrir o código e discernir suas partes - enquanto o código continua funcionando, se o programa parou de funcionar, volte um passo e entenda por que ele parou de funcionar.

Conclusão

As ferramentas que citei aqui, são muito boas, e estão me ajudando muito - estou me tornando um programador melhor usando JavaScript no NodeJS com essas ferramentas, elas estão servindo como base para aprendizados mais completos, por exemplo:

• Nexus, me ensina sobre GraphQL, mas só vou entender GraphQL quando eu tiver calma e paciência para dissecar a documentação oficial dela.
• Prisma, me ensina sobre modelagem de bancos de dados, mas para modelar um banco Postgre ou MongoDB a gente precisa se aprofundar nas particularidades de cada um destes bancos.
• TypeScript me ensina sobre declarar os tipos de funções e seus retornos, e para isso a gente precisa estar motivados a declarar os tipos.

Então desejo a você muito calma, motivação, leia, compreenda, teste as documentações oficiais, procure códigos completos prontos que já funcionam para servir como base para você aprender através da dissecação.

Deus te abençoe em seu caminho.

[lagden]

Eu sempre pego um projeto e vou fazendo!
Em suma: aprendo no brute force

[Lucas0liveira]

É importante você se aproximar de pessoas que estão lá, ou estão chegando onde você quer chegar, seja youtubers, twitters, bloggers, escritores de livros, existe muita gente compartilhando, essa pessoa acaba te inspirando te mostrando o que é possível fazer com essas ferramentas que desejamos tanto dominar.

Se você já tem experiência com Vue, e você quer aprender TypeScript e GraphQL não há motivos de ir atrás do React e Angular, mas se você possui experiencia com Vue, provavelmente aprender React e Angular não é a tarefa mais difícil - acontece que ter um grande domínio nestes frameworks requerem exposição a projetos completos com rotas, formulários, links, imagens, integração com libs que só dependem no JavaScript etc...

Principios de Componentes

React e Angular tem documentações MUITO boas - se você já entende princípios da anatomia de um componente, você consegue pegar React, Angular apenas procurando nas documentações como se faz o que você quer fazer - ciclo de vida de componente e tudo mais - por exemplo:

• se eu quero entender como que faço rotas no Angular, eu vou tentar começar por aqui https://angular.io/guide/router
• eu nunca usei vuejs, mas se preciso aprender rotas com ele, eu começaria por aqui https://vuejs.org/guide/scaling-up/routing.html#simple-routing-from-scratch que de imediato me redireciona para https://router.vuejs.org/guide/ então, siga as dicas oficiais das docs.
• react se quer da dica de como fazer routing em sua doc oficial, mas buscando na internet "react routing" aparece sugestão de tutoriais que menciona a react-router-dom que é o package mais popular e bem documentado de como se fazer routing com React, e digo mais, frameworks que usam React como nextjs, remix documentam suas próprias convenções de como se fazer routing funcionar para seu caso.

TypeScript

TypeScript é algo que você só aprende usando, então começa pelo básico - https://www.typescriptlang.org/docs/handbook/typescript-in-5-minutes.html e simplesmente pare de usar javascript puro nos projetos, e sempre use o tsc - quando encontrar um bloqueio - simplesmente copie o erro e cole no buscador de internet - e principalmente leia as mensagens de erro e aprenda a decifra-las o que só vem depois de muito copia e cola na internet - mas enfim, leia as mensagem de erro mesmo que vc não as entenda.

TypeScript pode ser útil em qualquer projeto JavaScript, seja no backend, no front-end sem framework ou com vue, react, angular etc... então talvez seja melhor vc aprender TypeScript em um projeto VueJS mesmo, talvez algum maior que vc já tenha feito previamente.

GraphQL

GraphQL eu acho muito difícil e requer muita imersão no mundo GraphQL para vc passar a entender o básico dele! Estou apenas compartilhando minha experiência - recentemente passei a usar GraphQL (o básico) e só aprendi pois estou em um projeto que sou apenas eu mais uma pessoa que ela que começou o projeto, então eu copiei o projeto e removi tudo que era regra de negocio e deixei o mínimo do mínimo até eu entender como que uma lib se juntava com a outra para no final das contas entregar uma API GraphQL totalmente funcionando - e deixei neste repositório https://github.com/felquis/entity-to-entity-sql

Desde então, criei 3 projetos usando essa mesma estrutura com:

• nexus para gerar o schema do graphql
• prisma para servir como ORM e se comunicar com um banco de dados
• e o typescript para vir com toda a utilidade do auto-complete
• no front-end usa-se algo chamado gqty que é a principal lib de fetch de dados da API GraphQL que tenho usado, mas existem MUITAS libs de se fazer fetch com GraphQL, se vc entender GraphQL o suficiente irá escrever sua própria lib para faze-lo, mas eu não cheguei neste nível ainda.

Dissecar um projeto funcionando

Como eu sempre tive dificuldade de entender GraphQL, essa ideia de rodar um projeto pronto e reduzi-lo ao mínimo e entender como cada parte se junta foi o que me ajudou mais, e assim muita busca e muita doc, pq as vezes mesmo estando na doc ainda precisamos prestar muita atenção no que estamos lendo para interpretar as instruções.

Se vc quer aprender GraphQL, sugiro vc tentar rodar este projeto do link e remover tudo que é regra especifica que eu coloquei, e começar a colocar as suas, depois de brincar um pouco com o repositório - mas enfim fica a seu critério o caminho que você irá tomar.

Existe muitos caminhos de tooling que você pode tomar para usar Vue (React, Angular), GraphQL, TypeScript. Então se vc usar algo já feito e dissecar o topo em todas suas partes - isso vai te ajudar a entender como cada parte funciona, até o ponto que você se sentirá confidente para alterar uma parte dessas. Leve em consideração - "working software over documentation" - então vc tem que abrir o código e discernir suas partes - enquanto o código continua funcionando, se o programa parou de funcionar, volte um passo e entenda por que ele parou de funcionar.

Conclusão

As ferramentas que citei aqui, são muito boas, e estão me ajudando muito - estou me tornando um programador melhor usando JavaScript no NodeJS com essas ferramentas, elas estão servindo como base para aprendizados mais completos, por exemplo:

• Nexus, me ensina sobre GraphQL, mas só vou entender GraphQL quando eu tiver calma e paciência para dissecar a documentação oficial dela.
• Prisma, me ensina sobre modelagem de bancos de dados, mas para modelar um banco Postgre ou MongoDB a gente precisa se aprofundar nas particularidades de cada um destes bancos.
• TypeScript me ensina sobre declarar os tipos de funções e seus retornos, e para isso a gente precisa estar motivados a declarar os tipos.

Então desejo a você muito calma, motivação, leia, compreenda, teste as documentações oficiais, procure códigos completos prontos que já funcionam para servir como base para você aprender através da dissecação.

Deus te abençoe em seu caminho.

Cara, muito obrigado por essa resposta super completa, dou muito valor ao tempo que vc dedicou a isso e vou com certeza levar as informações que em passou adiante, a começar por usar somente typescript sempre que possível! Muito obrigado!