Урок 3 — Создание web-приложения Front+API (основы программирования)
167
4
01:12:56
10.06.2021
Курс: Основы программирования на 1С и JavaScript
Урок 3: Создание web-приложения (Front+API)
Программа урока:
00:00 Клиент — Сервер
03:39 TCP/IP
05:25 HTTP запросы и ответы
07:28 Статика и API
12:43 Создание API на NodeJS
31:22 Создание web-приложения (Bootstrap, JS)
47:56 Fetch
Мы более 20 лет занимаемся программированием, интеграцией и доработкой программ 1С. Этот курс предназначен для стажеров 1С, начинающих программистов и интересующихся данной темой специалистов.
Надеемся данный курс будет вам полезен.
#программирование
#программирование1С
#javascript
#1с
Тестирование на мобильном устройстве
Expo-cli предоставляет различные методы тестирования: используя URL-адрес, сгенерированный после запуска приложения. Его можно открыть в мобильном браузере для последующего тестирования приложения.
Выполните команду npm run start-native в папке проекта, чтобы запустить приложение с помощью expo. Обычно Expo запускает через порт 19002. Откройте страницу http://localhost:19002 для просмотра инструментов разработчика, предоставляемых платформой. Здесь вы сможете отправить ссылку для предварительного просмотра в SMS или по электронной почте.
Вы можете выбрать один из трех вариантов подключения: внешний туннель, локальная сеть или локальное соединение. Для локального подключения мобильное устройство и рабочий компьютер должны быть подключены к одной сети, а туннель работает независимо.
Следующий простой способ – загрузить официальное мобильное приложение Expo. Его можно найти Apple App Store или Google Play.
Чтобы запустить приложение в iOS, после установки откройте камеру и отсканируйте штрих-код. В Android вы также можете использовать приложение Expo.
Выполните следующую команду:
npm start
После запуска приложения отсканируйте штрих-код и просмотрите приложение в Expo.
Следующий вариант тестирования на мобильном устройстве – использование эмулятора или симулятора в Android studio или Xcode. Скачайте и установите инструмент для интересующей вас платформы. После этого выполните любую из следующих команд, чтобы запустить приложение:
npm run ios
или
npm run android
Как превратить приложение в PWA с помощью Vue.js
У PWA есть несколько требований:
- Используется JavaScript service worker (чтобы сайт мог загружаться в автономном режиме и хранить данные локально)
- Наличие действительного JSON-манифест в котором хранится информации о приложении.
- Набор иконок с правильными именами разных размеров
- Безопасное HTTPS-соединение
В наши дни большинство хостингов предоставляют SSL-сертификаты бесплатно (многие даже делают это автоматически), поэтому мы не будем здесь вдаваться в требования HTTPS. Это должно быть самой легкой частью.
Остальное может показаться не таким уж сложным, но для создания всего этого требуется много шаблонов, как с точки зрения файлов, так и с точки зрения самого кода. Если бы вы делали это вручную, это было бы, мягко говоря, утомительной задачей.
К счастью, с Vue есть более простой способ благодаря Vue CLI!
Vue CLI предлагает удобный плагин PWA, и, что еще лучше, его можно добавить в существующий или новый проект.
Ionic 2 vs React Native
Ionic 2 и React Native позволяют создавать мобильные приложения. Принципиальная разница между этими фреймворками заключает в типе мобильного приложения, которое создается с использованием того или иного фреймворка. Ionic 2 позволяет создавать гибридное мобильное приложение, которое осуществляет рендеринг в WebView/UIWebView, при необходимости использовать API платформы нужно использовать дополнительные плагины. React Native позволяет создавать нативное мобильное приложение, используя фундаментальные стандартные блоки UI (как и обычные приложения iOS и Android, написанные на родном языке — Objective-C/Swift и Java соответственно). В приложении на React Native используются определенные шаблоны заданные самой платформой.
Выполнение кода и связь с нативным API в приложениях, написанных на Ionic 2 (слева) и React Native (справа)
Схема показывает составляющие кода приложения и вызов нативного API из приложений. В случае Ionic 2 отрисовку интерфейса пользователя выполняет браузер, в для React Native — непосредственно операционная система. Такое различие проявляется в более привычной прорисовке компонент и более гладкой анимаций приложений на React Native. Пользовательский интерфейс React Native приложений будет ближе к другим приложениям платформы. Ввиду того, что приложение, написанное на React Native, компилируется в нативный для платформы язык, не нужно использовать дополнительные промежуточные компоненты (например, Cordova), часто это дает лучшую производительность приложений. Проблемы с производительностью — одна из проблем Ionic 2.
При возникновении нативного события фреймворки по-разному его обрабатывают. Ionic 2 блокирует поток и передает управление на JavaScript-код, ожидая его инструкций. React Native выполняет JavaScript в отдельном фоновом потоке, взаимодействуя с главным потоком асинхронно.
Настраиваем Vue
Чтобы создать индивидуальный темплейт проекта, мы будем задействовать мощный интерфейс Vue CLI. Устанавливаем его глобально:
$ npm install -g
Теперь в каталоге flask-vue-crud выполняем команду, которая нужна для инициализации нового проекта Vue с конфигурацией webpack и под именем client :
$ vue init webpack client
Что касается webpack, то это инструмент для сборки и пакетный модуль, применяемый для создания, минимизации и объединения JS-файлов и прочих клиентских ресурсов.
При создании нового Vue-проекта вам потребуется ответить на несколько вопросов:
1. Установить vue-router? — Да.
2. Использовать для линтинга кода ESLint? — Да.
3. Выберите пресет ESLint — Airbnb.
4. Настраивать юнит-тесты? — Нет.
5. Настраивать тесты e2e с Nightwatch? — Нет.
6. Запускать установку npm после создания проекта? — Да, применять NPM.
Vue-сборка в нашем случае — Runtime + Compiler.
Vue CLI v3.7.0 ? Please pick a preset: Manually select features ? Check the features needed for your project: Babel, Router, Linter ? Use history mode for router? Yes ? Pick a linter / formatter config: Airbnb ? Pick additional lint features: Lint on save ? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? In package.json ? Save this as a preset for future projects? (y/N) No
Если посмотреть на сгенерированную структуру проекта, то может показаться, что она очень большая. Однако по факту вам придётся иметь дело лишь с папками и файлами в каталоге /src вместе с файлом index.html.
Что касается файла index.html, то он является отправной точкой нашего Vue-приложения.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>client</title>
</head>
<body>
<div id="app"></div>
<!-- встроенные файлы вводятся автоматически -->
</body>
</html>
Кроме того, у нас есть элемент
Отображение сообщений блога на главной странице
Наша текущая домашняя страница довольно проста, так что нам нужно сделать ее лучше, отобразив на ней последние сообщения из блога. Мы сделаем это, создав компонент <posts> и разместив его на странице index.vue.
Но сначала мы должны получить сохраненные записи в блоге в виде JSON и поместить этот файл в корневой папке приложения. Файл можно скачать отсюда, или вы можете просто скопировать JSON ниже и сохранить в корневой папке как posts.json:
[
{
"id": 4,
"title": "Building universal JS apps with Nuxt.js",
"summary": "Get introduced to Nuxt.js, and build great SSR Apps with Vue.js.",
"content": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>",
"author": "Jane Doe",
"published": "08:00 - 07/06/2017"
},
{
"id": 3,
"title": "Great SSR Use cases",
"summary": "See simple and rich server-rendered JavaScript apps.",
"content": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>",
"author": "Jane Doe",
"published": "17:00 - 06/06/2017"
},
{
"id": 2,
"title": "SSR in Vue.js",
"summary": "Learn about SSR in Vue.js, and where Nuxt.js can make it all faster.",
"content": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>",
"author": "Jane Doe",
"published": "13:00 - 06/06/2017"
},
{
"id": 1,
"title": "Introduction to SSR",
"summary": "Learn about SSR in JavaScript and how it can be super cool.",
"content": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>",
"author": "John Doe",
"published": "11:00 - 06/06/2017"
}
]
Примечание: в идеале сообщения должны быть получены по API из внешнего ресурса. Для этого можно использовать какой нибудь внешний сервис, например, Contentful
Компоненты размещаются в каталоге components. Там мы создадим отдельный файловый компонент <posts>:
<!-- ./components/Posts.vue -->
<template>
<section class="main-content">
<div class="container">
<h1 class="title has-text-centered">
Recent Posts.
</h1>
<div class="columns is-multiline">
<div class="column is-half" v-for="post in posts" :key="post.id">
<div class="card">
<header class="card-header">
<p class="card-header-title">
` post`.`title `
</p>
</header>
<div class="card-content">
<div class="content">
` post`.`summary `
<br>
<small>
by <strong>` post`.`author`</strong>
\\ ` post`.`published `
</small>
</div>
</div>
<footer class="card-footer">
<nuxt-link :to="`/post/${post.id}`"
class="card-footer-item">
Read More
</nuxt-link>
</footer>
</div>
</div>
</div>
</div>
</section>
</template>
<script>
import posts from '~/posts.json'
export default {
name: 'posts',
data () {
return { posts }
}
}
</script>
Мы импортируем данные записей из сохраненного файла JSON и присваиваем их значению posts в нашем компоненте. Затем мы перебираем все записи в шаблоне компонента с помощью директивы v-for и отображаем нужные нам атрибуты записи.
![React native vs flutter: which framework is better? [2021] | yojji](https://luxe-host.ru/wp-content/uploads/5/b/1/5b1bb1385a81ad9ff5ebe023012b7b83.png)
Примечание. Символ ~ является псевдонимом для корневого каталога /. Вы можете просмотреть документацию , чтобы узнать о различных псевдонимах, которые предоставляет Nuxt.js, и с какими каталогами они связаны.
Затем мы добавляем компонент <posts> на домашнюю страницу:
<!-- ./pages/index.vue -->
<template>
<div>
<!-- ... -->
<posts />
</div>
</template>
<script>
import Posts from '~/components/Posts.vue'
export default {
components: {
Posts
},
// ...
}
</script>
Настройка нашего PWA в Vue
Для плагина PWA можно использовать значения по умолчанию, но давайте изменим цвета и логотип вашего приложения.
Чтобы переопределить значения по умолчанию в манифесте нашего веб-приложения, нам нужно настроить файл vue.config.js в корне нашего проекта. Полную информацию можно найти в документации по подключаемому модулю PWA, но то, что определено в нашем файле vue.config.js, будет иметь приоритет над значениями по умолчанию для подключаемого модуля PWA и переопределит их.
Согласно документации, вы также можете определить эти параметры в файле проекта package.json, но я считаю, что писать на JavaScript немного проще, и он менее синтаксически строг, чем JSON.
В документации к плагину PWA есть полный список всех свойств, которыми вы можете управлять, но некоторые из них стоит выделить.
Проверьте pwa.name и pwa.themeColor, которые находятся под . Вот скриншот из документации для справки:
Обратите внимание на значения по умолчанию. Удобно знать, какие варианты будут применяться, когда мы ничего не выбираем
(В приведенных выше случаях поле имени из package.json и Vue зеленого цвета.)
Создайте файл с именем vue.config.js в корне вашего проекта. Откройте его и добавьте код, например:
Теперь, если мы повторно запустим наш скрипт сборки и обслуживания, мы сможем переустановить PWA. И мы должны увидеть наш новый заголовок и цвет темы.
Обратите внимание, что в манифесте есть несколько обязательных полей — плагин PWA обрабатывает их все за нас. Короткое имя для вашего приложения (это всего лишь несколько символов), вероятно, хорошая идея; «Конвертер измерений жидкости» в некоторых случаях может оказаться слишком длинным
Есть и другие варианты цвета, которые стоит настроить; еще раз, см. документацию плагина для получения более подробной информации.
Добавление пользовательских иконок PWA
Есть еще одна приятная вещь, о которой позаботился плагин PWA: он сгенерировал набор иконок для нашего приложения в public/img/icons:
Названия и размеры этих иконок важны. Различные браузеры и операционные системы будут искать эти значки, чтобы помочь идентифицировать наше PWA.
У нас также есть некоторый контроль над нашей иконкой через манифест нашего веб-приложения. Чтобы изменить значок, который мы хотим использовать в нашем PWA, нам нужно добавить свойство icons в объект параметров pwa внутри vue.config.js.
Вот как выглядит по умолчанию, просто для справки:
Везде, где наше приложение упоминается в пользовательском интерфейсе, эти значки будут служить логотипом нашего приложения. Они будут использоваться в качестве фавиконов, значков приложений, индикаторов строки состояния и т. д.
И еще раз, просто чтобы подчеркнуть: PWA нельзя будет установить, если у него нет нужных файлов значков. Значки должны быть в правильном месте и иметь правильные имена для универсальной поддержки.
К счастью, плагин PWA уже добавил все нужные нам иконки. Все, что нам нужно сделать, это заменить каждое изображение значком одинакового размера и имени по нашему выбору.
Существует несколько инструментов для создания иконок PWA на основе браузера, если вы хотите создать одну версию и автоматизировать остальные. Я обнаружил, что realfavicongenerator.net является наиболее полезным из этих инструментов. В идеале оригинал должен иметь размер 512 на 512 пикселей, так как это максимальный размер, который может использовать любая операционная система или браузер.
Может быть полезно знать, что после сборки вы можете открыть dist/manifest.json в текстовом редакторе (или посетить /manifest.json в окне браузера), чтобы своими глазами увидеть файл манифеста плагина Vue PWA. генерируется для вашего проекта.
Другие варианты PWA с Vue
Так есть много других параметров конфигурации. Просмотрите полный список параметров в документации подключаемого модуля PWA, чтобы получить представление о том, что возможно.
Если вы сомневаетесь, я бы рекомендовал придерживаться значений по умолчанию, если у вас нет веских причин для внесения изменений. Документация хорошо справляется со ссылками на объяснения там, где все усложняется.
Почему именно VuePress?
Я хочу сказать — почему бы и не VuePress! По умолчанию VuePress генерирует из структурированных по папкам markdown-файлов HTML-файлы, которые будут использоваться в дальнейшем для показа пользователям.
Генератор VuePress из коробки имеет в своем составе фреймворк Vue, библиотеку VueRouter для создания маршрутизации и систему webpack для сборки проекта. Во время сборки все markdown-файлы преобразуются в Vue-шаблоны, в то время как все дополнительные файлы обрабатываются системой сборки webpack.
Преобразование markdown-файлов в Vue-шаблоны предоставляет нам возможность использовать нативные Vue-скрипты в том виде, в каком они используются в обычных Vue-компонентах.
VuePress является системой, хорошо оптимизированной для SEO и предоставляющей инструменты Google Analytics для анализа посещаемости страниц. Также VuePress имеет встроенную поддержку системы поиска по сайту при помощи индексации заголовков страниц и отображения их в процессе поиска.
VuePress имеет встроенную поддержку адаптивной разметки страниц, а также позволяет видоизменять или создавать свою собственную разметку. В рамках данной статьи мы создадим простую систему документации с поддержкой темы оформления по умолчанию; также мы воспользуемся такой возможностью, как Vue in Markdown, что позволит нам встроить простой счетчик внутри markdown-файла.
Окончательный вид проекта будет следующим:
4: Получение данных из API
Пришло время с помощью cryptocompare API заменить фиктивные данные живыми, чтобы отобразить реальную цену Bitcoin и Ethereum на веб-странице в долларах США и евро.
Чтобы получить данные для страницы, сделайте запрос на следующий URL-адрес, который запрашивает Bitcoin и Etherium в долларах США и евро:
Этот API вернет ответ в JSON. Используйте curl, чтобы обратиться к API и получить ответ:
Вы увидите такой результат:
Этот результат выглядит точно так же, как жестко закодированная модель данных, которая использовалась ранее. Все, что вам нужно сделать – это заменить данные, сделав запрос на этот URL-адрес из вашего приложения.
Чтобы сделать запрос, можно использовать функцию Vue mounted() в сочетании с функцией GET библиотеки Axios для извлечения данных и сохранения их в массиве results в модели данных. Функция mounted вызывается сразу после монтирования приложения Vue. Как только приложение Vue смонтировано, оно отправит запрос API и сохранит результаты. Изменения будут переданы веб-странице, и на ней будут отображаться новые значения.
Сначала откройте index.html и загрузите библиотеку Axios, добавив скрипт после строки, которая включает Vue:
Сохраните файл, затем откройте vueApp.js и измените его, чтобы он мог отправлять запросы API и заполнять модель полученными данными:
Обратите внимание, что значения результатов по умолчанию можно удалить и заменить их пустым массивом. При первом запуске приложения данных быть не должно, но без пустого массива приложение не сможет работать
Представление HTML ожидает, что некоторые данные переберутся при загрузке.
Функция axios.get использует Promise. Когда API возвращает данные, выполняется код внутри блока then, и данные сохраняются в переменной results.
Сохраните файл и перезагрузите страницу index.html в веб-браузере. На этот раз вы увидите текущие цены на криптовалюты.
Если у вас возникли проблемы, обратитесь к мануалу Использование консоли разработчика JavaScript и попробуйте устранить неполадки через консоль.
Создание папок и файлов
При создании папок в VuePress нужно принимать во внимание, что расположение файлов и директорий в структуре проекта имеет существенное значение. Каждый markdown-файл в любой из директорий компилируется в HTML-файл и маршрутом до этого файла будет являться родительская директория
Для начала давайте создадим папку , внутри которой будут размещаться все будущие папки и конфигурационные файлы нашего проекта:
mkdir docs && cd $_
В этой корневой директории нам нужно создать специальную папку и две дополнительные папки проекта: и .
Внутри директории расположены дополнительные markdown-файлы, которые будут сгенерированы в обычные HTML-файлы. Помимо этих файлов внутри папки расположен файл для генерации маршрута до этой директории. Аналогичная структура файлов присутствует и в папке .
Директория предназначена для служебных целей — внутри неё будет располагаться директория с компонентами; папка , которая будет сгенерирована автоматически в процессе сборки проекта; файл , в котором будут храниться настройки проекта.
Управление состоянием
- Добавить в файл с константами три константы: , , .
- Добавить создатель действия в файл действий.
- Обработать три действия в подходящем редьюсере, и, если нужно, добавить в систему новый редьюсер и включить его в корневой редьюсер.
- Добавить воркеры в подходящую сагу, и, если нужно, добавить в систему новую сагу и включить её в корневую сагу (я, для обработки асинхронных действий, использую библиотеку redux-saga).
- Добавить функцию для обработки любых возможных запросов к API.
- Сделать маппинг необходимых данных из состояния в свойства в соответствующем React-компоненте.
- Отправить действие из соответствующего React-компонента.
Размеры приложений
Для обоих фреймворков существуют «пустые» приложения – это каркасы приложений с минимальным кодом. Такие приложения генерируются с использованием CLI:
- Ionic 2:
- React Native:
Пустые приложения собирались в двух режимах: debug и release. Первый режим предназначен для отладки приложения, второй — для непосредственных поставок готовых приложений конечным пользователям.
| Ionic 2 | React Native | |||
|---|---|---|---|---|
| Приложение в режиме debug | Приложение в режиме release | Приложение в режиме debug | Приложение в режиме release | |
| iOS | 18.3 Mb | 17.9 Mb | 4.8 Mb | 4.6 Mb |
| Android | 5.54 Mb | 4.0 Mb | 32.38 Mb | 16.35 Mb |
Приложения на различных фреймворках имеют различный размер на различных платформах. Ionic 2 выигрывает на Android, а React Native – на iOS.
# Стратегия для тестирования роутер хуков
Vue Router предоставляет несколько типов хуков, которые называются навигационными хуками
. Два таких примера:
- Глобальные хуки завершения перехода (). Объявляются в экземпляре роутера.
- Хуки для конкретных компонентов, такие как . Объявляются в компонентах.
Проверка правильности их работы обычно является задачей интеграционного теста, поскольку пользователь должен перемещаться от одного маршрута к другому. Тем не менее вы также можете использовать модульные тесты, чтобы проверить, правильно ли работают функции, вызываемые в навигационных хуках, и получить более быстрые отзывы о потенциальных ошибках. Вот некоторые стратегии по отделению логики от хуков навигации и написанию модульных тестов вокруг них.
Где применяется Vue.js
Vue подходит для небольших проектов, которым необходимо добавить немного реактивности, представить форму с помощью AJAX, отобразить значения при вводе данных пользователем, авторизация или другие аналогичные задачи. Vue легко масштабируется и хорошо подходит для объемных проектов, поэтому его называют прогрессивным фреймворком.
Vue также отлично подходит для крупных одностраничных приложений благодаря своим основным компонентам, таким как Router и Vuex. С Vue можно как использовать общедоступные API для создания приложений, так и реализовывать выполняемые сервером приложения. Но Vue лучше всего подходит для разработки решений, которые используют внешние API для обработки данных.
С помощью Vue также можно создавать frontend блога на популярных CMS. Vue.js отлично подходит и для разработки динамических интерфейсов, которые адаптируются под пользователя.
Проверяем работу Vue в Laravel
Для теста заменим код шаблона на:
Дальше попробуем подключить в этот шаблон компонент Vue. После всех манипуляций, которые мы проделали выше, в папке нам доступен пример Vue компонента ExampleComponent.vue
Чтобы его подключить добавим в шаблон welcome.blade.php строку то место, куда нужно подключить компонент, например так:
Теперь если перейдем на главную страницу http://vuetest.loc/, мы увидим подключенный компонент.
Если попробовать изменить компонент, например поменять текст на Привет Vue! И обновить главную страницу страницу, ничего не произойдет. Чтобы видеть изменение, необходимо пересобрать фронтенд.
Выполним команду:
Она пересоберет наш фронтенд и продолжит выполняться в терминале. Она будет следить за всеми изменениями наших ресурсов и при любых изменениях будет автоматически обновлять файлы.
Теперь обновив главную страницу мы видим измененный компонент Vue с нашим текстом.
Стоимость разработки
Теперь давайте разберемся, насколько сложно найти разработчиков, умеющих во Flutter или React Native, сколько они стоят и какие ещё расходы вам следует иметь в виду при разработке.
Flutter vs. React Native: что лучше знают разработчики
В 2020 году Stack Overflow провела опрос разработчиков: исследователи спрашивали разработчиков о технологиях, средах разработки и инструментах, которые они используют. 11,8% респондентов заявили, что используют React Native, 6,6% – Flutter.
Цифры небольшие, и вам может показаться, что искать разработчиков React Native и Flutter будет сложно. На самом деле, это не сложнее, чем найти кого-нибудь для создания нативного приложения: тот же опрос показывает, что только 8% разработчиков используют Kotlin, который является основным языком программирования для разработки Android.
По состоянию на апрель 2020 года более 2 миллионов человек попробовали Flutter; количество его ежемесячных пользователей достигло 500 000
Что еще более важно – 92% разработчиков, использующих Flutter, заявили, что этот фреймворк им нравится. Собственно, опрос Stack Overflow показал, что Flutter любят больше, чем React Native: 68,8% против 57,9%.
Популярность среди разработчиков Flutter vs. React Native: React Native пока выигрывает, но это вопрос времени.
Зарплаты разработчиков
Большую часть расходов на разработку мобильных приложений составляет заработная плата персонала.
LinkedIn и Indeed провели исследования и вывели примерные диапазоны оплаты труда разработчиков Flutter и React Native. Например, вот зарплаты для рынка США на февраль 2021 года.
Flutter vs. React Native зарплаты разработчиков, США
А Upwork приводит данные по почасовой оплате разработчикам на Flutter и React Native на февраль 2021 года по трём географически распределённым группам: США, Азия (Индия, Пакистан и т. д.) и Восточная Европа (Россия, Украина, Беларусь, Польша и др.).
Flutter vs. React Native почасовая оплата разработчиков
Кажется, если мы будем подводить итог раунда здесь, то вывод очевиден.
Экономия на оплате труда Flutter vs. React Native: React Native выигрывает.
Но для окончательного итога давайте посмотрим на ситуацию на российском рынке. Для этого обратимся к hh.ru.
Как видите, на российском рынке разработчики Flutter пока обходятся работодателю дешевле. Но и востребованность их гораздо ниже, чем разработчиков React Native. Логично предположить, что с ростом востребованности разработчиков Flutter начнётся и рост зарплат.
Ну, а пока для российского рынка. Экономия на оплате труда Flutter vs. React Native: Flutter выигрывает.
Заключение
Преимуществом статических сайтов является скорость их работы, безопасность и легкость поддержки. В данном руководстве при помощи VuePress мы создали сайт статических файлов (документацию), который одновременно является одностраничным приложением (SPA).
Система VuePress предоставляет гибкость при написании Vue-скриптов внутри markdown-файлов, что поднимает процесс создания статических файлов на новый уровень. В процессе создания документации можно легко изменять стандартную структуру проекта и соответствующих markdown-файлов.
В процессе чтения данного руководства можно воспользоваться ссылкой на репозиторий автора с готовым проектом, где вы можете оставлять свои комментарии и отклики.
