JavaScript

Deno: conheça o suposto substituto do Node.js

Olá Web Developers! Acabou de ser lançada a versão 1.0 do Deno. Vamos conhecer esse suposto substituto do Node.js.

O que é Deno?

O Deno, assim como o Node.js, é um ambiente de execução de JavaScript. Ele foi feito pelo próprio criador do Node utilizando a linguagem Rust. Assim como o Node, Deno também utiliza o V8, engine de JavaScript do Google Chrome.

Por que outro interpretador de JavaScript?

Ryan Dahl, criador do Node, deu uma palestra em junho de 2018 na JSConf intitulada 10 Coisas que eu lamento pelo Node.js (10 Things I Regret About Node.js no original). Por mais que o Node tenha várias vantagens e seja muito usado, seu criador admitiu vários problemas.

Aliás, o Node.js foi criado em 2009, época em que o JavaScript nem tinha Promises ou async/await e nosso modo de trabalho, técnicas e boas práticas eram outras. O mundo todo era diferente. Lembre-se que sites eram feitos com tabelas, não usávamos smartphones, não havia YouTubers, etc.

Não só o Node.js possui problemas, como também várias linguagens, bibliotecas e frameworks. Todos nós, conforme vamos evoluindo na carreira de programador, aprendemos coisas novas e percebemos que algo que fizemos há algum tempo pode ser feito de maneira bem melhor. Além disso, a evolução de várias ferramentas e tecnologias também nos permite criar coisas melhores.

Isto é, com os aprendizados que Ryan Dahl teve em sua carreira, os desafios enfrentados com o Node e a evolução do JavaScript, ele pensou em criar algo novo. Logo após falar dos problemas do Node, Ryan apresentou seu novo trabalho, o Deno, que na época tinha apenas 1 mês de existência.

O Deno não apenas possui melhorias em coisas que foram consideradas ruins no Node, como o node_modules, como também possui várias novidades que o Node não tem e que são importantes.

Deno é mais seguro

Qualquer código no Node tem o poder de acessar coisas como sua rede e HD. Por outro lado, no Deno o seu código é executado em uma sandbox segura por padrão.

Ou seja, se você não der permissão, um código malicioso não poderá acessar suas informações. Isso se assemelha ao JavaScript nos navegadores, que apenas consegue acessar coisas como a câmera se o usuário der permissão.

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

TypeScript Integrado

O Deno não interpreta apenas JavaScript. Ele também interpreta TypeScript sem que você precise instalar nem configurar nada.

Essa decisão foi baseada no crescimento do uso do TypeScript em grandes projetos que precisam lidar com complexas lógicas de negócio. Tudo no Deno foi feito com o TypeScript em mente.

Deno não precisa de NPM ou node_modules

Projetos criados com o Node utilizam o NPM para gerenciar suas dependências. Os pacotes baixados ficam guardados na pasta node_modules, que facilmente chega a tamanhos enormes.

Assim como navegadores, o Deno sabe como buscar códigos externos. Ou seja, podemos importar o código de um arquivo passando seu endereço. Veja abaixo um exemplo da criação de um simples servidor que utiliza um arquivo TypeScript externo.

import { serve } from "https://deno.land/std@0.50.0/http/server.ts";

for await (const req of serve({ port: 8000 })) {
  req.respond({ body: "Hello World\n" });
}

Promises em todo lugar

O JavaScript é famoso por sua natureza assíncrona. Porém, o Node foi criado antes do JavaScript possuir coisas como Promises e Async/Await.

Como resultado da evolução do JavaScript em união da linguagem Rust, o Deno tem um moderno sistema baseado em Promises. Isso nos permite trabalhar mais facilmente com código assícrono, além de evitar os problemas que o Node tinha em seu sistema.

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

Deno é Compatível com Node?

Ainda que Node e Deno sejam interpretadores de JavaScript, o Deno não é totalmente compatível com os pacotes do seu irmão mais velho e outras ferramentas.

No entanto, uma camada de compatibilidade está sendo criada, mas ainda está longe de ser concluída.

Já posso trocar o Node.js pelo Deno?

A princípio, sim. O lançamento da versão 1.0 do Deno indica que ele já está em uma fase estável.

Ainda assim, lembre-se que o Deno está sendo desenvolvido há pouco mais de 2 anos. Ele não é um fork do Node, foi feito totalmente do zero. Por outro lado, o Node já possui mais de uma década de vida. Ou seja, o Node é mais maduro e possui uma comunidade bem maior.

Portanto, o mais indicado é sempre analisar as necessidades do seu projeto para poder escolher a tecnologia a ser usada.

Conheça o React, biblioteca para desenvolvimento Web

O React, lançado em 2013, é uma biblioteca JavaScript de código aberto, fundamental para criação de aplicações front-end.

Anteriormente denominado React.js ou ReactJS, foi desenvolvido pelo Facebook para criação de elementos de interface reutilizáveis de forma simples, intuitiva e com uma ótima performance.

Multiplataforma sobre a licença MIT, diversas são as empresas que o utilizam. Dentre elas podemos citar o próprio Facebook, o Instagram, que também faz parte da empresa Facebook, Twitter, Netflix, Uber, Spotify e muitas outras.

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

Principais características do React

O React possui diversas características marcantes, o que o torna uma excelente escolha para o desenvolvimento de aplicações, como podemos ver abaixo:

  • Licença MIT: Apesar de parecer bobagem, o react, hoje, é licenciado sob a MIT, o que tranquiliza os desenvolvedores que utilizam este framework, já que eles não precisam se preocupar com patentes;
  • Utiliza Javascript: O Javascript é uma das principais linguagens de desenvolvimento do mundo. Por utilizá-lo, o React agrega a maioria das suas vantagens, além de ser grandemente utilizado por diversos desenvolvedores;
  • Utiliza componentes: O React utiliza a componentização para criação de interfaces, garantindo uma maior flexibilidade e reutilização de interfaces;
  • Desenvolvimento móvel: Em conjunto com o react native, podemos desenvolver aplicações mobile reutilizando componentes criados com o react.
  • Amplamente utilizado: O React é uma das principais tecnologias para desenvolvimento web (e mobile) do mundo.

Empresas que utilizam o React

Diversas são as empresas que utilizam o React para o desenvolvimento de suas soluções, o que a torna uma tecnologia ainda mais atrativa. Dentre essas empresas, podemos citar:

  • Twitter: O Twitter, uma das principais redes sociais do mundo, utiliza o react para criação de suas aplicações;
  • Facebook: Apesar de ter desenvolvido o React, o Facebook também o utiliza para construção de suas aplicações;
  • Medium: O Medium, uma das principais plataformas de blog do mundo utiliza o React para construção de sua aplicação web;
  • Airbnb: Uma das principais plataformas de aluguel, o Airbnb utiliza o React em sua aplicação web.

Quais conhecimentos preciso ter para iniciar com o React?

Por utilizar o Javascript como base para sua construção, para iniciar com o React, é essencial que o desenvolvedor possua conhecimento com essa linguagem.
Além disso, é de grande importância que o desenvolvedor possua conhecimentos de HTML e CSS para a construção de interfaces.

Aqui na TreinaWeb possuímos diversos cursos de JavaScript, que abordarão todos os conceitos essenciais para iniciar com esta tecnologia.

Desenvolvedor Front-end Pleno
Formação: Desenvolvedor Front-end Pleno
HTML, CSS e JavaScript são a base de toda a web. Tudo o que você está vendo aqui agora depende deste tripé.Nesta formação vamos conhecer assuntos mais avançados do HTML5, CSS3 e JavaScript, conhecer o NPM, trabalhar com o RxjS (base do framework Angular), testes com Jasmine e uma pequena introdução ao TypeScript.
CONHEÇA A FORMAÇÃO

Sintaxe do React

A sintaxe do React é bem simples. Basicamente, os componentes do React implementam um método render() que recebe os dados de entrada e retornam o que deve ser exibido.

class Treinaweb extends React.Component {
  render() {
    return (
      <div>
        Olá, {this.props.nome}!
      </div>
    );
  }
}

ReactDOM.render(
  <Treinaweb nome="Treinaweb" />,
  document.getElementById('exemplo')
);

Este exemplo usa uma sintaxe parecida com XML, chamada JSX. Os dados de entrada que são passados para o componente podem ser acessados no render() via this.props.

Podemos concluir que…

O React é uma excelente biblioteca JavaScript para o desenvolvimento de aplicações web. Muitas empresas o utilizam, o que o torna ainda mais desejada, já que a quantidade de vagas é cada dia maior.

Em conjunto com o React Native, podemos reutilizar diversos componentes desenvolvidos com o React para a construção de aplicações móveis, tornando a solução ainda mais completa.

O que é DOM, Virtual DOM e Shadow DOM?

Olá Web Developers! Vamos entender de forma simplificada o que é o DOM e qual a diferença entre ele e os tão falados Virtual DOM e Shadow DOM.

O que é o DOM?

DOM significa Document Object Model (Modelo de Objeto de Documento). Ele é uma API que nos permite acessar e manipular documentos HTML e XML válidos.

Vamos usar o seguinte código como exemplo:

<!DOCTYPE html>
<html>
    <head>
        <title>Minha Página</title>
    </head>
    <body>
        <h1>Olá Web Developers!</h1>
        <p>E mais um texto aqui</p>
    <script type="text/javascript">window.NREUM||(NREUM={});NREUM.info={"beacon":"bam.nr-data.net","licenseKey":"NRJS-e7d61b56663ee7a3078","applicationID":"463033615","transactionName":"Y1FWYRZZV0NTUhUIXlobYUcNF05AHUYRTFBQWV1bS0hWQ0YfEQlB","queueTime":0,"applicationTime":871,"atts":"TxZVF15DRE0=","errorBeacon":"bam.nr-data.net","agent":""}</script></body>
</html>

Ele pode ser representado pela seguinte estrutura em árvores de nós (Node Tree):

Mesmo que se pareça muito com nosso código, o DOM não é exatamente igual a ele. Quando o HTML não é válido, os navegadores tentam arrumá-lo, gerando um DOM um pouco diferente. O DOM também não é exatamente o que vemos nas DevTools. Um exemplo são os pseudo-elementos criados com CSS. Não podemos acessá-los com JavaScript porque não fazem parte do DOM.

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

O que é Shadow DOM?

O Shadow DOM é uma tecnologia do navegador projetada para podermos criar componentes que contém uma aparência e comportamento sem influenciar os demais elementos a sua volta, escondendo sua estrutura.

Um exemplo bem simples: se você trabalha com HTML, provavelmente já viu a tag <video>, certo? Criei um arquivo apenas com esta tag. Mas ao mandar o navegador exibir o Shadow DOM, veja o que aparece:

Esta é toda a estrutura escondida dentro da tag <video>. Note que há várias <div>. Deixei selecionado no código um elemento, que é a barra de progresso do vídeo. Veja que ela é feita por um <input> do tipo range. E há vários outros elementos responsáveis pela estrutura e funcionamento da tag <vídeo>.

E não precisamos saber do que o elemento de reproduzir os vídeos é feito, como ele funciona ou como é estilizado. O Shadow DOM nos permite criar elementos assim, que possuem estrutura, estilo e comportamento encapsulados. Então o JavaScript e CSS de um componente não corre o risco de afetar outro componente. Basicamente essa é a diferença com o DOM comum: encapsulamento.

O que é Virtual DOM?

Quando estamos desenvolvendo aplicações com HTML, é por meio do DOM que podemos manipular os elementos presentes nele. Porém, cada acesso ao DOM leva um pequeno tempo, e cada alteração obriga o navegador a renderizar novamente a parte da tela afetada. Então se tivermos muitas coisas para atualizar, nossa aplicação terá problemas de perfomance.

É aí que entra o Virtual DOM (VDOM). Ele é uma representação do DOM mantida em memória. Assim, quando precisamos fazer alguma alteração, ela é feita no Virtual DOM, que é bem mais rápido que o DOM. Com isso ele analisa todos os lugares que serão afetados e sincroniza com o DOM em um processo chamado Reconciliação. A vantagem disso é que essa análise permite que haja o menor número possível de acessos ao DOM, melhorando muito a performance das aplicações.

Lembrando que o Virtual DOM não é algo do navegador, e sim, um conceito implementado por bibliotecas como o React.

Por ser algo feito em memória, e não algo preso ao DOM criado pelo navegador, o Virtual DOM também permite que a gente crie páginas no servidor. Hoje em dia é comum que algumas aplicações renderizem a tela inicial no servidor para enviar um HTML pronto com os dados ao usuário, passando a impressão de que tudo já foi carregado, para só então carregar o resto da aplicação. Isso pode ser feito utilizando bibliotecas e frameworks como Angular, React e Vue. Um caso bem famoso que utiliza esta técnica é a Netflix.

Desenvolvedor React Sênior
Formação: Desenvolvedor React Sênior
Nesta formação conheceremos a Arquitetura Flux, muito utilizada nas aplicações modernas e que nos trás muitos benefícios em relação às arquiteturas clássicas como o MVC. Aprenderemos a sua principal implementação, o Redux. Também veremos a trabalhar com código assíncrono com Redux Thunk e conceito de programação funcional com Redux-Saga.
CONHEÇA A FORMAÇÃO

JavaScript – Entendendo as partes estranhas

Olá Web Developers! Não importa a sua experiência com JavaScript: se já tiver estudado outra linguagem de programação, provavelmente já achou algum comportamento do JavaScript um pouco estranho. Então vamos conhecer e entender algumas partes estranhas da linguagem.

Mas antes já peço que você entenda que não existe comportamento errado em linguagem de programação. Cada linguagem é uma ferramenta criada com um propósito, e o criador tem a liberdade de escolher como cada funcionalidade vai se comportar. Falar mal do comportamento de uma linguagem seria o equivalente a tirar sarro de um cachorro por sua incapacidade de voar como os pássaros, não faz sentido.

Então, vamos conhecer comportamentos estranhos que muitas vezes são tratados como piada, mas que você verá que possui uma certa lógica por trás disso.

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

0.1 + 0.2 é diferente de 0.3

Essa é uma piada clássica com JavaScript que na verdade é uma certa injustiça. Tente fazer essa soma e terá o seguinte resultado:

0.1 + 0.2
// > 0.30000000000000004

Tudo no computador são 0 e 1. Então os computadores possuem certa dificuldade em trabalhar com números que possuem casas decimais, pois eles trabalham bem apenas com números inteiros. Números decimais são aproximações, o que pode causar imprecisão em certos cálculos.

Eu digo que é uma injustiça falar disso apenas em relação ao JavaScript, pois todas as linguagens que utilizam cálculos com pontos flutuantes possuem esse problema. É algo tão conhecido que você pode conferir o site http://0.30000000000000004.com/, que lista esta conta em várias linguagens de programação.

Não é à toa que existem bibliotecas nas mais variadas linguagens para quem precisa trabalhar com cálculos muito precisos ou números muito grandes (ou muito pequenos).

Soma e Subtração entre números e strings

Um bom código não misturaria outros tipos de dados em soma e subtração além de números, até porque daria erro. Mas nosso amigo JavaScript é super de boa, ele não liga. E então algumas pessoas podem achar estranho um exemplo bem simples:

"3" - 1
//> 2

Se deu certo, será que podemos fazer isso com a adição?

"3" + 1
//> "31"

No primeiro exemplo tivemos um resultado esperado, o número 2. Mas no segundo tivemos a string “31” ao invés do número 4.

Isso ocorre porque o operador - só serve para subtração. Então a string “3” é convertida automaticamente para o number 3, nos permitindo ter o resultado correto da subtração.

Porém, o operador + serve tanto para adição quanto para concatenar strings. No segundo exemplo, por termos a string “3”, o número 1 é convertido para string e ocorre a concatenação entre os valores ao invés de uma adição. Se a prioridade do operador + fosse adição, seria impossível concatenar números a uma string, como em:

const dia = 2;
"Hoje é dia " + dia;

Essas conversões automáticas são causadas pelo JavaScript ser uma linguagem de tipagem fraca. Aqui no blog temos um post que explica qual a diferença entre a tipagem forte e fraca.

A comparação de null com 0

Só faz sentido comparar se um valor é maior que outro se ambos forem valores numéricos, mas este é um outro exemplo comum e uma dúvida que já foi feita por alguns alunos aqui da TreinaWeb. Veja as seguintes comparações entre null e 0.

null > 0; //> false
null < 0; //> false
null == 0; //> false
null >= 0; //> true
null <= 0; //> true

Se algo não é maior, menor e nem igual que algo, como pode ser maior igual e menor igual? Acontece que cada uma das expressões são validadas de forma diferente seguindo as regras de comparação da linguagem:

Seguindo as regras de comparação relacional, nas comparações de > e < o null é convertido para +0 e 0 continua sendo 0. Como +0 é igual a 0, as comparações > e < serão falsas.

Já na comparação com ==, seguindo o algoritmo de comparação de igualdade descrito em 7.2.13 Abstract Equality Comparison, como nenhuma das condições é atendida, o valor padrão retornado é false.

Já as comparações >= e <= acabam funcionando da seguinte maneira: “Se null < 0 anteriormente resultou em false, então null >= 0 é true, pois se algo não é menor, só pode ser maior ou igual”. Até que faz sentido, não é mesmo?

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

Erro ao ordenar números com .sort()

Já vi palestrantes fazerem piada e tirarem gargalhadas da plateia por conta do seguinte comportamento ao tentar ordenar um Array de números:

[10, 1, 12, 2, 3, 25].sort()
//> [ 1, 10, 12, 2, 25, 3 ]

Acredito que se esse palestrante tivesse pelo menos estudado como o .sort() funciona de verdade, teria evitado tratar isso como algo errado. Que bom que a plateia dele também não trabalhava com JavaScript, ou ele teria passado vergonha no palco.

O comportamento padrão do .sort() é ordenar strings. Então, todos os nossos números são convertidos para string, o que explica o "10" vir antes de "2", já que 1 vem antes de 2. Acontece que a conversão é feita apenas durante a comparação, por isso que os números no resultado continuam sendo do tipo number. Posso te provar com um exemplo bem simples:

['[u', {nome: 'treinaweb'}, '[a'].sort()
//> [ '[a', {nome: 'treinaweb'}, '[u' ]

O objeto {nome: 'treinaweb'} é convertido em string pelo método .toString(), resultando em "[object Object]". Por isso que "[a" ficou antes e "[u" ficou depois, mas note que o Array ordenado manteve nosso objeto ao invés de deixá-lo convertido em string.

Se você quiser ordenar coisas que não são strings, o jeito certo é passar uma função para .sort() e indicar as regras para ele saber qual elemento deve vir antes e qual deve vir depois. Assim você pode ordenar números ou até mesmo objetos por um ou mais campos, como nome e idade.

[10, 1, 12, 2, 3, 25].sort((a, b) => a - b)
//> [ 1, 2, 3, 10, 12, 25 ]

Mais comparações com 0

Você já deve ter visto o seguinte meme sobre JavaScript baseado no desenho Bob Esponja, com Patrick e o Homem Raio no episódio O Homem-Sereia e o Mexilhãozinho III:

JavaScript - Comparação entre zero, zero string e array vazio

Basicamente:

0 == "0"
//> true

0 == []
//> true

"0" == []
//> false

Aqui é mais um caso em que há comparação entre dados de tipos diferentes. Quando fazemos comparações com ===, se os tipos forem diferentes o JavaScript já vai retornar que é falso. Comparações com == que utilizam dados de tipos diferentes fazem que o JavaScript converta um dos dados para poder fazer a comparação de seus valores. Por isso que é uma boa prática sempre utilizar ===, evitando comportamentos inesperados. Mas já que é algo recorrente nas redes sociais, vamos entender os motivos:

0 == “0”

Como mostrado nas regras da linguagem ao fazer comparações de igualdade (Abstract Equality Comparison):

  1. If Type(x) is Number and Type(y) is String, return the result of the comparison x == ! ToNumber(y).

Esse ToNumber é uma operação com as regras descritas na seção 7.1.3 ToNumber na especificação da linguagem.

Então na comparação entre 0 e “0”, por termos um número e uma string, o JavaScript vai converter o “0” em um número. Como 0 é igual a 0, o resultado é true.

0 == []

Na comparação entre 0 e [] seguimos outra regra. [] é considerado um objeto.

  1. If Type(x) is either String, Number, or Symbol and Type(y) is Object, return the result of the comparison x == ToPrimitive(y).

Esse ToPrimitive é uma operação com as regras descritas na seção 7.1.1 ToPrimitive na especificação da linguagem.

Então na comparação entre 0 e [], por termos um número e um objeto, o JavaScript vai pegar o valor primitivo de []. Você pode fazer isso executando [].toString(), que retornará uma string vazia. E faz sentido se pensarmos que uma string é um array de caracteres.

O JavaScript possui 8 valores considerados falsos. Qualquer coisa diferente disso é considerado verdadeiro:

  • 0 (número zero)
  • -0 (zero negativo)
  • 0n (0 no formato BigInt, seguindo a mesma regra do Number 0)
  • “” (strings vazias)
  • null
  • undefined
  • NaN

Como 0 e "" são valores falsos, a comparação entre 0 e [] (que é convertido em string vazia) é true, pois false é igual a false.

“0” == []

Aqui seguimos a mesma regra do item anterior. Temos a comparação de uma string e de um objeto. "0", por ser uma string, já é um tipo primitivo, então continua intacto. E como vimos anteriormente, [] é convertido numa string vazia.

Conversões feitas, então basta fazer a comparação: "0" == "". Seguindo a primeira regras das comparações, quando temos dois tipos iguais, a comparação é feita do mesmo jeito que o operador ===.

  1. If Type(x) is the same as Type(y), then
    a. Return the result of performing Strict Equality Comparison x === y.

Portanto, é simples de entender que uma string “0” é diferente de uma string vazia, certo? Por isso que o resultado dessa comparação é false.

E então, o que achou desta lista? Conhecia a razão de algum comportamento? Comente e diga se você gostaria de uma parte 2.

Desenvolvedor Front-end Júnior
Formação: Desenvolvedor Front-end Júnior
HTML, CSS e JavaScript são a base de toda a web. Tudo o que você está vendo aqui agora depende deste tripé.Nesta formação vamos iniciar aprendendo lógica. Teremos uma introdução ao HTML e CSS e conheceremos a linguagem JavaScript.
CONHEÇA A FORMAÇÃO

O que é Redux?

Redux é uma biblioteca para armazenamento de estados de aplicações JavaScript, criado por Dan Abramov. Ele nasceu através de uma implementação do Flux, uma arquitetura criada pelo Facebook para contribuir com as aplicações de User Interface, utilizando o conceito de fluxo de dados unidirecional. Quando desenvolvemos aplicações utilizando Javascript, sempre temos que lidar com o gerenciamento de estado. O Redux veio para suprir essa necessidade de simplificar o controle dos estados de uma aplicação. Compartilhar estados entre vários componentes diferentes se torna uma coisa muito fácil quando o utilizamos.

Ele basicamente tira a responsabilidade de cada um dos componentes de armazenar os estados, deixando tudo isso centralizado, sendo utilizado ao mesmo tempo por todos os componentes de forma compartilhada. Ele também roda em diferentes ambientes como servidor, cliente e nativo.

Fazendo o uso do Redux todos esses estados ficarão armazenados em uma árvore de objetos através do store. Para que isso aconteça, o Redux utiliza 3 recursos:

  • Store: você pode pensar em store como um container ou um grande centro de informações, que tem disponibilidade para receber e entregar o que o seu componente requisita. A store armazena de forma centralizada todos os estados da aplicação. Vale ressaltar que a store é imutável.
  • Actions: São ações disparadas da aplicação para o store. Elas são criadas através das action creators. As actions são a única forma de acionar uma mudança de estados no store.
  • Reducers: Cada dado da store deve ter o seu próprio reducer. Ele é encarregado de lidar com todas as ações e especificam como o estado da aplicação irá mudar de acordo com a action que foi enviada para o store.
React - Redux e Redux-Saga
Curso de React - Redux e Redux-Saga
CONHEÇA O CURSO

O fluxo geralmente funciona da seguinte forma: um componente gera uma interação através de um clique dado pelo usuário na interface – por exemplo, assim, um action creator é acionado e dispara uma ação para o store. Essa ação chega até um reducer que irá processar e fazer a alteração do estado no store. Assim um novo estado será disponibilizado para o componente.

Também é importante saber que o Redux tem 3 princípios, sendo:
Todos os estados estarão disponíveis exclusivamente através do store: todo o estado da sua aplicação vai estar armazenado nesse store que é único, onde todos os componentes vão consultar nesse store.
Os estados são somente leitura: os componentes não podem fazer uma manipulação direta nas informações que estão nele.
As alterações são feitas através de funções puras: o Redux utiliza o conceito de programação funcional, por isso toda alteração no store é feita através de uma função pura, chamada de reducer. O reducer recebe o estado e a ação, onde com essa ação nós visualizamos o que precisa ser alterado no estado e o reduce entrega uma nova store do nosso estado da aplicação.

Por ser uma biblioteca o Redux pode até ser utilizado sozinho, mas ele é normalmente implementado em um conjunto de outras libs ou frameworks JavaScript (Ember, Vue, Angular…). Mas o comum mesmo, que você até já deve ter visto, é vê-lo em funcionamento com o React. É muito comum ver projetos e exemplos de React com Redux juntos, mas é bom deixar claro que o Redux não depende do React.

Até a próxima!

O que é Electron?

Sabemos que o JavaScript é uma das principais linguagens de desenvolvimento do mundo, porém, muitos acreditam que só é possível desenvolver aplicação web e mobile com esta tecnologia. Pensando nisso, a equipe do Github lançou o Electron, uma tecnologia que permite a criação de aplicações desktop utilizando tecnologias web (HTML, CSS e JS).

O que é o Electron

O Electron é um framework de código aberto para desenvolvimento de aplicações desktop utilizando tecnologias web (HTML, CSS e JS). Originalmente criado por Cheng Zhao, é atualmente mantido pela equipe de desenvolvimento do Github e por toda a comunidade.

Atualmente na versão 4.0, e mantido sob a licença MIT, o Electron permite a criação de aplicações multiplataforma (Windows, macOS e Linux) utilizando uma mesma tecnologia e com interfaces nativas. Por utilizar JavaScript, possui diversos adeptos pelo mundo, já que esta linguagem é amplamente utilizada.

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

Principais vantagens

Dentre diversas vantagens do uso do Electron, podemos citar como principais as seguintes:

  • Multiplataforma: O app desenvolvido com Electron poderá ser executado em Windows, macOS ou Linux;
  • Open source: O Electron é desenvolvido pela equipe do Github e mantido pela comunidade, tendo seu código-fonte totalmente aberto;
  • Instaladores: Com o Electron, podemos criar instaladores personalizados para as aplicações;
  • Tecnologias web: Com o Electron, criamos aplicações utilizando HTML, CSS e JS, tecnologias bem difundidas e utilizadas por vários desenvolvedores;
  • Interfaces nativas: Com o Electron, podemos criar interfaces que se adaptem ao sistema operacional que está executando o software.

Principais aplicações

O Electron é muito utilizado no mercado. Diversas são as empresas que utilizam esta tecnologia para desenvolver suas aplicações Desktop.

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

Dentre estas diversas empresas, podemos citar as seguintes:

  • Slack: Um dos principais serviços de chat do mundo. Feito especialmente para comunicação entre times de diversos segmentos;
  • Visual Studio Code: Um dos principais editores de textos utilizado para criação de aplicações web. Criado pela Microsoft, o VSCode é tão completo que é constantemente confundido com uma IDE;
  • Hyper: Interface de terminal para substituir o prompt de comandos ou o terminal do macOS e Linux;
  • Insomnia: Aplicativo para testes de APIs RESTful;
  • Atom.io: Editor de textos utilizado para criação de aplicações web desenvolvido pelo Github. É, atualmente, um dos projetos com maior número de contribuidores da comunidade;
  • Discord: Um dos principais chats do mundo. Muito utilizado por jogadores de jogos eletrônicos para se comunicar durante as partidas.
HTML5 e CSS3 - Desenvolvimento web Básico
Curso de HTML5 e CSS3 - Desenvolvimento web Básico
CONHEÇA O CURSO

Podemos concluir que…

Com o Electron, é possível desenvolver qualquer tipo de aplicação desktop, desde um chat para comunicação até um substituto para o prompt de comandos o Windows, utilizando tecnologias web (HTML, CSS e JS), tornando uma ótima opção para desenvolvedores que já possuem conhecimento em tecnologias web e desejam desenvolver aplicações desktop.

Desenvolvedor Front-end Sênior
Formação: Desenvolvedor Front-end Sênior
HTML, CSS e JavaScript são a base de toda a web. Tudo o que você está vendo aqui agora depende deste tripé.Nesta formação aprenderemos Sass, Google Analytics, empacotar nossas aplicações com Webpack, criação de aplicações Desktop com Electron, UX/UI e uma introdução aos frameworks mais utilizados no mercado: Angular, React, Vue e Ember.
CONHEÇA A FORMAÇÃO

JavaScript – Ordenando Elementos por Cores

Olá Web Developer. Hoje vou mostrar como ordenar elementos por cores usando JavaScript. Isso pode ser útil caso você tenha algo como uma galeria de fotos. Além disso também vamos acabar aprendendo como fazer conversão de cores entre os modelos RGB e Hexadecimal.

Eu usei quando fui criar uma imagem para o Instagram mostrando os cursos da TreinaWeb. Criar um código para ordenar os elementos do site e tirar print da tela foi bem mais rápido do que fazer manualmente em um editor de imagem, e teve um resultado melhor do que quando tentei ordenar os elementos do HTML manualmente também.

Como definir a ordem das cores?

O modo mais comum de se ordenar cores é usando o Círculo Cromático, mostrado na imagem abaixo:

Eu já falei sobre ele e sobre como combinar cores aqui no blog. Não se esqueça de dar uma conferida!

É muito comum em programação utilizarmos os modelos RGB ou Hexadecimal para declarar cores, porém, o que vem depois de rgb(32, 15, 59)?.

Desenvolvedor Front-end Sênior
Formação: Desenvolvedor Front-end Sênior
HTML, CSS e JavaScript são a base de toda a web. Tudo o que você está vendo aqui agora depende deste tripé.Nesta formação aprenderemos Sass, Google Analytics, empacotar nossas aplicações com Webpack, criação de aplicações Desktop com Electron, UX/UI e uma introdução aos frameworks mais utilizados no mercado: Angular, React, Vue e Ember.
CONHEÇA A FORMAÇÃO

Também temos o modelo HSL (Hue – Matiz/Tonalidade, Saturation – Saturação, Lightness – Brilho). As cores (vermelho, verde, azul, etc) são definidas pela matiz, a qual é indicada por um ângulo no círculo. Começamos no topo, 0º, que indica o vermelho, e podemos ir mudando de cores conforme vamos indo aos 360º. Isso é bem melhor para usarmos na ordenação, depois de 121 vem 122, simples assim.

Então a primeira coisa que vamos fazer é converter nossas cores para o modelo HSL.

Convertendo Cores para HSL

É mais simples fazer a conversão para HSL a partir do modelo RGB, que possui números de 0 a 255. Se você estiver com cores em Hexadecimal, que utiliza valores entre 00 e FF, basta converter para RGB primeiro.

Hexadecimal para RGB

Os valores entre 00 e FF são basicamente 0 a 255 em hexadecimal. Isso é fácil de converter. Vamos criar uma função que vai pegar cada par de cores do código hexadecimal e retornar como números na base decimal. Então um FF deve retornar 255.

// exemplo de cor: #15FA3D
function hexToRGB(color){
    color = color.replace('#', ''); // vamos remover o #
    // e pegar os valores de Red, Green e Blue
    let red = color.substr(0, 2),
        green = color.substr(2, 2),
        blue = color.substr(4, 2);
    // agora vamos converter a string em número com o parseInt
    // por estar em hexadecimal, indicamos a base 16
    red = parseInt(red, 16);
    green = parseInt(green, 16);
    blue = parseInt(blue, 16);
    // e vamos retornar como um array
    return [red, green, blue];
}
// saída esperada: [21, 250, 61]

Formatando cores RGB

Já temos nossa cor hexadecimal em RGB em um formato de Array, o que nos facilita na hora de pegar cada uma das cores. Mas e se inicialmente já tivermos uma cor em RGB? Vamos criar uma função para formatar cores RGB para o formato que estamos usando.

É comum tanto o uso do RGB quanto o RGBA, então vamos primeiro deixar apenas os números, separar pelas vírgulas e pegar os valores de Red, Green e Blue.

// exemplo de cor: rgba(25, 15, 200, 0.8)
function formatRGB(color){
    // removemos as letras e parênteses
    color = color.replace(/[rgba()]/gi, '');
    // separamos por vírgulas
    color = color.split(',');
    // agora teríamos algo como ["25", " 15", " 200", " 0.8"]
    // vamos pegar cada um dos valores das strings e converter para números
    const red = parseInt(color[0]),
        green = parseInt(color[1]),
        blue = parseInt(color[2]);
    return [red, green, blue];
}
// saída esperada: [25, 15, 200]

Convertendo RGB para HSL

Para chegarmos na parte de ordenação precisamos das cores em HSL. Essa parte é um pouco mais complexa, então eu vou montar a função aos poucos para ir explicando melhor cada pedaço, e no final eu mostro a função inteira. Para não ficar repetindo, as partes já explicadas serão substituídas por ....

Vamos começar simplesmente declarando a função, que vai receber separadamente os valores de Red, Green e Blue.

function RGBToHSL(r, g, b){

}

Os valores de R, G e B sempre serão um número entre 0 e 255. Primeiro temos que transformar esses números em um valor entre 0 e 1. Para isso, basta dividí-los por 255.

function RGBToHSL(r, g, b){
    r /= 255;
    g /= 255;
    b /= 255;
    // lembrando que
    // r/= 255 é igual a
    // r = r / 255;
}

Agora vamos pegar qual o maior e o menor valor entre esses três números. Para isso utilizamos Math.min e Math.max.
Também vamos declarar uma variável chamada delta, que vai indicar a diferença entre o maior e o menor valor, e por último já vamos declarar as variáveis h, s e l, que terão os valores para termos as cores no modelo HSL.

function RGBToHSL(r, g, b){
    ...
    let min = Math.min(r, g, b),
        max = Math.max(r, g, b),
        delta = max - min,
        h = 0,
        s = 0,
        l = 0;
}

Cálculo da Matiz

Agora podemos começar a calcular cada uma das propriedades. Primeiro vamos calcular Hue (matiz). Temos algumas regrinhas para isso:

  • Se todos os valores (r, g e b) são iguais, h deve ser 0.
  • Se a maior cor for Red, a fórmula deve ser ((g – b) / delta) % 6
  • Se a maior cor for Green, a fórmula deve ser (b – r) / delta + 2
  • Se a maior cor for Blue, a fórmula deve ser (r – g) / delta + 4

Podemos utilizar o delta para saber se todas as cores são iguais. Afinal, se o maior valor e o menor são iguais, isso significa que todos os valores são iguais, fazendo o delta ser 0. Então agora, seguindo essas regras, teremos:

function RGBToHSL(r, g, b){
    ...
    if(delta === 0){
        h = 0;
    }else if(max === r){
        h = ((g - b) / delta) % 6;
    }else if(max === g){
        h = (b - r) / delta + 2;
    }else{
        h = (r - g) / delta + 4;
    }
}

Depois de definir o valor de h, multiplicamos por 60 e arrendondamos. Como precisamos de um valor entre 0 e 360, precisamos arrumar caso apareça um valor negativo. Para isso, basta somar 360. Isso significa que -90 resultaria em 270.

function RGBToHSL(r, g, b){
    ...
    h = Math.round(h * 60);
    if(h < 0){
        h += 360;
    }
}

Cálculo do Brilho

Agora vamos calcular Lightness (brilho), já que a saturação depende dele. O cálculo do brilho é a soma do maior valor e do menor valor dividido por 2.

function RGBToHSL(r, g, b){
    ...
    l = (max + min) / 2;
}

Cálculo da Saturação

Agora vamos usar o delta para calcular Saturation (saturação). Se o delta for 0, a saturação também deve ser 0.
Se o valor for diferente de 0 devemos pegar 1 e subtrair o valor absoluto do dobro do brilho menos 1. Valor absoluto é basicamente deixar um número negativo na forma positiva. Então -45 ficaria 45.

function RGBToHSL(r, g, b){
    ...
    s = delta === 0 ? 0 : delta / (1 - Math.abs(2 * l - 1));
}

Finalizando a conversão para HSL

Agora que temos os valores de S e L, mas eles estão entre 0 e 1. Para converter para valores entre 0% e 100% basta multiplicar por 100. Vamos usar .toFixed(1) para limitar um número depois da vírgula. Assim um valor 0.3752 vai se tornar 37.5.

function RGBToHSL(r, g, b){
    ...
    s = +(s * 100).toFixed(1);
    l = +(l * 100).toFixed(1);
}

Nossa função completa ficará assim:

function RGBToHSL(r, g, b){
    r /= 255;
    g /= 255;
    b /= 255;

    let min = Math.min(r, g, b),
        max = Math.max(r, g, b),
        delta = max - min,
        h = 0,
        s = 0,
        l = 0;

    if(delta === 0){
        h = 0;
    }else if(max === r){
        h = ((g - b) / delta) % 6;
    }else if(max === g){
        h = (b - r) / delta + 2;
    }else{
        h = (r - g) / delta + 4;
    }

    h = Math.round(h * 60);
    if(h < 0){
        h += 360;
    }

    l = (max + min) / 2;
    s = delta === 0 ? 0 : delta / (1 - Math.abs(2 * l - 1));

    s = +(s * 100).toFixed(1);
    l = +(l * 100).toFixed(1);

    return [h, s, l];
}

Como temos nossas cores em um Array, como [25, 15, 200], podemos usar o operador spread para passar esses valores para a função, como:

const color = [25, 15, 200];
RGBToHSL(...color); // retorno: [243, 86, 42.2]
Desenvolvedor React Sênior
Formação: Desenvolvedor React Sênior
Nesta formação conheceremos a Arquitetura Flux, muito utilizada nas aplicações modernas e que nos trás muitos benefícios em relação às arquiteturas clássicas como o MVC. Aprenderemos a sua principal implementação, o Redux. Também veremos a trabalhar com código assíncrono com Redux Thunk e conceito de programação funcional com Redux-Saga.
CONHEÇA A FORMAÇÃO

Ordenando Cores

Agora que temos cores, tanto Hexadecimal quanto RGB, no formato HSL, podemos ordená-las. Como vimos, a matiz é definida pelo primeiro valor no modelo HSL. Então podemos usá-lo para ordenar nossas cores. Para isso basta utilizar o método .sort() dos Arrays e passar uma função para fazer a comparação entre as cores.

let colors = [
    "#fbb735", "#e98931", "#eb403b", "#b32E37", "#6c2a6a",
    "#5c4399", "#274389", "#1f5ea8", "#227FB0", "#2ab0c5",
    "#39c0b3"
];
// convertendo de hexadecimal para hsl
colors = colors.map(color => {
    // de hexadecimal para rgb
    color = hexToRGB(color);
    // de rgb para hsl
    return RGBToHSL(...color);
})

// ordenação pela matiz
colors.sort((a, b) => a[0] - b[0] > 0 ? 1 : -1 );

Resultado

Veja abaixo a implementação. Use os botões para gerar cores e depois para ordenar.

Você vai notar que a ordenação não é 100% perfeita. Isso porque utilizamos apenas a matiz para a ordenação, e o brilho e saturação também são muito importantes para a definição de uma cor. Mas para coisas mais simples esse código funciona muito bem, além de ter servido para aprendermos muitas coisas.

Para mais precisão, prefira utilizar bibliotecas como o color-sorter, onde podemos passar um Array de cores em qualquer formato, até mesmo misturando formatos. Ele também leva em conta coisas como saturação, brilho e transparência.

Veja como o resultado com essa biblioteca é mais preciso:

Há muitas maneiras de ordenar cores, e dependendo do que você quer pode ser necessário dar mais importância para uma propriedade ao invés de outra.

O que é Babel?

Transpilador JavaScript de código aberto e gratuito, o Babel foi lançado sobre a licença MIT e possui como uma das principais características converter código JavaScript atual em uma versão que o navegador possa executar.

Multiplataforma, é amplamente utilizado por desenvolvedores que necessitarem converter recursos da linguagem JavaScript para uma versão que o navegador compreenda.

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

Desde que surgiu, em 2015, tornou-se uma ferramenta indispensável para o desenvolvimento front-end.

Como ele funciona?

Basicamente, em palavras mais simples, o transpilador funciona da seguinte forma:

Fluxo Transpilador Babel JavaScript

Como podemos verificar na imagem acima, ao se deparar com um código ES2015, que trata-se da versão mais atual do JavaScript, o transpilador o converte, gerando assim um novo código, porém, desta vez, em ES5, versão mais antiga do javaScript que se tornará compreensível para o navegador.

Na imagem abaixo, dispomos de um outro exemplo, onde o primeiro código não seria compatível em navegadores ou ambientes de produção. Desta forma, o código de saída tornaria compreensível após ter sido realizada sua conversão utilizando o transpilador Babel.

código gerado pelo Transpilador Babel

Concluindo

Com as recentes atualizações do JavaScript, é cada vez mais comum que o desenvolvedor deseje as utilizar. Porém, nem sempre o navegador irá conseguir executar o código JavaScript mais recente. Para isso, o Babel é de suma importância para desenvolvedores front-end, com ele conseguimos utilizar os recursos mais atuais do JavaScript em navegadores que só conseguem executar códigos mais antigos utilizando o processo de transpilação.

Desenvolvedor Front-end Pleno
Formação: Desenvolvedor Front-end Pleno
HTML, CSS e JavaScript são a base de toda a web. Tudo o que você está vendo aqui agora depende deste tripé.Nesta formação vamos conhecer assuntos mais avançados do HTML5, CSS3 e JavaScript, conhecer o NPM, trabalhar com o RxjS (base do framework Angular), testes com Jasmine e uma pequena introdução ao TypeScript.
CONHEÇA A FORMAÇÃO

O que é JSX?

Criado pela equipe de desenvolvimento do React, o JSX é uma forma de criar elementos para serem utilizadas como templates de aplicações React. Basicamente, os elementos criados com o JSX são bem similares com código HTML e fornecem aos desenvolvedores uma forma mais simples e intuitiva de criar os componentes de uma aplicação.
Porém, apesar de muito similar ao HTML, o JSX não é interpretado pelo navegador. Por este motivo, deve-se utilizar um “transpilador” para essa conversão. Atualmente, o mais conhecido deles é o Babel, do qual falaremos em outro artigo.

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

Sintaxe do JSX

Como dito anteriormente, o JSX possui uma sintaxe muito semelhante ao HTML. O código abaixo demonstra claramente esta característica. Apesar de muito parecido, o código a seguir não é HTML e sim um trecho de código JSX.

const nav = (
  <nav>
    <ul>
      <li><a href="#">Início</a></li>
      <li><a href="#">Sobre</a></li>
      <li><a href="#">Contato</a></li>
    </ul>
  </nav>
)

Porém, como dito acima, este código não conseguirá ser lido pelo navegador, e é papel do “transpilador” convertê-lo para a sintaxe do React. Sendo assim, o código acima será “transpilado” para o seguinte código:

var nav = React.createElement(
  "nav",
  { className: "links" },
  React.createElement(
    "ul",
    null,
    React.createElement(
      "li",
      null,
      React.createElement(
        "a",
        { href: "#" },
        "Inicio"
      )
    ),
    React.createElement(
      "li",
      null,
      React.createElement(
        "a",
        { href: "#" },
        "Sobre"
      )
    ),
React.createElement(
      "li",
      null,
      React.createElement(
        "a",
        { href: "#" },
        "Contato"
      )
    )
  )
);

Todo este processo facilita a criação de aplicações React, já que é muito mais simples criar um código similar ao HTML do que vários elementos React. A partir daí, é papel do React exibir a estrutura no navegador.

Desenvolvedor React Native Sênior
Formação: Desenvolvedor React Native Sênior
O React Native nos permite criar aplicativos mobile realmente nativos com JavaScript para Android e iOS. Ele vem sendo usado em aplicativos como Facebook, Instagram e Uber.Nesta formação veremos como integrar o React Native com o Firebase. Aprendemos como armazenar e sincronizar dados no Firestore, autenticar usuários com o Cloud Authentication, salvar arquivos no Cloud Storage e enviar notificações com o Cloud Messaging.
CONHEÇA A FORMAÇÃO

Vídeos Picture-in-Picture com JavaScript

Olá Web Developers! Hoje vamos ver como permitir o usuário assistir a um vídeo da sua página web fora do navegador.

O que é PIP?

Picture-in-Picture (PIP), também conhecida aqui como Imagem sobre Imagem, é quando temos a imagem de uma tela sendo exibida em cima de outra imagem.

Um exemplo são monitores para computador que também possuem funcionalidade de TV. Com PIP você pode trabalhar e ao mesmo tempo deixar a imagem da TV no canto da tela.

Monitor - TV - PIP

PIP no HTML5

A API de Picture-in-Picture permite que páginas da web peguem um vídeo qualquer presente em seu corpo e o exiba em uma pequena janela flutuante que ficará sempre em cima das outras janelas. Assim o usuário poderá continuar assistindo enquanto faz outras tarefas.

Na imagem abaixo estamos com um vídeo comum no YouTube:

Ao ativar o PIP o vídeo passa a ser reproduzido em uma janela flutuante que você pode mover e redimensionar. Mesmo que você abra outras janelas, o vídeo continua em cima de todas as outras janelas.

Na imagem abaixo vemos um exemplo de navegação em nosso blog enquanto o vídeo do YouTube permanece visível. Claro que você pode minimizar as janelas do navegador e abrir qualquer outro programa.

Esta funcionalidade está sendo adotada também em smartphones, o que nos permite continuar assistindo a um vídeo do navegador enquanto utilizamos outros aplicativos.

Como iniciar o PIP?

Para iniciar o Picture-in-Picture é necessário acessar o elemento HTML <video> que está com o vídeo que você quer que flutue. Imagine que a gente tenha o seguinte HTML:

<button onclick="iniciarPIP()">Picture in Picture</button>

<video src="./meu-video.mp4" id="meu-video" controls></video>

Criamos um botão para iniciar o PIP e adicionamos um vídeo. Agora basta pegar o elemento <video> e executar o método .requestPictureInPicture(). Este método retorna uma Promise.

async function iniciarPIP(){
    const video = document.querySelector('#meu-video');
    await video.requestPictureInPicture();
}

Você pode ver o resultado abaixo:

© 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