Reagir nativo da perspectiva de um desenvolvedor móvel

O artigo é destinado a desenvolvedores de iOS e Android que já são bastante versados ​​em seu campo e olham para o React Native.

Quando soube pela primeira vez sobre o React Native, aproveitei a oportunidade para que os desenvolvedores da Web invadissem meu território ( absolutamente impossível! ) E, ao mesmo tempo, estragaram o produto que funcionava sem falhas e com 60 fps. E assim aconteceu. O fim A história real acabou sendo mais longa.

Negação

JavaScript em um aplicativo móvel? Apenas algumas bibliotecas com o uso do JavaScriptCore no iOS vieram à minha mente (essas mesmas bibliotecas foram responsáveis ​​por 90% das falhas dos aplicativos em que foram usadas) e aplicativos híbridos do "modelo antigo" (bem, isso é, atas)

Os aplicativos híbridos mostraram esperança até o momento em que você os experimenta, após o que você começa a fugir deles de uma vez e o mais longe possível.

Lembrando as tentativas malsucedidas de aprender Xamarin há três anos, abandonei rapidamente a idéia de usar o React Native.

Vale ressaltar que sempre fiquei feliz em perceber novas maneiras de escrever aplicativos nativos (do ObjC ao Swift, do Java ao Kotlin, do Eclipse ao Android Studio). Estou envolvido no desenvolvimento de iOS e Android como hobby e profissionalmente há muitos anos. Depois de mudar para um novo idioma (dentro do mesmo sistema operacional) ou IDE, raramente voltei ao anterior. Parece que o React Native é um próximo passo lógico, outro novo passo adiante. Ou é um passo atrás?

Raiva

Por que devo ensinar uma versão simplificada quando já sei como fazer isso "de verdade" ?!
Eu ainda precisava encontrar uma resposta para essa pergunta quando a empresa definiu a tarefa de redesenhar completamente um dos aplicativos (naquele momento disponível apenas no iOS) e liberá-lo no Android.

Como fazer duas coisas ao mesmo tempo e escrever menos código? Sugestões como: um thin client, bibliotecas C com uma chamada do código Swift / Kotlin, React Native?

O React Native parecia bastante promissor devido à capacidade de criar bibliotecas e usá-las imediatamente em três plataformas (iOS / android / web).

Licitação

Promissor para qualquer um, mas não para mim. Eu certamente não estava feliz com este turno. Eu senti que estava no auge da capacidade de desenvolver iOS e Android e, em seguida, me pediram para jogar fora todo esse conhecimento, como se eu fosse um recém-formado e tivesse 0. Eu até duvidava que com o React Native você pudesse criar um produto de qualidade.

Depressão

Dúvidas eram razoáveis. Os principais problemas são:

• uma quantidade decente de gotas no núcleo do React Native;
• métodos que funcionam apenas em uma plataforma (as docas indicam que funcionam em qualquer lugar);
• descrição incompleta. Basta olhar para as docas do coletor React Native .

O principal problema oculto: o bloqueio interno na minha cabeça, o que me impedia de ver as vantagens por trás de um monte de desvantagens.

Aceitação

E, é claro, o React Native não é apenas desvantagens. Há muito de bom, ele é escrito muito mais fácil e funciona de maneira melhor do que o mesmo em plataformas específicas.

Se descartarmos problemas óbvios, como falhas e docas escassas, aqui estão exemplos do que eu tive que enfrentar:

Javascript

Não é de admirar. Esta é a primeira coisa a andar de mãos dadas com sangue, suor e lágrimas.
Quando comecei a relembrar minha experiência anterior como desenvolvedor front-end (eu estava envolvido em sites antes de aplicativos móveis), comecei com a síndrome vietnamita: Johnny, o JavaScript nos rodeia!

Se você decidir escrever aplicativos no React Native, recomendo fazer um dos cursos JS mais recentes. Eles não precisam ser React ou React Native.

Nos últimos anos, com o lançamento dos padrões ES6, ES7 e ES8, a maneira como você escreve código mudou muito.

E ele se tornou muito pessoal .

Verificação estática

Nos primeiros meses, o analisador estático, que está em todos os idiomas móveis nativos, está faltando.

Existem vários utilitários que suavizam sua ausência, realizando parte das funções

Elementos de layout

O maior desafio aqui será para desenvolvedores iniciantes de iOS.

Esse desafio é a falta de um editor de interface visual.

Tudo é feito no código usando a marcação JSX . Tecnicamente, essa marcação é opcional, pois ajuda a ver a hierarquia dos componentes. Os desenvolvedores do Android ficarão à vontade, observando as semelhanças com o XML.

Ao mesmo tempo, há uma visão clara das visualizações e do potencial de reutilização.

No iOS, existe um ou outro, dependendo do método a ser escolhido (layout no código ou no construtor de interface). Sim, esses dois problemas podem ser resolvidos, mas você precisa escrever uma quantidade decente de código.

O React Native não tem esse problema.
No Android, a propósito, também não está lá.
Mas os especialistas em Android apreciarão a maneira como os parâmetros são transferidos de componentes externos para internos diretamente na marcação.

A visualização básica aqui é uma analogia do LinearLayout (android) e UIStackView (iOS) com uma mistura de constantes ao mesmo tempo. Uma maneira bastante simples (em comparação com construções) de elementos de posicionamento.

UIViewController e Atividade

O React Native não tem um nem o outro.
Claro que eles estão sob o capô. A interação direta com eles não funcionará. Sim, isso não é necessário.

O ciclo de vida de todos os componentes do React Native é completamente diferente do iOS e do Android. É difícil traçar paralelos. Se você se concentrar nas diferenças dos sistemas nativos, então:

• Os próprios elementos da interface do usuário alteram o estado / aparência ao alterar os parâmetros de entrada;
• no android, não há necessidade de fazer malabarismos com o onSaveInstantState . O React Native faz tudo isso por nós;
• no iOS, não há métodos que relatem explicitamente diretamente o momento em que as telas do aplicativo aparecem / ocultam.

Tempo de compilação / Recarga ao vivo / Recarga a quente

É obtida uma grande velocidade devido à montagem incremental - apenas os módulos modificados são reconstruídos, e não todo o pacote.

Todas as alterações no código JS são visíveis imediatamente visíveis no simulador. Acelera enormemente o desenvolvimento!

Falta de funcionalidade nativa em JS

Na parte JS do React Native, nem tudo o que você precisa está pronto para o uso.

Você pode escrever a parte nativa nas duas plataformas, criar um wrapper JS e chamá-lo como o resto do código. Não há nada complicado.

Há um grande número de módulos prontos criados por desenvolvedores de terceiros.

Todos os módulos são conectados via npm (análogo do CocoaPods para iOS e Gradle para android), que possuem código nativo com a funcionalidade necessária.

Links universais e diretos

A funcionalidade é implementada pelo Facebook.
Funciona bem e consistentemente.

Processando intenções de terceiros

Como um caso especial do parágrafo anterior.

O maior problema no Android é lidar com uma intenção diferente de um link profundo em um aplicativo.
Depende, é claro, da Intenção e do que precisa ser feito quando é recebido.

Você pode escrever um artigo separado sobre este tópico. O ponto de partida é adicionar o método createReactActivityDelegate a MainActivity.

Desempenho

É muito fácil obter 60 FPS ao rolar por longas listas com células complexas.
O desempenho de todo o resto (por exemplo, pressionar um botão, imprimir texto em um campo) é menor. É perceptível durante uma mudança animada de estado em um grande número de elementos. Isso pode ser facilmente resolvido. Uma boa seção da documentação Usando o driver nativo para animação .

E você não pode obter o controle normal dos gestos e a associação deles com a animação pronta para uso.

Instabilidade

Muitas vezes, um projeto simplesmente para de construir, por exemplo, depois de:

• Reagir atualizações nativas do kernel (inclusive ao atualizar a versão secundária);
• atualizações do módulo npm;
• Atualizações do Xcode;
• Atualizações do CocoaPods (problemas permanentes com isso);
• assim mesmo. Sim, isso acontece também.

Felizmente, a maioria desses problemas é corrigida rapidamente. Você pode adicionar um script que limpa todos os caches em qualquer lugar e executá-lo quando algo der errado. Ajuda a resolver 98% dos problemas estranhos que surgem do nada. Com exceção do CocoaPods, tudo é triste.

Instabilidade de dependência de terceiros

O maior problema no iOS era e é o desejo generalizado dos módulos npm de usar o método swizzling .

Muitos módulos nativos são conectados por binários. Entender que vários módulos independentes svizlyat o mesmo método não é tão simples.

A montagem ocorre em várias etapas e em cada uma delas algo pode dar errado.

Instabilidade ao atualizar dependências de terceiros

Alguns módulos npm dependem de outros módulos npm e assim por diante. Se dois módulos estiverem vinculados a versões diferentes do terceiro módulo, receberemos imediatamente um aviso ao instalar, na melhor das hipóteses. E no pior dos casos, não há aviso, mas nada funciona.

Um problema semelhante se os módulos npm dependem de módulos Android nativos com versões diferentes.

Após a limpeza do cache, novas versões podem ser carregadas silenciosamente. Parece que ele não fez nada, mas parou de trabalhar.

Teste de unidade e interface do usuário

Um mecanismo de teste muito fácil através da biblioteca Jest, vem com o React Native. Análise conveniente da cobertura do teste - mostra quais linhas na função em teste nunca foram chamadas.

Existem bibliotecas para teste de interface do usuário. Até agora, na verdade, eu não precisava usá-lo.

Conclusão

Após 13 meses de trabalho com o React Native, posso dizer com confiança:

• é adequado para a maioria dos aplicativos em que você apenas precisa obter uma lista do servidor, mostrar a lista, mostrar uma visão detalhada do item da lista, enviar alterações ao servidor;
• tudo isso é conseguido com menos código;
• agora esta é minha opção "padrão" para novos projetos que estão entrando em contato comigo, porque veja o parágrafo anterior;
• não é adequado para projetos que viajam para o exterior “enviaram uma solicitação - receberam uma resposta”, alguns exemplos: editor de fotos, player, trabalho com Bluetooth, AI, ML, social. mensageiro de rede;
• Projetos avançados podem ser feitos no React Native, mas você ainda precisa escrever muito código nativo, para que o ponto não seja mais válido;
• O React Native chegou e não irá a lugar algum; isso deve ser considerado;
• a demanda por desenvolvedores móveis nativos diminuirá um pouco, o influxo de novos desenvolvedores móveis nativos diminuirá muito mais. Porque veja abaixo;
• uma pessoa geralmente segue a maneira mais simples e não há necessidade de tentar se 95% dos aplicativos podem ser feitos gastando 20% do esforço (comparado ao desenvolvimento nativo) para estudar;
• como conseqüência dos três pontos anteriores: a diferença entre a demanda e a oferta de desenvolvedores móveis nativos se tornará ainda maior. Aqueles que realmente não podem viver sem eles terão mais dificuldade em encontrá-los. E isso é triste.

A palavra final para alguém que imediatamente começou a escrever sobre o React Native e, por algum motivo, decidiu ler este artigo, até o fim.

Se você acha que entende o tópico e está se saindo bem, tente o desenvolvedor nativo.