Estrutura de Dados com JavaScript: Lista Duplamente Encadeada

A lista duplamente encadeada funciona pelo mesmo princípio que a lista encadeada. No entanto, cada nó contém uma referência ao nó anterior e ao próximo, se esse nó estiver disponível. Isso é particularmente útil quando é necessário viajar para trás e para frente.

Nossa lista Duplamente Encadeada será o desafio final e o mais longo com 9 métodos adicionais:

DisplayAllBackwards() DisplayAt(index), AddFirst(data),AddLast(data), Add(data, index), RemoveFirst(), RemoveFirst(), RemoveAt().

DisplayAll():

Descrição:

Retorna um array com os dados, ou se está vazio, retorna null.

this.DisplayAll = function() {
    // Na maioria das vezes, head não será nulo, então vamos começar com isso agora
    if (head) {
        let arr = new Array();
        let atual = head;
        for (let i = 0; i < contador; i++) {
            arr[i] = atual.dado;
            atual = atual.proximo;
        }
        return arr;
    } else {
        return null;
    }
}

DisplayAllBackwards():

Descrição:

Retorna um array com os dados do tail ao head ou, se vazio, retorna nulo. Dê uma olhada neste método e pense em como seria difícil implementá-lo em uma lista encadeada simples.

this.DisplayAllBackwards = function() {
    if (head) {
        let arr = new Array();
        let atual = tail;
        for (let i = 0; i < contador; i++) {
            arr[i] = atual.dado;
            atual = atual.anterior;
        }
        return arr;
    } else {
        return null;
    }
}

DisplayAt():

Descrição:

Funciona da mesma forma de uma lista encadeada simples.

this.DisplayAt = function(index) {
    // verifica valores fora dos limites
    if (index > -1 && index < contador) {
        let atual = head;
        let i = 0;

        // não fui eu, é da nczonline (veja fonte).
        // É uma maneira diferente de implementar o FOR que estamos usando
        // e queria que todos tivessem a chance de conhecê-lo.
        while (i++ < index) {
            atual = atual.proximo;
        }

        return atual.dado;
    } else {
        return null;
    }
}

AddFirst():

Descrição:

Adiciona no início da lista duplamente encadeada.

this.AddFirst = function(dado) {
    // Cria um novo nó
    let node = new Node(dado);
    node.proximo = head;

    head = node;

    //Se a lista está vazia
    if (contador === 0) {
        tail = head;
    } else {
        //Não se esqueça do nó anterior. Ele precisa ser referenciado
        head.proximo.anterior = head;
    }

    contador++;
}

AddLast():

Descrição:

Adiciona ao final da lista duplamente encadeada.

this.AddLast = function(dado) {
    let node = new Node(dado);
    node.anterior = tail;

    if (contador === 0) {
        head = node;
    } else {
        tail.proximo = node;
    }

    tail = node;

    contador++;
}

Add():

Descrição:

Adiciona um item em uma posição específica. Dica: desenhe o processo se necessário. Não é tão simples quanto você imagina.

this.Add = function(dado, index) {
    // verifica valores fora dos limites
    if (index > 0 && index < contador) {

        let node = new Node(dado);
        let atual = head;
        let i = 0;

        // encontre o local certo
        while (i++ < index) {
            atual = atual.proximo;
        }

        atual.anterior.proximo = node;
        node.proximo = atual;
        node.anterior = atual.anterior;
        atual.anterior = node;

        contador++;
    } else if (index < 1) {
        this.AddFirst(dado);
    } else {
        this.AddLast(dado);
    }
}

RemoveFirst():

Descrição:

Remove o primeiro item.

this.RemoveFirst = function() {
    if (head) {

        head = head.proximo;
        contador--;
        //Se há apenas um item
        if (contador === 0) {
            tail = null;

        } else {
            // Não se esqueça do nó anterior. Ele também precisa que o conjunto de referência seja nulo.
            head.anterior = null;

        }
    }
}

RemoveLast():

Descrição:

Remove o último item.

this.RemoveLast = function() {
    if (head) {
        // existe apenas um item
        if (contador === 1) {
            head = null;
            tail = null;
        } else {
            tail.anterior.proximo = null;
            tail = tail.anterior;
        }

        contador--;
    }
}

RemoveAt():

Descrição:

Remove um item de uma posição específica.

this.RemoveAt = function(index) {
    // verifica valores fora dos limites
    if (index > 0 && index < contador - 1) {

        let atual = head;
        let i = 0;

        // encontre o local certo
        while (i++ < index) {
            atual = atual.proximo;
        }

        atual.anterior.proximo = atual.proximo;
        atual.proximo.anterior = atual.anterior;

        contador--;
    } else if (index < 1) {
        this.RemoveFirst();
    } else {
        this.RemoveLast();
    }
}
  • DISPLAYALL():
  • DISPLAYALLBACKWARDS():
  • DISPLAYAT(INDICE):
  • ADDFIRST(DADO):
  • ADDLAST(DADO):
  • ADD(DADO,INDICE):
  • REMOVEFIRST():
  • REMOVELAST():
  • REMOVEAT(INDICE):

Estrutura de Dados com JavaScript: Deque (Fila duplamente encadeada)

A fila duplamente encadeada é basicamente como uma fila, exceto que você pode adicionar ou remover de qualquer lado. Agora que você está um pouco mais acostumado a como isso funciona, eu gostaria de tornar as coisas um pouco mais difíceis.

function Deque() {
    let contador = 0;
    let head = null;
    let tail = null;

    // Permite visualizar o valor armazenado na cabeça
    this.getHead = function() {
        if (head) {
            return head.dado;
        }

        return null;
    }

    // Permite visualizar o valor armazenado no final
    this.getTaill = function() {
        if (tail) {
            return tail.dado;
        }
        return null;
    }

    // Retorna o número de itens na fila
    this.Getcontador = function() {
        return contador;
    }

    // Permite definir a estrutura do nó fora de cada método.
    // Dessa forma, será necessário fazer apenas uma vez
    let Node = function(dado) {
        this.dado = dado;
        this.proximo = null;
    }

}

 

A fila duplamente encadeada terá muito mais métodos que o outro, com um total de 10, os que você já viu e:

DisplayHeadToTail(), DisplayTailToHead() AddHead(data), AddTail(data),RemoveHead() e RemoveTail().

DisplayHeadToTail():

Descrição:

Retorna um array com os dados ou, se vazio, retorna null.

this.DisplayHeadToTail = function() {
    if (head != null) {
        let arr = new Array();
        let atual = head;

        // enquanto houver um atual
        while (atual) {

            // ATENÇÃO: Para quem é novo no javascript, dê uma olhada. Você consegue adivinhar o que esse método faz?
            arr.push(atual.dado);
            atual = atual.proximo;
        }

        return arr;
    } else {
        return null;
    }
}

DisplayTailToHead():

Descrição:

Retorna os dados da fila duplamente encadeada do início ao fim (oposto ao anterior).

this.DisplayTailToHead = function() {
    if (head != null) {

        // Chama DisplayHeadToTail() e inverte ela.
        let arr = this.DisplayHeadToTail();

        // Este é um dos grandes métodos do JavaScript.
        return arr.reverse();
    } else {
        return null;
    }
}

AddHead():

Descrição:

Adiciona ao início (head) da fila duplamente encadeada.

this.AddHead = function(dado) {

    // Como você pode ver, agora nós precisamos declarar um novo nó
    let node = new Node(dado);

    node.proximo = head;
    head = node;

    // Se a lista está vazia:
    if (!tail) {
        tail = head;
    }

    contador++;
}

AddTail():

Descrição:

Adiciona ao final (tail) da fila duplamente encadeada.

this.AddTail = function(dado) {
    let node = new Node(dado);

    // Se a lista está vazia
    if (!head) {
        head = node;
    } else {
        tail.proximo = node;
    }

    tail = node;
    contador++;
}

RemoveHead():

Descrição:

Remove o início(head) da fila duplamente encadeada.

this.RemoveHead = function() {
    if (head) {
        // Se é o item final
        if (contador === 1) {
            head = null;
            tail = null;
        } else {
            head = head.proximo;
        }

        contador--;
    }
}

RemoveTail():

Descrição:

Remove o elemento final (tail) da fila duplamente encadeada:

this.RemoveTail = function() {
    if (head) {
        // Se não é o último item
        if (contador === 1) {
            head = null;
            tail = null;
        } else {
            let atual = head;

            // precisamos ir tão longe quanto os dois antes da última
            while (atual.proximo.proximo) {
                atual = atual.proximo;
            }

            tail = atual;
            tail.proximo = null;
        }

        contador--;
    }
}
  • DisplayHeadToTail():
  • DisplayTailToHead():
  • AddHead(dado):
  • AddTail(dado):
  • RemoveHead():
  • RemoveHead():

Gostou deste artigo? Comente abaixo!

Estrutura de Dados com JavaScript: Lista Encadeada

Listas encadeadas são estruturas de dados feitas de grupos de nós que juntos representam uma sequência. Você notará que a Fila e a Pilha foram criadas usando a ideia básica de uma lista encadeada. No entanto, eles têm regras especiais que os tornam diferentes em funcionalidade.

function ListaEncadeada() {
    let contador = 0;
    let head = null;

    this.GetCount = function(){
        return countador;
    }

} 

Nossa lista encadeada terá 6 métodos adicionais: DisplayAll (), DisplayAt (índice), AddFirst (dados), Add (dados, índice), RemoveFirst (), RemoveAt() .

DisplayAll():

Descrição:

O nome já diz tudo. Retorna um array com os dados ou, se vazio, retorna nulo.

this.DisplayAll = function() {
    // se está vazio
    if (head === null) {
        return null;
    } else {
        //senão, percorre a lista e a coloca em um array.
        let arr = new Array();
        let atual = head;

        for (let i = 0; i < contador; i++) {
            arr[i] = atual.dado;
            atual = atual.próximo;
        }
        return arr;
    }
}

DisplayAt():

Descrição:

Como o método PeekAt (indice) anterior da Fila, é exibido em um índice específico ou, fora dos limites, ele retorna null.

this.DisplayAt = function(indice) {
    // verifique se há valores fora dos limites
    if (indice > -1 && indice < contador) {
        let atual = head;
        let i = 0;

        // não fui eu, é da nczonline (veja fonte).
        // É uma maneira diferente de implementar o FOR que estamos usando
        // e eu queria que todos tivessem a chance de conhecê-lo.
        while (i++ < indice) {
            atual = atual.proximo;
        }

        return atual.dado;
    } else {
        return null;
    }
}

AddFirst():

Descrição:

Adiciona à frente da lista. Se você está se perguntando, frente é onde o índice é 0 e referenciado pelo cabeçalho.

this.AddFirst = function(dado) {
    // Cria um novo nó
    let node = {
        dado: dado,
        proximo: head
    };

    head = node;
    contador++;
}

Add()

Descrição:

Adiciona um item à lista na posição especificada.

this.Add = function(dado, indice) {
    // se o índice escolhido for 0, faça o método AddFirst (dado).
    if (indice === 0) {
        this.AddFirst(dado);
    }
    // verifique se há valores fora dos limites
    else if (indice > -1 && indice < contador) {
        let node = {
            dado: dado,
            proximo: null
        };

        let anterior;
        let atual = head;
        let i = 0;

        // encontre o local certo
        while (i++ < indice) {
            anterior = atual;
            atual = atual.proximo;
        }

        anterior.proximo = node;
        node.proximo = atual;

        contador++;
    } else {
        alert("fora de alcance");
    }
}

RemoveFirst()

Descrição:

Remove o primeiro item.

this.RemoveFirst = function() {
    // se não há itens na lista, retorna nulo
    if (head === null) {
        return null;
    } else {
        let out = head;
        head = head.proximo;

        if (contador > 0) {
            contador--;
        }

        return out.dado;
    }
}

RemoveAt()

Descrição:

Remove um item de um índice específico.

this.RemoveAt = function(indice) {
    if (indice === 0) {
        return this.RemoveFirst(indice);
    }
    // verifique se há valores fora dos limites
    else if (indice > -1 && indice < contador) {

        let atual = head;
        let anterior;
        let i = 0;

        // encontre a localização correta
        while (i++ < indice) {
            anterior = atual;
            atual = atual.proximo;
        }

        // pule o item para remover
        anterior.proximo = atual.proximo;

        // diminuir o comprimento
        contador--;
    } else {
        return null;
    }

    // retorna o valor
    return atual.dado;
}
  • DISPLAYALL():
  • DISPLAYAT(INDICE):
  • ADDFIRST(DADO):
  • ADD(DADO,INDICE):
  • REMOVEFIRST():
  • REMOVEAT(INDICE):

Gostou deste artigo? Comente abaixo!

Estrutura de Dados com JavaScript: Fila

Filas são coletâneas de dados que mantém os objetos em uma ordem determinada ao aplicar o algoritmo FIFO (First In First Out), ou seja, o primeiro a entrar é o primeiro a sair.

function Fila(){
    let contador = 0;

    // Ambos início e final da fila estão nulos (não possuem nenhum dado)
    let inicio = null;
    let final = null;

    // Retorna a quantidade de itens na fila.
    this.GetContador = function(){
        return contador;
    }
}

A nossa fila terá quatro métodos adicionais: enqueue(dado), dequeue(), peekAt() e displayAll().

Enqueue():

Descrição:

Adiciona um item no início da fila. O processo é o mesmo do método push() utilizado na pilha, mas foi alterado por causa do exercício.

this.Enqueue = function (dado){
    // Cria um nó com o dado
    let node = {
        dado: dado,
        // Os próximos pontos serão para valorizar de maneira linear
        // Se o início está vazio (null), não será um problema
        proximo: inicio
    };

    // Se é o primeiro item a ser inserido na lista
    // o início será o final
    if (inicio === null){
        tail = node;
    }

    // define o nó como o novo início
    inicio = node;

    //incrementa o contador
    contador++;
}

Dequeue()

Descrição:

Remove e retorna o último item inserido e armazenado que seria aquele no lado oposto da fila.

this.Dequeue = function(){
    // Se a fila está vazia, retorna null
    if (contador === 0){
        return;
    }else{
        let atual = inicio;
        let anterior = null;
    }

    // Enquanto houver um próximo, ele avançará a fila
    // A ideia é ter um atual no final e um anterior
    while (atual.proximo){
        anterior = atual;
        atual = atual.proximo;
    }

    // se há mais que 1 item, 
    // remove o final e decrementa o contador em 1
    if (contador > 1){
        // remove a referência ao último nó.
        anterior.proximo = null;

        // torna o nó anterior como final da lista
        final = anterior;
    }

    // Reseta a fila
    else{
        inicio = null;
        final = null;
    }

}

DisplayAll()

Descrição:

O nome já diz tudo. Ele funciona da mesma maneira que o método da pilha().

this.DisplayAll =  function(){
    // Se não há nada no início, nada será retornado
    if (inicio === null){
        return null;
    }else{
        let arr = new Array();
        let atual = inicio;

        for ( let i = 0; i < contador; i++){
            arr[i] = atual.dado;
            atual = atual.proximo;
        }
        return arr;
    }
}

PeekAt()

Descrição:

Segue a mesma ideia do peek(), mas qualquer item da fila pode ser buscado e exibido.

this.PeekAt = function (index){
    // Qualquer coisa menor que 0 e igual ou maior que a contagem não está na fila
    if (index > -1 && index < contador){
        let atual = inicio;

        // Navega pela fila para achar o item
        for (let i = 0; i < index; i++){
            atual = atual.proximo;
        }
        return atual.dado;
    }
    // Um index fora dos limites da fila foi escolhido
    else{
        return null;
    }
}
  • enqueue(dado)
  • dequeue()
  • displayAll()
  • peekAt(index)

Gostou deste artigo? Comente abaixo!

Estrutura de Dados com JavaScript: Pilha

Uma pilha é um tipo particular de dado em que as principais operações são a adição de um item (método push()) e remoção (método pop()). A pilha implementa um algoritmo LIFO (Last In First Out), que é uma estrutura onde o último elemento adicionado deve ser o primeiro a ser removido. Inicialmente, ela terá o seguinte código:

 

function pilha(){
    //cria uma variável que servirá 
     //para criação da pilha
    let topo = null; 
    let contador = 0;

    //Retorna o número de itens da fila
    this.GetContador = function(){
        return contador;
    }

    /* Métodos */
}

A nossa pilha terá quatro métodos adicionais: push(), pop(), peek() e displayAll(). Eles serão definidos dentro da função pilha() abaixo de this.GetContador. Vamos começar:

Push():

Descrição:

O método push() adiciona os dados especificados na pilha e o torna o nó do topo. Ele também aumenta a contagem de pilhas em 1.

this.Push = function (dado) {
    // Cria um nó que contém o dado e a referência para o próximo item
    let node = {
        dado: dado, 
        proximo: null
    };

    // Linka o nó atual para o topo da pilha
    // O próximo nó receberá o valor null como referência.
    node.proximo = topo;
        
    // Faz o nó atual ser o topo da pilha
    topo = node;

    // Incrementa o contador
    contador++;
}

Peek()

Descrição:

Exibe o item do topo da pilha. Retorna null se a pilha estiver vazia.

this.Peek = function(){
    // Se a lista estiver vazia, retornará null
    // senão, retornará o dado que estiver no nó topo.
    if (topo === null){
        return null;
    }else{
        return topo.dado;
    }
}

Pop()

Descrição:

Parece muito com o método peek(), com a diferença que o pop() remove o item que está no topo da pilha e diminui o contador em 1.

this.Pop = function(){
    // Se a lista estiver vazia, retornará null
    if(topo === null){
        return null;
    }else{
        // Atribui o topo a uma variável temporária
        let out = topo;

        // Atribui o topo para o próximo elemento da pilha
        topo = topo.proximo;

        // Se existir itens na pilha, decrementa o contador
        if (contador > 0){
            contador--;
        }

        // Retorna o valor que foi removido da pilha
        return out.dado;
    }
}

displayAll()

Descrição:

Exibe todos os dados da pilha como um vetor. Exibi-lo como um vetor foi minha escolha, pois não tinha certeza sobre como iria exibi-lo (por exemplo: console.log; document.write etc.).

this.DisplayAll = function(){
    // Se a lista estiver vazia, retornará null
    if (topo === null){
        return null;
    }else{
        // Instancia um vetor
        let arr = new Array();
        // Cria um nó que irá percorrer a pilha
        let noAtual = topo;

        // Percorre a pilha até alcançar o item mais abaixo
        for (let i = 0; i < contador; i++){
            // Atribui os dados ao vetor
            arr[i] = noAtual.dado;
            // Avança para a próxima posição da pilha
            noAtual = noAtual.proximo;
        }

        // Retorna o vetor
        return arr;
    }
}

Métodos utilizados na estrutura do tipo PILHA:

  • push(dado)
  • peek()
  • pop()
  • displayAll()

Gostou deste artigo? Comente abaixo!

O que é SPA?

SPA é a sigla para Single Page Application (aplicação de uma página). Este tipo de aplicação tem por característica possuir um carregamento um pouco mais demorado ao ser aberto pois ela irá trazer todos os assets (arquivos, imagens, etc..) para a máquina do usuário, mas após isso, se o sistema foi bem feito a navegação deverá ser muito rápida e fluida.

As SPA se tornaram populares graças as implementações de performance que o V8 engine da Google proporcionou ao JavaScript. Essas melhoras tornaram as páginas mais rápidas permitiram proporcionar uma agilidade antes vista apenas em aplicativos desktops. Uma das aplicações mais famosas que começaram a utilizar este conceito foi o Gmail, o qual era possível navegar entre as opções sem que a página fosse recarregada.

Todos os processos são executados no lado do cliente e a comunicação com o servidor só ocorrerá com chamadas Ajax quando a aplicação precisar enviar ou buscar novos dados. Para este tipo de aplicação não interessa qual a tecnologia, quantas aplicações ou onde o sistema está hospedado, ela precisa apenas saber os endpoints que serão consumidos. Uma desvantagem de tudo ocorrer no front é que algumas regras podem ficar fragmentadas entre o front-end e back-end.

 

Como é de se esperar, em aplicações SPA todo o código fonte fica no browser e para evitar que outros copiem o código, existem ferramentas que ajudam a comprimir e alterar o código de forma que ele seja praticamente impossível de ler.

Normalmente, SPAs possuem um componente chamado Router que gerencia a navegação do usuário mesmo que ele atualize a tela. SPAs trabalham muito com armazenamento local no navegador, de forma que após um refresh seja possível buscar no armazenamento as informações e remontar o estado anterior da tela.

Com o passar do tempo várias técnicas e ferramentas para dar suporte a criação de SPAs foram sendo criadas, algumas com a ideia de ser uma solução completa com tudo que o desenvolvedor precisaria para desenvolver uma aplicação, e outras que procuravam solucionar alguns problemas mais pontualmente.

Continue lendo “O que é SPA?”

Uma breve introdução ao Flux

O Flux é uma arquitetura de Software que o Facebook utiliza para construir o front-end de suas aplicações. Flux é mais um conjunto de padrões do que um framework e você pode iniciar o uso de Flux imediatamente em seus projetos, sem ter que escrever ou reescrever muito código.

A criação do Flux ocorreu pois precisava-se de um padrão que resolvesse alguns problemas muito comuns do desenvolvimento front-end, tais como:

  • Padronização do fluxo da arquitetura para reduzir o tempo que leva aos desenvolvedores para entenderem o código de seus colegas.
  • Reduzir a replicação de código e regras de negócio.
  • Facilitar a manutenção do sistema.
  • Tornar mais simples de implementar novas funcionalidades que impactam diversas partes do sistema.
  • Automatizar a atualização do estado de um dado que é lido em diversos lugares.

O Flux possui 4 elementos:

  1. Action: São coleções de métodos que são chamadas pelas nossas Views, que enviam ações para o Dispatcher contendo payloads, que serão entregues aos Stores.
  2. Dispatcher: É o componente que gerencia basicamente todo o processo da nossa aplicação. O ponto central são os métodos Register e Dispatch, que são triggers de eventos entre a ação que disparou o evento e as stores registradas. Ele simplesmente recebe a Action e propaga para as stores que irá identificá-la e disparar um evento caso registrado.
  3. Stores: São os locais onde ficam armazenados a lógica e estado da aplicação, que tem call-backs registrados para o Dispatcher.
  4. (Controller) Views: Responsáveis por permitir que o usuário interaja com a aplicação e por mostrar a ele o estado atual dela.

O Dispatcher é único para toda a aplicação, dessa forma só existe um único elemento responsável por receber as Actions realizadas nas Views e dispará-las para as Stores da aplicação. Toda mudança no estado da aplicação somente pode ser realizada através de uma Action.

A principal característica do Flux é o fluxo unidirecional de dados. Sem alterações em cascata, a cada Action um novo estado é gerado. Dessa forma, o estado da aplicação é previsível, sendo mais simples de testar. Com a lógica de negócio concentrada em um local (nas Stores), fica mais fácil encontrar e corrigir bugs.

O que é MVC e MVVM?

O que é MVC?

O MVC é um padrão arquitetural de para o desenvolvimento que existe desde os anos 70 e foca em dividir a aplicação em 3 camadas: Model, View e Controller.

  • O Model representa a camada contendo as regras de negócio e acesso a dados. No JavaScript, está normalmente á a camada que faz a chamada aos WebServices.
  • A View representa o componente de interface do usuário, como por exemplo as páginas HTML.
  • O Controller atua como intermediário entre o Model e a View. Ele recebe requisições da View, faz o processamento para buscar os dados no Model e por último, processa e retorna o resultado recebido para a View.

Vantagens:

  • Alto nível de coesão: o MVC permite o agrupamento lógico de ações relacionadas, tornando fácil de saber quem é e onde está o código de partes do sistema.
  • Baixo acoplamento: A própria natureza da estrutura MVC é tal que existe um baixo acoplamento entre Models, Views e Controllers.
  • Facilidade de modificação: Devido à separação de responsabilidades, o desenvolvimento ou modificação futura é mais fácil, ou seja, a escalabilidade do produto aumenta.

Desvantagens:

  • Navegabilidade de código: A navegação da estrutura pode ser complexa porque introduz novas camadas de abstração e requer que os usuários se adaptem aos critérios de decomposição do MVC.
  • Várias representações: decompor um recurso em três camadas causa dispersão. Portanto, exigindo que os desenvolvedores mantenham a consistência de várias representações ao mesmo tempo.

O que é MVVM?

MVVM é a sigla para Model View ViewModel. Ele foi inicialmente desenvolvido pela Microsoft com o intuito de ser utilizado no com o WPF e Silverlight, mas atualmente vem sendo utilizado por diversos desenvolvedores JavaScript. Muitos frameworks como o Angular, Knockoutjs e Aurelia suportam a utilização do MVVM.

Nesta arquitetura, o Model tem função similar ao do MVC, representando o domínio de dados da aplicação. Já a View e a ViewModel possuem conceitos um pouco diferentes.

  • View é a camada com o qual o usuário interage e neste padrão, ela considerada ativa. Isto significa que elas possuem Data Bindings (vinculação de dados) com o ViewModel para que ambos estejam em sincronia.
  • O ViewModel atua como um conversor de dados, transformando os dados do Model para informações que possam ser utilizadas pela View e passando os comandos da View para o Model. Ele também ajuda a manter o estado da View e atualiza o Model de acordo com as ações do Usuário. A View e o ViewModel estão conectados através do Data Binding, que permite a propagação automática destas mudanças. Existem 2 formas de Data Binding:
    • Two Way: Quando uma alteração na View ou na ViewModel automaticamente atualiza um ao outro.
    • One Way: Quando apenas alterações na View atualizam a ViewModel ou apenas o inverso.

Podemos citar como vantagens na utilização do MVVM:

  1. O desenvolvedor pode optar por reaproveitar um ViewModel em várias Views.
  2. O código para atualizar a View é pequeno, uma vez que as alterações podem ser propagadas automaticamente.
  3. O MVVM facilita o desenvolvimento paralelo da aplicação por vários desenvolvedores.

Já como desvantagens:

  1. É uma estrutura com uma complexidade maior e para aplicações pequenas poderá adicionar camadas e regras desnecessárias.
  2. Aplicações que possuem vários pontos de alteração de um mesmo Model, podem acabar exibindo dados desatualizados.

 

 

O custo do JavaScript 2019

Se você tem interesse em saber mais sobre os impactos de performance do JavaScript nos navegadores, esse artigo é para você.

Este post é uma adaptação do meu entendimento do vídeo e artigo sobre o custo do JavaScript que foi apresentado por Addy Osmani (Link no final do post) que fala sobre as mudanças que ele observou no custo do JavaScript entre o ano 2018 e 2019.

De acordo com ele, uma das grandes mudanças no custo do JavaScript nos últimos anos se deve nas melhorias como os navegadores conseguem processar scripts. Em 2019 o custo foco está no tempo de download e execução dos scripts.

O que isso quer dizer para os desenvolvedores?

Como a compilação e analise de dados não é mais tão lenta com antes, atualmente é importante considerar 3 coisas nos bundles de JavaScript

  1. Melhorar o tempo de download: Evite ter bundles maiores que 100kb (50kb para dispositivos móveis) pois eles consomem muito a rede e memória do dispositivo. Aproveite as funcionalidades do HTTTP2 para reduzir o overhead de chamadas adicionais.
  2. Melhorar o tempo de execução: Evite tarefas que consomem muito da thread principal. A execução do script após o download é um dos custos dominantes.
  3. Evite scripts inline muito grandes: Uma boa regra genérica e evitar scripts inline que sejam superiores a 1kb pois eles são processados pela thread principal e podem atrasar interatividade da página.

Custo do JavaScript para smartphones.


Tarefas longas monopolizam a thread principal. Tente quebra-las.

Por que a o download e a execução do código são importantes?

Apesar de estarmos começando no mundo do 5G e existirem smartphones com alta capacidade de processamento, a média da capacidade de download (mesmo em países de primeiro mundo) ainda se compara ao 3G. Junto com o fato que muitos destes dispositivos não terem o poder de processamento necessário para rodar eficiente alguns aplicativos, temos ai a receita para uma péssima experiencia para o usuário.

O que o V8 fez para melhorar o tempo de processamento?

O V8 reduziu a quantidade de trabalhos de análise e compilação na thread principal em uma média de 40% (por exemplo, 46% no Facebook, 62% no Pinterest) com a maior melhoria sendo 81% (YouTube), analisando e compilando um trabalhador fio. Isso é um acréscimo ao parsing / compilação de fluxo de threads fora da linha principal existente.

Conclusões

O download e o tempo de execução são os principais bottlenecks para o carregamento de scripts em 2019. Divida pacotes de forma que o usuário só baixe aquilo que precisa quando for necessário. No celular, você deve enviar muito menos script devido à rede, ao consumo de memória e ao tempo de execução para CPUs serem mais lentas.

Fonte:

Blog

Youtube

Recursão e a Pilha (Stack)

Se você não é novato em programação, e até aqueles que já fizeram algumas cadeiras/módulos de programação, provavelmente já ouviu os termos recursão e pilha.

Recursão é um método de programação onde o código executa uma função que chama a si mesma um número X de vezes para resolver um problema que apresenta um padrão repetitivo. Ela tem uma funcionalidade muito similar aos loops, mas sem explicitamente mostrar que está fazendo o mesmo trabalho repetidas vezes.

Quais as vantagens de usar recursão?

Essa é uma duvida bem comum, devo iterar? ou usar a recursão? Nos seguintes casos, seria melhor usar a recursão:

  • Reduzir o código e deixar torna-lo mais simples de ler: Para quem não está acostumado isso parece estranho, mas em grande maioria dos casos é possível escrever a mesma lógica com um número menor de linhas, tornando-o mais fácil de entender e debugar.
  • Quando você está trabalhando com uma linguagem funcional: Linguagens funcionais lidam com recursão muito melhor que imperativas. Já as linguagens imperativas lidam com iteração melhor, então leve isso em consideração quando estiver desenvolvendo seu programa ou script
  • A recursão é melhor na travessia de árvores. Este é um pouco mais avançado. Uma versão extremamente simplificada do que isso significa é a seguinte: Uma árvore é uma coleção de objetos que estão ligados um ao outro (imagine folhas em uma árvore conectada por ramos que por sua vez estão conectados a outros ramos até as raízes). Uma das maneiras mais eficientes de percorrer essas árvores ao procurar por uma folha (ou nó) específica é seguir, de maneira recursiva, uma única ramificação até o final dessa ramificação até encontrar o valor que você está procurando.

Exemplos de Recursão

Digamos que queremos criar algo simples, como uma função que faz que calcula a potencia N de um valor X (exemplo 2^3 = 8, X^N = 8).

let valor = potencia(2, 2);
//Exibe o valor 4
console.log(valor);

valor = potencia (2, 3);
//Exibe o valor 8
console.log(valor);

valor = potencia (2, 4);
//Exibe o valor 16
console.log(valor);

Importante: Este é apenas um exemplo, utilizem o objeto Math do JavaScript para esse tipo de calculo.

Poderíamos faze-lo com o Loop For

function potencia(x, n) {
  let result = 1;

  // Multiplica o resultado X N vezes para obter a resposta
  for (let i = 0; i < n; i++) {
    result *= x;
  }

  return result;
}

Console.log(potencia(2, 3) ); // 8

Agora utilizando a recursão

function potencia(x, n) {
  if (n == 1) {
    // Quando n finalmente é 1, não executa mais a recursão para finalizar o calculo
    return x;
  } else {
    //obtém a resposta do próximo pedaço do calculo chamando a função novamente
    let recursao = potencia(x, n - 1)

    return x * recursao;
  }
}

console.log(potencia(2, 3) ); // 8

Então, o que está acontecendo exatamente?

No caso da recursão deste algoritmo, quebramos a lógica em pequenos passos que fazem a multiplicação de X pelo resultado anterior até chegar em um ponto onde não é feita mais a chamada recursiva. Quando isso ocorre, as funções começam a ser retornadas e resolvidas.

No caso do exemplo acima, se fizéssemos 2^3, a ultima recursão ser no n==1 que retornaria 2 para a função anterior. Ela multiplicaria 2 * 2, resultando em quatro e retornaria para a primeira chamada que resultaria em 8 e terminaria a função.

A recursão normalmente possui menos linhas de código

A recursão normalmente é menor que a iteração. Abaixo está o mesmo exemplo que fizemos acima, mas usando o mínimo de comandos, retornos e de linhas possíveis.

function pow(x, n) {
  return (n == 1) ? x : (x * pow(x, n - 1));
}

Pilha

Uma pilha é uma região na memória, que opera no modo First-In-Last-Out, exatamente como a pilha que você deve ter estudado em estrutura de dados. Para cada nova ação que precisa ser executada, esta é “empilhada” e terá que ser processada antes da ação anterior voltar a ser trabalhada.

Note que as pilhas não tem tamanho infinito e quando você cria uma função recursiva muito grande ou mau feita, causará o famoso erro que chamamos de stack-overflow

Para ter uma ideia, execute o seguinte código

let i=0;
function estourarPilha() {
    console.log(i++);
    estourarPilha();
}
estourarPilha();

Para cada navegador os valores serão diferentes, mas eventualmente eles irão parar de funcionar pois você conseguiu quebra-los. Mas fique tranquilo, basta reinicia-lo que tudo voltará ao normal.

Conclusão

Esta foi uma introdução bem básica sobre recursão e a pilha no JavaScript, espero que você tenha aprendido com o exemplo e caso tenha alguma duvida ou sugestão por favor deixe seu comentário abaixo.