Em vez disso, esta é outra história sobre como mudei para uma nova estrutura). O
material não implica a verdade última. São descritas apenas as soluções que escolhi para mim mesmo e que, tendo uma vasta experiência no desenvolvimento do React & React Native, foram as mais fáceis de aplicar em um projeto real.
Contexto
Para começar, descreverei, por assim dizer, o contexto. Um pedido apareceu - escrever um pequeno aplicativo móvel multiplataforma (cerca de 15 telas). Naturalmente, por hábito, comecei a fazer isso no React Native. Em duas semanas, o aplicativo foi implantado em cerca de 80%.
No fim de semana li outro artigo do Surf on Habré com os resultados da pesquisa. E veio o pensamento, por que não tentar? Serei capaz de repetir o que já foi escrito em uma nova estrutura para mim? Decidimos passar o fim de semana tentando isso. Como resultado, na semana seguinte, não apenas os 80% anteriores, mas também os 20% restantes foram reescritos. o tempo de desenvolvimento foi reduzido em mais da metade!
prós
Em primeiro lugar, a vantagem é a velocidade do layout. As telas rebitam MUITO rápido. Gradientes lineares, SVG, GIF - praticamente tudo pronto para usar. Componentes sobrepostos ( posição: absoluto ) - sem problemas. Qualquer coisa que tenha causado dor em React Native é feito com um estalar de dedos. As animações são geralmente um conto de fadas! Muito menos tempo foi gasto na mesma tela com componentes constantemente animados com Flutter.
Minuses
Existem duas desvantagens tangíveis. O primeiro é a documentação. Muito pouco em russo. O inglês oficial não é muito bem estruturado, sim, dá muitos exemplos de código úteis, mas é difícil entender algo sensato a partir da arquitetura geral do aplicativo.
A segunda desvantagem são os pacotes. Ainda há uma bagunça completa aí. Escolher um pacote realmente bom para o que você deseja não é uma tarefa trivial. Em algum lugar, um recurso não funciona, em outro lugar. Muito tempo é gasto na seleção. Como uma opção - adicione algo você mesmo, mas é quando eu vou me acostumar)
Experiência: ganchos
Meu conhecimento do React remonta aos dias em que as aulas normais acabavam de aparecer nele. Agora não consigo imaginá-lo sem ganchos e já me esqueci das aulas. Para flutter, existe uma biblioteca maravilhosa flutter_hooks que permite que você inclua ganchos familiares em seu projeto. Para mim, ele substituiu completamente o StatefulWidget . Há muitos ganchos, você pode escrever o seu próprio, mas geralmente useEffect , useState e useMemoized em meu código . Para animações, useAnimationController .
Talvez esta não seja a melhor solução (estou pronto para ler sobre os contras nos comentários), mas permite que você use o background do React em uma nova estrutura para você mesmo. Eu nem mesmo vejo nenhuma razão para dar exemplos com código - todos os desenvolvedores do React sabem disso como "nosso pai"!
Experiência: gestão estadual
Uma vez tive que trabalhar com redux , e com mobx , e até mesmo com exóticos, como storeon . Parece que ele (redux / mobx) também está em Flutter, mas, francamente, não o dominei). Na minha opinião, tudo é muito complicado lá em comparação com o que estava em React. Você pode, é claro, gastar mais tempo e descobrir, mas por que, quando eu encontrei uma solução melhor: riverpod .
Uma biblioteca de Remi Rousselet , autor de flutter_hooks - naturalmente, ambos funcionam muito bem). Na verdade, é um Provedor modificado . Basta adicionar ao seu runApp ( ProviderScope (...))empacote sobre todo o resto e obtenha o escopo global em todo o aplicativo, acessível de qualquer widget. Basta escrever useProvider ( providerName ) no método de construção de HookWidget e temos dados disponíveis do provedor especificado.
Existem muitas opções de provedor na biblioteca, mas as mais básicas são ChangeNotifyProvider e StateNotifyProvider . Todas as lógicas de negócios podem ser removidas com segurança dos widgets e transferidas para esses provedores. Além disso, eles estão perfeitamente combinados entre si e não será difícil obter acesso aos métodos e dados um do outro a partir de um.
O padrão é muito semelhante ao dos patos reduxa abordagem que, para mim pessoalmente, se tornou a mais próxima no mundo do React. Apenas os "patos" são menores. O principal a ser lembrado aqui é que é melhor ter muitos pequenos provedores que serão usados em widgets diferentes do que um grande para eles, porque os widgets que foram realmente alterados serão redesenhados.
Decepção: web
Depois de um sucesso esmagador (para mim) com o desenvolvimento de um aplicativo móvel, eu, como qualquer full stack que se preze, decidi tocar no Flutter para web. Novamente, reescrevendo um dos aplicativos corporativos que realmente funcionam.
Claro, flutter web ainda está em beta, e tudo descrito abaixo se aplica especificamente à versão beta. Eu realmente espero que com o lançamento muito mude para melhor. No entanto, Flutter me decepcionou aqui.
A primeira coisa que você precisa saber é Flutter Web não é sobre sites, mas sobre aplicativos! Essa. você precisa escrever da mesma forma que no celular. Todos os widgets são iguais. Você não pode usar JS de terceiros em seu código. Acesse-o apenas via dardo: js . Acessando html também via dart: html... Isso corta quase tudo o que já foi feito no mundo da web de uma vez. Se você quer uma animação legal que já foi implementada em algum lugar em css + js, você deve escrever um análogo em flutter ou usar dart: js, o que nem sempre é fácil. É impossível usar sem dor uma biblioteca JS / css pronta.
O segundo menos são os pacotes de novo! Embora no pub.dev a maior parte dele esteja marcada como compatível com Web, Android e iOS, na verdade, um ou outro geralmente funciona. Essa. você não conseguirá criar um código totalmente multiplataforma.
Os pacotes para a web geralmente são um invólucro sobre seus equivalentes js. Mas quase sempre eles não acompanham a versão do pacote que estão embalando.
Exemplo:
A tarefa é fazer autorização via MS e receber dados do usuário.
No bom e velho JS, tudo é simples: pegue msal emicrosoft/ microsoft-graph-client - e aproveite o resultado. Encontre msal_flutter no
Flutter , conecte-o ... e acontece que o pacote da web não oferece suporte a ele. Ok, encontramos msal_js - este é um wrapper sobre o msal usual, então você precisa incluí-lo em index.html por meio da boa e velha tag de script. Mas se msal já foi atualizado para 1.4.2, então este pacote suporta no máximo 1.3.0! Bem, bem, com pesar pegamos o token pela metade, e os dados do usuário? Existe um pacote microsoft_graph - nenhuma documentação sobre ele. Para encontrar o método necessário, você precisa ir ao código do pacote e fuçar lá. E no final, descubra que apenas alguns deles são implementados lá para trabalhar com tarefas! Encontre outro msgraph
- de modo que geralmente o único método suporta!
Felizmente, o protocolo em si não é muito complicado aqui e você pode escrever algo por conta própria rapidamente quando precisar trabalhar e não escrever bibliotecas)
Meio Ambiente
A terceira e maior desvantagem é a impossibilidade de configurar o ambiente. O Flutter web é executado em um navegador ou como um servidor web. Você ainda pode definir a porta na qual ele será executado por meio dos parâmetros de linha de comando (o que também não é muito conveniente, onde está a configuração?!) Mas como posso executá-lo como https com um certificado autoassinado? Para que ao mesmo tempo o hot load funcione e depure e outros chips que normalmente funcionam? Olá! Gente, 2k20 acaba, e ainda tem http? Realmente?!
Conclusão
Definitivamente, o Flutter, como uma estrutura para desenvolvimento móvel de plataforma cruzada, está destruindo o React Native em todas as frentes. Estou satisfeito, o cliente também está satisfeito - o que mais você precisa?
Mas, como ferramenta para escrever aplicativos da web, ainda é úmido e muito trabalhoso. Prepare-se quando você conectou um pacote js de terceiros em alguns segundos, aqui você escreverá um invólucro para ele por alguns dias, ou mesmo seu próprio analógico no Flutter.
PS
Vou repetir para aqueles que se esqueceram desde o início do artigo. As soluções aplicadas e as conclusões que descrevi são as conclusões de uma pessoa com experiência de 1 semana em Flutter e experiência de 3 anos em React. Portanto, não os considere a verdade suprema. Estou pronto para discutir nos comentários com o guru o que fiz de errado.