Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Cross-Platform	Mobile	App	Development	with
Flutter	– Xamarin – React	Native:
A	Performance	Focused	Comparison
Korhan	Birca...
Agenda
iOS Summit 2017
• Flutter
o Demo
o Developer	Experience
o Performance
• Xamarin
o Demo	
o Developer	Experience
o Pe...
Which	iOS	app	was	not	developed	in	Swift?		
iOS Summit 2017 3
Flutter
Flutter - Overview
• What	is	it?
• What	does	it	do?
• What	makes	it	unique?
4
Demo
Flutter - Demo 5
Architecture
Flutter 6
Writing	custom	platform-specific	code
Flutter - Architecture 7
Flutter - Architecture 8
Flutter - Developer Experience
https://dartpad.dartlang.org/5b313184d241da80532f9a598684e146
9
Flutter - Developer Experience 10
Flutter - Developer Experience 11
iOS	App	Binary	Size
Flutter – Performance 12
Flutter – CPU Performance 13
Flutter – GPU Performance
• Initializing	application's	address	space	and	
dynamic	linking	required	frameworks	took	
1.05	s...
Flutter – Memory Usage 15
Flutter – Memory Usage 16
Flutter – Memory Usage 17
Xamarin
Xamarin - Overview
• What	is	it?
• What	does	it	do?
• What	makes	it	unique?
18
Xamarin - Overview 19
Xamarin – iOS Architecture
https://developer.xamarin.com/guides/ios/under_the_hood/architecture
20
Xamarin – Android Architecture
https://developer.xamarin.com/guides/android/under_the_hood/architecture
21
C#
Xamarin - Overview
// Check out https://www.microsoft.com/net/tutorials/csharp/getting-
started for the comprehensive t...
Xamarin – Developer Experience 23
Xamarin – Developer Experience 24
Xamarin – Developer Experience 25
Xamarin – Developer Experience 26
Xamarin
Demo
27
Binary	Size
Xamarin – Performance
LazyTableImages 17MB
mscorlib.aotdata.armv7
mscorlib.dll
System.Xml.aotdata.armv7
28
iOS Summit 2017 29
Xamarin – Performance 30
Xamarin – CPU Performance 31
Xamarin – GPU Performance
• 3.20	s	Initializing	application's	address	space	
and	dynamic	linking	required	frameworks	
took...
Xamarin – Memory Usage 33
Xamarin – Memory Usage 34
React	Native
React Native - Overview
• What	is	it?
• What	does	it	do?
• What	makes	it	unique?
35
Demo
React Native 36
Architecture
React Native
class HelloMessage extends React.Component {
render() {
return <div>Hello {this.props.name}</div...
React Native - Architecture
React	Native:	Inder the	Hood,	Alexander	Kotliarsky
38
React Native 39
JavaScript
// Lack of function signature.
var foo = 'im a number'
function divideByFour(number) {
return number / 4
}
cons...
JavaScript
// No support for decimals.
console.log(0.1 + 0.2) //0.30000000000000004
console.log(0.1 + 0.2 === 0.3) //false...
Worth	mentioning…
42
JavaScript
https://arielelkin.github.io/articles/why-im-not-a-react-native-developer.html
43
React Native – Binary Size
libReact.a
libcxxreact.a
App	binary
Libthird-party.a
44
React Native – CPU Performance 45
React Native – CPU Performance 46
React Native – GPU Performance
• Initializing	application's	address	space	and	
dynamic	linking	required	frameworks	took	
2...
React Native – Memory Usage 48
React Native – Memory Usage 49
The	Computer	Language	Benchmarks	Game
Comparison
http://benchmarksgame.alioth.debian.org/u64q/mandelbrot.html
Plot	the	Man...
Comparison
Comparison
Flutter Xamarin React	Native
Portability ✓
51
Comparison
Comparison
Flutter Xamarin React	Native
Portability ✓
Binary Size ✓
52
Comparison
Comparison
Flutter Xamarin React	Native
Portability ✓
Binary Size ✓
CPU Usage ✓
53
Comparison
Comparison
Flutter Xamarin React	Native
Portability ✓
Binary Size ✓
CPU Usage ✓
GPU	Usage ✓
54
Comparison
Comparison
Flutter Xamarin React	Native
Portability ✓
Binary Size ✓
CPU Usage ✓
GPU	Usage ✓
Memory	Usage ✓
55
Comparison
Comparison
Flutter Xamarin React	Native
Portability ✓
Binary Size ✓
CPU Usage ✓
GPU	Usage ✓
Memory	Usage ✓
Dev	...
Comparison
Comparison
Flutter Xamarin React	Native
Portability ✓
Binary Size ✓
CPU Usage ✓
GPU	Usage ✓
Memory	Usage ✓
Dev	...
Comparison
Comparison
Flutter Xamarin React	Native
Portability ✓
Binary Size ✓
CPU Usage ✓
GPU	Usage ✓
Memory	Usage ✓
Dev	...
Comparison
Comparison
Flutter Xamarin React	Native
Portability ✓
Binary Size ✓
CPU Usage ✓
GPU	Usage ✓
Memory	Usage ✓
Dev	...
Comparison
Comparison
Flutter Xamarin React	Native Swift
Portability ✓
Binary Size ✓
CPU Usage ✓
GPU	Usage ✓
Memory	Usage ...
Conclusion
iOS Summit 2017
• Portability
• Productivity
• Safety
• Performance
• Fidelity
• Longevity
61
Q&A
iOS Summit 2017
• https://flutter.io
• Flutter	System	Architecture:	https://goo.gl/cAXt9R
• https://www.xamarin.com
• ...
Upcoming SlideShare
Loading in …5
×

Cross-Platform App Development with Flutter, Xamarin, React Native

7,606 views

Published on

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.

Published in: Engineering
  • The #1 Woodworking Resource With Over 16,000 Plans, Download 50 FREE Plans... ✤✤✤ https://t.cn/A62Ye5eM
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Free Shed Plans, 12000 SHED PLANS. FREE SHED PLANS CLICK HERE ➤➤ https://url.cn/15NhsAEL
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • The #1 Woodworking Resource With Over 16,000 Plans, Download 50 FREE Plans... ●●● http://t.cn/A6hKZsXN
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • It's a shame you didn't mention our solution (Codename One) which offers pretty much everything fluttr has plus a lot more and is based on Java or Kotlin.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Cross-Platform App Development with Flutter, Xamarin, React Native

  1. 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. 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. 3. Which iOS app was not developed in Swift? iOS Summit 2017 3
  4. 4. Flutter Flutter - Overview • What is it? • What does it do? • What makes it unique? 4
  5. 5. Demo Flutter - Demo 5
  6. 6. Architecture Flutter 6
  7. 7. Writing custom platform-specific code Flutter - Architecture 7
  8. 8. Flutter - Architecture 8
  9. 9. Flutter - Developer Experience https://dartpad.dartlang.org/5b313184d241da80532f9a598684e146 9
  10. 10. Flutter - Developer Experience 10
  11. 11. Flutter - Developer Experience 11
  12. 12. iOS App Binary Size Flutter – Performance 12
  13. 13. Flutter – CPU Performance 13
  14. 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. 15. Flutter – Memory Usage 15
  16. 16. Flutter – Memory Usage 16
  17. 17. Flutter – Memory Usage 17
  18. 18. Xamarin Xamarin - Overview • What is it? • What does it do? • What makes it unique? 18
  19. 19. Xamarin - Overview 19
  20. 20. Xamarin – iOS Architecture https://developer.xamarin.com/guides/ios/under_the_hood/architecture 20
  21. 21. Xamarin – Android Architecture https://developer.xamarin.com/guides/android/under_the_hood/architecture 21
  22. 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. 23. Xamarin – Developer Experience 23
  24. 24. Xamarin – Developer Experience 24
  25. 25. Xamarin – Developer Experience 25
  26. 26. Xamarin – Developer Experience 26
  27. 27. Xamarin Demo 27
  28. 28. Binary Size Xamarin – Performance LazyTableImages 17MB mscorlib.aotdata.armv7 mscorlib.dll System.Xml.aotdata.armv7 28
  29. 29. iOS Summit 2017 29
  30. 30. Xamarin – Performance 30
  31. 31. Xamarin – CPU Performance 31
  32. 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. 33. Xamarin – Memory Usage 33
  34. 34. Xamarin – Memory Usage 34
  35. 35. React Native React Native - Overview • What is it? • What does it do? • What makes it unique? 35
  36. 36. Demo React Native 36
  37. 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. 38. React Native - Architecture React Native: Inder the Hood, Alexander Kotliarsky 38
  39. 39. React Native 39
  40. 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. 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. 42. Worth mentioning… 42
  43. 43. JavaScript https://arielelkin.github.io/articles/why-im-not-a-react-native-developer.html 43
  44. 44. React Native – Binary Size libReact.a libcxxreact.a App binary Libthird-party.a 44
  45. 45. React Native – CPU Performance 45
  46. 46. React Native – CPU Performance 46
  47. 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. 48. React Native – Memory Usage 48
  49. 49. React Native – Memory Usage 49
  50. 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. 51. Comparison Comparison Flutter Xamarin React Native Portability ✓ 51
  52. 52. Comparison Comparison Flutter Xamarin React Native Portability ✓ Binary Size ✓ 52
  53. 53. Comparison Comparison Flutter Xamarin React Native Portability ✓ Binary Size ✓ CPU Usage ✓ 53
  54. 54. Comparison Comparison Flutter Xamarin React Native Portability ✓ Binary Size ✓ CPU Usage ✓ GPU Usage ✓ 54
  55. 55. Comparison Comparison Flutter Xamarin React Native Portability ✓ Binary Size ✓ CPU Usage ✓ GPU Usage ✓ Memory Usage ✓ 55
  56. 56. Comparison Comparison Flutter Xamarin React Native Portability ✓ Binary Size ✓ CPU Usage ✓ GPU Usage ✓ Memory Usage ✓ Dev Experience ✓ 56
  57. 57. Comparison Comparison Flutter Xamarin React Native Portability ✓ Binary Size ✓ CPU Usage ✓ GPU Usage ✓ Memory Usage ✓ Dev Experience ✓ Production Readiness ✓ 57
  58. 58. Comparison Comparison Flutter Xamarin React Native Portability ✓ Binary Size ✓ CPU Usage ✓ GPU Usage ✓ Memory Usage ✓ Dev Experience ✓ Production Readiness ✓ Native Feel ✓ 58
  59. 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. 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. 61. Conclusion iOS Summit 2017 • Portability • Productivity • Safety • Performance • Fidelity • Longevity 61
  62. 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

×