Successfully reported this slideshow.

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

12

Share

1 of 62
1 of 62

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

12

Share

Download to read offline

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.

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.

More Related Content

Related Books

Free with a 30 day trial from Scribd

See all

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

×