The post has been translated automatically. Original language: Russian
A little bit about us
We are a Troubleshooting Technology company, which has been engaged in the design and development of IT solutions for business, education and government agencies for more than 6 years. During this time, we have implemented dozens of projects, from mobile applications and web services to integration platforms and analytics and automation systems.
What are we going to talk about
In the continuation of the last post, let's look at what approaches there are when developing a mobile application. And in this section, we'll talk about the cross-platform approach (one app for iOS and Android based on common code, Flutter, React Native, etc.)
Cross-platform
Cross—platform development is a way to create mobile applications in which the same code can be run on different operating systems (iOS, Android, etc.). Instead of writing a separate version for each platform, the developer uses one framework, and it already adapts the application to the desired system.
The idea of "one code for everyone" existed back in desktop development (Java, Qt), but gained popularity in the mobile world after it became expensive and time-consuming to develop two separate applications. The breakthrough came when Facebook released React Native in 2015, and Google introduced Flutter in 2017.
The approach is good because it saves time and budget, simplifies support, speeds up the launch of MVP and allows you to release updates to both platforms at once.
What is the difference between PWA and native applications?
We talked about PWA in detail in a previous post. In short, this is a mobile-friendly website. A native application is written for a specific OS and makes the most of its features. Cross—platform is the golden mean: the application gets access to almost all the functions of the device, but most of the code is common to both platforms.
React Native
A framework from Facebook, writing logic in JavaScript or TypeScript. The interface is drawn using native iOS and Android components, and communication with them goes through a "bridge" — a special layer that transmits commands between JS and the platform.
Pros: the feeling of a real native interface, a well-developed community, TypeScript support.
Cons: with complex animations, the bridge can become a bottleneck, and for some functions you will still have to write native code.
Flutter
A framework from Google in the Dart language. Instead of using ready-made OS elements, Flutter draws the interface itself, using the Skia engine. This gives the same appearance on all devices and high-speed operation.
Advantages: full control over the design, high performance, predictable display.
Cons: applications are heavier, the design sometimes looks "not native", and there are fewer ready-made libraries than the JavaScript environment.
For most users, the difference with the native app will be minimal. Cross-platform apps are fast and support gestures, animations, and offline functions. Differences can only appear in very resource—intensive tasks - 3D, AR, working with functionality unique to a particular platform, or heavy graphics, where the native still wins.
The cross-platform gives almost full access to the device's functions: camera, GPS, Bluetooth, NFC, sensors, offline mode. If there is no ready-made plugin, the developer can write his own native module and connect it to the common code.
The team is smaller — one or two developers are often enough. The time frame is shorter than when creating two separate native applications, and the cost is usually a third or half lower. Support is simpler: updates and edits are made in a single code, but sometimes new versions of iOS or Android still require improvements for each platform.
A cross—platform is an excellent choice if you need to quickly and relatively inexpensively release an app on iOS and Android, while providing the user with an almost native experience. It is suitable for startups, e-commerce, corporate services, educational and service applications.
It's not the best option for projects with maximum performance and graphics requirements, heavy games, or solutions where a fully native interface is important.
Немного о нас
Мы — компания Troubleshooting Technology, уже более 6 лет занимаемся проектированием и разработкой IT-решений для бизнеса, образования и государственных структур. За это время реализовали десятки проектов: от мобильных приложений и web-сервисов до интеграционных платформ и систем аналитики и автоматизации.
О чем поговорим
В продолжении прошлого поста разберем какие подходы есть при разработке мобильного приложения. И в этом после поговорим про кроссплатформенный подход (одно приложение для iOS и Android на общем коде, Flutter, React Native и пр.)
Кроссплатформ
Кроссплатформенная разработка — это способ создания мобильных приложений, при котором один и тот же код можно запускать на разных операционных системах (iOS, Android и пр.). Вместо того чтобы писать отдельную версию для каждой платформы, разработчик использует один фреймворк, а он уже адаптирует приложение под нужную систему.
Идея «одного кода для всех» существовала ещё в десктоп-разработке (Java, Qt), но в мобильном мире получила популярность после того, как стало дорого и долго разрабатывать два отдельных приложения. Прорыв случился, когда в 2015 Facebook выпустил React Native, а в 2017 Google представил Flutter.
Подход хорош тем, что экономит время и бюджет, упрощает поддержку, ускоряет запуск MVP и позволяет выпускать обновления сразу на обе платформы.
Чем отличается от PWA и нативных приложений
Про PWA мы подробно рассказывали в предыдущем посте. Если вспомнить вкратце, это адаптированный под мобилку веб-сайт. Нативное приложение пишется под конкретную ОС и максимально использует её возможности. Кроссплатформа — это золотая середина: приложение получает доступ почти ко всем функциям устройства, но при этом большая часть кода общая для обеих платформ.
React Native
Фреймворк от Facebook, написание логики на JavaScript или TypeScript. Интерфейс отрисовывается с использованием нативных компонентов iOS и Android, а связь с ними идёт через «мост» — специальный слой, который передаёт команды между JS и платформой.
Плюсы: ощущение настоящего нативного интерфейса, развитое сообщество, поддержка TypeScript.
Минусы: при сложной анимации мост может стать узким местом, а для некоторых функций всё равно придётся писать нативный код.
Flutter
Фреймворк от Google на языке Dart. Вместо использования готовых элементов ОС, Flutter рисует интерфейс сам, через движок Skia. Это даёт одинаковый внешний вид на всех устройствах и высокую скорость работы.
Плюсы: полный контроль над дизайном, высокая производительность, предсказуемое отображение.
Минусы: приложения получаются тяжелее, дизайн иногда выглядит «не по-нативному», а готовых библиотек меньше, чем у JavaScript-среды.
Для большинства пользователей разница с нативным приложением будет минимальной. Кроссплатформенные приложения работают быстро, поддерживают жесты, анимации и офлайн-функции. Отличия могут проявиться только в очень ресурсоёмких задачах — 3D, AR, работе с функционалом уникальным для конкретной платформы, или тяжёлой графике, где натив всё ещё выигрывает.
Кроссплатформа даёт почти полный доступ к функциям устройства: камера, GPS, Bluetooth, NFC, сенсоры, офлайн-режим. Если готового плагина нет, разработчик может написать собственный нативный модуль и подключить его к общему коду.
Команда меньше — зачастую хватает одного-двух разработчиков. Сроки короче, чем при создании двух отдельных нативных приложений, а стоимость обычно на треть-половину ниже. Поддержка проще: обновления и правки вносятся в один код, но иногда новые версии iOS или Android всё же требуют доработок под каждую платформу.
Кроссплатформа — отличный выбор, если нужно быстро и относительно недорого выпустить приложение на iOS и Android, при этом обеспечить пользователю почти нативный опыт. Она подойдёт стартапам, e-commerce, корпоративным сервисам, образовательным и сервисным приложениям.
Не лучший вариант для проектов с максимальными требованиями к производительности и графике, тяжёлых игр или решений, где важен стопроцентно нативный интерфейс.