портал
- адрес проекта:github.com/wuba/fair
- Онлайн-документация:fair.58.com, fair.hacktons.cn
Что такое флаттер-ярмарка?
Перед официальным открытым исходным кодом мы представили оригинальный дизайн и технические идеи Fair через две статьи, которые не будут повторяться здесь.
- Дизайн и продумывание динамического фреймворка Flutter Fair
- Динамическая структура Flutter Ярмарка документов онлайн и обратный отсчет с открытым исходным кодом
Fair — это фреймворк для Dart, и хотя JavaScript — «лучший язык» в мире, мы по-прежнему выбираем Dart, а не JS. Есть два соображения:
- Сообщество фреймворков на основе JS уже существует, не нужно изобретать велосипед.
- Для JS существует пробел в общении, и он недостаточно дружелюбен к разработчикам Dart.Если вы используете JS, вам кажется немного неудобным встречаться с RN.
Fair использует динамику DSL и объединяет компоненты модуля для реализации взаимодействия между пользовательским интерфейсом и логикой. Среди них DSL может быть выпущен через Bundle, а модуль необходимо использовать в качестве базовой возможности, которая закрепляется и повторяется в приложении.
Вкратце, как выглядит Fair:
- Справедливо для нативных разработчиков Flutter, вам не нужно использовать внешний стек технологий JS.
- Производительность Fair выигрывает от Dart, нет более чистого моста
- Fair применим ко всем платформам, таким как Android, iOS, Интернет и т. д. Там, где можно использовать Flutter, Fair можно использовать везде.
- Fair не зависит от платформы, как обычный пакет, и может даже использоваться с другими динамическими фреймворками флаттера.
Как эффект?
На самом деле все зависит от того, насколько замечательный пользовательский интерфейс вы сможете нарисовать с помощью Flutter. Если вам придется сказать, что Flutter — это фреймворк для рисования, то он вас никогда не подведет.
Рендеринг пользовательского интерфейса Fairбез потерьДа, это может быть сделаноуровень пикселейреставрация.
Записанное видео можно посмотреть на платформе документации:Fair.58.com/expensive/#demo…
Проект шаблона Flutter Hello World
С помощью создания флаттера вы можете создать новый проект шаблона с эффектом счетчика кликов. Мы сгенерируем исходный код и подключим его к Fair, чтобы отобразить логику этого подсчета кликов в динамическом виде.
Эффект
| родной флаттер | Flutter Fair |
|---|---|
Справедливый доступ
FairWidget(
name: 'home_page',
path: 'assets/bundle/lib_home_page.fair.json',
data: {
'title': 'Flutter Demo Home Page',
},
)
Исходный код флаттера
/*
* Copyright (C) 2005-present, 58.com. All rights reserved.
* Use of this source code is governed by a BSD type license that can be
* found in the LICENSE file.
*/
import 'package:fair/fair.dart';
import 'package:flutter/material.dart';
import 'theme.dart';
@FairPatch()
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@FairWell('_counter')
int _counter = 0;
@FairWell('_incrementCounter')
void _incrementCounter() {
setState(() {
_counter++;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'You have pushed the button this many times:',
),
Text(
'$_counter',
style: ThemeStyle.headline4(context),
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: Icon(Icons.add),
),
);
}
}
Поддержка плагинов AdobeXD
Во фронтенд-разработке есть технология, называемая генерацией кода, которая может напрямую генерировать код js/css на основе проекта проекта. Команда инженеров Adobe также работает над плагином AdobeXD для генерации кода Flutter. Этот плагин все еще находится на ранней стадииxd-to-flutter-plugin
Поскольку способ написания интерфейса Flutter почти такой же, как HTML, технически это вполне осуществимо. Вы можете разработать набор операционных платформ с ограниченными функциями, реализовать дизайн базового интерфейса с перетаскиванием, а затем экспортировать код флаттера. Здесь мы используем проект флаттера, сгенерированный подключаемым модулем Adobe XD, для прямого преобразования его в динамический Fair. Не нужно писать макет "Русской матрешки", не правда ли, немного волнительно об этом думать😎
Эффект
| родной флаттер | Flutter Fair1 | Flutter Fair2 |
|---|---|---|
Справедливый доступ
FairWidget(
name: 'adobe_xd',
path: kIsWeb
? 'assets/bundle/lib_Home.fair.json'
: 'assets/bundle/lib_Home.fair.bin',
data: {
'svg_il6hf2': svg_il6hf2,
'svg_uvjlj2': svg_uvjlj2,
'svg_6o6tx4': svg_6o6tx4,
'svg_emmxj3': svg_emmxj3,
'svg_dzwujb': svg_dzwujb,
'svg_p45gdo': svg_p45gdo,
'svg_20idv2': svg_20idv2
},
)
Исходный код флаттера
Исходный код этого интерфейса слишком сложен, поэтому я не буду его выкладывать. Кодовый адрес: Samples/adobe_xd/lib/Home.dart.
Лучшее преобразование шаблона пользовательского интерфейса
Это потрясающий, флаттер-проект с не менее красивым UI, различными динамическими эффектами и полностью индустриальным дизайном интерфейса. Конечно, он тоже использует много атрибутов, поэтому конвертировать все же немного хлопотно, мы выборочно конвертировали большую часть страниц.
Также рекомендуется посмотреть упомянутое выше видео. Те, что отмечены желтым угловым знаком Fair, являются динамическими компонентами, некоторые используются в скользящем списке, как карточка, а некоторые используются как полноэкранная страница.
Соответствующий исходный код находится в: examples/best_flutter_ui_templates/lib
Справедливое использование не будет сброшено кадрами?
Частота кадров часто используется для оценки плавности работы приложения. Для оптимизации производительности пользовательского интерфейса флаттера обратитесь к этой статье.
Включите слой приостановки, чтобы увидеть частоту кадров потока растеризации и потока пользовательского интерфейса.Каждая разделительная линия в направлении оси Y составляет 16 мс за раз.Если она превышает самую низкую скорость, в основном может быть зависание Jank.
Эта демонстрация является официальным приветствием, пользовательским интерфейсом и состоянием.Когда вы нажимаете знак плюса, внутренняя часть Fair также частично обновляется, что не приведет к перезагрузке всей страницы.
Однако этот интерфейс действительно немного прост и не объясняет слишком много проблем. Следует отметить, что Fair не заменяет метод рендеринга Flutter, поэтому, если код до преобразования застрял, после преобразования возникнут проблемы.Оптимизация пользовательского интерфейса может начаться до экранирования исходного кода, и нет необходимости оптимизировать написание метод Fair в настоящее время.
Что касается производительности Fair, она будет дополнительно оптимизирована, чтобы гарантировать, что в приложение доступа не будут добавлены скрытые опасности.
| родной счетчик | Счетчик ярмарок |
|---|---|
а также. . .
Хотите узнать больше? Пожалуйста, перейдите на платформу документации:fair.58.com/
Объединение исходного кода после начала работы дает лучший эффект.