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

Автор: Шалита Суранга✏️

Flutter — это популярный фреймворк с открытым исходным кодом для создания кроссплатформенных приложений для выпуска на Android, iOS, Linux, macOS, Windows, Fuchsia, web и других платформах. Flutter становится все популярнее с каждым днем благодаря своей производительности и встроенным платформо-независимым виджетам пользовательского интерфейса.

Go — это компилируемый, статически типизированный, высокопроизводительный язык с простым синтаксисом.

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

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

• Преимущества использования бэкенда Go для приложений Flutter
  • Сообщество, популярность и тенденции
  • Go и Flutter — это технологии, ориентированные на производительность
  • Сходство в среде разработки
  • Повторное использование логики бэкенда Go во Flutter
  • Использование Go для обслуживания веб-приложения Flutter
• Учебник: Создание приложения Flutter с бэкендом Go
  • Разработка бэкенда Go RESTful
  • Тестирование бэкенда Go
  • Создание фронтенда приложения с помощью Flutter
  • Обслуживание веб-приложения Flutter с помощью Go
• Повторное использование кода Go в приложении Flutter

Преимущества использования бэкенда Go для приложений Flutter

Фронтенды приложений обычно взаимодействуют с модулями на стороне сервера с помощью различных концепций сетевого взаимодействия, таких как REST, WebSocket, SOAP и gRPC.

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

Сообщество, популярность и тенденции

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

Google выпустил Go v1 в 2012 году, а Flutter v1 представил в 2018 году, но обе технологии пережили бурный рост для облачных бизнес-приложений в конце 2019 года. Сейчас популярность обоих проектов растет с каждым днем, они имеют отличную репутацию, поддержку сообщества и современные технологии, разработанные Google.

Go и Flutter — это технологии, ориентированные на производительность

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

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

Flutter предлагает производительность, близкую к нативной, благодаря рендеринговому холсту на базе Skia и концепции каналов нативной платформы.

Компилятор Go создает быстрые и оптимизированные нативные двоичные файлы и делает Go быстрым и гибким, похожим на другие современные, популярные языки программирования корпоративного уровня, такие как C#, Java и JavaScript (Node.js).

Бэкенд Go предлагает быстрые и эффективные нативные серверные сервисы для приложений Flutter для достижения лучшей нативной производительности.

Сходства в среде разработки

Flutter использует Dart в качестве кроссплатформенного языка разработки приложений. Dart и Go предлагают возможности для решения различных технических проблем. Однако синтаксис Go/Dart, инструменты разработчика и сторонние библиотеки имеют значительное сходство. Поэтому одна и та же команда full-stack разработчиков может работать как над backend, так и над frontend проектами без каких-либо проблем с производительностью. Разработчики Flutter также могут легко приступить к разработке бэкенда на Go благодаря минимальному синтаксису Go.

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

Повторное использование логики бэкенда Go во Flutter

Иногда нам приходится повторно использовать код бэкенда непосредственно во фронтенд-приложении. Если вы используете Node.js для бэкенда и React Native для фронтенда, вы можете легко поделиться общей бизнес-логикой, создав пакет JavaScript.

Однако поддержка серверной части в Dart все еще растет и пока не сравнима с экосистемой Go, поэтому вам нужно дважды подумать, прежде чем использовать Dart для написания бэкенда.

Если вы используете C#, Java или Node.js для разработки бэкенда, вам, возможно, придется переписать ту же самую существующую бизнес-логику на Dart во фронтенде Flutter. Проект Go mobile предлагает способ вызова кода Go из сред разработки мобильных устройств, специфичных для конкретной платформы, то есть Java и Android.

Поэтому мы можем связать Go mobile с Flutter и создать эффективный способ повторного использования бизнес-логики на основе Go.

Использование Go для обслуживания веб-приложения Flutter

Как вы, возможно, уже знаете, пользователи могут получить доступ к приложению Flutter через веб-браузер с поддержкой Flutter web. Но как вы можете обслуживать веб-приложение Flutter из вашей облачной среды? Вам нужно либо использовать готовый статический сервер, либо написать его на предпочтительном языке бэкенда.

Можно написать быстрый и полноценный статический файловый сервер на Go с помощью нескольких строк кода. Вы даже можете обслуживать свое веб-приложение Flutter с бэкенда Go RESTful без особых настроек.

Учебник: Создание приложения Flutter с бэкендом Go

Теперь, когда мы знаем о преимуществах использования бэкенда Go для приложения Flutter, давайте разработаем веб-сервис Go RESTful и фронтенд Flutter, чтобы проверить вышеуказанные преимущества. Мы собираемся создать полнофункциональное приложение для составления списка товаров с помощью Go REST API и Flutter frontend. Веб-сервис RESTful на базе Go будет возвращать список товаров в формате JSON, а приложение Flutter будет отображать список товаров, вызывая веб-сервис.

Мы также преобразуем приложение Flutter в веб-приложение и будем обслуживать его с помощью того же RESTful веб-сервиса. Наконец, я продемонстрирую, как поделиться кодом Go с приложением Flutter с помощью мобильного проекта Go.

Разработка бэкенда Go RESTful

Мы собираемся создать RESTful-бэкенд для создания списка товаров в формате JSON. Во-первых, установите последние средства разработки Go, если на вашем компьютере нет компилятора Go. Затем создайте новый модуль Go со следующими командами для начала работы:

mkdir go_backend
cd go_backend
go mod init go_backend

Нам нужна библиотека маршрутизации HTTP для разработки RESTful веб-сервисов. Веб-фреймворк Gin предлагает почти все возможности разработки бэкенда на основе HTTP, такие как маршрутизация, привязка JSON и валидация. Добавьте пакет фреймворка Gin в текущий проект с помощью следующей команды:

go get -u github.com/gin-gonic/gin

Нам также необходимо включить CORS, поскольку в этом руководстве мы будем использовать Flutter web. Загрузите пакет промежуточного ПО Gin CORS в ваш проект с помощью следующей команды:

go get github.com/gin-contrib/cors

Теперь создайте файл с именем main.go и добавьте в него следующий код:

package main
import (
    "github.com/gin-gonic/gin"
    "github.com/gin-contrib/cors"
)
type Product struct {
    Id int `json:"id"`
    Name string `json:"name"`
    Price int `json:"price"`
    Description string `json:"description"`
}
func productsHandler(c *gin.Context) {
    products := []Product {
        Product {100, "BassTune Headset 2.0", 200, "A headphone with a inbuilt high-quality microphone"},
        Product {101, "Fastlane Toy Car", 100, "A toy car that comes with a free HD camera"},
        Product {101, "ATV Gear Mouse", 75, "A high-quality mouse for office work and gaming"},
    }
    c.JSON(200, gin.H{
        "products": products,
    })
}
func main() {
    r := gin.Default()
    r.Use(cors.Default())
    r.GET("/products", productsHandler)
    r.Run(":5000")
}

Приведенный выше код реализует конечную точку GET /products для возврата списка товаров в формате JSON. Здесь мы создаем статический список продуктов, создавая структурный фрагмент Product с синтаксисом [] Product. В демонстрационных целях мы используем жестко закодированный список товаров, но вы можете использовать любое удобное подключение к базе данных для получения сохраненных сведений о товарах.

Тестирование бэкенда Go

Давайте протестируем описанный выше бэкенд Go. Сначала запустите веб-службу с помощью следующей команды:

go run main.go

Приведенная выше команда запускает RESTful-сервер Gin для приема HTTP-запросов с порта 5000. Вы можете протестировать конечную точку списка товаров с помощью известного инструмента Postman, как показано ниже.

Создание фронтенда приложения с помощью Flutter

Давайте создадим список товаров с помощью Flutter и отобразим данные из приведенного выше бэкенда Go. Если вы еще не установили Flutter, вы можете легко сделать это с официальной страницы бинарных релизов Flutter.

Сначала создайте новое приложение Flutter с помощью следующей команды:

flutter create flutter_frontend

После создания проекта запустите его командой flutter run и протестируйте его в Chrome или на мобильном устройстве, чтобы убедиться, что все работает так, как ожидалось. Нам нужно создать классы Dart для каждого основного объекта JSON, чтобы сделать кодовую базу удобной и читаемой. Добавьте следующий код в файл lib/product_model.dart для определения модели продукта:

class Product {
  final int id;
  final String name;
  final String description;
  final int price;

  const Product({
    required this.id,
    required this.name,
    required this.description,
    required this.price,
  });

  factory Product.fromJson(Map<String, dynamic> json) {
    return Product(
      id: json['id'],
      name: json['name'],
      description: json['description'],
      price: json['price']
    );
  }
}

Далее мы можем создать службу Dart для взаимодействия с бэкендом Go. Мы будем использовать клиентскую библиотеку Dio HTTP, поэтому добавьте ее в свой проект Flutter с помощью следующей команды:

flutter pub add dio

Теперь создайте реализацию сервиса продукта в файле lib/product_service.dart со следующим исходным кодом Dart:

import 'package:dio/dio.dart';
import 'package:flutter_frontend/product_model.dart';

class ProductService {
  final String productsURL = 'http://localhost:5000/products';
  final Dio dio = Dio();

  ProductService();

  Future<List<Product>> getProducts() async {
    late List<Product> products;
    try {
      final res = await dio.get(productsURL);

      products = res.data['products']
        .map<Product>(
          (item) => Product.fromJson(item),
        )
        .toList();
    }
    on DioError catch(e) {
      products = [];
    }

    return products;
  }
}

Здесь мы создали асинхронную функцию getProducts для получения продуктов как экземпляров модели Product путем вызова бэкенда Go через клиент Dio. Приведенный выше исходный код предлагает бизнес-данные через сервис Dart, но если вы работаете с большим количеством конечных точек HTTP, вы можете использовать паттерн репозитория для лучшей организации кода.

Наконец, мы можем создать фронтенд приложения со списком продуктов, импортировав вышеупомянутый сервис продуктов. Замените существующий код в файле lib/main.dart следующим кодом:

import 'package:flutter/material.dart';
import 'package:flutter_frontend/product_service.dart';
import 'package:flutter_frontend/product_model.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  final _productService = ProductService();

  @override
  Widget build(BuildContext context) {
    const title = 'Product List';

    return MaterialApp(
      title: title,
      theme: new ThemeData(scaffoldBackgroundColor: const Color(0xffdddddd)),
      home: Scaffold(
        appBar: AppBar(
          title: const Text(title),
        ),
        body: FutureBuilder<List<Product>>(
          future: _productService.getProducts(),
          builder: (context, snapshot) {
            var products = snapshot.data ?? [];

            if(!snapshot.hasData) {
              return const Center(child: CircularProgressIndicator());
            }

            return ListView.builder(
              itemCount: products.length,
              itemBuilder: (context, index) {
                var product = products[index];
                return ListTile(
                  title: Text(products[index].name),
                  subtitle: Text('#${product.id} ${product.description}'),
                  trailing: Text('${product.price}')
                );
              },
            );
          },
        ),
      ),
    );
  }
}

В приведенном выше фрагменте кода мы использовали класс FutureBuilder для отображения анимации загрузки, пока фронтенд не получит все продукты из бэкенда. Запустите приложение на мобильном устройстве или в Chrome, введя команду flutter run. Обязательно замените localhost на локальный IP-адрес вашего компьютера, если вы запускаете приложение на устройстве Flutter, отличном от Chrome.

Вы увидите рабочий интерфейс приложения со списком продуктов, как показано ниже.

Обслуживание веб-приложения Flutter с помощью Go

Теперь мы собираемся открыть наше приложение Flutter как веб-приложение через бэкенд Go. Тогда мы сможем получить доступ к приложению через любой современный веб-браузер. Мы можем легко добавить поддержку статического обслуживания файлов к существующему веб-сервису с помощью статического промежуточного ПО Gin. Установите пакет static middleware из каталога проекта.

go get github.com/gin-contrib/static

Далее добавьте следующий импорт пакета в основной исходный файл Go.

"github.com/gin-contrib/static"

Наконец, попросите фреймворк Gin обслуживать статический веб-контент с помощью следующей строки кода:

r.Use(static.Serve("/", static.LocalFile("./static", false)))

Убедитесь, что окончательный источник веб-сервиса выглядит следующим образом:

package main

import (
    "github.com/gin-gonic/gin"
    "github.com/gin-contrib/cors"
    "github.com/gin-contrib/static"
)

type Product struct {
    Id int `json:"id"`
    Name string `json:"name"`
    Price int `json:"price"`
    Description string `json:"description"`
}

func productsHandler(c *gin.Context) {
    products := []Product {
        Product {100, "BassTune Headset 2.0", 200, "A headphone with a inbuilt high-quality microphone"},
        Product {101, "Fastlane Toy Car", 100, "A toy car that comes with a free HD camera"},
        Product {101, "ATV Gear Mouse", 75, "A high-quality mouse for office work and gaming"},
    }
    c.JSON(200, gin.H{
        "products": products,
    })
}

func main() {
    r := gin.Default()
    r.Use(cors.Default())
    r.Use(static.Serve("/", static.LocalFile("./static", false)))

    r.GET("/products", productsHandler)

    r.Run(":5000")
}

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

flutter build web

Создайте новый каталог с именем static внутри проекта Golang и скопируйте все сгенерированные ресурсы веб-приложения Flutter из каталога ./build/web в каталог static.

Запустите бэкенд-сервер Go и перейдите по URL http://localhost:5000 из веб-браузера. Вы увидите работающее веб-приложение Flutter, как показано ниже.

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

Повторное использование кода Go в приложении Flutter

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

Сейчас мы изменим известное демонстрационное приложение Flutter, отобразив случайное число вместо увеличения существующего числа при каждом нажатии на плавающую кнопку действия. Мы будем генерировать это случайное число с помощью модуля Go. В следующем примере я объясню, как встроить модуль Go в приложение Android. Вы можете использовать аналогичный подход для встраивания модулей Go в приложения для iOS.

Перед тем как продолжить работу над учебником, убедитесь, что на вашем компьютере есть следующие компоненты, которые можно легко установить с помощью Android Studio:

• Android SDK
• Android NDK
• Компилятор Clang и Make

Сначала нам нужно установить Go mobile CLI с помощью следующей команды:

go install golang.org/x/mobile/cmd/gomobile@latest
gomobile init

Если команда gomobile не работает после установки, вы можете решить проблему, добавив бинарник Go mobile в переменную окружения PATH, как показано ниже.

export PATH=$PATH:~/go/bin

Давайте создадим новый модуль Go для генерации случайного числа. Сначала создайте новый проект Go в рабочем каталоге.

mkdir gomobilelib
cd gomobilelib
go mod init gomobilelib

Затем создайте новый файл с именем gomobilelib.go и добавьте в него следующий исходный код.

package gomobilelib

import "math/rand"

type (
    GoMobileLib struct {}
)

func (p *GoMobileLib) RandomNumber() int {
    return rand.Intn(100);
}

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

go get golang.org/x/mobile/bind

Теперь мы можем сгенерировать файл библиотеки Android с помощью следующей команды:

gomobile bind --target android

После выполнения приведенной выше команды вы можете увидеть файл gomobilelib.aar в каталоге модулей Go. Файл .aar содержит библиотеки среды выполнения Go и вышеупомянутый модуль gomobilelib в бинарном формате, специфичном для каждой архитектуры мобильного процессора.

Давайте воспользуемся библиотекой Android, создав новый проект Flutter. Создайте новый проект Flutter с хост-приложением на базе Java.

flutter create gomobilefrontend -a java

Скопируйте файл gomobilelib.aar в каталог ./gomobilefrontend/android/app/src/main/libs. Свяжите вновь созданную библиотеку с основным приложением Android, добавив следующую конфигурацию в файл ./gomobilefrontend/android/app/build.gradle.

repositories {
    flatDir{
         dirs 'src/main/libs'
    }
}
dependencies {
    api(name:'gomobilelib', ext:'aar')
}

Далее замените существующий код в файле MainActivity.java следующим кодом:

package com.example.gomobilefrontend;

import androidx.annotation.NonNull;
import io.flutter.embedding.android.FlutterActivity;
import io.flutter.embedding.engine.FlutterEngine;
import io.flutter.plugin.common.MethodChannel;
import gomobilelib.GoMobileLib;

public class MainActivity extends FlutterActivity {
  private static final String CHANNEL = "example.com/gomobilelib";

  @Override
  public void configureFlutterEngine(@NonNull FlutterEngine flutterEngine) {

    GoMobileLib goMobileLib = new GoMobileLib();

    super.configureFlutterEngine(flutterEngine);
      new MethodChannel(flutterEngine.getDartExecutor().getBinaryMessenger(), CHANNEL)
        .setMethodCallHandler(
          (call, result) -> {
            if(call.method.equals("getRandomNumber")) {
              result.success(goMobileLib.randomNumber());
            }
            else {
              result.notImplemented();
            }
          }
        );
  }
}

Приведенный выше код раскрывает функцию randomNumber библиотеки Android как getRandomNumber для приложения Flutter через API каналов платформы. Теперь мы можем вызвать getRandomNumber из приложения Flutter, чтобы получить новое случайное число.

Теперь вы можете создать асинхронную функцию Dart для вызова экспортированной функции библиотеки Android. Например, следующая функция Dart обновляет переменную _counter случайным числом, сгенерированным модулем Go:

static const platform = MethodChannel('example.com/gomobilelib');
int _counter = 0;

Future<void> _getRandomNumber() async {
  int randomNumber;
  try {
    randomNumber = await platform.invokeMethod('getRandomNumber');
  } on PlatformException catch (e) {
    randomNumber = 0;
  }

  setState(() {
    _counter = randomNumber;
  });
}

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

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'GoMobileFlutter',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter with Go Mobile'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  static const platform = MethodChannel('example.com/gomobilelib');
  int _counter = 0;

  Future<void> _getRandomNumber() async {
    int randomNumber;
    try {
      randomNumber = await platform.invokeMethod('getRandomNumber');
    } on PlatformException catch (e) {
      randomNumber = 0;
    }

    setState(() {
      _counter = randomNumber;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              'The following number was generated by Go:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _getRandomNumber,
        tooltip: 'Get a random number',
        child: const Icon(Icons.add),
      ),
    );
  }
}

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

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

Исходный код этого проекта доступен в моем репозитории GitHub.

Заключение

В этой статье мы обсудили преимущества использования Go для приложений Flutter на примере веб-службы RESTful. Многие разработчики используют паттерн веб-сервиса RESTful для современных облачно-ориентированных приложений, но подход RESTful не решает всех технических требований. Например, для двунаправленных асинхронных коммуникаций вам, возможно, придется использовать протокол WebSockets; для легких и высокоскоростных потоковых вызовов вы можете рассмотреть возможность использования протокола gRPC.

Экосистема пакетов Go предоставляет пакеты для протоколов WebSockets и gRPC, поэтому вы можете использовать Go для реализации бэкендов для ваших фронтендов Flutter с любым предпочитаемым протоколом связи.

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

LogRocket: Полная видимость ваших веб-приложений

LogRocket — это решение для мониторинга фронтенд-приложений, которое позволяет воспроизводить проблемы так, как будто они происходят в вашем собственном браузере. Вместо того чтобы гадать, почему возникают ошибки, или просить пользователей предоставить скриншоты и дампы журналов, LogRocket позволяет воспроизвести сессию, чтобы быстро понять, что пошло не так. Он отлично работает с любым приложением, независимо от фреймворка, и имеет плагины для регистрации дополнительного контекста из Redux, Vuex и @ngrx/store.

Помимо регистрации действий и состояния Redux, LogRocket записывает журналы консоли, ошибки JavaScript, трассировку стека, сетевые запросы/ответы с заголовками + телами, метаданные браузера и пользовательские журналы. Он также использует DOM для записи HTML и CSS на странице, воссоздавая пиксельно идеальные видео даже самых сложных одностраничных приложений.

Попробуйте бесплатно.