Попытка №1. Путь в лоб: Классы и интерфейсы

Самый очевидный способ - создать родительский класс с переменными, а языки сделать его наследниками. Но это просто… фиаско. Даже если не писать from/toJson, процесс выглядит так:

1. Объявил переменную в родителе.
2. Прописал её в конструкторе.
3. Повторил то же самое для всех дочерних классов (всех языков).

Если бы я работал на аутсорсе в Индии и мне платили за количество строк кода - это был бы идеальный вариант. Но я хотел, чтобы одной строки при объявлении было достаточно.

Попытка №2. Стандарт (ARB/JSON)

Я поплевался, но решил попробовать - «стандарт» всё-таки. Мало ли, может чего поменялось за годы. Вроде всё завелось, но сам процесс… это боль. Бегать по разным файлам, чтобы добавить одну строчку - так себе удовольствие.

Почему я от него окончательно отказался? Когда данных становится реально много (десятки языков, тысячи строк), ты попадаешь в ловушку: тебе нужно эту махину либо целиком держать в памяти, либо постоянно подгружать и парсить. Ради смены одного слова на кнопке заставлять девайс ворочать тяжелые JSON-ы в рантайме - так себе затея для производительности.

Попытка №3. Таблицы и костыли

Подумал: «Окей, почему бы не подтянуть старый добрый CSV или вообще закинуть всё в табличку?». И тут официальный пакет локализации сказал: «Извини, мужик, тут наши полномочия всё».

Ну, я тоже не пальцем деланный. Решил припахать нейросеть, чтобы она написала мне собственный генератор. Флоу получился такой:

1. Добавляю строку в таблицу.
2. Запускаю генератор.
3. Он лепит «родительский» файл.
4. После Freezed генерит toJson, fromJson…

Короче, весело не было. Мало того, я понимал: если языков станет много, мне придется добавлять их все разом и единовременно, иначе в рантайме всё начнет плеваться ошибками. Плюс та же проблема с памятью: таблица - это структура, которую надо парсить и хранить.

Красный флаг для программиста

Но главная проблема даже не в этом. Необходимость запускать генератор после добавления каждой переменной - это для любого программиста красный флаг.

Что происходит на практике? Когда ты пишешь код и тебе нужно добавить одну несчастную строку, тебе лень (читать: нехочется выходить из потока творения) запускать весь этот цикл с генерацией. Ты просто её хардкодишь в надежде «потом скопом всё добавлю одним махом». А «потом» наступает тогда, когда уже весь проект завален хардкодом, и вычищать его - то еще удовольствие. Даже нейросетки с такими запросами помогают не с первого раза, и с сомнительной эффективностью.

Нутром чуял - флоу неправильный. В итоге я пришел к тому, что называю идеальной локализацией.

Эволюция лени: почему Enum победил интерфейсы

Я начал мучить нейросеть разными вариантами реализации. Для меня в первую очередь был важен флоу работы: мне было тупо лень писать больше одной строки кода, чтобы добавить переменную.

Моя философия проста: строку захардкодить - моментально. Добавление даже одной строки в другом файле требует доп. действий. НО, если действий минимум, то кодер поймет, что выигрыш во времени сейчас мизерный против больших потерь в будущем, и исправно добавит строку в правильное место. Этого не произойдет, если для добавления строки нужно «отчитаться» в десяти местах.

Попытка №4. Рекорды (Records)

Присматривался к рекордам. С ними удобно: не нужно писать конструкторы. Но есть подвох: как только ты добавил переменную в один язык, компилятор тут же сходит с ума и требует добавить её во все остальные прямо сейчас. Никакой гибкости и возможности оставить «на потом».

Идеальный костыль: Enum

В итоге я пришел к самому, казалось бы, «неправильному» способу, который оказался идеальным. Enum. Само название намекает на перечисления и цифры, но оказалось, что хранить в нем буквы и целые фразы - это лучший путь для локализации.

Знаете, мне моё решение так понравилось, что я пошел к нейросетям и проверил его со всех сторон. Все модели остались в полном восторге. Под это дело я даже подготовил монументальную «нейро-статью» на полтора часа внимательного чтения, со всеми графиками, бенчмарками и анализом производительности.

Но потом я заглянул в правила Хабра, прислушался к голосу разума и понял: никто не хочет читать полтора часа сухой статистики. Лучше я просто расскажу вам свою историю «от первого лица», как я докатился до такой жизни. Ну, а если вы совсем уж фанаты цифр - просто скормите этот текст любой нейронке, она вам перескажет всё в лучших академических тонах с графиками на любой вкус.

А здесь мы будем говорить по делу.

Ниже я выкатываю сам код. Код тут не для зубрежки, а лишь чтобы указать направление / идею. Самая большая прелесть этой системы в том, что она оставляет гигантское пространство для любого типа реализации. Это архитектурный каркас, который чертовски сложно сломать. Главное — уловить принцип.

Реализация

Принцип разделения:

• enum Strings → типизированный контракт (что существует).
• translator → источник данных (откуда берётся текст).

Структура файлов - минимальная. Никаких внешних зависимостей:

Ядро - strings.dart

Весь контракт локализации в одном enum. Два режима - хардкод switch и серверный кеш - за одним и тем же

. Даже сообщения об ошибках локализации — сами локализованы:

Список языков - languages_enum.dart

Каждый язык - самодостаточная единица: знает свой код, название, направление текста и как себя загрузить:

Хотите грузить с сервера? Одна строка + loader. И

- тоже одна строка, потому что

уже является registry:

Переводчик - i18n/russian.dart

Как это выглядит в жизни (и почему я перестал хардкодить) Я намеренно не привожу здесь код оберток виджетов или конкретных стейт-менеджеров. Всё это - чистая «вкусовщина». Для работы системы нужен лишь элементарный вещатель событий (Notifier), повешенный на метод смены языка.

Но главное - это мой ежедневный флоу. Сейчас, чтобы добавить строку в UI, я просто вызываю нужный мне ключ: Strings.someKey(). Без контекста, везде.

А если ключа еще нет? Я тупо иду в Strings и добавляю одну строчку в Enum. Всё.

Благодаря дефолтному конструктору, приложению абсолютно плевать, что у меня там еще 100 языков не переведены. Оно компилируется и работает здесь и сейчас. А дальше в дело вступают гит-хуки: при комите нейросетка сама подхватывает изменения и заполняет недостающие поля в переводчиках.

Знаете, какое самое странное чувство? Мне сейчас реально проще и быстрее завести переменную в локализации, чем хардкодить строку в коде. Кажется, это и есть признак здоровой архитектуры - когда делать «правильно» становится физически удобнее, чем делать «быстро» и криво.

Собственно если в кратце это все о чем я хотел рассказать. Если тема зайдет или кто-то сам не сможет допереть, как прикрутить это к своей архитектуре - пишите в комментариях, разберемся.

Надеюсь, мой опыт сэкономит вам пару литров нервных клеток. Всех благ и чистого кода без «магических строк»!

Компания позиционирует Fluorite как универсальную платформу для интерактивных приложений. Причем речь не только об играх, но даже об автомобильных интерфейсах.

Движок на Flutter, но с С++ под капотом

Ключевая идея Fluorite — «Dart-first» архитектура. Логика пишется на Dart и напрямую интегрируется с экосистемой Flutter: виджеты, Hot Reload, Widget Inspector и пакеты из pub.dev работают так же, как в обычных приложениях.

При этом производительность обеспечивается не Flutter-рендерингом. Вся тяжелая часть скрыта в высокоэффективном ECS-ядре на C++, которое отвечает за симуляцию, сцену и взаимодействие объектов.

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

Графика уровня AAA за счет Filament

Для рендеринга Fluorite использует Filament — 3D-движок Google с поддержкой физически корректного освещения (PBR). Это дает современное качество картинки без необходимости писать собственный рендерер или жертвовать производительностью ради кроссплатформенности.

По словам команды, связка Flutter + Filament позволяет разделить ответственность: UI и взаимодействие остаются на Flutter, а графика и сцена — на специализированном движке.

Чем Fluorite отличается от конкурентов

Главное отличие — ориентация на Flutter-разработчиков. Движок не требует изучать отдельный язык или редактор: сцены, логика и интерфейс живут в привычном стеке.

За счет этого итерации быстрее, а входной порог ниже, чем у традиционных игровых движков.

Toyota подчеркивает, что Fluorite — open-source проект и его дальнейшее развитие во многом зависит от сообщества. Судя по архитектуре, компания делает ставку на то, что интерактивные 3D-приложения станут таким же обычным сценарием для Flutter, как мобильные и веб-интерфейсы.

• Решить, с какого языка/технологии вы хотите начать.
• Решить, на каком ресурсе вы хотите обучаться.
• Выделить время на само программирование.

Звучит просто, однако у вас уйдёт много времени на исследования, чтобы решить, что вам подходит и на каком ресурсе обучаться.

Некоторые люди начинают с относительно низкоуровневого программирования на C и C++. Другие выбирают более традиционный путь, изучая Java или C#. Есть и те, кто начинает с высокоуровневых или скриптовых языков вроде Python, Ruby или JavaScript.

Мы классифицируем языки по уровню абстракции. Для новичков: низкоуровневые — как ручная сборка машины (контроль, но сложный); среднеуровневые — как готовый конструктор с инструкцией (сохраняем баланс); высокоуровневые — как приложение на смартфоне (быстро, но меньше контроля). Ниже разберём плюсы и минусы и поможем сделать правильный выбор.

Низкоуровневые языки: близко к «железу»

Это языки, где вы напрямую работаете с памятью компьютера. Нет автоматической уборки ненужных данных, всё под вашим контролем. Подходят для системного ПО, игр или устройств (например, микроконтроллеров).

Примеры: C (для ОС вроде Linux), C++ (для игр на движке вроде Unreal Engine), Assembler (для оптимизации критических частей кода).

Плюсы:

• Полный контроль: вы решаете, как использовать ресурсы. Так, в C++ можно вручную выделять память для массивов, избегая ненужных копий данных.
• Высокая скорость: прямой доступ к памяти позволяет писать код, который работает быстрее (это важно для работы с играми или серверами).
• Основы основ: такие языки учат, как компьютер работает изнутри, чтобы в будущем ценить удобства других языков. Например, вы узнаёте, почему «утечка памяти» — это проблема.
• Эффективность: низкоуровневые языки мотивируют думать об оптимизации заранее, снижая расход батареи или CPU.
• Компактность: минимальная библиотека, приложения получаются лёгкими (идеально для embedded-систем, как в IoT-устройствах).

Минусы:

• Всё-таки это сложно: рутинные задачи (например, чтение файла) требуют больше кода и внимания к деталям, рискуя ошибками вроде переполненного буфера.
• Ручное управление памятью: можно легко «забыть» освободить память, вызвав утечки или краши. Например, в C нужно использовать malloc/free, иначе программа съест всю RAM.
• Много копипасты: придётся писать шаблонный код, и делать это часто.
• Платформо-зависимость: код для Windows может не работать на Linux без правок.

Среднеуровневые языки: баланс контроля и удобства

Эти языки предлагают готовые инструменты, упрощающие работу, но требуют строгой проверки типов данных. Для их запуска нужна специальная программа (среда выполнения). Они идеальны для приложений, серверов и игр.

Примеры: Java (для Android-приложений), C# (для Unity-игр или .NET-серверов).

Плюсы:

• Автоматическая память: память очищается автоматически благодаря сборщику мусора, что избавляет от ручной работы и снижает вероятность ошибок, вроде утечек памяти в больших проектах. При этом можно получить доступ к низкоуровневым функциям для особых задач, например, через специальные инструменты в Java.
• Богатые библиотеки: готовые инструменты для сетей, GUI или баз данных. Пример: Java’s Spring для веб-серверов.
• Кроссплатформенность: компиляция в байт-код (JVM для Java) позволяет запускать код везде. Например, пишешь на Windows, запускаешь на Linux.
• Безопасность: язык проверяет типы данных перед запуском программы, помогая заранее найти ошибки. Среда выполнения защищает от опасных сбоев, например, от переполненной памяти.
• Масштабируемость: встроенные инструменты для параллельных вычислений позволяют легко создавать программы, которые одновременно выполняют много задач (серверы для тысяч пользователей и т.п.).

Минусы:

• Дополнительная нагрузка от рантайма: Среда выполнения и автоматическая очистка памяти создают дополнительную нагрузку. Сборщик мусора может ненадолго останавливать программу, что заметно в играх или при обработке видео.
• Меньше контроля: абстракции скрывают детали памяти, усложняя оптимизацию (например, в Java сложно избежать боксинга примитивов).
• Повторяющийся код, которого много: приходится писать повторяющийся код и тренировать свою усидчивость, например, для доступа к данным объекта. Кстати, инструменты вроде Lombok могут упростить эту задачу.
• Зависимость от среды: для запуска программ нужна специальная среда (например, JVM для Java), что влияет на размер программ и замедляет их старт.
• Сложность интеграции: подключение кода на других языках, например, на C, требует писать специальные обёртки, что усложняет работу и снижает скорость.

Высокоуровневые языки: удобство и скорость разработки

Эти языки скрывают технические детали, позволяя сосредоточиться на создании логики программы. Подходят для веба, data science или скриптов.

Примеры: Python (для ML), Ruby (для веб-разработки), JavaScript (для фронтенда).

Плюсы:

• Простота: сложные задачи решаются в пару строк. Так, в JS async/await упрощает API-запросы.
• Быстрая разработка: динамическая типизация позволяет быстро писать и тестировать код без необходимости его компиляции.
• Богатые экосистемы: есть библиотеки для всего (к примеру, NumPy для данных в Python).
• Гибкость: легко менять код, идеально для прототипов или стартапов.

Минусы:

• Низкая производительность: абстракции добавляют нагрузки. Например, циклы в Python медленнее, чем в C.
• Ошибки на рантайме: из-за слабой типизации ошибки выявляются только при запуске программы, что усложняет отладку.
• Риск «спагетти-кода»: лёгкость изменений может привести к хаосу без дисциплины.
• Скрытые проблемы: абстракции маскируют баги.
• Зависимость от интерпретатора: программы требуют установленного интерпретатора, что замедляет их запуск и добавляет зависимость от дополнительного ПО.

Чек-лист: как выбрать язык программирования для новичка

Этот чек-лист основан на советах экспертов, чтобы помочь новичкам выбрать первый язык программирования. Каждый пункт включает конкретные рекомендации.

1. Определите, что вас вдохновляет, и выберите сферу. Подумайте, что вы хотите создавать: сайты, игры, мобильные приложения или серверы. Разные сферы требуют разных языков. Например, для веб-разработки подойдут JavaScript или Python, для мобильных приложений — Java, Kotlin, Swift или Dart, а для игр — C# или C++. Составьте список идей (например, сайт-визитка, игра, аналитика данных) и найдите, какие языки для них используют.
   — Аня Жаркова, руководитель мобильной разработки в USETECH
2. Ищите язык с широким применением. Выбирайте языки, которые используются в разных областях, чтобы легче переключаться между задачами. Например, Kotlin подходит для мобильной разработки, веба и серверов, а C# — для десктоп-приложений, игр (Unity) и бэкенда. Это даёт гибкость и упрощает изучение новых языков в будущем.
   — Аня Жаркова, руководитель мобильной разработки в USETECH
3. Проверьте спрос на рынке труда. Если цель — смена профессии, изучите вакансии на HH.ru или LinkedIn. Введите «junior Python», «junior Java» и сравните, где больше предложений и какие требования. Избегайте языков с низким спросом, если хотите быстро найти работу. Например, Java, Kotlin, Python и JavaScript популярны для найма.
   — Владислав Масунов, Head of Development
4. Опробуйте языки на практике. Напишите простые программы (например, "Hello World" или калькулятор) на нескольких языках, чтобы понять, какой синтаксис вам ближе. Используйте онлайн-редакторы вроде Replit или CodePen. Например, попробуйте TypeScript для веба (он поддерживает типизацию и разные подходы к программированию) или C++ для понимания работы с памятью. Это поможет почувствовать, к чему лежит душа.
   — Рома Троицкий, фронтенд-инженер в Сбер B2C, член ПК HolyJS & MoscowCSS; Евгений Антонов, ИТ-консультант, автор тг-канала @general_it_talks
5. Выберите язык с хорошей документацией и сообществом. Убедитесь, что у языка много обучающих материалов и активное сообщество. Например, TypeScript имеет богатую документацию и поддержку, что упрощает старт. Проверьте ресурсы вроде LearnPython.org, freeCodeCamp для JavaScript или Telegram-чаты для C++. Это поможет быстрее решать вопросы.
   — Рома Троицкий, фронтенд-инженер в Сбер B2C, член ПК HolyJS & MoscowCSS
6. Учитывайте сложность и карьерные цели. Для небольших проектов или быстрого старта берите Python или PHP — они проще и подходят для веб-разработки или скриптов. Для сложных задач с высокой нагрузкой (например, серверы или оптимизация) попробуйте C++ или Go. Если цель — работа в крупных компаниях, Java и Kotlin востребованы и часто используются с ИИ-инструментами. Выбирайте, исходя из сложности и ваших амбиций.
   — Евгений Антонов, ИТ-консультант, автор тг-канала @general_it_talks
7. Смотрите на универсальность и переход к другим языкам. Выбирайте язык, который учит основам программирования и упрощает переход к другим. Например, изучение C# может помочь освоить Java, а затем — Android-разработку. TypeScript учит объектно-ориентированному и функциональному программированию, что полезно для разных задач. Это создаёт базу для дальнейшего роста.
   — Аня Жаркова, руководитель мобильной разработки в USETECH; Рома Троицкий, фронтенд-инженер в Сбер B2C, член ПК HolyJS & MoscowCSS
8. Не гонитесь за гилти плежа. Избегайте языков, которые изучают «для удовольствия» без практического применения. Выбирайте те, которые можно применить в реальных проектах или которые востребованы в индустрии. Например, вместо нишевых языков берите Python, Java или Kotlin: они имеют чёткие сценарии использования.
   — Аня Жаркова, руководитель мобильной разработки в USETECH
9. Практикуйтесь с ИИ-инструментами. Если хотите работать в крупных компаниях, освойте язык, который хорошо сочетается с ИИ-инструментами (например, Go или Java). Практикуйтесь с ИИ-агентами по типу GitHub Copilot для автоматизации задач — это ценится работодателями.
   — Евгений Антонов, ИТ-консультант, автор тг-канала @general_it_talks
10. Составьте план развития. Создайте roadmap: определите, какие проекты хотите делать через 3-6 месяцев (например, мобильное приложение или веб-сервис), и подберите язык под эти цели. Если выбрали C#, начните с десктоп-приложений, затем попробуйте Xamarin для кроссплатформенной разработки. Постепенно добавляйте новые языки, опираясь на первый.
    — Аня Жаркова, руководитель мобильной разработки в USETECH

Если не определились, предлагаем пройти квиз и расставить всё по полочкам:

Определяем цель

Успех приложения начинается с четкого понимания, зачем оно нужно — так становится проще определить целевую аудиторию. Это влияет не только на функционал, но и на дизайн, способы продвижения и даже тон общения с пользователями.

Некоторые программы помогают развивать существующий бизнес — как это делают банковские сервисы, которые упрощают работу с клиентами. Другие становятся самостоятельными продуктами, например, для обучения, занятий спортом или развлечений.

Кроме того, приложение должно решать реальные проблемы пользователей. Допустим, вы задумали создать программу для фрилансеров. Решили провести исследование, и оно показало, что фрилансеры часто страдают от прокрастинации и ненавидят заниматься выставлением счетов клиентам. Ваша идея и главная фишка — приложение, которое автоматизирует процесс оплаты, контролирует сроки выполнения проектов и помогает планировать рабочее время.

Чтобы убедиться, что идея действительно рабочая, проведите опросы в Telegram-каналах фрилансеров или создайте анкету. Вы можете спросить, какие функции для них наиболее актуальны: автоматический расчет налогов, интеграция с платежными системами или отслеживание времени работы. Это поможет сфокусироваться на действительно важных фичах и отсеять второстепенные.

Выбираем платформу и инструменты

Сегодня на российском рынке доминируют две мобильные операционные системы: Android (около 70% пользователей) и iOS (около 30%). Оптимальным решением будет разработка приложения для обеих платформ, особенно если вы ориентируетесь на крупные города, где доля пользователей iOS существенно выше.

Приложения под Android большинство разработчиков пишет на Kotlin, хотя Java до сих пор остается одним из вариантов из-за обширной базы готовых решений и библиотек. Основной средой выступает Android Studio — в ней есть весь необходимый инструментарий для создания, отладки и тестирования приложений. Современные разработчики активно используют Jetpack Compose для построения пользовательского интерфейса, Room для работы с базами данных, Retrofit для сетевых запросов и Dagger или Hilt для внедрения зависимостей.

В мире iOS основным языком программирования стал Swift — современный и безопасный инструмент для нативных приложений. Разработка ведется в среде Xcode, официальной IDE от Apple. Для построения интерфейсов все чаще используется SwiftUI, для управления данными — Core Data, а для сетевого взаимодействия — фреймворк Alamofire. Работа с асинхронными событиями упрощается с помощью фреймворка Combine.

При ограниченных ресурсах можно рассмотреть кросс-платформенную разработку. Так, Flutter использует язык программирования Dart и позволяет создавать производительные приложения с нативным внешним видом. React Native дает возможность применять веб-технологии для мобильной разработки, а Xamarin ориентирован на разработчиков, привыкших к экосистеме Microsoft и языку C#.

Выбор платформы и инструментов должен основываться на характеристиках вашей ЦА, требованиях к функционалу и имеющихся ресурсах. Учитывайте также, что для разных магазинов приложений (RuStore, App Store, Google Play) могут потребоваться специфические оптимизации и настройки.

Продумываем функционал

При разработке функционала важно следовать концепции MVP (Minimum Viable Product) — минимально жизнеспособного продукта. Это позволит быстрее выйти на рынок, получить обратную связь и итеративно улучшить приложение.

Возьмем для примера приложение доставки еды. В этом случае MVP должен включать:

• авторизацию пользователя через телефон, email или социальные сети;
• каталог ресторанов с фильтрацией по кухне, рейтингу и времени доставки; меню каждого заведения с фотографиями и описанием блюд;
• корзину с возможностью изменения состава заказа;
• оформление заказа с выбором адреса доставки и способа оплаты;
• отслеживание статуса заказа в реальном времени;
• профиль пользователя с историей заказов.

Важно уделить внимание и техническим аспектам функционала:

• Локальное кэширование данных. Поддерживает работу приложения при слабом интернет-соединении или его отсутствии. Сохраняет каталоги, популярные позиции и историю действий пользователя.
• Офлайн-режим. Определяет набор функций, доступных без подключения к сети. Критически важен для удержания пользователей в зонах с плохим интернетом.
• Система пуш-уведомлений. Информирует пользователей о важных событиях, статусах заказов и специальных предложениях. Повышает вовлеченность и возвращаемость в приложение.
• Многопоточная обработка. Выполняет ресурсоемкие операции в фоновом режиме. Гарантирует отзывчивость интерфейса даже при выполнении сложных задач.
• Оптимизация изображений. Внедряет алгоритмы сжатия для быстрой загрузки визуального контента. Обеспечивает комфортное использование даже при ограниченной скорости соединения.

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

Также многие игнорируют обратную связь пользователей, хотя механизмы ее сбора стоит включать уже в MVP. Недостаточное внимание к безопасности может стать критичным для приложений с личными данными и платежами. А отсутствие встроенных инструментов аналитики затрудняет понимание того, как пользователи взаимодействуют с программой.

Выбор правильной архитектуры — это фундамент, который определяет надежность, масштабируемость и удобство поддержки. Вот основные паттерны для мобильных приложений:

• MVVM — рекомендуемый Google подход с разделением UI и бизнес-логики
• MVI — однонаправленный поток данных, хорошо сочетается с реактивным программированием
• MVP — классическая архитектура. Популярна благодаря простоте реализации
• Clean Architecture — многослойный подход с упором на тестируемость и гибкость
• VIPER (iOS) — расширенный MVC со строгим разделением ответственности

Важное значение имеет также выбор технологий для хранения и передачи данных. Для локальной работы подойдут SQLite + Room, Realm или DataStore; для сетевого взаимодействия на Android чаще всего используют Retrofit + OkHttp, а в реактивных сценариях — Ktor Client.

Правильный выбор архитектуры напрямую зависит от масштаба проекта и размера команды. Небольшие приложения могут обойтись простыми решениями, тогда как сложные продукты требуют комплексного подхода с продуманным разделением ответственности.

Создаем удобный интерфейс

Интерфейс — это лицо приложения. Даже если у вас отличный функционал, но пользоваться им неудобно, людям будет проще удалить программу и найти что-то другое.

Эффективный UI/UX строится на пяти ключевых принципах:

1. Очевидность (интуитивное понимание интерфейса);
2. Экономия внимания (минимум шагов для достижения цели);
3. Консистентность (единообразие элементов с одинаковой функциональностью);
4. Обратная связь (видимый результат каждого действия);
5. Прощение ошибок (возможность отмены операций).

Современные инструменты значительно ускоряют создание качественных интерфейсов. Дизайнеры используют Figma, Adobe XD и Sketch для прототипирования. Android-разработчики предпочитают Jetpack Compose и Material Design Components. Для iOS актуальны SwiftUI, UIKit и Human Interface Guidelines от Apple.

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

Проводим тестирование

Юзабилити-тесты с фокус-группами, A/B-тестирование элементов и аналитика пользовательского поведения дают объективную картину взаимодействия клиентов с приложением.

Комплексное тестирование включает два основных направления:

1. Автоматизированное тестирование: unit-тесты (JUnit, XCTest) для проверки отдельных компонентов; интеграционные тесты для проверки взаимодействия между модулями; UI-тесты (Espresso, XCUITest) для проверки интерфейса; end-to-end тесты для имитации полного пользовательского сценария.
2. Ручное тестирование: функциональное (соответствие требованиям), тестирование производительности (работа под нагрузкой), юзабилити (оценка удобства), кросс-платформенное тестирование (проверка на разных устройствах) и тестирование подключений (поведение при различном качестве интернет-соединения).

Для этого используют специализированные инструменты: Firebase Test Lab для запуска тестов на множестве устройств, Crashlytics для мониторинга сбоев, Android Profiler и Xcode Instruments для анализа производительности. А Accessibility Scanner помогает адаптировать интерфейс для людей с ограниченными возможностями, расширяя потенциальную аудиторию.

Публикуем приложение

После тестирования и исправления проблем наступает ответственный момент публикации. Каждый магазин приложений имеет свои особенности процесса:

• Google Play: создание аккаунта разработчика ($25 единоразово); подготовка материалов (иконка, скриншоты, видео, описание); загрузка APK/App Bundle; заполнение формы оценки контента; настройка дистрибуции и ценообразования; ожидание проверки (до 2 дней).
• App Store: регистрация в Apple Developer Program ($99/год); создание записи в App Store Connect; подготовка маркетинговых материалов; загрузка сборки из Xcode; заполнение информации о возрастных ограничениях; ожидание рассмотрения (1-7 дней).
• RuStore: бесплатное создание аккаунта; подготовка материалов; загрузка APK; заполнение метаданных; быстрая модерация (до часа).

Перед публикацией важно убедиться в соответствии приложения правилам магазина, подготовить политику конфиденциальности и настроить аналитику для мониторинга производительности с первого дня.

Поддерживаем и обновляем

После выпуска начинается непрерывный процесс поддержки и совершенствования продукта. Разработчики регулярно исправляют найденные ошибки, добавляют новые функции и улучшают работу уже существующих.

Для эффективного мониторинга используют комплексные аналитические инструменты: Firebase Crashlytics для отслеживания сбоев, Firebase Analytics/Google Analytics для анализа пользовательского поведения, RuStore Remote Config — бесплатный аналог Firebase, Mixpanel для углубленного анализа пользовательских путей, AppMetrica от Яндекса как комплексное решение для российского рынка.

Автоматизация процессов разработки критически важна для регулярных релизов. CI/CD-системы (GitHub Actions, GitLab CI, Bitrise, Fastlane) позволяют автоматизировать сборку, тестирование и публикацию обновлений, значительно сокращая время выхода новых версий.

Оптимальная стратегия обновлений включает регулярный график релизов (каждые 2-4 недели) с четким приоритетом задач: критические исправления, новые функции, оптимизация производительности. В тренде современной разработки: персонализация на основе ИИ, многофункциональные суперапп-решения, адаптация под новые форм-факторы устройств и повышенное внимание к приватности данных.

Продвигаем приложение

На рынке огромная конкуренция, и без активного продвижения ваш продукт просто затеряется среди тысяч других программ. Важную роль здесь играет ASO (App Store Optimization) — оптимизация для магазина приложений. В некоторых случаях был зафиксирован рост установок до 70% благодаря сильным ASO-стратегиям.

Для Android-приложений это означает настройку страницы так, чтобы пользователи легко находили ваш продукт. Здесь важно правильно подобрать ключевые слова для описания, создать привлекательную иконку и подготовить качественные скриншоты. Чтобы понять, какое оформление работает лучше, разработчики всё чаще используют A/B-тесты — такая возможность есть, например, в RuStore. Она позволяет сравнить разные версии карточки приложения и выбрать ту, которая эффективнее привлекает пользователей.

Также разработчики могут использовать как бесплатные, так и платные форматы продвижения. Один из бесплатных форматов — фичеринг, когда редакция размещает приложение в подборках, разделах или на главной странице магазина. Платное же продвижение позволяет настраивать таргетинг по демографии, географии, интересам, ключевым фразам и устройствам, а также запускать кампании прямо в поисковой выдаче магазина.

Еще один инструмент для продвижения приложений — социальные сети. Здесь можно показывать функционал программы, общаться с пользователями, отвечать на их вопросы и рассказывать о новых опциях. Это помогает создать активное сообщество вокруг продукта. Так, к примеру, В 2023 году компания Geozilla, разработчик приложения для отслеживания местоположения близких, провела кампанию по продвижению с инфлюенсерами в социальных сетях. В рамках сотрудничества удалось собрать более 1 миллиона просмотров, а коэффициент конверсии из кликов в установки приложения составил 24%.

Партнерские программы и рекламные кампании тоже сильно влияют на привлечение новых пользователей. Нельзя забывать и о работе с отзывами — нужно активно отвечать на комментарии и решать проблемы, о которых пишут люди.

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

Подводим итоги

Создание успешного приложения начинается с четкого определения цели и понимания потребностей пользователей. Затем нужно выбрать подходящие технологии, продумать необходимые функции, спланировать архитектуру и разработать понятный интерфейс. Обязательно проведите тщательное тестирование перед запуском. После публикации важно регулярно обновлять приложение на основе отзывов пользователей и данных аналитики, а также активно продвигать его в магазинах приложений и социальных сетях.

Не гонитесь за модными технологиями ради технологий — сосредоточьтесь на том, что действительно нужно вашим пользователям. Если вы создадите действительно полезный и удобный продукт, он найдет свою аудиторию и станет успешным.

iOS или Android? React Native или Flutter? Собираем все новости и гайды по мобильной разработке тут.

По данным опроса Statista, 46% разработчиков выбирают Flutter, когда нужно создать кроссплатформенное приложение.

Flutter компилируется в нативный код. Приложение на языке Dart можно адаптировать под Windows, Linux, macOS, Web — плагины и библиотеки решают 99% задач. Только в отдельных случаях понадобится доработка нативного кода.

При этом нет проблем с производительностью — движок Флаттера написан на C++.

Как установить и настроить окружение

Ссылка на загрузку Flutter с официального сайта:

• https://docs.flutter.dev/get-started/install/windows/desktop?tab=download

Фреймворк загрузится в виде архива, его нужно распаковать на диск. Например, в папку C:\flutter.

При установке необходимо добавить путь к директории в переменную среды PATH. IDE полагаются на переменную PATH для обнаружения и интеграции с Flutter SDK.

Задача — открыть настройки переменных среды, изменить «Path», добавить путь до папки bin.

Теперь команды flutter, flutter doctor, flutter run будут запускаться из любой директории в командной строке.

Настройка окружения

Flutter-разработчики обычно работают в Android Studio, но писать код можно и в других IDE. Рассмотрим процесс установки окружения на примере ОС Windows:

1. Загружаем установщик Android Studio с официального сайта (1.1 Гб).

2. Выполняем установку компонентов IDE.

3. После распаковки Android Studio предложит загрузить и установить набор для разработки. Среди инструментов — эмулятор ОС Андроид.

4. После установки нужно добавить плагин Flutter в IDE (еще понадобится Dart, но он подгрузится автоматически).

5. Далее выбираем SDK-платформу для разработки, устанавливаем дополнительные компоненты.

6. Выбираем модель виртуального устройства во вкладке Device Manager.

На этом базовая настройка окружения завершена.

Если планируете писать код на Flutter в Visual Studio Code, обратите внимание на следующее видео. Автор подробно рассказывает о том, как связать эмулятор и IDE VS Code. Нужно будет добавить новые пути для переменных среды в настройках системы.

Как создать первое приложение на Flutter

Создать новый проект можно через Android Studio. Сразу после запуска IDE нужно выбрать «New Project».

Рассмотрим менее очевидный путь — через Flutter CLI (Command Line Interface):

1. Откройте командную строку или терминал VS Code;
2. Перейдите в папку, где хотите создать проект;
3. Выполните команду:

где «my_new_project» — имя проекта.

Flutter автоматически создаст необходимые файлы и папки для базового приложения.

Структура проекта

Рассмотрим основные директории и файлы созданного проекта:

• .dart_tool используется пакетным менеджером Dart.
• .idea хранит специфичные настройки проекта в виде xml-файлов.
• android и ios содержат нативные файлы платформ. Используются, когда нужно реализовать специфичную фичу для android или ios.
• lib содержит исходный код приложения на Flutter. Это рабочая директория. Main.dart — точка входа в приложение.
• test хранит тесты, проверяющие правильность работы приложения.
• .gitignore содержит список файлов, которые игнорируются при работе с git.
• .packages содержит список всех включенных пакетов Dart.
• pubspec.yaml хранит зависимости проекта, плагины.

Запуск приложения

Приложение запустится на эмуляторе, который мы ранее установили вместе с Android Studio.

Перейдите в терминал, откройте папку с проектом и выполните команду:

Flutter скомпилирует код и запустит мобильное приложение. Через несколько секунд на экране эмулятора появится интерфейс смартфона с запущенным счетчиком кликов.

Поздравляем с первым запуском Flutter-приложения!

Пользовательский интерфейс в Flutter строится с помощью виджетов — классов, которые описывают, как должен выглядеть UI. Код приложения генерирует счетчик в файле main.dart. Внутри содержится MaterialApp — корневой виджет, который настраивает тему и домашний маршрут приложения.

Свойство home указывает на виджет MyHomePage — главный экран приложения. Внутри MyHomePage есть базовая разметка: AppBar с заголовком и центрированный текст со счетчиком нажатий.

Виджеты содержат методы build. Flutter вызывает их при первом построении интерфейса и при каждом обновлении состояния. Они возвращают другие виджеты, которые образуют дерево виджетов. Структура вложенных UI-компонентов и определяет внешний вид приложения.

Запущенное демо-приложение уже реагирует на нажатия кнопки и обновляет счетчик. Это работает благодаря Stateful виджету и изменению его состояния в методе setState.

Подробнее о видах виджетов и управлении состоянием — в следующем разделе.

Основные концепции Flutter

Особенность фреймворка в виджетах — это строительные блоки, из которых состоит все приложение. Разработчику нужно лишь скомбинировать виджеты и настроить свойства, чтобы получить желаемый интерфейс.

В Flutter есть готовые виджеты. Условно их можно разделить на две категории: статичные и интерактивные.

Статичные виджеты просто отображают какой-то контент и никак не реагируют на действия пользователя. Примеры статичных виджетов — Text для отображения текста, Image для картинок, Icon для иконок.

Интерактивные виджеты реагируют на события, например, на нажатия пользователя. Они делают приложение живым и динамичным. Часто используются кнопки, поля ввода, чек-боксы, переключатели. Даже простое приложение не обходится без интерактивных элементов.

Stateless и Stateful виджеты

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

Единственный способ изменить Stateless виджет — создать новый экземпляр.

Stateful виджеты имеют внутреннее состояние, которое может меняться со временем. Когда состояние объекта меняется, Flutter автоматически перерисовывает виджет, чтобы отобразить актуальные данные.

Типичный пример Stateful виджета — счетчик кликов, который запускали в предыдущем разделе. При каждом нажатии на кнопку счетчик увеличивается, состояние виджета меняется, и Flutter обновляет интерфейс.

StatelessWidget предлагает только один публичный API для запуска сборки — конструктор. StatefulWidget имеет множество триггеров, вызывающих пересборку.

Структура виджетов

Подробнее рассмотрим дерево виджетов — иерархическую структуру вложенных компонентов. Для этого в качестве примера будем использовать код простого «Hello, World!» приложения.

На вершине дерева корневой виджет MyApp. Остальные — его потомки. Когда Flutter рисует интерфейс, он обходит дерево виджетов сверху вниз и отображает каждый в соответствии с его свойствами и состоянием (декларативный подход).

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

Мы как бы говорим Flutter: «Хочу, чтобы мой интерфейс выглядел вот так», и фреймворк самостоятельно определяет, как ему достичь результата максимально эффективным способом.

Преимущества декларативного подхода:

• Код становится более читаемым и понятным. Глядя на дерево виджетов, можно сразу представить, как будет выглядеть интерфейс.
• Нет проблем, связанных с ручным обновлением интерфейса. Flutter сам заботится о перерисовке виджетов и делает это эффективно.

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

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

Как добавить функционал в приложение

Самый важный виджет для компоновки UI — контейнеры и лейауты.

Контейнеры позволяют группировать и оформлять другие виджеты, задавать им отступы, цвета, границы.

Лейауты отвечают за расположение виджетов на экране. С помощью них можно создавать адаптивные интерфейсы, которые подстраиваются под размер экрана устройства.

Чтобы приложение было интерактивным, нужно обрабатывать события и действия пользователя. В Flutter для этого используются колбэки — функции, которые вызываются при определенных событиях. Например, у кнопки есть колбэк onPressed, который срабатывает при нажатии на кнопку.

Внутри колбэков можно писать код на Dart, который будет работать при наступлении события. Например, при нажатии на кнопку «Добавить» — сохранить введенный текст или отфильтровать список по введенному запросу.

Редко приложения состоят из одного-единственного экрана. Обычно есть несколько связанных экранов, между которыми пользователь может переключаться. В Flutter за навигацию отвечает виджет Navigator и класс Route. Чтобы добавить, например, экран настроек, нужно создать для него отдельный виджет и класс. Затем, по нажатию на кнопки, вызвать метод Navigator.push и передать ему новый маршрут.

Плагины в Flutter

Дополнения от сообщества разработчиков расширяют возможности приложения: интеграция с камерой, геолокация, работа с базой данных, сетевыми запросами и др.

Плагины находятся на pub.dev — официальном репозитории Dart и Flutter. Чтобы подключить плагин к проекту, нужно добавить его в файл pubspec.yaml и выполнить команду «flutter pub get».

Плагины ускоряют разработку, но злоупотреблять ими не стоит — каждый импорт увеличивает размер приложения на Flutter, усложняет отладку.

Плагины имеют документацию и примеры использования, которые можно найти на странице pub.dev или в репозитории на GitHub.

Советы для начинающих

Обучение на джуна только начинается, и одной статьи для старта недостаточно.

Начнем с главного вопроса: как лучше всего изучать Flutter?

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

Самое важное — официальная документация Flutter. В ней более подробно описаны концепции, виджеты, пакеты и инструменты. Документация обновляется и дополняется, в ней только актуальная информация.

Начать советуем с раздела документации Codelabs. Это пошаговые интерактивные уроки, которые научат создавать приложения шаг за шагом. Каждый Codelab посвящен определенной теме, содержит инструкции, видеоуроки и готовый код.

Обучение Flutter — не только чтение документации и просмотр уроков. Не менее важно общение с другими разработчиками и участие в жизни Flutter-комьюнити.

Сообщество Flutter сосредоточено в Discord. Здесь тысячи разработчиков готовы помочь с решением проблем, обсудить новости и поделиться опытом. На сервере есть отдельные каналы для новичков, обсуждения плагинов, поиска работы.

Популярные ошибки новичков при изучении Flutter

Изучая Flutter, начинающие разработчики повторяют одни и те же ошибки. Несколько советов, которые ускорят обучение:

• Невозможно выучить все и сразу. Flutter — обширный фреймворк. Сосредоточьтесь на виджетах, статическом и динамическом UI, навигации. Изучайте новые темы и инструменты по мере необходимости.
• Пишите больше кода. Как бы хорошо вы ни знали теорию, настоящее обучение происходит во время практики.
• Уделите внимание основам Dart. Flutter написан на языке Dart, поэтому для разработки нужно понимать его синтаксис, типы данных, ООП.
• Начинающие разработчики злоупотребляют комментариями, пытаясь объяснить каждую строчку кода. Однако хороший код должен быть понятным без пояснений.
• Ошибки — неотъемлемая часть обучения. Не бывает разработчиков, которые никогда не допускали ошибок. Признавайте, анализируйте, исправляйте недочеты.
• Чтобы побороть лень, пробуйте начинать с малого. Возьмите простую, но конкретную задачу, которую точно сможете быстро решить. Как только справитесь с ней, почувствуете прилив энергии и мотивации.
• С самого начала уделяйте внимание архитектуре. Используйте StatefulWidget и StatelessWidget по назначению. Вынесите бизнес-логику и данные в отдельные классы и сервисы.
• Помните о null-безопасности. Используйте «?» для значений, которые могут быть null. Проверяйте наличие объекта с помощью «if» или «?.» перед вызовом его свойств и методов. Если нужно задать значение по умолчанию для null, пользуйтесь оператором «??».

Чтобы уверенно чувствовать себя во Flutter, нужно минимум полгода. Удачи в начинаниях и приятной разработки!

Если вы только начали работать с мобильной разработкой или уже мидл/сеньор, собрали всю полезную информацию тут.

• Swift против Dart;
• R против Python.

Выберите лучшие из языков, но помните: голосуйте сердцем! Не думайте об их популярности или востребованности. В этом турнире важна только народная любовь.

Со всеми условиями батла можно ознакомиться в анонсе.

Голосование продлится до завтра, 20 декабря 2023 года, до 11 часов по МСК.

Боитесь пропустить следующие раунды батла? Подпишитесь на тэг Лучший язык 2023. Тогда новые раунды появятся в вашей личной ленте, а вам будут приходить уведомления об их появлении.

Мы уже проводили батл в прошлых 2020, 2021 и 2022 годах: первые два раза в голосовании победил Python, а в прошлом году — C#.

Вот, кто поборется за звание лучшего языка в 2023 году:

Правила батла остаются прежними:

1. В батле участвует 16 языков программирования.
2. Ежедневно соревнуются две пары.
3. За любимый язык можно проголосовать в течение 24 часов.
4. Пары составляются рандомно, так что выбирайте язык, который субъективно нравится больше.
5. В финале мы определим тройку победителей.
6. Старт — 19 декабря, финал — 26 декабря.

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

1. Первый раунд
2. Второй раунд
3. Третий раунд
4. Четвёртый раунд
5. Пятый раунд
6. Шестой раунд
7. Полуфинал
8. Финал
9. Результаты

Также подпишитесь на тэг Лучший язык 2023. Тогда новые раунды батла появятся в вашей личной ленте, а вам будут приходить уведомления об их появлении.

Старт уже завтра — 19 декабря в 11:00 МСК. Следите, участвуйте, голосуйте!

Илья Задябин, разработчик мобильных приложений, специализирующийся на Flutter и Dart.

Что такое Flutter, в чем особенности этой технологии

Flutter — это открытая кросс-платформенная технология от Google, предназначенная для создания приложений для iOS, Android, Web и настольных операционных систем из единой кодовой базы. Она использует язык программирования Dart и предоставляет свой собственный набор виджетов для создания интерфейса. Сейчас Flutter поддерживает iOS, Android, Web, Windows, Linux, macOS и с недавнего времнени WebAssembly.

В основном Flutter применяют для мобильных приложений, потому что фреймворк достаточно недавно обзавёлся поддержкой остальных платформ. Также Flutter поддерживается на “встраеваемых устройствах” (embedded devices), например, Toyota использует эту технологию для мониторов в своих автомобилях.

Технология зарекомендовала себя на рынке и используется в широком спектре приложений. Например, в приложении для электромобилей BMW, Google Pay – команда провела миграцию с нативного кода на Flutter прежде чем выйти на глобальный рынок, Ebay, ByteDance, NuBank, а также в Alibaba.

Теперь немного про “внутренности” Flutter и про то, почему вообще возможно запускать один и тоже же код на принципиально разных платформах.

Было бы очень сложно и долго подстраивать технологию под разные API этих платформ, поэтому команда Flutter пошла другим путём.

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

Flutter использует многоуровневую архитектуру. Верхний слой – фреймворк, состоящий из кода на языке Dart. Нижний слой – движок, написанный преимущественно на языке C++ и обеспечивающий низкоуровневую реализацию основных API Flutter. Наконец, есть Embedder, который интегрирует движок Flutter в различные платформы.

2. Процесс рендера

В отличие от Android и iOS, где используются элементы, специфичные для каждой платформы, Flutter имеет собственный движок рендеринга. Приложения Flutter рендерят пользовательские интерфейсы с помощью Skia Graphics Engine, что означает, что Flutter рисует каждый элемент UI (виджет) на холсте, предоставляемом каждой платформой.

3. Компиляция

Flutter использует язык Dart, который компилируется в нативный код. Компиляция в нативный код позволяет Flutter взаимодействовать с платформой без моста JavaScript (как в некоторых других кросс-платформенных решениях), что обеспечивает производительность, близкую к нативной.

4. Виджеты

Everything in Flutter is a widget, от простого текста до сложной анимации. Эти виджеты не являются родными компонентами Android или iOS, но настроены так, чтобы выглядеть как родные элементы. Из виджетов, как из кирпичей, собирается всё приложение. Такая система может быть более понятной для новых разработчиков.

5. Platform Channels

Для доступа к специфическим для платформы функциям (камера, GPS, микрофон…) Flutter использует Platform Channels. Эти каналы позволяют приложениям Flutter выполнять действия на iOS или Android с использованием их родных языков программирования (Kotlin для Android, Swift для iOS).

Декларативное VS императивное программирование

Одной из особенностей Flutter является декларативный стиль описания UI элементов. Сперва про отличия:

• Декларативное программирование. Основное внимание уделяется вопросу “что” в коде. Вы описываете то, ЧТО хотите получить, а система (фреймворк или библиотека) занимается деталями того, как это реализовать. Этот стиль абстрагирует процесс управления UI, и разработчику не нужно описывать шаги для достижения конечного результата.
• Императивное программирование. Концентрируется на “как”. Процесс состоит из написания кода, описывающего шаги для достижения цели. Разработчик должен описать каждый шаг, который должна выполнить программа, что дает ему больше возможностей для контроля, но также увеличивает сложность.

Итак, Flutter использует декларативный подход к построению UI. Вот как это работает: UI является отражением состояния. Вы определяете состояние, а пользовательский интерфейс автоматически адаптируется и рендерится в соответствии с этим состоянием. Это означает, что при изменении состояния Flutter точно знает, что изменилось, и может эффективно (быстро) обновлять пользовательский интерфейс.

Для построения пользовательского интерфейса используется дерево виджетов. Каждый виджет декларирует часть UI, а всё дерево в целом представляет весь интерфейс. При каждом изменении состояния Flutter автоматически перестраивает дерево виджетов, обеспечивая отображение 1:1 текущего состояния и пользовательского интерфейса.

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

• Android. XML-файлы определяют элементы пользовательского интерфейса, которые затем используются в коде на Kotlin. Разработчики явно изменяют свойства компонентов UI и управляют его состоянием.
• iOS. С помощью UIKit разработчики создают и управляют компонентами UI (например, UIViews) в Swift. Они отвечают за обновление и рендеринг этих компонентов в зависимости от взаимодействия с пользователем или изменения данных.

На данный момент Android и iOS тоже переходят к декларативному стилю, используя Jetpack Compose для Android и SwiftUI для iOS. Оба инструмента находятся в активной разработке.

Язык Dart и его особенности

Во Flutter используется Dart – современный объектно-ориентированный язык программирования, разработанный Google. По словам создателей, Dart оптимизирован для создания пользовательских интерфейсов: в нём используется async-await для изменения UI, в сочетании с возможностью запускать код изолированно от основного потока. Dart использует типизацию с null-safety, сборщик мусора и имеет схожий синтаксис с kotlin, swift, typescript, что делает его простым в изучении.

Одним из ключевых преимуществ Dart является Hot Reload. Из-за возможности Dart компилироваться в двух режимах AOT (ahead of time) and JIT (just in time) язык позволяет динамически обновлять приложение без необходимости перезапуска. Можно мгновенно видеть, как поменялся UI при изменении кода, что очень удобно и ускоряет разработку.

Dart может использоваться как для разработки на стороне клиента, так и на стороне сервера. Это упрощает процесс обучения и разработки, поскольку разработчики могут использовать один язык для всего стека приложений. Однако пока что Dart редко выбирают для backend разработки.

Dart поддерживает асинхронное программирование, что очень важно для современной разработки приложений. Это позволяет приложениям на Flutter выполнять длительные задачи, такие как получение данных из сети, не блокируя UI и не влияя на отзывчивость приложения. Если в других языках для этого используются потоки, то в Dart применяют изоляты.

Плюсы использования кросс-платформы

Есть целый ряд неоспоримых преимуществ использования кросс-платформенной технологии:

1. Гораздо более дружелюбная документация по сравнению с Android и особенно iOS, разработчики Flutter также выпускают еженедельные видео с объяснениями деталей технологии на своём официальном канале.
2. Общий код для разных платформ. Flutter позволяет разработчикам использовать один и тот же код для создания приложений для разных платформ, снижая время и стоимость разработки.
3. Hot Reload. Эта функция позволяет мгновенно видеть результаты изменений в коде, ускоряя процесс разработки.
4. Фреймворки внутри фреймворка. Команда Flutter развивает направление мобильных игр и предлагает воспользоваться Casual Games Toolkit , в котором есть необходимые инструменты для написания собственных игр на 2D движке Flame. Также есть готовый набор решений для написания новостных приложений Flutter News Toolkit. В нем содержатся наиболее популярные компоненты для создания news app: онбординг, создание учетной записи, лента контента и страницы контента, настройки монетизации, поиск и т.д.
5. Экосистема библиотек. Ещё один из плюсов Flutter сообщества – это наличие единого сервиса, на котором хостятся сторонние библиотеки. Они используются далеко не только для работы с нативным кодом платформ, но и для сложных анимаций, облегченной работы с сетью, навигации и полезными инструментами. Любой желающий может создать свой пакет и разметить его на pub.dev.

Ограничения использования кросс-платформы и пути их решения

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

Проблема №1. Большой размер приложения

Приложения Flutter могут иметь больший размер файла по сравнению с нативными приложениями. Можно использовать стандартные средства для сжатия ресурсов и ассетов. Также для Android есть возможность догрузить ассеты после установки через Сloud delivery of assets.

Проблема №2. Несоответствие “родному” пользовательскому интерфейсу

Достичь “родного” поведения экрана может быть сложно, так как Flutter управляет собственным рендерингом. Для решения этой проблемы можно настроить виджеты таким образом, чтобы они в точности соответствовали языку дизайна каждой платформы, и следить за последними тенденциями и рекомендациями по UI для iOS и Android. Большая часть компонентов уже подогнаны командой Flutter под привычный UI платформы.

Проблема №3. Задержка при появлении обновлений платформ

Иногда в iOS или Android может появиться новая функциональность (например, dynamic island в iOS) и приходится ждать, пока её завезут во Flutter. Благо такие обновления не носят критический характер, а чаще всего другие разработчики оперативно создают пакет для работы с новыми возможностями платформы.

Проблема №4. Невозможность разработки мобильных игр

Flutter не оптимизирован для 3D игр, но есть возможность создавать 2D игры, используя движок Flame, о котором написано выше.

Проблема №5. Ограниченная поддержка некоторых функций устройств.

Некоторые встроенные функции устройств могут быть недоступны или требуют дополнительной работы для интеграции. Из-за того, что Flutter не использует активно API платформы, а просто отрисовывает самостоятельно нужные элементы, могут возникнуть проблемы с доступом к функциями устройства, таким как камера, уведомления, микрофон, GPS, шифрованная память и т.д. Для решение этой проблемы можно использовать platform channels, которые позволяют вызывать код платформы (например, Kotlin для Android или Swift для iOS) прямиком из кода Flutter. Это усложняет процесс разработки, потому что помимо языка Dart ещё нужно понимать, как устроена платформа, код в которой нужно вызывать напрямую. Но такие ситуации редки, потому что для большинства случаев уже написаны packages (сторонние библиотеки) членами сообщества.

Есть и еще одна особенность, о которой мы уже говорили ранее – язык программирования. Dart – нишевый язык, изначально разрабатывался Google как замена JavaScript, но что-то пошло не так. Язык оставался в тени, пока в 2017 году Google не создали на его основе фреймворк Flutter, тем самым дав ему второе дыхание. Dart похож на JavaScript, поэтому будет понятен и большинству новичков, и опытным разработчикам.

Недостатки языка Dart компенсируются кодогенерацией, к примеру в языке отсутствуют дата классы (аналог data class в Kotlin), но при помощи сторонних пакетов можно воспроизвести нужные методы, сгенерировав их для обычных классов Dart. Также кодогенерацию можно использовать для сериализации/десериализации. В Dart даже есть аналог Retrofit, который будет знаком разработчикам Android. До недавнего времени разработчики генерировали даже функциональность sealed классов, но их ввели в Dart 3, и необходимость отпала.

Ещё один из плюсов Dart это возможность замкнуть на нём весь цикл разработки приложения и использовать Dart для написания backend при помощи Dart Frog. Тем самым язык может стать более популярным и привлечь больше разработчиков, что скажется в положительном ключе на развитии Flutter.

Мне пришла идея реализовать приложение, которое позволит сконструировать нужный для пользователя IP-TV плейлист в формате M3U.

Мне нужно было от приложения следующее:

• Задать каналы и их порядок в плейлисте. Канал — это имя, логотип и ссылки на стримы.
• Сохранить заданный плейлист в БД, выбрав не протухшую ссылку на стрим либо использовав заглушку.
• Сконструировать плейлист в формате M3U из плейлиста, сохранённого в БД.
• Web API с 2 методами: для запуска пункта 2 (далее: метод refresh_channels) и для получения плейлиста в формате M3U (далее: метод ip_tv_playlist.m3u), чтобы телевизор мог его получить и обработать.

Чтобы добавить процессу разработки ценности, я решил выбрать язык программирования Dart. Мне было интересно, насколько он удобен для такой задачи и как язык в целом.

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

• Метод refresh_channels принимает список ссылок на IP-TV плейлисты и множество параметров фильтрации каналов:names_to_remove[] — регулярные выражения для удаления каналов по названию канала;groups_to_remove[] — регулярные выражения для удаления каналов по названию группы;source_urls_to_remove[] — регулярные выражения для удаления каналов по ссылке на источник канала;min_resolution_width — минимальная допустимая ширина разрешения канала;min_resolution_height — минимальная допустимая высота разрешения канала.
• Возможность задать каналы и их порядок в плейлисте остаётся той же, но у канала появляется дополнительное поле namePattern, в котором мы можем задать регулярное выражение для поиска этого канала в переданных плейлистах.
• Все каналы, которых не коснулась фильтрация, добавляются в конец заданного списка каналов.

Данная корректировка избавляет нас от ручного поиска рабочей ссылки на стрим для каждого желаемого канала, добавляет каналы, которые могут показаться интересными (кандидаты на добавление в заданный список каналов) или не интересными (причины добавления новой группы, имени или ссылки на источник в параметры фильтрации). Но мы должны вручную найти IP-TV плейлисты, из которых будет собираться наш, персонализированный. С этим неудобством я смирился, хотя можно было и это решить.

В реализации приложения мне похвастаться нечем, потому что делал на скорость, между делом. Но была одна трудность, с которой я столкнулся. Ещё в то время, как я пробовал на деле первую юзабельную версию приложения, я заметил, что некоторые каналы, хоть и работают, показываются в очень низком разрешении (720p, 480p, а то и хуже). На 75” 4К телевизоре это выглядит ужасно, поэтому среди фильтров есть возможность задать минимальное разрешение стрима. В моём случае это 1920×1080. Но единственный нормальный способ проверить разрешение стрима, который я нашёл, это использовать программу ffprobe. Её можно «попросить» вернуть некоторую информацию о стриме, в том числе его разрешение. Но делается это далеко не моментально. Поэтому обработка 14-ти плейлистов, которые я задал, проходила так долго, что я не дождался и остановил процесс. В качестве решения этой трудности я просто распараллелил проверку разрешения стримов на несколько потоков, достигнув приемлимого времени ожидания обработки 14-ти плейлистов (~5 минут).

Довольный результатом, я решил, что было бы круто помочь таким же пользователям Smart TV, которые так же как я не видят ничего удобного в онлайн-кинотеатрах, дополнительно содержащих в себе телевидение. Можно было бы сделать веб-интерфейс, который бы проксировал прямое обращение к Web API, но фильтрацию по минимальному разрешению стрима, скорее всего, пришлось бы скрыть, раз это такая долгая операция. Или сделать платной возможностью и за счёт этого позволить нормальные вычислительные мощности сервера. Но до продолжения делания чего-либо по этому проекту руки не дошли, поэтому я отделался написанием README.md, с помощью которого можно самостоятельно запустить приложение локально и сконструировать себе персонализированный плейлист.

Ссылка на репозиторий проекта в GitHub:

И напоследок: желаю всем меньше «печальных» каналов =)

Ресерчили интернет в поисках классных материалов по Flutter и поняли, что подробных и понятных дайджестов мало. Поэтому собрали все самые полезные ссылки, книги и каналы о Flutter и заодно Dart. Надеюсь, будет полезно!

Кстати, мы тоже ведем свой телеграм-канал о Flutter —  Flutter.Много. Там мы рассказываем о рабочих моментах, факапах и достижениях, делимся своим мнением и помогаем разобраться с Flutter. Подписывайтесь!

YouTube-каналы о Flutter

FlutterDev — официальный канал о Flutter от создателей этой кроссплатоформы. Ролики на английском языке, но есть субтитры на русском. Еще со знанием английского можно посмотреть канал Johannes Milke, он делает сравнения фичей, рассказывает об обновлениях и не самых очевидных решениях в разработке.

Обучение Flutter на русском языке есть на канале Константина Кокорина, там в среднем несколько раз в неделю выходят выпуски с обучением разработки на Flutter на русском языке. Еще неплохие уроки есть на канале LazyLoad Dart & Flutter.

На канале NetNinja можно найти уроки по анимации на Flutter, туториал для начинающих или уроки по применению Firebase на Flutter. В целом у NetNinja много обучалок о разных технологиях: они понятные, простые и красиво оформлены.

Телеграм-каналы о Flutter

Flutter for Dev — русскоязычный канал, который публикует статьи по Flutter, актуальные анонсы, статьи и многое другое из мира кроссплатформы.

Oh, my flutter — тематика схожа с каналом выше, материалы выходят каждый день, есть удобный поиск по тегам. А еще у канала есть англоязычная версия.

Flutter.Много. — канал, в которым я и мои коллеги пишем о том, что такое быть Flutter-разработчиками, рассказываем о внутренней кухне проектов, погружаем в историю и разработку на Flutter.

Dart side — англоязычный ресурс с полезными ссылками на различные статьи и видео, причем подборки достаточно большие.

Дневник Flutter-разработчика — в формате дневника Flutter-dev делиться не только полезными ссылками, но и рассказывает о своем дне (куда ходил, что ел и что делал).

Чаты по Flutter в русскоговорящем сообществе у нас более активные, чем каналы. Если нужно о чем-то спросить — можно задать вопрос в Dart & Flutter или Dart/Flutter. А для вопросов по поводу обучения Flutter или Dart можно писать Dart и Flutter.

А еще есть целое хранилище данных у LazyLoad Dart & Flutter. Внутри группы есть несколько отдельных чатов о Flutter, Dart, процессах обучения и еще много всего.

Книги

Книг о разработке выпущено немало, но толковых — единицы. Поэтому советуем вам только то, что прочитали, оценили и применили на практике с положительным результатом.

«Flutter in action» Эрика Виндмилла. Очень «для начинающих», но довольно неплохая.

А еще советуем почитать «Чистая архитектура» и «Чистый код» Роберта Мартина. Это база. Буквально заповеди толкового разработчика.

Еще полезные ссылки

Маст рид: официальный сайт с документацией Flutter и официальный сайт с документацией Dart. Точно понадобится. Официальный Medium Flutter и коммьюнити там.

Компиляция

В Dart 2 режим «strong» для строгой проверки типов заменил режим «checked» для их ограниченной проверки. Строгая типизация и компилятор dartdevc обеспечивают быструю компиляцию в JavaScript без виртуальных машин. Для тестирования приложений теперь можно использовать компиляцию в JavaScript и любые штатные браузеры вместо Dartium.

Работа с интерфейсом

В новой версии языка можно определять виджеты для интерфейса без обязательного использования ключевых слов new и const. Раньше для этого нужно было применять отдельный язык разметки.

Разработка приложений

Для создания мобильных приложений можно использовать фреймворк Flutter. Для веб-разработки создатели Dart 2 предлагают набор специфичных библиотек, таких как dart:html и Angular. Также есть возможность создавать однородные системы с единой общей кодовой базой.

Рост популярности Dart

В 2018 году количество вопросов о Dart на платформе Stack Overflow резко увеличилось.

В феврале 2018 года была представлена бета-версия Dart 2.0. Кроме того, Google активно работает над операционной системой Fuchsia, написанной на Dart. В январе 2018 года Google опубликовала на GitHub инструкцию по установке Fuchsia OS, а уже в апреле стало возможным опробовать демоверсию системы прямо в браузере. А в июле редакции Bloomberg стало известно, что Google планирует внедрить Fuchsia OS в IoT-устройства к 2021 году.

В этой статье расскажем вам об еще одной альтернативе JS — языке программирования Dart, созданного Google.

Dart – дротик в спину JavaScript от Google

Естественно, «корпорация добра», разработчик движка V8 и одного из самых популярных браузеров Google Chrome, не могла пройти мимо тенденции «улучшения» JavaScript, и 12 сентября 2011 года наконференции разработчиков Goto была проведена официальная презентация языка Google Dart.

В отличие от аналогов Dart прямо позиционируется в качестве замены JavaScript, «страдающего от фундаментальных изъянов, которые невозможно исправить путем эволюционного развития».

Разработчики языка поставили перед собой следующие задачи: создать структурированный и в то же время гибкий язык для веб-программирования; сделать язык похожим на существующие для упрощения обучения; обеспечить высокую производительность получаемых программ как в браузерах, так и в иных окружениях начиная от смартфонов и заканчивая серверами.

В настоящее время Dart-программы исполняются двумя способами: с использованием виртуальной машины (в браузере Google Chrome) и с промежуточной трансляцией (компиляцией) в JavaScript.

Самое интересное, что Dart претендует на то, чтобы стать прямым конкурентом платформы Node.js – виртуальная машина Dart (VM Dart) является неразрывной частью языка. С помощью нее можно запускать Dart-программы в консольном режиме, и средства для работы на стороне сервера в Dart имеются в достаточном количестве.

Экосистема Dart

Давайте сначала рассмотрим, что собой представляет этот язык. Для этого имеет смысл познакомиться со специализированными инструментами, созданными Google для сопровождения технологии.

На странице проекта мы сразу можем видеть призыв – Download Dart+Editor. Воспользуемся этим предложением и получим, скачав и распаковав архив, много интересных вещей.

Прежде всего это виртуальная машина Dart (Dart VM) – серверная платформа, реализующая событийно-ориентированную, асинхронную модель исполнения, сходную с так хорошо уже знакомым нам принципом работы Node.js. Далее Dart Editor – полноценная интегрированная среда разработки (IDE), основанная на Eclipse. Dart Editor дополнен веб-браузером – специальной модификацией обозревателя Chromium со встроенным Dart (Dart VM) движком.

Наконец, нам теперь доступен набор Dart SDK, куда входят сам интерпретатор dart, утилита для трансляции dart-приложения в JavaScript-файл (dart2js), утилита для генерации документации (docgen) ипрочие полезные инструменты.

Давайте запустим редактор, создадим новый проект (иконка в левом верхнем углу основного окна IDE, следует выбрать тип comand-line application) и напишем нашу первую dart-программу. Ничего оригинального:

Теперь запустим ее на выполнение, кликнув по стрелке на верхней панели инструментов. Судя по появившейся строчке «Hello Dart» в консоли редактора, Dart работает (об особенностях самого языка – чуть ниже).

Того же результата мы можем достичь, сохранив вышеприведенный код в файле hello.dart и запустив его с помощью интерпретатора из командной строки:

Теперь можно попробовать транслировать нашу программу в JavaScript:

Сделано! Скрипт получился рабочим, но слабочитаемым, поэтому сгенерированные 14 Кб мы тут приводить не будем.

Теперь стоит вспомнить, что Dart задуман в первую очередь как язык, исполняемый в браузере. Если мы создадим новый проект, при этом выбрав тип Wep Application, в качестве заготовки для приложения мы получим следующий dart-код:

Не будем его трогать, а обратим внимание, что IDE, кроме файла сценария, создала еще и html-шаблон. И его стоит рассмотреть:

Тут сразу бросается в глаза наличие нового Internet Media Type – application/dart. Сам dart-сценарий подгружается и выполняется посредством тега <script> специфицированным данным типом. После запуска приложения в IDE откроется браузер, и мы сможем увидеть нашу программу в работе:

Теперь обратим внимание на строчку

Это обычный JavaScript-сценарий, который проверяет наличие в DOM браузера поддержки функции navigator.webkitStartDart() и в случае отсутствия таковой заменяет dart-сценарий JavaScript-файлом, сгенерированным dark2js. Так что получившаяся страница отработает и в Firefox (правда, не очень быстро).

Как работает Dart, мы разобрались, теперь давайте посмотрим, что собой представляет сам язык.

Знакомство с Dart

Еще раз подчеркнем, Dart – это не диалект JavaScript и не надстройка над ним, это совершенно самостоятельный язык, имеющий c расширением EcmaScript 262 только одно пересечение – сферу применения. Создавали его люди, похоже, знающие и любящие технологии C++ , Java и C# и не пожелавшие отказываться от своих привычек. И это здорово, но немного непривычно для традиционного клиент-сайт-веб-программирования. Вот полюбуйтесь на Hello World по Dart`ски:

Прежде всего бросается в глаза использование функции main(). Она в Dart делает именно то, что и в C/C++, – служит точкой входа в исполняемую программу, с которой начинается ее работа. Когда сценарий исполняется на странице, она начинает исполняться немедленно после загрузки DOM-модели документа. JavaSript – язык с динамической типизацией, что здорово. В С++ или Java типизация строгая, статическая, что вообще замечательно. Но лучше всего с этим дела обстоят у Dart – типизация у него факультативная. Это означает, что при объявлении переменных можно обозначать типы, а можно этого не делать, все зависит только от задач:

Ключевое слово final используется в том случае, когда значение, с которым она инициализирована, не должно далее быть изменено. Аннотации типов могут встречаться также в объявлениях параметров функций и возвращаемых значений, а еще в определениях классов.

ООП – чтим традиции!

Создатели Dart не стали экспериментировать с ОПП. В Dart классы и объекты используются вполне традиционно, в рамках классической модели наследования:

Пример простого класса и одного наследника. Тут есть, на что обратить внимание.

Dart поддерживает короткий синтаксис обновления функций и методов.

Закрытые члены обозначаются добавлением знака подчеркивания _ в начало имени (в Dart нет ключевых слов public, protected или private — если имя начинается с подчеркивания (_), то это приватное свойство). Ключевое слово this применяется строго традиционным образом, ссылаясь на конкретный экземпляр класса.

Наследование поддерживается одному классу и нескольким интерфейсам.

Использование классов тоже вполне традиционно:

Интересной особенностью классов в Dart является то, что каждый из них неявно подразумевает интерфейс, который можно имплементировать. То есть переписать его методы с собственной реализацией:

Тут мы имплементируем интерфейс класса тремя различными способами, но функция printPerimetr(), ожидающая типизированный параметр (Shape), отрабатывает успешно.

Есть в Dart и абстрактные классы, с помощью которых можно реализовывать фабричный конструктор объектов:

Область видимости и библиотеки

Функции и классы можно организовать в библиотеки – совокупность исходных файлов, сгруппированных исходя из логических соображений. Каждая библиотека может содержать несколько классов и функций верхнего уровня. Библиотеки могут импортировать другие, необходимые для работы файлы и библиотеки. Пример простой библиотеки приведен ниже:

И ее использование:

Ключевое слово library служит для определения библиотеки. Импортируется библиотека с помощью ключевого слова import, а part используется для ссылки на другие исходные файлы. Именно на уровне библиотеки имеют значения закрытые члены класса. Клиенты библиотеки не могут обращаться непосредственно к ним, вместо этого используются аксессоры. Наверное, не будет сюрпризом тот факт, чтобиблиотек для Dart уже написано великое множество, и основные из них поставляются вместе с языком как часть Dart SDK. Их мы можем наблюдать (и, естественно, использовать) в IDE Dart Editor. Одними из значимых являются dart:html – библиотека для работы с DOM-моделью браузера и dart:io, содержащая классы и функции для доступа к файловой системе, сетевым сокетам, для работы с протоколом HTTP и веб-сокетами.

Изоляторы

Любое Dart-приложение работает в однопоточном режиме. Но современные браузеры, даже на мобильных платформах, работают на многоядерных процессорах. Для использования всех ядер разработчики применяют работающие одновременно потоки с разделяемой памятью.

В Dart единицей работы является изолятор (isolate), а не процесс или поток. У каждого изолятора имеется собственная область памяти (этим изолятор в основном и отличается от потока), недоступная любому другому изолятору. Изоляторы могут работать параллельно и обмениваться сообщениями (сигналами и данными).

Механизм изоляторов доступен и на веб-странице – каждый скрипт, содержащий функцию main(), исполняется в отдельном изоляторе. При трансляции в JavaScript такие конструкции будут реализованы посредством технологий HTML5 (WebWorkers).

Программа на Dart может создать новый изолятор (по аналогии с fork()). Для создания нового изолятора с указанной точкой входа необходимо импортировать библиотеку dart:isolate и вызвать функцию spawnFunction(), передав ей имя точки входа:

Изоляторы хорошо использовать как для распределения логики между процессорами, так и для динамической загрузки внешнего кода. Код, не являющийся частью приложения, можно загружать иисполнять в изолированной области.

Здесь даже вкратце не перечислены все особенности новой технологии Google, но, мы уверены, вы можете оценить масштаб инноваций. Dart явно претендует на место универсального и всеобъемлющего языка веб-программирования. Получится ли у него его занять? Вопрос сложный. Но старт технологии очень впечатляет.

А в общем-то…

Честно потратив время на исследование различных разработок около JavaScript и изложив результаты на этих страницах, не можем удержаться и не заметить, что сама идея заменить JavaScript не выглядит обоснованной. Достаточно простой и вместе с тем мощный язык доказал свое право на существование, а некоторые претензии к нему действительно кажутся надуманными.

Материал взят из выпуска №146-147 журнала «Системный Администратор»