Previously, we have seen cross-platform solutions but they either compromised on performance or reaching design expectations. Google, Facebook, and Microsoft have been hard at work and I think they now have solutions that are worth taking another look. I want to explore three such popular frameworks: Flutter, Xamarin, and React Native, explain what they are, how they work, and compare them against each other with a focus on performance. My hope is that after reading this article, you are inspired enough to go check them out and know enough to formulate in your mind which technology could be the right choice for your needs.

1. Cross-Platform Mobile App Development with
Flutter – Xamarin – React Native:
A Performance Focused Comparison
Korhan Bircan, iOS Summit 2017
iOS Summit 2017 1

2. Agenda
iOS Summit 2017
• Flutter
o Demo
o Developer Experience
o Performance
• Xamarin
o Demo
o Developer Experience
o Performance
• React Native
o Demo
o Developer Experience
o Performance
• Comparison
2

3. Which iOS app was not developed in Swift?
iOS Summit 2017 3

4. Flutter
Flutter - Overview
• What is it?
• What does it do?
• What makes it unique?
4

5. Demo
Flutter - Demo 5

6. Architecture
Flutter 6

7. Writing custom platform-specific code
Flutter - Architecture 7

8. Flutter - Architecture 8

9. Flutter - Developer Experience
https://dartpad.dartlang.org/5b313184d241da80532f9a598684e146
9

10. Flutter - Developer Experience 10

11. Flutter - Developer Experience 11

12. iOS App Binary Size
Flutter – Performance 12

13. Flutter – CPU Performance 13

14. Flutter – GPU Performance
• Initializing application's address space and
dynamic linking required frameworks took
1.05 s.
• Application launched in 220.75 ms.
• ~58 fps.
14

15. Flutter – Memory Usage 15

16. Flutter – Memory Usage 16

17. Flutter – Memory Usage 17

18. Xamarin
Xamarin - Overview
• What is it?
• What does it do?
• What makes it unique?
18

19. Xamarin - Overview 19

20. Xamarin – iOS Architecture
https://developer.xamarin.com/guides/ios/under_the_hood/architecture
20

21. Xamarin – Android Architecture
https://developer.xamarin.com/guides/android/under_the_hood/architecture
21

22. C#
Xamarin - Overview
// Check out https://www.microsoft.com/net/tutorials/csharp/getting-
started for the comprehensive tutorial.
// Basic for loop.
for (int i = 0; i < 10; i++)
{
Console.WriteLine(i);
}
var myList = new List<string>() { "one", "two", "three" };
foreach (var item in myList)
{
Console.WriteLine(item);
}
// Holds 3 elements, with indexes of 0, 1, and 2.
int[] someIntegers = new int[3];
// Initializes the values of the array.
int[] moreIntegers = new int[] { 1, 2, 3, 4, 5 };
// You can omit `int` and just specify []; type is inferred.
int[] otherIntegers = new[] { 1, 3, 5, 7, 9 };
// Exception handling.
try
{
int sum = SumNumberStrings(new List<string> { "5", "4" });
Console.WriteLine(sum);
}
catch (System.FormatException)
{
Console.WriteLine("List of numbers contained an invalid entry.");
}
// Classes have members, which consist of methods, properties, and fields.
// You should rarely expose fields from your classes, and instead use propert
ies
// to control external access to your object's state.
public class Speedometer
{
private int _currentSpeed;
public int CurrentSpeed
{
get
{
return _currentSpeed;
}
set
{
if (value < 0) return;
if (value > 120) return;
// Value is a keyword used in setters representing the new value.
_currentSpeed = value;
}
}
}
22

23. Xamarin – Developer Experience 23

24. Xamarin – Developer Experience 24

25. Xamarin – Developer Experience 25

26. Xamarin – Developer Experience 26

27. Xamarin
Demo
27

28. Binary Size
Xamarin – Performance
LazyTableImages 17MB
mscorlib.aotdata.armv7
mscorlib.dll
System.Xml.aotdata.armv7
28

29. iOS Summit 2017 29

30. Xamarin – Performance 30

31. Xamarin – CPU Performance 31

32. Xamarin – GPU Performance
• 3.20 s Initializing application's address space
and dynamic linking required frameworks
took 3.20 s.
• 345.87 ms Application launched in 345.87 ms.
• ~53 fps .
32

33. Xamarin – Memory Usage 33

34. Xamarin – Memory Usage 34

35. React Native
React Native - Overview
• What is it?
• What does it do?
• What makes it unique?
35

36. Demo
React Native 36

37. Architecture
React Native
class HelloMessage extends React.Component {
render() {
return <div>Hello {this.props.name}</div>;
}
}
export default class HelloWorldApp extends Component {
render() {
return (<Text>Hello world!</Text>);
}
}
Browser DOMReact JS
React Native
Bridge
iOS
Android
Browser DOM
37

38. React Native - Architecture
React Native: Inder the Hood, Alexander Kotliarsky
38

39. React Native 39

40. JavaScript
// Lack of function signature.
var foo = 'im a number'
function divideByFour(number) {
return number / 4
}
console.log(divideByFour(foo)) //NaN
// Immutability support.
const array = [3, 6]
array[5] = 9
console.log(array) // [ 3, 6, , , , 9 ]
// Arrays don't have to contain same type of objects.
var array = [0, 1, 2]
array["hello"] = "world"
console.log(array) // [ 0, 1, 2, hello: 'world' ]
// Documentation suggests: It’s best to leave exceptions as a
last line of defense,
// for handling the exceptional errors you can’t anticipate,
and to manage anticipated
// errors with control flow statements.
function tenDividedBy(number) {
if (number == 0) {
throw "can't divide by zero"
}
return 10 / number
}
console.log(tenDividedBy(0))
/*
/temp/file.js:9
throw "can't divide by zero"
^
can't divide by zero
*/
JavaScript – Pain Points
40

41. JavaScript
// No support for decimals.
console.log(0.1 + 0.2) //0.30000000000000004
console.log(0.1 + 0.2 === 0.3) //false
// Confusing math operations.
var a = 0
var b = -0
console.log(a === b) // true
console.log(1/a === 1/b) // false
var x = Math.sqrt(-2)
console.log(x === NaN) //false
console.log(isNaN(x)) //true
console.log(isNaN('hello world')) //true
// Treatment of null and undefined is confusing:
var foo;
foo === null; //false
foo === undefined; //true
JavaScript – Pain Points
41

42. Worth mentioning…
42

43. JavaScript
https://arielelkin.github.io/articles/why-im-not-a-react-native-developer.html
43

44. React Native – Binary Size
libReact.a
libcxxreact.a
App binary
Libthird-party.a
44

45. React Native – CPU Performance 45

46. React Native – CPU Performance 46

47. React Native – GPU Performance
• Initializing application's address space and
dynamic linking required frameworks took
2.89 s.
• Application launched in 229.05 ms.
• ~57 fps.
47

48. React Native – Memory Usage 48

49. React Native – Memory Usage 49

50. The Computer Language Benchmarks Game
Comparison
http://benchmarksgame.alioth.debian.org/u64q/mandelbrot.html
Plot the Mandelbrot set [-1.5-i,0.5+i] on an
N-by-N bitmap. Write output byte-by-byte
in portable bitmap format.
Rank Language Time (s) Memory
1 C gcc #6 1.65 32,684
1 C++ g++ #6 1.73 34,064
2 Swift #3 3.32 41,532
3 Go #3 5.64 31,312
4 C# .NET Core #4 6.76 73,848
4 Java #2 7.1 90,588
11 Node.js 17.95 567,152
12 Dart 20.54 101,064
255 Ruby #5 420 69,656
291 PHP 480 8,688
436 Perl 720 45,540
50

51. Comparison
Comparison
Flutter Xamarin React Native
Portability ✓
51

52. Comparison
Comparison
Flutter Xamarin React Native
Portability ✓
Binary Size ✓
52

53. Comparison
Comparison
Flutter Xamarin React Native
Portability ✓
Binary Size ✓
CPU Usage ✓
53

54. Comparison
Comparison
Flutter Xamarin React Native
Portability ✓
Binary Size ✓
CPU Usage ✓
GPU Usage ✓
54

55. Comparison
Comparison
Flutter Xamarin React Native
Portability ✓
Binary Size ✓
CPU Usage ✓
GPU Usage ✓
Memory Usage ✓
55

56. Comparison
Comparison
Flutter Xamarin React Native
Portability ✓
Binary Size ✓
CPU Usage ✓
GPU Usage ✓
Memory Usage ✓
Dev Experience ✓
56

57. Comparison
Comparison
Flutter Xamarin React Native
Portability ✓
Binary Size ✓
CPU Usage ✓
GPU Usage ✓
Memory Usage ✓
Dev Experience ✓
Production
Readiness
✓
57

58. Comparison
Comparison
Flutter Xamarin React Native
Portability ✓
Binary Size ✓
CPU Usage ✓
GPU Usage ✓
Memory Usage ✓
Dev Experience ✓
Production
Readiness
✓
Native Feel ✓
58

59. Comparison
Comparison
Flutter Xamarin React Native
Portability ✓
Binary Size ✓
CPU Usage ✓
GPU Usage ✓
Memory Usage ✓
Dev Experience ✓
Production
Readiness
✓
Native Feel ✓
Longevity ? ? ?
59

60. Comparison
Comparison
Flutter Xamarin React Native Swift
Portability ✓
Binary Size ✓
CPU Usage ✓
GPU Usage ✓
Memory Usage ✓
Dev Experience ✓
Production
Readiness
✓
Native Feel ✓
Longevity ✓
60

61. Conclusion
iOS Summit 2017
• Portability
• Productivity
• Safety
• Performance
• Fidelity
• Longevity
61

62. Q&A
iOS Summit 2017
• https://flutter.io
• Flutter System Architecture: https://goo.gl/cAXt9R
• https://www.xamarin.com
• https://facebook.github.io/react
• https://facebook.github.io/react-native
• https://material.angular.io
• https://ionicframework.com
• https://www.nativescript.org
• https://www.typescriptlang.org
• https://cordova.apache.org
62