Оригинальный адрес:Flutter for JavaScript Developers

Оригинальный автор:Nader Dabit

Перевод с:Программа перевода самородков

Постоянная ссылка на эту статью:GitHub.com/rare earth/gold-no…

Переводчик:lsvih

Корректор:bambooom

Руководство по Flutter для программистов JavaScript

FlutterЭто кроссплатформенный SDK для мобильных приложений, который использует один и тот же набор кодов для создания высокопроизводительных и точных приложений для iOS и Android.

Документацияупоминается в:

Флаттер включает в себяреагировать стильframework, механизм 2D-рендеринга, несколько готовых плагинов и инструменты разработчика.

Текст надеюсь быстро предоставить краткое вводное руководство для разработчиков JavaScript, я попытаюсь использовать экосистему JS и npm для сравнения Flutter/Dart иPubпакетная библиотека.

Если вас интересуют последние учебные пособия, библиотеки, объявления и обновления сообщества Flutter, я рекомендую подписаться на двухнедельный информационный бюллетень.Flutter Newsletter.

я здесьReact Native EUречьReact Native — Кроссплатформенность и не толькообсуждены и продемонстрированы в экосистеме ReactReact Native Web,React PrimitivesиReactXPразличия, и у меня есть возможность обсудитьWeexиFlutterразница.

Попробовав Flutter, я думаю, что это одна из самых захватывающих интерфейсных технологий, за которыми я следил в последние годы. В этой статье я расскажу, почему это так интересно для меня и как начать работу с Flutter как можно быстрее.

Если ты меня знаешь, то я знаю, о чем ты думаешь...

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

Flutter

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

После использования Flutter SDK в течение нескольких недель я использую его для создания своего первого приложения, и мне очень нравится этот процесс.

Прежде чем я расскажу, как начать работу с Flutter, я начну с обзора своих мыслей о плюсах и минусах его SDK.

преимущество

Встроенные библиотеки пользовательского интерфейса (Material и Cupertino), поддерживаемые основной командой.
Команда Dart тесно сотрудничает с командой Flutter, чтобы оптимизировать виртуальную машину Dart для мобильных устройств специально для Flutter.
Имеет новую классную документацию.
Мощный интерфейс командной строки.
Я смог запустить его легко и плавно, не сталкиваясь с препятствиями и ошибками.
Встроенная функция горячей перезагрузки значительно упрощает процесс отладки. Кроме этого естьХороший набор документации по методам отладки.
Есть навигационные библиотеки, созданные и поддерживаемые основной командой, надежные и проницательные.
Язык Dart существует уже 6 лет и является достаточно зрелым. Хотя Dart является объектно-ориентированным языком программирования на основе классов, если вы хотите использовать функциональное программирование, Dart также имеет функции в качестве первых граждан и поддерживает многие конструкции функционального программирования.
Начать работать с дартсом проще, чем я думал, и он мне очень нравится.
Dart — это строго типизированный язык (например, TypeScript, Flow) из коробки без дополнительной настройки.
Если вы использовали React, вы обнаружите, что он имеет аналогичный механизм состояния (например, метод жизненного цикла иsetState).

недостаток

Вы будете изучать дартс (поверьте мне, это легко).
Все еще в тестировании.
Целевыми платформами являются только iOS и Android.
Экосистема плагинов еще молода,pub.dartlang.org/flutter В сентябре 2017 года было всего 70 упаковок.
Макет и стили написания требуют изучения новой парадигмы и API.
Необходимо изучить другую конфигурацию проекта (pubspec.yaml и package.json).

Начало работы и другие перспективы

Документация Flutter рекомендует редактор VS Code сIntelliJ IDE. несмотря на то чтоIntelliJ IDEВстроенная поддержка горячей загрузки и онлайн-загрузки, чего нет в VS Code, но я все равно предпочитаю использовать установкуDart Code extensionПлагин для редактора VS Code и получите хороший опыт разработки.
Flutter имеет модульную систему или систему управления пакетами.Pub Dart Package Manager, который сильно отличается от npm. Это хорошо или плохо, в зависимости от того, как вы относитесь к npm.
У меня не было никаких предварительных знаний о Dart, но я довольно быстро начал. Он напоминает мне TypeScript и имеет некоторое сходство с JavaScript.
В документации есть несколько неплохих лабораторий кода и туториалов, рекомендуем ознакомиться с ними: 1.Построить ИСЮ 2. Добавить Firebase 3. компоновка сборки 4. увеличить взаимодействие

Достаточно сказано, теперь давайте начнем создавать новый проект!

Установите интерфейс командной строки в macOS

Если вы используете Windows, см.этот документ.

Полное руководство по установке для платформы macOS см.этот документ.

Во-первых, нам нужно клонировать репозиторий, содержащий двоичные файлы CLI флаттера, и добавить его в системный каталог. Например, я клонировал репозиторий в каталог, предназначенный для двоичных файлов, а затем добавил этот новый каталог в$HOME/.bashrcи$HOME/.zshrcв файле.

Клонируйте репозиторий:

git clone -b alpha https://github.com/flutter/flutter.git

Добавить путь:

export PATH=$HOME/bin/flutter/bin:$PATH (或者填你选择的安装路径)

Запустите флаттер-доктор в командной строке, чтобы убедиться, что путь флаттера распознан правильно, и установите все необходимые зависимости:

flutter doctor

Установите другие зависимости

Если вы развертываете приложение для iOS, вы должны установить Xcode; если вы развертываете приложение для Android, вы должны установить Android Studio.

Чтобы узнать об установке этих двух разных платформ, см. документацию:Документация.

Создайте свое первое приложение 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в файле.

Вы обнаружите, что есть папка andoird и папка iOS, и нативные проекты живут в этих каталогах.

Конфигурация проекта находится вpubspec.yaml, этот файл такой же, как и в экосистеме JavaScriptpackage.jsonпохожий.

Теперь обратите внимание наlib/main.dart.

В начале файла вы можете увидеть импорт:

import ‘package:flutter/material.dart’;

Откуда взялся этот файл зависимостей? пожалуйста, проверьтеpubspec.yamlфайл, вы можете обнаружить, что в списке зависимостей есть отдельная зависимость флаттера, на которую ссылается здесьpackage:flutter/. Если вы хотите добавить или импортировать другие зависимости, вам нужно добавить новые зависимостиpubspec.yaml, а затем используйте импорт, чтобы использовать их.

существуетmain.dart, мы также можем видеть, что есть функция с именем main . В Дарте,mainявляется специальным,необходимый, функция верхнего уровня, с которой приложение начинает выполняться. Поскольку Flutter создан Dart, main также является основной точкой входа в этот проект.

void main() {
  runApp(new MyApp());
}

Эта функция вызываетnew MyApp(), этот класс. Как и в приложении React, есть основной компонент, который состоит из нескольких компонентов, а затем вызываетReactDOM.renderилиAppRegistry.registerComponentрендерить.

Widget

Flutter Технический обзорОдин из основных принципов: «Все есть виджет».

Виджеты — это основной строительный блок каждого приложения Flutter. Каждый виджет — это неизменное определение пользовательского интерфейса. В отличие от других фреймворков, разделяющих представления, контроллеры, макеты и другие свойства, Flutter имеет унифицированную и непротиворечивую объектную модель: виджет.

В веб-терминологии или JavaScript вы можете думать о виджете как о чем-то похожем на компонент. Виджеты обычно состоят из внутренних классов, которые могут содержать или не содержать некоторое локальное состояние или методы.

Если вы посмотрите на main.dart, вы можете найти ссылки на классы, такие как StatelessWidget, StatefulWidget, Center, Text. Это все виджеты. Все доступные виджеты см.Документация.

Макет и стиль письма

Хотя Dart и большинство фреймворков Flutter просты в использовании, макет и стили поначалу вызывали у меня головную боль.

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

Например,ColumnМожет принимать несколько дочерних виджетов, но не принимает никаких атрибутов стиля (CrossAxisAlignmentиdirectionдругие свойства макета); в то время какContainerМожет получать различные свойства макета и стиля.

Flutter также имеет некоторые компоненты, специфичные для макета, такие какPadding, который может принимать только дочерний виджет, но не будет делать ничего, кроме добавления отступов к дочернему виджету.

Пожалуйста, обратитесь к этому полномуСписок виджетов, который может помочь вам реализовать макет с помощью Container, Row, Column, Center, GridView и других компонентов с собственными спецификациями макета.

SetState и функции жизненного цикла

Подобно React, Flutter также имеет компоненты или виджеты с состоянием и без состояния. Компоненты с состоянием могут создавать, обновлять и уничтожать состояние, аналогично функциям жизненного цикла, используемым в React.

Во Flutter также есть функция setState для обновления состояния. Вы можете найти его в проекте, который мы только что создали_incrementCounterсм. эту функцию в методе.

Для получения дополнительной информации см.:StatefulWidget, StateиStatelessWidget.

Суммировать

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

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

Меня зовутNader Dabit,этоAWS Mobileразработчик, разработалAppSync,Amplifyи другие приложения, но иReact Native TrainingОснователь .

Если вам нравится React и React Native, добро пожаловать вDevchat.tvПодпишитесь на наш подкаст -React Native Radio.

Кроме того, издательство Manning Publications опубликовало мою книгуReact Native in Action, добро пожаловать на чтение.

Если вам понравилась эта статья, поставьте лайк~

Программа перевода самородковэто сообщество, которое переводит высококачественные технические статьи из Интернета сНаггетсДелитесь статьями на английском языке на . Охват контентаAndroid,iOS,внешний интерфейс,задняя часть,блокчейн,продукт,дизайн,искусственный интеллектЕсли вы хотите видеть более качественные переводы, пожалуйста, продолжайте обращать вниманиеПрограмма перевода самородков,официальный Вейбо,Знай колонку.