Posts da Tag: Front-end - Blog da TreinaWeb

Ferramentas

VS Code – Melhores extensões para Front End – Parte 2

Olá Web Developers! No post anterior vimos algumas extensões para o VS Code. Aqui nesse post nós vamos continuar com a nossa lista de melhores extensões para Front-End.

1 – Visual Studio IntelliCode

VS Code - IntelliCode

Uma das características de um bom editor de código é nos ajudar a escrever nossos códigos mais rapidamente, sugerindo opções para completar automaticamente o que estamos escrevendo.

Porém, o VS Code foi criado para ser uma ferramenta simples e leve. Ou seja, suas sugestões padrão não são tão inteligentes.

Com o intuito de melhorar essas sugestões, a própria Microsoft criou a extensão Visual Studio IntelliCode. A saber, essa extensão utiliza Inteligência Artificial para trazer as melhores sugestões para você.

2 – Surround

VS Code - Surround

É provável que já tenha acontecido de você escrever um código e depois pensar: “este trecho deveria ir dentro de um IF/FOR/TRY/Função/etc”.

Certamente muitos iriam recortar o trecho, criar a estrutura e colar o código lá dentro.

O Surround foi criado a fim de facilitar esses casos. Com ele podemos selecionar um trecho de código e mandar criar uma estrutura em volta como: If, For, While, Try/Catch, etc.

JavaScript - Fundamentos
Curso de JavaScript - Fundamentos
CONHEÇA O CURSO

3 – CodeSnap

VS Code - CodeSnap

O CodeSnap não é uma ferramenta que ajuda no desenvolvimento. Ela simplesmente gera uma imagem bonita do seu código, como na imagem acima.

Isso é muito útil para quem costuma fazer perguntas em redes sociais ou para criadores de conteúdo, quando querem mostrar um trecho de código.

4 – Prettier

Prettier Logo

O Prettier é uma ferramenta que formata automaticamente nosso código assim que salvamos o arquivo. Isso é ótimo para manter um padrão de formatação.

Além disso, pode ser que você tenha escrito um código que não ficou bem formatado. Ao invés de gastar tempo arrumando, basta salvar o arquivo e a formatação será feita automaticamente.

5 – ESLint

ESLint Logo

Assim como o Prettier, o ESLint também é uma ferramenta que auxilia na escrita do código.

O foco do ESLint é definir determinadas regras que devem ser seguidas de tal forma que ajudam a evitar certos problemas. Dessa maneira, podemos evitar possíveis bugs.

6 – EditorConfig

EditorConfig Logo

O objetivo do EditorConfig é manter um padrão de formatação de arquivos entre diferentes ferramentas.

Um exemplo bem simples é o que você costuma usar para identar seu código: 3 espaços, 4 espaços, tab, etc.

Visto que diferentes editores de código possuem diferentes configurações padrão, e cada pessoa possui sua preferência, ter uma ferramenta que padronize isso num projeto ajuda a manter um código mais uniforme.

HTML5 + CSS3 - Fundamentos
Curso de HTML5 + CSS3 - Fundamentos
CONHEÇA O CURSO

7 – Stylelint

Stylelint Logo

O objetivo do Stylelint é bem parecido com o do ESLint. Porém, ele foca no CSS.

Além de ajudar a definir regras no CSS, também é possível definir certas regras para se seguir boas práticas. Um bom exemplo é sempre declarar uma classe primeiro e só depois as classes filhas.

Caso você declare seletores de níveis muito profundos, poderá ter problemas. O Stylelint também pode servir para te impedir de fazer isso.

Uma das minhas funcionalidades favoritas do Stylelint é definir quais são os navegadores que quero dar suporte. Ele automaticamente me avisa sobre alguma propriedade que meus navegadores alvo ainda não suportam totalmente. Isso já poupa muito tempo, pois evita que a gente descubra que algo está quebrando em um navegador específico depois de já ter várias coisas prontas.


Ferramentas

VS Code – Melhores extensões para Front-End – Parte 1

Olá Web Developers! O VS Code está sendo cada vez mais usado no mundo do desenvolvimento. Porém, o que faz dele uma ótima ferramenta é a grande quantidade de extensões que podemos instalar para facilitar nosso trabalho. Aqui veremos as melhores extensões para trabalhar com Front-End.

1 – Tw Dev Server

Tw Dev Server - tela de desenvolvimento com navegadores sendo atualizados automaticamente

Já tivemos aqui um post bem completo sobre o Tw Dev Server e como ele pode te ajudar em testes e estudos.

Ele é uma ferramenta que serve como um servidor de arquivos estáticos com Live Reload e BrowserSync, ou seja, o navegador atualiza assim que você alterar um arquivo e o que você fizer em um navegador vai refletir em outros navegadores. Desse modo será muito mais simples testar diferentes navegadores e diferentes resoluções.

Além disso, o Tw Dev Server também funciona como um simulador de back-end com API e banco de dados. Portanto, caso você esteja estudando ou testando algo que precisaria de uma API e banco de dados, basta ativar o Tw Dev Server e você terá tudo pronto!

A saber, ele está disponível não só como extensão do VS Code, mas também como pacote do NPM.

2 – REST Client

VS Code - Rest Client

O Rest Client é uma extensão que permite executar requisições diretamente do VS Code a fim de testar APIs. Ele é bem simples de utilizar: basta abrir um arquivo e escrever o comando de requisição. O resultado aparecerá ao lado.

HTML5 + CSS3 - Fundamentos
Curso de HTML5 + CSS3 - Fundamentos
CONHEÇA O CURSO

3 – Auto Rename Tag

VS Code - Auto Rename Tag

Quando estamos trabalhando com HTML e precisamos renomear uma Tag, basta renomear uma delas. O VS Code já faz isso para nós.

Porém, quando estamos usando React e estamos escrevendo JSX, o VS Code ainda não renomeia ambas as tags.

A fim de economizar tempo, basta instalar o Auto Rename Tag. Ele funciona perfeitamente com React.

4 – Color Highlight

VS Code - Color Highlight

O Color Highlight é uma ótima extensão para front-ends. Ela identifica quando você escreve o código de uma cor e a exibe no editor. Assim fica fácil de saber de qual cor se trata cada código.

5 – Indent-rainbow

VS Code - Indent Rainbow

A extensão Indent Rainbow adiciona cores à sua indentação, a fim de facilitar a identificação dos blocos de código.

6 – Rainbow Brackets

VS Code - Rainbow Brackets

Assim como o Indent-Rainbow, o Rainbow Brackets também adiciona cores ao seu editor. Mas dessa vez é nos parênteses, chaves e colchetes.

Conforme podemos ver na imagem acima, cada par de parênteses possui uma cor. Assim fica fácil saber onde cada um começa e termina.

React - Despertando o Poder dos Hooks
Curso de React - Despertando o Poder dos Hooks
CONHEÇA O CURSO

7 – vscode-styled-components

VS Code - Styled Components

Algo que vem ganhando força são os Styled Components. Eles são componentes que utilizam Template String para estilizar o seu componente.

Como estamos escrevendo CSS dentro de uma String, ficaria difícil entender o código. Porém, com essa extensão, o VS Code irá entender a sintaxe do CSS dentro da String que você escrever.


Desenvolvimento Front-end Javascript

Trabalhando com arrays e objetos no JavaScript

Saber utilizar arrays e objetos no JavaScript é de extrema importância. Neste artigo vamos aprender como declarar e utilizar arrays e objetos com exemplos práticos.

JavaScript - Fundamentos
Curso de JavaScript - Fundamentos
CONHEÇA O CURSO

O que são arrays em JavaScript?

O array é um objeto no JavaScript, ele nos auxilia pois podemos utilizar uma única variável para armazenar uma lista de diferentes elementos.

Por exemplo, imagine que seja necessário armazenar os nomes de todos os alunos de uma sala de aula, criar uma variável para cada aluno seria, no mínimo, trabalhoso, dependendo do tamanho dos dados eu diria inviável.

Nesta ideia podemos então criar a variável alunos e com isso armazenar o nome de todos os alunos.

Como declarar um array no JavaScript?

Para utilizar os Arrays precisamos declarar uma variável (você pode acessar o nosso artigo conhecendo variáveis e constantes no JavaScript para saber como declarar variáveis).

E ao atribuir um valor, vamos colocar entre [] e separar cada um por ,. Por exemplo:

let alunos = ['Wesley', 'Marina', 'Bruno', 'Paula'];
var series = ['Game of Thrones', 'Friends', 'Vikings'];

Obs: lembrando que nossas listas são variáveis, portanto podem ser declaradas tanto com let ou var.

Nós podemos declarar arrays sem nenhum item e tamanho, ou somente com tamanho definido mas vazio, da seguinte forma:

let alunos = Array(20);
var series = [];

No primeiro exemplo nós declaramos e atribuímos 20 posições para o array alunos, e no segundo exemplo deixamos em aberto o tamanho do array. Para popular o array, é só atribuir um valor junto ao índice:

let alunos = Array(20);
alunos[0] = 'Paulo';

Curiosidade: no JavaScript nós temos o método Array.isArray(obj); que permite verificar se um objeto é um array, utilizando um dos exemplos acima nós temos o seguinte resultado:

Usando Array.isArray

Ele retorna true caso seja um array e false caso não seja.

Mas enfim, declaramos nossos arrays. Porém, como podemos acessar os dados armazenados?

Como alterar e acessar itens de um array no JavaScript?

Para acessar um item de um array é muito simples, basta utilizarmos o índice da posição do item.

Em relação ao nosso exemplo, nós não adicionamos os itens a um índice declarado, portanto o JavaScript inicia do índice 0 e incrementa cada item posterior. Portanto, para exibir um item podemos fazer da seguinte forma:

console.log(alunos[1]);

Neste caso vamos exibir o item que se encontra no índice 1, lembrando que a nossa lista é iniciada no índice 0, portanto, teremos o seguinte resultado:

Exibindo array alunos com console.log no JavaScript

Ao executar o console.log(alunos[1]) obtemos o retorno ‘Marina’.

Para alterar um elemento, basta usar o nome do array com o índice e atribuir o novo valor:

alunos[2] = 'Gabriel';

Ao executar o código acima o aluno Bruno será alterado pelo aluno Gabriel.

Alterando elementos de um array no JavaScript

Como adicionar um novo elemento a um array?

JavaScript Intermediário
Curso de JavaScript Intermediário
CONHEÇA O CURSO

Para adicionar um elemento a um array nós utilizamos o método push(), da seguinte forma:

alunos.push('Bruno');

Após a execução do método push() podemos verificar que o aluno Bruno foi adicionado ao final do array, que agora possui 5 posições:

Usando método push para adicionar elemento a um array

Outro ponto importante que vale ressaltar é que o JavaScript permite um array de elementos de tipos diferentes:

let array = [1, 'Paulo', 2, 'Marina', 3, 'Bruna'];
typeof array[0];
typeof array[1];

No exemplo acima declaramos o array array com itens do tipo number e string e utilizamos o operador typeof para verificar o tipo de cada elemento. Ao executar o código acima vamos obter o seguinte resultado:

Tipos de elementos em uma String

Como podemos ver, para o índice 0 temos um elemento do tipo number e para o índice 1 temos o um elemento do tipo string.

Você pode aprender sobre métodos utéis para trabalhar com arrays no nosso artigo “Javascript: métodos de arrays que voce precisa conhecer“.

Como utilizar objetos no JavaScript

Nós utilizamos objetos para agrupar valores que possuem propriedades e funções, podemos por exemplo fazer uma analogia aos objetos do mundo real. Um carro que possui cor e marca, ele também realiza ações como acelerar e frear.

Para declarar um objeto a sintaxe é bem parecida a que utilizamos para declarar arrays, porém trocamos os [] por {}. Onda as chaves, valores e funções são declaradas entre {}, conforme abaixo:

let carro = {
        modelo: 'gol',
        cor: 'vermelho',
        acelerar(){
            console.log('Acelerando...');
        },
        frear(){
            console.log('Freando');
        },
};

Neste caso declaramos o objeto literal carro, que possui duas propriedades, modelo e cor, que podem ser chamadas de chaves. Declaramos também duas funções, acelerar e frear, que podem ser chamadas de métodos. Vale ressaltar que nós podemos declarar de outras formas as funções: acelerar: function () {}ou utilizando uma arrow function, acelerar: () => {}.

Após declarar nosso objeto, podemos executar um cosole.log(carro); para visualizar como é apresentado:

Objeto

Como acessar as propriedades ou funções de um Objeto?

Para acessar uma propriedade ou uma função basta utilizarmos o nome do objeto seguido da propriedade/função separada por ponto. Por exemplo:

console.log(carro.modelo);
console.log(carro.acelerar);
carro.acelerar();

Utilizamos a função console.log, para exibir os dados acessados no console, importante lembrar que para executar a função acelerar não podemos esquecer dos ().

Ao executar o código acima, vamos obter o seguinte resultado:

Acessando Objetos

Outra forma que podemos utilizar para acessar propriedades é utilizando o padrão objeto['propriedade'], o que possibilita usarmos variáveis para estar acessando as propriedades de um objeto.

Acessando propriedade de objetos com variáveis

Como alterar e adicionar novas propriedades a um objeto?

Para adicionar uma propriedade em um objeto no JavaScript é bem simples, basta usarmos a sintaxe de acesso às propriedades porém atribuindo um valor a nova propriedade inexistente, podemos fazer de duas formas:

carro.ano = 2011;
carro['marca'] = 'Volkswagen'

Ao executar esse código as novas propriedades são adicionadas em nosso objeto:

Adicionando propriedades

Para alterar as propriedades de um objeto basta utilizar a mesma lógica acima, porém com uma propriedade já existente:

carro.cor = 'prata';
carro['ano'] = 2010;

Ao executar o código acima os dados das propriedades são atualizados:

Atualizando propriedades

Como deletar uma propriedade de um objeto?

Para deletar basta usarmos o operador delete, seguindo a lógica do objeto.propriedade:

delete carro.ano;

Desta forma a propriedade ano não fará mais parte do nosso objeto carro:

Excluindo propriedades

Conclusão

Neste artigo tivemos o primeiro contato com a manipulação de arrays e objetos no JavaScript, podemos perceber que a linguagem permite trabalhar esses conceitos de forma flexível e eficiente.

Desenvolvedor Front-end
Formação: Desenvolvedor Front-end
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. Em seguida veremos todos os aspectos do HTML, CSS e JavaScript. Por fim, 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

Desenvolvimento Front-end Javascript

Estruturas condicionais e estruturas de repetição em JavaScript

Neste artigo vamos focar na utilização das estruturas condicionais e estruturas de repetição em JavaScript e de seus conceitos.

JavaScript - Fundamentos
Curso de JavaScript - Fundamentos
CONHEÇA O CURSO

As estruturas condicionais estão ligadas à tomada de decisão de um algoritmo. Ao utilizar expressões que retornam verdadeiro ou falso, o algoritmo executa o bloco de comandos relativos a este resultado.

Já no caso das estruturas de repetição, elas são úteis quando precisamos repetir N vezes a execução de um bloco de comandos até que uma condição seja atendida.

Caso você não esteja familiarizado com os conceitos de estruturas condicionais e estruturas de repetição, aconselho a leitura de nosso artigo Estruturas condicionais e de repetição.

Os exemplos serão executados utilizando o console do navegador, caso você não saiba executar um código JavaScript, leia nosso artigo Executando seu primeiro código com JavaScript.

Estruturas condicionais no JavaScript

Como utilizar a estrutura condicional ‘if(se)’ no JavaScript

Vamos aprender a utilizar as estruturas condicionais no JavaScript, começando pelo uso do if(se), else if e else(senão).

Primeiramente precisamos entender a sintaxe, podemos simplificar com o exemplo abaixo:

if (idade > 18){
    console.log("Você é obrigado a votar");
}

No exemplo nós utilizamos a palavra if seguido da condição idade > 18 . Ou seja, caso a variável idade seja maior que 18 (verdadeiro), os comandos que estarão no bloco serão executados, se tratando do exemplo, será executado o comando console.log("Você é obrigado a votar").

Utilizando estruturas - IF

Porém este exemplo não está completo, afinal, há quem não pode votar e também o voto opcional. Podemos utilizar os operadores lógicos na condição para deixar mais robusto o nosso exemplo:

if (idade > 15 && idade < 18 || idade > 70){
    console.log("O voto é opcional");
}

Agora nós criamos uma estrutura condicional utilizando if e os operadores lógicos && (E) e ||(OU), mas ainda podemos deixar mais completo o nosso exemplo utilizando a estrutura else if :

if (idade > 15 && idade < 18 || idade > 70) {
    console.log("O voto é opcional")
}else if (idade < 16) {
    console.log("Você não pode votar");
}

Como se pode ver, utilizamos o else if para impor outro bloco de comandos caso a primeira condição do if não fosse atendida, neste caso nós teremos o seguinte resultado:

Utilizando estruturas condicionais - ELSE IF

Contudo, para finalizar o nosso exemplo, precisamos também informar quando o voto é obrigatório. Percebe-se que é, justamente, o intervalo de idade que as condições que estão em nosso if / else if não estão abrangendo, portanto, podemos somente adicionar um else, ficando desta forma:

if (idade > 15 && idade < 18 || idade > 70) {
    console.log("O voto é opcional")
}else if (idade < 16) {
    console.log("Você não pode votar");
}else {
    console.log("Você é obrigado a votar");
}

Obtendo o seguinte resultado:

Utilizando estruturas condicionais no Javascript - ELSE

Neste exemplo mostramos como é possível atribuir um comportamento de tomada de decisão utilizando as estruturas condicionais if, else if e else no JavaScript.

Em algumas situações onde trabalhamos com inúmeros if / else e com valores pré-definidos nas condições, podemos utilizar a instrução Switch Case.

Como utilizar Switch Case no JavaScript

Outra estrutura condicional do JavaScript que podemos utilizar é o Switch Case.
O Swith Case é uma instrução que se comporta de forma semelhante ao if / else, porém possui uma estrutura mais organizada e de fácil compreensão. Lembrando que só é aceito valores pré-definidos e não expressões condicionais.

Podemos analisar a estrutura do Switch Case no seguinte exemplo:

let signo = 'Leão';

switch (signo) {
  case 'Áries':
    console.log("De 21 março a 20 abril");
    break;
    case 'Touro':
    console.log("de 21 abril a 20 maio");
    break;
  case 'Gêmeos':
    console.log("de 21 maio a 20 junho");
    break;
  case 'Câncer':
    console.log("de 21 junho a 22 julho");
    break;
  case 'Leão':
    console.log("de 23 julho a 22 agosto");
    break;
  case 'Virgem':
    console.log("de 23 agosto a 22 setembro");
    break;
  default:
    console.log("Signo não registrado");
    break;
}

Neste caso nós temos uma variável que recebe um signo, e então, devemos exibir qual o intervalo de nascimento referente a esse signo. Seria muito mais complexo utilizar if / else para este exemplo do que o switch case.

Ao analisar o exemplo, ao lado do switch atribuímos a variável signo, neste caso ele pede a expressão que será comparada a cada case. Sendo verdadeiro com alguma das opções, os comandos do bloco são executados até atingir a palavra-chave break. Caso nenhuma das opções seja verdadeira, a instrução irá executar os comandos que estarão na opção default.

Ao executar o exemplo acima, obtemos o seguinte resultado:

Utilizando estruturas condicionais - Switch Case

JavaScript Intermediário
Curso de JavaScript Intermediário
CONHEÇA O CURSO

Estruturas de repetição no JavaScrpit

Agora vamos aprender a utilizar as estruturas de repetição no JavaScript, como: while, for, for…in e for…of.

Como utilizar while(enquanto) no JavaScript

Podemos utilizar a estrutura de repetição while caso seja necessário repetir um bloco de comandos por N vezes.

let i = 0;
while(i < 11){
    console.log('5 x ' + i + ' = ' + 5*i);
    i++;
}

A sintaxe do while, como vemos no exemplo acima, é bem simples. Utilizamos a palavra reservada while , logo em seguida precisamos passar uma condição que será atendida enquanto ela retornar true, ou seja, verdadeiro.

Neste caso, simulamos a tabuada do 5, a variável i é o nosso contador, iniciamos ela com o valor 0 , portanto a condição será verdadeira até que ela atinja o valor 11, e por isso ela é iterada a cada repetição – i++, ao atingir tal valor o laço é quebrado.

Executando o código acima teremos o seguinte resultado:

Utilizando estruturas de repetição - While

Utilizando Do-While

O do-while tem o mesmo conceito que o while com uma única diferença, a condição é verificada após os comandos do bloco serem executados, ou seja, mesmo que a condição seja falsa, é garantia que o bloco será executado ao menos uma vez.

Podemos testar da seguinte forma:

let contador = 0;

do{
    console.log("O contador vale: " + contador);
    contador++;
}while(contador == 1)

A variável contador foi inicializada com o valor 0 e o while está com a condição contador == 1 ou seja, a condição é falsa e utilizando o while nosso bloco de comandos não seria executado. Porém podemos perceber que ao utilizar do-while, o bloco vem antes da verificação da condição, com isso ele garante que o bloco de comandos seja executado ao menos uma vez.

Desta forma vamos obter o seguinte comportamento:

Utilizando do-while

Como utilizar For(para) no JavaScript

A estrutura de repetição for no JavaScript segue o mesmo princípio que o while, porém este recurso é mais utilizado quando se sabe o número de iterações da repetição, como ao percorrer um vetor, por exemplo.

Podemos replicar o exemplo acima da tabuada, porém utilizando for:

for(let i = 0; i < 11; i++){
    console.log("5 x " + i + " = " + 5*i);
}

Para utilizar o for, usamos a palavra-chave for seguida de três declarações, primeiramente iniciamos a variável que será o controlador do nosso laço de repetição, logo em seguida precisamos informar a condição a ser atendida e, por último, uma expressão que será executado ao final de cada iteração do for, normalmente utilizamos para incrementar a variável que será utilizada como controlador do nosso laço.

Ao executar o código teremos o resultado semelhante ao exemplo utilizando while:

Utilizando estruturas de repetição no Javascript - FOR

OBS: Vale ressaltar que o while é mais indicado para situações onde não temos conhecimento do número de iterações do laço, já o for é mais adequado para situações que o número de iterações está definido previamente.*

Utilizando for…in e for…of

No JavaScript, nós temos mais duas variações da utilização do for, o for…in e for…of.

O for…in é utilizado para percorrer as propriedades de um objeto, por exemplo:

let carro = {
marca: 'ford',
modelo: 'fiesta',
cor: 'prata',
}

for (propriedade in carro) {
    console.log(propriedade);
}

Criamos uma instância do objeto carro, onde temos como propriedade a marca, modelo e cor.

Ao utilizar o for, passamos a variável que irá percorrer as propriedades do objeto e logo em seguida, de qual objeto.

O resultado esperado:

Utilizando estruturas de repetição no Javascript - FOR IN

Também podemos acessar os atributos de cada propriedade, para isso basta usarmos propriedadecomo índice do nosso objeto, desta maneira:

for (propriedade in carro) {
    console.log(carro[propriedade]);
}

Vamos obter a seguinte saída:

Acessando atributos for in

E por fim, podemos exibir o objeto por completo somente usando o for…in:

for (propriedade in carro) {
    console.log(propriedade + ': ' + carro[propriedade]);
}

Exibindo objetos for in

O for…of nós podemos utilizar para percorrer objetos iteráveis como Maps, Sets e Vetores de forma simples e eficaz, da seguinte forma:

let carros = [ 'fiesta', 'onix', 'fusca', 'saveiro' ];

for (let carro of carros) {
    console.log(carro);
}

Neste caso, vamos obter os valores de cada índice:

Utilizando estruturas de repetição no Javascript - FOR OF

Também é possível exibir o índice referente a cada item usando o método entries()da seguinte forma:

for (let [index, carro] of carros.entries()) {
    console.log(index, carro);
}

Desta maneira vamos obter os índices e os respectivos valores:

Utilizando estruturas de repetição no Javascript - FOR OF

Existem outras maneiras que podemos utilizar para percorrer vetores, aconselho a leitura de nosso artigo Métodos de Arrays que você deve conhecer aqui da TreinaWeb 😀

Conclusão

Neste artigo aprendemos a utilizar as estruturas condicionais if, else if e else, e as estruturas de repetição while, for, for…in e for…of no JavaScript.

Lembrando que são conceitos fundamentais para o seu desenvolvimento no estudo de qualquer linguagem de programação.

Desenvolvedor Front-end
Formação: Desenvolvedor Front-end
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. Em seguida veremos todos os aspectos do HTML, CSS e JavaScript. Por fim, 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

Desenvolvimento Front-end Javascript

Conhecendo variáveis e constantes no JavaScript

Características de tipagem do JavaScript

Primeiramente, devemos citar que a linguagem JavaScript é de tipagem dinâmica, ou seja, não é necessário declarar tipo a uma variável, podendo ser modificada posteriormente.

A própria linguagem de programação, neste caso, tem a habilidade de escolher o tipo de dado de acordo com o valor atribuído a variável.

Em nosso artigo “Quais as diferenças entre tipagens: estática ou dinâmica e forte ou fraca“, explicamos quais os conceitos por tipagem estática e dinâmica e também sobre tipagem fraca e forte. É importante a leitura para você entender como o JavaScript lida com os tipos, principalmente se você está acostumado a programar em uma linguagem com tipagem estática e forte.

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

Tipos de dados do JavaScript

Ao programar em JavaScrpit nós precisamos saber quais os tipos de dados que a linguagem trabalha, os principais tipos de dados primitivos são:

  • Boolean – possuem apenas dois valores: verdadeiro ou falso;
  • Undefined – indica que não foi definido um valor;
  • Null – indica que um valor é nulo;
  • Number – armazena valores numéricos;
  • String – armazena textos;
  • Symbol – armazena símbolos;

Além dos tipos de dados primitivos, nós também temos o tipo object, que possibilita trabalharmos com objetos utilizando JavaScript.

Regras de nomeação de variáveis no JavaScript

Uma das peculiaridades da linguagem JavaScript é que podemos declarar variáveis de duas formas, utilizando var, comum em outras linguagens, ou utilizando let.

Vale ressaltar que por se tratar de uma linguagem de tipagem dinâmica, ao declarar uma variável não é necessário informar o tipo da variável, por exemplo:

var idade = 15;
var nome = 'Marina';
let endereco = 'Av. Central 1';

Ao atribuir o valor 15 para a variável idade, a linguagem já reconhece como uma variável do tipo Number. O mesmo ocorre para a variável nome, ao atribuirmos o valor ‘Marina’ a linguagem reconhece como uma variável do tipo String.

Outras regras devem ser seguidas, como:

  • Não declarar variável com palavras reservadas, como let, var, while, for, etc.
  • Deve conter somente letras, números e underscore.
  • Pode iniciar com uma letra, underscore (_) ou cifrão ($).

Declarando variáveis com var e let no JavaScript

No JavaScript nós temos que nos atentar quando vamos declarar variáveis usando var ou let, pois cada uma possuí diferenças que são importantes.

Antes de tudo precisamos explicar que o JavaScript trabalha com escopos, onde cada bloco (funções, condicionais e estruturas de repetição, por exemplo) é um escopo fechado.

Ao utilizarmos var, ele trabalha de forma independente para cada escopo de função, por exemplo:

var nomeCarro = 'onix';

function carro() {
   var nomeCarro = 'fiesta';
   console.log(nomeCarro);
}

console.log(nomeCarro);

Analisando o código acima percebemos que ao executar a função carro(), iremos obter como resposta a String fiesta. Se executarmos console.log(nomeCarro), vamos obter o nome onix, pois a variável carro só mudou de nome dentro do escopo da função carro().

Usando 'Var' no JavaScript

Porém se trabalharmos com um IF por exemplo, a situação muda:

var nomeCarro = 'onix';
var i = 0;

if(i === 0){
    var nomeCarro = 'fiesta';
    console.log(nomeCarro);
}

console.log(nomeCarro);

Neste caso utilizando var sem o efeito de escopo. Portanto, ao executar console.log(nomeCarro) fora do if teremos como retorno a String fiesta e não onix conforme declarado anteriormente.

Usando 'var' no JavaScript

JavaScript Intermediário
Curso de JavaScript Intermediário
CONHEÇA O CURSO

Ou seja, uma variável sendo declarada como var só tem efeito de escopo em função.

Agora se substituirmos o código acima declarando as variáveis como let:

let nomeCarro = 'onix';
var i = 0;

if (i === 0){
    let nomeCarro = 'fiesta';
    console.log(nomeCarro);
}

console.log(nomeCarro);

No caso declaramos a variável nomeCarro dentro do if com o valor fiesta , mas ao executarmos console.log(nomeCarro) fora do if será exibido a string onix.

Desta forma respeitando o escopo do bloco.

Obs: Vale lembrar que let tem o mesmo comportamento de escopo que var se tratando do escopo de funções.

Usando 'let' no JavaScript

Declarando constantes

Assim como em outras linguagens, podemos declarar constantes que possuem valores fixos. Também vale ressaltar que as constantes tem o mesmo comportamento que variáveis definidas como let em relação ao escopo de bloco, como vimos no exemplo acima.

Na prática podemos utilizar uma constante para atribuir o valor de PI, por exemplo:

const PI = 3.14;

Obs: Por convenção usamos letras maiúsculas separadas por underscore ao declarar uma constante.

Ao tentar alterar o valor da constante, vamos obter o seguinte erro:

Usando Constantes no JavaScript

Conclusão

Neste artigo falamos sobre as características do JavaScript, sendo uma linguagem de tipagem dinâmica. Também aprendemos sobre escopo e, principalmente, sobre a declaração e uso de variáveis e constantes usando as palavras-chave: var, let e const. Aconselho também a leitura de nosso artigo “Como executar o seu primeiro código JavaScript” para iniciar os seus estudos.

Desenvolvedor Front-end
Formação: Desenvolvedor Front-end
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. Em seguida veremos todos os aspectos do HTML, CSS e JavaScript. Por fim, 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

Desenvolvimento Javascript

Como executar seu primeiro código JavaScript

Antes de tudo, caso você não saiba o que é JavaScript, aconselho a leitura de nosso artigo “O que é e como começar com JS” e também sobre “O que se pode fazer com JS hoje em dia“. Com esses artigos você terá uma dimensão maior do que é a linguagem e das possibilidades que ela pode proporcionar.

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

JavaScript no console do navegador

Dito isto, vamos começar a colocar a mão na massa e rodar algo básico utilizando JavaScript. Primeiramente, vamos utilizar o console do navegador, para isto crie um arquivo index.html simples, pode ser como abaixo:

<!DOCTYPE html>
<html lang="pt-br">
  <head>
    <meta charset="utf-8">
    <title>Começando com JavaScript</title>
  </head>
  <body>
    <h2>Começando com JavaScript</h2>
  </body>
</html>

Logo em seguida abra o arquivo em seu navegador de preferência e entre no console pelo inspecionar (normalmente pode ser aberto apertando Ctrl+Shift+i no Windows/linux, cmd+option+c no MacOS ou botão direito → Inspecionar/Inspecionar elemento).

Console do navegador

Será aberto um painel com inúmeras ferramentas de desenvolvimento, clique em console. Neste local podemos fazer alguns testes e entender o comportamento de nosso código direto no navegador (além de inúmeras outras funções).

Neste exemplo vamos criar uma caixa de diálogo usando a função alert(), portanto, basta digitar alert("hello world"). Ao executar a função esperamos que seja exibida a seguinte caixa de diálogo:

Executando função JavaScript

Legal! Acabamos de executar nossa primeira função em JavaScript, agora vamos estruturar um arquivo em JavaScript para entender o seu funcionamento.

JavaScript Intermediário
Curso de JavaScript Intermediário
CONHEÇA O CURSO

Criando e executando um arquivo JavaScript

Crie um arquivo chamado script.js na mesma pasta que criamos o arquivo index.html, com a função que acabamos de utilizar no exemplo anterior:

alert("hello world")

Desta forma, nossa pasta com os arquivos html e js terá a seguinte estrutura:

Estrutura de arquivos

Agora precisamos alterar o nosso arquivo index.html. Lembrando que nós podemos colocar um código JavaScript em qualquer lugar de nosso arquivo html utilizando a tag script. Mas não é recomendado, pois irá gerar certa desorganização e futuras complicações na manutenção de seu projeto.

O ideal é criarmos o arquivo .js e então chamar este arquivo dentro de nosso index.html, para isto também vamos usar a tag script, da seguinte forma:

<!DOCTYPE html>
<html lang="pt-br">
  <head>
    <meta charset="utf-8">
    <title>Começando com JavaScript</title>
  </head>
  <body>
    <h2>Começando com JavaScript</h2>
    <script src="./scripts.js"></script>
  </body>
</html>

Desta forma, o arquivo scripts.js será executado logo na abertura de nosso index.html, exibindo a caixa de diálogo referente ao código de alerta que criamos, como abaixo:

Executando JavaScript

Além das formas citadas acima, para fins de teste e aprendizado, nós também podemos executar nosso código JavaScript em ferramentas online, como o JSFiddle.

Utilizando a ferramenta JSFiddle

Ao entrar no JSFillde logo percebemos que o layout é dividido em quatro seções, sendo: HTML, CSS, JavaScript e a última conta com a preview gerada.

Como podemos ver abaixo, perceba que está implementado o mesmo código que utilizamos no exemplo acima, com a única diferença no CSS, onde podemos ver exatamente o resultado esperado na última seção:

Testando código javascript online

Existem outras ferramentas similares como o JSEditor.io e playcode.io.

Conclusão

Neste artigo demos os primeiros passos em JavaScript. Aprendemos como utilizar o console do próprio navegador, como estruturar os arquivos .js de forma ideal e por último como podemos utilizar ferramentas online que vão nos auxiliar em testes e no aprendizado da linguagem.

Aguarde para mais artigos sobre JavaScript logo em breve 🙂

Desenvolvedor Front-end
Formação: Desenvolvedor Front-end
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. Em seguida veremos todos os aspectos do HTML, CSS e JavaScript. Por fim, 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

Desenvolvimento Front-end

Storybook – A melhor maneira de criar componentes

Olá Web Developers! O Storybook é uma ferramenta incrível para o desenvolvimento de componentes que você vai usar em seu sistema, independentemente do framework ou biblioteca que você usa. Aqui nós vamos conhecer melhor sobre o Storybook e o porque você deveria usá-lo.

O que é Storybook?

Storybook é uma ferramenta que tem como objetivo servir de ambiente isolado para você criar seus componentes. Ou seja, você não precisa desenvolver seu componente diretamente no seu sistema.

Ele é utilizado por grandes empresas como: GitHub, Dropbox, airbnb, Mozilla, JetBrains, etc.

O Storybook funciona com várias bibliotecas e frameworks, como: React, Angular, Vue, Ember, etc.

React - Despertando o Poder dos Hooks
Curso de React - Despertando o Poder dos Hooks
CONHEÇA O CURSO

Por que preciso de um ambiente isolado?

A ideia dos componentes é que eles precisam ser reutilizáveis. Se você cria diretamente no seu sistema, algum JavaScript ou CSS do sistema pode influenciá-lo. Além disso, você pode cair na tentação de integrar o componente com alguma fonte de dados para facilitar o acesso a algum dado. E isso já acaba com a possibilidade de reutilização.

Além disso, o componente corre o risco de ficar mais complexo, dificultando na hora de testá-lo.

Como o Storybook pode ajudar?

Um bom exemplo aqui na TreinaWeb é em nosso sistema de ensino, na parte do conteúdo. Há vários testes e validações a serem feitas, e também há vários tipos de exercícios que são embaralhados antes de serem exibidos ao aluno. Imagine o trabalho que eu tinha na hora de testar: procurar uma aula com o tipo de conteúdo que eu precisava e, se fosse necessário testar um exercício, precisava ficar procurando e ter a sorte dele aparecer para mim.

Painel TreinaWeb - Exercício de Completar Frase

Uma saída seria criar uma tela apenas para testes e chamar o componente que quero testar, passando dados mockados. Já fiz muito isso no passado, mas começava a dificultar conforme a quantidade de componentes aumentava.

Gauge - Embraer - MSG-3 - UI Kit

Já com o Storybook eu posso ter uma lista com os componentes e controlá-los para poder testar o que quiser sem muito esforço.

Storybook - Treinaweb - Completar Frase

Veja na imagem abaixo que você pode criar controles para modificar o seu componente em tempo real da maneira que quiser:

Storybook - Controles dos Componentes

Isso tudo é feito com o Storybook de maneira bem simples! Portanto, você vai ter um ambiente leve para criar seus componentes de maneira isolada, poder testá-los de maneira bem simples e ele também acaba servindo de documentação da sua biblioteca de componentes!

Além disso, o Storybook é completamente customizável e possui vários plugins que podem facilitar em várias tarefas, como testes em diferentes resoluções, mudança de tema, teste de acessibilidade, internacionalização, etc.

Desenvolvedor Angular
Formação: Desenvolvedor Angular
O Angular é utilizado por várias empresas em soluções de larga escala. Nesta formação vamos conhecer desde os fundamentos do Angular: como iniciar um projeto, o que são componentes e a trabalhar com o Angular CLI. Até conceitos mais avançados: componentes, diretivas, pipes, validação de formulários, rotas, internacionalização, modularização, carregamento sob demanda, criação de bibliotecas, API de animação e renderização no servidor com Angular Universal.
CONHEÇA A FORMAÇÃO

Desenvolvimento Front-end

5 motivos para estudar React

Utilizada em milhares de aplicações, o JavaScript certamente está entre as linguagens de programação mais importantes. Isso tudo se deve também aos frameworks e bibliotecas que a tem como base, fazendo com que o JavaScript atinja novos patamares constantemente. Sendo assim, este artigo irá lhe apresentar cinco motivos para você aprender a biblioteca JavaScript mais famosa da atualidade: o React.

React está em alta no mercado

Podemos nos basear em dois indicadores de que algo está em alta no mercado: o alto número de pessoas que estão envolvidas e a quantidade de empresas que estão utilizando a ferramenta, sejam elas grandes, médias ou pequenas empresas. No caso do React, ambos estão em alta! Além disso, também podemos ver uma grande quantidade de oferta de vagas que pedem essa biblioteca. Aprender algo que tem uma boa aceitação no mercado é excelente.

Um dos fatores de sua popularidade é por ele ter sido criado pelo Facebook. Essa biblioteca de código aberto, que faz parte dos projetos open-source do Facebook, faz com que ele realmente ganhe muita visibilidade.

Segundo uma pesquisa do Stack Overflow deste ano (2020), podemos ver alguns indicadores. Ao focar puramente em estruturas da web, vemos que jQuery ainda é o líder, mas está lentamente perdendo terreno. Enquanto isso, o React vem aumentando sua participação no mercado.

Também podemos ver como os desenvolvedores gostam dessa biblioteca: ela está no topo entre os frameworks/bibliotecas mais amados e procurados.

Do React para o React Native

Ao aprender essa biblioteca, você não somente aprende como fazer interfaces web melhores, como pode usar os mesmos conceitos para fazer aplicativos para Android e iOS. Ao aprender o React, você pode complementar seus estudos com o React Native. O React Native também é disponibilizado de forma open-source pelo Facebook, permitindo criar aplicações móveis com interface nativa para iOS e Android. Ele se utiliza dos mesmos conceitos e design do React, exigindo baixo nível de esforço.

O React é flexível

Essa é uma ótima vantagem que resume bem um dos motivos para se aprender o React: ele é flexível e facilita a interface com outras bibliotecas e frameworks. Além disso, mesmo sendo uma bibioteca SPA, ele torna possível escrever aplicações que renderizam no servidor através do Next.js, fazendo com que as páginas carreguem mais rapidamente.

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

Uso de componentes reutilizáveis

Uma das suas principais características é a utilização de componentes que, em conjunto, criam uma interface. Com ele, você pode criar, reutilizar e combinar componentes no seu código. Um componente é como se fosse uma função JavaScript que permite dividir a interface em partes independentes e reutilizáveis, livre de outras dependências externas.

Nós podemos reutilizar um simples componente em múltiplas interfaces, onde componentes podem conter outros componentes. Isso facilita a manutenibilidade e o acompanhamento do código.

Facilidade no aprendizado

React, antes de tudo, é JavaScript. Se você já tem experiência com JavaScript, é possível absorver toda a proposta do React facilmente, criando aplicações modernas com pouco tempo de estudo. Considerando todos os itens acima, podemos afirmar que hoje, certamente, ele está entre os melhores frameworks JavaScript disponíveis no mercado.

Desenvolvedores iniciantes, antes de iniciarem seus estudos em algum framework ou biblioteca (no caso do React), devem adquirir uma boa base de front-end. Estude primeiro os fundamentos, conceitos, HTML, CSS e JavaScript. Aí sim depois você estará pronto para iniciar no mundo do React.


Javascript

Testes de Performance JavaScript

Olá Web Developers! Há momentos em que precisamos que um determinado código tenha um melhor desempenho. Certamente você já deve ter visto vários códigos diferentes fazendo a mesma coisa. Então vem a dúvida: no código que preciso criar, qual será mais rápido? E então vamos precisar fazer testes de performance.

Vamos conhecer algumas maneiras mais simples para se fazer isso.

console.time()

O console do JavaScript possui vários métodos. A fim de calcular o tempo de uma operação, temos o método time(). Precisamos passar para ele um nome que servirá de identificador único para o nosso timer. Após a execução do que queremos calcular usamos o método timeEnd(), com a finalidade de encerrar o timer criado.

Em uma mesma página você pode ter até 10.000 timers. Então pode ficar tranquilo que não vai faltar 😂

console.time('meu timer');
minhaFuncao();
console.timeEnd('meu timer');

Como resultado teremos o nome do timer impresso seguido do tempo, em milissegundos, que a operação levou para ser concluída.

JavaScript Console - Time

Já que o console do navegador fica responsável por calcular o tempo por um simples nome, é muito útil caso você queira indicar o início da contagem em um arquivo e quer finalizar em outro.

Google Chrome Developer Tools
Curso de Google Chrome Developer Tools
CONHEÇA O CURSO

performance.now()

A API performance possui o método now(), com o intuito de retornar o tempo que se passou desde que o documento foi criado. Portanto, ele também pode ser usado para fazer testes de performance.

const inicio = performance.now();
minhaFuncao();
const fim = performance.now();
console.log(`A operação levou ${fim - inicio} milissegundos`);

Conseguimos o tempo de execução da mesma forma. Porém, como o performance.now() nos retorna o tempo que se passou desde que o documento foi criado, a diferença entre início e fim fica por nossa conta.

JavaScript - Performance.now

Ferramentas Online

Também existem ferramentas online para esses testes de performance. Um exemplo é o https://jsben.ch/. Ele possui dois campos para se colocar códigos. Basta colocar os dois códigos que você quer comparar e mandar executar. Como resultado teremos uma indicação de qual foi o código mais rápido.

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

Cuidado ao querer fazer testes de performance

Por mais que seja importante cuidar da sua aplicação para dar a melhor experiência possível ao usuário, evite ficar focando em micro-otimizações. Coisas como querer melhorar um looping com poucos elementos são desnecessárias.

Foque em coisas que exijam realmente muitos cálculos e que possam fazer a aplicação engasgar em dispositivos com hardwares mais simples. Isso se aplica normalmente a animações, jogos e outras coisas que possam precisar de várias execuções custosas em um período muito curto.

Se acaso sua aplicação não se encaixe nisso mas ainda apresenta alguns comportamentos que precisam ser melhorados, provavelmente utilizar a técnica de Debounce ou deixar as operações assíncronas já vai resolver.


Ferramentas

Plop.js – Automatize a criação de arquivos

Olá Web Developers! Vamos conhecer o Plop.js, uma ferramenta incrível que nos permite automatizar a geração de arquivos em nossos projetos. Se você já precisou copiar o conteúdo de um arquivo já existente para criar outro, você precisa conhecer esta ferramenta!

Entendendo o problema

Caso você já tenha trabalhado com Angular, sabe que ele possui comandos do próprio Angular-CLI para gerar services, pipes, classes, modules, etc.

Por exemplo, se você precisar criar um Service, basta executar o comando para criá-lo. Assim será gerado automaticamente um arquivo com o nome do seu service, com código contendo o service com o nome que você escolheu, e ele automaticamente será inserido no seu módulo (atualização de arquivo).

Ou seja, com um simples comando você terá arquivos sendo criados e atualizados, já com o conteúdo pronto para você começar a programar. Então te poupa o trabalho de ter que escrever declarações repetitivas.

ng generate service hero
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root',
})
export class HeroService {

  constructor() { }

}

Porém, não temos essa praticidade em qualquer lugar. Um ótimo exemplo é quando trabalhamos com React. Por ser uma biblioteca, ele não é tão opinativo quanto frameworks como o Angular. Em resumo, cada um pode criar sua própria estrutura, modo de escrever seus códigos, bibliotecas, etc. Esta é uma das diferenças entre bibliotecas e frameworks.

Por consequência, não temos uma ferramenta que gere arquivos para nós. Isso muitas vezes faz com que a gente acabe criando um arquivo vazio e escrevendo tudo, ou até mesmo copiando um arquivo existente para acelerar um pouco. Com o Plop.js você economiza aqueles 5 minutos para cada arquivo criado, seja rota, componente, controller, arquivo de teste, etc.

Plop.js vem ao resgate!

Uma vez que seu projeto começa a crescer, é preciso ter uma boa estrutura, organização e padrões. Também é importante que todos do time sigam esse mesmo padrão.

Com o intuito de resolver isso, o Plop.js nos permite criar comandos que vão gerar arquivos com a estrutura que queremos de forma bem simples!

Grandes empresas utilizam o Plop.js, como Microsoft, PayPal, Adobe e Mozilla.

A imagem abaixo mostra o Plop.js sendo iniciado em um projeto React, me perguntando se quero criar um componente, serviço, hook ou uma estrutura para Redux-Saga (action, reducer e saga).

Plop.js - Escolhendo gerador

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

Instalando o Plop.js

Primeiro precisamos instalar o Plop.js em nosso projeto. Execute o comando:

npm install --save-dev plop

No package.json vamos adicionar um comando para iniciar o Plop!

{
    ...
    "scripts": {
        "plop": "plop"
    }
}

Agora poderemos iniciar o Plop.js com o comando npm run plop.

Iniciando seu primeiro gerador

Crie na raiz do seu projeto um arquivo com o nome plopfile.js com o seguinte conteúdo:

module.exports = function (plop) {

};

Estamos expondo uma função que o Plop.js vai executar e passar para ela o objeto plop como parâmetro. Este objeto possui várias funções a fim de nos permitir criar nossos geradores.

Já podemos criar os geradores dentro desta função. No entanto, em projetos grandes isso vai gerar uma bagunça. Portanto, prefira criar um arquivo para cada gerador.

Por isso, vamos criar uma pasta chamada plop e dentro vamos criar um arquivo chamado hook-generator.js. Ele vai servir para gerarmos um React Hook.

Em hook-generator.js vamos ter o seguinte código:

module.exports = function (plop) {

};

É um código igual ao que fizemos antes, mas agora ele está em um arquivo separado. Então vamos conectá-lo ao arquivo principal, o plopfile.js;

const hookGenerator = require('./plop/hook-generator.js');

module.exports = function (plop) {
    hookGenerator(plop);
};

Dessa forma estamos fazendo com que o plopfile.js seja um lugar onde chamamos nossos geradores ao invés de declará-los diretamente aqui.

Iniciando um gerador de React Hooks

Volte ao arquivo hook-generator.js para podermos ver como é simples criar um gerador de arquivos.

module.exports = function (plop) {
    plop.setGenerator('hook', {
        description: 'Gerador de React Hooks',
        prompts: [],
        actions: []
    })
};

É desse modo que iniciamos um gerador. Vamos entender cada uma das suas partes:

  • setGenerator: Função para criar um gerador. Ela recebe uma string indicando seu nome e um objeto indicando suas configurações
  • "hook": Indica o nome que demos ao gerador
  • description: Campo para colocarmos uma descrição sobre o nosso gerador
  • prompts: Array que vai receber objetos que vão indicar as perguntas que o terminal vai fazer para nós respondermos, para assim ele saber como criar o arquivo.
  • actions: Outro Array, e ele vai receber objetos que vão indicar as ações que o Plop vai ter que executar baseado em nossas respostas.

Partiremos agora para o prompts. Para criar um hook, vamos simplesmente pedir para o usuário indicar o nome do hook a ser criado. Assim poderemos usar esse nome para criar o nome do arquivo e já criar um código com esse mesmo nome.

Em resumo, vamos usar os prompts quando precisarmos ter o valor de alguma variável. Vamos chamar essa variável de nomeHook. Ficará assim:

    ...
    prompts: [
        {
            type: 'input',
            name: 'nomeHook',
            message: 'Digite o nome do Hook: '
        }
    ],
    ...
  • type indica o tipo de entrada que vamos usar. Para permitir que o usuário escreva, utilizamos o input
  • name é o nome da variável
  • message é o texto que o terminal vai imprimir para pedir uma ação do usuário
React - Despertando o Poder dos Hooks
Curso de React - Despertando o Poder dos Hooks
CONHEÇA O CURSO

Definindo Ações

Para encerrar, precisamos indicar uma ação a ser executada. No nosso caso, um arquivo vai ser criado. Com o intuito de criar um arquivo com o código que quisermos usando as variáveis que pegamos em prompts, criamos um arquivo de template que usa Handlebars.

Crie um arquivo chamado hook-template.hbs. Dentro dele teremos o template do nosso código. Você pode escrever do jeito que quiser.

import { useState, useEffect } from 'react';

export function use{{nomeHook}}(){
    const [value, setValue] = useState(null);

    useEffect(() => {

    }, []);

    return value;
}

Então criamos aqui uma estrutura genérica para um React Hook. Esse é o conteúdo que o Plop.js vai colocar no arquivo que for gerado. Porém, veja que no nome da função escrevemos {{nomeHook}}. O Handlebars vai trocar essa parte pelo nome da nossa variável. Ou seja, se o usuário escrever Scroll, teremos uma função com o nome useScroll().

Por fim, para fazer esse arquivo ser gerado, vamos escrever nossa action.

    ...
    actions: [
        {
            type: 'add',
            path: 'src/hooks/use{{nomeHook}}.js',
            templateFile: 'plop/hook-template.hbs'
        }
    ]
    ...
  • Como queremos criar um novo arquivo, o tipo da ação deve ser add.
  • Em path indicamos o caminho do arquivo e seu nome. Note que colocamos {{nomeHook}} para que seja trocado pela nossa variável. Assim o arquivo será criado com esse nome.
  • templateFile indica o arquivo com a template que será usada para inserir conteúdo no arquivo a ser criado.

Executando o Plop.js

Finalmente, basta executar o comando npm run plop. Como só temos um gerador, ele vai iniciá-lo automaticamente. Vamos dar ao nosso hook o nome Scroll.

Plop.js sendo iniciado pelo terminal

Assim que você pressionar Enter, o arquivo do jeito que queríamos será gerado, como você pode ver na imagem abaixo:

Plop.js - React Hook gerado automaticamente

Desenvolvedor React
Formação: Desenvolvedor React
O React é utilizado por várias empresas em suas aplicações por sua simplicidade e poder, como Facebook, Instagram, Whatsapp, Netflix e DropBox. Nesta formação veremos todo poder desta biblioteca tão poderosa.
CONHEÇA A FORMAÇÃO

Desenvolvimento Front-end

O que é Bootstrap?

Os frameworks são ferramentas incríveis e que poupam muito tempo dos desenvolvedores. Neste artigo, vamos conferir o Bootstrap, um dos mais populares frameworks front-end atualmente.

Afinal, o que é o Bootstrap?

O Bootstrap é um framework front-end gratuito e de código-fonte aberto, que disponibiliza componentes prontos para você utilizar em seu projeto. Com ele, você consegue criar e personalizar sites responsivos para dispositivos móveis, desktops e notebooks, com componentes pré-construídos e com plugins JavaScript poderosos. Tudo isso porque toda a estrutura do HTML, CSS e Javascript já se encontram prontas, bastando apenas que o desenvolvedor importe suas dependências em seu projeto.

Por exemplo: se você quer colocar em seu site um botão estilizado, você pode utilizar o componente button do Bootstrap diretamente, ou mesmo fazer pequenas customizações no componente para que ele tenha a aparência desejada. Com estes componentes pré-prontos, você ganha tempo, o que consequentemente faz com que seu projeto seja finalizado mais rapidamente, com menos esforço e até mesmo com mais qualidade.

Primeiramente, o Bootstrap foi desenvolvido pelo Twitter, onde inicialmente era apenas um projeto para padronizar o desenvolvimento dentro da própria empresa. Porém, no meio do desenvolvimento do projeto, a equipe percebeu o potencial que este framework tinha para impactar e trazer benefícios para a comunidade. Dessa maneira, ele foi liberado em 2011 já como um projeto open source, ou seja, para que os outros desenvolvedores pudessem contribuir. De lá pra cá, nesse meio tempo, foram muitas mudanças até chegar sua atual versão 4, que possui inúmeras novidades tanto nos componentes CSS quanto nos componentes JavaScript.

Por que utilizar o Bootstrap?

O Bootstrap segue os princípios de usabilidade e tendências de design para interfaces. Além disso, sua padronização permite que os sites tenham um visual atraente, ou seja, uma forma de criar páginas esteticamente agradáveis aos usuários. Ele conta ainda com componentes e plugins já prontos para você utilizar em seus projetos, o que faz com que você ganhe muita produtividade na hora de desenvolver.
Você pode adaptar o modelo-base do Bootstrap para atender às necessidades do seu projeto.

framework Bootstrap

As APIs do Bootstrap são tão poderosas e flexíveis que você tem total liberdade para personalizar os componentes da maneira como desejar com um mínimo de esforço. Nas figuras abaixo, temos exemplos de componentes do Bootstrap que foram livremente personalizados.

Componentes do Bootstrap

Com o Bootstrap, você também não precisa se preocupar se seu site funcionará bem em todas as diferentes resoluções de dispositivos: o Bootstrap já contém componentes responsíveis, já diminuindo consideravelmente o esforço envolvido na criação de interfaces plenamente responsivas.

Vantagens e desvantagens

Algumas vantagens e algumas desvantagens podem ser destacadas com relação a este framework.

Vantagens:
  • Responsividade: possui um sistema de layout 100% responsivo, capaz de manter a página completamente responsiva em diferentes dispositivos e resoluções;
  • Extensa biblioteca de componentes: possui um conjunto de componentes extenso, como ícones, painéis etc.;
  • Documentação: possui uma documentação bem completa e acessível;
  • Reuso de código: Como o Bootstrap entrega uma gama muito grande de componentes pré-prontos, se torna muito mais fácil lidar com questões como reusabilidade de código.
Desvantagens
  • Excesso de padronização: como a gama dos componentes pré-prontos é extensa e atende a praticamente todos os cenários no que diz respeito ao desenvolvimento de páginas web responsivas, as diferentes aplicações podem acabar ficando “com a mesma cara”. Porém, sua customização é bastante simples.
Bootstrap 4 - Fundamentos
Curso de Bootstrap 4 - Fundamentos
CONHEÇA O CURSO

Como aprender sobre o Bootstrap?

O Bootstrap é muito simples para aprender e customizar. Além da documentação oficial, temos os nossos cursos de Bootstrap, que acabaram de ser atualizados. Então, vale a pena dar uma conferida 🙂

Se você é um desenvolvedor front-end ou deseja seguir essa carreira, é interessante colocar o Bootstrap em seu plano de estudos. Ele irá te auxiliar muito no desenvolvimento de seus sites, fazendo-o ter muita produtividade. Você também pode utilizá-lo com outras ferramentas atuais do mercado como o Angular e o React.

Quando falamos de frameworks de componentes visuais, o Bootstrap não é o único no mercado. Alguns de seus concorrentes diretos são o Materialize e o Foundation. Porém, a simplificação e a baixa curva de aprendizagem ainda fazem o Bootstrap ser um dos frameworks mais adotados pelo mercado.


HTML

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
Formação: Desenvolvedor React
O React é utilizado por várias empresas em suas aplicações por sua simplicidade e poder, como Facebook, Instagram, Whatsapp, Netflix e DropBox. Nesta formação veremos todo poder desta biblioteca tão poderosa.
CONHEÇA A FORMAÇÃO