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

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

  • 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 (также известный как ReactJS) - это библиотека , используемая для создания интерфейса веб-сайта.
  • Как React, так и React Native используют смесь JavaScript и специального языка разметки JSX.
  • Однако синтаксис, используемый для отображения элементов в компонентах JSX, отличается между React и React Native.
  • Кроме того, React использует некоторые HTML и CSS, в то время как React Native позволяет использовать собственные элементы мобильного пользовательского интерфейса.

JSX

  • JSX – это синтаксическая обертка над JS.
  • Его нет в стандартах ECMAScript, так что инструменты вроде Babel и React занимаются его транспиляцией в обычный JavaScript код.
const profile = (
  <div>
    <img src="avatar.png" className="profile" />
    <h3>{[user.firstName, user.lastName].join(" ")}</h3>
  </div>
);				    
				    
const profile = React.createElement(
  "div",
  null,
  React.createElement("img", { src: "avatar.png", className: "profile" }),
  React.createElement("h3", null, [user.firstName, user.lastName].join(" "))
);

Typescript

  • Является обратно совместимым с JavaScript и компилируется в последний.
  • Фактически, после компиляции программу на TypeScript можно выполнять в любом современном браузере или использовать совместно с серверной платформой Node.js.
  • TypeScript отличается от JavaScript возможностью явного статического назначения типов, поддержкой использования полноценных классов (как в традиционных объектно-ориентированных языках).
  • TypeScript является строго типизированным языком, и каждая переменная и константа в нем имеет определенный тип.
  • При этом в отличие от javascript мы не можем динамически изменить ранее указанный тип переменной.

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. Быстрое выделение и очистка памяти.

AOT и JIT компиляции

  • Компилятор JIT запускается во время выполнения программы, компилируя ее на лету.
  • Первоначальные компиляторы, которые выполняются во время создания программы (до выполнения), называются опережающими компиляторами (AOT).
  • Только статические языки поддаются компиляции AOT в собственный машинный код, потому что машинным языкам обычно необходимо знать тип данных
  • Следовательно, динамические языки обычно интерпретируются или компилируются JIT.

AOT и JIT в dart

  • Поддерживает два вида компиляции AOT и JIT
  • Компиляция JIT используется во время разработки с использованием особенно быстрого компилятора.
  • Затем, когда приложение готово к выпуску, оно компилируется AOT.
  • быстрые циклы разработки и быстрое время выполнения и запуска.
  • Dart также предоставляет автономную виртуальную машину, которая использует сам язык Dart в качестве своего промежуточного языка (по сути, действуя как интерпретатор).

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

Dart. Упреждающее планирование, разделение времени и общие ресурсы

  • Большинство компьютерных языков, поддерживающих несколько параллельных потоков выполнения (включая Java, Kotlin, Objective-C и Swift), используют вытеснение для переключения между потоками.
  • Каждому потоку выделяется "кусочек" времени для выполнения, и если он превышает выделенное время, поток прерывается с помощью переключения контекста.
  • Однако если вытеснение происходит при обновлении ресурса, совместно используемого потоками (например, памяти), это вызывает состояние гонки.
  • способ исправить состояние гонки — защитить общий ресурс с помощью блокировки

Dart. Упреждающее планирование, разделение времени и общие ресурсы

  • Потоки в Dart, называемые изолятами, не используют общую память, что устраняет необходимость в большинстве блокировок.
  • Изоляты общаются, передавая сообщения по каналам, что похоже на акторов в Erlang или web-workers в JavaScript.
  • Dart, как и JavaScript, является однопоточным, что означает, что он вообще не допускает вытеснения.
  • Вместо этого потоки явно уступают (используя async/await, Futures или Streams).
  • Однопоточность помогает разработчику гарантировать, что критически важные функции (включая анимацию и переходы) выполняются полностью, без вытеснения.

Dart. Статические анализ кода

  • Линтер - это инструмент для статического анализа кода, который находит и уведомляет об ошибках, предупреждениях, а также нарушениях стиля кода, чтобы разработчик их исправил.
  • В случае использования Flutter, это один из наиболее простых и полезных пунктов, чтобы сохранять код чистым.
  • lint: https://pub.dev/packages/lint
  • flutter_lints
  • very_good_analysis

Flutter. Локализация

  • Встроенная поддержка
  • Создаются файлы .arb для каждого языка, который будет в приложении.
  • Создаваемые файлы должны быть в папке l10n.
  • У файлов должно быть расширение .arb.
  • Название ключей должно начинаться с маленьких букв — специальные символы запрещены.
  • Не ставьте запятую в конце последней пары «ключ-значение».

Flutter. Локализация

app_en.arb 
{
 “frieghtInRs”: “Freight (Rs)”,
 “gst” : “GST ({rate}%) (Rs)”,
 “@gst”:{
 “description”: “Enter % for gst”,
 “placeholders”: {
 “rate”: {
         “type”:”String”
         }
       }
    }, 
 “language”: “English”
}
app_hi.arb 
{
 “frieghtInRs”: “किराया (रु.)”,
 “gst” : “GST ({rate}%) (रु.)”,
 “language”: “Hindi”
}

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. Окружения (Environments) с различными особенностями

Flutter. "За".

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

Flutter. "Против".

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