Flutter vs Xamarin vs React Native vs PhoneGap

Overview:  As a solution architect and CTO I need to choose the right approach to help our clients select the correct technology and approach to delivering solutions.

Flutter vs React Native vs Xamarin

My History of Building Mobile Applications:

• Originally, building mobile apps required building two code bases generally for Android and iOS in their own language.  Xamarin also allows you to write in C# for a specific platform.
• Next came a single code base that compiled down into each native platform (Droid and iOS), then we would customize for each platform.
• I like Xamarin Forms as I want native apps with a single code base (C#).  One can also write separate code bases for each of the 2 main mobile platforms. 
• React Native is built using Facebook's ReactJS library.  React Native like Xamarin Forms uses a single code base that compiles a iOS and a Android app.

• Note: An alternative around this time was to use HTML5 with PhoneGap and deploy to both mobile platforms, native controls could be used but this was once again a split in the code base.

• Flutter is the newest of the options.  Flutter is from Google and uses it's own DART language, it then can be compiled into various formats including iOS and Android.  Flutter goes back to the single code base that pushes native apps to multiple platforms.  Including the Web.  It is fast, looks good, great native interaction.

More Info: 

Flutter vs React Native - 

Alex Zubkov - 6Aug 2020

Basics of Flutter

Overview:  Flutter is a UI toolkit built by Google used to create native mobile applications (and web sites (Hummingbird)) using a single code base.  Historically, I have tried to keep a single code base in the front end using Angular, KO or ReactJS for my websites and used PhoneGap to build pseudo native apps on Android and iOS.  This allows me to have a single code base and also deploy to Droid and iOS with minor tweaks on PhoneGap.

Tips:

• There is a Flutter add-in for Visual Studio Code.
• Flutter uses "Dart" as it's programming language.
• Dart is a strongly types object orientated language that compiles into JavaScript for websites, and "natively" for iOS and Droid.
• Also can compile code for native Windows, Mac, Chromebook.
• Everything is a Widget (layout widget, elements e.g. image, text, or a gesture widget (listens for actions like a tap)),
• Add widget together to make a custom widget,
• Widgets are either stateless e.g. picture or stateful e.g. textbox
• import the material.dart to provide basic building blocks

The more I see of Flutter, the more I like it.  It is quick to build mobile apps and looks fantastic.

Cons:

• Pretty new & hard to find skills
• Slightly bloated on a native app - not noticeable to end users

Basic Environment setup:

1. Surface Windows 10 Pro
2. Visual Studio Code
3. Flutter SDK
4. Android emulator (I didn't setup iOS)
5. Android device to load the package to try it out on a phone

Emulator Running using Flutter

UI and Framework Notes

Assumed/Common Framework:
jQuery
Knockout vs Angular vs Backbone -
Modenrizr.js - detect browser capability
underscore - utility functions for arrays and collections.  Feels like LINQ queries
toastr - toast notifications

Data Access Modules:
1.> data.js - manage OData client access for JavaScript (supports caching & batch operations)
2.> Breeze.js - entity modelling and querying (ORM for JS.  Backend transformed to a data object i.e. 3 related customer tables becomes the customer object). Looks like LINQ queries.  Data.js is inside of breeze.

Presentation / App Pattern:
Knockout.js - (MVVM), declarative binding and dependency tracking.  Matches data to front end, then track changes and update.   Easy to use and understand.
Angular.js - MVC data binding,routing (url controls pages).
Compare: Knockout (good for SPAs) for more complex application whereas knockout is more light weight.

Responsive Web Design (RWD):
LESS - Minimises css, makes it simple to read not repeating attributes.
Bootstrap.js / Zurb Foundation 4 - Media queries to style for the device based on 12 column layouts.
Framework for cross cutting concerns (logging, caching,)....

Progressive Web Apps (PWA):

"Progressive Web Apps allow what you build to be installed by anyone, anywhere, on any device with a single codebase"

Flutter:  

Created by Google that uses DART .  Build once and HTML deploy for browser UI needs to be responsive.  Separate deployable code for Android and iOS, so PWA compliant.

PWA/RWD UI 3 break points:

• Desktop: 1024+ 
• Tablet: 600-1023
• Mobile: 320-599

Useful JS modules:

JS Mapping module:

http://jvectormap.com/