Online TechTalk “Flutter Mobile Development”

GlobalLogic
A Hitachi Group Company
Flutter
Siarhei Chernik
Maksym Kulba
Anastasiia Zhdanova

Введение
1. Что такое Flutter
2. Сравнение производительности
3. Архитектура - как это работает
4. Простота разработки
- Dart
- Widgets
- Web и Back-end
- Pub.dev
1. Flutter Bloc - архитектура
2. Native iOS and Android
3. Тестирование
4. Примеры приложений на Flutter
5. Плюсы и минусы
6. Перспективы и итоги

Flutter
Комплект средств разработки и фреймворк с открытым исходным кодом для
создания мобильных приложений под Android и iOS, а также веб-приложений с
использованием языка программирования Dart, разработанный и развиваемый
корпорацией Google.
- SDK (Software Development Kit)
- Framework

Flutter
История:
2015 - ‘Sky’ для Андроид приложений
2017 май - альфа верся
2018 декабрь - версия 1.0 (первая стабильная версия)
2020 май - выпущен DevTools
2021 март - версия 2.0 (полная поддержка веб-приложений)
2021 сентябрь - версия 2.5 (улучшенная производительность, Material You)

Flutter
Главные компоненты:
- Dart platform - виртуальная машина Dart
- Flutter engine - портативная среда выполнения приложений
- Foundation library - базовые классы для создания приложений
- Design specific widgets - виджеты Material Design(Google) и
Cupertino(Apple)
- Widgets - виджеты Flutter
- Flutter Development Tools (DevTools)
https://ru.wikipedia.org/wiki/Flutter

Flutter
- Mobile
- Web
- Desktop
- Embedded support

Сравнение Flutter и React Native
Основные аспекты:
- Сборка
- Доступность библиотек и
виджетов
- Производительность
- Безопасность

Сборка
Обе платформы используют
инструменты мобильной операционной
системы для сборки: Gradle и Xcode build
для Android и IOS соответственно.

Библиотеки и компоненты
React Native
- Давно на рынке и имеет тонны
сторонних библиотек.
- Может использовать
библиотеки для React.
Flutter
- На рынке 3 года и имеет не так
много сторонних библиотек.
- Dart мало где используется вне
Flutter.

Производительность
React Native
- Использует родные виджеты
платформы(Native Views) и
передает события через
JavaScript.
Flutter
- Рендерит все, используя
собственный 2D-движок Skia,
избегая какого-либо
специального соединения между
вьюшками и другим кодом.

Безопасность
React Native
- Завязан на js и приложение на
его основе содержит js bundle
Flutter
- Гораздо сложнее изменить
приложение, так как Dart код
заранее компилируется в
бинарный код для целевой
архитектуры.

Вывод
- Недостаток библиотек для Flutter.
- Более длительное время запуска React-Native.
- Более низкая безопасность для React-Native.
- Обучение Dart новым разработчикам, так как таких разработчиков на
рынке нет/мало.

Простота разработки
Dart
Язык программирования, на котором пишут
приложения под Flutter. Очень прост, если у вас
есть опыт Java или JavaScript.
Объектно-ориентированный, поэтому даже
функции являются объектами и имеют тип Function.
Это означает, что функции могут быть присвоены
переменным или переданы как параметры другим
функциям.
- Структурированный и гибкий
- Похож на существующие
- Высокая производительность программ
import 'dart:math' as math;
class Point {
final num x, y;
// Конструктор, инициализирующий поля
Point(this.x, this.y);
// Именованный конструктор со списком
// инициализации по умолчанию
Point.origin() : x = 0, y = 0;
num distanceTo(Point other) {
var dx = x - other.x;
var dy = y - other.y;
return math.sqrt(dx * dx + dy * dy);
}
}
main() {
var p1 = new Point(10, 10);
var p2 = new Point.origin();
var distance = p1.distanceTo(p2);
print(distance);
}
https://ru.wikipedia.org/wiki/Dart

Автоматическая инициализация полей
class Point {
num x, y;
}
Именованные конструкторы
class Point {
num x, y;
Point.zero() : x = 0, y = 0;
Point.polar(num theta, num radius) {
x = Math.cos(theta) * radius;
y = Math.sin(theta) * radius;
}
}
Анонимные функции
window.on.click.add((event) {
print('You clicked the window.');
})
}
Определение членов класса
class Rectangle {
num width, height;
bool contains(num x, num y) => (x < width) && (y < height);
num area() => width * height;
}
Поля, геттеры, сеттеры
class Rectangle {
num left, top, width, height;
num get right() => left + width;
set right(num value) => left = value - width;
num get bottom() => top + height;
set bottom(num value) => top = value - height;
Rectangle(this.left, this.top, this.width, this.height);
}

Определения верхнего уровня
num abs(num value) => value < 0 ? -value : value;
final TWO_PI = Math.PI * 2.0;
int get today() {
final date = new DateTime.now();
return date.day;
}
Строки
var name = 'Fred';
var salutation = 'Hi';
var greeting = '$salutation, $name';
Операторы
class Vector {
num x, y;
Vector(this.x, this.y);
operator +(Vector other) => new Vector(x + other.x, y + other.y);
}
var position = new Vector(3, 4);
var velocity = new Vector(1, 2);
var newPosition = position + velocity;
Равенство
== и != - сравнение
=== и !== - проверка объекта на идентичность

Widgets
import 'package:flutter/widgets.dart';
import 'package:flutter/material.dart';
main() => runApp(
Directionality(
textDirection: TextDirection.ltr,
child: Container(
color: Colors.black,
child: const Center(
child: Text(
'Hello, Flutter!',
style: TextStyle(
color: Color.fromRGBO(243, 112, 55, 1),
fontSize: 29.0,
),
),
),
),
),
);

Web и Back-end

Pub.dev
Это официальный репозиторий,
содержащий разнообразные библиотеки для
языка программирования Dart, а также для
Flutter.
Flutter Favorite
FEC - состоит из членов команды Flutter
и членов сообщества Flutter, разбросанных по
всей его экосистеме. Одна из их задач -
решить, когда пакет достигнет планки
качества, чтобы стать фаворитом Flutter.

Паттерн Bloc
BLoC — «Business Logic Component» (компонент бизнес-логики).

Android & IOS
Flutter помогает организовать
взаимодействие между Dart и нативным
кодом приложения при помощи
механизма PlatformChannel.

Тестирование
Тесты можно поделить на три основных типа:
● Unit-тесты - для тестирования отдельной функции, метода или класса. Unit-тесты
обычно представляют собой автоматизированные тесты, написанные и выполняемые
разработчиками программного обеспечения, чтобы гарантировать, что часть кода
соответствует своему дизайну и ведет себя так, как задумано.
● Widget test - для тестирования отдельного виджета. Также называется компонентным
тестом. Тесты выполняются для каждого отдельного компонента (виджета) без
интеграции с другими компонентами.
● Интеграционные тесты - для тестирования всего приложения или его части. Тесты
выполняются на группе модулей для оценки соответствия заданным функциональным
требованиям.

Unit-тесты
Добавьте зависимости test / flutter_test.
Пакет test предоставляет основу для написания модульных тестов в
Dart.
Mockito - это популярный фреймворк для Mock object-ов,
который можно использовать для создания и настройки фиктивных
объектов. Добавьте зависимость build_runner в pubspec.yaml вашего
пакета в разделе dev_dependencies.
Mock object - это реализация фиктивного объекта для
интерфейса или класса. Это позволяет определить результат вызова
определенного метода.
Использование Mockito для имитации объектов.

Widget test
Библиотека тестирования flutter_test для флаттера предоставляет возможность
тестировать виджеты.
Основные инструменты:
● WidgetTester - позволяет создавать и взаимодействовать с виджетами в тестовой
среде.
● функция testWidgets () автоматически создает новый WidgetTester для каждого
тестового примера и используется вместо обычной функции test ()
● класс Finder позволяет искать виджеты в тестовой среде
● Константы Matcher для конкретных виджетов помогают проверить, обнаруживает
ли Finder виджет или несколько виджетов в тестовой среде.

Интеграционные тесты :
Интеграционные тесты на Flutter пишутся при помощи Flutter
Driver, для которого есть простой и понятный tutorial на
официальном сайте (ссылка в правом нижнем углу).
Пакет flutter_driver предоставляет:
● инструменты для создания приложения и управления этим
приложением из набора тестов.
● предоставляет API для тестирования приложения Flutter,
которое работает на реальных устройствах и эмуляторах
● приложение работает в отдельном процессе от самого теста
https://flutter.dev/docs/cookbook/testing/integration/introduction

Тестирование итоги:
● Возможности тестирования во Flutter не
уступают нативным
● Одни тесты для тестирования на двух
платформах (iOS, Android)
● Простые и понятные туториалы на
официальном сайте
● Быстрое обучение

Плюсы и минусы Flutter
+
+ Одинаковый пользовательский
интерфейс и бизнес-логика на все
платформы
+ Сокращение времени разработки кода
+ Аналогично производительности Native
приложений
+ Собственный движок рендеринга
+ Возможность выйти за рамки
мобильных устройств
-
- На рынке недавно и имеет не так
много сторонних библиотек
- Необходимы знания нативных языков
- Не хватает разработчиков на Flutter
- Dart мало где используется вне Flutter

Примеры приложений
● Google Ads – помогает пользователям управлять рекламными кампаниями,
оптимизировать и отслеживать их показатели;
● Grab – приложение для службы доставки еды;
● Stadia – игровой сервис от Google;
● eBay Motors – приложение для покупки и продажи автомобилей;
● Baidu Tieba – крупнейшая китайская коммуникационная платформа;
● KFC DSR – корпоративное приложение для KFC от Surf, которое оптимизирует
документооборот в компании;
● The Hole – стриминговая платформа с более чем 16 миллионами подписчиков;
приложение разработано Surf за четыре месяца.

Примеры компаний активно использующих
Flutter
● Alibaba
● Square
● Ebay
● Hamilton Musical
● Reflectly
● Groupon
● Cryptomaniac
● Realtor.com
● BMW
https://flutter.dev/showcase

Перспективы и итоги
● Молодая стремительно
развивающаяся технология
● Необходимо меньше времени на
написание кода и тестов
● Производительность не уступает
нативной
● Возможность выйти за рамки
мобильных устройств
● Растущий спрос, но все еще мало
специалистов

Спасибо за внимание
GlobalLogic
A Hitachi Group Company

Online TechTalk “Flutter Mobile Development”

More Related Content

What's hot (20)

Similar to Online TechTalk “Flutter Mobile Development” (20)

More from GlobalLogic Ukraine (20)

Online TechTalk “Flutter Mobile Development”