Мобильная кроссплатформенная разработка.

Рынок мобильных операционных систем:

• Android + iOS: 99% рынка
• Android: ~2.5 млн. приложений в Google Play Store
• iOS: ~1.8 млн. приложений в App Store
• Еще варианты: Windows Phone, Аврора
• Мобильные телефоны на основе ОС Linux: PinePhone
• Рассмотрим: android + iOS.

Отдельные нативные приложения

• Android: Java, Kotlin.
• iOS: Objective-C, Swift.
• Доступ к функциям ОС "из коробки" (календарь, файловая система, контакты и др.).
• Высокая производительность.
• "Родной" интерфейс.

Отдельные нативные приложения: недостатки.

• Две кодовые базы: поддерживать две команды разработчиков.
• Дорого.
• Необходимо "выравнивать" приложения по функциональности.

Прогрессивное веб-приложение.

• Трансформация сайта в веб-приложение.
• Обычно на отдельном домене (определение по User-Agent).
• Не нужно устанавливать отдельное приложение.
• Нет доступа к функциям ОС.
• Нет возможности использовать другие приложения (например, для входа).
• Браузер для ОС достаточно много потребляет энергии.

Общая архитектура.

Соrdova.

• Ресурс: https://cordova.apache.org/.
• Появился в 2009.
• Наследовался от PhoneGap.
• Открытая лицензия.
• Поддержка платформ: android, iOS, Windows Phone.
• Технологии: HTML, CSS, JS
• Любой UI фреймворк: React, Angular, Vue, jQuery.
• Рендеринг с помощью WebView.
• Ядро и набор плагинов.

Соrdova. Архитектурная схема.

Соrdova. Первое приложение.

:> sudo npm install -g cordova
:> cordova create MyApp
:> cd MyApp
:> ls
config.xml  package.json  www
:> cordova platform
Installed platforms:
  
Available platforms: 
  android ^9.0.0
  browser ^6.0.0
  electron ^1.0.0
> cordova platform add browser
> cordova run browser
startPage = index.html
Static file server running @ http://localhost:8000/index.html
CTRL + C to shut down

				    

Соrdova. Как выглядит приложение.

Набор UI компонент.

• Сверстанные на HTML/JS/CSS элементы под платформу
• Пример: Onsen UI

Xamarin.

• Ресурс: https://dotnet.microsoft.com/apps/xamarin
• Язык разработки: C#.
• Платформы: Android, iOS, Windows Phone
• UI отдельный для каждой платформы.
• Достигается возможность сделать максимально нативно выглядящее приложение.
• Бизнес логика - общая.
• Разработка может идти на macOS, Windows.

Xamarin. Архитектура.

Native script.

• Ресурс: https://nativescript.org/
• Появился в 2014.
• Платформы: android, iOS
• Веб-фрейморки: Angular, Vue.
• Готовый набор UI компонент.
• Плагин для VS Code.

Native script. Архитектура.

React native.

• Ресурс: https://reactnative.dev/
• Появился в 2015.
• Веб-фрейморк: React (JSX).
• Могут быть отличия ios/android.
• Поддерживается механизм hot-reload.

React native. Архитектура.

React native. Пример.

import React from 'react';
import { Text, View } from 'react-native';

const YourApp = () => {
  return (
    <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
      <Text>
        Some text
      </Text>
    </View>
  );
}

export default YourApp;
				    

Flutter.

• Ресурс: https://flutter.dev
• Первый релиз 2018 год.
• Язык программирования Dart (компилируется в машинный код).
• Набор виджетов: Material для Android и Cupertino для iOS.
• Взаимодействие с платформой через Platform Channels.
• Свой CI/CD: https://codemagic.io/
• Считается на данный момент самым перспективным.

Flutter. Архитектура.

Flutter. Dart.

• Ресурс: https://dart.dev
• АОТ-компиляция. В результате имеем АРМ или х86 код с высоким быстродействием на пользовательском устройстве.
• JIT-компиляция. Дает возможность запускать проект в виртуальной машине на эмуляторе и реализовать hot reload длительностью менее одной секунды с сохранением состояния приложения.
• Строгая система типов. Позволяет забыть о выборе между TS и Flow.
• Tree shaking compiler. При сборке приложения удаляет весь неиспользуемый код.
• Generational garbage collection. Быстрое выделение и очистка памяти.

Dart. Архитектура.

Dart. Пример.

import 'package:flutter/material.dart';

void main() async {
  runApp(
    MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: MyApp(),
      ),
    ),
  );
}

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}


				    

Flutter. "За".

• Собственный рендеринг, независимость от ОЕМ-виджетов и богатый инструментарий разработчика существенно ускоряет написание кода и поддержку двух платформ одновременно.
• Web и desktop — в активной разработке.
• За счет pixel perfect rendering, тестирование и устранение платформо-зависимых багов и нюансов верстки будет проходить существенно быстрее.
• Быстродействие.
• Одинаковый UI на всех устройствах. При необходимости написать приложение с уникальным дизайном, который должен быть одинаковым на двух мобильных платформах.

Flutter. "Против".

• Молодость платформы.
• Dart добавляет накладные затраты на внедрение Flutter за счет необходимости изучать и вникать в новый язык.
• В случае с React Native, они могут быть подключены в проект достаточно быстро. Во Flutter все новые появляющиеся на стороне платформы элементы UI должны быть заново отрисованы.
• Отсутствие вакансий на рынке.