Flutter. Много

2022-12-08 18:40:40 Hola, Amigos!

Сегодня вышел подкаст с участием Антона Мартышкова, Flutter-dev Amiga. В подкасте Junior-уровень Антон рассказал:

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

Послушать подкаст можно по ссылке.

Кто послушал, расскажите, как вам? Будет классно получить обратную связь, для Антона это первый опыт записи подкаста Открыть/Комментировать

2022-12-07 14:35:41 Особенности Git

Hola, Amigos! С вами Саша Чаплыгин, Flutter-dev Amiga. В наших постах мы нередко упоминаем Git, поэтому сегодня захотелось остановится на нем чуть подробнее.

Что такое Git?

Git — это бесплатная распределенная система управления версиями с открытым исходным кодом, предназначенная для быстрой и эффективной разработки любых проектов.

Git легко освоить, он занимает мало места и обладает молниеносной производительностью. Эта система управления версиями является самым популярным инструментом среди разработчиков. В Git все строится вокруг коммитов и веток. Коммит — фиксация изменений в текущей ветке с определенным сообщением и уникальным хэшем. Ветка — текущая версия всего проекта. Веток может быть сколько угодно — от 1 (проекты без GitFlow или же собственные экспериментальные проекты) до бесконечности.

Git позволяет и поощряет наличие нескольких локальных веток, которые могут быть полностью независимыми друг от друга. Создание, слияние и удаление этих веток занимает секунды. Кроме того, современная разработка давно отошла от использования Git через командную строку. В популярных IDE Git встроен в оболочку, что позволяет пользоваться Git еще проще и удобнее.

Самые распространенные команды Git

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

• Внести изменения в проект;
• Добавить изменения в индекс (staging area) — git add (таким образом вы сообщаете Git какие именно изменения должны быть занесены в историю);
• Закоммитить изменения — git commit (сохранить изменения в историю проекта, прикрепляем осмысленное сообщение — что сделано в течение этих изменений в двух словах);
• Запушить — git push (отправить результаты работы на удаленный сервер, чтобы другие разработчики тоже имели к ним доступ).

В IDE IntelliJ IDEA или же в VS Code можно установить соответствующие плагины Git. Эти среды разработки позволяют легко создавать или удалять ветки, сливать ветки между собой, а также в данных IDE легко отменять изменения, коммитить с помощью обычных кнопок. А с помощью плагинов Git вы можете просматривать историю коммитов, слияний веток, откатываться до нужных изменений. Открыть/Комментировать

2022-12-02 17:45:17 Обзор используемых библиотек (которые принимают участие непосредственно в компиляции проекта – dependencies)

Hola, Amigos! С вами Саша Чаплыгин, Flutter-dev Amiga. Сегодня хочу поделится 3 самыми используемыми в Amiga библиотеками для компиляции проекта. Поехали!

1. Dio
Dio — это классный инструмент для работы с сетью. По сравнению с использованием обычной библиотеки http, у Dio есть большое преимущество — данный http-клиент поддерживает:

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

2. Flutter_bloc
Flutter_bloc — это библиотека управлением состояний приложения и обработки бизнес-логики самого приложения. Важно сказать, что мы придерживаемся технологии чистой архитектуры приложений, это помогает в поддержки проектов любой сложности. У Flutter_bloc есть множество аналогов, но этот выбрали из-за его простоты и легкости управления состоянием приложения.

С релизом 8 версии больше не надо писать длинный код в mapEventToState, как это было в 7-ой версии. Теперь для каждого event’a пишется своя функция, в которой происходит обработка данных и прокидывается нужное состояние.

3. Flutter_svg
Удобная библиотека для обработки svg-изображений. Без нее не обходится любое приложение на Flutter, так как векторная графика всегда в разы легче png и jpg-изображений, и при этом качественнее отрисовывается на экране.

Рассказывайте в комментах, какие библиотеки вы вообще используете? Круто будет обменяться опытом. Открыть/Комментировать

2022-11-30 11:30:41 FlutterFlow.io

Hola, Amigos! С вами Саша Чаплыгин, Flutter-dev Amiga. Расскажу вам о новой возможности Flutter — FlutterFlow.

FlutterFlow — это no-code конструктор, созданный для ускорения разработки кроссплатформенных приложений, а именно iOS и Android.

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

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

Подключение желаемых библиотек также дает преимущество самому Flutter, так как FlutterFlow ограничен определенными библиотеками и вы не сможете добавить другие. Например, на FlutterFlow можно использовать библиотеки url_launcher, page_transition или intl, в то время как использование других аналогичных библиотек на pub.dev – невозможно.

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

2022-11-16 14:50:25 Flutter vs React Native, ч.2.

Hola, Amigos! На связи Антон Мартышков, Flutter-dev Amiga. Продолжаю сравнивать Flutter и React Native. В предыдущем посте говорил о производительности, типизировании языка и UI. Сегодня буду говорить о скорости разработки, весе приложений и devTools.

1. Скорость разработки

Одна из ключевых фичей Flutter — Hot Reload, она позволяет быстро просматривать результат изменения кода, достигается это благодаря JIT-компиляции.
В React Native есть похожая функция Fast Refresh, которая вставляет кусок кода в работающее приложение, но это не так надежно.

Во Flutter покрывать код и UI тестами просто, а в React Native говорится, что интеграционное и UI-тестирование не поддерживается.

2. Вес приложения

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

3. DevTools

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

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

Как я уже писал, лучшее решение выбираете вы сами. Задавайте вопросы, с радостью отвечу. Открыть/Комментировать

2022-11-14 17:11:35 Flutter vs React Native, ч.1.

Hola, Amigos! На связи Антон Мартышков, Flutter-dev Amiga. Недавно рассказывал историю создания кроссплатформы и затронул Flutter и React Native. Теперь хочу рассказать о разнице двух этих популярных решениях в разработке. Сравню их по разным параметрам, а что подойдет в разработке лучше — решать вам!

1. Производительность

Flutter работает быстро, также быстро отрисовывает UI благодаря собственному языку Dart и движку отрисовки Skia. Многие вещи по скорости приближены к нативному, а иногда могут быть и быстрее. Приложения на Flutter стабильно выдают 60 кадров в секунду на подавляющем большинстве гаджетов, а на устройствах, которые поддерживают SDK, вовсе до 120 кадров.

React Native использует родные виджеты платформы, Native Views, и передает события через JavaScript. Это влияет на производительность уровня представления, поэтому производительность будет зависит от версии ОС и самого устройства. 60 кадров в секунду в целом все еще достижимы, но нужно попотеть.

Есть интересная, пусть и чуть устаревшая статья, где сравнивалась производительность готовых приложений на реальных устройствах iPhone 6 и Xiaomi Redmi Note 5.

2. Типизирование языка программирования

На Dart, язык написания Flutter, можно писать более структурный код, то есть более сложные приложения и структуры. Фанаты Java Script и React Native могут возразить, ведь у них типизированный TypeScript. Но это больше удобность для программиста, чем реальная типизированность и производительность. Под капотом TypeScript транскомпилируется в JS.

3. UI

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

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

В следующем посте сравню Flutter React Native по еще 3 параметрам. Открыть/Комментировать

2022-11-10 07:14:06 История кросплатформы, ч.2.

Hola, Amigos!

С вами Flutter-разработчик Amiga Антон Мартышков. Недавно я рассказывал о том, как создавалась кроссплатформа. Я остановился на Xamarin. Следующий в очереди React Native.

React Native — это кроссплатформенный фреймворк с открытым исходным кодом для разработки нативных мобильных и настольных приложений на JavaScript и TypeScript. Этот фреймворк разработали в Facebook, ныне Meta*. Может показаться, что React Native похожим на Cordova, но нет. Идея заключалась в том, чтобы писать все на JS, а для UI использовать нативные элементы.
Очень сложно добиться нативного поведения и отображения. Некоторые компании, например, Airbnb, вовсе устали бороться с React Native и вернулись к нативной разработке. Тем не менее, решение заняло определенную нишу в мире IT.

Вот мы и дошли до Flutter. Это комплект средств разработки и фреймворк с открытым исходным кодом для создания мобильных приложений под Android и iOS, веб-приложений, а также настольных приложений под Windows, macOS и Linux с использованием языка программирования Dart, разработанный и развиваемый корпорацией Google.

Flutter сам рисует на любой поддерживаемой платформе UI, не обращается к нативным элементам, но имитирует стандартные UI-элементы Android и iOS. Вся бизнес-логика шарится между платформами. На текущий момент одно из лучших решений для кросплатформы, активно развивается и поддерживается Google. На Flutter разработаны приложения Яндекс.GO, Google Ads, Ebay и многие другие.

Еще есть KMM — kotlin multi-platform mobile. Это решение, при котором можно шарить только бизнес-логику на языке kotlin; UI и платформозависимые вещи придётся писать и там, и там. Пока рано что либо говорить, так как проект недавно перешел в бету.

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

*Запрещенная в России организация Открыть/Комментировать

2022-11-08 15:09:30 История кросплатформы, ч.1.

Hola, Amigos!

С вами Flutter-разработчик Amiga Антон Мартышков. Нередко можем услышать разные мнения о Flutter или React Native. Но не многие знаю, что попытки создать успешный кроссплатформенный фреймворк начались незадолго до появления Android.

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

Первый кроссплатформенный фреймворк — это PWA (Progressive Web Application). Веб-технология, которая визуально и функционально трансформирует сайт в мобильное приложение. Технология PWA была создана корпорацией Microsoft в 2000 году. На текущий момент все еще используется, но не стала популярным решением.

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

Изначально разрабатывался как кроссплатформа для десктопа фреймворк QT. Его основной язык C++. Для Android и iOS это не чужой язык, поэтому создатели решили захватить еще и мобильные платформы. При этом пользователь ощущал «ненативность» приложения, а писать UI на C++ можно только представить, как увлекательно (нет). К тому же это платный фреймворк, у которого есть бесплатная версия, но на ней многого не напишешь + и скудная IDE. В итоге решение не умерло, но используется очень редко.

Еще одна попытка сделать кроссплатформу от Microsoft, в этот раз на C# — это Xamarin. Без проблем переносится бизнес-логика, но вот сложный UI может быть сопоставим с разработкой 2-3 нативных решений. В итоге Xamarin все еще живет, но масштабной популярности не обрел.

Во втором посте расскажу о React.Native и Flutter подробнее, ведь они следующие по разработке кроссплаторфменных фреймворков. Есть вопросы? Задавайте! Открыть/Комментировать

2022-11-03 11:42:15 Советы Junior-разработчикам

Hola, Amigos! С вами Flutter-разрабы Amiga – Антон Мартышков и Саша Чаплыгин. Вас уже 200+, и это очень круто! Спасибо, что читаете и доверяете нам.

Большая часть подписчиков пришли после статьи Саши о том, как стать Flutter-разработчиком. Поэтому мы решили собрать 9 советов для джунов, которые помогут не совершать те же ошибки, что в свое время делали мы. Поехали!

1. Cмотрите widget of the week от команды Flutter. Возможно, там вы вспомните о необходимом виджете, который поможет решить задачу быстро и точно.

2. Изучайте, как Flutter работает «под капотом». То есть, углубляйтесь в то, как все работает во Flutter. Например, как работает сборщик мусора, как строится дерево виджетов, какие есть возможности в общении с нативом и т.д.

3. Изучайте Dart и его возможности. Читайте техническую документацию Flutter и Dart.

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

5. Выбирая библиотеку, посмотрите, нет ли аналогов. Изучите и сравните, какой плагин в каком случае лучше использовать.

6. Следите за чистотой кода, учитесь писать чистый код. Изучайте паттерны и применяйте их на практике.

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

8. Всегда аккуратно относитесь к null-safety. Проверяйте, пришла ли переменная null, или же подставляйте дефолтное значение с помощью "??"

9. Помните, что объем кода не показывает ваше знание и профпригодность. Очень часто 1 строка чистого и правильного кода может заменить 10-ки плохо написанных строк. Открыть/Комментировать

2022-10-31 14:18:13 Открыть/Комментировать