Flutter - это кроссплатформенный SDK мобильного приложения для создания высокопроизводительных и точных приложений для iOS и Android из единой кодовой базы.
Также из документации:
Flutter включает в себя современный фреймворк в стиле реакции, механизм 2D-рендеринга, готовые виджеты и инструменты разработки.
Надеюсь, этот пост станет быстрым и легким вступлением для большинства разработчиков JavaScript, поскольку я попытаюсь провести параллель между JS и экосистемой npm, а также работать с Flutter / Dart и репозиторием пакетов Pub.
Если вы хотите быть в курсе учебных материалов, библиотек, объявлений и обновлений Flutter от сообщества, я предлагаю подписаться на двухнедельный Информационный бюллетень Flutter, о котором я только что объявил.
В своем выступлении React Native - Cross Platform & Beyond на React Native EU я обсуждал и демонстрировал несколько различных технологий в экосистеме React, включая React Native Web, React Primitives и ReactXP, но я также имел возможность обсудить Weex и Flutter.
Из всех интерфейсных технологий, на которые я смотрел в последние несколько лет, я больше всего взволнован Flutter после экспериментов с ним. В этом посте я расскажу, почему, а также расскажу, как вы можете начать с ним как можно быстрее.
Если ты меня знаешь, значит, я знаю, о чем ты думаешь ...
Я разработчик React и React Native более 2,5 лет. Я по-прежнему очень оптимистичен в отношении React / React Native и знаю о довольно массовом внедрении, которое сейчас происходит среди многих крупных компаний, но мне всегда нравится видеть другие идеи и искать альтернативные способы достижения аналогичных целей / задач, будь то это должно быть учиться у них или изменить мою текущую платформу.
Флаттер
Мой tldr таков: Flutter потрясающий, и я считаю, что это будет жизнеспособным вариантом в самом ближайшем будущем.
После использования SDK в течение последних двух недель я нахожусь в процессе создания своего первого приложения с его использованием, и пока мне действительно нравится этот процесс.
Прежде чем я расскажу о том, как начать работу с Flutter, я сначала выскажу свое мнение о плюсах и минусах SDK.
Плюсы:
- Встроенные библиотеки пользовательского интерфейса (Material, Cupertino), поддерживаемые основной командой.
- Команда Dart & Flutter тесно сотрудничает, чтобы оптимизировать виртуальную машину Dart для мобильных устройств специально для нужд Flutter.
- Документация безупречная / потрясающая / потрясающая 😍.
- Хороший кли.
- Плавно и легко для меня начать работу, не сталкиваясь со многими препятствиями / ошибками.
- Опыт отладки хороший, горячая перезагрузка включена прямо из коробки, плюс множество хорошо документированных методов отладки d.
- Довольно солидная и самоуверенная библиотека навигации, созданная и поддерживаемая основной командой.
- Языку дартс уже 6 лет, и он уже зрелый. Хотя Dart - это объектно-ориентированный язык программирования на основе классов, если вы занимаетесь функциональным программированием, Dart имеет первоклассные функции и поддерживает множество конструкций функционального программирования.
- Мне было легче понять Дарт, чем я ожидал, и я действительно получил от него удовольствие.
- Dart - это типизированный язык из коробки без какой-либо дополнительной настройки (re: TypeScript / Flow).
- Имеет аналогичную парадигму работы с состоянием, к которой вы, возможно, привыкли, если использовали React (т.е. методы жизненного цикла и
setState
).
Минусы
- Вам нужно будет выучить Дарт (это легко, поверьте мне)
- Все еще в альфа-версии.
- Только для iOS и Android.
- Экосистема плагинов молода, всего 70+ пакетов для Flutter на https://pub.dartlang.org/flutter «» по состоянию на сентябрь 2017 года.
- Макет / стиль - это совершенно новая парадигма / API для изучения.
- Изучите различные настройки конфигурации проекта (pubspec.yaml против package.json).
Начало работы / Другие наблюдения
- Я использую VS Code в качестве редактора с расширением Dart Code, которое дало действительно приятный опыт разработки. Документация по флаттеру настоятельно рекомендует IntelliJ IDE, в которой есть встроенная поддержка таких вещей, как горячая / живая перезагрузка, чего, насколько мне известно, VSCode не имеет.
- Существует модульная система / система управления пакетами, которая сильно отличается от таковой в npm, Pub Dart Package Manager. Это может быть хорошо или плохо, в зависимости от вашего взгляда на npm.
- Я начал, не зная Dart, и довольно быстро освоил его. Он во многом напоминает мне TypeScript, а также имеет некоторое сходство с JavaScript.
- В документации есть несколько действительно отличных CodeLabs и руководств, которые мне очень помогли, и я рекомендую их проверить: 1. Создание UIS 2. Добавление Firebase 3. Создание макетов 4. Добавление интерактивности
Хватит разговоров, приступим к созданию нового проекта!
Установка CLI (macOS)
Чтобы начать работу с Windows, ознакомьтесь с этими документами.
Полные инструкции по установке macOS см. в этих документах.
Во-первых, нам нужно клонировать репозиторий, содержащий двоичный файл для интерфейса командной строки flutter, и добавить его в наш путь. Я клонировал это репо в папку, где храню свои двоичные файлы, а затем добавил новый путь к моему файлу $HOME/.bashrc
/ $HOME/.zshrc
.
- Клонировать репо:
git clone -b alpha https://github.com/flutter/flutter.git
2. Добавьте путь:
export PATH=$HOME/bin/flutter/bin:$PATH (or whatever the path is to your installation)
3. Запустите flutter doctor из командной строки, чтобы убедиться, что путь flutter распознается, и проверить, есть ли какие-либо зависимости, которые необходимо установить для завершения установки:
flutter doctor
Установка других зависимостей
Если вы хотите выполнить развертывание для iOS, у вас должен быть установлен Xcode, а для Android у вас должна быть установлена Android Studio.
Чтобы узнать больше об установке каждой платформы, см. документацию здесь.
Создание вашего первого приложения Flutter
Теперь, когда у нас установлен интерфейс командной строки flutter, мы можем создать наше первое приложение. Для этого нам нужно запустить команду создания флаттера:
flutter create myapp
Это создаст для вас новое приложение. Теперь перейдите в новый каталог и откройте симулятор iOS или эмулятор Android, а затем выполните следующую команду:
flutter run
Это запустит приложение в симуляторе, который у вас открыт. Если у вас открыты симуляторы iOS и Android, вы можете передать симулятор, в котором вы хотите запускать приложение:
flutter run -d android / flutter run -d iPhone
Или бежать в обоих бегах
flutter run -d all
Вы должны получить некоторую информацию о перезагрузке приложения, распечатанную на вашей консоли:
Структура проекта
Код, который вы запускаете, находится в файле lib/main.dart
.
Вы также заметите, что у нас есть папка для Android и папка для iOS, в которой находятся наши собственные проекты.
Конфигурация проекта хранится в файле pubspec.yaml
, который похож на файл package.json
в экосистеме JavaScript.
Теперь посмотрим на lib/main.dart
.
Вверху файла мы видим импорт:
import ‘package:flutter/material.dart’;
Откуда это взялось? Что ж, в файле pubspec.yaml
вы заметите, что в разделе зависимостей у нас есть одна зависимость флаттера, на которую мы здесь ссылаемся как на package:flutter/
. Если мы хотим добавить и импортировать другие зависимости, нам нужно обновить наш pubspec.yaml
новыми зависимостями, сделав их доступными для импорта.
В этом файле мы также видим, что вверху есть функция с именем main. В Dart main - это специальная, обязательная функция верхнего уровня, с которой начинается выполнение приложения. Поскольку флаттер построен с использованием Dart, это также наша основная точка входа в проект.
void main() { runApp(new MyApp()); }
Эта функция вызывает new MyApp()
, который сам вызывает класс и так далее, аналогично приложению React, где у нас есть основной компонент, состоящий из других компонентов, который затем отображается в ReactDOM.render
или AppRegistry.registerComponent
.
Виджеты
Один из основных принципов технического обзора Flutter гласит, что все является виджетом.
Виджеты - это основные строительные блоки любого приложения Flutter. Каждый виджет является неизменной декларацией части пользовательского интерфейса. В отличие от других фреймворков, которые разделяют представления, контроллеры, макеты и другие свойства, Flutter имеет согласованную унифицированную объектную модель: виджет.
С точки зрения веб-терминологии / JavaScript, вы можете думать о виджете так же, как вы думаете о компоненте. Виджеты обычно состоят из классов, которые могут иметь, а могут и не иметь некоторые локальные состояния и методы внутри них.
Если вы посмотрите на main.dart, вы увидите ссылки на такие классы, как StatelessWidget, StatefulWidget, Center и Text. Все они считаются виджетами. Полный список доступных виджетов см. В документации.
Макет и стиль
В то время как Dart и большая часть фреймворка Flutter были довольно легкими для понимания, работа с макетами и стилями поначалу была немного сложнее для понимания.
Главное, что нужно иметь в виду, это то, что в отличие от веб-стилей и даже стилей React Native, где представления выполняют все макеты, а также некоторые стили, макет определяется комбинацией типа выбранного вами виджета и его свойства макета и стиля, которые обычно различаются в зависимости от типа виджета, с которым вы работаете.
Например, Column принимает массив дочерних элементов, а не какие-либо свойства стиля (только свойства макета, такие как CrossAxisAlignment и direction среди других), тогда как Container принимает комбинацию свойств макета и стиля.
Есть даже компоненты макета, такие как Padding, которые принимают дочерний элемент и не делают ничего примечательного, кроме добавления заполнения к дочернему компоненту.
Существует целый каталог виджетов, который может помочь вам достичь желаемого типа макета, с такими компонентами, как Контейнер, Строка, Столбец, Центр, GridView и многими другими, все со своими собственными спецификациями макета.
Методы SetState / Lifecycle
Подобно React, существует идея виджетов или компонентов с отслеживанием состояния и без состояния. Виджеты с отслеживанием состояния могут создавать состояние, обновлять состояние и уничтожать, что в некоторой степени похоже на методы жизненного цикла, к которым вы могли бы привыкнуть, если работали с React.
Есть даже метод setState, который обновляет состояние. Вы можете увидеть это в действии в методе _incrementCounter
в только что сгенерированном проекте.
См. StatefulWidget, State и StatelessWidget.
Консенсус
Как человек, специализирующийся на разработке кроссплатформенных приложений, я искал компетентного конкурента React Native, который был бы жизнеспособным вариантом для клиентов, которые, возможно, хотели чего-то другого по какой-либо причине. Я думаю, что Flutter отвечает на некоторые из опасений некоторых моих клиентов относительно таких вещей, как встроенная система типов, первоклассная библиотека пользовательского интерфейса, а также многообещающая библиотека навигации, которую поддерживает основная команда.
Я буду добавлять Flutter в свой набор инструментов, поэтому, когда я столкнусь с проблемой или ситуацией, на которую React Native не отвечает, у меня будет что-то еще, к чему можно обратиться. Я также буду представлять его своим клиентам, как только я отправлю свое первое приложение, как еще один вариант, который они могут выбрать заранее, если я чувствую, что оно готово к производству.
Меня зовут Надер Дабит. Я адвокат разработчиков в AWS Mobile, работаю с такими проектами, как AppSync и Amplify, и основатель React Native Training.
Если вам нравятся React и React Native, загляните в наш подкаст React Native Radio на Devchat.tv.
Также ознакомьтесь с моей книгой React Native in Action, которая теперь доступна в Manning Publications.
Если вам понравилась эта статья, порекомендуйте и поделитесь ею! Спасибо за ваше время