Javascript: Uma introdução rápida ao mundo JS

Javascript: Uma introdução rápida ao mundo JS

O Javascript cresceu exponencialmente nos últimos anos e já possui um grande ecossistema com frameworks para o Front-end, Back-end, Mobile e Desktop.

Se manter atualizado pode ser um grande desafio (dada a quantidade de opções) por isto nesse post nós criamos um resumo sobre as principais ferramentas do mundo JS que você precisa conhecer, bora?

Introdução ao JS

O que é o Javascript?

O Javascript é uma linguagem interpretada construída por Brendan Eich, que na época trabalhava na empresa Netscape, e teve seu primeiro lançamento na versão beta do navegador Netscape 2.0 em 1995.

O JS foi batizado inicialmente como Livescript e teve seu nome alterado justamente devido ao lançamento recente da linguagem de programação Java.

E o ECMAScript, qual a diferença pro JS?

Na verdade nenhuma, o que acontece é que antes que o javascript se tornasse popular, os criadores se associaram ao ECMA (European Computer Manufactures Association) para que a linguagem pudesse obedecer a padrões e como o nome Javascript já estava patenteado, um novo nome foi criado, o ECMAScript.

E desde então, a linguagem vem ganhando novas versões e atualizações, tanto que no ano de 2016, chegamos à versão 7.

Os gerenciadores de Pacote

Antes de falarmos do enorme leque de possibilidades que o javascript tem, vamos abordar as ferramentas que podemos utilizar para instalar estes recursos. Hoje no mundo JS existem dois grande gerenciadores de pacote: o NPM e o Yarn, e eles estão numa disputa bem interessante.

NPM

NPM (Node Package Manager) é o gerenciador de pacotes padrão do NodeJS e também é um repositório online de pacotes Javascript (o maior). Porém o NPM enfrenta hoje um problema de performance muito grande quando tentamos utilizá-lo para instalar alguma ferramenta javascript (principalmente se o seu projeto tem muitas dependências).

YARN

O Yarn é um gerenciador de pacotes que surgiu a pouco tempo, sendo criado em 2016 pelo Facebook em parceria com outras grandes, dentre elas a Google. Ele veio suprir o que falta de performance no NPM. Além disso, o Yarn também consegue ler outros repositórios além do NPM, como o Bower, que é um outro gerenciador de pacotes e repositório de códigos JS menos utilizado.

Hoje, ferramentas como o Angular utilizam como base de dependências de pacotes o NPM, mas abrem a possibilidade de alterar para o Yarn.

JS no Front-end

Nesta sessão vamos abordar os principais frameworks das dezenas que o JS possui para front-end e nesta lista estão o Jquery, EmberJS, Angular, React, Vue e Stimulus. Então bora entender um pouco de cada um deles.

jQuery

Criado em 2006, o jQuery é uma biblioteca voltada para manipulação do DOM do Browser. Ele foi um dos pioneiros para isso e foi bastante utilizado, sendo base inclusive de outras ferramentas como Underscore.js.

Ele visa facilitar a nossa vida quando o assunto é selecionar e lidar com elementos da página, seja fazendo uma animação, inserção de texto ou até mesmo adicionando ou removendo elementos e vai até um pouco além disso, auxiliando também em requisições Ajax.

Veja por exemplo, como se torna simples adicionar o texto “Hello World” numa div com ID some-div.

Com o Javascript puro:

Com o Jquery:

EmberJS

O Ember teve seu primeiro release em 2011. Teve sua versão 3.0 lançada recentemente, dia 12 de Fevereiro de 2018 e já tem a 3.1 na primeira versão beta. A galera não veio para brincadeira.

É um framework que segue o padrão MVVM (Model-View-ViewModel), um padrão de projeto (design pattern) que configura uma tela de interação com o usuário (View), um modelo para lidar com os dados (Model) e um camada entre as duas que fornece os dados para view vindo do model (ViewModel). A comunicação entre a ViewModel e a View é feita por meio de data binding, onde a ViewModel possui variáveis que são associadas com a View e toda vez que ocorre uma mudança de valor, a View é notificada para atualizar os dados. Este é um padrão que permite aos desenvolvedores criarem SPAs (Single Page Applications) facilmente.

E para quem ouviu pouco ou nunca ouviu falar do Ember, ele possui patrocinadores como LinkedIn e Discourse e é utilizado por empresas como Microsoft, Netflix e Heroku.

Olhando os docs, para quem tem afinidade com Rails se sente em casa, ele possui conceitos bem parecidos como controllers, rotas, models e components e ainda possui generators pra isso tudo.

No EmberJS, podemos executar comandos como:

1- Gerar Controller

2- Gerar models

3- Gerar components

Angular

Esse framework nasceu dentro da Google e atualmente tem divido bastante os corações. Também usa o padrão MVVM e é utilizado para construção de SPAs.

Na primeira versão do framework, conhecida como AngularJS, utilizávamos JS puro para desenvolver e era bastante verboso. A partir da versão 2 ele passou a utilizar TypeScript, uma linguagem derivada do JS e passou a se chamar apenas Angular. E a retrocompatibilidade? Bem, da versão 1 para a 2, não existe.

Atualmente se encontra na versão 5 e já amadureceu bastante. Hoje o Angular já é uma ferramenta mais ampla e adota facilidades como uma CLI e generators, além disso possui muitos eventos ao redor do mundo e uma ótima documentação.

Para aprender mais sobre o Angular acesse o Artigo: Criando um CRUD com Angular 2 + Rails 5

React

Atualmente na versão 16, o React é uma biblioteca criada dentro do Facebook e ainda mantida por ele até hoje. Ela segue o mesmo princípio de componentização presente no Angular e no Ember, porém de maneira mais enxuta.

Diferente dos dois frameworks MVVM anteriores (Angular e Ember), o React não vem com todas as ferramentas necessárias instaladas para criar um SPA por exemplo.

De início, ele só vem com a biblioteca padrão para componentizar os elementos da página e devemos instalar bibliotecas externas para inserir rotas, chamadas assíncronas e etc.

Até mesmo os comandos de geração (para gerar um projeto com as dependências instaladas por exemplo) que hoje são comuns em outros frameworks, não existe por padrão no React, mas você pode utilizar algumas ferramentas como o create-react-app e o React Boilerplate para ter essas facilidades.

O React não utiliza arquivos HTML para fazer as componentizações. No lugar, ele utiliza um conceito chamado JSX, que é basicamente embuir tags HTML num arquivo JS.

Um exemplo de JSX:

Para aprender mais sobre React acesse o Artigo: React Spa: Crie seu primeiro APP em 15 minutos

Vue.js

Vue.js é um framework relativamente novo, atualmente na versão 2 e como a própria documentação diz, é focado na view da aplicação.

Diferente de outros frameworks, o Vue.js é um framework que parece enxugar bastante o excesso de código necessário para data binding e componentização. Apesar de ser focado apenas na view e não utilizar o MVVM, o Vue.js possui mapeamento de atributos bem parecidos com o AngularJS (a versão 1).

Nos docs, vemos que é o Vue.js é um framework progressivo, que te dá a liberdade de utilizá-lo apenas em algumas partes do código ou nele como um todo. O Vue.js possui consigo uma CLI e dois plugins oficiais que podem opcionalmente serem importados na ferramenta que são o Vuex e o VueRouter, que te ajudam a construir aplicações que contenham lógicas mais robustas como SPAs, por exemplo.

Para aprender mais sobre VueJS acesse o Artigo: Comece hoje com o VueJS

Stimulus

De todas as ferramentas que falamos aqui, o Stimulus é o mais recente e creio que o com menores ambições. Ainda na primeira versão, sendo a 1.0.1 lançada em Fevereiro de 2018, ele não visa nada mais que ser apenas uma pequena ponte entre o HTML e o JS.

Possui uma documentação bem simples e curta e é muito fácil de compreender. No geral, ele fica aguardando encontrar um atributo data-controller no código e associa com o arquivo JS que possui o mesmo nome neste atributo. Por exemplo, se houver um data-controller=’myjs’ ele vai detectar e procurar pelo arquivo myjs_controller.js e mapear todos elementos internos para este controller.

Esse mapeamento lembra bem a Convenção sobre Configuração do Rails. E não é pra menos, já que o Stimulus foi criado e está sendo mantido pela Basecamp (mesmos criadores do Rails).

Para aprender mais sobre o Stimulus acesse o Artigo: Stimulus On Rails: Front-end rápido e com pouco esforço

Não perca nenhum conteúdo

Receba nosso resumo semanal com os novos posts, cursos, talks e vagas o/

Isso é obrigatório.

Me Inscrever

JS no Back-end

Nesta parte vamos falar um pouco de como o JS entrou também no mundo back-end através do Node e do framework Express.

NodeJS

Depois de muito tempo operando apenas um aplicações front-end, alguém teve a ideia de levar o javascript também para o backend. Foi então que Ryan Dahl, em 2009, criou o NodeJS, um interpretador de códigos JS que funciona do lado do servidor.

O NodeJS é uma runtime que utiliza a V8 Javascript Engine, uma máquina virtual desenvolvida em C# pela Google e que é utilizado no Chrome para acelerar a execução do código JS.

Foi uma ideia que deu muito certo. Atualmente o Node já se encontra na versão 9.11, uma comunidade altamente engajada e grandes patrocinadores como Google, IBM e Microsoft.

Express

Como diz no próprio site, o Express é uma framework minimalista para o NodeJS.

Minimalista pelo fato de não ter um alto acoplamento de recursos necessários para sua utilização. Se quisermos utilizar como uma API é fácil disponibilizar uma sem muitos arquivos e configurações.

Ele possui uma CLI que precisa ser instalada a parte, mas não tem muitos recursos alternativos para auxiliar na construção de grandes aplicações. O framework é minimalista ao ponto de não vir com mapeamento de objeto relacional (ORM) e deixa este como opção para plugins de terceiros.

JS no Mobile

Nesta parte de mobile vamos falar sobre dois frameworks mobile, o Ionic e o React Native, que utilizam como base dois outros frameworks que já vamos ver.

Ionic

O Ionic é um framework para construção de aplicativos mobile híbridos (e também PWA’s) que foi criado em 2012 e vem evoluindo desde então.

Ele tem como base o Framework Web Angular (então se você sabe Angular, vai ser fácil usar o Ionic) e utiliza o Apache Cordova para acessar os dispositivos do Mobile (câmera, microfone e etc).

Diferente dos APPs criados com o React Native, Swift ou Kotlin os APPs gerados com o Ionic não são nativos, ou seja, eles rodam dentro de uma webview (um browser especial do mobile sem barra de navegação e etc).

Para aprender mais sobre o Ionic acesse o Artigo: Criando um APP com Ionic 2 + Rails 5 API

React Native

O ReactNative é um framework javascript mobile que foi construído com base no React e tem sido adotado por muitos desenvolvedores e empresas.

A parte importante do React Native que o torna tão interessante é que ele não emula um aplicativo mobile, ele é um APP com elementos nativos. Ou seja, em vez de utilizar uma webview como Ionic, o React Native utiliza os elementos nativos do dispositivo.

O React Native possui ainda duas coisas realmente interessantes, a primeira delas é uma ferramenta chamada Hot Reloading, que ao contrário de algumas tecnologias que recompilam todo o app quando uma atualização é feita ele recompila apenas o arquivo que está sendo alterado e exibe, o que demora, de acordo com o site do próprio React Native menos de 1 segundo e a segunda é que durante o desenvolvimento, é possível adicionar código nativo do SO no código do React Native.

Para saber mais sobre o React Native acesse nossa Live sobre ele: Conhecendo o React Native

JS no Desktop

Aqui vamos falar sobre uma ferramenta incrível que foi desenvolvida como JS para construção de aplicações desktop, o Electron.

Electron

O Electron é uma ferramenta relativamente nova. Nasceu em 2013 como base de um editor de texto open source criado pelo Github e posteriormente foi desacoplado para uma ferramenta de desenvolvimento desktop.

Ele utiliza arquivos HTML, CSS e JS para renderizar um aplicativo desktop exatamente como uma página web. Para fazer isso, o Electron utiliza o Chrome de um jeito minimalista, somente com o básico para ser capaz de renderizar, e sem o sandbox model, um recurso que impede que as páginas web acessem a API do SO por motivos de segurança, ou seja, podemos aproveitar todos os recursos de desenvolvimento de um aplicativo web e ainda acessar recursos do Sistema Operacional quando necessário.

Um grande número de ferramentas estão sendo criadas com ele (Atom, VsCode, Postman, Typora e etc) principalmente porque ele é multiplataforma, ou seja, com o mesmo código você gera um APP para MAC, Windows e Linux.

Pra quem tem dúvida sobre a utilização, vale ler a documentação e ver a imensa gama de ferramentas que já foram construídas com o Electron aqui.

Conclusão

Sem dúvidas o Javascript é uma linguagem que está passando por uma evolução muito grande, neste post fizemos um apanhado das ferramentas que tem se destacado neste mundo e que vale a pena você conhecer (se achar que falou algo comenta aí em baixo).

Mas claro que com essa grande movimentação e criação de frameworks e ferramentas, também vem o problema do “Hype“, onde os desenvolvedores ficam se perguntando: devo usar? vai vingar? por que usar?

Essas são perguntas que têm preocupado muitos desenvolvedores que estão começando na linguagem e até mesmo os mais experientes, então se você está começando um novo projeto tente buscar as bibliotecas mais maduras e com bons exemplos de APPs em produção (para evitar entrar em um projeto que será posteriormente abandonado).

Série Full Stack

Esse foi o segundo post da Série Full Stack onde focamos no ecossistema Javascript, nesta sequência de artigos estamos trazendo várias tecnologias diferentes do mundo Full Stack para te ajudar a escolher o que aprender, se você tem sugestões de outras linguagens e frameworks para falarmos aqui comenta aí em baixo.

Aproveite e veja também o nosso primeiro Post da série: Python: Uma introdução rápida para você que é iniciante

Obrigado 🙂

Não perca nenhum conteúdo

Receba nosso resumo semanal com os novos posts, cursos, talks e vagas o/

Isso é obrigatório.

Me Inscrever

Primeira vez no OneBitCode? Curtiu esse conteúdo?
O OneBitCode tem muito mais para você!

O OneBitCode traz conteúdos de qualidade, e em português, sobre programação com foco em Ruby on Rails e também JavaScript.
Além disso, aqui sempre levamos à você conteúdos valiosos sobre a carreira de programação, dicas sobre currículos, portfólios, perfil profissional, soft skills, enfim, tudo o que você precisa saber para continuar evoluindo como Programador(a)!

Fique por dentro de todos os conteúdos o/

Nossas redes sociais:

📹 • https://youtube.com/Onebitcode [Live todas as terças-feiras às 19h)
💻 • https://linkedin.com/company/onebitcode
🙂 • https://facebook.com/onebitcode
 📱  • https://instagram.com/one_bit_code
🐦 • https://twitter.com/onebitcode

Nossos cursos:

🥇 • Programador Full Stack Javascript em 8 Semanas
💎 • Curso Completo de Ruby
 ⚙  • Minicurso: API Rails 5 Completo
🐞 • Minicurso de Testes para Ruby on Rails com RSpec

Espero que curta nossos conteúdos e sempre que precisar de ajuda, fala com a gente!
Estamos aqui para você 🙂

Bem-vindo à família OneBitCode o/