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.

  1. Клонировать репо:
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.

Если вам понравилась эта статья, порекомендуйте и поделитесь ею! Спасибо за ваше время