Glaucia Lemos for Microsoft Azure

Posted on Sep 4, 2019 • Edited on Jan 1, 2022

10 Dicas para se Tornar Ninja em JavaScript!

#beginners #javascript #webdev #showdev

No último artigo, vimos que JavaScript tem ganhado o coração de muitos desenvolvedores(as) e está em 1° lugar das linguagens de programação que devemos ficar de olho pelos proximos anos.

E, de fato não é à toa. Pois encontramos JavaScript em diferentes esferas da tecnologia e desenvolvimento: Back-End, Front-End, Mobile, I.A, Machine Learning, Big Data e a lista não pára por aqui! Por isso que encontramos tantas vagas de emprego, sejam elas aqui no Brasil ou no exterior caçando sempre algum Dev que saiba programar em JavaScript.

Porém, logo vem inúmeras perguntas: 'Como eu posso me tornar ninja em JavaScript? É difícil de aprender? Conseguirei entender JavaScript em pouco tempo? Onde encontrar bons materiais para conseguir ser um(a) excelente desenvolvedor(a) em JavaScript?'

Bom, com respeito a essas e muitas outras perguntas, vocês terão hoje aqui as respostas nesse artigo com 10 dicas infalíveis que te ajudarão a se tornar ninja em JavaScript.

Vamos nessa?!

Dica # 1: Estude e Aprenda os Conceitos Básicos

Essa dica é interessante, pois todos nós sabemos que, para aprender qualquer coisa, precisamos aprender os conceitos básicos. Porém, muita gente acaba pulando essa parte que é tão importante.

Vamos comparar um estudo de uma nova linguagem de programação em aprender um novo idioma. Quando vamos aprender um novo idioma, procuramos sempre aprender coisas básicas, para depois, de muita prática, conseguirmos aprender coisas mais avançadas sobre aquele idioma.

O mesmo acontece quando queremos aprender uma nova linguagem de programação. Não adiantará de nada querer aprender um framework/lib novo em JavaScript, seja ele: React, Angular ou Vue, se não soubermos a base do JavaScript. (essa dica serve para qualquer outra linguagem de programação que você deseja aprender!!). Se pularmos os conceitos básicos, não entenderemos o escopo principal da linguagem e por consequência, não prosseguiremos com os estudos.

O que engloba os conceitos básicos? Envolve aprender: variáveis, tipos de dados, funções, estruturas de repetição (for, for in, while) - como e quando usar cada um deles, estruturas de decisão, escopos locais e globais, entender a estrutura do ES5 e ES6 entre outros assuntos básicos.

Outro ponto importante a mencionar, procurar entender como a Web funciona, entender como funciona as requisições HTTP e entender como a internet funciona. Por que? Porque JavaScript é uma linguagem voltada para WEB e de fato você vai precisar entender esses conceitos também.

Mas, onde eu posso encontrar materiais para aprender esses conceitos básicos de JavaScript e WEB?

Um ótimo lugar para aprender, desde o básico ao avançando sobre JavaScript e WEB é a documentação do developer mozilla. Para quem não conhece, super recomendo o link abaixo:

👉 Documentação JavaScript - Mozilla

O mais legal dessa documentação é que ela está toda em português!! Não tem como não aprender!

E para aqueles que não curtem ler, mas preferem aprender por vídeo, recomendo um curso que nós aqui na Microsoft, criamos com a intenção de desmitificar e ajudar àquelas pessoas que queiram aprender JavaScript de uma forma: simples, prática e direta! Esse conteúdo aborda desde conceitos simples à intermediários. E, é um excelente "ponta pé" para dar um starter na linguagem!
Você pode encontrar os mais de 40 vídeos no link abaixo. Pois no repositório, procurei ordenar e organizar da melhor forma possível a vocês e melhor: contendo os próximos passos para aprimorar no mundo JS!

glaucia86 / js-101-beginners-ms

Repositório responsável por todos os códigos desenvolvidos durante a Série para Iniciantes em JavaScript

Série de Vídeos para Iniciantes em JavaScript

Uma série de vídeos ensinando conceitos Básicos a Intermediários da linguagem mais usada do planeta: JavaScript!

Se você nunca teve contato com a Linguagem e deseja aprender, essa série é para você! E, se você é uma Pessoa Desenvolvedora que já conhece a linguagem, mas gostaria de rever alguns conceitos pontuais, essa série também é para você!

Nosso objetivo é ajudar a mostrar os conceitos suficientes sobre JavaScript para fornecer a base necessária para começar a trabalhar com tutoriais focados em frameworks e SDKs usando JavaScript.

Aqui estaremos te ensinando toda a sintaxe relacionada a JavaScript! Como por exemplo: funções, loops, variáveis lógica booleana e tantos outros tópicos abordados!

Durante essa série, estaremos usando o Node.js para executar os códigos criados durante a série em vez de usar o navegador. Embora quase todo o código que usamos funcione em ambos os locais, todas…

View on GitHub

E por último, uma dica muito legal e que cheguei a compartilhar no meu twitter é um site onde você pode aprender JavaScript de maneira dinâmica e melhor: online. O legal é que, conforme você for passando de lição, há inúmeros exercícios para você fazer. Vejam como é legal:

👉 Link do Site

Dica # 2: Pratique, pratique e pratique!

Não tem jeito. A melhor maneira de você se tornar bom, independente da linguagem que você estiver estudando é praticar. Novamente fazendo analogia em aprender um novo idioma, a gente só começa a se sentir mais confortável e mais confiantes ao falar com um estrangeiro se começarmos a praticar, certo?

Da mesma forma acontece quando estamos aprendendo uma nova linguagem de programação. E com JavaScript não será diferente.

O que eu recomendo nessa segunda dica? Depois de entender a sintaxe e os conceitos básicos do JavaScript, agora é o momento de aprender algoritmo e estrutura de dados.

Talvez vocês podem falar: ‘Ah Glaucia… mas são tantos os algoritmos…” Sim é verdade e tenho que confirmar. Mas, assim como aprender um novo idioma você precisa ter paciência, da mesma foram será com uma nova linguagem.

O que eu recomendo a todos fazer é: dedique 1h/dia para estudar ou fazer algum desafio de algoritmo em JavaScript. Não parece, mas podem ter certeza que no final fará toda a diferença para você.

Ah… e lembrem-se de uma coisa: qualidade é melhor que quantidade. Assim que, não adianta ficar estudando, tipo um dia, 8 horas seguidas em JavaScript e depois não pegar mais naquele assunto. O que vale mesmo é a qualidade de seus estudos. Estudem poucas horas por dia. Mas, procurem manter a rotina! #ficaadica
Mas, onde eu posso encontrar recursos para aprender algoritmo e estrutura de dados em JavaScript?

Recomendo o vídeo abaixo que já aborda: Estrutura de Dados e Algoritmos em JavaScript:

E dois sites que eu super recomendo também são:

CodeWars
HackerRank

Ambos trabalham com desafios diários em diferentes linguagens, incluso JavaScript. Vale a pena dar uma olhada!

Dica #3: Estude Javascript com um Livro

Para muitos, ler um livro pode parecer tedioso. Mas, chega uma hora que vamos precisar dele. Da mesma forma que, quando aprendemos um novo idioma vamos precisar recorrer ao dicionário ou algum livro de gramática daquele idioma.

Mesma coisa acontece quando estamos aprendendo uma nova linguagem de programação. Temos que sair do ‘leitinho’ e começar a ‘comer coisas mais sólidas’. E o que seriam essas ‘coisas mais sólidas’? Seriam os livros! Há inúmeros livros que são extremamente recomendados para aqueles que estão aprendendo JavaScript. Para citar alguns aqui:

braziljs / eloquente-javascript

Tradução do livro Eloquent JavaScript - 2ª edição.

JavaScript Eloquente - 2ª edição

Uma moderna introdução ao JavaScript, programação e maravilhas digitais.

Conteúdo do Livro

Introdução

Valores, Tipos e Operadores - (Parte 1: Linguagem)
Estrutura do Programa
Funções
Estrutura de Dados: Objeto e Array
Funções de Ordem Superior
A Vida Secreta dos Objetos
Prática: Vida Eletrônica
Erros e Manipulação de Erros
Expressões Regulares
Módulos
Prática: A Linguagem de Programação
JavaScript e o Navegador - (Parte 2: Navegador)
O Document Object Model
Manipulando Eventos
Projeto: Plataforma de Jogo
Desenhando no Canvas
HTTP
Formulários e Campos de Formulários
Projeto: Um Programa de Pintura
Node.js - (Parte 3: Node.js)
Projeto: Website de Compartilhamento de Habilidades

Status Geral do Projeto

As informações sobre o status e log de cada capítulo estão organizadas nessa issue.

Atualmente, estamos melhorando o que já está traduzido, focando na qualidade e precisão da tradução e entendimento do texto como um…

View on GitHub

👉 You Don’t Know JS (gratuito)

👉 Segredos do Ninja JavaScript (pago)

Leia o livro e só passe para o próximo capítulo depois que você realizar os exercícios e de fato entender o que estudou. Se não entendeu, não passe a frente. Tente entender, pesquise e depois que entender, aí sim, prossiga para o próximo capítulo. #ficaadica

Dica #4: Entenda Programação Assíncrona em JS & DOM

É de extrema importância entender a programação assíncrona, uma vez que JavaScript usa e abusa em uso de funções assíncronas.

Para esse tipo de tema recomendo os três links abaixo:

👉 Funções assíncronas

São materiais simples e que não demandam tanto tempo. Porém, de grande ajuda a todos!

E com respeito ao DOM?! Também é muito importante ter o domínio do DOM, se você deseja se tornar ninja em JavaScript. Por que? Pois o DOM (Document Object Model) é a melhor maneira para manipular páginas em HTML, especialmente para aqueles que trabalham como Front-End é fundamental saber o DOM.

Alguns materiais interessantes para aprender bem o DOM:

👉 JavaScript HTML DOM

Dica #5: Mãos na Massa — Desenvolva Projetos

Depois de passar pelas dicas anteriores, agora você estará mais apto para poder desenvolver projetos pessoais que estejam relacionados a JavaScript.

O que eu sempre recomendo nas minhas palestras é que toda Pessoa Desenvolvedora criem uma conta no GitHub. Por que? Há empresas, principalmente do exterior, logo que acabam de ver o seu currículo, em seguida já olham o seu portfólio no GitHub. Com qual objetivo eles fazem isso? Para verem o que você tem desenvolvido, quais os cuidados que você tem em desenvolver um projeto e se você apoia algum projeto open source.

Se você, que está lendo esse artigo aqui, ainda não possui uma conta no GitHub. Não tem problema. Crie ela hoje! Abaixo vou deixar o link para vocês:

👉 GitHub Page

E o melhor lugar para você hospedar os seus projetos pessoais é justamente no GitHub. Mas, talvez você fale: “Ah, Glaucia, mas eu não tenho conhecimento em Git.” Não tem problema também. Há excelentes cursos gratuitos sobre Git e GitHub que vocês podem fazer. Abaixo recomendo alguns muito bons!

👉 Curso Grátis de Git - Microsoft Learn

👉 Curso Grátis de GitHub: Complete - Microsoft Learn

👉 Curso: Git & GitHub para Iniciantes ~ William Justen

👉 Criar um site simples usando HTML, CSS e JavaScript

Desenvolver projetos é a melhor maneira de você mostrar ao mundo o que você aprendeu e vai te ajudar também a melhorar cada vez mais as suas habilidades com JavaScript. Sem contar que é a melhor maneira de praticar.

Assim que, mãos na massa e comece a desenvolver muitos projetos.

Dica #6: Aprenda POO para JavaScript

Outro ponto muito importante e que com certeza em algum momento quando estiver programando em JavaScript você vai se deparar é com Programação Orientada a Objetos com JavaScript.

Procure entender, o que é, como funciona e como fazer. Por que? Pois POO em JavaScript é totalmente diferente do conceito de POO, por exemplo em C#, Java, PHP, Python e outras linguagens que possuem conceito de POO. Pois como JavaScript é uma linguagem de multiparadigma (funcional + imperativa + scripts), acaba sendo bastante diferente das demais outras linguagens que conhecemos.

Mas, se ela possui suporte à programação funcional, por que então devo aprender POO para JavaScript? É uma excelente pergunta. Mas, devido ao JavaScript moderno, sem contar depois do ES5/6, começamos a ver paradigmas de POO sendo adotadas em JavaScript.

Onde eu posso aprender POO com JavaScript? Abaixo alguns links que podem te auxiliar nesse estudo:

👉 Introdução ao JavaScript Orientado a Objeto

O vídeo acima é excelente e são apenas 1h de vídeo explicando como aprender POO com JavaScript e melhor com os conceitos de ES5 & ES6.

Dica #7: Aprenda Programação Funcional

Como dito na dica #6, JavaScript é uma linguagem de programação de multiparadigma e que possui suporte à programação funcional. Logo, também é de extrema importância aprender a programação funcional.

Quando você aprende a programação funcional, você aprende a codar e entender melhor os conceitos principais das linguagens, pois a programação funcional te ajuda a evitar fazer uso de mudança de estados e dados mutáveis. E sem contar que, a Programação Funcional enfatiza funções matemáticas e com isso ela acaba se tornando de grande ajuda em casos quando precisa desenvolver um determinado projeto que precisa fazer uso de cálculos e alocação demasiado de memória.

Abaixo listo alguns links importantes para aprender Programação Funcional com JavaScript

👉 An introduction to Functional Programming with JavaScript

Já estamos chegando na reta final da nossa lista. Quais seriam os Top 3?! Vamos ver agora!

Dica #8: Aprenda Padrões de Projetos em JavaScript

Se você chegou até aqui é porque você está terminando o seu treinamento e está perto de se tornar um Ninja em JavaScript.

Padrões de Projetos (Design Patterns) é muito importante em qualquer contexto de linguagem que você esteja se especializando ou trabalhando.

Pois, quando você tem arraigado os principais conceitos de Padrões de Projetos, você saberá definir a melhor arquitetura do projeto para uma determinada situação.

Querem aprender Padrões de Projetos (Design Patterns) em JavaScript? Abaixo listo alguns links bastante interessantes e que valem dar uma bela olhada:

👉 The Facade Pattern

👉 JavaScript Design Patterns

👉 Build A Simple Javascript App The MVC Way

Dica #9: Aprenda um Framework/Lib JavaScript

Agora que você está chegando ao final e já aprendeu tudo o que de fato precisa para ser um Ninja em JavaScript, agora sim, você pode aprender um framework/lib em JavaScript.

Há vários frameworks/lib do mercado. Entre eles: Angular, React & Vue.js. Não faça a besteira de querer aprender todos de uma vez! Procure aprender e se especializar em um framewrok/lib! Pois, estudando um dos 3 principais do mercado, você terá facilidade em aprender ou fazer migração (se for o caso) para um outro framework ou lib.

Abaixo estarei listando os principais cursos de: Angular, React & Vue.Js

Cursos de Angular

glaucia86 / tutorial-crud-mean

Repositório responsável pelo tutorial realizado no canal do youtube

Tutorial CRUD MEAN com Angular 8 com Azure by Glaucia Lemos

Repositório responsável pelo tutorial realizado no meu canal do Youtube

O que eu vou aprender?! 📙

Durante o tutorial, você aprenderá a desenvolver uma aplicação que consiste em realizar um cadastro de um Funcionário para uma empresa XYZ. A qual, usaremos as operações CRUD (Create, Read, Update & Delete). A aplicação estará integrada com o Back-End(Node.js) e estará hospedada na plataforma Cloud da Microsoft - Azure.

Os dados do Funcionário consiste em:

Classe: Funcionario

idFuncionario: (number - guid gerado pelo MongoDb)
nomeFuncionario: string
cargo: string
numeroIdentificador: number

Recursos Utilizados no Desenvolvimento da Aplicação 💻

Visual Studio Code DOWNLOAD AQUI
Node.js DOWNLOAD AQUI
Angular CLI ~ 7.2.2 DOWNLOAD AQUI
Mongodb Community Server DOWNLOAD AQUI
MongodB Compass GUI DOWNLOAD AQUI
Boostrap 3/4 DOWNLOAD AQUI
Cadastro no Site Azure AQUI
Postman DOWNLOAD AQUI

Ementa do Workshop: ✏️

Breve Introdução sobre MEAN
O…

View on GitHub

👉 Documentação do Angular

👉Aprenda a Depurar uma Aplicação Angular no Vs Code

Cursos de React

👉 Documentação do React

👉 Aprenda a Depurar uma Aplicação React no Vs Code

👉 Curso Grátis de React - Microsoft Learn

Cursos de Vue.js

👉 Curso Grátis Vue.Js - Microsoft Learn

glaucia86 / vuejs-workshop

Repositório responsável pelos workshops de Vue.js com Azure App Service

Workshop - Vue.js com Azure

Repositório responsável pelos workshops de Vue.js com Azure.

Recursos Utilizados 🚀

Conta - Azure for Students ⭐️

Caso você seja um(a) estudante de alguma Instituição de Ensino de Faculdade ou Universidade, poderá criar sua conta no Azure for Students. Essa conta te dará o benefício em possuir crédito de USD 100,00 para usar os serviços de maneira gratuita, sem necessidade de possuir um cartão de crédito. Para ativar essa conta, bastam acessar o link ao lado: AQUI

Pré-requisitos 📌

Para a realização dos workshops de Vue.js, se faz necessário ter noções de: HTML, CSS & JavaScript. Pensando nisso, estou disponibilizando abaixo dois cursos grátis de:

View on GitHub

👉 Documentação do Vue.js

👉 Aprenda a Depurar uma Aplicação Vue.Js no Vs Code

Já no lado do Back-End (ou até mesmo no lado do Front-End) eu recomendaria fortemente também aprenderem TypeScript. Se desejarem, eu estou criando uma super playlist sobre TypeScript e elaborada em conjunto e ajuda do próprio time do TypeScript! Confiram aqui abaixo:

glaucia86 / curso-typescript-zero-to-hero

Repositório responsável pelo Curso de TypeScript - Zero to Hero

Curso TypeScript - Zero to Hero

Repositório responsável pelo Curso de TypeScript - Zero to Hero!

Todo o treinamento foi elaborado pela Comunidade para a Comunidade! Assim sendo, distribuindo o conhecimento de maneira totalmente gratuita à todas as Pessoas Desenvolvedoras.

Toda a emenda do treinamento, foi baseada na Documentação oficial do TypeScript! Pois, não existe melhor lugar para estudar e entender uma determinada stack ou linguagem com ajuda da documentação oficial!

📌 Pré-Requisitos

Para a realização desse curso, se faz necessário já possuir conhecimento prévio em JavaScript e Node.Js

Caso não tenha, estamos disponibilizando abaixo, alguns treinamentos prévios, antes de começar a estudar o Curso de TypeScript - Zero to Hero

✅ Curso Grátis TypeScript - Microsoft Learn
✅ Curso Grátis JavaScript - Para Iniciantes
✅ Curso Grátis Node.Js - Microsoft Learn
✅ Curso Grátis Node.Js [Vídeo]

🏃 Colaboradores

Nesse projeto que estamos desenvolvendo para toda a Comunidade Técnica…

View on GitHub

Dica #10: Apoie Projetos Open Source

A melhor maneira de você dar continuidade e não ficar parado no tempo é justamente por procurar apoiar Projetos Open Source.
Além do que, você estará em contato com os grandes feras do mundo JavaScript e melhor: poderá ajudar em algum Pull Request enviando alguma feature. Você irá aprender com eles, você aprenderá consigo mesmo e melhor: ajudará a Comunidade técnica.

Outro ponto a ser mencionado aqui: você não precisa ser um gênio para poder ajudar ou apoiar um projeto open source. Eu por exemplo, tenho ajudado nas traduções do Nodejs.org & do Reactjs.org. Claro que, se você se sentir à vontade e deseja enviar um PR de alguma feature que precisa ser melhorada de alguma lib, ótimo! Mas, se não for o caso, não se hesite em ajudar!

Mas, onde eu posso apoiar Projetos Open Source em JavaScript? Abaixo deixarei um curso como você pode ajudar uma determinada biblioteca open source em JavaScript e uma lista de diversos projetos Open Source que você pode ajudar:

Palavras Finais

Ufa! Chegamos ao fim da nossa lista! Lembre-se: Qualidade é melhor que quantidade. Sei que há muita coisa aqui para estudar. Mas, se você se dedicar, por exemplo 1 hora por dia para estudar os materiais que postei aqui, num prazo de 15 a 18 meses, você com certeza se tornará um(a) Ninja em JavaScript.

Só uma última ressalva: estou preparando uma série de artigos sobre Algoritmos e Estrutura de Dados em JavaScript. Onde cada semana, estarei explicando detalhadamente, em exemplos, cada um deles. Querem ficar por dentro dessa nova série?! Se sim, me seguem no twitter, pois esse ano vai vir muitas novidades e estarei atualizando todos vocês por meio do meu twitter. Não querem perder nenhuma nova notificação? Então… me sigam lá no twitter, beleza?! 😃

Ah! Já ia esquecer de falar aqui! Não deixem de se inscrever no meu Canal do Youtube! Estou criando inúmeras séries incríveis lá no meu canal!

Só como spoiler, teremos:

😃 Uma série incrível de Vs Code
😃 Curso Gratuito de TypeScript
😃 Tutoriais semanais de Node.js & JavaScript
😃 E muitos Live Codings

Se são conteúdos que você curte, então não deixa de se inscrever e ative o sininho para ficar sabendo quando teremos vídeo novo! Essa semana já teremos um baita tutorial para todos vocês!