Советы 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-ки плохо написанных строк.

История кросплатформы, ч.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 подробнее, ведь они следующие по разработке кроссплаторфменных фреймворков. Есть вопросы? Задавайте!

История кросплатформы, ч.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 и платформозависимые вещи придётся писать и там, и там. Пока рано что либо говорить, так как проект недавно перешел в бету.

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

*Запрещенная в России организация

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 параметрам.

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.

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

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 – невозможно.

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

Обзор используемых библиотек (которые принимают участие непосредственно в компиляции проекта – 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-изображений, и при этом качественнее отрисовывается на экране.

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

Особенности 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 вы можете просматривать историю коммитов, слияний веток, откатываться до нужных изменений.

Hola, Amigos!

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

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

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

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

Dart: асинхронность и многопоточность

Hola, Amigos! На связи Антон Мартышков, Flutter-разработчик Amiga. Сегодня я расскажу о возможностях в языке Dart, которые мы используем для написания кроссплатформенных приложений на Flutter.

Эта небольшая заметка о том как, работает асинхронность и как можно выполнить код в другом потоке (изоляте). Внутренние механизмы не раскрывались специально, так как тогда получится большая статья, а оно нам тут не надо. Для этого есть Habr.

Потоки

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

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

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

Асинхронность

Асинхронность — концепция программирования, когда результат функции помеченной как async будет возвращен не сразу. Код следующий за вызовом этой функции может продолжать свою работу или ожидать ее завершения, если перед ней было специально слово await. Асинхронный метод выполнится синхронно, но тогда, когда некий внутренний механизм (Event Loop) возьмет его в работу, чтобы не навредить другим операциям.

Подытожу:

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

P.S. Подробнее об асинхронности и многопоточности можно почитать тут.

Dart 2.18

Hola, Amigos! С вами Антон Мартышков, Flutter-dev Amiga.

Последние обновления Dart 2.18 вышли 30 августа 2022, и мы решили своевременно (😅) рассказать об изменениях Dart. Приступим!

1. Теперь можно использовать Dart-пакеты для вызова из Objective-C и Swift через ffigen. Dart-пакет — это набор классов выполняющих один функционал. Например, пакет работы с сетью.

2. Исправлены распространненые ошибки с типами при работе с dynamic, переприсвоении списков, коллекций и тд. Полный список с примерами здесь.

3. Dart2js и Dartdevc инструменты удалены, но Dart2js заменяется командой dart compiled js. Dart2js — это пакет работы с сетью команды для перевода кода на dart в js, dartdevc тоже нужен для конвертации dart в js, но в браузере.

4. Обновлена страница, на которой можно познакомиться с главными фичами и библиотекам Dart.

5. Добавили раздел по команде — Dart fix. Dart fix команда используется для исправлений анализатора кода и устаревшего API.

6. Cupertino_http для iOS и MacOs базируется на нативном интерфейсе NSURLSession, что позволяет работать с сетью привычно для iOS-разработчиков.

7. Улучшили производительность async методов. Async — это оператор, который показывает, что отмеченный метод выполняется асинхронно.

Hola, Amigos!

Выпустили подробный гайд с полезными материалами по изучениею Flutter и Dart. В нем собрали обучающие YouTube-каналы, телеграм-каналы, книги и еще парочку полезных ссылок.

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

Работа с сокетами Dart

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

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

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

В Dart вы создаете сокет-клиент, используя Socket класс, и сокет-сервер, используя SocketServer класс.

Еще примечания

1. Сокет — это просто поток. Если вы хотите отправлять байты, а не строковые данные, вы можете вызвать socket.add вместо socket.write.

2. Future.delayed было сделано для того, чтобы содержимое отображалось в удобочитаемом виде. Одновременная отправка большого количества сообщений на сервер также, по-видимому, помещает их все в один и тот же фрагмент данных в потоке.

Полезные ссылки

1. Для написания этого поста я опирался на эту статью, внутри подобрый туториал, как сделать сокет-сервер и сокет-клиент.
2. Документация сокет-класс.
3. Статья о том, как поддерживать открытое соединение между клиентом и сервером для реализации приложения реального времени с помощью Dart-сокетов.