Awesome Open Source
Awesome Open Source


It's a repository of JavaScript (JS) programming 📜

I created this repository for my JavaScript Full-Stack development learning.

Prerequisites and repositories:

  • Good domains in English;
  • Programming logic;
  • Programming paradigms;
  • HTML, CSS, SVG, Sass, Bootstrap;
  • Databases, SQL language and No-SQL;
  • HTTP methods and APIs
  • Desire to learn.

Links de Apoio:

Promises

JavaScript training:

🐒 Paradigmas de desenvolvimento de software

Hoje em dia, o desenvolvimento de sistemas se baseia em vários e diferentes paradigmas, tais como os listados a seguir:

  • Imperativo (Procedural): Segue sequências de comandos ordenados segundo uma lógica.
  • Funcional: Trabalha com a divisão de problemas através de funções, que resolvem separadamente problemas menores e que, ao serem organizados, resolvem o problema como um todo.
  • Lógico: Voltado ao desenvolvimento de problemas de lógica e usado em sistemas de inteligência computacional.
  • Orientado a Objetos (OO): Define um conjunto de classes para dividir o problema e realiza a interação entre as diferentes classes para também resolver o problema como um todo.

📜 The History of JavaScript (JS)

Em maio de 1995, Brendan Eich, que trabalhava na Netscape, desenvolveu uma linguagem de programação em apenas 10 dias. A linguagem era bem simples, com o intuito de atrair novos programadores para ela.

O nome dessa linguagem inicialmente foi Mocha, que é o nome de um tipo de café. Logo esse nome foi alterado para LiveScript. Em maio de 1995 também estava surgindo uma nova linguagem de programação que prometia revolucionar o modo de programar: Java, da Sun MicroSystems. Seu objetivo era nos poupar do trabalho de programar para cada um dos sistemas operacionais. Escreva uma única vez, execute em qualquer lugar (Write once, run anywhere.).

Curiosidade: O JavaScript foi lançado junto com a versão beta do Netscape 2.0.

Para aproveitar o marketing, o LiveScript teve seu nome alterado para JavaScript em 4 de dezembro de 1995. Isso causou confusões que existem até hoje para quem está começando no mundo da programação, pois pela semelhança do nome, muitos pensam que é a mesma coisa, ou que o JavaScript é uma versão mais simples do Java. Porém, foi apenas uma jogada de Marketing.

🕰️ JavaScript (JS) Timeline

📜 JavaScript (JS)


O JavaScript (JS) é uma linguagem de programação dinâmica, que é comumente utilizada como parte dos navegadores, criada para esse propósito, manipular elementos no HTML. Mas acabou crescendo, e atualmente podemos ver diversos ambientes que rodam JavaScript, além de desenvolver para os mais variados fins, como extensões para aplicações, desenvolvimento híbrido para desktop ou mobile e até mesmo códigos back-end.

Quando falamos de linguagens de programação, percebemos que estas se parecem como times de futebol, cada desenvolvedor gosta de uma e acredita na qualidade que ela oferece, mas nenhuma delas consegue assumir uma característica que JavaScript assumiu: a "onipresença" em aplicações. Amando ou odiando, ele está em todos os lugares, é difícil escapar. Uma linguagem que muitas vezes é julgada como simples brinquedo de front-end, criando firulas para os olhos de usuários leigos, na verdade, é uma grande ferramenta. A web atualmente está infestada de códigos JavaScript. Os recursos oferecidos por muitos dos sites que acessamos são controlados por ele, desde a mais simples interação com formulários, até mesmo grandes plataformas como Google Docs, foram desenvolvidas com base nos recursos dessa linguagem. Aprender esta linguagem se torna essencial, uma grande ferramenta para auxiliar o desenvolvimento.

Além disso, a linguagem apresenta características incomuns à maioria dos desenvolvedores que estão acostumados com Java ou C#. O JavaScript não apresenta classes do mesmo modo que as outras linguagens e funções estão em todos os lugares, fazendo todos os serviços possíveis, desde criar novos objetos até retornarem novas funções. A linguagem apresenta uma sintaxe simples que facilita o aprendizado, mas também apresenta um comportamento diferenciado das demais, afinal, um objeto que pode ter atributos adicionados ou removidos em tempo de execução de forma simples não é algo comum ao dia a dia de desenvolvedores de outras linguagens. Essa simplicidade esconde o quão poderoso podemos tornar nosso desenvolvimento, e a primeira vista, muitos desenvolvedores olham e acreditam que a linguagem é defeituosa ou esquisita, mas não compreendem o real poder que se esconde por trás desta simplicidade.

Por fim, que venha o JavaScript, uma linguagem flexível que consegue se aproximar de muitas outras, mas que em sua essência é completamente diferente. Sendo assim vamos aprender o que realmente ela tem a nos oferecer, e perceber quão poderosa ela pode se tornar dentro de nossas aplicações.

Diferente da linguagem HTML, a linguagem JavaScript corresponde à programação orientada a objetos, isto significa que todos os elementos de uma página da Web são tratados como objetos. Estes objetos são agrupados de acordo com seu tipo ou finalidade.

Hello, World! - JavaScript

console.log("Hello, World!");

O console.log no JavaScript salva vidas! Você irá utilizar muito esse comando.  

📒 ECMAScript (ES)


Outro nome muito conhecido entre os desenvolvedores é o ECMAScript (ES), derivado dos anos de 1996 e 1997 quando a organização European Computer Manufactures Association (ECMA) padronizou a linguagem, surgindo assim às versões de ECMAScript.

Essa padronização define a estrutura da linguagem, seus comandos, como ela deve se comportar, etc. Baseando-se nessas especificações, os desenvolvedores dos navegadores sabem o que um interpretador de JavaScript deve ter e como deve responder aos comandos. Baseando-se nessas especificações, outras linguagens também surgiram, como o JScript, ActionScript e TypeScript.


👍 Dica: O nome JavaScript e ECMAScript definem a mesma linguagem, então podem ser usados livremente como sinônimos.

🍦 Vanilla JavaScript

⚛️ A presença do JavaScript atualmente

Hoje em dia, quando você visita uma página e vê elementos interagindo com você, seja uma modal pop-up aparecendo na tela, um carossel de imagens, uma janelinha abrindo, uma resposta ao clique do mouse, animações, etc, pode ter certeza que há um código JavaScript sendo executado ali.

O JavaScript ainda era um pouco complicado de se usar antigamente. Então, no início dos anos 2000, várias bibliotecas com o intuito de facilitar o uso do JavaScript surgiram, como jQuery e Prototype.

🔃 AJAX (Asynchronous JavaScript And XML)


Em 2004 começaram a aparecer aplicações web, como o Gmail da Google. Ele usava uma técnica chamada AJAX (Asynchronous JavaScript And XML), a qual permite enviar e receber dados de um servidor sem ter que recarregar a página inteira, apenas os dados são trafegados e então são inseridos no meio do HTML.

☄️ jQuery


Para ser mais preciso o jQuery é um Framework JavaScript para Front-end com uma grande facilidade de manipular o DOM e de código simples, muito usado para criar animações, eventos, chamadas AJAX e ainda cria plugins. Pode ser baixado no site oficial ou usado pelo CDN (Content Delivery Network), para isso basta copiar um dos códigos (escolha apenas uma versão) e colar no seu código HTML. Recomenda-se a versão 3 do CDN.

🚘 V8


Em setembro de 2008 a Google lançou seu navegador, o Google Chrome. O Chrome tem um interpretador de JavaScript muito poderoso, o V8. Esse nome é baseado no motor de combustão V8, que tem esse nome por ter 8 cilindros unidos na parte de baixo, formando um "V". São normalmente usados em automóveis de grande porte, embarcações marítimas, aeronáuticas, etc.

O V8 "compila" o JavaScript, mas por trás ele executa C++. Assim, o JavaScript ganhou muita velocidade, próximo a um código binário compilado.

🟩 Node.js


Em 2009, Ryan Dahl desenvolveu o Node.js. O Node usa o V8 fora do navegador, e possui muitas outras funcionalidades que nos permite programar com JavaScript no lado do servidor. Com o Node foi possível a criação de coisas como automatizadores de tarefas e criação de servidores em JavaScript.

Empresas grandes começaram a migrar de linguagens como Ruby e Java para o Node.js, como é o caso do PayPal, Yahoo!, eBay, Linkedin e Trello. Todas elas afirmam que conseguiram desenvolver em menos tempo, com menos linhas de códigos e que seus sistemas agora possuem um melhor desempenho.

🧭 NW.js


O Node Web-Kit, ou simplesmente NW.js é uma aplicação em tempo de execução baseado em Chromium e Node.js, com ele é possível desenvolver aplicativos nativos para Windows, Linux e Mac, usando tecnologias web e usufruindo dos pacotes do Node.js.

Foi construído no Centro de tecnologia de código aberto da Intel combinando a estrutura Node.js. com um mecanismo Chromium (anteriormente conhecido como Webkit).

Graças à combinação Node.js e Chromium, você pode criar um aplicativo que não apenas carrega um site local em uma janela de aplicativo, mas também se conecta ao sistema operacional por meio da API JavaScript. Esta solução permite controlar parâmetros como dimensões da janela, barra de ferramentas e itens de menu , além de fornecer acesso aos arquivos do computador local.

O NW.js não tem opinião e oferece a liberdade de escolher estruturas e bibliotecas que você deseja usar em um projeto. Permite chamar os módulos Node.js. diretamente do DOM, suporta todos os recursos do navegador, fornece proteção de fonte JavaScript e está disponível no Linux, Mac OS e Windows.

Para ter uma ideia do que é possível fazer com ele visite o site:

:electron: Electron


O Electron é um framework de código aberto criada inicialmente pelo editor GitHub for Atom em 2013. Essa biblioteca permite criar aplicativos GUI de desktop com tecnologias da web como JavaScript, HTML e CSS.

A vantagem significativa dessa solução é que não há necessidade de um desenvolvedor web JavaScript aprender novas tecnologias ou idiomas para criar um aplicativo de desktop. O aplicativo Electron geralmente reutiliza a lógica comercial, o design e a estrutura geral de um aplicativo Web. É uma ótima maneira de economizar tempo e dinheiro no lado comercial e de desenvolvimento.

Se você é um desenvolvedor de JavaScript, precisará aprender algumas coisas relativamente simples sobre como o Electron funciona e sua API. Provavelmente, você poderá configurar seu primeiro aplicativo de desktop Electron em apenas alguns dias.

O elétron é uma tecnologia madura com uma comunidade em crescimento e, portanto, cria um ótimo ambiente de produção. Graças à renderização da interface do usuário do mecanismo Chromium, você obtém acesso a ferramentas como Developer Tools e Storage Access.

🕹️ Phaser


O Phaser é um dos maiores pacotes de criação de games (Engine) de JavaScript. Existem outras Engines que também compilam o JavaScript como a Unity, Construct 2 e 3 ou Game Maker, porém isso fica a gosto do desenvolvedor, use aquela que você mais se familiariza!

🤪 Processing.js


Processing.js é uma porta JavaScript descontinuada de Processing, uma estrutura projetada para escrever visualizações, imagens e conteúdo interativo. Ele permite que os navegadores da web exibam animações, aplicativos visuais, jogos e outros conteúdos gráficos ricos sem a necessidade de um miniaplicativo Java ou plugin Flash.

Um exemplo de aplicação feita com Processing.js são os emojis interativos e animados do Facebook, como o amei, grr, triste, haha, uau, like e um bônus.

🧙‍♂️ Browserify


🎯 Require.js


🧸 Puppeteer


📜 JSS


🐗 Grunt


🐠 Babel


O Babel.js é um famoso transpilador JavaScript, muito utilizado na linguagem pelas suas bibliotecas e frameworks. O Babel é um compilador criado por Sebastian McKenzie em 2014 para converter o ES6 para ES5 (originalmente chamado de 6to5).

Desde então, tornou-se uma cadeia de ferramentas que permite aos desenvolvedores escrever qualquer JavaScript de próxima geração e serve como campo de testes para propostas do TC39, o comitê técnico que especifica o ECMAScript. O Babel também pode converter a sintaxe JSX e remover anotações de tipo do Flow e do TypeScript. Babel é construído a partir de plugins. Componha seu próprio pipeline de transformação usando plugins escritos pela comunidade ou escreva o seu próprio.

⚡ Flow


🟦 TypeScript (TS)


🟪 ESLint


Antes de entender o que é o ESLint, você precisa aprender o conceito de Lint. O Lint ou Linter é um software responsável por analisar o software de um programa de forma estática, conhecido como um "dedo duro de códigos", apontando possíveis erros, bugs ou codificações mal-feitas como fora de padrão ou estilo de código.

Portanto, o ESLint é um utilitário linting conectável para JavaScript e JSX.

🐹 Ember


⚛️ React.js


Next.js


Redux


Gatsby


🛡️ Angular.js


🅰️ Angular


✌️ Vue.js


O Vue.js é um framework JavaScript progressivo, você consegue utilizar ele em conjunto com outros frameworks ou com uma aplicação de grande porte, cujo o Vue.js entrega a melhor performance.

🧊 Webpack


O Webpack é um empacotador que pega módulos com dependências e cria conteúdos estáticos para produção.

🥤 Gulp


🃏 Jest


⚫ Cypress


🤖 Apache Cordova


🔵 Ionic


⚛️ React Native


🦕 Deno


🦁 Nest JS


☕ Mocha


🍵 Chai


🗑️ js-bin


🦎 RxJS



📚 Bibliotecas JavaScript

highlighter.js


🐋 JavaScript no Docker

☸️ JavaScript no Kubernetes


☁️ JavaScript em Cloud Computing

JavaScript na AWS - Amazon Web Services

JavaScript na AZ - Microsoft Azure

JavaScript na GCP - Google Cloud Plataform


🏆 A importância do JavaScript para o mundo


Cada vez mais o JavaScript começou a ganhar mais força. Hoje em dia temos várias bibliotecas, frameworks, plugins, etc. O JavaScript não é mais só uma pequena ferramenta para criar interação em sites.

Hoje em dia temos cada vez mais funcionalidades que nos permite ter ainda mais poder com a linguagem, como acesso à câmera e microfone, leitura e edição de arquivos, edição de som e imagem, envio de notificações, modelagem 3D, geolocalização, etc. Grandes empresas usam JavaScript, até mesmo no back-end, como:

  • Google;
  • Microsoft;
  • IBM;
  • Netflix;
  • Uber;
  • Paypal;
  • Linkedin;
  • New York Times;
  • Walmart;
  • Sony;

Hoje ele é utilizado nos mais diversos lugares, como:

  • Websites;
  • Aplicações Web;
  • Desenvolvimento de Jogos Eletrônicos (Videogames);
  • Animações
  • Servidores;
  • Bancos de Dados;
  • Sistemas Operacionais de SmartTvs;
  • Automação de Tarefas;
  • Automação de Testes;
  • Softwares Desktop;
  • Controle de Hardware;
  • IoT - Internet das Coisas;
  • Inteligência Artificial;
  • Desenvolvimento Mobile Multiplataforma (Apps Híbridos);
  • Plugins para programas, como Photoshop.

🗺️ JavaScript (JS) RoadMap

Autor


@IsaacAlves7
Alternatives To Javascript Programming
Select To Compare


Alternative Project Comparisons
Related Awesome Lists
Top Programming Languages
Top Projects

Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
Javascript (1,047,646
Reactjs (160,829
Vue (65,046
Angular (54,892
Json (39,355
Jquery (26,473
Webpack (23,592
Dom (10,544
Babel (8,018
Ajax (7,701
Jsx (4,195
Rxjs (2,759
Requirejs (2,580
Processingjs (23
Javascript Programming (4