Mobile App Development with Flutter: What’s all the buzz about?

The developer community is all abuzz with the long-anticipated Beta release of Flutter, Google’s free and open source mobile UI framework for crafting high-quality native interfaces on iOS and Android. I’ve even been following updates on this framework as it matures. First off, this is Google we are talking about. Second, who doesn’t love Hamilton (their mobile app was built with Flutter)? Okay, okay. I’m getting ahead of myself. Let’s all calm down and take in the pros and cons one at a time.

So, as we all know, there isn’t one way to develop an app. There’s native development wherein you use the tools and the languages provided by Google or Apple for their respective platforms. Here the difficulty level is high and the code is unwieldy. And then there is the ‘Columbus mode’ wherein you explore and discover what works for you. The options are many and everything depends upon your level of expertise and comfort with a tool or language. That’s nice, but can also be insanely chaotic.   

Flutter, a cross-platform framework, aims to address this dichotomy. Paul Miller writes in Verge: It’s based on Google’s own Dart programming language… It has a rendering engine based on the Skia Graphics Library, the same thing Chrome uses to draw pixels on a screen. There’s an IntelliJ IDE for Flutter, just like Google has with Android Studio. And Google is also using Flutter in its upcoming Fuchsia OS, so that whole team is in the mix.” Interesting. Let’s go deeper one aspect at a time.

Built using Dart

Dart is Google’s own programming language that was released in 2011 as a direct competitor to JavaScript. Dart’s internal adoption at Google has been extensive with AdWords, AdSense, and Google Fibre teams using it to write their customer facing web apps. Externally, adoption has been slow up until now. But that is likely to change with the introduction of Flutter. From what I’ve heard, Dart is easy to use, a lot like C. Dru Keppel, who works at Summit Projects as an ActionScripter, says: He explains that Dart has a lot of Object-Oriented features that the typical JavaScript programmer will be unfamiliar with, but are essential for serious development. In other words, Google feels that JavaScript isn’t up for the task of being a “real” programming language, and Dart is going to fill that glaring gap.

Pros: Easy to learn, good for those who are good at C, can do heavy-lifting in programming.

Cons: Not many people know Dart. So setting up a team might be a challenge. It’s worth noting that people with a javascript background (including Typescript, which adds type enforcing like Dart does) will have an easier time adjusting.

Hot Reload!

Flutter offers fast development. Its website promises Whoa. Milliseconds? How?

You see, cross platform frameworks like Javascript need to go through a bridge in order to talk to native code. Furthermore, React Native works across two realms: first, the native realm of Objective-C or Swift, and second, the JavaScript realm. It uses JavaScript to access the OEM widgets in the native realm. Tal Kol, Founder at Orbs and previous head of mobile engineering at Wix further explains: //medium.com/@talkol/performance-limitations-of-react-native-and-how-to-overcome-them-947630d7f440″ style=”text-decoration-line: none;”>Here lies one of the main keys to understanding React Native performance. Each realm by itself is blazingly fast. The performance bottleneck often occurs when we move from one realm to the other. In order to architect performant React Native apps, we must keep passes over the bridge to a minimum. Wm Leler, Senior Software Engineer at Google, further explains: up to 60 times a second during animations, transitions, or when the user “swipes” something on the screen with their finger) so this can cause performance problems.”

Credit: Flutter.io

Flutter fixes this issue by injecting the updated source code files into the running Dart Virtual Machine (VM). The VM updates classes with the latest versions of fields and functions. Next, the Flutter framework automatically rebuilds the widget tree. This allows developers to view the changes that they’ve made instantly. Obviously, I’ve been used to waiting for hours for most development platforms to deploy and test an app on a device. Instant change detection would multiply productivity, reduce cost, and cut down development time. So, the hot-reload function of Flutter is a big yes for me!

Pros: Greater productivity

Cons: None!

Unified app development

Native development typically has a large cost associated with coding and ongoing support. Plus, you need to do it at least twice: once for the platform of your choice (Android or iOS) and then the other as well (because somebody on your team will always want the other platform!). In some cases, teams also have to code for a third time, for the web. The process is tedious, time-consuming, and expensive.

With Flutter, you build mobile apps, not Android apps or iOS apps. That’s just another way of saying that with Flutter, you build just once, from a single codebase. Flutter does its own rendering using Skia.

This enables developers to write the UI and navigation just once and simply share it across iOS and Android. Moreover, 60% of the code is reused between Flutter and web. You can get more numbers about productivity on //medium.com/@matthew.smith_66715/why-we-chose-flutter-and-how-its-changed-our-company-for-the-better-271ddd25da60″ style=”text-decoration-line: none;”>this post by Matthew Smith.

Dean Chalk, Google Flutter Enthusiast & Developer says: “ This is where Flutter really shines. It offers a genuine opportunity to write once and deploy everywhere.”

Pros: Higher productivity

Cons: None!

Widget, widgets, and more widgets

Widgets are critical to an app’s view and interface. They need to look good and natural irrespective of the screen size. They must perform fast, should be extensible and also customizable. Flutter makes it all possible by providing its own widgets.

Credit:

You see, Flutter has a widget for everything. Dig deeper, and you’ll find that each widget is made of smaller widgets. Those widgets in turn are made from even smaller widgets. In effect, you are programming with widgets, which again is a productivity booster. David DeRemer, from Posse, states: “ And, because Flutter runs on both iOS and Android, we were able to spend our time creating beautiful designs instead of porting the UI. ”

Pros: Higher productivity

Cons: None

All good?

From what I’ve understood, designing with Flutter is an altogether refreshing experience as compared to what the developer been through so far. In addition to the advantages listed above, there are a few more. For instance, it is run from the command line. So you can use it with any IDE and project setup is simplified. Additionally, there’s plugins for Intellij, Android Studio, and VS Code. Most importantly, Flutter is Google’s baby. Having a big name and its following backing it up is a huge advantage in terms of further development and support. So, where’s the catch?

Tricky spots

It is worth noting that not all Google products or platforms succeed; perfect example being mass adoption of the Dart language, which this is coupled with. Second, unlike the Ionic platform and React Native, Flutter is for mobile apps only. Hence there is no support for running in a web browser. This could be a big decision-maker if you’re looking for more device specific flexibility. Finally, Flutter is in Beta, and just recently moved from Alpha to Beta. So there is still time for Flutter to mature and be production ready.

Verdict?

Anything new is uncharted territory and brings with it its usual share of unpredictability. However, all said and done, Flutter, to me, seems like an enormously promising step forward in app development. , for instance, was developed and launched in just three months. While Firebase, Google’s mobile development platform was used for backend and infrastructure, the front-end was developed using Flutter.

Source

http://www.aptude.com/blog/entry/flutter-what-s-all-the-buzz-about?utm_source=feedburner&utm_medium=feed&utm_campaign=Feed%3A+aptude%2FTYRu+%28Latest+blog+entries%29