Мобильная разработка сразу для iOS и Android: это как? 

Мобильная разработка сразу для iOS и Android: это как? 

Как устроена кроссплатформенная разработка мобильных приложений

В честь запуска в «Практикуме» курсов по мобильной разработке для Android и для iOS мы разбираем эту тему в журнале: 

В прошлой статье мы говорили, что у каждой платформы есть свои плюсы, минусы и риски. И чтобы писать рабочие приложения, нужно для начала выбрать какую-то одну платформу. 

Но что, если разрабатывать сразу для обеих платформ? Реально ли это и нужно ли? Вот об этом поговорим.

Что такое кроссплатформенная разработка

Кроссплатформенная разработка — это когда мы один раз пишем универсальный код, который потом превращается в приложение и на iOS, и на Android. Реализуется это так:

  1. Один раз пишем кроссплатформенный код.
  2. При компиляции выбираем, для какой платформы адаптировать код.
  3. Кроссплатформенный фреймворк сам меняет свои команды на те, которые приняты на выбранной платформе.
  4. Итоговый код пригоден для запуска на выбранной платформе. 

Можно поставить сразу две галочки и скомпилировать код сразу под iOS и Android — в этом случае фреймворк по очереди преобразует универсальные команды в нужный код и мы получим сразу два приложения. 

В мобильной разработке есть два кроссплатформенных фреймворка — React Native и Flutter. Они написаны на разных языках и работают по-разному.

Мобильная разработка сразу для iOS и Android: это как? 

React Native — JavaScript на максималках

React Native — это развитие библиотеки React, которую используют для создания веб-интерфейсов. Сначала React Native использовали для iOS-приложений, но быстро сообразили, что из него можно сделать универсальный инструмент, и добавили поддержку Android. 

Когда код на React Native компилируется под конкретную платформу, все команды на JavaScript преобразуются во внутренние инструкции операционной системы. За это отвечает движок JavaScriptCore — его использует мобильный браузер Safari. 

Если вы знаете JavaScript, то легко разберётесь в коде на React Native. Вот простой хеллоу ворлд:

var styles = React.StyleSheet.create({
  text: {
    color: 'black',
    backgroundColor: 'white',
    fontSize: 30,
    margin: 80
  }
});
class PropertyFinderApp extends React.Component {
  render() {
    return React.createElement(React.Text, {style: styles.text}, "Hello World!");
  }
}

На React Native написано много известного:

  • Skype,
  • Uber,
  • SoundCloud,
  • Pinterest,
  • Discord.

Сейчас React Native становится всё более популярным: у него большое сообщество, понятная документация и растущий спрос на разработчиков.

Flutter — производительность на своём языке

Если для React Native достаточно знаний JavaScript, то для Flutter нужно будет изучить новый язык — Dart. Его придумала компания Google во имя быстродействия приложений. 

Главное преимущество Flutter в том, что ему не нужна прослойка в виде JavaScriptCore — компилятор переводит всё сразу в код для конкретной платформы. 

Типичный код на Flutter более сложный, чем React Native. Вот пример:

class  _MyHomePageState  extends  State<MyHomePage> {  
  String _name = "";  
  bool _isLoading = false;  

  @override  
  Widget build(BuildContext context) => Center(  
    child: new Column(  
      mainAxisAlignment: MainAxisAlignment.center,  
      children: <Widget>[  
        Padding(  
          padding: EdgeInsets.all(16.0),  
          child: Text(  
            '$_name',  
          ),  
        ),  
        LoadingButton(  
          isLoading: _isLoading,  
          action: _generateName,  
        )  
      ],  
    ),  
  );  
}

На Flutter написано много приложений компании Google (например, почтовый клиент Gmail), а ещё:

  • приложение магазина Aliexpress,
  • Square,
  • Ebay,
  • Groupon.

Плюсы и минусы кроссплатформенной разработки

Плюсы очевидны — такая разработка позволяет сэкономить много времени и сил:

✅ Приложение выходит сразу для iOS и Android.

✅ На написание кода сразу для двух платформ требуется меньше времени.

✅ Не нужно думать, как запрограммировать стандартные элементы интерфейса — с этим справится фреймворк.

✅ При обновлении новую версию получают сразу обе платформы.

✅ Пользователи получают одинаковый интерфейс и логику работы.

Но в конкретном проекте минусы иногда могут оказаться сильнее преимуществ:

❌ В некоторых местах всё-таки требуется писать нативный код, разный для каждой платформы, потому что фреймворки умеют не всё.

❌ У программиста должна быть высокая квалификация — он должен знать особенности разработки для iOS и Android.

❌ Когда приложение становится слишком большим и обрастает новыми возможностями, его становится сложно поддерживать.

Хак: приложения Webview

Есть ещё один вариант кроссплатформенной разработки — создавать приложения с опорой на Web View, то есть на вывод веб-страниц внутри приложения.

В приложениях Webview есть нативная «обёртка» — например нижнее меню — и экран загрузки. Но в сердце этого нативного приложения — большое пустое окно браузера, которое ведёт себя ровно как браузер, с теми же технологиями, ограничениями и безопасностью. 

Когда приложение запускается, оно загружает в этом браузере какой-то сайт — например, если это сервис по заказу суши, он загружает онлайн-меню своего ресторана. Это меню по сути является сайтом — с HTML, JavaScript, каким-то бэкендом, куками и прочими веб-штуками.

⚠️ Главные минусы приложений с Web View — зависимость от интернета и ненативный интерфейс. Все кнопки, выпадайки и галочки нужно программировать с нуля и тестировать на множестве устройств; а если у пользователя проблемы с интернетом, то вообще ничего не будет работать.

Вот винтажный мемчик про это:

Мобильная разработка сразу для iOS и Android: это как?

Что дальше

Пока мы готовим первый кроссплатформенный проект, посмотрите курсы по мобильной разработке: для Android и для iOS. Первый модуль в обоих курсах бесплатный, чтобы проверить, ваше это или нет.

Текст:

Михаил Полянин

Редактор:

Максим Ильяхов

Художник:

Алексей Сухов

Корректор:

Ирина Михеева

Вёрстка:

Кирилл Климентьев

Соцсети:

Виталий Вебер

Получите ИТ-профессию
В «Яндекс Практикуме» можно стать разработчиком, тестировщиком, аналитиком и менеджером цифровых продуктов. Первая часть обучения всегда бесплатная, чтобы попробовать и найти то, что вам по душе. Дальше — программы трудоустройства.
Начать карьеру в ИТ
Получите ИТ-профессию Получите ИТ-профессию Получите ИТ-профессию Получите ИТ-профессию
Еще по теме
Что такое Angular
Что такое Angular

И зачем он фронтенд-разработчику.

medium
Почему разработчики любят запускать Doom на разном железе

Потому что это очень просто.

easy
Богдан Овсиюк: из пограничника в тестировщики за полгода
Богдан Овсиюк: из пограничника в тестировщики за полгода

История выпускника Практикума.

easy
Мобильная разработка для iOS и Android — что лучше и с чего начать?
Мобильная разработка для iOS и Android — что лучше и с чего начать?

Статья для тех, кто не знает, что выбрать

easy
Мальчик заливает на FTP, мужчина поднимает Git

Зачем нужен контроль версий и что делать, если ваши друзья его используют.

hard
Как устроен спутниковый интернет
Как устроен спутниковый интернет

Надёжно, но с большими задержками.

easy
препроцессоры
За что ты послал нам препроцессоры? Чем мы тебя прогневали?

Что такое препроцессоры CSS и зачем они нужны.

medium
Что такое сборщик мусора в программировании
Что такое сборщик мусора в программировании

Чисто и там, где метут, и там, где не мусорят.

medium
Что такое куки

8 вопросов, которые вы всегда хотели задать, но боялись куки.

easy
Прохладная история про погодный зонд, НАСА и невнимательных менеджеров
Прохладная история про погодный зонд, НАСА и невнимательных менеджеров

Золотой фонд менеджерских косяков

easy
easy