ВЕБ-мастерская «Web-Tut» - Кросс - платформенная разработка на Google Flutter

Кросс - платформенная разработка на Google Flutter

* * *

Flutter - это кроссплатформенная среда разработки мобильных приложений с открытым исходным кодом от Google. Что позволяет создавать высокопроизводительные, красивые приложения для iOS и Android из единой базы кода. Это также платформа для разработки будущей операционной системы Google Fuchsia. Кроме того, он спроектирован таким образом, что его можно перенести на другие платформы с помощью специальных встроенных модулей движка Flutter.

 

Почему был создан Flutter и почему вы должны им пользоваться

 

Кроссплатформенные наборы инструментов исторически использовали один из двух подходов:

 

- Они оборачивают веб-представление в собственном приложении и создают приложение, как если бы это был веб-сайт.

- Они обертывают собственные элементы управления платформой и обеспечивают некоторую кроссплатформенную абстракцию над ними.

 

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

 

 

 

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

 

Dart

 

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

 

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

 

 

Dart предлагает пересечение функций, которые должны быть знакомы разработчикам из разных языков, таких как C #, JavaScript, F #, Swift и Java. Кроме того, Дарт может скомпилировать в Javascript. В сочетании с Flutter это позволяет распространять код на веб-сайты и мобильные платформы.

 

Сравнение с другими платформами разработки

 

APPLE / ANDROID NATIVE

 

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

 

Одним из больших преимуществ нативных приложений является то, что они могут применять совершенно новые технологии, которые Apple и Google создают в бета-версии сразу же, если это необходимо, не дожидаясь сторонней интеграции. Основным недостатком создания собственных приложений является отсутствие повторного использования кода на разных платформах, что может сделать разработку дорогой, если она ориентирована на iOS и Android.

 

REACT NATIVE

 

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

 

XAMARIN

 

При обсуждении Xamarin, есть два разных подхода, которые необходимо оценить. Для их наиболее кросс-платформенного подхода есть Xamarin.Forms. Хотя технология очень отличается от React Native, концептуально она предлагает аналогичный подход в том, что она абстрагирует нативные элементы управления. Кроме того, он имеет аналогичные недостатки в отношении настройки.

 

Во-вторых, есть то, что многие называют Xamarin-классика. Этот подход использует продукты Xamarin для iOS и Android независимо друг от друга для создания специфичных для платформы функций, как при непосредственном использовании нативного Apple / Android, только с использованием C # или F # в случае Xamarin. Преимущество Xamarin заключается в том, что можно использовать общий для неплатформенного кода код, такие как сети, доступ к данным, веб-службы и т. д.

 

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

 

Обзор  Flutter

 

СОЗДАНИЕ ПРИЛОЖЕНИЯ

 

После установки Flutter создать приложение с помощью Flutter так же просто, как открыть командную строку и ввести ее flutter create [app_name], выбрать команду «Flutter: Новый проект» в VS Code или выбрать «Начать новый проект Flutter» в Android Studio или IntelliJ.

 

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

 

Приложение включает в себя пакет flutter/ material.dart, чтобы предложить некоторые базовые структуры для приложения, такие как строка заголовка, значки материалов и темы. Он также устанавливает виджет с отслеживанием состояния, чтобы продемонстрировать, как обновлять пользовательский интерфейс при изменении состояния приложения.

 

ПАРАМЕТРЫ ИНСТРУМЕНТОВ

 

Flutter предлагает невероятную гибкость в отношении инструментов. Приложения могут быть легко разработаны из командной строки вместе с любым редактором, как и из поддерживаемой среды IDE, такой как VS Code, Android Studio или IntelliJ. Подход в значительной степени зависит от предпочтений разработчика.

 

Android Studio предлагает большинство функций, таких как Flutter Inspector, для анализа виджетов запущенного приложения и мониторинга производительности приложений. Он также предлагает несколько рефакторингов, которые удобны при разработке иерархии виджетов.

 

VS Code предлагает более легкий вариант разработки, поскольку он имеет тенденцию запускаться быстрее, чем Android Studio / IntelliJ. Каждая IDE предлагает встроенные помощники редактирования, такие как автодополнение кода, позволяющие исследовать различные API, а также хорошую поддержку отладки.

 

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

 

ГОРЯЧАЯ ПЕРЕЗАГРУЗКА

 

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

 

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

 

ТЕСТИРОВАНИЕ

 

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

 

// Test included with the new Flutter application template

 

import 'package:flutter/material.dart';

import 'package:flutter_test/flutter_test.dart';

 

import 'package:myapp/main.dart';

 

void main() {

  testWidgets('Counter increments smoke test', (WidgetTester tester) async {

    // Build our app and trigger a frame.

    await tester.pumpWidget(new MyApp());

 

    // Verify that our counter starts at 0.

    expect(find.text('0'), findsOneWidget);

    expect(find.text('1'), findsNothing);

 

    // Tap the '+' icon and trigger a frame.

    await tester.tap(find.byIcon(Icons.add));

    await tester.pump();

 

    // Verify that our counter has incremented.

    expect(find.text('0'), findsNothing);

    expect(find.text('1'), findsOneWidget);

  });

}

 

ИСПОЛЬЗОВАНИЕ ПАКЕТОВ И ПЛАГИНОВ

 

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

 

Чтобы добавить пакет или плагин, просто включите зависимость в файл pubspec.yaml в корневом каталоге приложения. Затем запустите flutter packages get из командной строки или через IDE, и инструменты Flutter внесут все необходимые зависимости.

 

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

 

dependencies:

  image_picker: "^0.4.1" 

 

Затем запуск flutter packages getприносит все, что вам нужно, чтобы использовать его, после чего он может быть импортирован и использован в Dart:

 

import 'package:image_picker/image_picker.dart';

 

 

Виджеты

 

Все во flutter - это виджет. Включает в себя элементы пользовательского интерфейса, такие как ListView, TextBoxи Image, а также другие части платформы, включая макет, анимацию, распознавание жестов и темы и это лишь некоторые из них.

 

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

 

 

КАНАЛЫ ПЛАТФОРМЫ

 

Чтобы обеспечить доступ к собственным API платформы на Android и iOS, приложение Flutter может использовать каналы платформы. Они позволяют коду Flutter Dart отправлять сообщения в приложение iOS или Android на хостинге. Многие из доступных плагинов с открытым исходным кодом созданы с использованием обмена сообщениями по каналам платформы. Чтобы узнать, как работать с каналами платформы, документация Flutter включает хороший документ, демонстрирующий доступ к собственным API-интерфейсам.

 

Заключение

 

Даже в бета-версии Flutter предлагает отличное решение для создания кроссплатформенных приложений. Благодаря превосходной оснастке и горячей перегрузке, он приносит очень приятный опыт разработки. Обилие пакетов с открытым исходным кодом и отличная документация позволяют легко начать работу. Заглядывая вперед, разработчики Flutter смогут ориентироваться на Fuchsia в дополнение к iOS и Android. Учитывая расширяемость архитектуры движка, меня не удивит, что Flutter появится и на других платформах. С растущим сообществом, это прекрасное время, чтобы присоединиться.

Опубликовано 14.12.2018 г.
Создание и продвижение сайтов в Ялте

Адрес

298612, Россия,

Республике Крым, г. Ялта,

ул. Весенняя, д. 6А, оф. 5

Контакты

Email: support@web-tut.ru

Телефон: +7 (978) 058-82-57