Mobile Development Approaches and Flutter Architecture: FLUTTER PART-I

When it comes to developing mobile applications, one major issue is to decide what all operating systems should the application support. Majority of applications stick to just Android and IOS because of their unprecedented market share in Mobile OS.

Second major issue is to decide the approach while developing the application for both platforms. Listed below are few such approaches:

1. Single Platform — Native Application
2. Multiple Platform — Hybrid or Native Applications

Single Platform : Every operating system comes with its own set of SDKs to develop application with quick response time, graphic performance and Native service support ( Location, Cellular, Camera, Sensors, Bluetooth etc.).

#IOS and Android Development Stack

Pros: Fast, responsive, continuous support and wide variety of features in SDKs

Cons: When a product is present on more than one platform, maintaining two different codebase, respective developers and synchronising features across applications becomes a bottle neck in most setups.

OEM SDKs — Direct integration to Native features of OS

Multiple Platform : When supporting multiple platforms with the unified style and codebase, we come across plethora of options listed below :

1. Hybrid Application: These are web applications (or web pages) in the native browser, such as UIWebView in iOS and WebView in Android (not Safari or Chrome). Hybrid apps are developed using HTML, CSS and Javascript, and then wrapped in a native application using platforms like Cordova, Ionic, PhoneGap etc.
2. Cross-Platform Applications: These are types of software application that work on multiple operating systems or devices, which are often referred to as platforms. A platform means an operating system such as Windows, Mac OS, Android or iOS.

Hybrid approach.

Pros: Continuous integration like a web application where any changes to the application can be deployed as and when required. The same application can be used on web platform.

Cons: It uses native browser which is relatively slower and results in bad user experience due to the bottlenecks it comes with. Its also uses a BRIDGE to interact with native services that is even slower.

Cross-Platform Approach.

Pros: Relatively faster than Hybrid approach and uses OEM widgets which imparts better user experience.

Cons: Uses a bridge to excess OEM UI elements and services which are slower.

To solve few of the bottlenecks faced in fore-mentioned approaches, Flutter comes to our rescue, checking most boxes and giving us good reasons to choose it as a framework for cross-platform mobile application development.

To start with, the first real advantage of using flutter is that it’s fast. The whole intent behind launching it was to provide fluid user interface at 120fps. Its eliminates the need of bridge to render views as it comes with its own Flutter engine(c++) to render views.

Secondly it offers plethora of platform specific design elements and user experience out of the box; native to Android and IOS.

Pros: Speed, performance, flexibility, native look and feel, rapid development.

Cons: Its relatively new in comparison to other options in the list. The apk/ipa size is relatively large as it is shipped with the native code, the render engine and platform channel which is a problem for all cross-platform application approach.

All we can ask for will be delivered by Flutter in times to come when it is launched via stable channel. Even though its alpha version was launched in 2015, the beta build for the same has recently been release in 2018 Google I/O.

Google introduced the first version of Flutter in 2015 (at Dart Developer summit) with the name ‘Sky’. The intent behind creating an open-sourced mobile application development SDK was to provide an engine that can consistently give 120fps render frame rates. It initially supported Android alone.

Flutter Architecture

Flutter comprises mainly of four components :

1. Flutter Engine : It is primarily based on C++ language and is used to render low level graphics using Google’s open source graphic library Skia.
2. Foundation Library: All the basic building blocks for writing a Flutter application are packaged under this and written in Dart.
3. Widgets: A widget in Flutter represents an immutable description of part of the user interface; all graphics, including text, shapes, and animations are created using widgets.
4. Design Specific Widgets: The Flutter framework contains two sets of widgets which conform to specific design languages namely Material Design for Android Side and Cupertino Style for IOS side.

Skia graphic engine is an open sourced project is used in Google Chrome, Chrome OS, Chromium OS, Mozilla Firefox, Android (although partially superseded by HWUI starting with Android), Firefox OS, Flutter and Sublime Text 3.

Skia has a conventional CPU-based path renderer but has recently integrated a new OpenGL ES2-accelerated back-end called Ganesh. Ganesh has experimented with two accelerated approaches. The first used the stencil buffer to render paths. Because of API overheads with this approach, this first approach was replaced with a second approach where the CPU-based rasteriser computes a coverage mask which is loaded as a texture upon every path draw to provide the GPU proper antialiased coverage. This hybrid scheme is often bottlenecked by the dynamic texture updates required for every rendered path.

Who uses flutter?

1. Fuchsia: A capability-based, real-time operating system (RTOS) currently being developed by Google.
2. Google AdWords
3. AdSense performance reports
4. Mandrill
5. Google internal CRM
6. Google Fiber
7. Adobe
8. Many others : LINK

Now that we have established the advantages and difference in different approaches; we will start to discuss on how to jump into flutter and make awesome looking fluid application in the series of articles mentioned below:

1. Flutter architecture and Mobile development approaches.
2. Basics of Dart programming.
3. Flutter Introduction.
4. Flutter Components I
5. Flutter Components II
6. Flutter Essential Libraries.
7. Flutter and Firebase.
8. Animations in Flutter.