Разделы презентаций


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

Содержание

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

Слайды и текст этой презентации

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

saturov
 

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

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

Surf
saturov
 

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

Слайд 3Android/Flutter Teamlead
FlutterDevPodcast
PC Mobius
GDG Voronezh Lead

Android/Flutter TeamleadFlutterDevPodcastPC MobiusGDG Voronezh Lead

Слайд 4Уже прочитали все статьи на Хабре про то, «как я

запустил Hello World, и что из этого вышло»;
В курсе, что

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

Этот доклад для вас, если вы:

Уже прочитали все статьи на Хабре про то, «как я запустил Hello World, и что из этого

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

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

Слайд 6Flutter – мультиплатформенный open-source фреймворк;
Приложения пишутся на Dart;
Под капотом свой

графический движок (Skia) и рантайм (Dart VM);
Официально поддерживаются две платформы:

iOS и Android;
Неофициально ещё ряд других (веб, десктоп, носимые и встраиваемые ОС).

Очень скучный слайд

Flutter – мультиплатформенный open-source фреймворк;Приложения пишутся на Dart;Под капотом свой графический движок (Skia) и рантайм (Dart VM);Официально

Слайд 7*все картинки кликабельны

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

Слайд 8Архитектура фреймворка
UI (контролы, анимации, стилизация, user input);
Виджеты и стейт-менеджмент.
Skia (графический

движок);
Dart (Runtime, GC);
Text (LibTxt).
Отрисовка на канве;
Нативные плагины.

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

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

(контролы, анимации, стилизация, user input);
Виджеты и стейт-менеджмент.

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

Слайд 10Всё своё ношу с собой
Skia (графический движок);
Dart (Runtime, GC);
Text (LibTxt).
Отрисовка

на канве;
Нативные плагины.
UI (контролы, анимации, стилизация, user input);
Виджеты и стейт-менеджмент.
Skia
Dart

VM

LibTxt

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

Слайд 11Типы сборок и компиляция
Debug
Release
JIT
AOT
Low FPS;
«Тяжёлое» приложение (> 40 Мб);
Работает Hot

Reload.
High FPS;
«Лёгкое» приложение (>7 Мб).

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

Слайд 12Типы сборок и компиляция
Android - Gradle;
iOS – Xcode Build;
Flutter Assemble

– coming soon.

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

Слайд 13Часть 1.
Наш опыт.

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

Слайд 14За последние полгода мы:
Собрали команду;
Написали 3 небольших приложения и стартанули

большой финтех;
Выработали ряд лучших практик и своё видение архитектуры;
Заложили основу

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

Слайд 15Начинать работать с новой технологией надо так, чтобы о твоём

позоре никто не узнал.

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

Слайд 16«Вселенная Парк»

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

Слайд 17«Вселенная Парк»

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

Слайд 18Карта экранов

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

Слайд 192 разработчика;
560 чел./час;
62% таски, 22% отладка, 15% на поболтать;
6 полноценных

эпиков-фич;
76% попадание в собственные оценки.
Проект в цифрах

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

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

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

Слайд 21Не было написано ни строчки платформенного кода, всё покрыто плагинами:
Yandex

Mapkit
Camera
Permission Handler
Shared Preferences
QR Flutter
и многими другими.
Первый «подопытный» был выбран правильно

Не было написано ни строчки платформенного кода, всё покрыто плагинами:Yandex MapkitCameraPermission HandlerShared PreferencesQR Flutterи многими другими.Первый «подопытный»

Слайд 22*чем два нативных приложения;
Команда разработки на 40% меньше;
Более линейные процессы;
Больше

времени остаётся на разработку фичей.
Flutter-приложение дешевле*

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

Слайд 23NDA Финтех
Расскажем в марте

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

Слайд 24Часть 2.
Рекламная.

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

Слайд 26По-сравнению с двумя нативными приложениями - вероятно;
Когда ты понимаешь, с

какой стороны подступиться к задаче;
Когда ты способен заранее оценить трудозатраты

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

Слайд 28Нативный Look & Feel сам себя не сделает – это

возможно, но вручную;
Apple-юзеры всё ещё находят отличия в UI (не

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

Слайд 29Максимальная мимикрия

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

Слайд 31Нет бутылочных горлышек на рендеринге (прощай, JavaScript Bridge);
Простота реализации асинхронных

задач – миф (Future исполняется в UI-потоке);
Из коробки «летать» не

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

Слайд 33Часть 3.
Жизненная.

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

Слайд 34FLUTTER-ЛИД ПОСЛЕ СОБЕСЕДОВАНИЯ

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

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

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

Слайд 36Немного сухой статистики

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

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

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

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

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

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

почему не работает… (подставь свой вариант);
Написать полноценный платформенный плагин;

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

Слайд 40Не Kotlin;;;;;;;;;;;;;;;
Однопоточный (но есть Isolate);
Нет модификаторов доступа: _приватность;
Нет перегрузки функций;
Mixins

– интерфейсы с реализацией;
Enum без состояния;
Нет data-классов, нет null-safety (Null

– это тип), нет sealed-классов и многого другого.

Назад в будущее (пишем на Dart)

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

Слайд 41static 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?

static String normalize(String inputString, {bool withPrefix = false}) {    StringBuffer buff = StringBuffer();    for (var i = 0; i

Слайд 42Future _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

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,

Слайд 43«Выучу только Flutter и Dart!»*

* не сказал ни один успешный

Flutter-разработчик

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

Слайд 44Flutter + Dart;
Android + Kotlin;
iOS + Swift;
App Store Connect +

TestFlight;
Google Play Console + Firebase App Distribution.

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

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

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

Слайд 46https://pub.dev/flutter

https://pub.dev/flutter

Слайд 47https://pub.dev/flutter

https://pub.dev/flutter

Слайд 48Не очень хорошие популярные плагины
https://pub.dev/packages/permission_handler - в вашем iOS-приложении будут

указаны вообще все существующие пермишны, даже если они не используются;
https://pub.dev/packages/flutter_local_notifications

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

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

Самое время собирать «звёздочки»DaggerRetrofitRxJavainject.dartDioRxDart

Слайд 50import '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

import 'package:dio/dio.dart';void getHttp() async {  try {    Response response = await Dio().get(

Слайд 51firebase_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
И все остальные модули.

firebase_corefirebase_messagingfirebase_analyticsfirebase_authfirebase_storagefirebase_databasefirebase_crashlyticsfirebase_admobFirebase что-то знаетfirebase_dynamic_linksfirebase_remote_configfirebase_ml_visionfirebase_performancefirebase_in_app_messagingИ все остальные модули.

Слайд 52Проверенные нами плагины
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 – получение информации о девайсе.
Проверенные нами плагиныhttps://pub.dev/packages/flutter_svg – поддержка векторной графики (позволяет использовать *.svg);https://pub.dev/packages/camera – удобное API для работы с камерой

Слайд 53Если у вас есть время

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

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

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

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

нужно знать очень много разных вещей;

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

Слайд 56Плохая новость номер два:
На Flutter можно написать вообще всё что

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

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

Слайд 57Да, можно.
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.Можно

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

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

Слайд 59Два нативных «легаси» приложения;
Сложнейшая процедура инициализации сессии с необходимостью подписи

сертификата ЭЦП в веб-версии сервиса;
Несколько десятков тысяч пользователей, которые уничтожили

бы компанию в случае массового разлогина при обновлении приложения.

У нас были…

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

Слайд 60Да, можно.
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.Можно

Слайд 61Схема авторизации
Auth Credentials
Authentication

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

Слайд 62Auth Credentials
Authentication
Auth Credentials
Authentication

Auth  CredentialsAuthenticationAuth  CredentialsAuthentication

Слайд 63Platform Credentials Provider
Provide Auth Credentials
Flutter Credentials Provider
Authentication

Platform Credentials ProviderProvide Auth CredentialsFlutter Credentials ProviderAuthentication

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

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

Слайд 65class 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

Слайд 66class 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

Слайд 67class PlatformAuthDataProvider {
  
  Future getCert(String userId, String pinHash) {
    return _platform.invokeMethod(
      "fghvfkajsr/m1kjnbaf",
      [userId, pin],
    );
}
Платформенный

поставщик Credentials

class PlatformAuthDataProvider {    Future getCert(String userId, String pinHash) {    return _platform.invokeMethod(      

Слайд 68Это вам не a.a.b.c()

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

Слайд 69Реверс-инжиниринг практически бесполезен;
Обфускация в Dart существует, но… Note: that obfuscation support

is not very well tested and might not work at

the moment.
Самое уязвимое место – Method Channels со стороны платформенного кода (да поможет нам ручная обфускация).

Так, так, так… секьюрити

Реверс-инжиниринг практически бесполезен;Обфускация в Dart существует, но…  Note: that obfuscation support is not very well tested

Слайд 70MethodChannel(
    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

MethodChannel(    flutterView,    authProviderChannelName).setMethodCallHandler { call, result ->    launch {        val output: Any = when (call.method) {            albhsfsadg -> {                val  arguments: List =

Слайд 71Platform Credentials Provider
Provide Auth Credentials
Flutter Credentials Provider
Authentication
Migrate Auth Credentials

Platform Credentials ProviderProvide Auth CredentialsFlutter Credentials ProviderAuthenticationMigrate Auth Credentials

Слайд 72Hot Reload спасает жизнь при разработке

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

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

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

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

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

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

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

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

Flutter  – это не смена работы

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

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

времени с друзьями и близкими

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

Слайд 78Нет проверенных лучших практик;
Нет надежды на то, что кто-то поможет

(даже SOF);
С каждой проблемой ты можешь столкнуться впервые;
Нужно обдумывать каждый

шаг и брать на себя ответственность;
Никому нельзя доверять.

Настало время для крутого вызова

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

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

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

Слайд 81Ссылки на полезные ресурсы
https://flutter.dev/
https://flutter.dev/docs/codelabs
https://www.youtube.com/channel/UCwXdFgeE9KYzlDdR7TG9cMw
https://habr.com/ru/company/google/blog/426701/

Ссылки на полезные ресурсыhttps://flutter.dev/https://flutter.dev/docs/codelabshttps://www.youtube.com/channel/UCwXdFgeE9KYzlDdR7TG9cMwhttps://habr.com/ru/company/google/blog/426701/

Обратная связь

Если не удалось найти и скачать доклад-презентацию, Вы можете заказать его на нашем сайте. Мы постараемся найти нужный Вам материал и отправим по электронной почте. Не стесняйтесь обращаться к нам, если у вас возникли вопросы или пожелания:

Email: Нажмите что бы посмотреть 

Что такое TheSlide.ru?

Это сайт презентации, докладов, проектов в PowerPoint. Здесь удобно  хранить и делиться своими презентациями с другими пользователями.


Для правообладателей

Яндекс.Метрика