Successfully reported this slideshow.
Your SlideShare is downloading. ×

Online TechTalk “Flutter Mobile Development”

Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Upcoming SlideShare
DevOps и VSTS
DevOps и VSTS
Loading in …3
×

Check these out next

1 of 31 Ad

Online TechTalk “Flutter Mobile Development”

Download to read offline

Нещодавно відбувся Online TechTalk  “Flutter Mobile Development”!

Під час заходу спікери розібрали, що таке Flutter,  та навіщо використовувати саме його. Також поговорили про основні принципи та підходи до розробки на Flutter, його перспективи та найпопулярніші аплікації зроблені на ньому.
Деталі та відео заходу: https://bit.ly/3mKszBR

Нещодавно відбувся Online TechTalk  “Flutter Mobile Development”!

Під час заходу спікери розібрали, що таке Flutter,  та навіщо використовувати саме його. Також поговорили про основні принципи та підходи до розробки на Flutter, його перспективи та найпопулярніші аплікації зроблені на ньому.
Деталі та відео заходу: https://bit.ly/3mKszBR

Advertisement
Advertisement

More Related Content

Slideshows for you (12)

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

Advertisement

More from GlobalLogic Ukraine (20)

Recently uploaded (20)

Advertisement

Online TechTalk “Flutter Mobile Development”

  1. 1. GlobalLogic A Hitachi Group Company Flutter Siarhei Chernik Maksym Kulba Anastasiia Zhdanova
  2. 2. Введение 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. Перспективы и итоги
  3. 3. Flutter Комплект средств разработки и фреймворк с открытым исходным кодом для создания мобильных приложений под Android и iOS, а также веб-приложений с использованием языка программирования Dart, разработанный и развиваемый корпорацией Google. - SDK (Software Development Kit) - Framework
  4. 4. Flutter История: 2015 - ‘Sky’ для Андроид приложений 2017 май - альфа верся 2018 декабрь - версия 1.0 (первая стабильная версия) 2020 май - выпущен DevTools 2021 март - версия 2.0 (полная поддержка веб-приложений) 2021 сентябрь - версия 2.5 (улучшенная производительность, Material You)
  5. 5. 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
  6. 6. Flutter - Mobile - Web - Desktop - Embedded support
  7. 7. Сравнение Flutter и React Native Основные аспекты: - Сборка - Доступность библиотек и виджетов - Производительность - Безопасность
  8. 8. Сборка Обе платформы используют инструменты мобильной операционной системы для сборки: Gradle и Xcode build для Android и IOS соответственно.
  9. 9. Библиотеки и компоненты React Native - Давно на рынке и имеет тонны сторонних библиотек. - Может использовать библиотеки для React. Flutter - На рынке 3 года и имеет не так много сторонних библиотек. - Dart мало где используется вне Flutter.
  10. 10. Производительность React Native - Использует родные виджеты платформы(Native Views) и передает события через JavaScript. Flutter - Рендерит все, используя собственный 2D-движок Skia, избегая какого-либо специального соединения между вьюшками и другим кодом.
  11. 11. Безопасность React Native - Завязан на js и приложение на его основе содержит js bundle Flutter - Гораздо сложнее изменить приложение, так как Dart код заранее компилируется в бинарный код для целевой архитектуры.
  12. 12. Вывод - Недостаток библиотек для Flutter. - Более длительное время запуска React-Native. - Более низкая безопасность для React-Native. - Обучение Dart новым разработчикам, так как таких разработчиков на рынке нет/мало.
  13. 13. Архитектура
  14. 14. Простота разработки 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
  15. 15. Простота разработки Автоматическая инициализация полей class Point { num x, y; Point(this.x, this.y); } Именованные конструкторы class Point { num x, y; Point(this.x, this.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); }
  16. 16. Простота разработки Определения верхнего уровня 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; Равенство == и != - сравнение === и !== - проверка объекта на идентичность
  17. 17. Простота разработки 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, ), ), ), ), ), );
  18. 18. Простота разработки Web и Back-end
  19. 19. Простота разработки Pub.dev Это официальный репозиторий, содержащий разнообразные библиотеки для языка программирования Dart, а также для Flutter. Flutter Favorite FEC - состоит из членов команды Flutter и членов сообщества Flutter, разбросанных по всей его экосистеме. Одна из их задач - решить, когда пакет достигнет планки качества, чтобы стать фаворитом Flutter.
  20. 20. Паттерн Bloc BLoC — «Business Logic Component» (компонент бизнес-логики).
  21. 21. Android & IOS Flutter помогает организовать взаимодействие между Dart и нативным кодом приложения при помощи механизма PlatformChannel.
  22. 22. Тестирование Тесты можно поделить на три основных типа: ● Unit-тесты - для тестирования отдельной функции, метода или класса. Unit-тесты обычно представляют собой автоматизированные тесты, написанные и выполняемые разработчиками программного обеспечения, чтобы гарантировать, что часть кода соответствует своему дизайну и ведет себя так, как задумано. ● Widget test - для тестирования отдельного виджета. Также называется компонентным тестом. Тесты выполняются для каждого отдельного компонента (виджета) без интеграции с другими компонентами. ● Интеграционные тесты - для тестирования всего приложения или его части. Тесты выполняются на группе модулей для оценки соответствия заданным функциональным требованиям.
  23. 23. Тестирование Unit-тесты Добавьте зависимости test / flutter_test. Пакет test предоставляет основу для написания модульных тестов в Dart. Mockito - это популярный фреймворк для Mock object-ов, который можно использовать для создания и настройки фиктивных объектов. Добавьте зависимость build_runner в pubspec.yaml вашего пакета в разделе dev_dependencies. Mock object - это реализация фиктивного объекта для интерфейса или класса. Это позволяет определить результат вызова определенного метода. Использование Mockito для имитации объектов.
  24. 24. Тестирование Widget test Библиотека тестирования flutter_test для флаттера предоставляет возможность тестировать виджеты. Основные инструменты: ● WidgetTester - позволяет создавать и взаимодействовать с виджетами в тестовой среде. ● функция testWidgets () автоматически создает новый WidgetTester для каждого тестового примера и используется вместо обычной функции test () ● класс Finder позволяет искать виджеты в тестовой среде ● Константы Matcher для конкретных виджетов помогают проверить, обнаруживает ли Finder виджет или несколько виджетов в тестовой среде.
  25. 25. Тестирование Интеграционные тесты : Интеграционные тесты на Flutter пишутся при помощи Flutter Driver, для которого есть простой и понятный tutorial на официальном сайте (ссылка в правом нижнем углу). Пакет flutter_driver предоставляет: ● инструменты для создания приложения и управления этим приложением из набора тестов. ● предоставляет API для тестирования приложения Flutter, которое работает на реальных устройствах и эмуляторах ● приложение работает в отдельном процессе от самого теста https://flutter.dev/docs/cookbook/testing/integration/introduction
  26. 26. Тестирование итоги: ● Возможности тестирования во Flutter не уступают нативным ● Одни тесты для тестирования на двух платформах (iOS, Android) ● Простые и понятные туториалы на официальном сайте ● Быстрое обучение
  27. 27. Плюсы и минусы Flutter + + Одинаковый пользовательский интерфейс и бизнес-логика на все платформы + Сокращение времени разработки кода + Аналогично производительности Native приложений + Собственный движок рендеринга + Возможность выйти за рамки мобильных устройств - - На рынке недавно и имеет не так много сторонних библиотек - Необходимы знания нативных языков - Не хватает разработчиков на Flutter - Dart мало где используется вне Flutter
  28. 28. Примеры приложений ● Google Ads – помогает пользователям управлять рекламными кампаниями, оптимизировать и отслеживать их показатели; ● Grab – приложение для службы доставки еды; ● Stadia – игровой сервис от Google; ● eBay Motors – приложение для покупки и продажи автомобилей; ● Baidu Tieba – крупнейшая китайская коммуникационная платформа; ● KFC DSR – корпоративное приложение для KFC от Surf, которое оптимизирует документооборот в компании; ● The Hole – стриминговая платформа с более чем 16 миллионами подписчиков; приложение разработано Surf за четыре месяца.
  29. 29. Примеры компаний активно использующих Flutter ● Alibaba ● Square ● Ebay ● Hamilton Musical ● Reflectly ● Groupon ● Cryptomaniac ● Realtor.com ● BMW https://flutter.dev/showcase
  30. 30. Перспективы и итоги ● Молодая стремительно развивающаяся технология ● Необходимо меньше времени на написание кода и тестов ● Производительность не уступает нативной ● Возможность выйти за рамки мобильных устройств ● Растущий спрос, но все еще мало специалистов
  31. 31. Спасибо за внимание GlobalLogic A Hitachi Group Company

×