How to Increase Mobile App Development Efficiency Using Cross-Platform Frameworks: Flutter, React Native and Xamarin.

A BrightTALK presentation about cross-platform mobile development.

Transcript

1. How to Increase Mobile App Development Efficiency using Cross-Platform Frameworks: Flutter, React and Xamarin Flutter Xamarin React Native @TonyTekInsights Tony Rivera
2. @TonyTekInsights Tony Rivera Cross-Platform Mobile, Cloud & Web Sr Developer Bilingual YouTube Digital Content Creator +20yr of experience in C#, Java, JavaScript, Dart, more. Ex-Microsoft Developer, Azure & Xamarin Mobile Specialist Email: Tony@TonyTekInsights.com Web: https://www.TonyTekInsights.com YouTube: https://www.youtube.com/TonyTekInsights Twitter: @TonyTekInsights
3. So you want a Mobile App? • What Platform? iOS vs Android? Both? • What Development Language? • If iOS: Objective-C vs Swift? Both? • If Android: Java vs Kotlin? Both? • Do I have the resources/skills in my team? • Budget? • Source Control? • Testing? • Deployments? • Code Maintainability
4. How About Single Code Base? • What Development Language? • Depends on Person/Team Skills: • C# • JavaScript • Dart (similar to Kotlin) • Do I have the resources/skills in my team? Very Possible! • Budget? • Source Control? • Testing? • Deployments? • Code Maintainability • What Platform? Both!
5. 2018 Cross-Platform Mobile Development Product Xamarin React-Native Flutter Company Microsoft Facebook Google Language C# JavaScript Dart Platforms iOS, Android, UWP, others. iOS, Android, iOS, Android IDE Visual Studio, Visual Studio for Mac, Rider IntelliJ IDEA, Atom, WebStorm, Visual Studio Code IntelliJ IDEA, Android Studio, Visual Studio Code Compilation JIT (Just in Time) & AOT (Ahead of Time). JIT not possible with iOS. AOT compiled code runs faster. Android defaults to JIT. JS code is being interpreted at runtime. JavaScriptCore. AOT (Ahead of Time). Hot Reload LiveXAML, Xamarin Live Player Included Included
6. 2018 Cross-Platform Mobile Development Product Xamarin React-Native Flutter Framework MVVM Data-Binding. Can make more Reactive with the Reactive Extensions (Rx.NET). Use RxUI for advanced, composable, functional Reactive MVVM framework. Reactive Reactive Widgets Native Native Skia 2D graphics CI/CD Visual Studio App Center (combination of Xamarin Test Cloud and HockeyApp). Jenkins. TeamCity. Visual Studio App Center (combination of Xamarin Test Cloud and HockeyApp). Jenkins. TeamCity. CircleCI. Visual Studio App Center (with appcenter plugin for Flutter).
7. 2018 Cross-Platform Mobile Development Product Xamarin React-Native Flutter Pros The power of .Net framework and C#. Easy to learn XAML markup language. Performance close to native. Hot reload. Easy JavaScript development. Fast development. Fast builds. Hot reload. Simplify mobile UI development. Easy Dart language. Hot reload. Uses a Reactive framework. Because of the Skia 2D graphics, developed UI looks exactly the same across devices. Cons Slide delay supporting latest platform updates. JavaScript not as fast as native code (most times you won’t see difference). Still need native development for things like sensor, camera, etc. Still in Beta. Takes a bit of time to get comfortable to the layouts and box containers. Not widely support by CI platforms.
8. Xamarin
9. Xamarin Traditional
10. Xamarin Xamarin Forms
11. Xamarin Xamarin Forms – What’s Included? • Pages • Layouts • Controls • Navigation • Two-way data-binding • Dependency Service • Animation API • Messaging Center https://www.xamarin.com/
12. Xamarin Xamarin Forms XAML Previewer
13. Xamarin Xamarin Live Player
14. Xamarin iOS Simulator Remoting
15. Xamarin Demo
16. JavaScript ES6 React Native
17. Development IDE React Native
18. Hot Reloading React Native
19. What’s Included? https://facebook.github.io/react-native/ • Basic Components • User Interface • List Views • iOS-specific • Android-specific • Others React Native
20. Demo React Native
21. What’s Included? • Mobile-first 2D rendering engine with excellent support for text • React-style framework • Rich set of widgets for Android and iOS • APIs for unit and integration tests • Interop and plugin APIs to connect to the system and 3rd-party SDKs • Headless test runner for running tests on Windows, Linux, and Mac • Command-line tools for creating, building, testing, and compiling your apps Flutter https://flutter.io/
22. Flutter Everything is a Widget!
23. Dart Flutter
24. Hot Reloading Flutter
25. Demo Flutter
26. Visual Studio App Center Flutter React Native Xamarin
27. Questions Flutter React Native Xamarin
28. @TonyTekInsights Tony Rivera Email: Tony@TonyTekInsights.com Web: https://www.TonyTekInsights.com YouTube: https://www.youtube.com/TonyTekInsights Twitter: @TonyTekInsights GitHub: https://github.com/tonytekinsights Flutter Xamarin React Native