Don’t do drugs, do Flutter! (talk #1)
This post was originally posted on blog.juliobitencourt.com and to a better experience is advised to go there, since medium is a little limited.
In this post, I’ll do a resume from the talk I presented with the introduction to the newest (and awesome) SDK for mobile development by Google.. [In Brazil we call ‘Proerd lion’ the mascot from government against drugs]
It’s been a while, especially throug 2018, that Flutter keeps becomming even more popular between development of mobile apps, many people giving a chance are really enjoying, others not that much (maybe they’re deeply inside the confort zone), but the fact is, Google is heavily investing and the community in general are excited. So, let’s see what a hell this Flutter has of good stuff…
Mobile development tech:
I don’t think it is necessary talk about the market on mobile apps, because in early 2019 it is self explanatory the use of smartphones everyday, and it is also natural that the tech ecossystem to develop this apps are wide (only not bigger than js frameworks). But when arrives a client with a project in mind, that’s almost impossible not to think in the first option, native development.
> Native
It is unquestionable that considering only performance and resources, the native development will always be the best choice (unless your code is really bad written, in that case there ain’t no tech to save), but the key point is that it is to much expensive to manage 2 or more teams especiallized in each platform, to mantain 2 source codes completely distincts, having in one side Android with the lovely Java and the very good Kotlin, and the other, iOS with Objective C and Swift. Judging by the agility of having a product ready to market, rarely a startup, without many resources, would choose to develop nativally.
If we give a look at the basic architecture of a native app, the native code will communicate directly with the platform on visual canvas rendering and also to use resources as GPS and sensors.
> Hybrid
A second option, also pretty famous, would be to use technologies as Ionic and Phonegap, originated from the core of Cordova, and are known as hybrids. That’s because they use a web stack (Html, Css e Js) on their development and are rendered inside a WebView (which is basically a browser).
Their popular because the development of such apps are considered easy, basically a website, and simple, mainly for those who are already a web developer. But, there is always a but, they are well known for having performance issues, as we can look at is own basic architecture:
We can notice that the JS is enveloped in a webview to run on the platform, and to use native services, enters in scene the famous Bridge (we’ll see more about in a minute).
> ‘Compiled’
Another alternative to development could be named as ‘compiled’, due to not using official languages, thus not being native of each platform, however they don’t run on webviews, thus not being hybrids too.
Flutter and React Native fit perfectly in this category, even though not the only ones, we’ll focus on them. They are considerede by many the saviors -no, not that kind of saviors from twd-, after all they have the best of both worlds, a good performance and a development agility with a single codebase compiling to both platforms.
React Native is a very famous framework developed by Facebook, the point is not to talk about react or compare both technologies — although that is almost inevitable — and yes, to present flutter, but there is a huge exclamation point on react.
The famous Bridge. React Native does use native resources for each platform, however the JS code is not compiled to native code, so to this communication occur it is necessary the use of a bridge.
Js is very good on its own world, the platform is very good on its own world, but when this communication is necessary, things can get a little complicated, of course that by using native resources the performance will still be very good, but the — bridge — is a reality and sooner or later bottlenecks can appear.
In the basic architecture of React Native we realise precisely the JS making use of a bridge to communicate with native resources of each platform. So, when the heck this article will start talking about futter?
What is the big idea by flutter?
It is time to break these bridges, or at least, became even closer of a native app performance when communicating with native resources from the platform.
What is another big idea by flutter?
Yeah, Widgets! In Flutter everything is a widget, the truth is that any article of a flutter presentation, this will be the main information, in fact this info will be spammed until you realise that’s the gospel truth.
Texts, rows, columns, images, forms, icons, buttons, in short, everything you can and even can’t see, are rendered as widgets. And it is important to know that to Flutter, these widgets must follow 3 principles:
Appearence
Quite important that they feel nice visually, pretty, keeping the Look and Feel of each platform (when necessary and desired), after all the UX from android in many cases are differente from iOS.
Fast
When the user interacts, it is essential the app fells as smooth and fast as possible, that includes animations and transitions.
Extensible and Customizable
As a developer, it is much more easy when you have the possibility to extend and customize something the way you want, with your own company branding for example.
And the key to all this to be possible, is in the Flutter architecture, just give it a look and we can notice there ain’t more bridges, and if we look deeper, we’ll notice that the platform widgets are now rendered inside the SDK. Aside from allowing fastest, extensible and customizable widgets, it gives an extreme freedom to developers to render whatever they desire on canvas, endind up the excuses to denying the craziest projects from the designers.
Now imagine the following, android has countless versions, currently on Android Pie (API Level 28), as well as iOS on version 12, thousands of smartphones distributed along the market between all these versions, formats, manufacturers, becomming literally the worst nightmare to developers, after all, each new version brings new resources, that not necessarily run on previous versions (remember the widgets rendering on the platform?), then, it’s up to the poor dev to test the app on thousands of emulators, to flood the codebase with compatibility libs and hope everything goes well when publishing the app to run on that smartphone from 2014 that your uncle insists on keeping.
But with flutter my dear friend, the visual you develop to one smartphone, WILL RUN EQUALLY ON EVERY SMARTPHONES (remember the widgets rendering on the SDK?)!! Isn’t that amazing?
Witness the magnificence of an app in Flutter with Material Design widgets, running on a platform version released 2 years before the creation of Material Design, which does not have support to those widgets!
Who doesn’t?
Let the code compiling and went for a walk, grab some coffee and when came back it wasn’t even done yet.
I’m sure that’s really usual, but not for Flutter, and that’s not magic, it’s called hot reload. When you change the visual or even the behavior from widgets, just hit the ctrl+s and that’s it, almost instantly the result is rendered on your device!
Well, we might not know exactaly the date in which Google started working on Flutter, but in 2016 it first appeared in Dart Developer Summit, rising to prominence and community support on its firts Alpha release in 2017, and then 2018 was the big year, after all Google launched Beta 1, Beta 2, Beta 3, Release preview 1, Release preview 2 and finally in december 4th went live a stable 1.0 version!! o/ [Currently flutter is at 1.2, a feature announced in february 26, 2019]
The stable version was announced by Google on a big event, live streamed worldwide.
On the same event the stable version was announced among many others excited news for those who were following and investing time on the SDK. In which we can highlight:
- Codemagic, an automatization tool for the builds;
- Flare, and the possibility of creating 2d vector animations, to easily export and run as a widget in Flutter (just like the History of Everythin shown above)
- The possibility of running Flutter on Raspberry pi, as well as a demo of the team work to integrate Flutter running on Windows/Mac, on top of that they revealed the presentation itself running on Mac, was built with Flutter!! (See the moment)
- Last but not least, Humminbird!
Hello, Dart.
Wtf? I confess that before Flutter I didn’t know Dart either. Created in 2011, we can say it wasn’t a very popular language a year ago, even though Google was behind it. Dart was used specially in server/back end, but now its popularity comes increasing day by day.
It is natural everybody scared at first, ‘Why not to use javascript? Why not to use kotlin? Why not to stop whining?’, according to Flutter enginers JS was really considered initially, as well as others, but the thing is Dart is a very good language, has a lot of modern resources, it is fast and fits perfectly with Flutter, even more because allows to compile AOT(Ahead of Time) and JIT(Just in Time), among other benefits described beautifully on the article linked bellow this one.
“Ahhh but I’ll have to learn another language, I don’t want it..”
Well, it’s the same old story, if you know the concepts… stackoverflow will always be there to help you with the sintaxe. Dart is opensource and because it is object oriented, who comes from java, c# and the like will notice the learning curve is very short, besides in many cases realise how much better to code it is, specially with less verbose. Go ahead, try it yourself running dart online with dartpad. Dart is current on 2.2, and one of the focuses on this version was the native code performance.
That’s it, the talk finishes with a live coding that will be detailed explained in the next article ‘Don’t do drugs, do Flutter! (talk #2)‘
Main references, go on and read, it’s worth it:
- What’s Revolutionary about Flutter: hackernoon.com/whats-revolutionary-about-flutter
- Why Flutter Uses Dart: hackernoon.com/why-flutter-uses-dart
- Pitching Flutter to your company or client: medium.com/flutter-io/https-medium-com-flutter-io-pitching-flutter
