Guia do Iniciante do Flutter

Fora de meados de 2019, a plataforma cruzada entrou firmemente na vida das startups em todo o mundo, mas com mais freqüência as equipes de desenvolvimento de terceirização e os clientes que dependem da redução de custos estão olhando para ela. Alguém está apostando no React Native, alguém está explorando as possibilidades da Kotlin Multiplatform, e o novo convidado de podcast do AppsCast Evgeny Saturov saturovv vem se desenvolvendo ativamente no Flutter nos últimos seis meses, monitorando as atualizações do framework e promovendo a tecnologia para as massas. Muitos links e dicas úteis para o desenvolvedor Flutter iniciante: das diretrizes ao repositório com exemplos de implementação de arquitetura - em uma conversa com Eugene.



O AppsCast é um podcast de desenvolvimento móvel lançado com o apoio da conferência AppsConf . A cada duas semanas, um novo convidado com quem nós, com Daniil Popov ( int02h ), discutimos tecnologias, melhores práticas, a vida dos desenvolvedores, além de holivar e compartilhar experiências.

Alexei Kudryavtsev : Olá pessoal, hoje estamos visitando Zhenya Saturov, desenvolvedor da Surf e apresentadora do Flutter Dev Podcast . Zhenya, conte-nos um pouco mais sobre você.

Evgeny Saturov : Durante toda a minha vida consciente, fui desenvolvedor Android, mas não tenho tanta certeza do meu futuro sem nuvens quanto antes. Nos últimos seis meses, nós da empresa estivemos interessados ​​ativamente no Flutter, estamos tentando integrá-lo ao processo de desenvolvimento da produção.

Alexei Kudryavtsev : Como você mudou repentinamente para o Flutter a partir de um desenvolvimento Android?

Evgeny Saturov : Uma pergunta difícil. Eu mesmo às vezes me pergunto. Por acaso, ouvi falar de Flutter, do seu mais importante propagandista no país, Zviad Kardava, em um festival em Novosibirsk. Estudamos e decidimos tentar, há seis meses que escrevemos no Flutter, fizemos amizade com uma interface de usuário declarativa.

Capturas de vibração

Daniil Popov : O que a atraiu no Flutter?

Evgeny Saturov : O Flutter tem um limiar de entrada baixo, não possui os conceitos de Atividade e Fragmento, e o ciclo de vida é elementar e consiste em três estágios. Tudo no Flutter é um widget: o próprio aplicativo, que costumávamos representar como uma classe de aplicativo, qualquer bloco é um widget no qual outro widget é incorporado. Todas as telas são construídas exclusivamente por composição. A estrutura de um aplicativo Flutter requer uma arquitetura mais simplificada, um fluxo de dados mais coerente.

Sua cabeça quebra um pouco quando você tenta escrever uma exibição personalizada no Flutter após o desenvolvimento do Android. Não funciona lá. É necessário incorporar visualizações umas às outras e obter elementos combinados mais complexos.

No Google, a E / S apresentou o Jetpack Compose para Android, que permite gravar a interface do usuário de forma declarativa. A idéia é totalmente emprestada de Flutter, até os nomes são reutilizados.

Alexei Kudryavtsev : Existe uma teoria da conspiração que o Google está preparando os desenvolvedores do Android para o Flutter.

Evgeny Saturov : Posso lhe apresentar outra teoria da conspiração - a Apple está preparando seus desenvolvedores para o Flutter.

A diferença entre o Flutter e outras soluções de plataforma cruzada

Alexei Kudryavtsev : Tudo o que você disse é semelhante à característica dos produtos React Native ou Xamarin. Qual a diferença?

Evgeny Saturov : Escrever uma boa aplicação produtiva no React Native é difícil por causa das soluções técnicas subjacentes a ele. A interação com a plataforma é possível apenas através do JavaScript Bridge. No processo, essa operação reduz significativamente o desempenho, o que é crítico ao renderizar a interface do usuário.

Flutter, no entanto, lidou com o problema de desempenho a um preço alto - os desenvolvedores do framework tiveram que escrever seus pacotes de widgets no Dart (o Flutter também está escrito nele). Ao renderizar, o problema de subsidência por fps não apenas desapareceu, mas a equipe do Flutter também garante que, em teoria, é possível atingir não apenas 60fps, mas também 120fps em dispositivos que suportam isso.

Muitos discutem o tópico de por que a estrutura não suporta o Kotlin e se ela aparecerá, mas os desenvolvedores do Flutter dizem que não têm essa tarefa, mas talvez alguém o faça, como o JetBrains.

Daniil Popov : É óbvio que existe a Kotlin Multiplatform. Você precisa fazer parte do compilador que compila o Kotlin no Dart, e haverá lucro.

Alexei Kudryavtsev : Você diz isso, como se fosse como clicar nos dedos.

Evgeny Saturov : A maior parte do trabalho já foi feita. No Google I / O, eles conversaram sobre como otimizar o Garbage Collector no Kotlin, o que permitirá que você utilize toneladas de objetos em um milissegundo. Isso é importante porque, ao renderizar a interface do usuário, milhares de gráficos de widget são regenerados a cada 16 milissegundos e devem ser descartados com urgência para evitar o entupimento da memória. Anteriormente, Kotlin não sabia como, ao contrário de Dart, mas agora nada impede de arrastá-lo para Flutter.

Alexei Kudryavtsev : A primeira parte do processo de reciclagem é a alocação de muitos objetos. Não, o desempenho diminui neste momento?

Evgeny Saturov : Os objetos em si são leves. Aprofundando, o aplicativo Flutter é uma enorme reciclagem, uma lista com elementos reutilizáveis ​​que são renderizados somente quando os dados por trás deles são alterados. Ao mesmo tempo, os widgets que são recriados a cada 16 milissegundos não têm nada a ver com os widgets que estão no Android e são responsáveis ​​por se desenhar na tela.

Aqui, o widget é uma classe de dados, na qual existem dados que descrevem esse widget. O widget desenhado na tela existe em uma única cópia durante todo o ciclo de vida. Somente seu wrapper de dados é completamente recriado. Isso permite que você trabalhe rapidamente sem obstruir sua memória.

Flutter é um projeto totalmente de código aberto.

Esse não é o tipo de código aberto que é espelhado uma vez por trimestre de um repositório fechado para um github público. Esta é uma fonte aberta real, onde o desenvolvimento é realizado diretamente no repositório aberto no github. Você pode fazer alterações nos widgets, escrever seu pacote de widgets e usá-lo em sua empresa.

Alexei Kudryavtsev : Se eles criaram seus próprios widgets completamente, como estão as animações e as transições entre as telas, por exemplo, no iOS?

Evgeny Saturov : A questão mais importante é como tornar o aplicativo familiar aos usuários dessa plataforma. Fora da caixa, isso não acontece em quase todos os casos. Se você escrever um aplicativo no Dart e usar algum tipo de pacote de widgets, na inicialização, o aplicativo no Android e iOS terá a mesma aparência.

Para obter a experiência nativa na plataforma, você precisa testar manualmente a plataforma no aplicativo em execução. Se for iOS, você usará widgets do Cupertino Pack, se for Android, widgets do Material Pack. O mesmo ocorre com as transições: você pode ativar o furto para iOS, mas no Android haverá navegação nativa.

Alexei Kudryavtsev : Como está indo a troca de pacotes? Você realmente precisa escrever "se iOS, use este", "se Android, então este"?

Evgeny Saturov : Sim, exatamente, certo literalmente. No Google I / O, perguntei aos desenvolvedores do Flutter por que não mudar da caixa, fazer uma verificação dentro da plataforma que está atualmente trabalhando e definir widgets automaticamente. Afinal, as pessoas esperam que uma estrutura de interface do usuário de plataforma cruzada faça tudo isso sozinha. Eles responderam que queriam dar aos usuários a liberdade de escolher a aparência do aplicativo.

Como é possível escrever pacotes de widgets com marca para o seu sistema de design, você pode escrever um aplicativo com a mesma aparência nas duas plataformas.

Sobre internos do Flutter

Daniil Popov : Então, o Flutter tem seu próprio mecanismo de renderização, que desenha independentemente todos os widgets?

Evgeny Saturov : Sim, mas "seu" não é a palavra certa. Este é o Skia, um mecanismo conhecido que trabalha no Chrome, Firefox e em vários outros navegadores há muito tempo.

De fato, a equipe do Flutter é uma equipe derivada do Chromium.

Os desenvolvedores foram encarregados de fazer o overclock do mecanismo Chromium ao máximo. Ao mesmo tempo, não havia nenhum requisito para preservar a capacidade de renderizar a página html. Com essa condição, eles conseguiram acelerá-lo quase vinte vezes e começaram a pensar no que fazer com esse resultado.

Ficou claro que a Web não é a única aplicação para esse mecanismo e eles tentaram fazer algo para o desenvolvimento móvel. Apertamos o Skia, escrevemos seus widgets e temos aplicativos bastante poderosos. Em seguida, eles terminaram iterativamente até o estado atual, quando podemos escrever aplicativos com todos os recursos, com implementação meticulosa indistinguível dos nativos.

Alexei Kudryavtsev : O que mais há sob o capô de Flutter? Você pode me dizer em que mais consiste, onde está a otimização, que permite alcançar esse desempenho?

Evgeny Saturov : Se falamos sobre a arquitetura da plataforma em si, duas camadas principais precisam ser distinguidas. A base está escrita "sobre os profissionais". Inclui o Skia - um mecanismo gráfico que atrai toda essa beleza, um mecanismo de texto totalmente emprestado do Android e o Dart VM. A segunda camada é escrita inteiramente em Dart. Ele contém todos os pacotes de widgets: animações, processamento de gestos, Foundation Pack com todos os tipos de coisas. Devido ao fato de tudo estar escrito em Dart, é fornecido um bom desempenho.

Eu inserirei imediatamente cinco centavos: se, após esse lançamento, você decidir tentar fazer algo no Flutter, instale o plug-in no Android Studio, colete seu primeiro aplicativo e diga que foi cruelmente enganado, pois tudo é lento, você estará certo. Isso acontece durante a compilação de depuração, que realmente diminui, as animações ficam lentas, as listas mal rolam e o aplicativo pesa cerca de 60 MB. O fato é que, na versão de estréia, você está puxando uma enorme peça do Dart VM. Esta é uma taxa pela capacidade de recompilar em tempo real. Quando você monta a compilação do release, todos esses megabytes são levados pelo vento, o aplicativo funciona muito mais rápido, sem o uso de fps. Essa observação é muito importante para não assustar os desenvolvedores iniciantes do Flutter.

Dart VM é um tópico separado. Vale ressaltar que o principal colaborador é o desenvolvedor russo Slava Egorov, com quem gravou o lançamento do Flutter Dev Podcast . A Dart VM permite atualizar rapidamente o código quando são feitas alterações. Isso se chama Hot Reload - você faz alterações no código, clica no botão e, após um segundo, as alterações já estão visíveis no dispositivo. Isso acelera bastante o desenvolvimento e cria uma atmosfera favorável na equipe.

Alexei Kudryavtsev : Parece-me que é importante que, durante a recarga a quente, você permaneça em um estado de fluxo. É divertido em pequenos projetos. Mas quando o projeto é grande, você mudou uma visualização e aguarda dez minutos.

Evgeny Saturov : Sim, ouvi reclamações de ayosnikov de que a assembléia pode levar de 10 a 15 minutos.

Um dos pontos mais fortes de Flutter é o preço.

Não sei como, no iOS, mas no Android, pagar é uma dor. Cada atualização do Android Studio quebra algo e funciona lentamente, requer recursos irrealistas, o processador mais recente e uma montanha de RAM. O Flutter oferece imediatamente pedágio leve. Não é necessário trabalhar no Android Studio, você pode fazer o download do VS Code, instalar um plug-in e isso será suficiente para o desenvolvimento. Devo dizer imediatamente que, para um trabalho completo com o Flutter, você ainda precisa de equipamentos da Apple, pois, caso contrário, não poderá verificar sua montagem no iPhone.

Daniil Popov : Você disse que o Flutter está se desenvolvendo aos trancos e barrancos, mas haverá problemas de compatibilidade com versões anteriores por causa disso? Por exemplo, convenci a empresa a fazer um aplicativo no Flutter, escrevemos, depuramos e aqui vem a nova versão do Flutter ou Dart, e nosso código não é compilado, tudo desmorona. Eu sentei em uma poça na frente do cliente.

Evgeny Saturov : Isso pode muito bem acontecer. Há uma coisa tão interessante quanto as pesquisas de UX realizadas pela equipe do Flutter.

A última pesquisa perguntou: "Você está pronto para alterações não suportadas sem compatibilidade com versões anteriores em nome da simplicidade e pureza da estrutura?" Mais de 80% disseram que estavam prontos.

Não sei se eles pensaram bem antes de responder à pergunta e quão legítimos foram os resultados, mas a presença dessa publicação diz que, a partir de agora, os desenvolvedores permitirão alterações não suportadas. No entanto, ayosniki não se acostuma. Quanto o Swift já foi atualizado radicalmente?

Por onde começar?

Daniil Popov : Por onde começar, se você decidir experimentar o Flutter por si mesmo? Por uma questão de interesse, abri os codelabs do Google e há exemplos concretos de como transferir do Java para o Dart. Existe algo para desenvolvedores de iOS?

Evgeny Saturov : A equipe de desenvolvimento do Flutter lançou uma série de artigos sobre como migrar para representantes de vários perfis. Existem desenvolvedores do Flutter para Android e do Flutter para iOS . Abro e vejo, por exemplo, "Qual é o equivalente da visualização da interface do usuário no Flutter?" ou "Onde está o meu Storyboard?". Todas essas perguntas são respondidas. Aconselho que você comece com esses artigos, todos eles estão na documentação do Flutter.

Ainda precisamos tocar no tópico de como fazer amizade com o Dart como uma linguagem de desenvolvimento para o Flutter. Há um tour pelo idioma Dart para isso . Existem todos os conceitos básicos do Dart. Mas, honestamente, algumas coisas diferem um pouco mais significativamente (especialmente se você se aprofundar), algumas estão faltando, por exemplo, sobrecarga de função, você ainda precisa colocar um ponto e vírgula no final da linha ...

Alexey Kudryavtsev : Existe alguma documentação? Quem eu posso seguir no Twitter? Blogs no meio?

Evgeny Saturov : Claro, agora há muita informação. Existe um site do Flutter com instruções detalhadas sobre como configurar um ambiente de desenvolvimento, o que fazer o download, quais SDKs e plug-ins devem ser instalados. Existem palavras de código, elas são bastante simples e razoavelmente informativas, pois não dão a centésima parte do que é Flutter. Mas primeiro, para entender o conceito em princípio, os codelabs farão. Eu não recomendo passar por tudo, existem alguns bastante complicados que integram o Google Maps no aplicativo. Isso também é interessante, mas há mais confusão com chaves do que desenvolvimento real. Basta passar pelos três primeiros. Existem exemplos mais funcionais - clones de WhatsApp reais, aplicativos do Instagram com suposições.

Alexei Kudryavtsev : Isso é legal, junto com as instruções de migração.

Evgeny Saturov : Sim, você pode ver como, na realidade, as pessoas fazem as coisas que estamos acostumados a ver nas aplicações. Ajuda a começar.
Além disso, existem vários cursos pagos na Udemy, mas duvido que seja muito necessário. Eu olhei para o que eles consistem e todas essas informações (talvez não tão estruturadas) podem ser encontradas absolutamente gratuitas.

Também recomendo o site https://itsallwidgets.com/ , que permite instalar aplicativos de demonstração no seu dispositivo agora (não importa se você vai desenvolver algo no Flutter ou não) e ver como eles funcionam. Há um aplicativo History of Everything que foi escrito em três meses. Este é um fã absoluto, animações malucas. Há uma linha do tempo gigante em que você pode aumentar o zoom e vários episódios da vida humana começam a aparecer nela. Cada um tem sua própria animação personalizada. Tudo é feito no Dart sem bibliotecas nativas. Neste site, você pode entender onde estão os recursos do Flutter: existem jogos escritos exclusivamente no Dart, renderizados no Skia, também existem aplicativos regulares.

O concurso Flutter Create foi realizado recentemente: você tinha que escrever seu próprio aplicativo pequeno com a condição de que a fonte, incluindo todas as dependências, pesasse não mais que 5 KB. O companheiro venceu, que deu um passo interativo na terra, que você pode girar, cutucar em qualquer lugar e ver uma previsão do tempo real. Parece completamente irrealista. Essas coisas podem ser usadas para inspiração.

E você ainda pode usar vários repositórios no GitHub criados por entusiastas. Todos eles são chamados da mesma coisa - Awesome Flutter. São coleções com todas as amostras, bibliotecas e artigos.

Sobre recursos de informação. Eu recomendo assinar o canal oficial do youtube Flutter. Há shows que saem regularmente. Widget de vibração da semana - a cada semana, uma história detalhada sobre um único widget, os principais casos de aplicativos e recursos. O Boring Flutter Development Show é um formato de programa interessante que dura uma hora e sai sem edição. Todo esse tempo, os participantes estão codificando. Parece que eles estão fazendo isso sem muita preparação, porque sempre surgem erros, eles tentam fazer algo, são burros, não entendem o que está acontecendo. Observar isso é incrivelmente interessante.

Se você assistir a todos esses programas (eram relativamente poucos), poderá se tornar uma pessoa completamente diferente e acreditar que tem escrito Flutter a vida toda. Eles trazem à tona tópicos interessantes, problemas que as pessoas enfrentam e percorrem todo o caminho em busca de uma solução. É estrelado por todas as principais estrelas de Flutter: Emily Fortuna , Andrew Brogdon . Você pode se inscrever para eles no Twitter, eles estão postando ativamente. Você definitivamente deve assinar Brian Egan , que possui um repositório com 16 amostras com diferentes padrões arquiteturais. Isso é indispensável quando você já está escrevendo no Flutter e, no início do projeto, precisa escolher a arquitetura que usará. Você acabou de ir ao Brian, e ele já preparou tudo para você. Esses caras estão impulsionando o setor de desenvolvimento do Flutter.

Flutter na produção

Alexei Kudryavtsev : Digamos que sou o diretor técnico da empresa. Onde posso procurar desenvolvedores do Flutter?

Evgeny Saturov : É como as pessoas: há salas de bate-papo abertas em um telegrama com pessoas suficientes que já escrevem no Flutter. Mas eu diria que você não precisa procurar um desenvolvedor de Dart. A linguagem é uma ferramenta e sua ignorância não é um obstáculo à contratação. Outra questão é que o Flutter não é apenas um código Dart. Você ainda precisa acessar a plataforma. E aqui está a pergunta: com que rapidez os desenvolvedores do Android descobrirão como fazer isso no iOS e vice-versa, com a rapidez com que o desenvolvedor da Web descobrirá, como fazê-lo lá e ali.

Atualmente, a equipe de desenvolvimento mais equilibrada do Flutter consiste em desenvolvedores de Android e iOS.

Outra coisa é que isso nem sempre é possível, pois os ayosniki ainda desconfiam de Flutter.

Alexei Kudryavtsev : Como o Flutter é usado na produção? Quantos projetos você escreveu como estúdio? E quanto é que entra?

Daniil Popov : E quem mais além de você escreve sobre isso?

Evgeny Saturov : No nosso caso de terceirização, isso ocorre rapidamente , porque podemos oferecer um preço mais baixo do que para dois aplicativos nativos. Nos dez anos de existência de estruturas nativas, todos os clientes estão acostumados a pagar duas vezes pelo mesmo trabalho por padrão, o que é caro, especialmente para pequenas empresas que contam com dinheiro.

Para eles, o Flutter é um salva-vidas, como qualquer plataforma cruzada, apenas o Flutter fornece um resultado muito legal.

E já existem clientes que vêm e dizem: - Precisamos apenas do Flutter. Recentemente, isso vem acontecendo cada vez mais.

Ainda estamos coletando análises porque concluímos um pequeno projeto que escolhemos como piloto. Acabou sendo feito cerca de uma vez e meia mais rápido do que se estivéssemos fazendo dois projetos nativos em paralelo. Deve-se ter em mente que essa foi nossa primeira experiência séria e que muitos problemas foram resolvidos por um longo tempo. Idealmente, você pode obter um aumento duplo de velocidade com as forças de uma equipe menor. E não esqueça que haverá a metade da depuração, você não precisará corrigir bugs em duas plataformas.

Sobre quem mais está usando o Flutter. Recentemente, descobri que certos projetos (é claro, não os principais) são escritos em Odnoklassniki, no Grab, um táxi no sudeste da Ásia que o Uber comprou recentemente.

A tendência geral é esta: é bem adequado para prototipagem, adequado para experimentação, porque há interoperabilidade com o nativo.

Flutter iOS Android-, A\B , , , .

-, ( json, , ).

Flutter ? , , , , , . Flutter — UI, , , .

: ?

: , iOS - , Flutter , . ?

: iOS , , , -, GPU. , iOS- — CPU. , , Flutter, CPU, GPU. - . opengl . Flutter , .

: . , Flutter Engine, . , : APK , 64- . , -.

( ), , iOS- , X-Code ( ).

. Cupertino Widgets 70%. view controller — , . — , .

, , : , . , res, , . Flutter Dart-, . , .

Flutter

: Flutter, roadmap?

: , . Google I/O Flutter for Web , Flutter- web- . Flutter Engine. , . roadmap — . , , .

, , — .

Flutter, , , , , .

, Flutter- . showcase Flutter Live, . flutter-: . , , - developer preview, .

, Flutter . , , .

Release Notes , . , , , , , . , , - , issues Flutter.

Conclusões

: . Flutter , , . Xamarin, . , Flutter .

, Dart . , . , Dart — , . UI , Flutter.

: Android-, Flutter: « 2019 , , - , Flutter».

, , .

Flutter , AppsConf .