It's a repository of JavaScript (JS) 📜

📜 Preparação: Para este conteúdo, o aluno deverá dispor de um computador com acesso à internet, um web browser com suporte a HTML 5 (Google Chrome, Mozilla Firefox, Microsoft Edge, Safari, Opera etc.), um editor de texto ou IDE (VSCode etc.).

📜 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.

Veja abaixo a linha cronológica do JavaScript:

O JavaScript, abreviado como 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 e duck typed (ou fracamente tipado), 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.

Como mencionamos antes, JavaScript é uma linguagem de programação interpretada. Como a maioria das linguagens interpretadas, também é uma linguagem de alto nível (ou seja, relativamente fácil de entender pelas pessoas e nos separando dos detalhes do hardware).

No início dos anos 90, todas as páginas da web eram estáticas. As coisas mudaram em 1995, quando a corporação Netscape contratou Brendan Eich e o encarregou de desenvolver uma nova linguagem para seu produto, o navegador Netscape Navigator. A nova linguagem foi chamada de LiveScript, mas logo depois seu nome foi alterado para JavaScript. A sua principal tarefa era dinamizar os websites, o que permitisse, por exemplo, uma interação mais complexa com o utilizador. E assim começou a carreira do JavaScript.

Em 1996, foi formado o TC39, ou "Technical Committee 39", que é o comitê responsável pela evolução e manutenção da linguagem de programação JavaScript, formalmente conhecida como ECMAScript. O TC39 desempenha um papel crucial na evolução da linguagem JavaScript, garantindo que ela continue a atender às necessidades da comunidade global de desenvolvedores. Através de um processo estruturado e colaborativo, o TC39 desenvolve e aprimora o padrão ECMAScript, que serve de base para uma das linguagens de programação mais populares e amplamente utilizadas no mundo.

A organização TC39 é um comitê dentro da Ecma International, uma organização de padronização que cria normas para sistemas de informação e comunicação. O comitê é composto por representantes de grandes empresas de tecnologia (como Microsoft, Google, Apple, Mozilla), além de especialistas independentes em JavaScript e ECMAScript. O principal objetivo do TC39 é desenvolver e evoluir o padrão ECMAScript, garantindo que ele atenda às necessidades da comunidade de desenvolvedores e avance a linguagem de forma segura e sustentável.

Qualquer membro do TC39 pode apresentar propostas para novas funcionalidades ou alterações na linguagem. Propostas passam por várias etapas de maturidade, conhecidas como "Stages", antes de serem incluídas na especificação final. O TC39 se reúne regularmente para discutir propostas, revisar progresso e tomar decisões sobre a inclusão de novas funcionalidades no ECMAScript. Essas reuniões são públicas e as atas são geralmente disponibilizadas online para transparência.

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. ECMAScript é uma especificação de linguagem de script padronizada pela Ecma International. É a base para várias linguagens de script, sendo JavaScript a implementação mais conhecida. ECMAScript é uma especificação que define a linguagem de script usada para implementar JavaScript e outras linguagens relacionadas. Ela evolui continuamente para incluir novos recursos, permitindo que os desenvolvedores escrevam código mais eficiente, legível e poderoso. JavaScript, como a implementação mais popular, segue essas especificações para garantir consistência e compatibilidade em diferentes ambientes e plataformas.

O ECMAScript é uma especificação padrão para linguagens de script, da qual JavaScript é a implementação mais conhecida. Criado inicialmente em 1997, o ECMAScript foi padronizado para proporcionar uma base comum para diferentes implementações de JavaScript.

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

TC39 desenvolve e mantém o padrão ECMAScript, que serve como base para JavaScript e outras linguagens de script. Através de suas reuniões e o processo de proposta, o TC39 assegura que o ECMAScript continua a evoluir, incorporando novas funcionalidades e melhorias. Então, o trabalho do TC39 é crucial para garantir que diferentes implementações de JavaScript permaneçam compatíveis entre si, promovendo interoperabilidade e um ecossistema consistente.

Processo de Propostas do TC39:

Stage 0: Ideia inicial. Uma proposta inicial que pode ser discutida e aprimorada.
Stage 1: Proposta formal. Uma descrição mais detalhada e um caso de uso claro.
Stage 2: Primeira versão do esboço. Uma especificação inicial e uma implementação de referência.
Stage 3: Pronta para a implementação. A proposta está completa e pronta para ser implementada em navegadores e outros ambientes.
Stage 4: Inclusão na especificação final. A proposta é oficialmente incorporada na próxima versão do ECMAScript.

Exemplos de Funcionalidades Introduzidas pelo TC39:

ES6 (ECMAScript 2015): Introduziu grandes melhorias como classes, módulos, arrow functions, let e const, e muito mais.
ES7 (ECMAScript 2016): Adicionou o operador de exponenciação (**) e o método Array.prototype.includes.
ES8 (ECMAScript 2017): Incluiu async/await, Object.entries, Object.values, e melhorias em funções de string.
ES9 (ECMAScript 2018): Adicionou rest/spread properties para objetos, melhorias em async iterators, e muito mais.

Importância para Desenvolvedores:

Inovação e Melhorias: A evolução contínua do ECMAScript significa que os desenvolvedores têm acesso a novas funcionalidades e melhorias de desempenho que tornam o desenvolvimento mais eficiente e agradável.
Padrões Unificados: A padronização facilita o aprendizado e o uso da linguagem, pois os desenvolvedores podem contar com um conjunto consistente de funcionalidades e comportamentos.

História e Evolução do ES:

Origem: ECMAScript foi inicialmente padronizado em 1997 como ECMA-262. Ele foi criado para padronizar JavaScript, que havia sido desenvolvido pela Netscape.
Versões: Desde sua criação, houve várias versões de ECMAScript, cada uma trazendo novas funcionalidades e melhorias. As versões mais significativas incluem:
- ES3 (1999): Primeira versão amplamente adotada.
- ES5 (2009): Introduziu recursos como strict mode, getters/setters, métodos de array (forEach, map, filter).
- ES6/ES2015 (2015): Uma das maiores atualizações, introduziu let/const, classes, módulos, funções arrow, Promises, entre outros.
- Versões anuais (ES2016 em diante): Desde ES2016, ECMAScript é atualizado anualmente, com pequenas atualizações incrementais.

Principais Recursos de ECMAScript:

Tipos de Dados e Estruturas:
- Primitivos: Number, String, Boolean, Undefined, Null, Symbol (adicionado em ES6), BigInt (adicionado em ES2020).
- Objetos: Tudo que não é primitivo é um objeto, incluindo arrays, funções, e instâncias de classes.
Sintaxe e Funcionalidades:
- Variáveis: var, let e const.
- Funções: Declaração de funções, funções anônimas, funções arrow (=>), funções assíncronas (async/await).
- Objetos e Classes: Sintaxe de objetos literais, classes e herança de classes (extends).
- Módulos: Importação e exportação de módulos (import/export).
- Controle de Fluxo: Estruturas de controle como if, else, switch, loops (for, while, do-while).
Metodologias:
- Orientação a Objetos: Classes, herança, encapsulamento.
- Programação Funcional: Funções de alta ordem, imutabilidade, métodos de array como map, reduce.

Implementaçõ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.

JavaScript: A implementação mais amplamente utilizada de ECMAScript. Usada em navegadores web, servidores (Node.js), e outras plataformas.
JScript: Implementação da Microsoft, usada no Internet Explorer.
ActionScript: Usada no Adobe Flash.

🍦 Curiosidade: O termo "Vanilla", traduzido como "baunilha", nada mais é do que um sarcasmo para o JavaScript puro. Ou seja, muitos podem achar que se trata de uma biblioteca, pacote, módulo ou framework, mas não...é o bom e velho JavaScript.

Padrões e Compatibilidade:

ECMA-262: Documento que define a especificação ECMAScript.
Compatibilidade: Nem todos os navegadores ou ambientes suportam todas as funcionalidades de todas as versões de ECMAScript imediatamente. Ferramentas como Babel podem ser usadas para transpilar código moderno para versões mais antigas compatíveis com todos os navegadores.

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 (JS + XML) e remover anotações de tipo do Flow e do TypeScript. Babel é construído a partir de plugins e componha seu próprio pipeline de transformação usando plugins escritos pela comunidade ou escreva o seu próprio.

Flow é um verificador de tipo estático para JavaScript que permite ao desenvolvedor verificar erros de tipo durante o desenvolvimento do código. Isso significa que um desenvolvedor recebe feedback mais rápido sobre o código, que pode ser usado para melhorar sua qualidade. O Flow funciona usando anotações e definições de tipo para adicionar suporte de verificação de tipo ao seu código. A sintaxe é fácil de usar e você pode removê-la rapidamente com uma ferramenta de pós-processador para que não afete seu código. O Flow foi projetado para ajudá-lo a aumentar a confiança em seu código. Se você precisar fazer grandes alterações em sua base de código, o Flow o ajudará a refatorar seu código com segurança.

Portanto, o JavaScript é uma linguagem interpretada típica. Se executarmos um código escrito em JavaScript em um navegador web, como está acontecendo, como depois de carregar a página que estamos lendo (sim, sim, há elementos escritos em JavaScript nesta página também), o interpreter será o JavaScript Engine integrado ao navegador. Esta não é a única maneira de executar código JavaScript.

Exemplo de Código ECMAScript (JavaScript): Aqui está um exemplo que mostra alguns dos recursos introduzidos em ES6:

// Declaração de variáveis
let nome = 'Alice';
const idade = 30;

// Função Arrow
const saudacao = (nome) => `Olá, ${nome}!`;

// Classe
class Pessoa {
  constructor(nome, idade) {
    this.nome = nome;
    this.idade = idade;
  }

// Método apresentar
  apresentar() {
    return `Meu nome é ${this.nome} e eu tenho ${this.idade} anos.`;
  }
}

// Módulo (em um arquivo separado, e.g., modulo.js)
// export class Carro { ... }
// import { Carro } from './modulo';

const pessoa = new Pessoa(nome, idade);
console.log(saudacao(pessoa.nome));
console.log(pessoa.apresentar());

// Output:
//
// 'Olá, Alice!'
// 'Meu nome é Alice e eu tenho 30 anos.'

Vamos analisar o código do ECMAScript acima:

let nome = 'Alice'; Declara uma variável nome usando let, que permite reatribuir o valor da variável posteriormente. Inicializa a variável com a string 'Alice'.
const idade = 30; Declara uma constante idade usando const, o que significa que seu valor não pode ser reatribuído. Inicializa a constante com o número 30.
Função Arrow: Define uma função usando a sintaxe de função arrow (=>). A função saudacao aceita um parâmetro nome e retorna uma string interpolada usando template literals (cercados por crases ``). A string resultante será 'Olá, Alice!' se nome for `'Alice'`.
Classe Pessoa: Define uma classe chamada Pessoa usando a nova sintaxe de classes do ES6.
Construtor: O método constructor é chamado quando uma nova instância da classe é criada. Ele inicializa os objetos com as propriedades nome e idade passadas como argumentos.
Método apresentar: Define um método na classe Pessoa que retorna uma string interpolada apresentando a pessoa com seu nome e idade.
Exportação e Importação de Módulos: Este é um comentário que mostra como você exportaria uma classe Carro de um módulo e como importaria essa classe em outro arquivo. Isto é apenas um exemplo e não é executado no código principal.
Criação de Instância: Cria uma nova instância da classe new Pessoa chamada pessoa, passando nome e idade como argumentos para o construtor.
console.log(saudacao(pessoa.nome));: Chama a função saudacao passando pessoa.nome como argumento e imprime o resultado no console. Se pessoa.nome for 'Alice', o resultado será 'Olá, Alice!'.
console.log(pessoa.apresentar());: Chama o método apresentar na instância pessoa e imprime o resultado no console. Se pessoa.nome for 'Alice' e pessoa.idade for 30, o resultado será 'Meu nome é Alice e eu tenho 30 anos.'.

Então, o output (saída) desse código será 'Olá, Alice!' com uma quebra de linha, seguindo o resultado 'Meu nome é Alice e eu tenho 30 anos.'.

Agora, dando mais ênfase ao JSE - JavaScript Engine, sabemos que ele é um mecanismo que é um componente de software que executa código JavaScript. Os primeiros mecanismos JavaScript eram meros intérpretes, mas todos os mecanismos modernos relevantes usam compilação just-in-time para melhorar o desempenho.

Já falamos um pouco sobre o intérprete e seu papel. Ele funciona como um ambiente de execução para nosso programa. Ele verifica se cometemos algum erro formal, por exemplo, cometer um erro de digitação no nome de uma função ou esquecer de fechar um parêntese, e então executa o programa instrução por instrução.

A escolha do interpretador JavaScript dependerá da plataforma para a qual escrevemos nosso software. Por exemplo, se quisermos escrever uma aplicação simples do lado do servidor, quase certamente escolheremos o ambiente node.js, que teremos que instalar diretamente em nosso sistema operacional. No caso de software do lado do cliente, nosso intérprete será simplesmente o navegador que você já instalou. Aqueles elementos de linguagem que serão igualmente úteis em soluções móveis, do lado do cliente e do lado do servidor. Assim podemos praticá-los em qualquer ambiente, utilizando qualquer intérprete. A maneira mais fácil de fazer isso é limitar-se a um navegador da web.

Como dissemos antes, praticamente todos os navegadores possuem mecanismos (ou interpretadores) JavaScript integrados, mas recomendamos fortemente o uso do Chrome do Google ou do FireFox da Mozilla. Ambos são conhecidos por sua eficiência e ferramentas avançadas integradas para desenvolvedores web (é você). Eles estão disponíveis para Windows, macOS e Linux.

Lembre-se de atualizar regularmente o navegador escolhido e usar a versão mais recente. Isto é especialmente importante ao trabalhar com JavaScript. A linguagem está em constante mudança, com novos recursos e mecanismos sendo adicionados. Você pode descobrir que seu navegador favorito, mas um tanto desatualizado, não oferece suporte a determinados recursos do idioma. Seu navegador agora é uma ferramenta, então tente mantê-lo em bom estado atualizando-o regularmente.

JSE - JavaScript Engine: Este é um motor que executa o código JavaScript, comumente usado em navegadores web para executar scripts em páginas web. Exemplos de motores JavaScript incluem o V8 do Google Chrome, o SpiderMonkey do Mozilla Firefox, Chakra do Microsoft Edge e Internet Explorer, JavaScriptCore (WebKit) que é o motor da Apple para o navegador Safari.

Os mecanismos JavaScript são normalmente desenvolvidos por fornecedores de navegadores da Web, e todos os principais navegadores têm um. Em um navegador, o mecanismo JavaScript é executado em conjunto com o mecanismo de renderização por meio das ligações do DOM - Document Object Model e do IDL da Web. No entanto, o uso de mecanismos JavaScript não se limita a navegadores; por exemplo, o mecanismo V8 é um componente central do sistema de tempo de execução Node.js.

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 a linguagem de programação C++. Assim, o JavaScript ganhou muita velocidade, próximo a um código binário compilado.

Como ECMAScript é a especificação padronizada do JavaScript, o mecanismo ECMAScript é outro nome para essas implementações. Com o advento do WebAssembly, alguns mecanismos também podem executar esse código na mesma área restrita que o código JavaScript normal.

Talvez você já tenha ouvido falar de node.js. Também é um intérprete, mas instalado independentemente dos navegadores como ambiente no sistema operacional do computador (pode ser macOS, Windows ou Linux). Usar node.js permite escrever programas em JavaScript que irão, por exemplo, transformar seu computador em um servidor. Em 2009, Ryan Dahl desenvolveu o Node.js que é um run-time-environment do JavaScript, ou seja, um ambiente de execução do JS, dessa forma ele pode entender a linguagem de programação JavaScript e executar códigos do mesmo, portanto onde for possível instalar o Node.js se torna possível usar o 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.

No início deste parágrafo, simplificamos um pouco as coisas. JavaScript é uma linguagem interpretada – não há dúvida disso. E, de fato, executar um programa escrito em JavaScript parece que estamos executando nosso código-fonte (ou seja, o código que escrevemos) passo a passo. No entanto, você pode encontrar informações sobre essa linguagem e, mais especificamente, sobre intérpretes específicos, que são um pouco diferentes.

A maioria dos mecanismos JavaScript modernos usa a técnica Just In Time Compilation (JIT Compilation). Esta técnica consiste em compilar fragmentos de código durante a execução do programa (mais de uma instrução) e permite aumentar seu desempenho. Entretanto, do ponto de vista do usuário, tal mudança é praticamente imperceptível – ainda parece que apenas o interpretador está executando o código-fonte, instrução por instrução.

Independentemente da linguagem escolhida, algumas coisas permanecem as mesmas durante a escrita do programa. Em primeiro lugar, uma etapa importante e provavelmente a mais difícil deste processo é definir corretamente o problema que queremos resolver. Só então tentamos encontrar a solução ótima, que finalmente apresentaremos na forma de um programa escrito na linguagem escolhida.

Portanto, antes de começar a explicar algo ao computador, ou seja, escrever um programa, você precisa entender exatamente o que deseja alcançar e como deseja alcançá-lo. Em segundo lugar, a solução que propomos e escrevemos na forma de um programa deve ser 100% inequívoca – o computador não consegue adivinhar nada.

Um exemplo simples de uma área um pouco diferente: em algum momento da sua vida, você provavelmente comprou um móvel que exigia montagem. Montá-lo é um problema com o qual você, o comprador, está sobrecarregado. Para que você possa realizar esta tarefa, você receberá um conjunto de instruções para orientá-lo em todo o processo. Você está atuando como intérprete neste momento, usando um programa que lhe permitirá completar a tarefa. O sucesso da sua missão depende da qualidade destas instruções, se são precisas e inequívocas, e não provêm de outro móvel. No final, pode acontecer que você não tenha construído os móveis dos seus sonhos, mas uma construção surrealista de outra dimensão.

Para que as instruções sejam boas, quem as desenvolve deve saber exatamente o que devem ilustrar, em que ordem determinadas ações devem ser realizadas, em quais etapas algo é mais fácil de confundir, e assim por diante. E, claro, eles devem saber qual o efeito a ser alcançado no final.

O Node Web-Kit, ou simplesmente NW.js, foi lançado pela primeira vez em janeiro de 2011. Desenvolvido pela equipe da Intel Open Source Technology Center, NW.js é uma tecnologia que combina Node.js com Chromium para permitir o desenvolvimento de aplicativos desktop usando tecnologias web como HTML, CSS e JavaScript. 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:

https://tangiblejs.com/posts/nw-js-and-electron-compared-2016-edition

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.

Então, o uso de JavaScript em sites, que com o tempo se tornou cada vez mais complexo e muitas vezes contém uma lógica muito sofisticada, é chamado de programação do lado do cliente. O código a ser executado é carregado junto com a página no navegador, por parte do usuário, e o interpretador que faz parte do navegador permite sua execução.

Hoje, JavaScript é a única linguagem suportada por todos os principais navegadores da web, e cerca de 95% das páginas da web em todo o mundo incorporam código JavaScript neles. Desde o início, as páginas da web usaram JavaScript no lado do cliente para adicionar interatividade e alterar dinamicamente o conteúdo.

Agora é muito mais do que isso, já que o JavaScript oferece muitos frameworks excelentes para construir aplicativos web e redes sociais enormes e complexos (você provavelmente já ouviu nomes de frameworks como React ou Angular ou Vue).

O AngularJS é um framework JavaScript de código-aberto, mantido pelo Google, que auxilia na execução de SPA - Single-Page Applications. Seu objetivo é aumentar aplicativos que podem ser acessados por um navegador web, foi construído sob o padrão model-view-view-model (MVVM), em um esforço para facilitar tanto o desenvolvimento quanto o teste dos aplicativos. A biblioteca lê o HTML que contém atributos especiais e então executa a diretiva na qual esta tag pertence, e faz a ligação entre a apresentação e seu modelo, representado por variáveis JavaScript comuns. O valor dessas variáveis JavaScript podem ser setadas manualmente, ou via um recurso JSON estático ou dinâmico. O AngularJS é construído sob a crença de que a programação declarativa é melhor do que a programação imperativa quando se trata da construção de interfaces com o usuário e da conexão de componentes software, enquanto a programação imperativa é excelente para a escrita de regras de negócio. O framework adapta e estende o HTML tradicional para uma melhor experiência com conteúdo dinâmico, com a ligação direta e bidirecional dos dados (two-way data-binding) que permite sincronização automática de models e views. Como resultado, AngularJS abstrai a manipulação do DOM e melhora os testes.

Objetivos:

Abstrair a manipulação do DOM da lógica do aplicativo. Isto melhora os testes do código.
Considera os testes do aplicativo tão importantes quanto seu desenvolvimento. A dificuldade do teste é diretamente afetada pela maneira como o código é estruturado.
Abstrai o acoplamento entre o lado cliente e o lado servidor da aplicação. Isto permite que o desenvolvimento do aplicativo evolua em ambos os lados, de forma paralela, e permite o reuso de código.
Guia os desenvolvedores através da construção de todo o aplicativo: desde o design de Interface, passando pela escrita das regras de negócio, até chegar aos testes da aplicação.

Angular segue o padrão MVC da engenharia de Software e encoraja o baixo acoplamento entre apresentação, dados e componentes lógicos. Usando injeção de dependência, Angular traz serviços comumente designados ao lado servidor da aplicação, como controllers para os componentes visuais, para o lado cliente da aplicação. Consequentemente, o peso do backend é radicalmente reduzido, levando à aplicações muito mais leves.

Injeção de dependência (Dependency Injection, em inglês) é um padrão de desenvolvimento de programas de computadores utilizado quando é necessário manter baixo o nível de acoplamento entre diferentes módulos de um sistema. Nesta solução as dependências entre os módulos não são definidas programaticamente, mas sim pela configuração de uma infraestrutura de software (container) que é responsável por "injetar" em cada componente suas dependências declaradas. A Injeção de dependência se relaciona com o padrão Inversão de controle mas não pode ser considerada um sinônimo deste. Alguns dos frameworks mais utilizados que fazem uso de injeção de dependência são o Spring, ASP.NET Core, Laravel e o AngularJS.

O Angular é um framework JavaScript reativo mantido pelo Google, utilizado para a construção de aplicações Web modernas. Ele foi construído utilizando TypeScript e sua arquitetura se dá através de componentes que são pequenos grupos de funcionalidades isoladas e independentes. No Angular, um componente é composto, geralmente, por um arquivo TypeScript contendo a classe, comportamentos e atributos do seu componente. Um arquivo de estilização.

O React.js é uma biblioteca e não framework JavaScript (JS), muito usada dentre as demais, para criar aplicações web de interfaces para usuário. O React foi projetado desde o início para adoção gradual, e você pode usar o mínimo ou o máximo de React que precisar. Se você deseja experimentar o React, adicionar alguma interatividade a uma página HTML simples ou iniciar um aplicativo complexo baseado em React. Ao iniciar um projeto React, uma página HTML simples com tags de script ainda pode ser a melhor opção. Leva apenas um minuto para configurar! À medida que seu aplicativo cresce, convém considerar uma configuração mais integrada. Existem várias cadeias de ferramentas JavaScript que recomendamos para aplicativos maiores. Cada um deles pode funcionar com pouca ou nenhuma configuração e permite que você aproveite ao máximo o rico ecossistema React.

O Vue.js é um framework JavaScript progressivo e reativo, 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 para criação de componentes em páginas Web e modelos SPA - Single Page Applications. Ele foi criado na empresa Google a partir do Angular, onde envolvia as partes que Evan Nyu mais gostava no framework e assim criou um framework bem mais leve. O Vue pode ser integrado na parte visual de frameworks back-end como Laravel e Ruby On Rails por exemplo, e logicamente é possível usar o Vue em toda a aplicação ou em SPA - Single Page Applications, usando um ecossistema completo com Core, o Vuex e o Vue-Router.

Tudo isso pode funcionar em diversos equipamentos, desde estações de trabalho de alto desempenho até simples smartphones. Graças ao poder do JavaScript, podemos pedir comida, jogar jogos no navegador, assistir filmes em plataformas de streaming e estar em contato constante com pessoas importantes para nós. JavaScript é tão popular que cada vez mais esforços são necessários para usá-lo, não apenas como uma solução do lado do cliente.

Com o tempo, o JavaScript começou a aparecer em outras áreas, como na programação de partes do lado do servidor de aplicações web complexas, também chamadas de back-end. Estes programas são executados em servidores, processando dados (por exemplo, de bases de dados), que após processamento ficarão disponíveis no lado do cliente. A flexibilidade desta linguagem e a sua relativa simplicidade tornaram-na muito mais aplicável, por exemplo, em aplicações móveis, ou mesmo na programação de UAVs (alguns drones executam programas escritos nesta linguagem).

Curiosidade: JavaScript é uma opção viável para a ciência de dados, especialmente para visualização e desenvolvimento de interfaces interativas. Com o uso das bibliotecas e ferramentas certas, é possível realizar muitas tarefas de ciência de dados de maneira eficiente e eficaz. Embora possa não ser a escolha principal para tarefas intensivas de análise de dados ou machine learning, ele complementa bem outras linguagens e pode ser integrado em pipelines de dados completos.

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.

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.

Hoje ele é utilizado nos mais diversos lugares, como:

Websites;
Aplicações Web;
Audio/Visual;
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.

Para computação em nuvem, podemos fazer o deploy da nossa aplicação JavaScript seja para front-end e back-end, assim como também podemos criar aplicações serverless e combinar elas na nossa infraestrutura. Podemos utilizar o Node.js SDK para criar funções para nossas APIs Serverless, e essas funções podem ser mais de uma, e dessa forma podemos criar microsserviços serverless, juntamente com um API Gateway e um ou mais banco de dados para gerenciar nossa API.

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. Para ser mais preciso o jQuery é um Framework JavaScript para Front-end com uma grande facilidade de manipular o DOM (Document Object Model) 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. Assim, como também, pode ser baixado o pacote de dependência via NPM.

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.

Desvantagens do JavaScript:

Dizemos que JavaScript é uma linguagem madura, o que significa que a maioria dos recursos já está implementada e estável, e provavelmente não veremos grandes mudanças na linguagem. Desde 2015, muitos aspectos do JavaScript mudaram e muitos novos recursos foram adicionados. Muitas dessas mudanças foram introduzidas para facilitar a migração para JavaScript para programadores que conhecem outras linguagens populares, das quais o JavaScript originalmente diferia bastante em certos aspectos, como no manuseio de objetos. Ainda podemos usar a linguagem da maneira antiga, mas é recomendado usar o JavaScript moderno.

Mas... não existem soluções ideais, portanto não existem boas linguagens de programação para todas as aplicações. Cada um deles tem suas próprias limitações e não é diferente com JavaScript. Apesar de sua popularidade e sucesso, JavaScript não é uma linguagem de programação perfeita. Devido à sua natureza, não é adequado para determinadas aplicações. Por exemplo, não faz sentido usá-lo para escrever programas que exijam cálculos matemáticos avançados ou desempenho muito alto.

Algumas limitações se devem ao próprio conceito da linguagem, mas a grande maioria está relacionada à plataforma em que a utilizamos. Isso é especialmente visível ao escrever código para ser executado em um navegador, que como dissemos anteriormente é chamado de lado do cliente. Em tal situação, a funcionalidade do JavaScript é limitada pelo fato de que os navegadores, por razões de segurança, executam código de script em um ambiente sandbox (um ambiente separado do mundo exterior), que não permite acesso a arquivos e recursos locais ( ou seja, aqueles arquivos que estão no computador onde o navegador é iniciado).

Outro inconveniente é que, como o código não é compilado, ele entra no navegador da mesma forma ou de forma muito semelhante à que nós mesmos escrevemos. Por que isso é uma desvantagem? Isso ocorre porque todos podem ver nossa solução de uma forma fácil de ler e usá-la (sejam fragmentos ou mesmo a totalidade) sem nossa permissão para escrever seu próprio programa.

Uma ajuda aqui pode ser a ofuscação de código, que consiste em transformar nosso script pronto em um formato um pouco menos legível (por exemplo, gerando nomes aleatórios curtos de variáveis e funções, eliminando sinais de fim de linha e assim por diante), mas o simples fato é que se alguém quiser roubar nosso código JavaScript, há muito pouco que possamos fazer para impedi-lo.

Vantagens do JavaScript:

Por outro lado, JavaScript tem muitas vantagens sobre outras linguagens de programação, e uma das maiores é uma comunidade muito ativa e de apoio. É fácil encontrar soluções para problemas comuns e encontrar ajuda em geral. Isso também significa que ferramentas que funcionam com JavaScript são desenvolvidas ativamente.

Outra grande vantagem é um grande número de estruturas e bibliotecas prontas para uso que fornecem a maioria das funcionalidades e recursos comumente necessários. A linguagem em si é relativamente fácil de aprender e nos permite focar no trabalho em vez de lutar com a sintaxe (ou seja, a forma de construir as instruções que compõem o código do nosso programa).

Além disso, o JavaScript não exige que você compre ferramentas caras para trabalhar com ele, e ferramentas realmente boas já estão incorporadas ao seu navegador. Por último, mas não menos importante, grandes players como Google, Facebook e Mozilla apoiam ativamente ferramentas JavaScript e seu desenvolvimento.

Porém, o que é uma vantagem para alguns pode ser uma desvantagem para outros. Um exemplo pode ser a característica de digitação dinâmica do JavaScript. Resumindo, consiste no fato de podermos armazenar dados de qualquer tipo em uma variável (uma variável é um contêiner no qual armazenamos os dados que utilizaremos).

Por exemplo, durante a execução do programa, podemos armazenar o número 10 em uma variável, e no próximo passo usar a mesma variável para armazenar a string “abc” (excluindo o valor anterior automaticamente, é claro – não se preocupe se você não entendo agora, porque abordaremos todos esses termos mais tarde).

Geralmente isso é muito conveniente, mas algumas pessoas consideram esse recurso da linguagem uma desvantagem. Na opinião deles, torna mais fácil para um programador cometer erros em determinadas situações. Ao adicionar digitação estática, onde uma variável pode conter apenas um tipo de variável (por exemplo, números) durante a execução do programa, uma nova linguagem chamada TypeScript foi introduzida.

O TypeScript, abreviado como TS, é um superset da linguagem de programação JavaScript, desenvolvido e mantido pela Microsoft. Ou seja, o TS adiciona funções ao JavaScript, como a declaração de tipos de variável, novas funcionalidades ao JS como "Interfaces", verifica os erros antes da execução do código, e por ser mais enxuto ao paradigma OOP no JavaScript, podendo ser usado com frameworks/libs, como Express e React. No entanto, precisa ser compilado em JavaScript, ou seja, não executamos TS.

Obs: Se você usa o TS sem precisar das suas funções ou por causas específicas como superset do JS, ele não é indicado, é prefirível usar o JS puro.

Lembre-se também que se você aprender a programar em uma linguagem, normalmente será muito mais fácil aprender a próxima, que por algum motivo pode ser melhor para resolver um problema específico.

Mas vamos começar agora com JavaScript, que, devido à sua sintaxe flexível e simples, é perfeito para aprender como primeira linguagem.

Há também ambientes online, comumente conhecidos como playgrounds de código, são sites que atuam como um editor simples e um ambiente de tempo de execução. Todos eles têm conjuntos semelhantes de recursos. Eles têm interfaces de usuário diferentes, mas, em princípio, se comportam de maneira semelhante. Eles permitem que você escreva código, execute-o para fins de teste e, na maioria das vezes, compartilhe-o com outros usuários.

No caso do JavaScript, onde a preparação de um ambiente local totalmente funcional se resume à instalação de um editor de código e à execução do navegador, eles não são tão importantes quanto os ambientes de desenvolvimento regulares. Eles são usados principalmente como plataformas de treinamento e teste, ou locais para publicar exemplos de soluções para problemas de programação.

Entre os programadores JavaScript, os mais populares são os seguintes:

Utilizaremos um ambiente online integrado à plataforma de treinamento. OpenEDG fornece um ambiente simples para escrever e executar código em diversas linguagens de programação, incluindo JavaScript. Não se esqueça, porém, que esta plataforma é uma solução puramente didática e de teste, e certamente não pode ser usada como um ambiente de desenvolvimento completo. Porém, é ideal para as nossas necessidades, pois na maioria dos casos poderemos esquecer o ambiente web dos programas escritos em JavaScript, incluindo os elementos HTML. Isso nos permitirá focar apenas no aprendizado da própria linguagem JavaScript.

No entanto, é altamente recomendável que você também configure seu próprio ambiente de desenvolvimento local. Não é difícil, como você descobrirá imediatamente, e permitirá que você faça alguns exercícios de uma forma muito mais próxima de como você faria durante o desenvolvimento normal de software.

Como escrevemos anteriormente, os requisitos de JavaScript para o ambiente de desenvolvimento são muito modestos. Na maioria dos casos, especialmente no início do desenvolvimento, apenas três elementos são suficientes: um editor de código, um interpretador (ou seja, um ambiente inicializável) e um depurador.

Dependendo do nível de sofisticação, da complexidade do projeto escrito ou do ambiente para o qual escrevemos nossos programas (lado cliente, lado servidor, móvel), outras ferramentas também podem ser necessárias.

Serão, entre outros:

Gerenciadores de pacotes (Package managers) – possibilitando o gerenciamento de bibliotecas (contendo soluções prontas que podemos usar em nossos programas) ou componentes do ambiente de desenvolvimento (por exemplo, npm ou yarn).

O NPM (node package manager) é um gerenciador de pacotes lançado no biênio 2009-2010. Tal pacote faz parte da instalação padrão do ambiente de execução da linguagem JavaScript no ambiente Node.js, sendo ambos instalados de forma conjunta.

O YARN (sigla de yet another resource negotiator) foi lançado em 2016 pelo Facebook com outras empresas — entre elas, a Google. Sua criação teve como premissa resolver alguns problemas de segurança existentes no NPM à época, além de tornar mais rápido o processo de instalação de dependências. Outra característica própria do YARN é a forma como a gestão de dependências é realizada: por intermédio de um arquivo de lock denominado yarn.lock, é guardada a versão exata de cada dependência, garantindo, assim, uma igualdade em todas as instalações.

Por mais que o NPM atualmente também dê suporte a tal parametrização, o YARN faz isso de forma automática. Na comparação entre ambos, alguns benchmarks apontam diferenças, vantagens e desvantagens de um em relação ao outro.

Executores de tarefas e empacotadores de módulos (Task Runners and Module bundlers) – usados, em termos simples, para automatizar o processo de desenvolvimento de software e mesclar o código resultante de muitos arquivos e bibliotecas (por exemplo, Grunt ou Webpack).

O Webpack é um module bundler, ou seja, um empacotador de módulos gratuito e de código aberto para JavaScript. Ele é feito principalmente para JavaScript, mas pode transformar ativos de front-end, como HTML, CSS e imagens, se os carregadores correspondentes forem incluídos. Ou seja, é um empacotador que pega módulos com dependências e cria conteúdos estáticos para sua aplicação web ir para produção após a etapa de build.

Grunt é um executor de tarefas (Task Runner) JavaScript, muito usado pela automação. Quanto menos trabalho você tiver ao executar tarefas repetitivas, como minificação, compilação, testes unitários, linting etc., mais fácil será o seu trabalho. Depois de configurá-lo por meio de um Gruntfile, um executor de tarefas pode fazer a maior parte desse trabalho mundano para você e sua equipe com esforço basicamente zero.

O ecossistema Grunt é enorme e cresce a cada dia. Com literalmente centenas de plugins para escolher, você pode usar o Grunt para automatizar praticamente qualquer coisa com um mínimo de esforço. Se alguém ainda não construiu o que você precisa, criar e publicar seu próprio plug-in do Grunt no npm é muito fácil.

Estrutura de teste – permite testar automaticamente a correção do nosso programa em busca de erros potenciais (por exemplo, Mocha, Jasmine, Cypress ou Jest)

O Jest é um poderoso framework de testes unitários de código aberto em JavaScript com um foco na simplicidade, criado pelo Facebook a partir do framework Jasmine e foi projetado para garantir a correção de qualquer código JavaScript. Jest é uma das ferramentas de teste unitário mais difundidas dentro da comunidade de JavaScript e funciona com projetos usando: Babel, TypeScript, Node, React, Angular, Vue e muito mais! O Jest foi inicialmente criado para testar o framework React, também criado pelo Facebook. Porém sua implementação se tornou muito mais ampla, sendo utilizado como ferramenta de teste unitário para diversas plataformas JavaScript como Node e Redux, e até mesmo plataformas em TypeScript como Angular e Ionic. Ele permite que você escreva testes com uma API acessível, familiar e rica em recursos que lhe dá resultados rapidamente.

O Testing Library é da família de pacotes que ajuda a testar os componentes da interface do usuário de maneira centrada no usuário, ou seja, é um utilitário de teste simples e completo que incentiva boas práticas de teste para front-end. O Testing Library é usado principalmente para testes de interface de usuário (UI) em aplicações web. Ele foca em testes de interação do usuário e acessibilidade, promovendo melhores práticas de testes ao encorajar os desenvolvedores a testar a aplicação da perspectiva do usuário final.

O Cypress é um framework de testes, de código aberto e de fácil configuração. Totalmente baseado em uma nova arquitetura, isenta de outros frameworks de testes, o Cypress apresenta um painel próprio que exibe exatamente o que está acontecendo durante a execução dos testes. À medida que o script é escrito, é possível acompanhá-lo, auxiliando o Analista de Testes (QA - Quality Assurance) na visualização de quais partes do código necessitam de ajustes. O Cypress é ideal para testes end-to-end (E2E) e integração em aplicações web. Ele é conhecido por seu foco em testes que simulam o comportamento real do usuário interagindo com a aplicação em um navegador.

O Mocha é uma estrutura de teste JavaScript para programas Node.js, com suporte a navegadores, testes assíncronos, relatórios de cobertura de testes e uso de qualquer biblioteca de asserção. Você poderá testar ele no lado do servidor com o Node ou no lado do cliente, em seu navegador. O Mocha executa testes em série para fornecer relatórios flexíveis e precisos enquanto mapeia exceções não capturadas para seus casos de teste correspondentes. O Mocha fornece funções que são executadas em uma ordem específica, registrando os resultados na janela do terminal. O Mocha também limpa o estado do software que está sendo testado para garantir que os casos de teste sejam executados independentemente uns dos outros. Embora possa ser usado com a maioria das bibliotecas de asserção, o Mocha é comumente usado com Chai, uma biblioteca de asserção popular para Node.js e o navegador.

O Chai é uma biblioteca open-source de asserção BDD/TDD para Node.js e navegador que pode ser emparelhada com qualquer estrutura de teste de javascript. Os desenvolvedores frequentemente usam o Mocha com Chai, tornando essa combinação com o nome "Mocha & Chai". O Chai possui diversas interfaces que permitem ao desenvolvedor escolher a mais confortável. Os estilos BDD com capacidade de cadeia fornecem uma linguagem expressiva e um estilo legível, enquanto o estilo TDD assert fornece uma sensação mais clássica. Os plug-ins estendem as afirmações de Chai a novos contextos, como integração de fornecedores e construção de objetos. Os desenvolvedores podem criar seus próprios plug-ins para compartilhar com a comunidade ou usar o padrão de plug-in para secar os testes existentes.

Analisadores de segurança – como você pode imaginar, usados para controlar a segurança de nossa solução (por exemplo, Snyk, RetireJS ou OWASP Dependency Check) A abertura dos ambientes de desenvolvimento web é uma bênção e uma maldição. Temos à sua escolha centenas de componentes, a partir dos quais podemos criar o ambiente mais confortável para nós.

Analytics - Implementações de ferramentas de análise de dados para acompanhar as ações dos usuários na plataforma (por exemplo, Google Analytics 4, Amplitude, Mixpanel, Hotjar, Adobe Analytics, Chartbeat, Segment, etc). Essas ferramentas de Analytics utilizam JavaScript para coletar dados sobre como os usuários interagem com websites e aplicativos, fornecendo insights valiosos para otimização de produto, marketing e experiência do usuário. Cada ferramenta tem suas próprias funcionalidades e pontos fortes, e a escolha da ferramenta certa depende das necessidades específicas do seu projeto ou organização.

Linting - 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, muito usado em conjunto com o Prettier para a formatação de estruturas de códigos quando se trata de um projeto open-source ou de grande porte de uma empresa, garantindo uma padronização na sua estrutura e que os devs obedeçam ela.

Porém, sua quantidade, mais as mudanças dinâmicas de ferramentas específicas ou mesmo apenas as tendências entre os programadores dificultam o acompanhamento de tudo o que está acontecendo nesses ambientes.

Mas para nós, este é um problema para um futuro distante.

Por enquanto, precisamos do trio mínimo: editor de código, intérprete e depurador.

Os programas de computador são feras complicadas, milhares ou até milhões de linhas de código (mas calma, começaremos com apenas algumas). Com tanta complexidade e tamanho, é impossível produzir código sem erros. Alguns tipos de erros, especialmente os lógicos (formalmente, o programa está escrito corretamente, mas provavelmente inventamos a solução errada para o problema), só podem ser encontrados enquanto o programa está em execução e, muitas vezes, apenas em circunstâncias especiais. É realmente difícil descobrir o que exatamente está acontecendo dentro de um programa que é executado extremamente rápido e, para esses problemas, existem depuradores.

Um depurador (debugger) é uma ferramenta que permite desacelerar ou até mesmo interromper a execução de um programa, executar instruções passo a passo e observar e analisar o estado do programa a qualquer momento.

Felizmente, no momento em que decidimos usar o navegador da web como ambiente de inicialização e interpretador de JavaScript, também adquirimos um depurador. Todos os navegadores modernos estão equipados com ferramentas de desenvolvedor. Durante o funcionamento normal, eles ficam invisíveis e temos que habilitá-los nas opções do navegador (mais sobre isso no próximo capítulo).

Dependendo do navegador, encontraremos lá várias ferramentas, mas certamente haverá:

o inspetor – que nos permitirá, por exemplo, analisar os elementos HTML individuais de um site aberto;
o console JavaScript – que em primeiro lugar mostra todas as informações sobre os erros e, em segundo lugar, nos permite executar comandos JavaScript únicos no contexto da página atual;
o debugger – que, entre outras coisas, mostra os valores atuais das variáveis, e permite pausar a execução do código no local indicado e realizar trabalho passo a passo (ou seja, executar instruções únicas do programa).

Dica: Se familiarize com todos os conceitos e práticas existentes dentro do navegador, pois o debugger do JavaScript se encontra a maioria de todos os problemas dentro dele para que você possa resolver os erros mais rapidamente. Isso vai te dar uma experiência profissional muito boa, com habilidades como autonomia e resolução de problemas.

Como você habilita as ferramentas do desenvolvedor? Infelizmente, não existe uma resposta única; depende do navegador que você está usando (às vezes também da versão) e do sistema operacional. As interfaces do navegador mudam com frequência, por isso é melhor aprender os atalhos corretos em vez de procurar a opção certa no menu.

Experimente as seguintes combinações de teclas:

Sistemas operacionais Windows e Linux, todos os navegadores comuns, exceto Internet Explorer e Edge: ctrl + shift + i
Sistema operacional Windows, Internet Explorer e Edge: F12
Sistema operacional macOS, todos os navegadores comuns: ⌘ + ⌥ + i

No próximo capítulo, retornaremos a este tópico e aprenderemos mais algumas coisas sobre essas ferramentas úteis.

No próximo capítulo escreveremos nosso primeiro trecho de código JavaScript. Iremos testá-lo primeiro no ambiente de execução integrado à nossa plataforma de treinamento. Também o usaremos para verificar como funciona nosso ambiente de desenvolvimento local. Portanto, certifique-se de que as ferramentas selecionadas estejam instaladas e que você possa iniciá-las. Se você ainda não sabe o que escolher, sugerimos usar o ambiente local com o Visual Studio Code (nosso editor de código) e o Chrome (navegador com interpretador e depurador JavaScript).

`Hello, World!` - JavaScript

Vamos rodar no console do navegador o seguinte comando abaixo:

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

Além do console.log, existem várias outras funções do objeto console no JavaScript que podem ser usadas para diferentes tipos de saída no console. Aqui estão algumas das mais comuns:

console.error(): Exibe uma mensagem de erro.

console.error("Isto é uma mensagem de erro.");

console.warn(): Exibe uma mensagem de aviso.

console.warn("Isto é uma mensagem de aviso.");

console.info(): Exibe uma mensagem informativa.

console.info("Isto é uma mensagem informativa.");

console.debug(): Exibe uma mensagem de depuração. (Em alguns navegadores, este é um alias para console.log.)
```
console.debug("Isto é uma mensagem de depuração.");
```

console.table(): Exibe dados em uma tabela.

const pessoas = [
    { nome: "Alice", idade: 30 },
    { nome: "Bob", idade: 25 },
];
console.table(pessoas);

console.assert(): Exibe uma mensagem de erro se a expressão passada for falsa.

const x = 5;
console.assert(x > 10, "x não é maior que 10"); // Exibirá uma mensagem de erro no console

console.group() e console.groupEnd(): Agrupa mensagens de log, criando uma hierarquia de mensagens.

console.group("Grupo 1");
console.log("Mensagem no grupo 1");
console.group("Subgrupo 1.1");
console.log("Mensagem no subgrupo 1.1");
console.groupEnd();
console.groupEnd();

console.groupCollapsed(): Similar a console.group(), mas inicia o grupo colapsado (fechado).

console.groupCollapsed("Grupo colapsado");
console.log("Mensagem no grupo colapsado");
console.groupEnd();

console.time() e console.timeEnd(): Mede o tempo de execução entre essas duas chamadas.

console.time("Timer");
// Algum código que você quer medir o tempo de execução
console.timeEnd("Timer"); // Exibe o tempo de execução no console

console.trace(): Exibe uma stack trace (rastro de chamadas) da execução do código.

function funcaoA() {
    function funcaoB() {
        console.trace("Rastro de execução");
    }
    funcaoB();
}
funcaoA();

Essas funções oferecem uma gama mais ampla de funcionalidades para depuração e monitoramento de código, ajudando os desenvolvedores a entender melhor o comportamento e o desempenho de suas aplicações JavaScript.

É possível também estilizar a saída dos dados do console do navegador com %c, observe abaixo:

console.log (
  `%c Result = ${2+2}`,
  "font-size: 50px; background: yellow; color: black; padding: 10px; border: 2px solid #000000;"
)

Resultado:

Tente também com outros tipos de dados:

console.log('1542'); // output: '1542'

console.log(1542); // output: 1542

console.log("abc", "def", "ghi"); // output: abc def ghi

console.log("Mary Stuart (1542)");
console.log("Mary", "Stuart", "(1542)");

console.log("Mary");
console.log("Stuart");
console.log("(1542)");

// output:
// Mary Stuart (1542)
// Mary Stuart (1542)

console.log("Mary");
console.log("Stuart");
console.log("(1542)");

// output:
// Mary Stuart (1542)
// Mary Stuart (1542)

console.log("Mary" + "Stuart" + "(1542)");

Mas, e em aplicações web? Como podemos executar nosso código JavaScript? Vamos começar com um exemplo simples, onde o navegador obtém uma página simples (talvez até vazia) de https://test.org. O endereço foi criado para este exemplo, então não tente digitá-lo. Veja a figura ao lado.

Vamos começar do lado direito da figura. O usuário executa um navegador da web em seu computador (por exemplo, Chrome). Usando o atalho de tecla de atalho apropriado, eles ativam as ferramentas do desenvolvedor (veja o capítulo anterior) para poder usar o console. Lembre-se de que essas ferramentas não são necessárias para o uso normal do navegador e, portanto, ficam ocultas por padrão. Em seguida, o usuário digita https://test.org (a URL do nosso site falso) na barra de endereço.

No servidor remoto (lado esquerdo do desenho), associado ao endereço https://test.org, é lançado um servidor web que, após receber uma solicitação do nosso usuário, preparará uma resposta para ele. No caso mais simples, a resposta conterá apenas um arquivo html, que pode ser armazenado no mesmo servidor. O arquivo html (neste exemplo, index.html) é enviado de volta ao usuário e processado pelo navegador. Se algum conteúdo (por exemplo, um parágrafo com texto) estiver definido nele, ele será exibido na janela do navegador.

Entretanto, estamos mais interessados no fato de que o arquivo index.html contém as tags </script> e </script>, com um trecho de código JavaScript entre elas. Você reconhece isso? Isto é obviamente uma tentativa de mostrar o nosso "Hello, World!" no console. Ao carregar a página, o código colocado dentro das tags </script> deverá ser executado e, se as ferramentas do desenvolvedor estiverem habilitadas e o painel do console estiver visível, o console mostrará "Hello, World!".

Tudo funcionará exatamente como no cenário anterior, exceto que o servidor web fornecerá o arquivo main.js além de index.html. O usuário não notará nenhuma diferença. É claro que colocar nosso código em um servidor remoto apenas para testá-lo seria um pouco complicado.

Temos outra possibilidade: podemos carregar um arquivo html local (ou seja, um que está em nosso computador) no navegador. Se este código contiver uma tag <script> indicando algum arquivo JavaScript, então este arquivo também será carregado a partir dos recursos locais.

A imagem mostra um cenário simples em que o usuário carrega um arquivo index.html local no navegador, no qual há uma referência a main.js (portanto, esse arquivo também será carregado automaticamente).

Você pode carregar um arquivo html local digitando seu caminho local após file:/// na barra de endereço ou simplesmente abrindo-o em seu navegador usando o comando Abrir no menu. Como o menu dos navegadores muitas vezes fica oculto, uma maneira mais simples pode ser usar um atalho para abrir documentos existentes nos aplicativos. O atalho é universal, não só para navegadores e provavelmente você já o viu: ctrl + o ou command + o

🐾 Pug.js

Pug é um Template Engine de alto desempenho fortemente influenciado por Haml e implementado com JavaScript para Node.js e navegadores com uma sintaxe sensível a espaços em branco para escrever HTML. Este projeto era conhecido anteriormente como "Jade". No entanto, foi revelado que "Jade" é uma marca registrada e como resultado, uma renomeação foi necessária. Após alguma discussão entre os mantenedores, "Pug" foi escolhido como o novo nome para este projeto. A partir da versão 2, "pug" é o nome oficial do pacote.

Um Template Engine é um programa responsável por compilar um template (que pode ser escrito usando qualquer uma das várias linguagens) em HTML. O Template Engine normalmente receberá dados de uma fonte externa, que injetará no template que está compilando.

O PHP não é um template engine, mas uma linguagem de programação que pode ser usada para escrever templates ou templates engine. Um template engine não é apenas uma linguagem, mas também a API de programação que permite que os scripts localizem, organizem templates ou atribuam os dados do script a eles. Os Templates Engine compilam para php nativo, portanto, não há nada a perder e muito a ganhar usando um template engine. Se você olhar para qualquer Template Engine moderno, como smarty ou twig, verá que eles compilam os modelos para fonte php, de modo que a saída seja a mesma como se você tivesse feito a página em php manualmente. Mas os templates engine sabem como compilar a página php melhor do que uma pessoa, pois os templates engine são mantidos por milhares de pessoas.

Essa abordagem permite que você reutilize elementos estáticos da página da Web, enquanto define elementos dinâmicos com base em seus dados. Também facilita a separação de preocupações, mantendo a lógica do aplicativo isolada da lógica de exibição. É mais provável que você se beneficie de um Template Engine se seu site ou aplicativo da Web for orientado a dados - como um diretório de equipe para funcionários administrativos, uma loja da Web que lista vários produtos para os usuários comprarem ou um site com funcionalidade de pesquisa dinâmica. Você não precisará de um Template Engine se estiver buscando uma pequena quantidade de dados de uma API (nesse caso, você pode usar apenas as strings de modelo nativo do JavaScript) ou se estiver criando um pequeno site estático.

Portanto, uma das vantagens do Template Engine é a segurança adicional para personalização do usuário final. Os temas em PHP puro têm capacidade irrestrita de causar danos a um usuário e sua instalação. Assim, um template engine remove esse risco, se for bom e a facilidade de uso para não programadores, como artistas gráficos ou web designers.

Curiosidade: Com a popularidade do Pug.js, os desenvolvedores criaram um pré-processor HTML chamado de PugHTML ou somente Pug. Assim como, o Sass/scss o pré-processador css, o Pug ajuda a escrever código HTML de forma mais simples, rápida e poderosa, eliminando o encadeamento de tags da linguagem de marcação HTML5. Além disso, qualquer código escrito em HTML poderá usar o Pug, como por exemplo: Node.js, Angular, React, Vue, PHP e Express.

⚙️ EJS - Embedded JavaScript

O EJS (Embedded JavaScript Templating) é uma Template Engine que podemos utilizar com Node.js. Assim como vimos sobre o PUG, com a template engine nós podemos criar as páginas das nossas aplicações em Node.js de forma dinâmica sem depender das limitações do HTML.

A grande diferença entre o EJS e o PUG é que o EJS segue uma sintaxe muito semelhante ao HTML, desta forma qualquer desenvolvedor que já conhece HTML não terá nenhuma dificuldade de trabalhar com o EJS, ao contrário do PUG que possuí algumas particularidades e que pode, no início, afetar a produtividade do desenvolvedor. Além disso, o PHP e EJS compartilham o objetivo comum de facilitar a renderização de conteúdo dinâmico em páginas web, eles diferem em suas abordagens, sintaxe e ecossistemas subjacentes.

Um bom cenário para se usar Templates Engine seria nas áreas de login, cadastro de usuários, cadastro de admins, áreas de usuários e áreas de admin. Isso tudo com arquitetura monolítica e MVC (Model View Controller).

🕹️ Phaser

O Phaser é um dos maiores pacotes de criação de games (Engine) de JavaScript. Você utiliza o framework para desenvolver em Canvas e WebGL de maneira fácil, rápida e open-source.

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!

🧙‍♂️ Browserify

Browserify é uma ferramenta de pacote de JavaScript de código aberto que permite aos desenvolvedores escrever e usar módulos no estilo Node.js que compilam para uso no navegador agrupando todas as suas dependências.

Os navegadores não têm o método require definido, mas o Node.js tem. Com o Browserify, você pode escrever código que usa require da mesma forma que usaria no Node.

🎯 Require.js

RequireJS é um arquivo JavaScript e carregador de módulo. Ele é otimizado para uso no navegador, mas pode ser usado em outros ambientes JavaScript, como Rhino e Node . Usar um carregador de script modular como o RequireJS melhorará a velocidade e a qualidade do seu código.

Ou seja, o RequireJS olha para as dependências de todos os módulos no seu aplicativo, e busca e executa todos os módulos na sua ordem correta, de modo que cada módulo tem exatamente o que ele precisa para rodar.

🧸 Puppeteer

Puppeteer é uma biblioteca Node.js que fornece uma API de alto nível para controlar o Chrome/Chromium sobre o protocolo DevTools . O Puppeteer é executado no modo headless por padrão, mas pode ser configurado para ser executado no Chrome/Chromium completo (sem headless).

A maioria das coisas que você pode fazer manualmente no navegador pode ser feita usando o Puppeteer! Aqui estão alguns exemplos para você começar:

Gere capturas de tela e PDFs de páginas.
Rastreie um SPA (aplicativo de página única) e gere conteúdo pré-renderizado (ou seja, "SSR" (renderização do lado do servidor)).
Automatize o envio de formulários, teste de interface do usuário, entrada de teclado, etc.
Crie um ambiente de teste automatizado usando os recursos mais recentes de JavaScript e navegador.
Capture um rastreamento da linha do tempo do seu site para ajudar a diagnosticar problemas de desempenho.
Teste as extensões do Chrome .

📜 JSS

Um arquivo criado no formato JSS (JavaScript Style Sheets), uma extensão da linguagem CSS que suporta várias heranças, enquanto o CSS padrão só suporta herança única, ou seja, ele permite mais flexibilidade ao definir estilos para páginas web.

Os arquivos JSS devem ser analisados e convertidos para o formato .CSS antes de serem usados com uma página web. Portanto, você precisa usar o programa jss como mostrado no comando a seguir, que converte styles.jss para styles.css:

jss stylesjss stylescss

NOTA: Os arquivos JSS usam o herda-classe:, herd:, e herdado: sintaxe nas definições de CSS para prover herança.

🦜 Bower

O Bower é um gerenciador de dependências client-side, simples e muito prático, que permite você fazer download dos frameworks JavaScript sem precisar entrar no site do projeto, ele também pode ser utilizado para baixar pacotes CSS e HTML. Os sites da Web são feitos de muitas coisas — estruturas, bibliotecas, recursos e utilitários. Bower gerencia todas essas coisas para você.

Manter o controle de todos esses pacotes e garantir que eles estejam atualizados (ou configurados para as versões específicas de que você precisa) é complicado. O Bower pode gerenciar componentes que contenham HTML, CSS, JavaScript, fontes ou até mesmo arquivos de imagem. O Bower não concatena ou reduz o código ou faz qualquer outra coisa - apenas instala as versões corretas dos pacotes que você precisa e suas dependências.

Para começar , o Bower trabalha buscando e instalando pacotes de todo o mundo, cuidando da busca, localização, download e salvamento do que você está procurando. O Bower rastreia esses pacotes em um arquivo de manifesto, bower.json. Como você usa os pacotes depende de você. O Bower fornece ganchos para facilitar o uso de pacotes em suas ferramentas e fluxos de trabalho.

Bower é otimizado para o front-end. Se vários pacotes dependerem de um pacote - jQuery, por exemplo - o Bower baixará o jQuery apenas uma vez. Isso é conhecido como gráfico de dependência plana e ajuda a reduzir o carregamento da página.

🐹 Ember

O Ember.js, ou somente Ember, é um framework web JavaScript de código aberto, baseado na arquitetura Model–view–viewmodel. Ele permite aos desenvolvedores aplicativos web de página única escaláveis, ao incorporar expressões idiomáticas comuns e boas práticas de desenvolvimento em seu núcleo.

O Ember.js é uma estrutura JavaScript produtiva e testada em batalha para a criação de aplicativos da Web modernos. Ele inclui tudo o que você precisa para criar interfaces de usuário avançadas que funcionam em qualquer dispositivo.

Vite

O Vite é uma ferramenta que ajuda a criar um projeto front-end já configurado, ou seja, o Vite melhora a experiência de seu desenvolvimento front-end com mais agilidade, sem precisar você remover ou instalar compiladores em seu projeto (boilerplate). Algumas especialidades dele incluem:

Um servidor de desenvolvimento que atende seus arquivos de origem em módulos ES nativos, com recursos integrados avançados e substituição de módulo quente (HMR) surpreendentemente rápida.
Um comando de compilação que agrupa seu código com Rollup, pré-configurado para produzir ativos estáticos altamente otimizados para produção.

Além disso, o Vite é altamente extensível por meio de sua API de plug-in e API de JavaScript com suporte de digitação completo.

Meteor.js

O Meteor.js é uma plataforma de código aberto para criar e implantar aplicativos Web, móveis e de desktop em Javascript ou TypeScript. O Meteor, ou MeteorJS, é um framework web JavaScript isomórfico parcialmente proprietário, principalmente livre e de código aberto, escrito usando Node.js. O Meteor permite a prototipagem rápida e produz código multiplataforma.

Next.js

O Next.js é um poderoso framework JavaScript amplamente utilizado pela comunidade do React.js para agilização de processos das aplicações, é um framework React com foco em produção e eficiência criado e mantido pela equipe da Vercel, oferecendo recursos de sistemas de roteamento baseado em páginas com suporte a rotas dinâmicas, pré-renderização por página com SSG - Static Generation, renderização híbrida, suporte TypeScript, suporte para:

CSS, Sass e qualquer lib CSS-in-JS;
ambiente de desenvolvimento com suporte a Fast-Refresh;
API Routes para construção de APIs Endpoints;
Serverless Functions;
Divisão de código automática para carregamento da página mais rápido;
Otimização de SEO por padrão;
Roteamento para o lado do cliente com prefetching (pré-busca otimizada);
Bundling inteligente e o principal que seria a renderização React no Lado Servidor (SSR - Server-Side Rendering).

Redux

O Redux é uma biblioteca JavaScript de código aberto para gerenciamento e armazenamento de estados independentes de uma aplicação JavaScript e está ligado ao desenvolvimento web sendo executado no lado do servidor, cliente e nativo. É mais comumente usado como um ecossistema da linguagem JS para bibliotecas como React ou Angular para criar interfaces de usuário. Semelhante pela arquitetura Flux do Facebook e baseado na linguagem de programação Elm, foi criado por Dan Abramov e Andrew Clark.

O principal uso do Redux é que podemos usar um estado de aplicativo como um estado global e interagir com o estado de qualquer componente de React que é muito fácil, sejam eles irmãos ou pai-filho.

O Redux é amplamente utilizado para desenvolvimento de UI e user-interface, onde o uso básico do Redux entra em cena quando o aplicativo fica grande e complexo. Nesses aplicativos, o gerenciamento simples de dados como pai-filho torna-se difícil usando props. Existem vários componentes tentando se comunicar com vários outros componentes. Nesses casos, o Redux é útil.

Gatsby

O Gatsby é um framework open-source para a criação de sites e apps baseados em React, ele combina SSG (Static-Site Generation) e renderização inteligente de páginas fazendo preload seletivo apenas das informações que importam. Além de ter sido desenvolvido pensando em facilitar a vida dos desenvolvedores.

Diferente do Next.js, o Gatsby funciona

🥤 Gulp

O Gulp.js é um kit de ferramentas JavaScript de código aberto criado por Eric Schoffstall usado para automatizar e aprimorar seu fluxo de trabalho (workflows) e como um sistema de construção de streaming no desenvolvimento web front-end.

Aproveite o gulp e a flexibilidade do JavaScript para automatizar fluxos de trabalho lentos e repetitivos e compô-los em pipelines de construção eficientes. Usando código sobre configuração, utilize todo o JavaScript para criar seu gulpfile onde as tarefas podem ser escritas usando seu próprio código ou plug-ins encadeados de propósito único.

Escreva tarefas individuais e focadas e componha-as em operações maiores, fornecendo velocidade e precisão enquanto reduz a repetição. Usando gulp streams, você pode aplicar muitas transformações aos seus arquivos enquanto estiverem na memória antes que qualquer coisa seja gravada no disco — acelerando significativamente o processo de compilação.

🤖 Apache Cordova

O Apache Cordova é uma biblioteca/estrutura que tem como foco desenvolver aplicações mobile de plataforma cruzada de código aberto usada para a criação de aplicativos híbridos, tanto para plataformas Android e iOS. Anteriormente, Cordova era conhecido como PhoneGap. Ele vem dos gigantes do servidor de tecnologia Apache. Cordova usa certas tecnologias da web como JavaScript, CSS3 e HTML5 para desenvolver aplicativos híbridos.

Vários plug-ins de terceiros estão disponíveis para trabalhar com a estrutura Cordova, ajudando imensamente no desenvolvimento de aplicativos ricos em recursos.

O principal benefício de usar o Cordova é sua simplicidade na estrutura de codificação.

🔵 Ionic

O Ionic é um framework híbrido open-source para desenvolvimento de aplicações multiplataforma usando tecnologia Web: HTML, CSS e JS. Através dele, você poderá desenvolver e disponibilizar aplicativos em várias plataformas como Android e iOS através de PWAs - Progressive Web Apps e até em Desktops, tudo isso apenas escrevendo um único código.

⚛️ React Native

O React Native é uma biblioteca front-end do JavaScript, integrante do ecossistema de outro framework o React.js, desenvolvido pelo Facebook, atualmente Meta, cujo renderiza e constroi interfaces nativas para os sistemas operacionais Android e iOS, ou seja, ele renderiza componentes mobiles para cada uma das plataformas, em outras palavras ele cria aplicações híbridas para os dispositivos móveis.

Apesar de ambos terem sido criados pelo Facebook e compartilharem algumas semelhanças, eles possuem utilizações distintas.

🦕 Deno

O Deno é um moderno ambiente de execução para JavaScript e TypeScript, sendo o mais facilitador e seguro, baseado no mecanismo JavaScript V8 e na linguagem de programação Rust. Foi criado por Ryan Dahl, o mesmo criador original do Node.js, e é focado na produtividade.

Foi anunciado por Dahl em 2018 durante sua palestra "10 coisas que lamento pelo Node.js". Deno assume explicitamente o papel de gerenciador de tempo de execução e de pacotes em um único executável, em vez de exigir um programa de gerenciamento de pacotes separado.

🦁 Nest JS

O NestJS é um framework/estrutura que usa JavaScript progressivo de código aberto, no qual é construído com TypeScript (preserva a compatibilidade com JavaScript puro) e combina elementos de OOP (Programação Orientada a Objetos), FP (Programação Funcional) e FRP (Programação Reativa Funcional), mas também oferece compatibilidade com uma ampla gama de outras bibliotecas, como, por exemplo, Fastify, permitindo o uso fácil da miríade de plug-ins de terceiros disponíveis no Node.js para o desenvolvimento de aplicativos do lado do servidor (back-end) que auxilia o desenvolvimento de aplicações eficientes, escaláveis e confiáveis em cima do Node.js. Foi criado por Kamil Mysliwiec e lançado em 2017.

Sob o capô, por padrão, o NestJS faz uso do framework Express.js, sendo também compatível com o Fastify. O NestJS utiliza como padrão TypeScript e possui uma sintaxe parecida com Angular.

Em um simples comando, perceba que ele cria uma estrutura model-service-controller. Algumas características como o uso de Typescript, modularização, injeção de dependências, também permite o uso de ORMs como o TypeORM e Sequelize para bancos de dados relacionais, entre outras, faz do NestJS uma opção atual e interessante para o desenvolvimento de inúmeras aplicações.

Muitos devs comparam o NestJS com o Rails (framework/biblioteca da linguagem de programação Ruby), onde podem ser categorizados como ferramentas "Frameworks (Full Stack)". "Poderoso, mas super amigável para trabalhar" é a principal razão pela qual os desenvolvedores consideram o NestJS sobre os concorrentes, enquanto o "desenvolvimento rápido" foi declarado como o fator chave na escolha do Rails.

🐉 RxJS

O RxJS é uma biblioteca para programação reativa usando Observables, para facilitar a composição de código assíncrono ou baseado em callback. Este projeto é uma reescrita de Reactive-Extensions/RxJS com a melhor performance, melhor modularidade, melhor chamada depurável para tecnologias, mantendo a compatibilidade com versões anteriores, com algumas alterações importantes que reduzem a superfície da API.

Pense no RxJS como Lodash para eventos.

O ReactiveX combina o padrão Observer com o padrão Iterator e a programação funcional com coleções para preencher a necessidade de uma maneira ideal de gerenciar sequências de eventos.

🎫 AS - AssemblyScript

O AssemblyScript, abreviado como AS, é uma linguagem de programação baseada em TypeScript que é otimizada e compilada estaticamente para WebAssembly. Assemelhando-se a ECMAScript e JavaScript, mas com tipos estáticos, a linguagem é desenvolvida pelo Projeto AssemblyScript com contribuições da comunidade AssemblyScript.

Em 2017, a disponibilidade de suporte para WebAssembly, uma definição padrão para um bytecode de baixo nível e uma máquina virtual associada , tornou-se difundida entre os principais navegadores da Web, fornecendo aos desenvolvedores da Web um alvo de compilação de nível inferior e potencialmente de alto desempenho para o lado do cliente programas e aplicativos para executar em navegadores da Web, além da linguagem de script da Web JavaScript interpretada (e na prática compilada dinamicamente ). O WebAssembly permite que programas e códigos sejam compilados estaticamente antes do tempo para serem executados em nível potencialmente nativo ou “desempenho bare-metal” em navegadores da Web, sem sobrecarga de interpretação ou latência inicial de compilação dinâmica.

Com a adoção do WebAssembly nos principais navegadores da Web, Alon Zakai, criador do Emscripten , um compilador C e C++ baseado em LLVM / Clang que visava um subconjunto de JavaScript chamado asm.js , adicionou suporte para WebAssembly como destino de compilação no Emscripten, permitindo Programas e códigos C e/ou C++ a serem compilados diretamente no WebAssembly.

Enquanto o Emscripten e compiladores semelhantes permitem que os desenvolvedores da Web escrevam um novo código, ou transfiram o código existente, escrito em uma linguagem de alto nível, como C, C++, Go e Rust para WebAssembly para obter desempenho de execução de nível nativo potencialmente mais alto em navegadores da Web , isso força os desenvolvedores da Web acostumados a desenvolver scripts e aplicativos da Web do lado do cliente em ECMAScript/JavaScript (o de fatolinguagem de programação do lado do cliente em navegadores da Web) para usar uma linguagem diferente para direcionar o WebAssembly do que o JavaScript. O AssemblyScript, como uma variante do TypeScript sintaticamente semelhante ao JavaScript, permite que os desenvolvedores acostumados ao JavaScript usem uma linguagem familiar para direcionar o WebAssembly, reduzindo potencialmente a curva de aprendizado de uma linguagem separada que pode ser compilada para o WebAssembly. Além disso, como o AssemblyScript foi projetado para ser uma linguagem de origem ideal para WebAssembly, o sistema de tipos da linguagem reflete de perto o do WebAssembly, e a linguagem fornece funções padrão de baixo nível (normalmente implementadas como macros ) que mapeiam diretamente para as instruções do WebAssembly que instruções de espelhamento disponíveis em processadores modernos, como SIMDe instruções vetoriais e instruções mais especializadas, como clz(contagem de zero bits à esquerda), ctz (contagem de zero bits à direita) e popcnt( contagem de população ), usadas em aplicativos como criptografia e bibliotecas criptográficas.

asc, o compilador AssemblyScript de referência, é baseado em Binaryen, uma cadeia de ferramentas de compilador back-end desenvolvida por Alon Zakai que compila para WebAssembly e é um componente do Emscripten (que Zakai também desenvolveu). O compilador asc e outras ferramentas estão disponíveis através do gerenciador de pacotes npm .

Embora o WebAssembly tenha sido originalmente projetado para execução em navegadores da Web, o desenvolvimento do WASI (WebAssembly System Interface), uma especificação da comunidade para uma API padrão que permite que programas WebAssembly acessem chamadas do sistema e outras funções do sistema operacional, levou ao desenvolvimento de ambientes de tempo de execução WebAssembly de projetos como Wasmtime e Wasmer que permitem WebAssembly e código escrito em linguagens como AssemblyScript que pode compilar para ele, para executar também em ambientes não-Web.

🌌 Wasm - WebAssembly

O WebAssembly, abreviado como Wasm, é um formato de instrução binária para uma máquina virtual baseada em pilha. O Wasm foi projetado como um destino de compilação portátil para linguagens de programação, permitindo a implantação na Web para aplicativos de cliente e servidor.

O Wasm é basicamente um bytecode, é um código intermediário resultante da compilação de uma linguagem e que será interpretado por uma máquina virtual (VM) para então ser transformado em linguagem de máquina e logo será interpretado pelo seu computador, contextualizando ele é uma linguagem de baixo-nível, mais próximo da linguagem de máquina. Assim, como a linguagem de montagem ou Assembly.

A intenção do Web Assembly é ser interpretado pela VM para depois poder ser interpretado pelos navegadores permitindo que qualquer linguagem gere esse bytecode possa ser utilizada para o seu desenvolvimento Web.

O objetivo do Web Assembly é de se tornar uma tecnologia universal para desenvolvimento de aplicações Web melhorando consideravelmente a performance e disponibilizando os recursos de aplicações nativa para o desenvolvimento Web, ou seja, isso abre um novo horizonte para toda a internet, onde os desenvolvedores terão um leque de possibilidades na criação de aplicações e os usuários teram a mesma experiência de aplicações nativas no seu computador.

Imagina a hipótese de rodar qualquer tipo de aplicação no seu navegador, aplicativos como: jogos, ferramentas como Adobe Photoshop CC, Autodesk Autocad e até mesmo aplicativos móveis. E isso tudo sem ter que se preocupar com memória interna, pois não precisará instalar nenhuma aplicação. Estamos falando em um mundo compatível com todos os sistemas operacionais e dispositivos, tudo dentro do navegador.

Atualmente, as linguagens de programação que suportam/compilam o módulo Web Assembly são: C/C++, Rust, AssemblyScript (uma sintaxe TypeScript), C#, F#, Go, Kotlin, Swift, D, Pascal, Zig, Grain. Essas linguagens são as que suportam e possuem uma estrutura/arquitetura ideal para desenvolvimento em baixo-nível e com elas você terá um maior controle da sua aplicação podendo arquitetar do jeito que você achar necessário em pontos cruciais, como por exemplo: O gerenciamento de memória é um dos principais pontos fracos de linguagens dinâmicas como JavaScript. Ou seja, podemos usar o WebAssembly compulado pelo código JavaScript, como uma aplicação CLI e pelo Node.js (com acesso aos recursos do sistema).

A máquina de pilha Wasm foi projetada para ser codificada em um formato binário com eficiência de tamanho e tempo de carregamento. O WebAssembly visa executar em velocidade nativa, aproveitando os recursos de hardware comuns disponíveis em uma ampla variedade de plataformas.

O WebAssembly descreve um ambiente de execução em área restrita com proteção de memória que pode até ser implementado dentro de máquinas virtuais JavaScript existentes. Quando incorporado na Web, o WebAssembly aplicará as políticas de segurança de mesma origem e permissões do navegador.

O WebAssembly foi projetado para ser impresso em um formato textual para depuração, teste, experimentação, otimização, aprendizado, ensino e escrita de programas à mão. O formato textual será usado ao visualizar a fonte dos módulos Wasm na web. E, também, para manter a natureza sem versão, com recursos testados e compatível com versões anteriores da web. Os módulos WebAssembly poderão entrar e sair do contexto JavaScript e acessar a funcionalidade do navegador por meio das mesmas APIs da Web acessíveis a partir do JavaScript. O WebAssembly também oferece suporte a incorporações não-web.

Name		Name	Last commit message	Last commit date
Latest commit History 1,927 Commits
graphql-api		graphql-api
js		js
README.md		README.md

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Repository files navigation

It's a repository of JavaScript (JS) 📜

📜 JavaScript (JS)

`Hello, World!` - JavaScript

🐾 Pug.js

⚙️ EJS - Embedded JavaScript

🕹️ Phaser

🧙‍♂️ Browserify

🎯 Require.js

🧸 Puppeteer

📜 JSS

🦜 Bower

🐹 Ember

Vite

Meteor.js

Next.js

Redux

Gatsby

🥤 Gulp

🤖 Apache Cordova

🔵 Ionic

⚛️ React Native

🦕 Deno

🦁 Nest JS

🐉 RxJS

🎫 AS - AssemblyScript

🌌 Wasm - WebAssembly

About

Releases

Packages

Languages

IsaacAlves7/js-studies

Folders and files

Latest commit

History

Repository files navigation

It's a repository of JavaScript (JS) 📜

📜 JavaScript (JS)

Hello, World! - JavaScript

🐾 Pug.js

⚙️ EJS - Embedded JavaScript

🕹️ Phaser

🧙‍♂️ Browserify

🎯 Require.js

🧸 Puppeteer

📜 JSS

🦜 Bower

🐹 Ember

Vite

Meteor.js

Next.js

Redux

Gatsby

🥤 Gulp

🤖 Apache Cordova

🔵 Ionic

⚛️ React Native

🦕 Deno

🦁 Nest JS

🐉 RxJS

🎫 AS - AssemblyScript

🌌 Wasm - WebAssembly

About

Topics

Resources

Stars

Watchers

Forks

Releases

Packages 0

Languages

`Hello, World!` - JavaScript

Packages