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