Creative Coding 11 - Why Native App Development Isn't Dead Yet

A brief explanation of native app development benefits/drawbacks compared to Flutter and React Native to understand why developers still use native development. This was presented at Creative Coding 11 - https://www.meetup.com/Creative-Coding-NYC/events/253172684/

Transcript

1. Why Native App
   Development Isn't Dead Yet
   Adam McNeilly - @AdamMc331
   @AdamMc331 1
   

   View Slide

2. Definitions
   @AdamMc331 2
   

   View Slide

3. Native Development
   Native applications are applications written for a
   specific platform using the corresponding tooling. This
   is done in Android Studio for Android, and Xcode for
   iOS.
   @AdamMc331 3
   

   View Slide

4. Cross Platform Development
   Cross platform applications are built using some
   development tool that allows you to write a single
   codebase that can run on both operating systems.
   @AdamMc331 4
   

   View Slide

5. Hybrid Applications
   Hybrid applications contain some portions of native
   application code that run alongside some cross platform
   features.
   @AdamMc331 5
   

   View Slide

6. Native Application Benefits
   @AdamMc331 6
   

   View Slide

7. Native Application Benefits
   1. Fully supported by the corresponding platform
   @AdamMc331 6
   

   View Slide

8. Native Application Benefits
   1. Fully supported by the corresponding platform
   2. Better performance in both speed and memory
   @AdamMc331 6
   

   View Slide

9. Native Application Drawbacks
   @AdamMc331 7
   

   View Slide

10. Native Application Drawbacks
    1. Must manage two codebases
    @AdamMc331 7
    

    View Slide

11. Native Application Drawbacks
    1. Must manage two codebases
    2. Twice the development time
    @AdamMc331 7
    

    View Slide

12. Native Application Drawbacks
    1. Must manage two codebases
    2. Twice the development time
    3. Costs more money
    @AdamMc331 7
    

    View Slide

13. Cutting Down On
    Development Time
    @AdamMc331 8
    

    View Slide

14. Cross Platform Application Benefits
    @AdamMc331 9
    

    View Slide

15. Cross Platform Application Benefits
    1. Can manage one codebase
    @AdamMc331 9
    

    View Slide

16. Cross Platform Application Benefits
    1. Can manage one codebase
    2. Less development time
    @AdamMc331 9
    

    View Slide

17. Cross Platform Application Benefits
    1. Can manage one codebase
    2. Less development time
    3. Costs less money
    @AdamMc331 9
    

    View Slide

18. Cross Platform History
    @AdamMc331 10
    

    View Slide

19. Cross Platform History
    — First attempts used webviews
    @AdamMc331 10
    

    View Slide

20. Cross Platform History
    — First attempts used webviews
    — Webviews are components that display websites
    @AdamMc331 10
    

    View Slide

21. Cross Platform History
    — First attempts used webviews
    — Webviews are components that display websites
    — Webviews need a "bridge" to interract with the
    platform
    @AdamMc331 10
    

    View Slide

22. Cross Platform History
    — First attempts used webviews
    — Webviews are components that display websites
    — Webviews need a "bridge" to interract with the
    platform
    — This is slow
    @AdamMc331 10
    

    View Slide

23. Understanding Cross Platform Drawbacks
    To understand the drawbacks of cross platform
    development today, let's look at two common tools:
    @AdamMc331 11
    

    View Slide

24. Understanding Cross Platform Drawbacks
    To understand the drawbacks of cross platform
    development today, let's look at two common tools:
    1. React Native
    @AdamMc331 11
    

    View Slide

25. Understanding Cross Platform Drawbacks
    To understand the drawbacks of cross platform
    development today, let's look at two common tools:
    1. React Native
    2. Flutter
    @AdamMc331 11
    

    View Slide

26. React Native
    @AdamMc331 12
    

    View Slide

27. React Native
    Build native mobile apps using JavaScript and React1.
    1 https://facebook.github.io/react-native/
    @AdamMc331 13
    

    View Slide

28. React Native
    @AdamMc331 14
    

    View Slide

29. React Native
    1. Written in JavaScript, but with a native UI
    @AdamMc331 14
    

    View Slide

30. React Native
    1. Written in JavaScript, but with a native UI
    2. We have two realms: native and JavaScript
    @AdamMc331 14
    

    View Slide

31. React Native
    1. Written in JavaScript, but with a native UI
    2. We have two realms: native and JavaScript
    3. Realms must communicate over the bridge
    @AdamMc331 14
    

    View Slide

32. React Native
    1. Written in JavaScript, but with a native UI
    2. We have two realms: native and JavaScript
    3. Realms must communicate over the bridge
    4. This is slow
    @AdamMc331 14
    

    View Slide

33. React Native
    Here lies one of the main keys to understanding React
    Native performance. Each realm by itself is blazingly
    fast. The performance bottleneck often occurs when we
    move from one realm to the other. In order to architect
    performant React Native apps, we must keep passes
    over the bridge to a minimum2.
    — Tal Kol
    2 https://medium.com/@talkol/performance-limitations-of-react-native-and-how-to-overcome-them-947630d7f440
    @AdamMc331 15
    

    View Slide

34. React Native Case Studies
    1. React Native at Airbnb
    2. React Native: A retrospective from the mobile-
    engineering team at Udacity
    @AdamMc331 16
    

    View Slide

35. Giving Credit To React Native
    @AdamMc331 17
    

    View Slide

36. Giving Credit To React Native
    1. Iterate quickly
    @AdamMc331 17
    

    View Slide

37. Giving Credit To React Native
    1. Iterate quickly
    2. Opportunity for shared code
    @AdamMc331 17
    

    View Slide

38. Giving Credit To React Native
    1. Iterate quickly
    2. Opportunity for shared code
    3. Amazing community support
    @AdamMc331 17
    

    View Slide

39. Flutter
    @AdamMc331 18
    

    View Slide

40. Flutter is Google’s mobile app
    SDK for crafting high-quality
    native interfaces on iOS and
    Android in record time3.
    3 https://flutter.io
    @AdamMc331 19
    

    View Slide

41. How Flutter Works
    @AdamMc331 20
    

    View Slide

42. How Flutter Works
    1. Flutter draws a blank canvas on the device
    @AdamMc331 20
    

    View Slide

43. How Flutter Works
    1. Flutter draws a blank canvas on the device
    2. Flutter rendering engine draws the app on top of that
    @AdamMc331 20
    

    View Slide

44. How Flutter Works
    1. Flutter draws a blank canvas on the device
    2. Flutter rendering engine draws the app on top of that
    3. Flutter rendering engine is really fast
    @AdamMc331 20
    

    View Slide

45. Flutter
    The fact that Flutter is the only mobile SDK that
    provides reactive views without requiring a JavaScript
    bridge should be enough to make Flutter interesting
    and worth trying...4
    4 https://hackernoon.com/whats-revolutionary-about-flutter-946915b09514
    @AdamMc331 21
    

    View Slide

46. Flutter Drawbacks
    @AdamMc331 22
    

    View Slide

47. Flutter Drawbacks
    — Rendering engine has to ship with the APK/IPA
    bundle
    @AdamMc331 22
    

    View Slide

48. Flutter Drawbacks
    — Rendering engine has to ship with the APK/IPA
    bundle
    — This means large downloads
    @AdamMc331 22
    

    View Slide

49. Flutter Case Studies
    @AdamMc331 23
    

    View Slide

50. Flutter Case Studies
    1. Rise Up! — The story of how the Hamilton App uses
    Flutter to do more for its fans.
    @AdamMc331 23
    

    View Slide

51. Flutter Case Studies
    1. Rise Up! — The story of how the Hamilton App uses
    Flutter to do more for its fans.
    2. Flutter Showcase
    @AdamMc331 23
    

    View Slide

52. Giving Credit To Flutter
    @AdamMc331 24
    

    View Slide

53. Giving Credit To Flutter
    1. Iterate quickly
    @AdamMc331 24
    

    View Slide

54. Giving Credit To Flutter
    1. Iterate quickly
    2. Write once, runs on both platforms
    @AdamMc331 24
    

    View Slide

55. Giving Credit To Flutter
    1. Iterate quickly
    2. Write once, runs on both platforms
    3. Amazing community support
    @AdamMc331 24
    

    View Slide

56. Quick Recap
    @AdamMc331 25
    

    View Slide

57. Quick Recap
    1. Single codebase - sounds nice, not always practical
    @AdamMc331 25
    

    View Slide

58. Quick Recap
    1. Single codebase - sounds nice, not always practical
    2. React Native brings great benefits, but is slow
    @AdamMc331 25
    

    View Slide

59. Quick Recap
    1. Single codebase - sounds nice, not always practical
    2. React Native brings great benefits, but is slow
    3. Flutter brings great benefits, but has overhead
    @AdamMc331 25
    

    View Slide

60. Why Native App
    Development Isn't Dead Yet
    @AdamMc331 26
    

    View Slide

61. Sooner than we think,
    multiplatform developers will be
    on very high demand5.
    — Jorge Coca, BMW
    5 https://speakerdeck.com/jorgecoca/let-swift-equals-equals-val-kotlin-why-ios-is-so-important-for-android-and-vice-versa?
    slide=27
    @AdamMc331 27
    

    View Slide

62. Looking Forward
    @AdamMc331 28
    

    View Slide

63. Looking Forward
    1. Need increased performance
    @AdamMc331 28
    

    View Slide

64. Looking Forward
    1. Need increased performance
    2. Need smaller APK sizes
    @AdamMc331 28
    

    View Slide

65. Looking Forward
    1. Need increased performance
    2. Need smaller APK sizes
    3. Need less stubborn native devs
    @AdamMc331 28
    

    View Slide

66. Looking Forward
    1. Need increased performance
    2. Need smaller APK sizes
    3. Need less stubborn native devs
    4. Need a migration plan
    @AdamMc331 28
    

    View Slide

67. My Take
    @AdamMc331 29
    

    View Slide

68. My Take
    — Cross platform is great for getting running quickly,
    especially if you don't have the resources or expertise
    for both platforms
    @AdamMc331 29
    

    View Slide

69. My Take
    — Cross platform is great for getting running quickly,
    especially if you don't have the resources or expertise
    for both platforms
    — Performance and reliability of native development is
    difficult to turn away from
    @AdamMc331 29
    

    View Slide

70. My Take
    — Cross platform is great for getting running quickly,
    especially if you don't have the resources or expertise
    for both platforms
    — Performance and reliability of native development is
    difficult to turn away from
    — BUT someday cross platform tools are going to catch
    up
    @AdamMc331 29
    

    View Slide

71. My Take
    @AdamMc331 30
    

    View Slide