Flutter в действии презентация

Глаза боятся, а попробовать хочется
Flutter в действии
Сатуров Евгений
Android Flutter Teamlead, Surf
saturov

Android/Flutter Teamlead
FlutterDevPodcast
PC Mobius
GDG Voronezh Lead

Уже прочитали все статьи на Хабре про то, «как я запустил Hello World, и что из этого вышло»;
В курсе, что Flutter позволяет быстро создавать красивые приложения, и хотите узнать, правда ли это;
Чувствуете дискомфорт при фразе «Всё – это виджеты»;
Хотите посмотреть на чудаков, которые уже запилили Flutter в продакшн;
Пришли в этот зал, потому что в соседнем непонятный айосный доклад.
Этот доклад для вас, если вы:

Часть 0.
То, что вы уже знаете про Flutter.

Flutter – мультиплатформенный open-source фреймворк;
Приложения пишутся на Dart;
Под капотом свой графический движок (Skia) и рантайм (Dart VM);
Официально поддерживаются две платформы: iOS и Android;
Неофициально ещё ряд других (веб, десктоп, носимые и встраиваемые ОС).
Очень скучный слайд

*все картинки кликабельны

Архитектура фреймворка
UI (контролы, анимации, стилизация, user input);
Виджеты и стейт-менеджмент.
Skia (графический движок);
Dart (Runtime, GC);
Text (LibTxt).
Отрисовка на канве;
Нативные плагины.

Архитектура фреймворка
Skia (графический движок);
Dart (Runtime, GC);
Text (LibTxt).
Отрисовка на канве;
Нативные плагины.
https://github.com/flutter/flutter
UI (контролы, анимации, стилизация, user input);
Виджеты и стейт-менеджмент.

Всё своё ношу с собой
Skia (графический движок);
Dart (Runtime, GC);
Text (LibTxt).
Отрисовка на канве;
Нативные плагины.
UI (контролы, анимации, стилизация, user input);
Виджеты и стейт-менеджмент.
Skia
Dart VM
LibTxt

Типы сборок и компиляция
Debug
Release
JIT
AOT
Low FPS;
«Тяжёлое» приложение
(> 40 Мб);
Работает Hot Reload.
High FPS;
«Лёгкое» приложение
(>7 Мб).

Типы сборок и компиляция
Android - Gradle;
iOS – Xcode Build;
Flutter Assemble – coming soon.

Часть 1.
Наш опыт.

За последние полгода мы:
Собрали команду;
Написали 3 небольших приложения и стартанули большой финтех;
Выработали ряд лучших практик и своё видение архитектуры;
Заложили основу линейки переиспользуемых модулей, которые планируем шарить в open-source.

Начинать работать
с новой технологией надо так,
чтобы о твоём позоре
никто не узнал.

«Вселенная Парк»

«Вселенная Парк»

Карта экранов

2 разработчика;
560 чел./час;
62% таски, 22% отладка, 15% на поболтать;
6 полноценных эпиков-фич;
76% попадание в собственные оценки.
Проект в цифрах

Распределение времени

Не было написано ни строчки платформенного кода, всё покрыто плагинами:
Yandex Mapkit
Camera
Permission Handler
Shared Preferences
QR Flutter
и многими другими.
Первый «подопытный» был выбран правильно

*чем два нативных приложения;
Команда разработки на 40% меньше;
Более линейные процессы;
Больше времени остаётся на разработку фичей.
Flutter-приложение дешевле*

NDA
Финтех
Расскажем в марте

Часть 2.
Рекламная.

По-сравнению с двумя нативными приложениями - вероятно;
Когда ты понимаешь, с какой стороны подступиться к задаче;
Когда ты способен заранее оценить трудозатраты (не всегда);
Когда приложение не заточено на глубокую работу с платформенными API.

Нативный Look & Feel сам себя не сделает – это возможно, но вручную;
Apple-юзеры всё ещё находят отличия в UI (не понимаю, как они это делают);
Для унифицированного UI/UX – идеально.

Максимальная мимикрия

Нет бутылочных горлышек на рендеринге (прощай, JavaScript Bridge);
Простота реализации асинхронных задач – миф (Future исполняется в UI-потоке);
Из коробки «летать» не будет.
Берём профайлер, лучшие практики и вперёд!

Часть 3.
Жизненная.

FLUTTER-ЛИД ПОСЛЕ СОБЕСЕДОВАНИЯ

Требуемый опыт: 1-3 года.
Ищу Flutter-разработчика

Немного сухой статистики

Бэкграунд нашей Flutter-команды
6
1
1

Бэкграунд нашей Flutter-команды
6

Без «яблока» не обойтись
Собрать билд локально;
Настроить Firebase;
Пофиксить специфичный баг вёрстки;
Разобраться, почему не работает… (подставь свой вариант);
Написать полноценный платформенный плагин;

Не Kotlin;;;;;;;;;;;;;;;
Однопоточный (но есть Isolate);
Нет модификаторов доступа: _приватность;
Нет перегрузки функций;
Mixins – интерфейсы с реализацией;
Enum без состояния;
Нет data-классов, нет null-safety (Null – это тип), нет sealed-классов и многого другого.
Назад в будущее (пишем на Dart)

static String normalize(String inputString, {bool withPrefix = false}) {
StringBuffer buff = StringBuffer();
for (var i = 0; i < inputString.length; i++) {
String o = inputString[i];
if (int.tryParse(o) != null) {
buff.write(o);
}
}
String res = EMPTY_STRING;
if (withPrefix) {
res += PHONE_PREFIX;
}
res += buff.toString();
return res;
}
Dart.equals(Java) == true?

Future
_findNearestShop() async {
final userLocation = await _locInteractor.getLocationSafe().single;
final shops = await getShops(
lat: userLocation.latitude,
lon: userLocation.longitude,
).single;
shops.sort((shop1, shop2) => _compareShops(sh1, sh2, userLocation));
return shops.first;
}
Async/await

«Выучу только Flutter и Dart!»*
* не сказал ни один успешный Flutter-разработчик

Flutter + Dart;
Android + Kotlin;
iOS + Swift;
App Store Connect + TestFlight;
Google Play Console + Firebase App Distribution.

Периодически каждый из нас

https://pub.dev/flutter

https://pub.dev/flutter

Не очень хорошие популярные плагины
https://pub.dev/packages/permission_handler - в вашем iOS-приложении будут указаны вообще все существующие пермишны, даже если они не используются;
https://pub.dev/packages/flutter_local_notifications - конфликтует с другими пуш-плагинами, например firebase_messaging.

Самое время собирать «звёздочки»
Dagger
Retrofit
RxJava
inject.dart
Dio
RxDart

import 'package:dio/dio.dart';
void getHttp() async {
try {
Response response = await Dio().get("http://www.google.com");
print(response);
} catch (e) {
print(e);
}
}
Пример HTTP-запроса через Dio

firebase_core
firebase_messaging
firebase_analytics
firebase_auth
firebase_storage
firebase_database
firebase_crashlytics
firebase_admob
Firebase что-то знает
firebase_dynamic_links
firebase_remote_config
firebase_ml_vision
firebase_performance
firebase_in_app_messaging
И все остальные модули.

Проверенные нами плагины
https://pub.dev/packages/flutter_svg – поддержка векторной графики (позволяет использовать *.svg);
https://pub.dev/packages/camera – удобное API для работы с камерой (фото + видео);
https://pub.dev/packages/flutter_masked_text – маскирование полей ввода;
https://pub.dev/packages/device_info – получение информации о девайсе.

Если у вас есть время

Хорошая новость:
На Flutter можно написать вообще всё что угодно;

Плохая новость:
На Flutter можно написать вообще всё что угодно;
Для этого нужно знать очень много разных вещей;

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

Да, можно.
Dart (UI, бизнес-логика);
Platform Channels + Native Plugins (Kotlin, Swift и т.д.);
Platform Views;
C/C++ direct interop using FFI.
Можно ли сделать на Flutter {$featureName} ?

История про бесшовную авторизацию.
(из новейшего опыта)

Два нативных «легаси» приложения;
Сложнейшая процедура инициализации сессии с необходимостью подписи сертификата ЭЦП в веб-версии сервиса;
Несколько десятков тысяч пользователей, которые уничтожили бы компанию в случае массового разлогина при обновлении приложения.
У нас были…

Да, можно.
Dart (UI, бизнес-логика);
Platform Channels + Native Plugins (Kotlin, Swift и т.д.);
Platform Views;
C/C++ direct interop using FFI.
Можно ли сделать на Flutter {$featureName} ?

Схема авторизации
Auth
Credentials
Authentication

Auth
Credentials
Authentication
Auth
Credentials
Authentication

Platform
Credentials Provider
Provide
Auth
Credentials
Flutter
Credentials Provider
Authentication

const _platform = MethodChannel(_authProviderChannelName);
Инициализация MethodChannel

class PlatformAuthDataProvider {
Future
getCert(String userId, String pinHash) {
return _platform.invokeMethod(
getCertificateMethodName,
[userId, pin],
);
}
Платформенный поставщик Credentials

class PlatformAuthDataProvider {
Future
getCert(String userId, String pinHash) {
return _platform.invokeMethod(
getCertificateMethodName,
[userId, pin],
);
}
Платформенный поставщик Credentials

class PlatformAuthDataProvider {
Future
getCert(String userId, String pinHash) {
return _platform.invokeMethod(
"fghvfkajsr/m1kjnbaf",
[userId, pin],
);
}
Платформенный поставщик Credentials

Это вам не a.a.b.c()

Реверс-инжиниринг практически бесполезен;
Обфускация в Dart существует, но…
Note: that obfuscation support is not very well tested and might not work at the moment.
Самое уязвимое место – Method Channels со стороны платформенного кода (да поможет нам ручная обфускация).
Так, так, так… секьюрити

MethodChannel(
flutterView,
authProviderChannelName
).setMethodCallHandler { call, result ->
launch {
val output: Any = when (call.method) {
albhsfsadg -> {
val arguments: List
=
call.arguments as List
authDataProvider.getCert(args[0], args[1])
}
MainActivity.kt

Platform
Credentials Provider
Provide
Auth
Credentials
Flutter
Credentials Provider
Authentication
Migrate
Auth
Credentials

Hot Reload спасает жизнь при разработке

Но на CI/CD запасайтесь поп-корном

Fastlane;
Firebase App Distribution.
Джентельменский деплой-набор

Часть 4.
Вдохновляющая.

Подходы;
Синтаксис языка;
Архитектура.
Всё это знакомо и привычно любому мобильному разработчику.
Переход на Flutter – это не смена работы

Применение изменений: ≈ 2-3 сек.
Синхронизация проекта: ≈ 5-10 сек.
Больше времени с друзьями и близкими

Нет проверенных лучших практик;
Нет надежды на то, что кто-то поможет (даже SOF);
С каждой проблемой ты можешь столкнуться впервые;
Нужно обдумывать каждый шаг и брать на себя ответственность;
Никому нельзя доверять.
Настало время для крутого вызова

Ссылки на меня
https://twitter.com/saturovv
https://www.facebook.com/saturov
https://habr.com/ru/users/saturovv/
Telegram: @saturov