JavaScript

JavaScript Game Engines

Olá, Web Developers!

Podemos usar o elemento <canvas> do HTML5 para criar jogos com JavaScript. Para nos ajudar com tarefas triviais (como gerenciamento de som, animações, física, etc) foram criadas game engines. Listarei as principais.

PhoneGap - Apache Cordova Mobile Framework
Curso de PhoneGap - Apache Cordova Mobile Framework
CONHEÇA O CURSO

MelonJS

O melon.js é um framework leve, bem simples de se usar e gratuito. Ele também possibilita a integração com ferramentas de terceiros, aumentando o seu poder.

Para a criação das telas, usa-se o http://www.mapeditor.org

Você pode testar um dos jogos criados com melon.js neste link: http://melonjs.github.io/tutorial-platformer/tutorial_step9/index.html

PlayCanvas

O PlayCanvas nos permite criar jogos 2D e 3D com JavaScript. Ele é gratuito e open source.

Você não precisa baixar nada! O PlayCanvas possui um tipo de IDE que roda diretamente no seu navegador. Todo o código fica armazenado no sistema deles. Ele suporta vários tipos de arquivos, incluindo objetos 3D.

Se você criar uma conta gratuita, seus projetos ficam públicos e terá um limite de 200MB de armazenamento. Para criar projetos privados, é necessário pagar um plano. O plano pessoal é de $15 por mês.

Quando quiser publicar seu jogo, você pode optar por deixá-lo hospedado no PlayCanvas ou baixar o projeto e hospedar onde quiser.

ImpactJS

O Impact é uma das engines de jogos para JavaScript mais conhecidas. Ele é bem leve, poderoso e simples de aprender a usar. Possui seu próprio editor de telas, ferramentas de debug e teste de performance.

A comunidade é bem ativa. Ele também possibilita a criação de Plugins. O mais famoso é o Impact++ (http://collinhover.github.io/impactplusplus/). Esse plugin gratuito acrescenta várias funcionalidades avançadas para você utilizá-las de maneira bem simples.

O valor da licença é de $99. Se você pretende ganhar dinheiro com jogos para HTML5, é um bom investimento.

Phaser

Outra engine bem conhecida é o Phaser. Ele é gratuito e está sempre sendo atualizado pela comunidade no github.

O Phaser também oferece o Phaser Sandbox, que te permite escrever código diretamente do navegador e testá-lo para não precisar baixar nem instalar nada. Depois você pode baixar o código se quiser. E tudo isso sem precisar se cadastrar!
Isso é ótimo para quem quer experimentar o Phaser.

Também há o Phaser Editor, que é uma IDE baseada no Eclipse para a criação de jogos com Phaser. Porém, ela é paga ($30).

Conclusão

Se você está pensando em começar a desenvolver jogos, saiba que o conceito é sempre o mesmo. Isso significa que se você aprender a usar o ImpactJS, terá facilidade em usar o Phaser e vice-versa.

Minha linguagem de programação principal é o JavaScript, mas eu só recomendo o uso dessa linguagem no desenvolvimento de jogos se o seu alvo for apenas o navegador. O código fica leve, o jogo carrega muito rápido e é bem simples de fazer testes com as DevTools do navegador.

Se o seu alvo não for o navegador ou quiser desenvolver para várias plataformas, eu recomendo usar game engines como o Unity3D. Ele exporta código nativo para mais de 25 plataformas diferentes, incluindo HTML5 (WebGL). Isso fará seu jogo ter mais performance do que um jogo escrito com JavaScript exportado como um aplicativo híbrido, sem contar nas várias funcionalidades que o Unity fornece para a criação de jogos 2D e 3D.

SEO - Search Engine Optimization
Curso de SEO - Search Engine Optimization
CONHEÇA O CURSO

O que se pode fazer com JavaScript hoje em dia?

Olá, Web Developers!

O JavaScript inicialmente foi criado como um complemento para o navegador da Netscape. Por muito tempo foi visto como uma linguagem ruim, bagunçada e lenta (e estavam certos).

Mas o JavaScript evoluiu muito. Hoje em dia é bem mais organizado, rápido e possui várias funcionalidades que nos facilitam criar várias coisas. Além disso, a linguagem não se limita mais apenas aos navegadores.

Vamos conhecer algumas áreas onde podemos atuar com JavaScript além do seu uso comum e até além dos navegadores. Dessa maneira você poderá usar seus conhecimentos em JavaScript e escolher entrar em alguma área além da web, como desenvolvimento de jogos, robótica, automação, etc.

Observação: esse post não incentiva o uso de JavaScript para tudo. Há de se ponderar a melhor ferramenta/tecnologia para o problema que se precisa resolver.

JavaScript Básico
Curso de JavaScript Básico
CONHEÇA O CURSO

Node.js

Node.js

Não tem como começar essa lista sem falar do Node. Ele é basicamente uma ferramenta que executa o JavaScript fora do navegador. Quando instalado, chamamos o Node.js pelo terminal. Como não estamos executando o JavaScript em um navegador, os cuidados com segurança são diferentes.

Há várias funcionalidades disponibilizadas para o Node.js, fazendo com que possamos fazer coisas com JavaScript que não conseguimos fazer quando o nosso ambiente é o navegador.

Um exemplo é o acesso a arquivos. Um código JavaScript no navegador não consegue acessar os arquivos do usuário, pois seria uma falta de segurança você entrar em um site e ele vasculhar seu computador.Como o Node.js está instalado em sua máquina, o JavaScript tem liberdade de acessar os arquivos contidos no HD.

O Node.js possibilitou a criação de várias outras ferramentas para podermos usar JavaScript fora do navegador, e hoje em dia é um conhecimento obrigatório para quem quer trabalhar com JavaScript.

https://nodejs.org/

Node.js Completo
Curso de Node.js Completo
CONHEÇA O CURSO

npm

O Node.js vem com o “npm” (node package manager). Com ele podemos gerenciar as dependências de nossos projetos.

Um exemplo: caso queira usar jQuery em seu projeto, ao invés de ter o trabalho de fazer download do jQuery, basta executar o comando:

$ npm install jquery

Caso queira atualizar a versão do jQuery em seu projeto, basta executar o comando:

$ npm update jquery

O npm também pode ser usado para instalar outros programas que podem nos auxiliar no desenvolvimento de nossas aplicações e executar comandos.

https://www.npmjs.com/

Webpack - Empacotando aplicações
Curso de Webpack - Empacotando aplicações
CONHEÇA O CURSO

Testes

Quando estamos escrevendo código é preciso fazer muitos testes para assegurar que nossas funções estão retornando o valor esperado. É bom sempre testar a mesma função passando vários valores diferentes, inclusive valores que a função não aceita para ver se há necessidade de criar um tratamento para a aplicação não quebrar.

Acontece que qualquer alteração em uma função pode afetar outras funções. Então há ferramentas que facilitam a criação de testes.

Os mais famosos são: QUnit, Mocha e Jasmine.

JavaScript - Testes automatizados com Jasmine
Curso de JavaScript - Testes automatizados com Jasmine
CONHEÇA O CURSO

Qualidade de Código

Quando estamos escrevendo nosso código, é muito importante mantê-lo com qualidade. Uma característica de um código de qualidade é mantê-lo uniforme.

Isso inclui sempre identar o código, padronizando a quantidade de espaços ou se será usado “tab”, se ao criar uma função você irá abrir chaves “{“ na mesma linha ou em uma linha nova, etc.

Há ferramentas como o JSLint e JSHint que analisam o nosso código e indicam se estamos mantendo as regras que foram definidas.

Automatização de Tarefas

Quando estamos desenvolvendo é comum precisarmos realizar certas operações para melhorar o nosso código. Um exemplo é minificar o nosso código, fazendo com que os arquivos fiquem menores, o que faz a aplicação ser carregada mais rapidamente pelo navegador.

Outras tarefas podem ser a execução de testes de qualidade, como o JSLint, ou testes de software, como o Jasmine.

Para nos auxiliar temos os automatizadores de tarefas. Os mais famosos são o Grunt e o Gulp. Podemos definir qualquer tarefa e pedir para que estas ferramentas as executem para nós.

Imagine que quando salvamos um arquivo, ele deve ser testado pelo Jasmine, analisado pelo JSLint e, se todos os testes passarem, iremos minificar o arquivo.

E mais! Podemos querer também que se tudo der certo, ele envie um E-mail para o nosso cliente dizendo que em breve iremos lançar uma nova versão da nossa aplicação!

Eles nos ajudam a automatizar o que quisermos, o limite é sua imaginação!

Webpack - Empacotando aplicações
Curso de Webpack - Empacotando aplicações
CONHEÇA O CURSO

Servidores

Normalmente os códigos escritos no lado do servidor são feitos com linguagens como Java, PHP, Ruby, etc.

Com o Node.js foi possível começar a escrever código para o servidor com JavaScript. Já houve outras tentativas, mas o Node.js teve mais sucesso.

Os frameworks mais conhecidos para Node.js são: Express, Hapi e Koa.

Também podemos criar código Back End com o Meteor. O Meteor é uma plataforma de desenvolvimento fullstack (front e back end).

Express - Otimização de aplicações Node.js
Curso de Express - Otimização de aplicações Node.js
CONHEÇA O CURSO

Bancos de Dados

O MongoDB é um banco de dados orientado a documentos. O console que usamos para acessar os dados executa JavaScript. Então se você sabe JavaScript, pode ter facilidade em aprender a gerenciar o MongoDB.

https://www.mongodb.com/

MongoDB - Desenvolvedor
Curso de MongoDB - Desenvolvedor
CONHEÇA O CURSO

Aplicativos Mobile

Com JavaScript também podemos criar aplicativos mobile. A vantagem é usar uma única linguagem de programação para as diferentes plataformas. O modo mais conhecido é usando o Cordova/PhoneGap. Com eles nós criamos aplicações híbridas.

São chamadas de “híbridas” porque unem duas tecnologias diferentes. Por exemplo, o código nativo do Android é escrito em Java. Com o Cordova nós criamos aplicações web comuns, com HTML+CSS+JavaScript. Para acessar funcionalidades do dispositivo, há uma integração do código nativo em Java e nós acessamos essas funcionalidades pelo JavaScript.

Quando abrimos o aplicativo, estamos na verdade abrindo um navegador interno que irá apresentar a nossa aplicação e que pode acessar funcionalidades do dispositivo que não poderíamos acessar a partir de uma aplicação web comum.

Então a ideia de “híbrido” é porque estamos juntando tecnologia web com a tecnologia nativa.

http://facebook.github.io/react-native/

Também podemos criar aplicações nativas. As ferramentas mais conhecidas são o React Native e o NativeScript. Com eles nós criamos telas com XML ao invés de HTML, e podemos estilizar com CSS. Isso será convertido para uma tela nativa de cada plataforma, como Android e iOS. Já as ações são escritas com JavaScript mesmo.

A vantagem disso é que, por ser uma aplicação nativa ao invés de uma aplicação com um navegador, teremos melhor performance do que uma aplicação híbrida.

Outra vantagem é que as aplicações híbridas dependem do navegador padrão do sistema, então corremos o risco de criar um código que o navegador daquele dispositivo não suporte. Em uma aplicação nativa, já que não dependemos de navegadores, não precisamos nos preocupar se haverá suporte para as funcionalidades ou não.

React Native - Criação de aplicações móveis
Curso de React Native - Criação de aplicações móveis
CONHEÇA O CURSO

Softwares Desktop

Com o Node.JS também é possível criar aplicações Desktop. Estas aplicações normalmente utilizam o Chromium, navegador de código aberto que está por trás do Google Chrome, e o Node.js.

As telas são feitas com HTML5 e CSS3, e o JavaScript pode se comunicar diretamente com o Node.js, que fica embutido na aplicação.

Atualmente o framework mais utilizado é o Electron, criado pela equipe do GitHub. Com ele já foram desenvolvidos famosos softwares como o Atom, Slack e Visual Studio Code.

https://electronjs.org/

Electron - Criação de aplicações desktop
Curso de Electron - Criação de aplicações desktop
CONHEÇA O CURSO

SmartTVs

Também é possível criar aplicativos para SmartTVs. Você irá também usar HTML/CSS/JavaScript. As que dão maior suporte para isso são as TVs da Samsung.

3D

A partir do elemento canvas do HTML5 também temos uma API chamada WebGL. Ela nos ajuda a trabalhar com renderização de gráficos 2D e 3D.

Uma biblioteca que nos ajuda a trabalhar com 3D com JavaScript é o three.js.

https://threejs.org/

Jogos

Também é possível criar jogos com JavaScript. Isso graças ao elemento canvas do HTML5, que nos permite desenhar na tela com JavaScript.

Há várias bibliotecas que nos ajudam a criar jogos com JavaScript.
Uma das mais famosas é o Impact, que é paga. Uma outra famosa, que é gratuita, é o Phaser.

Como os jogos apenas usarão o elemento canvas do HTML5 e JavaScript, você poderá criar jogos para qualquer lugar que os suporte ou possua um navegador.

Pode-se usar ferramentas como o Cordova/Phonegap, mas também há outras ferramentas que ajudam a otimizar jogos feitos com JavaScript para dispositivos móveis.

Plugins

Há softwares que possibilitam a criação de plugins. Isso permite que as pessoas criem novas funcionalidades para eles. Normalmente esses plugins são escritos com linguagens de scripts.

Um exemplo é o PhotoShop. Ele aceita a criação de plugins escritos em JavaScript.

Sistemas Operacionais

Um sistema baseado no Node.js, escrito apenas com JavaScript, foi desenvolvido. É o NodeOS.

Qualquer pacote do npm é um pacote do NodeOS, o qual conta com mais de 475.000 pacotes. O objetivo do NodeOS é fornecer apenas o necessário e o npm cuida do resto. Já que qualquer um pode contribuir com o npm, qualquer um pode criar pacotes para o NodeOS.

Você pode ver mais em:

http://node-os.com/

Programação de Hardwares e Internet das Coisas

Com o Node.JS também é possível controlar hardwares. Podemos então usar o JavaScript para trabalhar além das telas dos computadores e celulares, como controlar drones.

Ao programar placas, podemos criar códigos para até mesmo integrar vários objetos, o famoso “Internet das Coisas” (IoT).
Imagine usar JavaScript para controlar as lâmpadas, portas e janelas de sua casa de acordo com a iluminação do ambiente. Ou que quando o GPS do seu smartphone perceber que você está chegando em casa ou no trabalho, ligue a cafeteira para que o café esteja pronto quando você chegar.

Um exemplo é o noduino, um framework para acessar os controles básicos do Arduino a partir de aplicações web usando HTML5, Socket.IO e Node.JS.

Também há o projeto Tessel. No próprio site você pode comprar as placas para montar o seu produto.

Outro famoso projeto é o Cylon.js. Ele é um framework voltado para robótica, computação física e Internet das Coisas.

Você pode ver mais em:

Hologramas

O JavaScript também é capaz de ser utilizado com hologramas.
Um exemplo é o HoloJS, da Microsoft, que é um framework para criar aplicações holográficas usando JavaScript e WebGL.

Realidade Virtual e Realidade Aumentada

Muito se fala sobre Realidade Virtual e Realidade Aumentada. Um exemplo para realidade aumentada é o JavaScript ARToolKit.

https://github.com/artoolkit/jsartoolkit5

Inteligência Artificial

Também podemos aproveitar o JavaScript na área da inteligência artificial. Há muitas bibliotecas e exemplos.

Uma biblioteca usada para isso é a “deeplearn.js”, que você pode conhecer melhor em:

https://deeplearnjs.org/ .

Concluindo

Hoje em dia várias linguagens de programação tentam estar onipresentes, como é o caso do JavaScript. Porém, nem sempre é algo bom. Não existe “bala de prata”. Há linguagens que estão mais evoluídas e adaptadas para certas áreas.

Mesmo que JavaScript seja minha linguagem principal, há momentos em que prefiro usar outras linguagens de programação, pois admito que possuem ferramentas melhores para se trabalhar e acabam entregando algo com mais rapidez e qualidade.

A vantagem que enxergo em utilizar uma única linguagem em várias áreas é possibilitar que uma pessoa com conhecimento em uma linguagem possa experimentar novas áreas, ou que uma pequena empresa possa reaproveitar os conhecimentos da equipe e códigos para trabalhar com outras tecnologias.

JavaScript Avançado
Curso de JavaScript Avançado
CONHEÇA O CURSO

Como um jogo digital é criado?

Olá, Web Developers!

Hoje vou mostrar como um jogo é criado. Para podermos ver ele funcionando aqui no navegador, usaremos JavaScript, mas esse conceito é basicamente o mesmo na criação de jogos com outras linguagens, frameworks e ferramentas, então nem é preciso conhecer a linguagem para entender.

Depois, mostrarei como os conceitos apresentados aqui estão presentes em ferramentas profissionais.

Vamos lá!

A tela (canvas)

Um jogo precisa de um lugar que nos possibilite exibir imagens. Normalmente esse elemento é chamado de canvas, que significa “tela de pintura”. Esse é um elemento que nos permite desenhar e renderizar imagens nele.

No Java e no C# por exemplo, temos a classe Canvas. No HTML5 possuímos o elemento <canvas>, que é o que iremos usar. Será o nosso único HTML. Todo o resto será desenhado no canvas.

Também teremos um CSS simples só para alinhar o canvas no meio da tela.

<canvas id="myCanvas" width="400" height="200" ></canvas>
canvas{
    border: 1px solid black;
    margin: 0 auto;
    display: block;
}

Agora todo o resto será JavaScript!

Desenhando na tela

Vamos fazer um simples desenho no canvas.

// primeiro selecionamos o elemento canvas
const canvas = document.querySelector('#myCanvas');
/* depois pegamos o contexto, que irá nos fornecer as funções
para desenhar no canvas.
*/
const ctx = canvas.getContext('2d');

/* a função "fillRect()" nos permite desenhar um retângulo.
Passamos a posição x, posição y, largura e altura.
*/
ctx.fillRect(25, 25, 50, 50);

Quadrado no Canvas

O que é uma animação?

Uma animação é basicamente a apresentação de várias imagens ligeiramente diferentes. Isso nos passa a ilusão de movimento.

Kirby Walking Sprite

Kirby Walking Sprite

No exemplo acima temos várias imagens que, ao serem exibidas uma após a outra, nos fazem pensar que estamos vendo o personagem se mover.

Cada imagem é chamada de frame(quadro). Quanto mais frames por segundo (FPS), mais natural será a ilusão de movimento. Os jogos hoje em dia costumam trabalhar em 60 FPS.

Então, o que acontece se pegarmos o canvas, limpá-lo, desenhar, limpá-lo novamente e fazer um desenho levemente diferente? Isso mesmo! Teremos a ilusão do movimento.

Para isso, basta desenharmos o quadrado com uma posição diferente a cada momento. Então podemos armazenar a posição em uma variável e criar um looping.

O Looping

Como os jogos são basicamente uma tela de desenho com vários elementos sendo desenhados a todo instante, uma das partes principais de um jogo é o Looping.

Basicamente teremos um Looping Infinito que limpa a tela, desenha os elementos no canvas baseado nas variáveis que possuímos e repete esse processo sem parar.

Vamos mudar um pouquinho o nosso código para ver o que acontece.

const canvas = document.querySelector('#myCanvas');
const ctx = canvas.getContext('2d');
/* declaramos uma variável que armazenará a posição
x do nosso quadrado.
*/
let x = 0;
/* o "setInterval()" repete a execução de uma
função de acordo com um tempo que passamos.
Neste caso, a função se repeta a cada 50 milissegundos.
Isso significa que desenharemos no canvas 20 vezes por
segundo, ou seja, teremos 20 frames por segundo.
*/
setInterval(function(){
    // aqui estamos limpando o canvas inteiro
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    // após limpar o canvas, desenhamos o quadrado
    // na posição x
    ctx.fillRect(x, 25, 50, 50);
    // após desenhar o quadrado, alteramos nossa
    // variável x
    x+= 1;
    /* só para não perdermos o quadrado de vista,
    fiz com que o x volte a 0 caso o quadrado
    saia do canvas
    */
    if(x > canvas.width){
        x = 0;
    }
}, 50);

Isso fará com que o quadrado ande pela tela, como você pode ver logo abaixo:

Observação: No JavaScript, ao fazer animações, é recomendado o uso da função requestAnimationFrame() ao invés de setTimeout() ou setInterval();

Carregando imagens

Jogos utilizam vários recursos como áudio e imagens. Vamos criar uma função que irá carregar imagens.

Se tentarmos desenhar a imagem antes dela ter sido carregada, ocorrerá um erro. Então vamos aproveitar as Promises do JavaScript para iniciar o desenho no canvas apenas quando a imagem já estiver carregada.

// ...
/* essa função receberá o endereço de uma imagem
*/
function loadImage(src){
    /* ela retorna uma promise, que permite a
    execução de uma função apenas quando ela
    for resolvida
    */
    return new Promise(resolve => {
        /* criamos um elemento de imagem para
        carregar a imagem.
        */
        var img = document.createElement('img');
        /* criamos um listener que será executado
        assim que a imagem for carregada. Quando a
        imagem terminar de ser carregada, resolvemos
        a promise, retornando a imagem.
        */
        img.addEventListener('load', () => { 
            resolve(img); 
        });
        /* pegamos o elemento de imagem e passamos
        o endereço da imagem. Isso iniciará o
        carregamento
        */
        img.src = src;
    });
}

/* iniciamos o carregamento da imagem. Assim que
a imagem for carregada, a promise é resolvida e
a função seguinte é executada.
*/
loadImage('https://i.imgur.com/WyqxuaD.png')
    .then(function(sprite){
        setInterval(function(){
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            // desenhamos a imagem ao invés do retângulo
            ctx.drawImage(sprite, x, 25, 50, 50);
            x+= 1;
            if(x > canvas.width){
                x = 0;
            }
        }, 50);
  })

Com isso teremos o Kirby passando pela tela.

Para não termos que tratar a criação de uma animação, usei aqui uma imagem estática mesmo.

Organizando o código: O objeto Game

Até agora só fizemos bagunça. Vamos organizar mais o nosso código, o que nos permitirá ter mais controle também.

const canvas = document.querySelector('#myCanvas');

/* alterei levemente a função de carregar
imagens. Agora ele recebe um objeto em
que armazenaremos a imagem carregada,
e também passamos o nome do campo
em que a imagem será armazenada.
*/
function loadImage(src, storage, field){
    return new Promise(resolve => {
        var img = document.createElement('img');
        img.addEventListener('load', () => {
            storage[field] = img;
            resolve(img);
        });
        img.src = src;
    });
}
/* Todo o código que controla o jogo
ficará dentro desse objeto "Game"
*/
const Game = {
/* guardei o contexto do canvas dentro de Game
*/
    ctx : canvas.getContext('2d'),
/* a função start() será responsável por iniciar
o jogo. Ela executa a função load() e, quando
tudo estiver carregado, inicia o looping.
*/
    start(){
        this.load().then(() =>{
        /* guardo o interval na variável timer.
        Assim seremos capazes de parar o looping do
        jogo caso seja necessário.
        */
            this.timer = setInterval(() => {
            /* o looping executa essas duas funções.
            Logo veremos o que elas fazem.
            */
                this.update();
                this.draw();
            }, 30);
        })
    },
    /* a função stop() limpa o nosso interval, fazendo
    o jogo parar de ser executado.
    */
    stop(){
        clearInterval(this.timer);
    },
    /* a função load() é onde nós iremos carregar nossas
    imagens. Quando tudo é carregado, ele retorna uma promise.
    Assim garantimos que o jogo só será inicado quando
    todos os recursos estiverem carregados.
    */
    load(){ 
        return loadImage('https://i.imgur.com/k6heF1k.png', Game, 'background');
    },
    /* criei a função clear() para facilitar a limpeza do canvas.
    */
    clear(){
        this.ctx.clearRect(0, 0, canvas.width, canvas.height);
    },
    /* a função draw() será responsável por executar
    tudo o que for relacionado em desenhar algo no canvas.
    Em sua primeira linha nós já executamos o clear().
    */
    draw(){
        this.clear();
        this.ctx.drawImage(this.background, 0, 0, canvas.width, canvas.height);
    },
    /* a função update() serve para atualizarmos algum valor.
    Imagine que você queira criar um "relógio". Como a 
    função update() fica sendo executada pelo looping,
    podemos ir atualizando o tempo nela. Com o valor
    alterado, a função draw() cuidará do resto.
    */
    update(){
    }
}

/* chamamos essa função para iniciar o jogo.
Por enquanto tiramos o Personagem. Temos só
o fundo. Criaremos o personagem a seguir.
*/
Game.start();

Criando um personagem: O objeto Character

Agora que temos o objeto Game cuidando de tudo, está mais fácil criarmos outros objetos que estarão presentes no nosso jogo.

Vamos criar um personagem que poderemos controlar.

Em um jogo real, para poder reutilizar o código, seria mais comum criarmos uma classe. Mas como a ideia aqui é simplificar só para fins didáticos, eu vou criar um objeto literal mesmo.

// criamos o objeto Character para o nosso personagem
const Character = {
/* declaramos algumas variáveis que nos permitirão
ter mais controle do personagem.
Ao criar o seu jogo, poderá criar as variáveis que quiser.
*/
    x: 50, // controla a posição horizontal
    y: 125, // controla a posição vertical
    speed: 5, // controla a velocidade do movimento
    /* a função start() é executada apenas uma vez
    quando o personagem é inserido na tela
    */
    start(){
    /* aqui aproveitamos a funçõa start() para
    começar a escutar eventos do teclado.
    Verificamos se determinada tecla está sendo
    pressionada, e assim alteramos o valor da
    variável x, que fará com que o personagem
    seja desenhado em uma posição diferente,
    dando a ilusão de movimento.
    */
        window.addEventListener('keypress', (event) => {
            const key = event.key;
            switch(key){
                /* note que alteramos o valor
                da variável de posição com o valor
                que indicamos na variável de velocidade.
                */
                case 'a': this.x -= this.speed; break;
                case 'd': this.x += this.speed; break;
            }
        });
    },
    /* a função draw recebe o contexto do canvas e
    desenha a imagem do personagem, armazenada na
    variável sprite.
    Veja que desenhamos com base nas variáveis
    que declaramos.
    */
    draw(ctx){
        ctx.drawImage(this.sprite, this.x, this.y, 32, 30);
    },
    /* e também declaramos uma função update() caso
    seja preciso.
    */
    update(){
    }
}

Inserindo o personagem no jogo

Agora que temos um objeto Character pronto para ser usado, temos que inseri-lo no jogo. Vamos então fazer algumas alterações no objeto Game para inserir nosso personagem no jogo.

const Game = {
    // ...
    start(){
        // chamamos o start() do personagem.
        Character.start()
        this.load().then(() =>{
            this.timer = setInterval(() => {
                this.update();
                this.draw();
            }, 30);
        })
    },
    // ...
    load(){
    /* agora estamos fazendo com que o load()
    aguarde o carregamento do sprite do personagem
    e do background do jogo.
    */
        return Promise.all([
            /* carregamos o sprite do personagem
            e armazenamos a imagem na propriedade
            sprite dentro de Character
            */
            loadImage('https://i.imgur.com/WyqxuaD.png', Character, 'sprite'),
            loadImage('https://i.imgur.com/k6heF1k.png', Game, 'background'),
        ]);
    },
    // ...
    draw(){
        this.clear();
        this.ctx.drawImage(this.background, 0, 0, canvas.width, canvas.height);
        /* Adicionamos a chamada da função draw()
        de Character
        */
        Character.draw(this.ctx);
    },
    // ...
}

Agora sim temos a seguinte tela:

Kirby - Green Greens

E com as teclas “A” e “D” você pode controlar o Kirby para a direita e esquerda.

O que aprendemos sendo usado na prática

Vamos ver o que aprendemos sendo usado por ferramentas profissionais.

Phaser

Phaser

Uma ferramenta muito usada para criar jogos com JavaScript é o Phaser.

https://phaser.io/examples/v2/games/breakout

No link acima temos um exemplo de um jogo clássico. Se você olhar o código que está junto, verá que o funcionamento é bem parecido com o código que criamos manualmente:

var game = new Phaser.Game(800, 600, Phaser.AUTO, 'phaser-example', { preload: preload, create: create, update: update });
/*
Iniciamos um novo jogo com a função "Phaser.Game()".
Para essa função, passamos o tamanho do canvas
(800x600).
No final, temos um objeto que passa as funções
preload(), create() e update().
preload() serve para carregar os recursos do
jogo antes dele ser iniciado, e para isso chamamos
"game.load".
create() é a função executada uma única vez
quando o jogo é criado.
update() é a função que é executada várias
vezes enquanto o looping estiver ativo.
*/

Game Maker

GameMaker Studio

O GameMaker é muito conhecido por possibilitar que as pessoas criem jogos sem saber programar. Você pode simplesmente arrastar ícones para criar a lógica do seu jogo.

Apesar disso, o GameMaker possui uma linguagem de programação própria que é bem simples de se aprender, possibilitando fazer coisas bem mais avançadas.

GameMaker IDE

Note que na edição da lógica temos a parte “Events”. Nele temos o evento “Create” (igual ao que conhecemos) e o evento “Step” (igual ao update). Vários outros eventos podem ser adicionados.

Unity3D

Unity3D

Outra ferramenta bem conhecida é o Unity3D, uma ferramenta bem completa para a criação de jogos e que exporta código nativo para mais de 25 plataformas. A linguagem usada é o C#.

Adam

Vamos dar uma pequena olhada em uma classe criada com C# para o Unity:

using UnityEngine;
using System.Collections;

public class Character : MonoBehaviour {

    public float speed = 0.5f;

    // Use this for initialization
    public void Start () {
        // ...
    }

    // Update is called once per frame
    public void Update () {
        // ...
    }
}

Com o Unity temos uma IDE completa para o desenvolvimento de jogos. Note que ainda temos funções como Start() e Update().
Agora você já sabe o que essas funções fazem né?

Também temos outros métodos que são chamados em determinados momentos, que facilitam muito na hora de desenvolver as ações. Um exemplo é o Awake(), OnGUI(), OnDestroy(), etc.

Conclusão

Entender como um jogo funciona é uma ótima base para conseguirmos entender como as ferramentas para a criação de jogos funcionam, facilitando o aprendizado.

Vimos então que jogos possuem um looping que desenha em uma tela com base nas variáveis, as quais podem ser alteradas de acordo com nossas ações. E esse conceito está presente em todas as ferramentas de desenvolvimento de jogos, desde as mais simples até as mais profissionais.

As ferramentas nos ajudam a tratar o carregamento de arquivos, como executar áudio e vídeo, como renderizar imagens, simular física (colisões, gravidade, atrito, etc), construção de cenários e posicionamento de objetos, desenvolvimento de animações, gerenciamento dos controles, otimização de memória, etc.

clipboard.js – Copiar e Colar com JavaScript

Olá, Web Developers!

Há momentos em que precisamos permitir que o usuário copie algo para a sua área de transferência (clipboard). Porém, isso pode ser complicado em alguns momentos, seja por APIs antigas ou implementação específica de algum navegador.

Um modo que era bastante usado tratava-se de criar um elemento em flash escondido na página. Isso permitia enviar os dados para a área de transferência do usuário, mas flash não é uma opção hoje em dia e alguns navegadores até o deixa desabilitado por padrão, como é o caso do Chrome.

Para facilitar essa tarefa de modo simples e com um código bem leve (3kb) veio ao mundo o clipboard.js. Ele usa a Clipboard API do HTML5 e foi criado pelo brasileiro Zeno Rocha.

JavaScript Básico
Curso de JavaScript Básico
CONHEÇA O CURSO

Instalação

Você pode baixar o clipboard.js com o seguinte comando:

npm install clipboard --save

Ou faça download do arquivo js pelo site https://clipboardjs.com/.

Após incluir a biblioteca à sua página, instancie passando um seletor DOM, elemento HTML ou lista de elementos HTML.

new Clipboard('.btn');

Como usar?

Fazer a ação de um elemento copiar o conteúdo de outro elemento é um caso de uso bastante comum.

Na imagem abaixo temos um exemplo: um botão que faz com que o conteúdo de um input seja copiado.

Input com Copy to Clipboard

Para fazer isso funcionar, teríamos um HTML assim:

<!-- Target -->
<input id="input1" value="https://treinaweb.com.br">

<!-- Trigger -->
<button class="btn" data-clipboard-target="#input1">
    <img src="assets/clippy.svg" alt="Copy to clipboard">
</button>

Quando iniciamos a biblioteca, passamos a classe .btn. Isso fará com que as funções da biblioteca entrem em ação sempre que clicarmos em um elemento com a classe “btn”.

Veja que no nosso HTML temos um botão com essa classe. Mas como indicar para a biblioteca qual elemento possui o conteúdo que esse botão deve pegar e enviar para a área de transferência? Para isso a biblioteca usa atributos. Veja que no botão indicamos com o atributo data-clipboard-target o ID do nosso input.

Dessa maneira podemos ter vários botões com a classe “.btn”, e eles serão responsáveis por disparar a ação da biblioteca. Em cada botão a gente pode passar o id de um input. Veja que após iniciar a biblioteca a gente não precisou de mais nenhuma linha de JavaScript!

O comportamento padrão é o de copiar o texto. Caso você passe para o botão o atributo data-clipboar-action com o valor "cut", a ação de recortar será executada.

Também há a possibilidade de se ouvir eventos a partir do objeto clipboard que instanciamos lá no começo, além de outras funcionalidades mais avançadas.

Suporte

O clipboard.js funciona nos seguintes navegadores:

  • Chrome (42+)
  • Edge (12+)
  • Firefox (41+)
  • IE (9+)
  • Opera (29+)
  • Safari (10+)

Até a próxima!

JavaScript Avançado
Curso de JavaScript Avançado
CONHEÇA O CURSO

Devo transformar meu site em uma PWA?

Olá, Web Developers!

Vocês sabem o que são PWA’s? Será que vale a pena transformar uma página web em uma PWA?

PWA - Progressive Web Apps
Curso de PWA - Progressive Web Apps
CONHEÇA O CURSO

O que são PWA’s?

PWA vem de “Progressive Web App” e a ideia é juntar o melhor dos aplicativos nativos e tecnologias web. É importante notar que não estamos falando de aplicativos híbridos.

PWA’s são aplicações web comuns, então só precisamos de HTML, CSS e JavaScript. Porém, possuem características que fazem o usuário se sentir em um aplicativo nativo.

Aqui as características que definem uma PWA:

1. São progressivas

Elas vão funcionar em qualquer contexto, não importando o dispositivo ou navegador. Deve-se verificar se alguma funcionalidade que você vai usar encontra-se disponível no navegador do seu usuário. Se não, proporcionar algum comportamento para que a página não quebre e passe uma má experiência.

2. São responsivas

A interface e funcionalidades se adequam a qualquer tamanho de tela, desde um pequeno smartphone até uma grande Smart TV.

3. Não precisam de conexão

Nós projetamos essas aplicações para poderem funcionar mesmo quando o usuário não estiver conectado, usando o Cache para servir os arquivos e o Storage do navegador para armazenar dados.

4. Parecem aplicativos

Criamos a interface e as interações de modo que se pareçam com um aplicativo ao invés de um simples site.

5. Sempre Atualizadas

Fazemos com que a aplicação sempre esteja atualizada. As aplicações podem sincronizar em background, mesmo quando estiverem fechadas.

6. Seguras

PWAs devem ser obrigatoriamente fornecidas pelo protocolo HTTPS.

7. Fáceis de Descobrir

Criamos um arquivo de manifesto para que eles possam ser identificados como “aplicativos”, e por ser uma página web, os mecanismos de busca, como o Google, conseguem indexá-los.

8. Envolvente

Podemos estimular a interação do usuário com a aplicação graças às notificações.

9. Instaláveis

Os apps podem ser salvos na tela inicial como um aplicativo instalado, dispensando a necessidade do usuário abrir o navegador.

10. Simples de Compartilhar

Por serem páginas web, podem ser facilmente compartilhadas por sua URL.

Steve Jobs já pensava nisso em 2007

Em 2007, a ideia original de Steve Jobs para o iPhone era que os aplicativos fossem aplicações web.

Segundo ele:

Toda a engine do Safari está dentro do iPhone. Sendo assim, vocês podem escrever incríveis aplicativos para a Web 2.0 com Ajax que se parecem e se comportam exatamente como aplicativos no iPhone. E esses aplicativos podem se integrar perfeitamente com os serviços do iPhone. Eles podem fazer chamadas, enviar um email e procurar por uma localização no Google Maps.

E, adivinha? Não há SDK que você precise! Você tem tudo o que precisa se você souber como escrever aplicativos usando os mais modernos padrões web para escrever aplicativos incríveis para o iPhone hoje. Então, desenvolvedores, achamos que temos uma história muito doce para vocês. Vocês podem começar a construir seus aplicativos para iPhone hoje.

Mas, essa ideia foi alterada em 2008.

Quem usa?

Um ótimo lugar para ver uma lista de PWA’s é o site PWA Rocks.

Várias companhias grandes estão testando PWA e integrando em seus sites, como Washington Post e Flipboard, e outras estão começando a lançar sites betas para testes.

O Twitter Lite é uma PWA completa, e você pode acessá-la por: https://mobile.twitter.com

Quando usar PWA?

Caso precise de várias funcionalidades nativas do dispositivo ou um processamento mais pesado, então pode ser melhor criar um app nativo mesmo. Caso esteja pensando em criar um site ou webapp, criar como PWA é uma boa escolha.

Se você já tem um site ou uma aplicação web, você pode implementar aos poucos as características que definem uma PWA, como notificações, cache de arquivos e dados para o usuário poder acessar offline (que faz a página carregar mais rapidamente também), a possibilidade de salvar o app na tela inicial, receber atualizações de dados mesmo quando estiver com o app fechado, etc.

Implementar apenas algumas dessas características não fará com que você tenha uma PWA completa, mas terá pelo menos uma aplicação otimizada.

Caso queira saber mais sobre o assunto, acabamos de lançar um curso completo sobre PWA aqui no TreinaWeb. Confira:

PWA - Progressive Web Apps
Curso de PWA - Progressive Web Apps
CONHEÇA O CURSO

O que há de novo no React 16?

Olá, Web Developers!

O React, agora na sua 16ª versão, foi totalmente reescrito, mas tenha calma que não haverá grandes quebras. Caso sua aplicação esteja usando a versão 15.6, pode migrar sem se preocupar.

O Twitter Lite já está usando a versão 16 e perceberam uma redução no tamanho dos arquivo e melhora na performance.

React - Introdução
Curso de React - Introdução
CONHEÇA O CURSO

As principais novidades

Dentre as novidades, destacamos:

Licença MIT

Houve muita discussão sobre o React ter adotado a licença BSD+Patents. Agora você pode usar o React sem se preocupar com patentes, pois agora ele está sob a Licença MIT.

Ainda mais leve!

Mesmo com novas funcionalidades, o tamanho agora da biblioteca diminuiu cerca de 32%.

Versão 15

  • react – 20.7kb (6.9kb com gzip)
  • react-dom – 141kb (42.9kb com gzip)

Versão 16

  • react – 5.3kb (2.2kb com gzip)
  • react-dom – 103.7kb (32.6kb com gzip)

Tratamento de Erros

Antes um erro em um componente poderia quebrar a aplicação. Agora podemos colocar em nossos componentes o método componentDidCatch() para tratar erros.

Render com Arrays, Strings e Numbers

Quem trabalha com React sabe que o método render() sempre deve retornar um único elemento. Caso você queira retonar uma lista de elementos, você deve criar um container para eles.

Agora você pode retornar um Array de elementos. Por ser um Array, você ainda precisará adicionar o atributo key aos elementos.

render() {
  return [
    <li key="A">item 1</li>,
    <li key="B">item 2</li>,
    <li key="C">item 3</li>,
  ];
}

E também pode-se retornar uma simples String:

render() {
  return 'Hello TreinaWeb!';
}

Suporte para atributos personalizados

Antes os atributos que a gente passava para o HTML ou SVG que não fossem reconhecidos eram ignorados. Agora o React os mantém.

<!-- nosso código -->
<div mycustomattribute="something" />

<!-- React 15 -->
<div />

<!-- React 16 -->
<div mycustomattribute="something" />

Portals

O React 16 te permite inserir um elemento filho em um local diferente no DOM, fora da sua árvore principal.

React - Dominando Componentes
Curso de React - Dominando Componentes
CONHEÇA O CURSO

Imagine o seguinte cenário:

<body>
  <div id="root"></div>
  <div id="my-portal"></div>
<body>

Agora imagine que você tenha um componente na div “root”. Com Portals você pode pegar este componente e mandar renderizá-lo na div my-portal.

Um exemplo de uso: se tiver um elemento que deva aparecer na página e reaparecer ao abrir uma modal, teríamos que chamar nosso componente em dois lugares (na página e na modal) e passar as propriedades para ele.

Com Portals bastaria indicar o elemento que se quer pegar e onde quer exibí-lo. Precisa alterar alguma propriedade passada para o componente? Altere apenas em um lugar.

No Facebook, quando você inicia um vídeo e começa a navegar, o vídeo aparece em uma modal para te permitir navegar e continuar vendo o vídeo. Isso poderia ser feito facilmente com Portals.

Retornando null em setState()

Antes a função setState() apenas atualizava um valor do estado do componente.

Agora podemos colocar uma função dentro de setState(). Se esta função retornar null, o estado não é atualizado.

const newNumber = 7;

this.setState(state => {
   if(state.myNumber === newNumber){
      return null;
   }else{
      return {myNumber: newNumber};
   }
});

No código acima verificamos se o newNumber é igual ao número que temos no estado do componente. Caso sim, retornamos null, o que evitará mudança no estado do componente.

React - Tópicos Avançados
Curso de React - Tópicos Avançados
CONHEÇA O CURSO

O que ficou obsoleto?

Algumas alterações que podem causar quebras em relação às versões anteriores:

  • Descontinuação do suporte aos React-Add-ons
  • Chamar setState() com null não dispara mais atualizações
  • Chamar setState() diretamente dentro de render() sempre causa atualizações.
  • Callbacks de setState() agora são disparados após componentDidMount() ou componentDidUpdate().
  • ReactDOM.render() e ReactDOM.unstable_renderIntoContainer() agora retornam null se forem chamados de dentro de um método do lifecycle.

Ah, não deixe de conhecer o nosso curso de React:

Um abraço e até a próxima! 😉

Quando usar sessionStorage e localStorage?

Olá, Web Developers!

Hoje vou falar sobre um erro comum que vejo muitos colegas cometerem: usam o localStorage para armazenar variáveis temporárias.

Quem usa sabe que o localStorage nos permite armazenar dados de forma simples e sem expiração, ou seja, ficam lá enquanto não apagarmos por código ou pelo próprio navegador.

localStorage.setItem('name', 'Treinaweb');  // <- prefira esta forma
localStorage['name'] = 'Treinaweb';

Porém, já vi situações em que é necessário armazenar um valor logo que o usuário abre a página e manter esse valor enquanto o usuário estiver navegando, mesmo que ele mude de página.

Por ter a possibilidade do usuário clicar em um link e mudar de página (ou recarregá-la), uma variável comum não servirá, pois terá seu valor perdido.

Por isso, muitos desenvolvedores que conhecem o localStorage aproveitam-se dele para esse objetivo. No entanto, o localStorage não tem seus valores apagados, o que causa a necessidade do programador verificar se o usuário acabou de entrar na página para poder apagar ou reiniciar os valores que armazenou no localStorage.

É exatamente para essas ocasiões que existe o sessionStorage. Seu funcionamento e API são idênticos aos do localStorage, com a diferença de que os dados só duram durante a sessão. O usuário pode até mesmo ir para outro site, e as variáveis permanecerão. Elas só serão apagadas quando o usuário fechar o navegador.

sessionStorage.setItem('name', 'Treinaweb');
sessionStorage.getItem('name');

Imagine que o usuário está preenchendo um formulário e pensa em verificar uma informação em outra parte do seu site. Você poderia armazenar os dados do formulário para ele continuar quando voltar. Ao voltar ao formulário, o trabalho dele ainda estará lá.

Se não tem sentido o formulário continuar preenchido caso o usuário tenha fechado o navegador, sem problemas, pois isso irá apagar o sessionStorage, e quando ele voltar, o formulário estará em branco, pronto para um novo preenchimento.

Desta maneira você poderá iniciar suas variáveis temporárias, acessar seus valores enquanto o usuário navega (mesmo que seja para outro site), e não precisará se preocupar em apagar os valores, pois serão apagados automaticamente quando o usuário fechar a janela.

Então, quando precisar de uma variável temporária, lembre-se que o sessionStorage existe para isso. Use o localStorage apenas para dados que devem se manter gravados mesmo com o fechamento do navegador.

Até a próxima!

Funcionalidades do jQuery com a API nativa do JavaScript

Olá, Web Developers!

Em outro post falamos sobre quando usar e quando não usar o jQuery. Agora nós vamos ver sobre as principais funcionalidades do jQuery que podemos executar apenas com JavaScript nativo. Lembre-se que a maioria dessas funcionalidades estão presentes apenas em navegadores modernos.

JavaScript Básico
Curso de JavaScript Básico
CONHEÇA O CURSO

Busca de elementos

A principal funcionalidade do jQuery é a busca de elementos. Quando no JavaScript tínhamos funções com nomes compridos e diferentes para cada tipo de seleção (nome do elemento, ID, nome da classe, etc), o jQuery facilitava nossa vida oferecendo uma busca por seletores escritos com a sintaxe do CSS. Hoje em dia isso é possível com a função querySelectorAll().

Também podemos usar essa função para fazer uma busca dentro do elemento selecionado.

// jQuery
var el  = $('div #abc .def');  
$(el).find('button.close');

// JS
var el = document.querySelectorAll('div #abc .def');  
el.querySelectorAll('button.close');  

Requisições Ajax

Uma das funcionalidades mais usadas é a função $.ajax(). Ela é bem mais simples e direta do que trabalhar com o velho objeto XMLHttpRequest.

Hoje em dia nós possuímos a função fetch(), que é tão simples quanto a função $.ajax() e nos permite trabalhar com Promises:

// jQuery
$.ajax({
  'url': '/my/url',
  'type': 'POST',
  'data': JSON.stringify(data)
});

// JS
fetch('/my/url', {  
  'method': 'POST',
  'body': JSON.stringify(data)
})

Classes CSS

Também é comum trabalharmos com a inserção e remoção de classes dos elementos. Poucos usam as funções do JavaScript (muitos nem as conhecem) porque normalmente manipulam com jQuery ou usam algum framework que acaba manipulando os elementos automaticamente.

// jQuery
$(el).addClass('my-class');
$(el).removeClass('my-class');
$(el).toggleClass('my-class');
$(el).hasClass('my-class');

// JS
el.classList.add('my-class');  
el.classList.remove('my-class');  
el.classList.toggle('my-class');  
$(el).hasClass('my-class');

Extend

Esta função permite que os valores de um ou mais objetos sejam atribuidos em outro objeto.

// jQuery
$.extend({}, objA, objB);

// JS
Object.assign({}, objA, objB);  

Uma diferença aqui é que o jQuery permite que os campos de nível mais profundo do objeto sejam misturados, enquanto a função nativa do JavaScript só permite uma união nos níveis mais rasos do objeto.

Eventos

Esse é bem conhecido: adicionar e remover listeners em elementos.

O que não atrai muito (como a maioria das funcionalidades) é a diferença do tamanho do nome das funções.

// jQuery
$(el).on(eventName, eventHandler);
$(el).off(eventName, eventHandler);

// JS
el.addEventListener(eventName, eventHandler);  
el.removeEventListener(eventName, eventHandler);  

Finalizando

Uma lista bem completa de funcionalidades do jQuery feitas com JavaScript puro pode ser encontrada em:

http://youmightnotneedjquery.com/

Porém, como dito anteriormente, deve-se analisar bem as necessidades do projeto para poder dizer se devemos incluir ou não o jQuery.

JQuery Completo
Curso de JQuery Completo
CONHEÇA O CURSO

Compartilhe as suas ideias com a gente aí nos comentários? o/

Ainda vale a pena utilizar o jQuery?

Olá, Web Developers!

Hoje trago aqui algumas reflexões sobre a biblioteca JavaScript mais famosa, o jQuery. Será que ainda vale a pena utilizá-lo?

Ainda é muito comum ver empresas, tanto no Brasil quanto no exterior, cobrando o conhecimento de jQuery. Normalmente ocorre um dos dois motivos para esse requisito: falta de conhecimento de quem escreveu o perfil da vaga ou necessidade de dar suporte a um código legado.

A API do jQuery é bem simples de se aprender, então, nesse caso, será um ponto positivo em seu currículo (mesmo que provavelmente você nem precise utilizar na nova empresa), e não te tomará tanto tempo assim.

Conhecimento nunca é demais. Não precisa estar totalmente atualizado sobre as novidades e conhecer tudo o que está na documentação. Pelo menos saber como ele funciona, sim, vale muito a pena. Há muitos cenários possíveis no mundo da programação e pode aparecer um caso em que a ferramenta se encaixe perfeitamente para a sua necessidade.

Quando devo usar jQuery?

A maior parte dos desenvolvedores dirão “nunca!” para essa pergunta logo de prima. Mas, vamos analisar alguns pontos positivos:

1) Caso precise trabalhar com o DOM, o uso do jQuery pode ajudar, já que sua API é mais elegante e simples do que o JavaScript puro.

2) Caso esteja criando um projeto pequeno, como um site simples, não fará sentido usar um framework poderoso. Se for trabalhar com muitas funções das quais o jQuery possua, ele pode ser um belo aliado para se escrever menos código.

3) Outra vantagem é sua simplicidade. Normalmente a maioria dos desenvolvedores novatos conseguem aprender a usar jQuery mais rapidamente do que outros frameworks ou a API do DOM. Assim, eles já conseguem criar efeitos, animações, requisições e lidar com eventos.

4) Há muitos plugins e ferramentas que usam jQuery. É comum encontrar boas soluções para algumas situações e, nesses casos, o jQuery acaba sendo uma dependência obrigatória. Mas, se possível, prefira procurar algo independente de jQuery para não ter que incluí-lo apenas por causa de uma funcionalidade.

5) O jQuery era muito apreciado por normalizar as diferenças de funcionalidades que existiam entre navegadores. Então, caso ainda precise dar suporte a navegadores mais antigos, o jQuery pode ser uma boa pedida.

6) Por ser simples e direto ao ponto, pode ser perfeito caso esteja apenas precisando criar um protótipo rápido. Eu adoro tentar fazer várias coisas com CSS puro e evitar o máximo de JavaScript, mas tenho que admitir que animações e efeitos com jQuery são bem mais rápidos e simples de se escrever.

JQuery Completo
Curso de JQuery Completo
CONHEÇA O CURSO

Quando evitar?

1) Hoje em dia temos várias funcionalidades do jQuery no próprio JavaScript e as animações são melhores quando feitas com CSS3. Caso só precise dar suporte aos navegadores modernos, provavelmente não precisará do jQuery.

2) Não é bom ficar acessando o DOM diretamente. Caso precise atualizar muito as informações na tela, exibir muitas informações ou acessar o DOM frequentemente, prefira um framework ao invés de usar jQuery ou JavaScript puro, pois eles já são otimizados para se trabalhar com templates, acessando o DOM o mínimo possível. Há também bibliotecas leves que servem apenas para criar componentes com uma ótima performance.

3) O jQuery tem como principal objetivo facilitar o uso de funcionalidades simples do JavaScript (“write less, do more”). Porém, em muitas aplicações será muito comum a necessidade de funcionalidades mais complexas como: roteamento, componentização, formatação, modularização, validações, etc. Nesses casos, para realmente escrever menos, você provavelmente precisará de um framework, o qual terá tantas funcionalidades que dispensará o uso de jQuery.

4) Ao escrever várias funcionalidades com jQuery, é muito comum misturar HTML no meio do JavaScript, dentro de funções. O uso de frameworks modernos nos ajuda a separar e manter o código mais organizado.

5) Em aplicações grandes, você terá muito mais trabalho para gerenciar cada pedaço do que cada código faz. Com jQuery, muitas funcionalidades serão escritas por você, enquanto que com um framework, muitas coisas já estarão prontas e testadas. Tem pessoas que tem medo de frameworks com muita “mágica”, porém, se você souber como usar estas “mágicas” a seu favor, você desenvolverá muito mais rápido e sem erros. As próprias linguagens de programação são “mágicas” em certas funcionalidades. Nós simplesmente aprendemos a utilizá-las ao invés de ficar pensando em como cada bit de informação será processado.

6) O site http://youmightnotneedjquery.com/ possui uma grande lista de funcionalidades do jQuery e como fazer o mesmo com JavaScript puro. Várias funcionalidades são simples de aprender, e as mais complexas você pode encapsular em uma função, evitando ter que incluir a biblioteca inteira caso precise apenas de uma ou outra, apenas.

Vue.js - Criação de interfaces web
Curso de Vue.js - Criação de interfaces web
CONHEÇA O CURSO
Angular - Criação de interfaces web
Curso de Angular - Criação de interfaces web
CONHEÇA O CURSO

Então, devo ou não utilizá-lo?

Como sempre, a maioria das coisas em programação resume-se em “depende”.

A melhor maneira de saber se deve ou não usar alguma coisa é ter um bom conhecimento sobre as ferramentas disponíveis, conhecimento da equipe, quais as necessidades do projeto, tempo disponível, etc.

Não há uma resposta absoluta. O melhor mesmo é ter a cabeça aberta para se fazer uma boa análise do que será necessário fazer no projeto e escolher as melhores ferramentas. Fuja de pessoas que usam a palavra “sempre” para alguma biblioteca ou framework pois, normalmente, possuem pouco conhecimento em outras ferramentas.

Espero que os pontos levantados aqui te ajudem a se decidir em seu próximo projeto. Caso tenha outras ideias de quando usar ou evitar, compartilhe com a gente aí nos comentários. =)

Aprenda a formatar as mensagens do console do navegador

Olá, Web Developers!

Muitos aqui sabem que os navegadores possuem console e que podemos executar o comando console.log() para imprimir mensagens e objetos, o que nos ajuda muito na hora de fazer debug.

JavaScript Básico
Curso de JavaScript Básico
CONHEÇA O CURSO

Porém, quando entramos em sites como, por exemplo, o Facebook e abrimos o console, podemos ver a seguinte mensagem:

Facebook Console

Muitas pessoas não sabem, mas as mensagens do console podem ser estilizadas em alguns navegadores. Para o exemplo a seguir, abra o console em seu computador e clique na aba Result:

Você terá o seguinte resultado:

Console JavaScript - Formatação de Cores

Para poder estilizar as mensagens do console, basta colocar %c junto ao texto que você está passando para o comando console.log() (ou qualquer outra função que imprima algo no console, como console.warn()). Em seguida, basta passar a estilização como um segundo parâmetro. Ela é feita via CSS mesmo:

console.log('%c Meu Texto','color: white; background-color: red;');

Mas, já que estamos falando de CSS, que tal também imprimir uma imagem?

No console, execute o seguinte comando:

console.log('%c', 'padding: 40px 45px;line-height:100px;background:url("http://i65.tinypic.com/dnixjm.png") no-repeat;background-size: cover;');

Você terá o seguinte resultado:
Console com Imagem

Ok, mas o console é mais para debug. Por que eu usaria isso?

Um cenário é quando a sua equipe usa muito o console para monitorar algo durante o desenvolvimento e deixa várias mensagens sendo impressas. Poder formatá-las, colocar imagens, etc, pode ajudar a deixá-lo mais organizado, facilitando a leitura dos conteúdos impressos. Mas há de se ter cautela, pois muitas mensagens sendo impressas com o console aberto podem afetar a performance da sua página e isso vai te atrapalhar no processo de desenvolvimento.

Um ótimo caso é fazer algo parecido com o Facebook. Se há possibilidade dos seus usuários abrirem o console para tentar algo, você pode chamar a atenção deles avisando que eles mesmos podem estar correndo algum tipo de risco.

O terceiro motivo é quando a intenção é exatamente fazer com que o usuário abra o console para usá-lo. Quando você entra no site da biblioteca RxJS e abre o console, você é recebido com uma simples mensagem dizendo que você pode experimentar os códigos da biblioteca diretamente por ele. Nesse caso, você poderia receber o usuário com o logo do seu projeto e uma mensagem com uma formatação simples (se o navegador dele suportar).

RxJS Console

E aí, o que achou? Já usou essa funcionalidade? Compartilhe com a gente aí nos comentários!

React - Dominando Componentes
Curso de React - Dominando Componentes
CONHEÇA O CURSO

© 2004 - 2019 TreinaWeb Tecnologia LTDA - CNPJ: 06.156.637/0001-58 Av. Paulista, 1765, Conj 71 e 72 - Bela Vista - São Paulo - SP - 01311-200