Flutter : Future of mobile development?

Flutter

Flutter is Google’s mobile UI framework for crafting high-quality native interfaces on iOS and Android. 

It is open source SDK and aims for :

1. Fast Development : Hot Reload i.e building app in milliseconds. Supports  fully-customizable widgets to build native interfaces in minutes.
2. Expressive and Flexible UI : Material widgets and Layered architecture which allows full customization, faster rendering and expressive and flexible designs.
3. Native Performance : Flutter’s widgets incorporate all critical platform differences such as scrolling, navigation, icons and fonts to provide full native performance on both iOS and Android.

In short the Flutter mobile app SDK is a new way to build fast, beautiful and cross-platforming mobile apps. People who try Flutter really like it and since from alpha release has caught eye of many developers.

Key highlights are  stateful hot reload , a new reactive framework, rich material widget set and integrated tooling , rich animation libraries , layered and extensible architecture , GPU-accelerated renderer and high-performance, native ARM code runtime and much more.

Flutter > React Native ?

• Hot Reload : It allows you to instantly rebuild your project as if it was just a web page. It  even preserve your application state, so you don’t even have to click and reach the screen you were on to proceed.
• Everything is a widget : Widget can be imagined as element that renders on a screen and encapsulates some behaviour, we have complete control over the behaviour of each widget along with styling.
• Smart widgets: On a widget error, a error message is shown in-place leaving every other widget intact.
• There is no separate layout xml, no xib file , JSX etc.
• Flutter apps can run both Android and iOS emulators simultaneously without any visible performance lag. 
• Google support of API and documention is very good, while comparing to React native god know what Facebook has done. 

Challenges

• Flutter doesn't show error messages if there is  conflict with the dependencies.
• There are not many resources for custom animation.
• Also not a rich support a lot of third party library.
• Also we need to create plugin wrapper around the third party libraries so they can be used in Flutter. 

Why Flutter: Compile time

One of the most popular features of Flutter is its fast, stateful hot reload. You can make a change to a Flutter app while it is running, and it will reload the app’s code that has changed and let it continue from where it left off, often in less than a second. If your app encounters an error, you can typically fix the error and then continue on as if the error never happened. Even when you have to do a full reload, it is fast

• Android StudioAndroid Full Compile — 2:10 min
  Android Incremental Compile — 20sec

• XcodeiOS Full Compile — 2:40 min
  iOS Incremental Compile — 40 sec

• FlutterFlutter Full Compile — 25 seconds.
  Incremental Compile — sub second thanks to the amazing hot reload.
  
   

Why Flutter: Unit testing

The more features your app has, the harder it is to test it manually. A good set of automated tests will help you make sure your app performs correctly before you publish it while retaining your feature and bug fix velocity.

There are many kinds of automated testing avaliable in Flutter :

• A unit test tests a single function, method, or class.
• A widget test (in other UI frameworks referred to as component test) tests a single widget.
• An integration test tests a complete app or a large part of an app. 

 Android Unit Testing

•  Good support. Can run on the JVM without Android if you mock Android specific classes.
• Compile time 5 sec
• Run time 1.5 sec

iOS Unit testing

• Can only run on iOS simulator. ( There are ways to get around this by moving non iOS dependent code into sub frameworks.)
• Compile time 40sec – 2:40min
• Run time 10 sec.

Why Flutter: Code Sharing

 

• 95% code re-use across iOS and Android. Our own plugins being the only exception
• 60% code re-use between Flutter and Web.
• Major architecture changes only happen once, not across 3 different platforms.
• Flutter has it’s own UI/Widget library, we do not have to deal with implementation details of iOS & Android (ie. Android Activity, Fragments, message passing etc.)

Native Apps

• Your app talks to the platform to create widgets, or access services like the camera.
• The widgets are rendered to a screen canvas, and events are passed back to the widgets.

  React Native

• React Native accesses the OEM widgets in the native realm,
• it has to go through the bridge
• Widgets accessed quite frequently (up to 60 times as per event) so this can cause performance problems. 

 

Flutter

 

• Flutter apps are compiled to machine code
• It doesn’t need a bridge like in React Native.
• Flutter does not use Platform OEM widgets.
• Widgets has flexibility.
• It only requires of the platform is a canvas and access to events and services.

5 quick takeaways about Flutter:

• It is the Dart Language.
• Flutter has Dart bridge, the application size is bigger, but it works much faster.
• React Native and Flutter share similar paradigms like event handlers and class extension.
• Flutter's animation and install experience are really good and smooth respectively.
• Packages are connected via the built-in "package manager" hence, connect via Xcode CocoaPods, React Native npm isn’t required.

Pros of Flutter

• Dart language. Dart — OOP: similar to Java / C #.
• Less writing in the settings for the start of the project manually
• Download Flutter from the git, do a “flutter doctor”
• Hot-reload just as in React-Native.
• Support for IDE (Android Studio, IntelliJ idea, VSCode)
• Built-in navigator : Create a new route without connecting anything like in RN.
• Ready-made data management solution: Everything has a Widget.

Cons of Flutter

• No division into the template, styling and working with the data.
• Styling is a pain : no separation into Styles, templates, and controller.
• Good but difficult animate unlike in RN.
•  Optimization. There is one widget inheritance with a changeable (stateful) and non-changeable (stateless) conditions.
• Lack of tools to save the state of the application - we need to  serializing the current state.