Googlehas announcedthe initial stable release of Flutter 1.0, one of the best cross-platform mobile development frameworks. Flutter allows you to build native apps for iOS and Android from a single codebase. Flutter looks very promising. It allows you to create cross-platform applications providing the following three main features according to theFlutter website.
Flutter has a highly optimized rendering system from day-0. This framework was initially created to provide smooth and shiny animations, low resource consumption and easy customizations. This allows Flutter apps to provide native end-user experience.
Flutter is a cross-platform framework. Literally, it is a duo-platform framework: for iOS and Android. Moreover, Flutter’s widgets obey platform-specific features, such as navigation patterns, scrolling, fonts and icons. That means Flutter provides cross-platform capabilities with no compromise: end-user will get native UX and patterns, with no additional development costs.
Wait...Actually there is a 4th Point.
We are adding this fourth point because this one is critical. In MadAppGang we believe, the future is open-source. All the tools we are using today to develop apps are open sourced: Golang, Swift, Kotlin, ReactNative, ReactJS, Nodejs. We truly believe, in the 21 century, technology should be managed by open communities. It’s the only way to solve real problems and provide the best development experience for everyone. We are happy that Google shares our views on open source technologies by supporting such great projects as Flutter, Golang, and Kotlin.
Flutter sounds fantastic, so why not to migrate to Flutter and save time, money and developer resources?
Flutter is not the first attempt to create a cross-platform framework for native app development. Today we already have a list of amazing cross-platform mobile app development tools that include:
Let’s talk a little bit about this list.
Delphi and Qt are commercial paid industrial solutions. We are talking about general mass-market development, that’s why we are skipping then.
Xamarin is corporate apps focused framework, created and supported by Microsoft. It has its own niche. Not a mass development technology as well.
Native Script is not a competitor to Flutter. The main idea of Native Script is to translate web apps into native apps. Native Script is able to do it pretty well. But still, not perfect, with a set of limitations.
The real competitor for Flutter is ReactNative and native development.
Here is Flutter cross-platform mobile app development vs native, and React Native. Let’s compare them and let’s talk tech:
|Runtime||native binary||JSRuntime+Native||native binary|
|Rendering||Skia||Mix: Native+JSRuntime||Native(UIKit for iOS or Skia for Android)|
|Architecture||React-style||React-style||MVC, AppleMVC, MVP|
|Performance||Fast||Requires good knowledge to be fast||Fast|
|Learning time||Fast||Very fast, with previous ReactJS experience||Slow|
|Development time||---||Very fast||Slow|
|Update||Only with store||Over the air||Only with store|
|Require native platform knowledge||Little Bit||The knowledge of a native platform required||Perfect knowledge required.|
As you can see Flutter is very similar to ReactNative with some core concepts.
The main difference is architecture.
Flutter has a real native architecture with no additional runtime. While ReactNative has JS-Bridge, that executes JS code and handles all interactions with JS and native parts.
That's why Flutter apps are smaller, they don’t have runtime in their app package. On the other hand, because of this runtime, ReactNative apps can update their JS code over the air (Just Keep in mind, this breaks the App Store Review rule 4.2)
ReactNative uses a native render system. It’s the main idea of ReactNative framework: you are writing business logic and network layer with JS reusable code - the app interacts with the user with native UI.
Flutter uses the Skia library to render widgets.
Skia is a pretty old C++ library. But after Google acquired it in 2005, it’s constantly under development and widely used by the long list of well known global projects such as WebKit, Chrome, Firefox, ForefoxOS, Sublime Text3. Google is using Skia in their new OS, Google Fuchsia. A lot of people believe that Fuchsia is a future replacement for Android.
Skia is also part of a native rendering system for Android besides hwui:
Skia directly works with GPU accelerated hardware to display the graphics. That’s why it’s fast. Flutter uses OpenGL to work with hardware on both Android and iOS, even though Apple has a better way to talk to GPU: by using the Metal framework.
But because Sia has a critical bug with Metal, for now, Flutter can't switch away from using OpenGL on iOS. We hope after the bug is resolved, Flutter could be rendered by Metal on iOS. Once these improvements are made Flutter can become the best tool for iOS and Android cross-platform development.
Let’s take a closer look at the Advantages and Disadvantages of Flutter.
As the result, Flutter rendering is fast, but not native. Flutter copies iOS UI, so it looks and feels a little bit different.
Although there is a list of so-called "Cupertino widgets", they are not enough to build a simple app. Obviously, Flutter UI was created with Material Design in mind, not UIKit.
The biggest disadvantage, there is no way to integrate with native components. You can not mix two rendering systems. iOS has a very powerful Collection View component. If you want to use it in Flutter, you have to create your own.
Flutter doesn’t have visual design tools like Interface Builder. Hot reloading and UI introspection tools help a lot with building an interface, but they can't fully substitute the Interface Builder..
It's not so easy to create animations. Although Flutter has a rich toolset to create amazing animations, it requires more time and effort to create and debug animations using Flutter.
Flutter is an amazing choice for Android app development: it uses the same rendering engine, fully supports material design and is supported and developed by Google Team.
ReactNative and Flutter are very similar, we have looked at the advantages and disadvantages of Flutter. But in general, they share the same idea and even the same architecture principals. It’s obvious, Flutter was inspired by React, as a result we have a Native version of ReactNative.
On the other hand, ReactNative already has a large development community with an extremely large codebase. ReactNative reuses native UI components, that’s why the app looks and feels native for the end-user. Both platforms require native development skills to create complex apps.
The MadAppGang team uses ReactNative to build hi-fidelity prototypes. It’s possible to create a clickable working app with mocked data in just one week with one good developer. This approach helps us to save time and money and validate design, features, and UX on real devices before starting to invest in a full-fledged app development.
We believe, ReactNative fits perfect for some app concepts. Moreover, we are using ReactNative to create our own apps. As you know we are working on the SmartRun project. The main app is native, but we have a couple of companion apps. One of them helps to detect heart rate zones and this app was created with ReactNative.
We are happy we now have one more option on the table. As real geeks, we have already started to create an internal project using Flutter. As you know, the only way to understand all the advantages and disadvantages is to try.
Flutter is very young, and we believe it will find its place on the market. There is no silver bullet and there are a lot of different opinions.
Flutter has a future. Google uses Flutter to solve their own problem: create and support Google products on two mobile platforms. As a result, the main focus of Flutter will be Material UI/UX. We will keep you updated as we test out Flutter and learn more. In the spirit of Open Source please share your thoughts about Flutter in the comments below.
You can find some more information here:
15 December 2018
Also on Madappgang
Mobile App Architecture: Everything You Need To Know About Creating a Reliable App Architecture
Mobile App Development for Real Estate in 2021: Full Guide
The Cost of Developing a Mobile App for a Restaurant
How Much Does It Cost to Develop a Fitness App? (Plus Features and Monetization Models)
Job Portal App Development: Market Overview, Features & Cost Estimations
Single-Page Applications vs Multi-Page Applications: Choosing the Perfect Web App Architecture
On-demand Service App Development: Trends, Monetization, Planning & Costs
How to Develop an Educational App: From Idea to End-Product
How to Develop a Bike Sharing App: Bike Rental Systems and Key Features
Overengineering: What is it and how to make sure you don’t overpay
LMS Development: From Concept to Robust Software
MadAppGang’s software development process: True agility, simplicity, and rapid delivery
The What, When, and Why of Low-Code and No-Code Platforms for Software Development
Compliance regulations in fintech: What to consider when making a fintech app
How to Plan, Make & Monetize a Recipe App: From Idea to MVP
How Much Does it Cost to Develop a Mobile Banking App?
How to create a mobile payment app: popular features and major challenges
Customised Logistics Software Development: Why, How & How Much?
Personal Finance App Development: Steps to Make a Budget App
Cryptocurrency Exchange Software Development: From Zero to Hero