Кросс-платформенная мобильная разработка, Xamarin, ReactNative и прочее

1. / DP Labs

2. Артур
Дробинский
Ведущий архитектор
команды DP Labs
arturdr.ru
artur.drobinskiy@arturdr.ru

3. Зачем кросс-
платформенность?

4. Везде используем универсальный
инструмент

5. iOS Android
Core
Повторное использование кода

6. iOS
Android
Core
Повторное использование кода

7. iOS
Android
Core
Windows

8. Проще поддержка – исправляем баги один
раз

9. Дешевле!

10. Кросс-платформенные решения

12. How does it work?

13. Cross-platform code

14. Cross-platform code
Native .apk / .ipa / .exe (application package)

15. Cross-platform code
Native .apk / .ipa / .exe (application package)
UI, Native controls Native API

16. Cross-platform code
Native .apk / .ipa / .exe (application package)
UI, Native controls
API Bridge
Native API

18. PhoneGap

19. Code: JS
Native .apk / .ipa / .exe (application package)
UI: HTML
Limited API Bridge
Native API
PhoneGap
WebView

20. Qt

21. Code: C++/C#
Native .apk / .ipa / .exe (application package)
UI: QML/Game Engine
Limited API Bridge
Native API
Qt/Unity
View (Canvas)

22. Code: C#
Native .apk / .ipa / .exe (application package)
API Bridge
Native API
Xamarin
Native Controls

23. Code: V8, JS
Native .apk / .ipa / .exe (application package)
Limited API Bridge
Native API
React Native
JSX
Native Controls
API Bridge

24. Performance

25. 4.342
94.151
4.258
1
10
100
Java Cordova Xamarin
Android
5.014
67.291
4.349
1
10
100
Objective-C Cordova Xamarin
iOS
Математические вычисления

26. 0.551
1.117
0.601
0
0.2
0.4
0.6
0.8
1
1.2
Java Cordova Xamarin
Android
0.792
1.494
0.735
0
0.2
0.4
0.6
0.8
1
1.2
1.4
1.6
Objective-C Cordova Xamarin
iOS
SQLite: чтение данных

27. 1.044
4.068
1.689
3.032
0
0.5
1
1.5
2
2.5
3
3.5
4
4.5
Java Cordova Xamarin Xamarin.Forms
Android
1.14
6.21
1.204
1.928
0
1
2
3
4
5
6
7
Objective-C Cordova Xamarin Xamarin.Forms
iOS
Запуск приложения

28. 166
433
3500
4700
0
500
1000
1500
2000
2500
3000
3500
4000
4500
5000
Java Cordova Xamarin Xamarin.Forms
Android
644
2700
12100
16900
0
2000
4000
6000
8000
10000
12000
14000
16000
18000
Objective-C Cordova Xamarin Xamarin.Forms
iOS
Размер приложения

29. Xamarin React Native Phonegap

30. Xamarin React Native Phonegap

32. DEMO

33. React Native

34.  Hype
 Hot reloading + простое обновление приложений
 Javascript
 Встраивание в нативные приложения
Плюсы

35.  Breaking Changes
 Second class android support
 Javascript & TypeSafety
 Animations are slow (bridge)
 Неполная поддержка нативных контролов, ненативная
разметка
Минусы?

36. Xamarin
Xamarin Forms
React Native

37. Xamarin
Мифы или реальность?

38. Утечки памяти
и особенности Garbage Collection

39. UIKit.UIButton
(peer object)
UIButton
(native object)
API Bridge
Использование open-source контролов
Необходимо написание собственных API Bridge

40. На Xamarin нет приложений

41. easyJet Slack Credit Agricole

42. React Native 

43. https://www.xamarin.com/customers/

44.  Размер приложения (6MB+)
 Большее время запуска приложения
 Использование open-sourced controls требует
поиска/написания обёртки
Минусы Xamarin (и ReactNative)

45. Xamarin vs Native

46. Xamarin
 Сложные Enterprise
приложения
 Существующая команда
C# разработчиков
 Бэкенд на .NET
 Похожие экраны/workflow
на разных устройствах
Native
 Дублирование бизнес-логики
– не проблема (её мало)
 Команда с опытом на Obj-C и
Java
 Бэкенд на Java 
 Workflow на Android/iOS
радикально различный

47. Xamarin vs React Native

48. Xamarin
 Сложная бизнес логика
 C#-команда
 Использование всех
нативных возможностей
 Компиляция,
производительность
 UWP + Mac (+ Web)
 XAML + Native rendering +
Flexbox
React Native
 UI-heavy apps
 JS-команда
 Встраивание в нативные
приложения
 Быстрое обновление
(AppStore, Google Play)
 Задержка с новыми
фичами на платформах
(+ Web)
 Flexbox (but only flexbox)

49. Вопросы?
http://arturdr.ru
artur.drobinskiy@arturdr.ru

50. <ListView ItemsSource="{Binding MonkeysGrouped}"
ItemTapped="Handle_ItemTapped" ItemSelected="Handle_ItemSelected"
HasUnevenRows="true" GroupShortNameBinding = "{Binding Key}"
IsGroupingEnabled = "true" GroupDisplayBinding = "{Binding Key}">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Grid Padding="10" RowSpacing="10" ColumnSpacing="10">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<controls:CircleImage BorderColor="Aqua" BorderThickness="3"
HeightRequest="66"
HorizontalOptions="CenterAndExpand" Vertical`Options="CenterAndExpand"
Aspect="AspectFill" WidthRequest="66" Grid.RowSpan="2" Source="{Binding Image}"/>
<Label Grid.Column="1" Text="{Binding Name}"
VerticalOptions="End"/>
<Label Grid.Column="1"
Grid.Row="1"
VerticalOptions="Start"
Text="{Binding Location}"/>
</Grid>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>

51. <View style={[styles.container, {backgroundColor:
this.props.backgroundColor}]}>
<View style={styles.labelContainer}>
<Text style={labelStyles}> {this.state.maxValue} </Text>
</View>
<View style={styles.itemsContainer}>
<View style={[styles.polygonContainer, {borderColor:
this.props.borderColor}]}>
{this.renderBars()}
</View>
<View style={styles.itemsLabelContainer}>
{this.renderLabels()}
</View>
</View>
</View>

52. =
Xamarin.Forms

53. =
Xamarin.Forms
<