Este material é dedicado ao trabalho de refatoração da navegação no desenvolvimento móvel.
O artigo fornece exemplos de possíveis problemas, bem como soluções para situações difíceis relacionadas ao trabalho de navegação no desenvolvimento móvel no React Native.
Consideraremos os principais recursos e problemas do projeto Legacy móvel; passo a passo, realizaremos uma cadeia de ações que consistem em definir uma tarefa, identificar gargalos, encontrar soluções para os problemas existentes e obter o resultado desejado.
Ambiente de trabalho
O React Native é uma plataforma de desenvolvimento de aplicativo móvel de código aberto relativamente jovem criada pelo Facebook. É usado para criar aplicativos para Android, iOS e UWP e permite que os desenvolvedores usem o React em conjunto com os próprios recursos da plataforma.
A navegação é quase o elemento mais importante em um aplicativo móvel. Ao criar a arquitetura do aplicativo, você deve prestar atenção especial a este tópico.
As bibliotecas mais comuns para a construção de navegação:
- React Navigation Essa é a biblioteca mais popular, frequentemente mencionada na documentação oficial. Consequentemente, ela tem muitas estrelas em seu cofrinho no GitHub.
- React-Native-Navigation. Essa plataforma usa as APIs nativas básicas para iOS e Android. Esta é uma alternativa popular ao React-Navigation. É adequado para quem aprecia a conformidade com os acordos da plataforma e não se importa muito com a personalização.
Bibliotecas menos comuns:
- React-router-native Esta é uma biblioteca incompleta. Mas se você já está familiarizado com a API do React Router e faz requisitos bastante simples para o seu aplicativo, esta plataforma pode ajudá-lo.
- React-Native-Router-Flux. Essa biblioteca é baseada no React-Navigation, mas fornece uma API diferente para interagir com ela.
Minha experiência
Vou contar brevemente sobre minha experiência como desenvolvedor. Trabalho com o React Native há mais de dois anos. Existem vários projetos concluídos publicados em lojas de aplicativos. Durante esse período, consegui me familiarizar com um grande número de ferramentas no ambiente do React Native. A navegação é frequentemente uma pedra de tropeço em projetos de desenvolvimento móvel. O projeto Legacy em que eu estava trabalhando não foi exceção. Isso será discutido mais tarde.
Desafio
O código foi duplicado durante a refatoração do aplicativo em vez de dividir as funções em dois tipos (usuário e administrador). Infelizmente, o mesmo problema estava presente na navegação.
Os recursos arquitetônicos do aplicativo não foram levados em consideração.
Todas as telas foram divididas em três tipos: telas de autorização, telas de administrador e telas de usuário.
Em vez de uma conexão lógica entre a pilha raiz e a guia Navegador com funções de alternância, havia uma divisão ilógica nas pilhas de navegação de navegação do usuário.
Além disso, a construção da navegação para cada usuário foi repetida.
Eu precisava resolver os seguintes problemas:
- Desaceleração geral do aplicativo.
- A ausência de um "pré-renderizador" das telas principais, que não teve o melhor efeito no conforto dos usuários.
- A navegação não parecia nativa. As animações de transição foram notáveis e inconvenientes para o trabalho.
Adicione uma captura de tela do componente da janela modal que serviu como navegador de guias.
- Telas "insistentes" na pilha de navegação, ou seja, não houve descarga (purificação). As telas que abrimos foram armazenadas na pilha. Assim, um vazamento de memória e a falha subsequente do aplicativo eram quase inevitáveis.
Solução
Resultados do trabalho:
- O problema relacionado à otimização da navegação, à falta de um pré-renderizador e à desaceleração geral foi resolvido com a atualização da biblioteca de navegação, usando o navegador de guias e não a janela modal auto-escrita como navegador.
- Após a refatoração, a navegação tornou-se mais natural. Acompanhar o trabalho das animações de transição, bem como o pré-renderizador das telas principais nas guias, aumentaram o conforto do usuário.
- A navegação foi empilhada na guia de navegação. O uso da transição foi melhor controlado. Transições para o nível superior foram usadas.
Os seguintes métodos foram usados para a versão React-Navigation:
- popToTop - vá para a tela principal da pilha
- substituir - substitui a rota atual por uma nova
- reset - limpa o estado do navegador e o substitui pelo resultado de várias ações
Resultados
Consegui me livrar da maioria das telas de navegação duplicadas e criar uma estrutura mais lógica.
No processo de refatoração, toda a navegação foi redesenhada. Parte da refatoração da navegação também incluía a eliminação de telas duplas e a criação de uma estrutura de navegação unificada. As telas que deveriam estar localizadas fora das guias estavam no navegador raiz e as telas da própria guia do navegador podem ser vistas na captura de tela.
Conclusões
Em resumo, gostaria de observar novamente a importância das bibliotecas de navegação, bem como prestar atenção ao uso das estratégias mais eficazes para trabalhar com elas e a um estudo aprofundado da documentação técnica. Caso contrário, você gastará muito tempo e esforço refatorando e refinando um projeto existente e sua base de código.
A escolha de uma biblioteca de navegação é uma etapa importante no desenvolvimento de seu aplicativo. Qualquer decisão tomada sem o devido cuidado e cautela pode danificar a escalabilidade ou criar outros problemas.
Links úteis:
Reagir navegaçãoReagir nativoProblemas de desenvolvimento do projeto móvel legadoReact-native-navigationReact-router-nativeReact-native-router-flux