Mobile Pet

2021-04-21 18:40:46 ​​Прогрев Flutter

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

Значимым отличием Flutter от других кроссплатформенных фреймворков в том, что он рисует графический интерфейс с нуля, не используя нативные UI-компоненты каждой платформы. В Android для рендеринга UI используется OpenGL API, в iOS - Metal API. В обоих случаях это делается с помощью GPU, который компилирует шейдеры при их первом использовании. Этот процесс компиляции, как правило, занимает значительное время, в следствие чего часто возникают лаги при запуске каждой новой анимации. Второй и третий раз та же анимация тормозить не будет, поскольку шейдеры уже скомпилированы.

Для решения этой проблемы существует технология «прогрева» Flutter-приложений, в рамках которой в iOS- и Android-сборки включаются закэшированные шейдеры. Они компилируются заранее, при первом запуске приложения на устройстве конечного пользователя. Подробнее про технологию можно почитать здесь. Но даже с прогревом iOS все равно лагал, потому что для Metal-а (то есть для всех современных iOS-устройств) технология была не приспособлена, только для OpenGL.

И вот мы вернулись к началу. Хорошая новость в том, что на master-канале прогрев Flutter теперь работает и для Metal. Это очень знаковый момент для Flutter-сообщества, я сам этого долго ждал, потому что лично мне, как iOS-разработчику, было вдвойне больно смотреть на эти лаги
#development Открыть/Комментировать

2021-04-13 16:34:37 Code review

Ревью (инспекция) кода - одна из самых распространенных и полезных практик командной разработки. Основные цели практики – улучшение качества продукта и обмен знаний между участниками.

Суть практики в цикличной проверке кода: автор пишет код предоставляет его проверяющему(-щим) тот смотрит и принимает решение о слиянии кода. Если в коде есть ошибки, автор должен их исправить, после чего цикл повторится. Если код достаточно хорош для слияния, ревью считается завершенным. Очень похоже на циклическую проверку домашки учителем, в результате которой ученик обязан получить 5.

В современном мире code review осуществляется с помощью git и запросов на слияние (pull requests). Многие git-хостинги (GitHub, GitLab, Bitbucket) предоставляют удобный интерфейс для проверки, комментирования и отслеживания статуса процесса.

Вот несколько полезных советов касаемо code review для проверяющих:

при проверке опирайтесь на требования к коду, принятые в вашей команде, если их нет – постепенно начните формировать в отдельном разделе базы знаний
экономьте время с помощью автоматизации: настройте скрипт, который запустится при создании PR-а и выполнит spell-checker, статический анализ, тесты и сборку перед тем, как вы сядете за проверку
старайтесь не откладывать проверку: сделайте ее как можно раньше, чтобы не тормозить процесс
вежливо и обоснованно формулируйте требования к коду автора, приводите примеры желаемого кода там, где это необходимо
не пропускайте сомнительные места: запустите обсуждение в комментариях и совместно решите, нужно здесь что-то править или нет

И для автора:

сформируйте список изменений, которые отправляются на проверку, и прикрепите его к PR-у
следите за объемом кода, входящего в PR: оптимальные значения: 200-500 строк
соблюдайте требования к коду, принятые в вашей команде
старайтесь не повторять ошибки от PR-а к PR-у, в ваших силах не наступать на одни грабли дважды
не стесняйтесь высказать свое мнение или задать вопрос в комментариях к PR-у, в этом суть code review

#development #management Открыть/Комментировать

2021-04-07 15:48:04 Tortiki -> Карта

В моем pet-проекте для частных кондитеров есть функционал поиска кондитера на карте, которым я занимаюсь на данный момент. Для карты я использую открытый картографический сервис OpenStreetMap с помощью пакета flutter_map. Я выбрал именно OpenStreetMap, потому что эти карты бесплатные и имеют хорошую детализацию по сравнению с GoogleMaps.

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

2021-04-01 14:44:07 Лимит копипасты на StackOverflow

Уже заходили сегодня на stackoverflow.com в поисках очередного ответа? Если нет, то обязательно сделайте это и оцените их новую неоднозначную фичу (см. фото).

Дело в том, что с сегодняшнего дня сайт установил лимит на бесплатное копирование текста. Если вы зайдете на сайт, то cmd+с (или ctrl+c) сработает всего первых три раза. Для того, чтобы копировать текст и дальше, придется заказать их фирменную мини-клавиатуру за 40$.

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

2021-03-30 17:04:17 ​​60 fps

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

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

Приведу распространенный пример. Есть скроллящийся список с однотипными элементами, каждый из которых содержит картинку. Список длинный, поэтому все элементы рендерятся не сразу, а непосредственно перед появлением на экране, когда смещение скролла приближается к их границе. Для отображения картинки внутри элемента нужно загрузить ее по url. По ошибке неопытный программист выполняет эту операцию загрузки синхронно на главном потоке/очереди, в результате при сроллинге UI «замораживается», ожидая окончания загрузки.

Данная ошибка лежит на поверхности, но чаще UI лагает по неизвестной причине. Для этих случаев существуют инструменты профилирования. Например, в состав devtools для Flutter входит инструмент Performance View, который в реальном времени показывает диаграмму фреймов вашей программы (см. картинку ). С её помощью можно найти проблемные места в UI и узнать причины их появления. Если длительность конкретного фрейма на диаграмме больше 16мс, значит в этот момент интерфейс лаганул. Профилировать приложения лучше на менее мощных устройствах, они покажут вам больше проблемных мест.
#development Открыть/Комментировать

2021-03-23 17:33:37 ​​Профессиональное выгорание

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

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

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

Как уйти от выгорания?

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

всегда помните про work-life balance - не работайте по выходным, они нужны для отдыха, и не забывайте ходить в заслуженный отпуск.

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

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

Вот такой получился психологический пост. В заключении хочу оставить эту ссылку на крайне интересный ресерч с кучей статистики на тему проф. выгорания в ИТ. Кто проникся ей - обязательно загляните. Желаю всем поменьше выгорать
#management Открыть/Комментировать

2021-03-11 15:49:04 ​​Архитектура Flutter-приложения.
Часть 3. BLoC.

В основе архитектуры BLoC (Business LOgic Component) лежит идея выделения бизнес-логики в отельный компонент, не зависящий от пользовательского интерфейса и способа хранения данных.

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

BLoC в общем случае работает так:

Пользователь генерирует событие
Компонент пользовательского интерфейса передает это событие в bloc
Bloc получает событие, изменяет состояние в соответствии с логикой
Компоненты пользовательского интерфейса, подписанные на поток состояний этого bloc-а, получают новое состояние и меняют интерфейс

Для Flutter есть популярный пакет flutter_bloc, который предоставляет базовые классы для применения BLoC. Пакет активно поддерживается автором и сообществом. Реальные примеры применения BLoC как всегда можно найти в репозитории моего pet-проекта.
#development Открыть/Комментировать

2021-03-05 17:12:48 Flutter Engage

На этой неделе Flutter-команда в онлайн формате презентовала Flutter 2.0. Самыми громкими нововведениями стали:

Flutter for Web в стейбле
Flutter for Desktop
null safety в Dart в стейбле
Google Mobile Ads SDK

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

Подробности читайте здесь
https://medium.com/flutter/whats-new-in-flutter-2-0-fe8e95ecc65#
#FlutterEngage Открыть/Комментировать

2021-03-03 16:04:59 Архитектура Flutter-приложения.
Часть 2. Наследие из мира натива.

Архитектура не зависит от языка и фреймворка, которые вы используете. У меня есть хороший опыт в iOS и Android, и я знаю, что для одного и того же приложения можно без проблем писать аналогичные классы и схемы зависимостей на Kotlin и Swift. ООП и в Африке ООП. Так почему бы не перенести свой опыт также на Flutter и не заюзать давно знакомый MVP, MVVM или VIPER?

Если бы я жил в параллельной вселенной, где нет комьюнити и где программисты решают все проблемы самостоятельно только за счет личного опыта, я бы так и поступил и использовал бы в «тортиках» любимый мной MVVM. Но в нашем мире, к счастью, есть open-source и разные способы шэринга знаний. И именно по этой причине нужно обязательно оценивать накопленный опыт других людей в той или иной технологии или архитектуре, которую вы хотите использовать. Как много уже применяет ее? Какие есть готовые решения на вашем языке разработки (в моем случае на Dart)? Какие есть известные проблемы?

Ответив на очень важные вышеперечисленные вопросы в отношении архитектур из мира натива я понял, что сообщество Flutter переняло больше из веб-разработки, чем из мобильной. Самым распространенным и обсуждаемым архитектурным подходом здесь стал не MVP или MVC, а BLoC-паттерн, который сфокусирован на управлении состояния и очень похож на любимый веб-разработчиками Redux. Подробнее о BLoС обязательно расскажу в своем следующем посте.

Голосуйте, какая архитектура больше нравится вам (независимо от языка и фреймворка )?
#development Открыть/Комментировать