Há 5 ou 6 meses uma nova alternativa de desenvolvimento mobile vem me chamando muito a atenção e me dedico algumas horas diárias com ele, trata-se do Flutter.

Hoje vou explanar um pouco sobre esse poderoso Framework do Google, e, quem sabe despertar o interesse de vocês para mais uma opção para aprendizado e também influência profissional..

Bom,

O Flutter é o Framework móvel do Google que permite construir aplicativos Android e iOS com apenas um código. O Flutter é um código aberto e gratuito.

Ele inclui:

• Framework reativo moderno;
• Mecanismo de renderização em 2D muito rápido;
• Ferramentas para desenvolvimento;
• Widgets prontos que constituem os componentes da UI do aplicativo.

O que os usuários geralmente esperam de aplicativos?

Posso listar pelo menos 3 fatores:

1. Design Bonito;

2. Animações Suaves;

3. Ótimo desempenho.

Além disso, os desenvolvedores precisam criar novos recursos sem comprometer a qualidade e o desempenho. É aí que o Flutter entra.

O Flutter fornece o melhor do desenvolvimento mobile: desempenho e integração de plataformas móveis, com desenvolvimento rápido e alcance multiplataforma e com ferramentas de UI portáteis.

Segundo o Google, o Flutter foi construído para melhorar a qualidade dos aplicativos, a velocidade do desenvolvimento, e para alcançar mais usuários.

O Flutter é único porque o código é compilado em ARM, ou seja, compila o código para cada plataforma. Isso agiliza a abertura e o desempenho do aplicativo. Além disso, utiliza um renderizador Mobile First acelerado por GPU para que haja consistência da UI entre as plataformas e o dispositivo. Então ele projeta os Widgets com um Framework personalizável e extensível em camadas.

Não há pontes entre o Framerwork e os Widgets, tornando a renderização eficiente e as animações mais suaves.

Com o Flutter, uma View é construída como uma árvore imutável de Widgets.

Os Widgets são a base dos aplicativos Flutter, é uma descrição de parte da interface do usuário e quase tudo é um Widget, escrito em Dart.

No Flutter, não existe arquivo distinto para personalização de layout (JS, HTML, CSS), tudo é definido em um Widget Flutter.

Quando o estado do Widget é alterado seja pela entrada do usuário ou por animações, o Widget se reconstrói de acordo com o novo estado, economizando tempo, pois a UI pode ser descrita como funções de estado. Não precisamos escrever códigos extras para atualizar a UI quando o estado for alterado.

O Mecanismo de renderização é construído no Skia, uma biblioteca de renderização gráfica em 2D, em Dart. Ele exibe Widgets para dispositivos iOS e Android. As plataformas precisam fornecer uma tela para o Flutter poder colocar os Widgets e o mecanismo de renderização. Por isso é bom obter uma compilação AOT (veremos mais abaixo) no código nativo.

Dart

O Flutter é escrito em Dart, uma linguagem concisa, fortemente tipificada e orientada a objeto. O Dart é bem semelhante à linguagens como Swift, C#, Java e JS.

O que torna o Dart adequado para o desenvolvimento mobile?

Primeiro, o desempenho tanto no desenvolvimento quando em produção, pois ele suporta a compilação JIT (Just-in-time) e a AOT (Ahead-of-time).

A JIT possibilita que o Flutter recompila o código no dispositivo, enquanto o aplicativo está rodando, isso faz com que a aplicação não perca o estado de desenvolvimento. Isso gera um ciclo de desenvolvimento muito rápido e produtivo, possibilitando o recarregamento expresso do aplicativo.

Na compilação AOT, as bibliotecas e funções utilizadas pelo código do aplicativo são compilados no código ARM nativo de cada plataforma. Isso é bom para lançar compilações, pois o código nativo se inicia rapidamente e possui desempenho previsível.

Na prática

Bom, vamos então por a mão na massa.

Antes de tudo precisamos ter o Flutter instalado em nosso ambiente de desenvolvimento, para isso, basta seguir esse pequeno tutorial disponibilizado pela equipe do Flutter: https://flutter.io/get-started/install/.

Ambiente de desenvolvimento configurado, vamos para a ação:

1. Abrindo o Android Studio, vamos clicar em “Configure” > “Plugins”:

2. Após isso, clicamos em “Browse Repositories”

3. E pesquisamos por “Flutter”, e instalamos o Plugin:

4. Reiniciamos o Android Studio, e ao abri-lo, podemos criar um novo Projeto Flutter (as 4 próximas ilustrações explicam por si só):

5. Com o projeto do Flutter criado, como podemos ver, na imagem abaixo em destaque Vermelho temos toda a estrutura do projeto, e em destaque Azul temos o arquivo principal, o main.dart (reparem na extensão .dart, que como dito no começo do artigo é a linguagem utilizada pelo Flutter).

6. Este é um projeto default do Flutter, quando criamos uma aplicação Flutter, seja pelo Android Studio, ou pelo Prompt de Comando (CMD), este é o aplicativo criado.

Vou destacar alguns pontos importantes no primeiro trecho de códigos (vide abaixo):

O destaque em Vermelho é a importação do material.dart responsável pelo conjunto de widgets de layouts do Material par autilizarmos em nossa aplicação.

O trecho destacado em Azul é a criação da nossa classe MyApp, classe principal e única dessa aplicação.

Utilizando o MaterialApp, nós definimos uma cor de Tema para a aplicação, neste caso o “Colors.blue”.

Em seguida definimos que a nossa Home, será a MyHomePage.

Logo abaixo, em “class MyHomePage extends StatefulWidget” nós criamos a nossa classe MyHomePage, criando ainda um String “title”.

E herdamos então da Classe _MyHomePageState que vai ser alterada a partir de input do usuário, para isso colocamos “_MyHomePageState createState() => new _MyHomePageState();”

7. Então, prosseguindo, devemos Criar a nossa classe _MyHomePageState:

Em destaque Vermelho criamos uma função que tem a responsabilidade de incrementar um contador (variável _counter).

Em seguida, destacado em Azul criamos o nosso Widget, utilizando um Scaffold, que já nos traz inúmeros widgets prontos para utilizar na aplicação.

Neste exemplo, utilizamos o:

· AppBar: onde passamos o título da nossa página;

· Body: passando 2 textos centralizados, um com texto fixo “You have pushed the Button this many times:” e outro com o valor da variável _counter;

· FloatingActionButton: um botão com o ícone de “+”, que na sua função onPressed, executa a função criada, destacada em Vermelho.

Bom, o aplicativo demo é teoricamente simples, mas já vimos criação de Widgets prontos com o Scaffold, criação de Funções, Classes e Estados.

Na parte superior do Android Studio, em sua barra de tarefas, vamos clicar na Seta Verde para executarmos nosso aplicativo, para isso devemos conectar um dispositivo que será reconhecido automaticamente, ou criar um emulador de Android:

Após executarmos, teremos algo semelhante à isso, em pleno funcionamento, o nosso primeiro aplicativo escrito em Flutter:

Vou deixar alguns links importantes aqui para vocês se familiarizarem com o Framework:

Flutter: https://flutter.io/

Dart: https://www.dartlang.org/

Muito conteúdo em Inglês está disponível na Internet, porém ainda está pobre em conteúdos em Português, com isso deixo a brecha aqui e compartilho com vocês o meu curso da Udemy “Flutter — Conhecendo o SDK mobile do Google”

https://www.udemy.com/flutter-conhecendo-na-pratica

Semanalmente estou upando novos vídeos!!

Pessoal, tudo isso faz realmente o Flutter se tornar diferenciado e só produzindo para perceberem como é incrível, realmente!

Desde 2007, apps se tornaram mania, e grande parte deste sucesso vem dos smartphones, que crescem rapidamente em todo o mundo e oferecem aos usuários diversas ferramentas para cada tipo de necessidade ao alcance de nossas mãos, e cada vez mais fazem parte do nosso cotidiano. Com eles somos capazes de gerir nossas finanças, pedir comida, pedir um táxi, controlar uma empresa, acessar câmeras de nossas casas, comprar, vender, e muitas outras funcionalidades que facilitam nossas vidas.

Passamos cada vez mais tempo conectados aos nossos dispositivos. Mais do que isso, nós tornamos os nossos apps uma ferramenta para deixar as rotinas mais práticas, gastando nosso tempo naquilo que realmente importa. Smartphones são uma realidade e ainda permanecerão (sob o avanço da tecnologia) no futuro e, cada vez mais os usuários de um aplicativo serão responsáveis pela divulgação e popularidade de um serviço ou produto.

A criação de um aplicativo para smartphones e tablets é mais simples, rápida e com menor gasto. Com o grande crescimento do número de telefones no mundo todo, lojas de aplicativos tornaram-se grandes vitrines de oportunidades para desenvolvedores lucrarem com ferramentas inovadoras. Graças à segurança e ao controle de dados, as pessoas ficam mais seguras ao comprar e utilizar um aplicativo novo, por saberem que o risco de perderem algum dado é menor.

Hoje, um usuário comum instala pelo menos três aplicativos em seu telefone, muitas vezes pagando por isso. Mais de 75% dos donos de smartphones usam aplicativos pelo menos uma vez ao dia, gerando bilhões em lucros para desenvolvedores. Saber se posicionar nesse mercado, antecipando tendências e diminuindo erros, é fundamental para o futuro de empresas que planejam estar à frente no mercado.

Mas o que é aplicativo mobile?

Resumindo sucintamente, são softwares que desempenham objetivos específicos em smartphones, tablets e até desktops.

No primeiro trimestre de 2016, foi feito um levantamento sobre o número de downloads de aplicativos ao redor do mundo. Um destaque ficou para o Brasil, que atrás apenas de Estados Unidos e China, encontrava-se em terceiro lugar na lista, que é completada por Índia, Rússia, México, Turquia, Indonésia, Japão e Coreia do Sul.

Tendências de mercado de aplicativos

O mercado de aplicativos é um dos mais atraentes para empreendedores, grandes empresas e profissionais na área da tecnologia.

Afinal, somente no Brasil, há 168 milhões de smartphones, de acordo com dados de 2016 da FGV (Fundação Getulio Vargas).

A tendência para 2017 é que o mercado de aplicativos movimente cerca de 197 bilhões de downloads, e a projeção para o fechamento do ano de 2021 é de cerca de 352,9 bilhões.

Financeiramente falando, de acordo com relatório da App Annie Forecas, 2016 fechou com o mercado girando em torno de US$ 61,8 bilhões. A previsão para 2017 ficou em US$ 82,2 bilhões, e ainda para 2021, uma receita anual de US$ 139,1 bilhões.

Atualmente, a China lidera esse mercado, seguido por Estados Unidos, Índia, Brasil e Indonésia.

O Android já é o sistema operacional mais usado no mundo, e a previsão para 2017 foi que já será também o mais rentável, comparando-se com iOS e Windows Phone.

A previsão é de que a loja do Android tenha uma receita de US$ 41 bilhões, conta US$ 40 bilhões da Apple.

Para fechar o relatório, o número de downloads do Android vai aumentar ainda mais a folga em relação ao iOS, sendo que 2016 girou em torno de 108 bilhões de downloads, contra 29 bilhões do rival, e em 2021 a diferença será de 300 bilhões contra 42 bilhões de downloads.

Bom, vamos pensar na seguinte situação: um cliente chega à você e fala que precisa de um aplicativo para as plataformas Android e iOS, com acesso à câmera, GPS e banco de dados, e ainda num prazo de 30 dias deverá estar publicado nas lojas Play Store e App Store.

Provavelmente há não muito tempo atrás, muitos desenvolvedores diriam que seria praticamente impossível, porém, como a necessidade faz a tecnologia “voar”, hoje em dia é totalmente possível resolver esse problema.

Como?

Com o desenvolvimento mobile híbrido.

Mas qual a diferença de desenvolvimento nativo e híbrido?

Nativo

• É necessário um desenvolvedor especialista para cada plataforma (Android com Java, iOS com Objective-C ou Swift, e Windows Phone com C#) ou um desenvolvedor ninja que manja muito de ambas plataformas;
• Possui acesso à todos os recursos do dispositivo, com bom desempenho (acelerômetro, giroscópio, geolocalização, etc);
• Como são desenvolvidos especificamente para cada plataforma, explora muito bem toda a UX/UI , seguindo o padrão de interface do usuário adequadamente.

Híbrido

• Um desenvolvedor conhecedor de HTML, CSS e JS é capaz de, em um único código fonte, desenvolver para ambas as plataformas (Android, iOS e Windows Phone);
• Tem a capacidade de acessar recursos nativos do dispositivo através do Cordova e Phonegap, que servem basicamente para criar um app nativo, capaz de abrir uma webview executando o HTML/CSS e JavaScript, e mostrar ao usuário;
• Respeita a UX/UI do sistema operacional do dispositivo, porém, utiliza um navegador embutido no aplicativo para demonstrar ao usuário.

Em relação ao custo do desenvolvimento:

Nativo

O custo de um aplicativo nativo é bastante elevado, principalmente contratando um desenvolvedor específico para cada plataforma. Aliado à isso, o prazo de entrega final do aplicativo pode demorar um pouco mais, visto a complexidade de desenvolver para ambas as plataformas;

Híbrido

Já o custo para o desenvolvimento híbrido é bem reduzido, bem como a demanda de prazo para o desenvolvimento, visto que um único código é capaz de gerar o app para ambas as plataformas.

Em relação ao conhecimento/linguagens de programação:

Nativo

• Para o Android, além de seguir as boas práticas do Google em relação ao design, é necessário dominar a base do Java, bem como alguma IDE com suporte específico de componentes e SDKs, podendo citar o Android Studio, NetBeans, Eclipse, etc. Pode ser desenvolvido em sistemas operacionais Windows, OS X e Linux;
• Para o iOS, também seguindo as boas práticas da Apple para a UX/UI de interface do usuário, é imprescindível pleno conhecimento de Objective-C ou Swift, além de dominar a ferramenta específica (e única) de desenvolvimento da Apple, o Xcode. Portanto, é desenvolvido exclusivamente em um sistema operacional OS X;
• Para Windows Phone, é necessário ter o Microsoft Visual Studio como IDE de desenvolvimento, com todos os SDKs instalados e ter conhecimento na linguagem C#, podendo ser desenvolvido em sistemas operacionais Windows, OS X e Linux.

Híbrido

Hoje em dia, há um verdadeiro leque de frameworks disponíveis no mercado que auxiliam o desenvolvimento híbrido; os mais usuais pelos desenvolvedores são:

• Ionic, que é baseado em HTML, CSS e JavaScript, e utiliza o AngularJS;
• Apache Cordova, sendo uma biblioteca de API’s que possibilita acessar funções nativas de dispositivos móveis apenas com JavaScript;
• Phonegap, que semelhante ao Ionic, também tem como base o uso de HTML, CSS e JavaScript. Ele garante o funcionamento nas plataformas desejadas utilizando o Apache Cordova;
• O Meteor nos possibilita escrever apps com JavaScript, prometendo reduzir radicalmente o código necessário para o desenvolvimento;

Além destes, podemos citar vários outros exemplos, como Chocolate-UI, Framework 7, Ratchet, jQuery mobile, Lungo, e a lista é grande.

O Xamarin (utilizando C#), React Native (Javascript) e Flutter, têm propósitos parecidos em relação à buscar métodos de desenvolvimento de widgets nativos do dispositivo, porém, dividem espaço com os Frameworks em relação à em um único código, proporcionar apps multiplataformas.

Diferentemente do desenvolvimento nativo, o desenvolvimento híbrido não necessita de uma IDE específica. Para se ter uma ideia, com o bloco de notas é possível desenvolver. Claro que há vários Editores de Texto que nos auxiliam muito, e instalando plugins, o desenvolvimento flui com muita rapidez. Podemos citar como os mais utilizados pelos desenvolvedores, o Atom, Visual Studio Code, Sublime Text, VIM, entre muitos outros.

Agora iremos listar alguns aplicativos de sucesso, desenvolvidos nativamente ou de forma híbrida:

Aplicativos nativos

• Facebook Messenger é um grande exemplo de app nativo, que foi desenvolvido para atender recursos dos sistemas operacionais Android e iOS, e posteriormente Windows Phone. Ele cumpriu fielmente a promessa de não apostar todas as suas fichas no HTML e aproveitar melhor as oportunidades e a experiência de um app nativo;
• Whatsapp é o mais famoso aplicativo nativo de mensagens instantâneas, que inclusive foi vendido ao Facebook por US$ 16 bilhões e se tornou consagrado em grande parte do cotidiano das pessoas do mundo inteiro;
• O Skype, que utiliza recursos como vídeo, áudio e chat em tempo real, além de envio de arquivos, também é um exemplo de sucesso de aplicativo nativo;

É claro que a lista é gigantesca. A grande maioria dos aplicativos de sucesso são desenvolvidos nativamente, e pertencem à grandes empresas e startups multinacionais.

Aplicativos híbridos

Não tão famosos quanto os nativos, mas giram grandes volumes de downloads e mídia, alguns exemplos de aplicativos desenvolvidos de forma híbrida, são:

• Untappd, que é uma rede social e de check-in para cervejeiros, onde os usuários facilmente conseguem encontrar cervejarias e bares pelo mundo todo. É importante salientar que mesmo sendo um app híbrido, utiliza geolocalização e integração com Foursquare e Facebook, por exemplo;
• O MarketWatch também é desenvolvido de forma híbrida. O app oferece aos usuários as últimas e mais importantes notícias comerciais e informações de mercado financeiro;
• O app Pacífica é um aplicativo bem interessante e híbrido. Ele controla o estresse, ansiedade e preocupação, construído em torno das atividades rápidas e interativas que os usuários podem realizar. Os desenvolvedores basearam-se na técnica conhecida como terapia cognitiva-comportamental. O app é sucesso na área da saúde.

Mas afinal de contas, o que é melhor para minha empresa ou cliente, desenvolver um aplicativo nativo ou híbrido?

Não há uma resposta de imediato sem analisarmos algumas perguntas:

• O aplicativo é um protótipo?

Caso seja um protótipo, alguma demonstração, sem dúvida nenhuma o desenvolvimento híbrido é a melhor opção, pois consegue, a curto prazo, prototipar layouts de telas, demonstrando para multiplataformas.

• Utilizará muitos recursos nativos do dispositivo?

Se o seu aplicativo for bastante complexo, com acesso à vários recursos do hardware do dispositivo, o desenvolvimento nativo proporcionará melhor experiência ao usuário. Caso contrário, sendo um aplicativo mais simples, com poucos recursos, o híbrido está de bom tamanho.

• A UX/UI devem estar impecáveis?

Bom, se deseja que seu aplicativo fique com um layout de encher os olhos e uma performance arrasadora para o usuário e mostrar o que o sistema operacional do dispositivo pode oferecer, o nativo é a melhor opção. Por outro lado, se para a sua necessidade, o bonito e funcional já basta, parta para o desenvolvimento híbrido e seja feliz.

• Qual a gama de usuários que irão utilizar?

Caso seu aplicativo seja para um público mediano, que não exigirá muita demanda, pode-se usar o desenvolvimento híbrido, desde que tenha uma boa conexão com o backend e esteja muito bem codificado. Em contrapartida, se o seu aplicativo é acessado por pessoas do mundo inteiro, o nativo é a melhor opção e vai proporcionar melhor fluidez ao usuário. Porém, essa questão pode depender muito do seu backend para funcionar bem em ambos os desenvolvimentos.

• Qual seria a deadline de entrega?

É claro que isso faz muita diferença. Se você tem um curto tempo para entrega do aplicativo, sem dúvidas o desenvolvimento híbrido será a sua melhor solução, pois como citamos anteriormente, o código é reaproveitado para multiplataforma.

Mas, se acha que tem tempo de sobra para desenvolver separadamente, é claro que poderá partir para o nativo, porém, é muito importante lembrar de manutenções futuras, onde o nativo terá manutenção redobrada para cada plataforma.

• Conterá muitas implementações futuras?

Adentrando mais na manutenção do seu aplicativo, com o desenvolvimento híbrido seu desenvolvimento será somente em um código. Por outro lado, no nativo, deverá — para cada plataforma — fazer a devida alteração no código, e isso consequentemente demandará mais tempo de desenvolvimento.

• Tenho grana para investir no aplicativo?

Uma questão importante é o custo do desenvolvimento. Por muitos motivos citados anteriormente, o desenvolvimento híbrido tem um custo muito baixo em relação ao nativo.

Após fazer um balanço das respostas, pelo menos algum caminho e noção nós teremos para saber como vamos desenvolver nosso aplicativo.

Com base em todo o contexto, podemos concluir que não se pode negar a hipótese de que desenvolvimento híbrido está evoluindo ao ponto de apresentarem mais vantagens que desvantagens, principalmente pela facilidade de mão de obra, o curto prazo de desenvolvimento e custo final do aplicativo.

Podemos salientar que a grande vantagem do aplicativo híbrido seria a implementação de apenas um código para a sua distribuição em várias lojas de aplicativos.

Em contrapartida, apesar do desenvolvimento híbrido estar em constante evolução, sempre haverá um gap em relação ao desenvolvimento nativo, o que faz com que os apps utilizando tecnologia multiplataforma não estejam ao par com o que há de mais novo em cada plataforma (por exemplo, com o lançamento do iOS 10, foi liberada a API SiriKit para integrar apps de terceiros com o assistente pessoal da Apple, e demandou um certo tempo para aplicativos híbridos terem esse acesso).

Para finalizar, o desenvolvimento mobile requer profunda análise de uma série de fatores que já citamos anteriormente.

É importante ressaltar que a abordagem nativa não é melhor que a híbrida ou vice-versa, são apenas distintas e deve-se avaliar qual utilizar caso a caso, de acordo com a sua necessidade.