Место Flutter в жизни Android-разработчика

Flutter активно развивается, и сейчас немало людей задаются вопросом, заменит ли он нативную разработку? И какое у него будущее? Ведь его разрабатывает и продвигает непосредственно Google. Конечно, мы не можем знать планы Google, но мы можем подробнее посмотреть на эту технологию и понять, может ли она дать нам какие-то преимущества, а также узнать о различных проблемах и нюансах. Мы будем рассматривать использование Flutter в первую очередь с точки зрения разработки под Android.

Доклад будет интересен тем, кто еще не писал ничего особо серьезного на Flutter и хотел поближе познакомиться с этой технологией и попробовать ее в действии.

Transcript

1. Место Flutter в жизни Android-разработчика Артур Василов, Android-разработчик
2. Все, сказанное здесь, является личным мнением и никак не может быть связано с позицией или продуктами компании «Яндекс» Дисклеймер
3. Что такое Flutter? › Фреймворк для кроссплатформенной разработки UI мобильных приложений от Google › Dart в качестве языка › Еще пока в бете 3 3
4. Что мы сегодня рассмотрим? › Небольшое введение › Почему Flutter может быть нам интересен? › Почему Flutter не может быть нам интересен? › Что в итоге? 4 4
5. Попробуем сделать что-то простое void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { // TODO : implement } } 5
6. Введение 6 Widget Stateful Stateless
7. MaterialApp class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Hello, World', home: Scaffold( ), ); } } 7
8. Добавляем AppBar @override Widget build(BuildContext context) { return MaterialApp( title: 'Hello, World', home: Scaffold( appBar: new AppBar( title: Text('First app'), ), ), ); } 8
9. Создаем отдельный виджет return MaterialApp( title: 'Hello, World', home: Scaffold( appBar: new AppBar(title: Text('First app')), body: PersonWidget( Person( "Artur Vasilov", "vasilovartur@gmail.com", "https://website.com/avatar.jpg"), ), ), ); 9
10. PersonWidget class PersonWidget extends StatelessWidget { final Person _person; PersonWidget(this._person); @override Widget build(BuildContext context) { // TODO : implement } } 10
11. Имя class PersonWidget extends StatelessWidget { final Person _person; PersonWidget(this._person); @override Widget build(BuildContext context) { return Text( _person.name, style: TextStyle(fontSize: 24.0), ); } } 11
12. Картинка return Row( crossAxisAlignment: CrossAxisAlignment.start, children: <Widget>[ CircleAvatar( radius: 48.0, backgroundImage: NetworkImage(_person.avatarUrl), ), Text( _person.name, style: TextStyle(fontSize: 24.0), ) ], ); 12
13. Картинка return Row( crossAxisAlignment: CrossAxisAlignment.start, children: <Widget>[ CircleAvatar( radius: 48.0, backgroundImage: NetworkImage(_person.avatarUrl), ), Text( _person.name, style: TextStyle(fontSize: 24.0), ) ], ); 13
14. Почта Column( crossAxisAlignment: CrossAxisAlignment.start, children: <Widget>[ Text( _person.name, style: TextStyle(fontSize: 24.0), ), Container(height: 4.0), Text( _person.email, style: TextStyle(fontSize: 18.0), ) ], ), 14
15. Почта Column( crossAxisAlignment: CrossAxisAlignment.start, children: <Widget>[ Text( _person.name, style: TextStyle(fontSize: 24.0), ), Container(height: 4.0), Text( _person.email, style: TextStyle(fontSize: 18.0), ) ], ), 15
16. Отступы @override Widget build(BuildContext context) { return Container( height: 120.0, padding: EdgeInsets.only(left: 16.0, top: 12.0, right: 16.0, bottom: 12.0), child: Row( // ... ), ); } 16
17. Отступы Container( padding: EdgeInsets.only(left: 12.0, top: 8.0), child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: <Widget>[ Text(...), Container(...), Text(...) ], ), ), 17
18. Ripple effect @override Widget build(BuildContext context) { return InkWell( onTap: () => {}, child: Container( // ... ), ); } 18
19. Что можно заметить ▌ Хорошо подходит, чтобы быстро что-то сделать (прототип): › Нет всяких Activity / Fragment / xml / … › Работа с сетью тоже намного короче › Hot reload › Кроссплатформенный UI (заметить было нельзя, но да) › Архитектура? 19
20. Что можно заметить ▌ Хорошо подходит, чтобы быстро что-то сделать (прототип): › Нет всяких Activity / Fragment / xml / … › Работа с сетью тоже намного короче › Hot reload › Кроссплатформенный UI (заметить было нельзя, но да) ▌ Декларативный UI-фреймворк ▌ Скобочки ))))))))))) 20
21. Спасти принцессу 21
22. ) ) ] ) ) ) ] ) ) } – разбиваем код Widget buildPersonInfo() { return Column( crossAxisAlignment: CrossAxisAlignment.start, children: <Widget>[ Text(...), Container(...), Text(...) ], ); } 22
23. ) ) ] ) ) ) ] ) ) } – разбиваем код child: Row( crossAxisAlignment: CrossAxisAlignment.start, children: <Widget>[ CircleAvatar(...), Container( padding: EdgeInsets.only(left: 12.0, top: 8.0), child: buildPersonInfo(), ), ], ), 23
24. Что еще крутого во Flutter ▌ Большое количество виджетов, в том числе и хорошая ▌ интеграция с Material Design 24
25. Widgets flutter.io/widgets/ 25
26. Что еще крутого во Flutter ▌ Большое количество виджетов, в том числе и хорошая ▌ интеграция с Material Design ▌ Высокая производительность (похоже, что так, но это не 100%) › Нативный рендеринг › Изменение только того, что меняется 26
27. Stateful Widget › Widget строится не на основе констант, а на основе параметров, которые могут меняться › Все то же самое, только при изменении параметров надо вызывать setState 27 27
28. Stateful Widget class NetworkPersonWidget extends StatefulWidget { @override State createState() => NetworkPersonWidgetState(); } class NetworkPersonWidgetState extends State<NetworkPersonWidget> { @override Widget build(BuildContext context) { // TODO : implement } } 28
29. Получаем данные с сервера Future<Person> fetchPerson() async { final response = await http.get('https://myserver.com/person'); if (response.statusCode == 200) { // If server returns an OK response, parse the JSON return Person.fromJson(json.decode(response.body)); } else { // If that response was not OK, throw an error. throw Exception('Failed to load post'); } } 29
30. Меняем стейт @override void initState() { super.initState(); Future<Person> personFuture = fetchPerson(); personFuture.then((person) { setState(() { _person = person; }); }, onError: (e) { handleError(e); }); } 30
31. 31 31 MaterialApp ... ... Column PersonWidget Image Text Text
32. 32 32 MaterialApp ... ... Column PersonWidget Image Text Text
33. 33 33 MaterialApp ... ... Column PersonWidget Image Text Text
34. 34 34 MaterialApp ... ... Column PersonWidget Image Text Text
35. 35 35 MaterialApp ... ... Column PersonWidget Image Text Text
36. 36 36 MaterialApp ... ... Column PersonWidget Image Text Text
37. 37 37 MaterialApp ... ... Column PersonWidget Image Text Text
38. 38 38 MaterialApp ... ... Column PersonWidget PersonImage Text Text Image
39. 39 39 MaterialApp ... ... Column PersonWidget PersonImage Text Text Image
40. Widgets › Это основное, что нужно знать о виджетах, чтобы строить UI › Дальнейшие рассмотрения – это уже изучение фреймворка 40 40
41. Что еще крутого во Flutter ▌ Большое количество виджетов, в том числе и хорошая ▌ интеграция с Material Design ▌ Высокая производительность (похоже, что так, но это не 100%) › Нативный рендеринг › Изменение только того, что меняется › Measure всегда в один проход › Грамотное использование слоев рендеринга 41 youtube.com/watch?v=UUfXWzp0-DU
42. А вот теперь о недостатках…
43. Что нам стоит Flutter взять … 43 43
44. Давайте все же соберем релиз 44 44
45. │Главный вопрос жизни, │вселенной и всего │такого
46. Вопрос Как мне достучаться до Activity Lifecycle, пермишенов, камеры, WebView, Firebase, Google Maps, других приложений и всего такого? 46
47. Flutter – устройство 47
48. Flutter – устройство 48 Bridge
49. Method channel – Dart static const channel = const MethodChannel('ru.artur_vasilov.channel'); 49
50. Method channel – Dart void browseUrl() async { bool result; try { result = await channel.invokeMethod('browse_url', {'url': 'https://flutter.io'}); } on PlatformException catch (e) { result = false; } setState(() { _urlOpened = result; }); } 50
51. Method channel – Native new MethodChannel(getFlutterView(), CHANNEL_NAME) .setMethodCallHandler((methodCall, result) -> { if (BROWSE_URL_METHOD.equals(methodCall.method)) { String url = methodCall.argument("url"); boolean shown = browseUrl(url); result.success(shown); } else { result.notImplemented(); } }); 51
52. Method channel – Native new MethodChannel(getFlutterView(), CHANNEL_NAME) .setMethodCallHandler((methodCall, result) -> { if (BROWSE_URL_METHOD.equals(methodCall.method)) { String url = methodCall.argument("url"); boolean shown = browseUrl(url); result.success(shown); } else { result.notImplemented(); } }); 52
53. Стандартные Method Channel public class FlutterView extends SurfaceView { private final MethodChannel mFlutterLocalizationChannel; private final MethodChannel mFlutterNavigationChannel; private final BasicMessageChannel<Object> mFlutterKeyEventChannel; private final BasicMessageChannel<String> mFlutterLifecycleChannel; private final BasicMessageChannel<Object> mFlutterSystemChannel; private final BasicMessageChannel<Object> mFlutterSettingsChannel; // ... } 53
54. Flutter plugins pub.dartlang.org/flutter/packages 54
55. │Как померять │производительность │и вообще все вот это
56. Следим за фреймами @override Widget build(BuildContext context) { return MaterialApp( debugShowCheckedModeBanner: true, showPerformanceOverlay: true, showSemanticsDebugger: true, // .. title: 'Hello, World', home: Scaffold( ), ); } 56
57. Странный отладчик @override Widget build(BuildContext context) { return MaterialApp( debugShowCheckedModeBanner: true, showPerformanceOverlay: true, showSemanticsDebugger: true, // .. title: 'Hello, World', home: Scaffold( ), ); } 57
58. Flutter Outline
59. Flutter Inspector
60. Недостатки ▌ Вся платформенная интеграция через дополнительные ▌ нативные вызовы и плагины ▌ Дополнительный + к размеру приложения ▌ Недостаточно мощный инструментарий ▌ Необходимость учить новый язык и подход (?) 60
61. Итого ▌ Это интересно и стоит поиграться ▌ Пока плохо подходит для больших проектов ▌ Не стоит слишком верить (вспоминаем добрый словом RN) ▌ Следим за развитием 61
62. Ссылки › flutter.io/ › github.com/flutter/flutter › udacity.com/course/build-native-mobile-apps-with-flutter-- ud905 › … 62 62
63. avasilov@yandex-team.ru Место Flutter в жизни Android-разработчика Артур Василов Android-разработчик ArturVasilov ArturVasilov VasilovArtur