Pedro Pires

Flutter – A broad Introduction

According to statista, by 2020, mobile apps are expected to generate around 189 billion US dollars in revenues via app stores and in-app advertising. Nowadays, companies see the mobile app not only as the business itself, but also as a means to advertise their brand, and are trying to reduce the time to market as much as possible in order to keep up with the competition.

Currently, there are two main operating systems running on smartphone devices: Android and iOS. Together, they make up almost 100% of the smartphones sold in the first quarter of 2018. These different platforms have their own design constraints, their own toolsets and their own programming languages, but each platform is merely building a user interface. Why should development across these two user surfaces be so different?

Many technologies have already addressed the necessity to unify development for the existing platforms, and names like Microsoft’s Xamarin and Facebook’s ReactNative have emerged as the most prominent cross-platform development solution.

Google is known for its awesome products but has never endorsed a long-term, supported, fully cross-platform project until recently. Read this Flutter introduction and discover all about the project.

1. What is Flutter?

According to Google, the enterprise behind the project, Flutter is a brand new technology that allows the crafting of high-quality native interfaces on iOS and Android with a single shared code base, using a programming language called Dart, also developed by Google.

With a free and open source SDK, Flutter is used by developers and organisations around the world and works with a centralised programming language and unified core. Additionally, Flutter integrates with standard, popular development environments and tools such as Visual Studio Code and IntelliJ.

This combination of key features enables fast development, a high performant result and high maintainability.

2. The Flutter project timeline

Flutter is quite new. Therefore, its timeline is fairly small and compact (for now!).

  • In early 2015, the project was up and running and known as ‘Sky’. It ran on Dart and was already capable of rendering screens at a 120 frames-per-second;
  • In 2016, Google unveiled their plans and codebase for a new operating system (OS) known as ‘Google Fuchsia’. This new OS is rumoured to be the successor to Android for universal devices, and its apps are entirely written in Flutter;
  • After maturing, the initial release took place in 2017. The alpha version, numbered as v0.0.6, was publicly available and developers could jump on this technology.
  • In May 2018, during Google IO, Flutter was finally shipped in its official beta release.
  • In September 2018, Google released the second preview of version 1.0.

Fuchsia is a new OS with a dedicated micro-kernel that runs on universal devices, from embedded systems to smartphones, tablets and personal computers. It is already clear that Flutter is not going to disappear or be abandoned any time soon. Google is boldly and consistently investing in Flutter, as can be seen from its presence in I/O 2017 and I/O 2018.

3. What makes Flutter different?

Flutter is not a new, ground-breaking, unseen solution. It is rather a new option for the competitive cross-platform world. But what value is Flutter bringing to this prolific environment? There are, of course, some points of differentiation.

Unlike ReactNative, which bridges Javascript to native code with a noticeable performance loss, or Xamarin.Android & Xamarin.iOS, which compile a single C# codebase into native code – thus requiring two completely distinct UI constructions – Flutter seems to overcome its competitors’ most common flaws. Skipping mid-level bridging and interpretation, leveraging powerful ahead-of-time compilation and making use of the flexible Skia Graphics Library, Flutter is all about widgets.

A widget represents an atomic area on the screen and its corresponding logic (e.g. Input Field, Button, Image, List). These small building blocks are fast, very responsive and customisable. Flutter’s solid and high-quality user interfaces come from the fact that you can combine, interweave and compose widgets in order to achieve larger, more complex screens.

Despite the existence of many community-developed widgets, Google’s Flutter team provides the most relevant ones. These widgets were built under Google’s material design or Apple’s Cupertino.

Another major advantage of Flutter is hot reload. This feature allows code to be incrementally added and executed in real time, instead of having to recompile code over and over again, reducing implementation and test time.

Just like most cross-platform technologies, Flutter allows interaction between its Dart codebase and native components, be they hardware or existing libraries. By leveraging this possibility, it can delegate difficult, expensive functionalities to native implementations and collect the results with great ease so they can be further used by the single codebase. For instance, it can use the battery service of each OS to obtain the device battery status.

3.1. Flutter vs. Xamarin

Xamarin.Android and Xamarin.iOS allow the developer to centralise code logic in a single C# codebase. This powerful feature prevents code duplication and minor logic bugs and speeds up the output process by saving development time. Nonetheless, in order to achieve platform dedicated UIs, the developer must implement the UI separately for each supported platform. Xamarin.Forms can help circumvent this necessity, but native UI implementation is usually the preferred option due to its flexibility.  Once ready to run, code is compiled and deployed to the app.

Flutter’s “Write Once Run All” approach is different, relying on the Skia Graphics Library to render its UI, mimicking native UI components. Just like Xamarin, the logic is centralised in a single Dart codebase.
While we can achieve a “written once” UI that runs perfectly on both platforms, it is recommended not to combine platform-specific UI guidelines in order to prevent UX ‘alienation’ (iOS users are certainly accustomed to their Cupertino-styled apps, while Android users have a more diverse range of styles). In order to dodge this issue, Flutter allows the implementation of different UIs for each platform in a similar way to Xamarin.

The development process isn’t solely based on the cross-platform technology, but also on the whole ecosystem, which includes libraries and plugins. Xamarin is already an established technology, more mature than Flutter, and can call on the support of the most used third party plugins. However, despite the fact that Flutter was only recently developed, it already features an extensive set of third party libraries, just like Xamarin, as well as continuous development tools.

The bottom line of this comparison is that Xamarin emerges as a more consolidated technology, while Flutter, still under significant development, is quickly growing and learning from its competitors how to achieve a solid backbone for the coming months.

3.2. Flutter vs. ReactNative

ReactNative is a cross-platform technology built by Facebook and designed to develop mobile and web apps. Similar to Flutter, ReactNative centralises development in a single codebase and allow developers to write apps for both Android and iOS.

Despite sharing the same codebase, ReactNative embraces differences among platforms and allows platform-specific customisations. ReactNative developers have to rely on third-party UI libraries; this is seen as a disadvantage when compared to the out of the box Flutter UI components.

Facebook built ReactNative as a robust platform, with lots of optimisations. Despite being hard to extract, performance metrics depend on features, algorithms, components amongst many other aspects.

The most relevant consideration to make is the fact that ReactNative apps are developed in JavaScript and, therefore, with a JavaScript engine under the hood, introducing a considerable overhead, as the implementation is not compiled into native code.

ReactNative has been in the market for some years, which translates, in a clear way, to a more mature and consolidated state when compared to Flutter. But besides that, Flutter allows the usage of many JavaScript libraries thus permitting companies to reuse components and to include non-mobile JavaScript developers into mobile projects.

As a result of this ever-moving ecosystem, many third-party libraries were ported from native libraries while others were created specifically for this platform.

4. So far so good. What about real, live, business use cases?

Even though Flutter is still in beta, it is encouraging to note the strong early adoption of the SDK, with some high-profile examples already published. One of the most popular is the companion app to the award-winning Hamilton Broadway musical. Built by Posse Digital, this app has an extensive user base and an average rating of 4.5 on the Play Store (as of July 2018).

Recently, in May 2018, the Chinese e-commerce giant Alibaba announced their adoption of Flutter for Xianyu, one of their flagship apps with over twenty million monthly active users. Alibaba praises Flutter for its consistency across platforms, the ease of generating UI code from designer redlines, and the ease with which their native developers have learned Flutter.

A more complete and organised Flutter portfolio can be found here.

5. Last but not least, what can we conclude?

Based on everything we’ve covered in this article, the conclusion is that Flutter has great potential to solve some of the pains of cross-platform development, but it’s still not clear when it can be a real alternative – this will really depend on the project. It’s not even fair to compare Flutter to Xamarin or ReactNative due to the difference in the maturity of the platforms. However, we think there’s great potential in the technology, and this is why we keep investigating, trying and comparing. With several modern IDEs at its disposal, a stable, developer-friendly modern language and unified output, this technology is bound to earn its place in the digital world.

As soon as Google pushed Flutter through Alpha into a Beta phase, the odds of its success grew exponentially, thus drawing the attention of the mobile community. Mobile experts around the world have found in Flutter what they were looking for as they strived for new, fresh options. Let’s see how it evolves – we’ll definitely be a part of what is to come.

Escrito por:

Pedro Pires

Mobile Developer at Xpand IT

André Baltazar

Developer at Xpand IT

José Camacho

.NET Developer at Xpand IT

Pedro PiresFlutter – A broad Introduction
read more

Flutter – Introdução completa

Segundo o site Statista, é esperado que as aplicações móveis gerem cerca de 189 biliões de dólares em retorno através das Apps Stores e através de anúncios in-app, já no próximo ano de 2020. Hoje em dia, as empresas olham para as aplicações mobile não só como um negócio, mas também como uma forma de fazer publicidade à sua marca, ao mesmo tempo que tentam reduzir significativamente o time-to-market para que possam acompanhar a concorrência.

Atualmente, existem dois grandes sistemas operativos para smartphones: Android e iOS. Juntos, constituem 100% dos aparelhos vendidos no primeiro quarter de 2018. Estas plataformas são diferentes, e, por isso, cada uma tem os seus próprios constrangimentos a nível de design, as suas próprias ferramentas e as suas próprias linguagens de programação, mas cada plataforma cria, apenas, um user interface. Se assim é, porque é que o desenvolvimento nestes dois surfaces deve ser assim tão distinto?

Muitas tecnologias já endereçaram a necessidade que existe de unificar o desenvolvimento para ambas as plataformas, e nomes como a Xamarin da Microsoft ou o ReactNative do Facebook emergiram como soluções de desenvolvimento multiplataforma.

Já a Google, conhecida pelos seus fantásticos produtos, ainda não tinha apresentado nenhum projeto a longo-prazo para o desenvolvimento cross-platform. Até agora. Deixamo-los, então,  com esta introdução ao Flutter, para que fique a conhecer tudo sobre este novo projeto da Google.

1. O que é o Flutter?

Segundo a Google, a empresa por trás deste projeto, o Flutter é uma nova tecnologia que permite a criação de interfaces nativas de alta qualidade em iOS e Android, partilhando a mesma base de código, e utilizando uma linguagem de programação chamada Dart – também desenvolvida pela Google.

Com um SDK open source e gratuito, o Flutter é, neste momento, utilizado por developers e empresas um pouco por todo o mundo, já que funciona através de uma linguagem de programação centralizada e código unificado. Para além disso, o Flutter permite a integração com ambientes de desenvolvimento mais populares e estandardizados, e com ferramentas como o Visual Studio Code e o IntelliJ.

Esta combinação de características permite um desenvolvimento muito mais rápido, um alto desempenho e também uma alta capacidade de manutenção.

2. A timeline do projeto Flutter

Este projeto é recente. Por isso, a timeline não é muito extensa (por enquanto!).

  • No ano de 2015, o projeto arrancou, conhecido pelo nome de ‘Sky’. Corria em Dart e já era capaz de renderizar ecrãs a 120 frames por segundo;
  • No ano seguinte, em 2016, a Google revelou os seus planos e o codebase para um novo sistema operativo (SO), que ficou conhecido por ‘Google Fucshia’. Diz-se que este novo SO pode vir a ser o sucessor do Android para todos os dispositivos, e as suas aplicações serão totalmente escritas em Flutter;
  • Depois de uma fase de maturação, o lançamento inicial aconteceu em 2017. A versão alpha, numerada v0.0.6, ficou disponível ao público e os developers puderam começar a explorar esta tecnologia partir desse momento;
  • Em maio de 2018, durante o evento Google IO, o Flutter foi finalmente lançado na sua fase beta;
  • Mais tarde, em setembro desse ano, a Google lançou a sua segunda preview da versão 1.0.

O Fuschia é, então, o novo sistema operativo com um micro-kernel dedicado, que corre nos mais variados dispositivos, desde sistemas integrados a smartphones, tablets e computadores pessoais. Neste momento, é claro que o Flutter não irá desaparecer tão depressa, já que a Google está constantemente a investir neste projeto, como se pode comprovar pela sua presença nos eventos I/O 2017 e I/O 2018.

3. O que torna o Flutter diferente?

O Flutter não é uma solução completamente inovadora. É, sim, uma nova opção que surge no competitivo mundo do desenvolvimento multiplataforma. Mas que tipo de valor é que o Flutter traz a este ambiente? Existem, claro, alguns pontos de distinção.

Ao contrário de ReactNative, que faz a ponte entre Javascript e código nativo com uma significativa perda de performance, ou Xamarin.Android & Xamarin.iOS, que compila uma única fonte de código em C# com código nativo – exigindo duas construções de UI completamente distintas – o Flutter parece superar as falhas mais comuns dos seus concorrentes. Ignorando interpretações de nível médio, aproveitando a poderosa compilação e utilizando a flexível Skia Graphics Library, o Flutter tem tudo a ver com widgets.

Um widget representa uma área atómica no ecrã e funciona através de lógica por correspondência (por exemplo, Campo de Entrada, Botão, Imagem, Lista). Estes pequenos blocos de construção são rápidos, muito responsivos e customizáveis. Os user interfaces sólidos e de alta qualidade que o Flutter oferece advêm do facto de que é possível combinar, interlaçar e compor widgets com o intuito de obter ecrãs maiores e mais complexos.

Apesar de existirem inúmeros widgets desenvolvidos pela comunidade, a equipa da Google responsável pelo Flutter desenvolve e fornece os mais relevantes. Estes widgets, por norma, são construídos no design de materiais da Google ou para o Cupertino, da Apple.

Outra grande vantagem do Flutter é o hot reload. Esta característica permite que o código seja adicionado de forma incremental e que este seja executado em tempo real, em vez de ter de recompilar o código uma e outra vez, reduzindo o tempo de implementação e também de testes.

Tal como a maioria das tecnologias multiplataforma, o Flutter permite a interação entre a base de código de Dart e os componentes nativos, sejam eles hardware ou bibliotecas existentes. Ao incluir esta possibilidade, o Flutter pode delegar dificuldades, funcionalidades mais dispendiosas para implementações nativas e colecionar os resultados com grande facilidade, para que possam ser ainda mais utilizados pela sua única base de código. Por exemplo, é possível utilizar o serviço de bateria de cada sistema operativo para obter o estado da bateria do aparelho.

3.1. Flutter vs Xamarin

O Xamarin.Android e o Xamarin.iOS permitem ao developer centralizar a lógica do código numa única base em C#. Esta é uma característica muito poderosa que previne a duplicação do código, diminui a possibilidade de bugs, e acelera o processo de output, diminuindo o tempo de desenvolvimento. No entanto, para conseguir obter interfaces de utilizador (UI) dedicados àquela plataforma, o developer deve implementar todo o UI de forma separada para cada plataforma de suporte. O Xamarin.Forms pode ajudar a contornar esta necessidade, mas a implementação de UI nativo é sempre a melhor opção, já que oferece maior flexibilidade. Assim que o código está pronto, é compilado e entra em fase de deployment para a aplicação.

A abordagem do “Write Once Run All” do Flutter é diferente, já que conta com a Skia Graphics Library para renderizar todo o seu UI, imitando os componentes de UI nativos. Tal como a Xamarin, a lógica está centralizada numa única base de código em Dart.

Embora possamos obter um UI “written once” que corre perfeitamente em ambas as plataformas, é recomendada a não combinação de diretrizes de UI específicas de uma plataforma, de forma a prevenir a alienação da experiência do utilizador (UX) – os utilizadores do sistema iOS estão acostumados às aplicações em estilo Cupertino, enquanto os utilizadores de Android utilizam uma gama mais diversificada de estilos. Para minimizar esta questão, o Flutter permite a implementação de diferentes interfaces de utilizador para cada plataforma, tal como a Xamarin.

O processo de desenvolvimento não é apenas baseado na tecnologia multiplataforma, mas sim em todo o ecossistema, incluindo bibliotecas e plugins. A tecnologia Xamarin já se encontra mais estabelecida do que o Flutter neste momento, e portanto, pode contar com o suporte da maior parte dos plugins existentes. No entanto, independentemente do Flutter ter sido desenvolvimento há menos tempo, também conta já com extensas bibliotecas, bem como com ferramentas de desenvolvimento contínuo.

No fundo, aquilo que esta comparação pretende afirmar é que a tecnologia Xamarin é, neste momento, uma opção mais consolidada, sendo que o Flutter, ainda que se encontre em desenvolvimento, está a crescer muito depressa e a aprender com os seus concorrentes como se tornar mais sólido já durante os próximos meses.

3.2. Flutter vs ReactNative

ReactNative é uma tecnologia multiplataforma desenvolvida pelo Facebook e desenhada o desenvolvimento de aplicações para mobile e web. Semelhante ao Flutter, o ReactNative centraliza o seu desenvolvimento num único codebase e permite aos developers escreverem aplicações tanto para Android como para iOS.

Independentemente de partilharem a mesma base de código, o ReactNative apresenta diferenças entre plataformas e permite customizações específicas para cada uma delas. Os developers que trabalham esta tecnologia têm de confiar na utilização de bibliotecas de UI de terceiros, e isto é visto como uma desvantagem quando comparado com os componentes de UI do Flutter.

Esta tecnologia foi construída pelo Facebook para ser uma plataforma robusta, com inúmeras otimizações. Independentemente de ser difícil de extrair, o desempenho das métricas depende das características, algoritmos e componentes, entre muitos outros aspetos.

A consideração mais relevante a fazer é o facto de as aplicações de ReactNative serem desenvolvidas em JavaScript e, por isso, com um mecanismo de JavaScript na sua sustentação, o que faz com que exista uma sobrecarga considerável quando a implementação não é compilada em código nativo.

O ReactNative já está no mercado há alguns anos, o que se traduz, de forma clara, numa solução mais madura e consolidada quando comparada com o Flutter. No entanto, apesar desse pormenor, o Flutter permite a utilização de muitas bibliotecas JavaScript, possibilitando às empresas a colocação de developers tipicamente não-mobile, precisamente em projetos mobile.

Como resultado deste ecossistema em constante mudança, muitas bibliotecas de terceiros foram portadas de bibliotecas nativas, enquanto outras foram criadas especificamente para esta plataforma.

4. Até agora, tudo bem. Mas, e então, onde estão os casos de utilização reais e de negócio?

Apesar de o Flutter ainda se encontrar na sua fase beta, é bastante animador verificar a facilidade de adaptação do SDK, com alguns exemplos high-profile já publicados. Um dos mais populares é a aplicação Hamilton Broadway musical (vencedora de um prémio). Desenvolvida pela Posse Digital, esta app conta com uma extensa base de utilizadores e uma classificação média de 4,5 na Play Store (desde julho de 2018).

Também recentemente, em maio de 2018, o gigante do comércio chinês Alibaba anunciou a adoção do Flutter para o Xianyu, uma das suas principais aplicações, com mais de 20 milhões de utilizadores ativos todos os meses. O Alibaba confia no Flutter pela sua consistência entre plataformas, pela facilidade de geração de código UI a partir das diretrizes do designer, e pelo reduzido tempo de adoção dos developers à tecnologia.

Um portfólio mais extenso e completo de Flutter pode ser encontrado aqui.

5. Por fim, o que podemos concluir?

De facto, nem é justo comparar o Flutter a Xamarin ou a ReactNative, já que as diferenças de maturidade são ainda significativas. No entanto, como consideramos existir um grande potencial nesta tecnologia, continuaremos a investigar, a testar e a comparar. Até porque, com os modernos IDEs à sua disposição, com uma nova linguagem e com um output unificado, é óbvio que esta tecnologia está destinada a conquistar o seu espaço no mundo digital.

Assim que a Google incluir Flutter no Alpha para uma fase beta, as suas hipóteses de crescimento aumentam, atraindo atenção para a comunidade mobile. Já são muitos os mobile experts que encontraram no Flutter aquilo que procuravam: uma opção nova e eficaz. Vamos ver qual a sua evolução – quanto a nós, decididamente que faremos parte daquilo que está para chegar.

Escrito por:

Pedro Pires

Mobile Developer na Xpand IT

André Baltazar

Developer na Xpand IT

José Camacho

.NET Developer na Xpand IT

Pedro PiresFlutter – Introdução completa
read more