O que é revolucionário sobre Flutter

O que é Flutter?

O SDK do aplicativo móvel Flutter é uma nova maneira de criar aplicativos móveis rápidos e bonitos que ajudem os desenvolvedores a se afastar dos aplicativos de "cookie cutter" que foram tão comuns no passado. As pessoas que tentam Flutter realmente gostam disso; por exemplo, veja isso , isto ou isto . Ou aqui está uma lista de artigos e vídeos compilados por um terceiro.

Tal como acontece com qualquer sistema novo, as pessoas querem saber o que torna a Flutter diferente, ou de outra forma, "o que é novo e emocionante sobre Flutter?" Essa é uma questão justa, e este artigo tentará respondê-lo de um ponto de vista técnico – não O que é excitante, mas por quê .

Mas primeiro, um pouco de história.

Um breve histórico de desenvolvimento de aplicativos para dispositivos móveis

O desenvolvimento de aplicativos para dispositivos móveis é um campo de esforço relativamente recente. Os desenvolvedores de terceiros conseguiram criar aplicativos móveis por menos de uma década, por isso não é surpresa que as ferramentas ainda estejam evoluindo.

SDK OEM

O iOS SDK da Apple foi lançado em 2008 e o Google Android SDK em 2009. Estes dois SDKs foram baseados em diferentes idiomas: Objective-C e Java, respectivamente.

Seu aplicativo fala com a plataforma para criar widgets, ou acessar serviços como a câmera. Os widgets são renderizados para uma tela, e os eventos são repassados ​​para os widgets. Esta é uma arquitetura simples, mas você tem que criar aplicativos separados para cada plataforma porque os widgets são diferentes, para não mencionar os idiomas nativos.

WebViews

Os primeiros frameworks de plataforma cruzada foram baseados em JavaScript e WebViews. Exemplos incluem Titânio e uma família de estruturas relacionadas : PhoneGap, Apache Cordova, Ionic e outros. Antes de a Apple lançar seu SDK do iOS, eles incentivaram os desenvolvedores de terceiros a criar webapps para o iPhone, de modo que construir aplicativos de plataforma cruzada usando tecnologias da web era um passo óbvio.

Seu aplicativo cria HTML e o exibe em um WebView na plataforma. Observe que é difícil para idiomas como o JavaScript falar diretamente com o código nativo (como os serviços) para que eles passem por uma "ponte" que faz o contexto alternar entre o domínio de JavaScript eo domínio nativo. Como os serviços da plataforma geralmente não são chamados com freqüência, isso não causou muitos problemas de desempenho.

Visualizações Reativas

Estruturas web reativas como o ReactJS (e outros ) se tornaram populares, principalmente porque simplificam a criação de visualizações da web através do uso de padrões de programação emprestados a partir de programação reativa . Em 2015, React Native foi criado para trazer os muitos benefícios das visualizações de estilo reativo para aplicativos móveis.

React Native é muito popular (e merece ser), mas porque o domínio JavaScript acessa os widgets OEM no domínio nativo, ele também deve passar pela ponte para aqueles. Os widgets normalmente são acessados ​​com bastante freqüência (até 60 vezes por segundo durante animações, transições ou quando o usuário "desliza" algo na tela com o dedo), então isso pode causar problemas de desempenho. Como um artigo sobre React Native coloca:

Aqui está uma das principais chaves para a compreensão da performance do Reativo Nativo. Cada reino por si só é incrivelmente rápido. O gargalo de desempenho ocorre frequentemente quando nos movemos de um reino para o outro. Para arquitetar os aplicativos React Native performant, devemos manter a passagem da ponte ao mínimo.

Flutter

Como React Native, Flutter também oferece visões de estilo reativo. Flutter adota uma abordagem diferente para evitar problemas de desempenho causados ​​pela necessidade de uma ponte JavaScript usando uma linguagem de programação compilada, ou seja, Dart . Dart é compilado "à frente do tempo" (AOT) em código nativo para múltiplas plataformas. Isso permite que Flutter se comunique com a plataforma sem passar por uma ponte de JavaScript que faça uma mudança de contexto. Compilar para código nativo também melhora os tempos de inicialização do aplicativo.

O fato de Flutter ser o único SDK móvel que oferece visões reativas sem exigir uma ponte JavaScript deve ser suficiente para tornar Flutter interessante e vale a pena tentar, mas há algo muito mais revolucionário sobre a Flutter, e é assim que implementa widgets .

Widgets

Widgets são os elementos que afetam e controlam a visualização e a interface de um aplicativo. Não é um exagero dizer que os widgets são uma das partes mais importantes de um aplicativo para dispositivos móveis. Na verdade, os widgets sozinhos podem fazer ou quebrar um aplicativo.

  • O olhar ea sensação de widgets é primordial. Os widgets precisam ficar bons, inclusive em vários tamanhos de tela. Eles também precisam se sentir naturais.
  • Os widgets devem ser rápidos : para criar a árvore de widgets, infle os widgets (instanciando seus filhos), colocá-los na tela, processá-los ou (especialmente) animá-los.
  • Para aplicativos modernos, os widgets devem ser extensíveis e personalizáveis . Os desenvolvedores querem poder adicionar novos widgets deliciosos e personalizar todos os widgets para combinar a marca do aplicativo.

Flutter tem uma nova arquitetura que inclui widgets que se parecem e se sente bem, são rápidos e são personalizáveis ​​e extensíveis. Isso mesmo, Flutter não usa os widgets OEM (ou DOM WebViews), ele fornece seus próprios widgets.

Flutter move os widgets e o renderizador da plataforma para o aplicativo, o que lhes permite ser personalizável e extensível. Tudo o que o Flutter requer da plataforma é uma tela na qual renderizar os widgets para que eles possam aparecer na tela do dispositivo e acesso a eventos (toques, temporizadores, etc.) e serviços (localização, câmera, etc.).

Ainda existe uma interface entre o programa Dart (em verde) e o código da plataforma nativa (em azul, para iOS ou Android) que faz codificação e decodificação de dados, mas isso pode ser uma ordem de magnitude mais rápida do que uma ponte JavaScript.

Mover os widgets eo processador para o aplicativo afeta o tamanho do aplicativo. O tamanho mínimo de um aplicativo Flutter no Android é de aproximadamente 6,7 MB, o que é semelhante a aplicativos mínimos criados com ferramentas comparáveis. Depende de você decidir se os benefícios do Flutter valem qualquer compensação, então o resto deste artigo discute esses benefícios.

Layout

Uma das maiores melhorias no Flutter é como ele faz o layout. Layout determina o tamanho ea posição dos widgets com base em um conjunto de regras (também chamadas de restrições).

Tradicionalmente, o layout usa um grande conjunto de regras que podem ser aplicadas (praticamente) a qualquer widget. As regras implementam vários métodos de layout. Vamos ter como exemplo um layout CSS porque é bem conhecido (embora o layout no Android e no iOS seja basicamente similar). O CSS possui propriedades (as regras), que são aplicadas aos elementos HTML (os widgets). CSS3 define 375 propriedades.

O CSS inclui uma série de modelos de layout, incluindo (múltiplo) modelos de caixa, elementos flutuantes, tabelas, várias colunas de texto, mídia paginada e assim por diante. Modelos de layout adicionais, como flexbox e grid, foram adicionados posteriormente porque os desenvolvedores e designers precisavam de mais controle sobre o layout e estavam usando tabelas e imagens transparentes para obter o que eles queriam. No layout tradicional, os novos modelos de layout não podem ser adicionados pelo desenvolvedor, portanto, flexbox e grade tiveram que ser adicionados ao CSS e implementados em todos os navegadores.

Outro problema com o layout tradicional é que as regras podem interagir (e até mesmo conflitar) entre si, e os elementos muitas vezes têm dezenas de regras aplicadas a elas. Isso torna o layout lento. Pior ainda, o desempenho do layout geralmente é de ordem N-quadrado, de modo que o número de elementos aumenta, o layout diminui ainda mais.

Flutter começou como um experimento realizado por membros da equipe do navegador Chrome no Google. Queríamos ver se um renderizador mais rápido poderia ser construído se ignorássemos o modelo tradicional de layout. Após algumas semanas, conseguimos ganhos significativos de desempenho. Nós descobrimos:

  • A maior parte do layout é relativamente simples, como: texto em uma página de rolagem, retângulos fixos, cujo tamanho e posição dependem apenas do tamanho da tela, e talvez algumas tabelas, elementos flutuantes, etc.
  • A maior parte do layout é local para uma subárvore de widgets, e essa subárvore geralmente usa um modelo de layout, portanto, apenas um pequeno número de regras precisa ser suportado por esses widgets.

Percebemos que o layout poderia ser simplificado de forma significativa se o transformássemos em sua cabeça :

  • Em vez de ter um grande conjunto de regras de layout que poderiam ser aplicadas a qualquer widget, cada widget especificaria seu próprio modelo de layout simples.
  • Como cada widget tem um conjunto muito menor de regras de layout a considerar, o layout pode ser otimizado em grande medida.
  • Para simplificar o layout ainda mais, transformamos quase tudo em um widget.

Aqui está o código Flutter para criar uma árvore de widgets simples com layout:

 Centro novo ( 
criança: nova coluna
crianças: [
novo texto ('Hello, World!')),
Novo ícone (Icons.star, cor: Colors.green)
]
)
)

Este código é suficientemente semântico para que você possa facilmente imaginar o que ele irá produzir, mas aqui está a exibição resultante:

Neste código, tudo é um widget , incluindo o layout. O widget do Center concentra seu filho em seu pai (por exemplo, a tela). O widget de layout de Column organiza seus filhos (uma lista de widgets) verticalmente. A coluna contém um widget de Text e um widget Icon (que possui uma propriedade, sua cor).

Em Flutter, centralizar e preencher são widgets. Os temas são widgets, que se aplicam aos seus filhos. E mesmo as aplicações e a navegação são widgets.

Flutter inclui alguns widgets para fazer layout, não apenas colunas, mas também linhas, grades, listas, etc. Além disso, o Flutter possui um modelo de layout exclusivo que chamamos de "modelo de layout de fita", que é usado para rolagem. Layout in Flutter é tão rápido que pode ser usado para rolagem. Pense nisso por um momento. O deslocamento deve ser tão instantâneo e suave que o usuário parece que a imagem da tela está conectada ao dedo enquanto eles o arrastam pela tela física.

Ao usar o layout para rolagem, Flutter pode implementar tipos avançados de rolagem, como estes mostrados abaixo. Note-se que estas são imagens GIF animadas, Flutter é ainda mais suave. Você pode (e deve!) Executar esses aplicativos você mesmo; consulte a seção Recursos no final deste artigo.

Flutter Gallery appPosse Gallery appPosse Gallery app

Na maioria das vezes, Flutter pode fazer layout em uma única passagem, o que significa em tempo linear, para que ele possa lidar com um grande número de widgets. Flutter também faz cache e outras coisas para evitar o layout, quando possível.

Design personalizado

Como os widgets agora fazem parte do aplicativo, novos widgets podem ser adicionados e os widgets existentes podem ser personalizados para dar-lhes uma aparência ou sensação diferente ou para combinar a marca de uma empresa. A tendência no design móvel está longe dos aplicativos de cortador de cookies que eram comuns alguns anos atrás e em direção a projetos personalizados que deliciam os usuários e ganham prêmios.

Flutter vem com conjuntos de widgets ricos e personalizáveis ​​para Android, iOS e Design de Material (na verdade, nos disseram que o Flutter possui uma das implementações de fidelidade mais altas do Material Design). Usamos a personalização do Flutter para criar esses conjuntos de widgets, para combinar a aparência dos widgets nativos em várias plataformas. Os desenvolvedores de aplicativos podem usar a mesma personalização para aprimorar os widgets para seus desejos e necessidades.

Mais sobre Vistas Reativas

Bibliotecas para visualizações web reativas apresentaram DOM virtual . DOM é o HTML Document Object Model, uma API usada por JavaScript para manipular um documento HTML, representado como uma árvore de elementos. O DOM virtual é uma versão abstrata do DOM criado usando objetos na linguagem de programação, neste caso, JavaScript.

Em visões web reativas (implementadas por sistemas como ReactJS e outros), o DOM virtual é imutável e é reconstruído a partir do zero cada vez que algo muda. O DOM virtual é comparado ao DOM real para gerar um conjunto de mudanças mínimas, que são então executadas para atualizar o DOM real. Finalmente, a plataforma re-renderiza os DOM reais e o pinta em uma tela.

Isso pode parecer uma grande quantidade de trabalho extra, mas vale a pena porque manipular o HTML DOM é muito caro .

React Native faz uma coisa semelhante, mas para aplicativos para dispositivos móveis. Em vez de DOM, ele manipula os widgets nativos na plataforma móvel. Em vez de um DOM virtual, ele cria uma árvore virtual de widgets e compara-o com os widgets nativos e atualiza apenas as que mudaram.

Lembre-se de que React Native tem que se comunicar com os widgets nativos através da ponte, de modo que a árvore virtual de widgets ajuda a manter a passagem da ponte ao mínimo, enquanto ainda permite o uso de widgets nativos. Finalmente, uma vez que os widgets nativos são atualizados, a plataforma os torna na tela.

React Native é uma grande vitória para o desenvolvimento móvel, e foi uma inspiração para Flutter, mas Flutter leva um passo adiante.

Lembre-se de que, no Flutter, os widgets e o renderizador foram removidos da plataforma para o aplicativo do usuário. Não há widgets OEM nativos para manipular, então, o que era uma árvore de widgets virtuais agora é a árvore de widgets. Flutter torna a árvore de widgets e a pinta para uma tela de plataforma. Isso é bom e simples (e rápido). Além disso, a animação acontece no espaço do usuário, de modo que o aplicativo (e, portanto, o desenvolvedor) tenha mais controle sobre ele.

O próprio renderizador Flutter é interessante: ele usa várias estruturas de árvore internas para renderizar apenas os widgets que precisam ser atualizados na tela. Por exemplo, o renderizador usa " retificação estrutural usando composição " (significado "estrutural" por widget , o que é mais eficiente do que fazê-lo por áreas retangulares na tela). Os widgets invariáveis , mesmo aqueles que se mudaram, são " bit blitted " do cache, o que é super rápido. Esta é uma das coisas que torna a rolagem tão performante no Flutter, mesmo na rolagem avançada (discutida e mostrada acima).

Para um olhar mais atento para o renderizador Flutter, eu recomendo este vídeo . Você também pode ver o código, porque Flutter é de código aberto . E, claro, você pode personalizar ou mesmo substituir a pilha inteira, incluindo o renderizador, o compositor, a animação, o reconhecimento de gestos e, obviamente, os widgets.

A linguagem de programação Dart

Como Flutter – como outros sistemas que usam vistas reativas – atualiza a árvore de visualização para cada nova moldura, ela cria muitos objetos que podem viver apenas um quadro (um sexto de segundo). Felizmente, o Dart usa " coleta de lixo geracional " que é muito eficiente para esse tipo de sistemas, porque os objetos (especialmente os de curta duração) são relativamente baratos. Além disso, a alocação de objetos pode ser feita com uma única ponteira do ponteiro, que é rápida e não requer bloqueios. Isso ajuda a evitar UI jank e gaguejar.

Dart também possui um compilador de " agitação de árvores ", que inclui apenas o código que você precisa no seu aplicativo. Você pode se sentir livre para usar uma grande biblioteca de widgets mesmo se você precisa apenas de um ou dois deles.

Hot Reload

Uma das características mais populares do Flutter é a sua recarga quente rápida e com estado. Você pode fazer uma alteração em um aplicativo Flutter enquanto ele está sendo executado, e ele irá recarregar o código do aplicativo que mudou e deixá-lo continuar de onde ele saiu, muitas vezes em menos de um segundo. Se o seu aplicativo encontrar um erro, geralmente pode corrigir o erro e, em seguida, continuar como se o erro nunca acontecesse. Mesmo quando você precisa fazer uma recarga completa, é rápido.

Hot Status Recarga

Os desenvolvedores nos dizem que isso os deixa "pintar" seu aplicativo, fazendo uma mudança de cada vez e depois ver os resultados quase que instantaneamente, sem ter que reiniciar o aplicativo.

Compatibilidade

Como os widgets (e o renderizador para esses widgets) fazem parte do seu aplicativo e não a plataforma, não são necessárias " bibliotecas compat ". Seus aplicativos não só funcionarão, mas eles funcionarão o mesmo nas versões recentes do sistema operacional – Android Jelly Bean e mais recentes e iOS 8.0 e mais recentes. Isso reduz significativamente a necessidade de testar aplicativos em versões anteriores do sistema operacional. Além disso, é provável que suas aplicações funcionem em futuras versões do sistema operacional.

Existe uma preocupação potencial sobre a qual somos perguntados. Como o Flutter não usa os widgets nativos do OEM, demorará que os widgets Flutter sejam atualizados quando uma nova versão do iOS ou Android for lançada, que ofereça suporte a um novo tipo de widget, ou altere a aparência ou o comportamento de um widget existente. ?

  • Em primeiro lugar, o Google é um grande usuário interno da Flutter, por isso temos um forte incentivo para atualizar os conjuntos de widgets para mantê-los atualizados e tão próximos dos atuais widgets OEM quanto possível.
  • Se houver algum momento em que estivéssemos muito lentos na atualização de um widget, o Google não é o único usuário da Flutter com um incentivo para manter os widgets atualizados. Os widgets da Flutter são tão extensíveis e personalizáveis ​​que qualquer um pode atualizá-los, mesmo você. Nem sequer tem que apresentar uma solicitação de puxar. Você nunca precisará esperar que o próprio Flutter seja atualizado.
  • E os pontos acima se aplicam somente se você deseja que a nova alteração seja refletida em seu aplicativo. Se você não deseja que uma mudança afete a maneira como seu aplicativo se parece ou se comporta, você é bom. Os widgets são parte do seu aplicativo, então um widget nunca mudará para fora de você e tornará seu aplicativo a parecer ruim (ou pior, quebre seu aplicativo).
  • Como um benefício adicional, você pode escrever seu aplicativo para que ele use o novo widget mesmo em versões mais antigas do sistema operacional.

Outros benefícios

A simplicidade da Flutter torna rápido, mas é a personalização e a extensibilidade generalizadas que o tornam poderoso.

Dart tem um repositório de pacotes de software para que você possa ampliar os recursos de seus aplicativos. Por exemplo, há uma série de pacotes que facilitam o acesso a Firebase para que você possa criar um aplicativo "sem servidor". Um colaborador externo criou um pacote que permite acessar um armazenamento de dados Redux . Há também pacotes denominados " plugins " que facilitam o acesso a serviços e hardware da plataforma, como o acelerômetro ou a câmera, de forma independente do sistema operacional.

Claro, Flutter também é de código aberto , o que, juntamente com o fato de que a pilha de renderização Flutter faz parte do seu aplicativo, significa que você pode personalizar quase tudo o que quiser para um aplicativo individual. Tudo em verde nesta figura pode ser personalizado:

Então, "O que há de novo e emocionante sobre Flutter?"

Se alguém lhe perguntar sobre Flutter, agora você sabe como responder a eles:

  • As vantagens das visualizações reativas, sem ponte JavaScript
  • Rápido, suave e previsível; código compila AOT para código nativo (ARM)
  • O desenvolvedor tem controle total sobre os widgets e layout
  • Vem com widgets bonitos e personalizáveis
  • Grandes ferramentas de desenvolvimento, com incrível recarga quente
  • Mais performant, mais compatibilidade, mais divertido

Você notou o que deixei desta lista? É algo que geralmente é a primeira coisa que as pessoas mencionam quando falam sobre Flutter, mas para mim, é uma das coisas menos interessantes sobre Flutter.

É o fato de que Flutter pode criar aplicativos bonitos e rápidos para várias plataformas a partir de uma única base de código. Claro, isso deve ser um dado! É customizável e extensível que facilita o destino Flutter para múltiplas plataformas sem desistir de desempenho ou potência.

Revolucionário

Eu também nunca expliquei completamente por que Flutter é "revolucionário". Parece adequado, porque um dos primeiros aplicativos principais criados com Flutter por desenvolvedores externos é o aplicativo oficial para " Hamilton: um musical americano ", que ocorre em torno da época da Guerra Revolucionária Americana. Hamilton é um dos mais populares musicais da Broadway de todos os tempos.

A agência, Posse , diz que escolheu Flutter porque eles precisavam construir o aplicativo " em apenas três meses curtos ". Eles chamam de "Um aplicativo revolucionário para um show revolucionário" e dizem que "Flutter é uma excelente escolha para experiências móveis bonitas, de alto desempenho e de marca." Eles também conversaram na conferência do Google Developer Days sobre sua experiência em construir um aplicativo com Flutter. O aplicativo está disponível no Android e iOS , e recebeu críticas favoritas .

Junta-te à revolução!

Flutter está atualmente em versão alfa. Ainda estamos adicionando mais recursos, e temos mais otimizações planejadas. No entanto, grupos dentro e fora do Google já estão usando para criar aplicativos de missão crítica.

Se você está interessado em Flutter, você pode instalá-lo e brincar com alguns exemplos de aplicativos que acompanham a instalação. Certifique-se de verificar o recarregamento quente com estado.

Se você não é um desenvolvedor ou quer apenas ver alguns aplicativos, você pode instalar aplicativos criados com Flutter e ver como eles se parecem e executam. Eu recomendo o aplicativo Hamilton , mas há outros. Você também deve assistir o vídeo do Google I / O onde eles vivem codificar um aplicativo Flutter.

Recursos

  • Junte-se a nós para DartConf 2018 , de 23 a 24 de janeiro em Los Angeles, Califórnia

Sites:

Vídeos:

Apps:

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *