Разработчики Foodex24: Мы попробовали Flutter сразу после релиза и сэкономили несколько недель

На адаптацию приложения под разные виды платформ иногда уходят недели, а баги можно вылавливать бесконечно. Поэтому когда Google зарелизил фреймворк Flutter, который обещал одинаково хорошо адаптировать интерфейс под все модели гаджетов, мы в Powercode сразу попробовали его в деле. И не прогадали: за год у нас есть уже три успешных кейса с Flutter.

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

Что такое Flutter, и почему мы начали с ним работать

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

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

Выбирая между основными конкурентами — React Native и Flutter, мы посмотрели тесты и сравнили функционал. Разработка кроссплатформенных приложений часто усложняется тем, что надо учитывать поведение каждой платформы (IOS и Android). Обычно это касается элементов управления или визуальных эффектов. Flutter использует собственный движок рендера — благодаря этому мы можем отобразить любой элемент, а о том, чтобы они везде выглядели одинаково, уже позаботится сама платформа. 

К тому же, Flutter позволяет быстро создавать сочный, насыщенный дизайн и содержит два набора виджетов: Material Design для Android и Cupertino для iOS, которые можно использовать одновременно, чтобы получить лучшее от обеих платформ. Оценив все это, мы и выбрали Flutter. 

Разработка Foodex24

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

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

Перейти на язык программирования Dart, на котором работает Flutter, для нас было несложно. Он чем-то схож с JavaScript. А если человек работал с React Native, переучиться на Flutter ему будет легко — у них схожие принципы работы. Так вышло, что в нашей команде почти все имеют опыт работы с React Native, поэтому мы быстро адаптировались.

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

Результат

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

Приложение Foodex24

Мы выпустили уже несколько стабильных релизов Foodex24: для App Store и Play Market. Постоянно обновляем код под современные стандарты, устраняем мелкие баги и обновляем фреймворк.

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

Где еще мы используем Flutter

Кроме Foodex24, мы применили Flutter еще на двух клиентских проектах:

1. Приложение для детского ивента

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

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

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

2. Приложение для немецкой клининговой компании

Идея в том, что человек фотографирует фасад здания, которое нужно почистить, приложение определяет его размер и считает примерную цену работы с точностью в 5-10%. Клиент может сориентироваться, по карману ли ему такая услуга, а клининг — оценить объем работ.

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

Заказчик просил, чтобы приложение поддерживалось любыми видами смартфонов: даже 5-й моделью iPhone. Экраны этих девайсов очень маленькие, и нам пришлось бы отрисовывать несколько вариантов дизайна. Поэтому мы решили использовать Flutter.

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

Почему Flutter?

Резюмируя: мне, как для разработчику аутсорсинговой компании, нравится, что Flutter дает единый интерфейс. Я могу разрабатывать на macOS и быть уверенным, что приложение, с учетом минимальных правок, будет выглядеть одинаково на iOS и Android.

Я могу сконцентрироваться не на том, как каждая кнопка поведет себя на каком-нибудь iPhone 11, или Xiaomi Mi 9T, а на логике и поиске багов. В итоге я не трачу время на интерфейс, а фокусируюсь на более качественном и производительном приложении.

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