Автор Льюис Чианчи✏️
Flutter пользуется широким успехом с момента своего первого стабильного релиза в 2019 году. Но независимо от того, начинаете ли вы работать с Flutter или используете его уже некоторое время, выбор IDE для вашего проекта может оказать огромное влияние на то, как будет развиваться ваш проект.
Если вы работаете в команде людей, вам всем необходимо прийти к консенсусу, что может быть удивительно сложно.
В наши дни мы избалованы выбором, когда речь заходит о том, какую IDE использовать. В этой сфере существует множество высококачественных конкурентов, поэтому независимо от того, какую IDE вы выберете, у вас наверняка будет хороший опыт.
Но между этими IDE все еще есть различия, которые могут повлиять на ваш рабочий процесс разработки, поэтому в этой статье мы сравним некоторые из ведущих IDE для Flutter, которые существуют сегодня, и, надеюсь, поможем вам принять лучшее решение о том, какую IDE вам следует использовать.
В этой статье мы сравним IDE на основе:
- Простота использования
- Расширяемость
- Производительность
- Возможность отладки
Мы рассмотрим следующие IDE:
- Visual Studio Code
- Android Studio
- IntelliJ IDEA Community Edition
- Emacs
Для сравнения мы воспользуемся примером проекта Flutter, который я создал некоторое время назад. Итак, давайте начнем.
Код Visual Studio
Анекдотически я бы сказал, что Visual Studio Code (VS Code) является самой популярной IDE, используемой сегодня во Flutter. Я не могу подтвердить это статистикой, но каждый раз, когда я читаю учебник или смотрю видео о том, как сделать что-то во Flutter, используемой IDE обычно является VS Code.
Удивляться этому не стоит: VS Code — это бесплатный, простой в использовании и легкий редактор кода, который обеспечивает отличную поддержку Flutter; эта поддержка Flutter осуществляется с помощью расширения для VS Code.
Файлы в вашем проекте располагаются слева, а в главном окне отображается содержимое файлов. VS Code также позволяет открывать несколько файлов на вкладках в верхней части окна.
При работе с виджетами VS Code показывает расположение виджетов слева, что помогает наглядно представить ваше приложение.
Запуск симуляторов осуществляется нажатием на список устройств в правом нижнем углу, а затем выбором устройства, которое вы хотите запустить, из информационной панели.
Запустив симулятор, вы можете развернуть и устранить неполадки в коде. Поддержка Flutter в VS Code означает, что поддерживаются все стандартные функции (например, точки останова).
Отладка и разработка в VS Code
Как уже упоминалось ранее, VS Code позволяет устанавливать точки останова, а при их пересечении отображает текущий стек вызовов. Он также дает вам возможность войти в код, перешагнуть через код или открыть Flutter DevTools через верхнюю панель отладки.
На данный момент вы не можете глобально отключить исключения, поэтому если вы сталкиваетесь с большим количеством исключений, потому что работаете над пользовательским интерфейсом приложения, их будет нелегко отключить.
VS Code предлагает более легкий опыт отладки из коробки, но вполне возможно, что это устроит большинство разработчиков.
Расширяемость VS Code
На момент написания статьи для VS Code существует 235 плагинов, связанных с Flutter. Скорее всего, они разного качества, но суть в том, что в VS Code есть значительная поддержка Flutter.
Популярные инструменты управления состояниями, такие как flutter_bloc, поставляются с расширениями для VS Code, что означает, что вы можете создавать BLoCs автоматически, без необходимости каждый раз писать их самостоятельно.
Производительность VS Code
VS Code очень легкий, что означает, что он хорошо устанавливается и работает на различных устройствах. Единственная оговорка — на производительность может существенно повлиять количество установленных расширений и качество этих расширений.
Плохо написанные расширения могут быстро замедлить отзывчивость VS Code, но если вы внимательно следите за тем, что устанавливаете, все должно быть в порядке. Кроме того, даже если вы установите расширение, которое замедляет работу редактора, вы можете воспользоваться функцией bisect расширения, чтобы найти причину проблемы.
Стоит ли использовать Visual Studio Code с Flutter?
VS Code — это легкий редактор, который имеет отличную поддержку Flutter, хорошую расширяемость и широко используется сообществом разработчиков. Итак, что может не понравиться?
Ну, один из моих личных недостатков (и причина, по которой я не использую VS Code) заключается в том, что в отличие от всех других редакторов, которые я когда-либо использовал, вы не можете разрывать вкладки на новые окна; вы ограничены только одним окном.
Вы можете многое сделать в этом окне: вы можете разделить рабочее пространство по вертикали или горизонтали и получить что-то похожее на разрыв кода в новом окне. Но вы не можете отрывать новые вкладки в отдельные окна.
При работе над большими проектами или при поиске ошибки в нескольких файлах возможность визуализировать весь стек вызовов в приложении, открывая каждое окно для интересующих вас файлов, очень привлекательна.
В противном случае приходится открывать каждый файл в новой вкладке и быстро переключаться между вкладками, пытаясь понять, что происходит. Я считаю, что отсутствие возможности разрывать вкладки на отдельные окна довольно сильно влияет на мою производительность.
Проблема, отслеживающая это, была открыта в 2016 году и не показывает никаких признаков изменения, поэтому вам следует использовать VS Code, зная, что это, вероятно, не произойдет в ближайшее время.
Конечно, вы можете считать иначе, и если это так, то VS Code, скорее всего, даст вам все, что нужно для отладки и создания приложений Flutter.
В целом, плюсы использования VS Code в качестве IDE для Flutter заключаются в следующем:
- Работает практически везде
- имеет высокую производительность (если вы не устанавливаете слишком много или плохо работающих расширений)
- Имеет огромную базу пользователей, поэтому при возникновении проблем помощь не заставит себя ждать.
Но вы также должны знать некоторые недостатки, а именно:
- Он не может разрывать вкладки на отдельные окна, и это не изменится в ближайшее время.
- Расширения могут вызывать проблемы с производительностью
Android Studio
Далее у нас есть тяжеловес IDE, рекомендованный Google для разработки Android. Но как Android Studio справляется с разработкой Flutter? Давайте узнаем.
Сразу же отметим, что мы имеем дело с чем-то визуально более сложным, чем Visual Studio Code. Но только потому, что она выглядит сложнее, делает ли это ее более трудной в использовании? Не обязательно.
Android Studio стала стабильной в декабре 2014 года, поэтому за прошедшие годы у нее было много времени на доработку и улучшение качества.
Она также отличается широкой совместимостью, работает на macOS, Windows и Linux. Но это совершенно другая история, когда речь заходит о системных требованиях.
В то время как VS Code может работать на скудном 1 ГБ оперативной памяти и процессоре, выпущенном в последние десять лет или два года, Android Studio указывает свои требования в 8 ГБ оперативной памяти. Это правда, Android Studio — гораздо более тяжелая и ресурсоемкая IDE, чем VS Code.
Но у этой тяжеловесности есть свои преимущества. Например, в Android Studio встроено множество отличных функций. С помощью диспетчера виртуальных устройств Android Studio можно легко создавать эмуляторы для устройств, которые вы, скорее всего, будете использовать.
Кроме того, Android Studio — это результат лицензирования компанией Google платформы IntelliJ. IntelliJ производит широкий спектр инструментов для разработчиков, многие из которых требуют оплаты. Однако вы можете использовать Android Studio для разработки Flutter без лицензирования или оплаты IntelliJ, что довольно удобно.
Здесь мы также получаем несколько специфических для Flutter функций, поскольку справа от IDE мы получаем панели производительности, контура и инспектора, все из IDE.
Эти панели показывают ценные сведения о нашем приложении Flutter. Например, мы можем увидеть, как работает наше приложение, и сколько памяти используется нашим приложением на вкладке Flutter Performance.
Другие вкладки дают нам древовидное представление о виджетах нашего приложения, а инспектор дает нам более глубокое представление о нашем приложении.
Отладка и разработка в Android Studio
Итак, каково это — использовать Android Studio для создания приложений Flutter? Для отладки вы получаете все стандартные возможности, которые вы ожидаете от отладчика, например, установку точек останова или переход вперед и назад по определенному коду.
Когда ваш код сталкивается с точкой останова, Android Studio переключается на вкладку Debug, показывая текущий стек выполнения, текущие значения переменных и опции для перехода/входа в код.
Стек читается снизу вверх, поэтому мы можем легко увидеть путь выполнения кода, когда он попадает в точку останова. Еще одна особенно удобная функция вкладки «Отладка» — возможность отключения точек останова (это кнопка слева с красным кругом и линией через него).
Это может показаться странным, но иногда во Flutter, если вы попытаетесь расположить свое приложение определенным образом, возможно, вы получите множество исключений, возникающих из-за того, что механизм компоновки Flutter пытается расположить ваше дерево виджетов.
В такие моменты вы можете начать играть с деревом виджетов, чтобы проверить, сможете ли вы заставить его работать, и каждый раз при сохранении Flutter перезагружает виджет, и все исключения возникают снова.
Возможность отключить точки останова также отключает отладчик, останавливаясь при возникновении исключения в компоненте компоновки Flutter, что может пригодиться при разработке пользовательского интерфейса.
На вкладке Анализ Dart также показаны проблемы, с которыми вы в настоящее время сталкиваетесь в нашем приложении. Маленькая красная кнопка с иконкой обновления слева вверху позволяет перезапустить сервер анализа Dart, что может пригодиться, если вы недавно загрузили большую библиотеку (или сервер анализа не работает).
Я часто использую эту кнопку при регенерации библиотек, от которых зависит мое приложение Flutter, и хочу обновить информацию о наборе текста; это очень удобно.
Android Studio также предлагает отличную интеграцию с Git и контролем исходных текстов.
Последнее, о чем стоит упомянуть в этом разделе, — это то, что Android Studio позволяет отрывать вкладки проекта, так что вы можете просматривать несколько частей проекта одновременно. Это невероятно удобно при отслеживании ошибки через множество различных файлов и строк кода.
Расширяемость Android Studio
В Android Studio значительно меньше плагинов, связанных с Flutter, чем в VS Code. Поиск «Flutter» в Android Studio Marketplace дает только 61 результат.
Однако все важные инструменты, такие как пакеты для работы с популярными фреймворками управления состояниями или преобразования JSON в код на Dart, легко доступны.
На бумаге Android Studio имеет значительно меньше плагинов, чем VS Code, но на практике это не имеет большого значения. Кроме того, в Android Studio встроено как можно больше функциональности, не требующей сторонних расширений, что на самом деле может быть очень хорошо.
Производительность Android Studio
Android Studio — гораздо более тяжелая IDE, чем VS Code, потребляющая почти целый гигабайт памяти, в то время как VS Code потребляет значительно меньше. Она также участвует в довольно ресурсоемких операциях, таких как индексирование кода при загрузке проекта.
Однако после того, как код проиндексирован, вы можете искать в любом месте вашего приложения, просто дважды нажав клавишу Shift.
Однако если вы разработчик, то, скорее всего, у вас уже есть достаточно хороший компьютер для работы над своими разработками. Поэтому Android Studio вряд ли будет нагружать его больше, чем инструменты, которые вы уже используете.
Стоит ли вам использовать Android Studio?
Android Studio, безусловно, более тяжелое и сложное предложение, чем VS Code. Но это не сложность ради сложности.
Дополнительные функции и набор возможностей могут упростить работу над вашими приложениями. Кроме того, возможность разделить вкладки IDE на отдельные окна делает процесс разработки более удобным.
Однако, если вы ограничиваетесь минимальными требованиями, Android Studio, скорее всего, будет медленной в использовании и иногда не будет реагировать на запросы. В этом случае вам, вероятно, будет лучше использовать более легкую IDE, например VS Code.
Но, будучи более полным предложением, чем VS Code, Android Studio является той IDE, которую я лично использую для разработки Flutter. Благодаря производительности и функциональности отладки она выигрывает у VS Code в любом сценарии.
В общем, рассмотрите Android Studio, если:
- У вас достаточно мощная рабочая станция для ее запуска
- Вас устраивает более сложный внешний вид IDE
- Вы хотите иметь возможность разрывать вкладки на отдельные окна во время отладки.
Но, возможно, вы захотите пропустить его, если ваш компьютер с трудом справляется с запуском Android Studio или только набирает минимальные требования.
Другие варианты Flutter IDE
Конечно, поскольку мы живем в будущем, у нас есть не только две IDE на выбор. Есть еще как минимум два варианта, которые также участвуют в разработке Flutter и которые стоит рассмотреть.
IntelliJ IDEA Community Edition
IntelliJ IDEA — еще один хороший вариант для разработки Flutter. Однако, поскольку она имеет ту же основу, что и Android Studio (IntelliJ IDEA), вам, вероятно, лучше использовать Android Studio.
Иногда определенные исправления или проблемы решаются в IntelliJ IDEA раньше, чем в Android Studio, поэтому вы можете рассмотреть возможность использования этой программы, если вы столкнулись с определенной проблемой, которая еще не решена в Android Studio.
Еще одна причина, по которой вы можете рассмотреть этот вариант, — если у вас уже установлена эта IDE для работы над проектами на других языках.
В этом случае нет смысла устанавливать Android Studio отдельно, поскольку установка поддержки Flutter в IntelliJ IDEA Community Edition даст вам практически те же возможности.
Что касается производительности, IntelliJ Community Edition практически не отличается от Android Studio.
Emacs
Вы также можете использовать Emacs для редактирования кода Flutter, но это будет очень минимальный опыт.
Некоторые разработчики чрезвычайно продуктивны в Emacs, и они могут продолжить эту продуктивность в Emacs, потому что им, вероятно, будет удобно создавать свои собственные эмуляторы и самостоятельно управлять инструментами разработки.
Emacs также выиграет соревнование по использованию ресурсов. Первоначально выпущенный в 1985 году, он имеет самые минимальные требования из всех возможных IDE для разработки Flutter, доступных сегодня.
Поэтому, если вы уже хорошо знакомы с Emacs и пытаетесь разрабатывать для Flutter на старом компьютере (или, может быть, на чем-то вроде Raspberry Pi?), возможно, Emacs вам подойдет.
Но если вы новичок в разработке Flutter и у вас компьютер последних десяти лет, трудно представить, почему вы выберете Emacs в качестве IDE.
Заключение
Как мы видим, выбор IDE для наших проектов Flutter не слишком велик. Мало того, что у нас есть несколько хороших вариантов, все они еще и бесплатны, что означает, что вы можете менять IDE, пока не найдете ту, которая вам подходит.
Лично я выбрал для себя Android Studio, но вы можете выбрать другую IDE для повседневной разработки. У каждого выбора есть свои плюсы и минусы, поэтому трудно однозначно рекомендовать определенную IDE как «правильный» выбор.
Надеюсь, эта статья немного облегчила вам этот выбор, и вы можете выбрать IDE и перейти к следующему шагу — созданию приложения! Именно здесь все становится по-настоящему захватывающим.
Но какую IDE вы выбрали, и почему вы сделали этот выбор? Мы будем рады услышать ваши рассуждения по этому поводу в разделе комментариев ниже.
LogRocket: Полная видимость ваших веб-приложений
LogRocket — это решение для мониторинга фронтенд-приложений, которое позволяет воспроизводить проблемы так, как будто они происходят в вашем собственном браузере. Вместо того чтобы гадать, почему возникают ошибки, или просить пользователей предоставить скриншоты и дампы журналов, LogRocket позволяет воспроизвести сессию, чтобы быстро понять, что пошло не так. Он отлично работает с любым приложением, независимо от фреймворка, и имеет плагины для регистрации дополнительного контекста из Redux, Vuex и @ngrx/store.
Помимо регистрации действий и состояния Redux, LogRocket записывает журналы консоли, ошибки JavaScript, трассировку стека, сетевые запросы/ответы с заголовками + телами, метаданные браузера и пользовательские журналы. Он также использует DOM для записи HTML и CSS на странице, воссоздавая пиксельно идеальные видео даже самых сложных одностраничных и мобильных приложений.
Попробуйте бесплатно.