Forem: Martin Sch

Guia Passo-a-Passo: Corrigindo Problemas com o uiautomatorviewer

Martin Sch — Wed, 25 Oct 2023 13:07:50 +0000

Olá, Devs Android! Se você já tentou automatizar testes de UI para seus aplicativos usando Espresso e UIAutomator, provavelmente já se deparou com a ferramenta uiautomatorviewer. Esta ferramenta é inestimável para entender e encontrar elementos da tela do app. No entanto, enfrentei um problema onde ela parou de funcionar. Neste artigo, vou guiá-los através dos passos que segui para resolver esse problema.

O problema

Ao tentar executar o uiautomatorviewer, me deparei com o seguinte erro:

Após muita pesquisa e tentativa e erro, descobri que a solução se resume a dois passos principais.

Passo 1: Alterar a versão do Java para 1.8

O primeiro passo é garantir que você esteja usando a versão 1.8 do Java. Mas, se você é como eu e trabalha em vários projetos com diferentes versões do Java, alternar entre elas pode ser uma dor de cabeça. Aqui é onde o jenv se torna útil.

Configurando o `jenv`:

Instale o jenv usando o Homebrew:

brew install jenv

Adicione o caminho jenv e inicialize-o em seu shell (estou assumindo que você está usando zsh):

echo 'export PATH="$HOME/.jenv/bin:$PATH"' >> ~/.zshrc
echo 'eval "$(jenv init -)"' >> ~/.zshrc

Recarregue o shell para aplicar as alterações:

source ~/.zshrc

Instalando e Definindo Java 8 com `jenv`:

Instale o Java 8:

brew install openjdk@8

Verifique as JVMs disponíveis no seu sistema:

/usr/libexec/java_home -V

Isto deverá mostrar as JVMs disponíveis, e você deverá encontrar uma linha semelhante a:

1.8.0_212, x86_64: "AdoptOpenJDK 8" /Library/Java/JavaVirtualMachines/adoptopenjdk-8.jdk/Contents/Home

Adicione o Java 8 ao jenv:

jenv add /Library/Java/JavaVirtualMachines/adoptopenjdk-8.jdk/Contents/Home

Ele deve confirmar com:

openjdk64-1.8.0.212 adicionado
1.8.0.212 adicionado
1.8 adicionado

Defina a versão do Java no sistema para Java 8:

jenv global 1.8

Verifique a versão do Java:

java -version

Agora, isso deve indicar que você está usando o Java 8.

E pronto! Você instalou e definiu o Java 8 como a versão padrão usando jenv.

Passo 2: Baixando o novo arquivo SWT

Após fazer a alteração na versão do Java, me deparei com um segundo erro:

O próximo passo é baixar uma versão específica de um arquivo SWT que reside em um diretório específico do Android SDK.

Baixar a versão 4.20 do swt.jar:
- Acesse: Eclipse Downloads - swt-4.20-cocoa-macosx-x86_64.zip.
Extraia o swt.jar do arquivo baixado
- Dentro do arquivo zip existe um swt.jar.
Renomear o arquivo extraído:
- Mude o nome do swt.jar baixado para swt2.jar.
Copiar o arquivo renomeado:
- Mova o swt2.jar para o diretório Android/sdk/tools/lib/x86_64/.
- Importante: Não substitua ou delete o arquivo original.
Teste:
- Inicie o uiautomatorviewer para verificar se a atualização foi bem-sucedida.

Dica ao Iniciar o uiautomatorviewer: Ao lançar o uiautomatorviewer, redimensione a janela.

Conclusão

Com essas duas alterações, consegui fazer o uiautomatorviewer funcionar perfeitamente novamente. Espero que este guia ajude outros desenvolvedores que enfrentam o mesmo problema. Se você tiver dúvidas ou sugestões, sinta-se à vontade para deixar um comentário abaixo!

Garantindo a Usabilidade para Todos: Testando a Acessibilidade em Aplicações Android com MockK

Martin Sch — Tue, 21 Feb 2023 18:07:43 +0000

Intro

A acessibilidade é uma preocupação cada vez mais importante no desenvolvimento de sistemas e aplicativos para celular. Com a crescente conscientização sobre a importância da acessibilidade, é essencial garantir que todos os usuários, independentemente de suas necessidades, possam utilizar os produtos digitais de forma eficaz. Para isso, o Android disponibiliza recursos que o desenvolvedor pode utilizar para tornar as suas aplicações mais acessíveis e inclusivas.

Objetivo

Mas quando se trata em criar testes automatizados para aplicações Android, geralmente não é uma tarefa fácil. Aqui vai um exemplo simples que baseado no guia de acessibilidade do Firebox Android e adaptado utilizando MockK.

Fundamentos

As aplicações que ajudam na acessibilidade do Android são denominadas AccessibilityService. Isso significa que, se você quiser desenvolver um leitor de tela como o Talkback, ele precisa ser um AccessibilityService. Para que o Talkback possa ler o conteúdo exibido por um aplicativo de terceiros, ele precisa receber uma árvore hierárquica que seja basicamente uma cópia da estrutura de layout do aplicativo em questão. Em outras palavras, cada nó da árvore representa um botão ou um TextView da aplicação que será lida. Essa árvore é conhecida como AccessibilityNodeProvider, e os nós da árvore são denominados AccessibilityNodeInfo.

Cenário

Para exemplificar, imagine uma situação onde vc tem um modal que aparece para o usuário para exibir uma mensagem. Nós queremos ter algum tipo de interação quando o usuário mudar o foco de um elemento do modal para o outro.

AccessibilityDelegate

Com AccessibilityDelegate, é possível utilizar algumas funções para escutar determinados eventos de acessibilidade ou adicionar novas informações para a view para que sejam lidas pelo leitor de tela. O exemplo a seguir, a função onRequestSendAccessibilityEvent é chamada sempre que um evento de acessibilidade é disparado por uma view e com o parâmetro “event” posso verificar que tipo de evento é esse.

vModal.accessibilityDelegate = object : View.AccessibilityDelegate() {
    override fun onRequestSendAccessibilityEvent(
        host: ViewGroup?,
        child: View?,
        event: AccessibilityEvent?
    ): Boolean {
        if (event?.eventType==TYPE_VIEW_ACCESSIBILITY_FOCUSED){
                    fazerAlgumaCoisa()
                }
        return super.onRequestSendAccessibilityEvent(host, child, event)
    }
}

No código a seguir, um exemplo de como podemos implementar um cenário de teste automatizado para o onRequestSendAccessibilityEvent:

//Mockar uma view pai
val root = mockk<ViewParent>()

//Inserir a view de teste dentro desse pai mockado
Shadows.shadowOf(vModal.view).setMyParent(root)

//Precisa garantir que haja algum retorno para esse método de acessibilidade
every{root.requestSendAccessibilityEvent(any(), any())}returns false

//Cria um shadow para simular a acessibilidade ativa
Shadows.shadowOf(BaseObject.applicationContext.getSystemService(Context.ACCESSIBILITY_SERVICE) as AccessibilityManager).setEnabled(true)

//Pega um elemento do modal
val closeButton = getCloseButton()

//Dispara um evento de foco de acessibilidade
closeButton.sendAccessibilityEvent(AccessibilityEvent.TYPE_VIEW_ACCESSIBILITY_FOCUSED)

//Cria um slot para capturar argumento
val accessibilityEvent = slot<AccessibilityEvent>()

//Captura o argumento passado no método de acessibilidade
verify{root.requestSendAccessibilityEvent(any(), capture(accessibilityEvent))}

//Verifica se o argumento passado é o que era esperado
assertEquals(AccessibilityEvent.TYPE_VIEW_ACCESSIBILITY_FOCUSED, accessibilityEvent.captured.eventType)

Este trecho de código apresenta um exemplo de como realizar um teste automatizado com foco em acessibilidade.

Inicialmente, é feita uma simulação de uma view pai, utilizando o framework MockK. Em seguida, a view de teste é inserida nessa view pai mockada.

Para garantir que o teste está efetivamente verificando a acessibilidade da view, é necessário que haja algum retorno para o método de acessibilidade. Assim, utilizando o framework MockK novamente, é definido que o retorno do método requestSendAccessibilityEvent seja falso.

Em seguida, é criado um "shadow" (simulação) para a acessibilidade ativa, utilizando o framework Robolectric. Então, é capturado um elemento do modal (provavelmente algum botão ou elemento que possa ser acessado) e é disparado um evento de foco de acessibilidade.

Com o framework MockK, é criado um slot para capturar o argumento passado no método de acessibilidade, que é verificado posteriormente para verificar se o argumento passado é o esperado. Por fim, é utilizada a função assertEquals para verificar se o tipo do evento de acessibilidade capturado corresponde ao tipo de evento esperado.

Conclusão

Com isso, esse trecho de código apresenta uma forma de simular e testar a acessibilidade de uma view em um ambiente controlado, a fim de garantir uma aplicação tenha um comportamento consistente.

Fontes

Guia de acessibilidade do Firebox Android

shared-docs/accessibility_guide.md at main · mozilla-mobile/shared-docs

Para adaptar o exemplo de Moquito para MockK

ArgumentCaptor

Como o ExoPlayer garante video streaming fluida e de alta performance

Martin Sch — Mon, 16 Jan 2023 02:19:52 +0000

O ExoPlayer é uma biblioteca de reprodução de mídia open-source desenvolvida pela Google. Ele é utilizado em aplicativos de mídia em dispositivos Android e permite aos desenvolvedores criar aplicativos de mídia personalizados, com recursos avançados e alta performance. Neste artigo, vamos explorar como o ExoPlayer lida com a reprodução de arquivos de vídeo, desde o momento em que um "chunk" de dados é recebido até o momento em que ele é renderizado na tela.

Fonte de Dados

O ciclo de reprodução de um arquivo de vídeo no ExoPlayer começa com a obtenção de dados, que é gerenciada pelo componente "fonte de mídia". Esse componente é responsável por lidar com a obtenção de dados, seja eles através de uma rede ou de um arquivo local.

Buffer de Input

Os dados são então passados para o componente "buffer", que armazena esses dados temporariamente, garantindo que haja sempre dados suficientes para a reprodução contínua.

Decodificador

Em seguida, os dados do buffer são passados para o componente "decodificador", que é responsável por decodificar o chunk em formato de áudio ou vídeo. O decodificador também pode aplicar quaisquer transformações necessárias, como a mudança de taxa de quadros ou a aplicação de efeitos.

Buffer de Output

Após a decodificação, os dados são passados para o segundo buffer, que armazena esses dados decodificados temporariamente antes de serem passados para o componente de renderização. Isso garante que haja sempre dados suficientes para a reprodução contínua, mesmo em caso de variações na velocidade de rede ou outros problemas de transmissão.

Renderizador

Após a decodificação, os dados são enviados para o componente "renderizador", que é responsável por exibir os dados na tela. No caso do vídeo, isso pode incluir ajustes de tamanho, posição e transparência. O renderizador também pode aplicar efeitos adicionais, como o aumento de brilho ou contraste.

Controle

Por fim, o componente "controle" é responsável por garantir que o fluxo de dados esteja sincronizado e que a reprodução esteja ocorrendo na velocidade correta. Isso pode incluir ajustes de velocidade, pausa e retomada.

Conclusão

Em resumo, o ExoPlayer é uma poderosa biblioteca de reprodução de mídia que permite aos desenvolvedores criar aplicativos de mídia personalizados com recursos avançados e alta performance. Ele é composto por 5 componentes principais: Fonte de mídia, Buffer de Entreda, Decodificador, Buffer de Saída, Decodificador, Renderizador e Controle, cada um deles com suas respectivas funções, que são necessárias para garantir a reprodução correta de arquivos de vídeo. Ao entender como esses componentes trabalham juntos, os desenvolvedores podem analisar o tempo de latência ou a perda de frames entre esses 5 componentes, melhorando a performance do serviço de streaming e tornando a experiência do usuário mas fluída e com mais qualidade.

O Cérebro do Programador

Martin Sch — Wed, 22 Sep 2021 12:45:42 +0000

Em setembro deste ano foi lançado o livro
"The Programmer's Brain: What every programmer needs to know about cognition" da cientista Felienne Hermans onde ela ajuda programadores a entender como o cérebro funciona e como ele pode ser utilizado de forma mais efetiva para ler e escrever código.
Felienne Hermans

Conteúdo

Processos Cognitivos
Programador Iniciante e o Programador Expert
Escrevendo cometários no código
Beacons
Memorizar a sintaxe
Melhorando a memória
Conclusão

Processos Cognitivos

Entender o código alheio pode ser umas das tarefas mais difíceis e de maior peso na lista de tarefas de um programador e existem alguns fatores que dificultam o entendimento.

Como o código foi escrito e como o projeto foi arquitetado, são fatores que influenciam, mas de uma forma geral. A autora classifica em 3 processos cognitivos:

Conhecimento
Informação
Poder de processamento

Tente imaginar a parte de conhecimento como tudo o que você já memorizou até hoje sobre sintaxe, estrutura de dados, Design Patterns e outros. É como se ele fosse o seu HD.

Já o processo cognitivo da informação seria a sua memória RAM, ou seja, são informações que são guardadas a curto prazo, como valores das variáveis que estão sendo utilizadas, o contexto daquele código e o histórico de alterações recentes no bloco de código analisado.

Se o processo cognitivo do conhecimento é o HD e o da informação é a sua memória RAM, então o poder de processamento é a CPU. É esse componente cognitivo que vai utilizar a memória de longo prazo e a de curto prazo para debugar o código mentalmente.

Um ponto importante é que quando a memória a longo prazo não tem informação suficiente sobre o código analisado, a memória de curto prazo precisa ser utilizada com mais frequência, porém tem uma capacidade de armazenamento menor.

Por não ter muita "informação armazenada" na memória de longo prazo, o programador acaba levando mais tempo para entender um código.

Programador Iniciante e o Programador Expert

Um experimento feito pelo matemático Adrian de Groot que estava interessado em entender por qual motivo algumas pessoas se tornam ótimos jogadores de xadrez enquanto outras são jogadores medianos a vida inteira.

No experimento, uma imagem de um tabuleiro com uma configuração específica de peças era mostrada para jogadores de xadrez iniciantes e experientes por um curto espaço de tempo. Os participantes tinham que tentar memorizar aquela configuração de peças e depois tenta reproduzir o mais fiel possível.

Abertura Ruy López

Como você pode imaginar, os jogadores mais experientes foram os que conseguiram reproduzir com mais facilidade. Mas por qual motivo isso acontece? Eles tem uma memória mais afiada do que os iniciantes? Não exatamente. Com muito treino e experiência, um jogador é capaz de identificar padrões de jogada, prevendo o que o adversário provavelmente tentará fazer e como se livrar daquela jogada.

Enquanto um iniciante apenas vê uma sequência de peças em um tabuleiro, o jogador experiente vê aquela configuração formando uma abertura Ruy López, por exemplo. Isso facilita bastante na memorização, pois não é necessário memorizar peça por peça.

Quando o matemático começou a mostrar configurações de tabuleiro com peças em posições totalmente aleatórias, o jogadores experientes tiveram o mesmo desempenho que os iniciantes!

A mesma coisa acontece quando lemos um código. Um programador experiente vai reconhecer algumas operações, estruturas de dados ou padrões de projeto que já são familiares por já fazerem parte da memória de longo prazo dele. Mas se o código estiver mal escrito, um expert terá a mesma dificuldade que um programador iniciante.

Uma outra forma de entender esse processo é através da própria linguagem humana. A não ser que você tenha algum conhecimento em Marati, nada do que está escrito abaixo é familiar. Nem mesmo os símbolos utilizados são reconhecíveis:
??? no idioma Marati

Nesse outro exemplo, você pode não saber Polonês, mas pelo menos já pode reconhecer os signos utilizados, apenas não consegue saber o que eles estão formando:

??? no idioma Polonês

Aaaah agora sim!! Neste exemplo existem signos de um alfabeto que você conhece e eles formam um padrão que tem um significado pra você:

Cachorro no idioma Português

Escrevendo comentários no código

Esse pode ser um assunto um pouco polêmico, pois existem pessoas que acreditam que não é uma boa prática. Códigos que possuem comentário podem levar mais tempo para serem lidos, mas isso não é necessariamente um problema.

Ter o código comentado, pode ser muito útil para programadores que acabaram de entrar no time e precisam entender o codebase.

Segundo o trabalho de Martha Elizabeth Crosby da Universidade do Hawaii, programadores iniciantes focam em ler comentários com mais frequências do que os experientes. É claro que é importante não exagerar na detalhamento dos comentários, o ideal é coloca uma descrição mais alto nível do que comentar linha por linha, caso contrário, pode mais atrapalhar do que ajudar.

Exemplo de código com muitos cometários de baixo nível, explicando linha por linha do que está sendo feito

Exemplo de código explicando em mais alto nível qual é o objetivo do código

Beacons

Um outro elemento importante que o livro explica, é a idéia de beacons. São pequenas partes do código que pela própria nomenclatura do código, já dão pistas do que o algoritmo faz. Colocar palavras como root ou graph, já passam para o leitor, qual é a estrutura de dados utilizado. Por isso é importante ter cuidado ao definir o nome de funções, classes ou variáveis. Programadores experientes utilizam beacons com muita frequência.

Beacons são conhecidos como luzes de navegação

Exemplo de beacon utilizado para indicar para o leitor do código, que está sendo utilizado um tipo abstrato de dados chamado grafo.(Código tirado de: https://github.com/ronami/minipack/blob/master/src/minipack.js)

Memorizar a sintaxe

Do mais iniciante ao expert, é muito comum dar aquela pesquisada no google para lembrar como faz a validação de um campo de e-mail utilizando expressão regular. Todo mundo dá aquela consultada no Stack Overflow como escrever uma função específica.

O problema que esse hábito pode fazer a diferença na produtividade, pois o desenvolvedor precisa interromper a sua linha de raciocínio para pesquisar nas páginas de discussão e filtrar o que não é importante, para assim finalmente achar o que precisa e depois voltar para o contexto que estava trabalhando.

Uma estudo do professor Chris Parnin da Universidade da Carolina do Sul, mostra que todas as vezes que o desenvolvedor é interrompido, apenas em 10% das vezes ele consegue retomar o raciocínio em menos de 1 minuto.

Com a memória mais afiada, suas consultas ao Google diminuem e assim o número de interrupções também diminuem.

Melhorando a memória

O livro recomenda o utilização de Flashcards para a memorização. Basicamente a técnica consiste em criar vários cards onde na parte da frente do card você tem a descrição do que o código faz e no verso, o código.

A idéia e sempre pegar um o card aleatório e após ler a descrição, tentar lembrar mentalmente como é o código. Existem vários aplicativos para criar o seu baralho, mas se quiser, pode criar a versão analógica no papel mesmo. 😄

É necessário fazer esse processo várias vezes por conta da curva de esquecimento citada pelo estudo feito por Ebbinghaus.

Existem diversos artigos e vídeos que explicam sobre a Curva de Esquecimento de Ebbinghaus:

Conclusão

Esses foram só alguns dos pontos importantes do livro que ajudam a entender e a melhorar a forma que o cérebro lê e escreve código e o que pode ser feito para melhorar essas atividades.

Criando mapas utilizando Leaflet via CDN em um projeto React

Martin Sch — Wed, 15 Sep 2021 16:09:15 +0000

Estava trabalhando em um projeto onde teria que ser exibido um mapa com pontos agrupados (marker clusters). O Leaflet é com certeza uma ótima solução para isso. Existem duas opções para adicionar o Leaflet, por npm (react-leaft) ou via CDN. A segunda opção é mais vantajosa já que o mapa só seria apresentado em uma página e adicionar-lo em npm faz o projeto aumentar de tamanho e o build ficar mais lento.

Como importar o leaflet?

Segundo a documentação, você tem que importar o CSS e o JavaScript, exatamente nessa ordem:

Na hora que for carregar o componente, é possível fazer a mesma coisa "injetando" o <link> e <script> utilizando:

// função para adicionar a tag link
const insertLinkCSS = (cssUrl, key = '', id) => {
      const link = document.createElement('link')
      link.rel = 'stylesheet'
      link.href = cssUrl
      if (id.length > 0) {
        link.id = id
      }
      if (key.length > 0) {
        link.integrity = key
      }
      link.crossOrigin = ''
      document.body.appendChild(link)
}

//função para adicionar a tag script
const insertScriptSrc = (scriptUrl, key = '', id) => {
      const script = document.createElement('script')
      script.type = 'text/javascript'
      script.src = scriptUrl
      if (id.length > 0) {
        script.id = id
      }
      if (key.length > 0) {
        script.integrity = key
      }
      script.async = false
      script.crossOrigin = ''
      document.body.appendChild(script)
}

Em seguida são chamadas as funções passando o import no inicio do componente:

useEffect(() => {
   insertLinkCSS(
      'https://unpkg.com/leaflet@1.7.1/dist/leaflet.css',
      'sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==',
    )
    insertScriptSrc(
      'https://unpkg.com/leaflet@1.7.1/dist/leaflet.js',
      'sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==',
    )
  })

  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <div id='mapid'> </div>
      </header>
    </div>
  );

Dessa forma as tags de import aparecem no html da página.

Repare que estou adicionando um id para cada elemento e eu já vou mostrar o motivo disso.

Esperando os imports serem carregados

Antes começar a utilizar, é necessário garantir que os elementos foram carregados antes de começar a configurar o mapa. Uma forma de resolver isso é criar uma forma de verificar quando o <link> e o <script> aparecem no document:

//Define todos os ids que precisam ser verificados
const elementsIdConst = {
    LEAFTLET_CSS: 'leafletcss',
    LEAFTLET_JS: 'leafletjs',
    MAP_ID: 'mapid',
  }

function waitLoadElementsById(elementsId, callBack) {
    const formatedArray = elementsId.map(item => `#${item}`)

    //cria um setInterval para verificar a cada 100 milissegundos
    var elementsExists = setInterval(function () {
      if (document.querySelectorAll(formatedArray).length === elementsId.length) {
        try {
          callBack()
        } catch (e) {
          throw e
        }

        //Se achou todos os elementos, para o setInterval e o setTimeout
        clearInterval(elementsExists)
        clearTimeout(timeout)
      }
    }, 100)

    //timeout para para de rodar o setInterval depois de um tempo
    const timeout = setTimeout(() => {
      clearInterval(elementsExists)
    },5000)
  }


useEffect(() => {

   //chama o import do CSS com o id
   insertLinkCSS(
      'https://unpkg.com/leaflet@1.7.1/dist/leaflet.css',
      '',
      elementsIdConst.LEAFTLET_CSS,
    )

   //chama o import do script com o id
    insertScriptSrc(
      'https://unpkg.com/leaflet@1.7.1/dist/leaflet.js',
      '',
      elementsIdConst.LEAFTLET_JS,
    )

    //Com os elementos carregados, chama a função para iniciar o mapa
    waitLoadElementsById(Object.values(elementsIdConst), () => renderMap())
  })

Código completo

Para ter mais detalhes sobre a implementação você pode ver o código com repositório.

Conclusão

Utilizando um lib JavaScript via CDN pode ser um pouco mais "complicado" mas pode trazer muitas vantagens para um projeto que pretende escalar, pois você tem muito mais controle dos recursos utilizados e garante que eles só serão carregados na sua aplicação nos momentos certos. Se a sua aplicação é mais simples, então vale a pena adicionar via npm uma lib como "react-leaft" que utiliza leaftlet como componentes react.

Entendendo o Webpack

Martin Sch — Wed, 08 Sep 2021 14:55:59 +0000

Quando comecei a pegar algumas tarefas de desenvolvimento para React, não entendia o que era o Webpack e qual era a sua utilidade. Após estudar sobre o assunto, achei que seria interessante fazer um artigo para compartilhar uma síntese do que aprendi.

O que é o Webpack?

A definição mais básica: Um empacotador de módulos Javascript de código aberto

Webpack is a free and open-source module bundler for JavaScript. It is made primarily for JavaScript, but it can transform front-end assets such as HTML, CSS, and images if the corresponding loaders are included. Webpack takes modules with dependencies and generates static assets representing those modules.

View on Wikipedia>

Mas o que é um módulo?

Nos primórdios, o JS era utilizado para criar interações simples nas páginas web. Com a chegada do Node, foi possível criar aplicações inteiras em JS. Mas com ele também surgiu a necessidade de ter uma forma de quebrar o código em várias partes. Toda vez que se é utilizado o export em um bloco de código, significa que está deixando aquele módulo disponível para ser utilizado com import. Sobre módulos

Como funciona o Webpack?

No arquivo de configurações dele, você vai informar qual é o arquivo onde começa a executar o seu projeto (Entry) e em qual diretório você quer que ele salve o arquivo resultante (Output). A partir desse arquivo inicial, empacotador irá mapear todos os módulos que serão utilizados, criando assim, um grafo de dependências.

Como ele consegue navegar pela estrutura do código?

Existe um recurso chamado AST (Abstract Structure Tree), uma representação estrutural em árvore do código, onde cada nó representa um elemento do script. Com ele é possível manipular os elementos do script adicionando e removendo os nós.

Qual é a vantagem de se utilizar o Webpack?

Imagina que você criou um aplicação de vacinação. Nela o usuário informa a data da ultima vacinação, o tipo de vacina que tomou e qual foi a dose. Nesse exemplo, cada campo é um componente separado que é injetado no html da página. Quando a tela é carregada, o index.html chama o app.js que por sua vez importa os componentes que serão exibidos.

Um projeto simples utilizando lite-server para demonstrar quando os módulos são carregados

Para cada componente, o client precisa fazer um requisição pedindo o módulo para o servidor e isso não é nada bom para a latência e largura da banda.

Com o Webpack, todas essas dependências estão em um único arquivo e tudo o que a aplicação precisa naquele momento já está pré-carregado.

É possível gerar mais de um bundler?

Sim. Ter sempre um único bundler nem sempre é vantajoso pois dependendo do tamanho da aplicação, o arquivo final pode ficar muito grande e o carregamento ficará muito lento. Se você tem módulos que só serão utilizados após o usuário executar uma ação, então é possível utilizar o lazy loading para que o Webpack crie um bundler separado para esses módulos.

Conclusão

O objetivo desse post era dar uma explicação simplificada de como funciona o Webpack e a vantagem de utiliza-lo. React, Angular e Vuejs já utilizam por baixo dos panos, então a princípio você não precisa se preocupar. O conceito de AST é bem interessante e tem várias aplicações como automatizar a alteração do código. O compilador Babel.js utiliza o AST para transformar o código escrito para que seja compatível com navegadores que utilizam especificações mais antigas do JavaScript.

Forem: Martin Sch

Guia Passo-a-Passo: Corrigindo Problemas com o uiautomatorviewer

O problema

Passo 1: Alterar a versão do Java para 1.8

Configurando o jenv:

Instalando e Definindo Java 8 com jenv:

Passo 2: Baixando o novo arquivo SWT

Conclusão

Links

Garantindo a Usabilidade para Todos: Testando a Acessibilidade em Aplicações Android com MockK

Intro

Objetivo

Fundamentos

Cenário

AccessibilityDelegate

Conclusão

Fontes

Guia de acessibilidade do Firebox Android

Para adaptar o exemplo de Moquito para MockK

Como o ExoPlayer garante video streaming fluida e de alta performance

Fonte de Dados

Buffer de Input

Decodificador

Buffer de Output

Renderizador

Controle

Conclusão

O Cérebro do Programador

Conteúdo

Processos Cognitivos

Programador Iniciante e o Programador Expert

Escrevendo comentários no código

Beacons

Memorizar a sintaxe

Melhorando a memória

Conclusão

Criando mapas utilizando Leaflet via CDN em um projeto React

Entendendo o Webpack

O que é o Webpack?

Mas o que é um módulo?

Como funciona o Webpack?

Como ele consegue navegar pela estrutura do código?

Qual é a vantagem de se utilizar o Webpack?

É possível gerar mais de um bundler?

Conclusão

Configurando o `jenv`:

Instalando e Definindo Java 8 com `jenv`: