Introduction to mobile cross platform solutions(Xamarin vs React Native vs Flutter)
2 likes376 views
The document discusses mobile cross-platform solutions, covering main options, their pros and cons, and considerations for adoption. It highlights industry trends, user experience, developer challenges, and the performance of various frameworks like React Native and Flutter. The conclusion suggests cross-platform development may be the future despite some existing challenges and risks.
Introduction to mobile cross platform solutions(Xamarin vs React Native vs Flutter)
- 2. ©2017 Aptus Health | 2 • Main stream cross platform solutions • Pros & Cons of each solution • Should we consider adopting a cross-platform solution ? AGENDA What we will cover today
- 3. ©2017 Aptus Health | 3
- 4. ©2017 Aptus Health | 4 BIG PLAYERS
- 5. ©2017 Aptus Health | 5 Trends
- 6. ©2017 Aptus Health | 6 Listen to the industry
- 7. ©2017 Aptus Health | 7 Listen to the industry
- 8. ©2017 Aptus Health | 8 Listen to the industry
- 9. ©2017 Aptus Health | 9 UX MATTERS Native UI widgets Simulated UI widgets
- 10. ©2017 Aptus Health | 10 • Sounds good with the word `native` • Look & feel is the same as the native app • Easy to respect platform design guidelines Native UI widgets
- 11. ©2017 Aptus Health | 11 • Need bridging system to connect with native widgets (can cause strange bugs) • Performance limited by native component or the bridging • Have the same bugs as the native widget Native UI widgets
- 12. ©2017 Aptus Health | 12 Simulated Material design widgets
- 13. ©2017 Aptus Health | 13 Simulated Material design widgets
- 14. ©2017 Aptus Health | 14 Simulated Material design widgets
- 15. ©2017 Aptus Health | 15 Simulated iOS flat design widgets
- 16. ©2017 Aptus Health | 16 • No dependency on the native UI widgets (no bugs or performance issue cause by bridging) • No bugs from native widget • Easy to unify the UX of different platforms Simulated widgets
- 17. ©2017 Aptus Health | 17 • Have bugs caused by immaturity of simulated widget • Cannot make use of new native widget immediately Simulated widgets
- 18. ©2017 Aptus Health | 18 • Compiled into ARM lib Ahead-Of-Time(AOT) • Close to native Performance • Acceptable • Performance bottlenecks in animations are caused by heavy workloads on JavaScript threads (lagging animations) • Need some seconds to initialize
- 19. ©2017 Aptus Health | 19 DEVELOPER EXPERIENCE MATTERS
- 20. ©2017 Aptus Health | 20 Pros • Fantastic Hot-reload • Compose UI with codes • Easier to reuse UI components Cons: • React Native has problems in inconsistence of Javascript Core Development speed Pros: • Have GUIs to compose UI Cons: • Compilation takes 10s – 60s • Maintenance of two code bases
- 21. ©2017 Aptus Health | 21 Pros: • Both C# & Dart are strong typed language. • Dart is 90% similar to Java. Learning Curve Pros: • Javascript is easiest to start mobile development. • Loved by Web developer & students. Cons: • iOS/Android developers generally don’t like Javascript. Cons: • Composing UI with codes • Need around 1 month to gain the same level skills as a good native developer.
- 22. ©2017 Aptus Health | 22 • Double the size of native app • Extremely hard to find Xamarin developer Project maintenance overheads
- 23. ©2017 Aptus Health | 23 Pros: • Easier to find react native developer Cons: • Need developer to set up tech stack (Javascript, Webpack, TypeScript, Babel, etc.), very complex for developers without a Web background • Adding a weight(7M ~10M) to the app Project maintenance overheads
- 24. ©2017 Aptus Health | 24 Pros: • Excellent IDE(Android studio) • Handy project management tools (Flutter doctor) • Come with unit/integration testing tools Cons: • Adding a weight(7M ~10M) to the app Project maintenance overheads
- 25. ©2017 Aptus Health | 25 Maturity - Since end of 2016 - 2 years - Since May 2017 - 1.5 years
- 26. ©2017 Aptus Health | 26 Listen to the industry Sunsetting React Native in Airbnb
- 27. ©2017 Aptus Health | 27 Listen to the industry Sunsetting React Native in Airbnb Despite of all its benefits, there are drawbacks that cannot be overcome… • Performance limits (initialization delay, frame-dropping, etc. ) • Too many bridging codes needed • Not moving faster compared to native dev
- 28. ©2017 Aptus Health | 28 Probably because of • Using simulated widget enables less dependencies on bridging code • Making no use of Javascript Core makes performance very close to native code is doing better ?
- 29. ©2017 Aptus Health | 29 • Developer gains the same or better development speed after 1st month. • 50% less code compared to native Swift • No notable performance issue Success story of migration from native iOS project to Flutter Read more: Porting a 75,000 line native iOS app to Flutter
- 30. ©2017 Aptus Health | 30 Risks
- 31. ©2017 Aptus Health | 31 RISKS Is App going to be accepted by App Store ? • Yes, many Flutter apps are already in the App Store. • For a very long time, App Store accepts Unity and WebView-based apps without problem.
- 32. ©2017 Aptus Health | 32 Probably because • Google has an untold plan to replace Android & Chrome OS with a new cross-platform OS called Fuchsia • To support this new OS, all Flutter apps are available on Fuchsia can be supported continuously by Google ?
- 33. ©2017 Aptus Health | 33 Should we adopt cross-platform development ?
- 34. ©2017 Aptus Health | 34 • Complexity on bridging with the native code • Overhead because of immaturity of cross- platform
- 35. ©2017 Aptus Health | 35 • 9 5 – 1 0 0 % s h a r e d c o d e • Wr i t i n g c o d e o n c e i n s t e a d o f t w o • U n i f i e d U I d e s i g n f o r A n d r o i d & i O S • Fa s t d e v e l o p m e n t s p e e d b e c a u s e o f h o t - r e l a o d • W h o l e t e a m h a v e t h e s a m e s k i l l s e t
- 36. ©2017 Aptus Health | 36 Cross-platform dev may be the future.