десктоп приложение на react
5 лучших JavaScript-фреймворков для десктопных приложений
Хочешь проверить свои знания по фронтенду?
Подпишись на наш канал с тестами по HTML/CSS/JS в Telegram!
Перевод статьи Бианки Плющевской «5 Best JavaScript Frameworks for Desktop Apps».
Еще не так давно построить десктопное приложение с помощью JavaScript было невозможно. К счастью, те времена прошли, и теперь JS-разработчики могут применить свои знания и опыт в веб-разработке для создания десктопных приложений.
Как всегда, легче сказать, чем сделать. Занимаясь поиском материала, мы заметили, что существует много путаницы относительно того, как на самом деле построены десктопные приложения на JavaScript, и того, как они работают. Также довольно сложно подобрать правильные инструменты для работы над подобным проектом.
В этой статье мы поближе познакомимся с пятью самыми известными JavaScript-фреймворками для десктопных приложений.
#1 Electron
Electron это фреймворк с открытым исходным кодом. Изначально он был создан GitHub для редактора Atom, и произошло это в 2013 году. Эта библиотека позволяет вам создавать GUI десктопных приложений с помощью таких веб-технологий как JavaScript, HTML и CSS.
Десктопные приложения, созданные с помощью Electron, ведут себя, как веб-приложения, но могут читать и записывать данные в файловой системе компьютера. На рынке есть много десктопных приложений, построенных на Electron. Например, Skype для Linux или Slack. Если хотите узнать больше о популярных десктопных приложениях, построенных с помощью Electron, почитайте эту статью.
Существенное преимущество этого решения в том, что веб-разработчику не приходится изучать новую технологию или язык для создания десктопного приложения. Electron обычно использует уже созданные бизнес-логику, дизайн и общую структуру веб-приложения. Это отличный способ сэкономить время и деньги, как для заказчика, так и для разработчика.
Если вы – JavaScript-разработчик, вам нужно будет изучить совсем немного относительно простых вещей о том, как работает Electron и его API. Скорее всего вы сумеете создать свое первое десктопное приложение всего за несколько дней.
Electron это состоявшаяся технология с растущим сообществом, благодаря чему может считаться отличным рабочим окружением. Благодаря движку Chromium для UI-рендеринга вы получаете доступ к таким инструментам как Developer Tools и Storage Access.
#2 NW.js
Следующим в нашем списке идет NW.js, прежде известный как node-webkit. Он был создан в Центре технологий с открытым исходным кодом компании Intel путем комбинирования фреймворка Node.js и движка Chromium (прежде известного как Webkit).
Благодаря комбинации Node.js и Chromium вы можете создать приложение, которое будет не только загружать локальный вебсайт в окне приложения, но также коннектиться к OS через JavaScript API. Подобное решение позволяет вам контролировать такие параметры как размеры окна, панель инструментов и пункты меню, а также обеспечивает доступ к локальным файлам на компьютере.
NW.js не догматичен; он предоставляет вам свободу выбора фреймворков и библиотек, которые вы хотели бы использовать в своем проекте. Он дает возможность вызывать модули Node.js прямо из DOM, поддерживает все особенности браузера, обеспечивает защиту исходного кода JavaScript. Доступен для Linux, Mac OS и Windows.
#3 AppJS
AppJS это простой, но мощный инструмент. С его помощью можно создавать кросс-платформенные приложения, и для этого вам не придется изучать новые языки. Подобно уже упомянутым библиотекам, для работы с AppJS вам понадобятся только знания HTML, CSS и JavaScript.
Если сравнивать AppJS, Electron и NW.js, то AppJS это старейший Node.js-Chromium фреймворк. Но он даже отдаленно не такой зрелый, как его собратья. И поскольку он «выдохся», то может быть не лучшим выбором для новых проектов.
С AppJS вы получаете:
#4 Meteor
Meteor рекламирует себя как «быстрейший способ создания JavaScript-приложений» и «платформу с открытым кодом для мобильной, десктопной и веб-разработки». Этот кросс-платформенный фреймворк написан на Node.js.
Хотя у вас и не получится создавать десктопные приложения с помощью одного лишь Meteor, вы можете использовать его совместно с Cordova или другими похожими инструментами.
Meteor использует MongoDB, протокол распределенных данных (Distributed Data Protocol) и шаблон публикации-подписки для автоматической рассылки изменений без вмешательства разработчика. В нем есть фронтенд- и бэкенд-модули, включая API, инструменты, пакеты Node.js.
#5 Proton Native
Proton Native выпущен недавно. Он стал доступен на GitHub в начале 2018. Proton Native для разработки десктопных приложений делает примерно то же, что React Native сделал для мобильной. Узнать больше о разнице между React.js, React Native и React VR можно здесь.
Это один из лучших JavaScript-фреймворков для десктопных приложений, поскольку позволяет вам управлять состоянием и без заминок строить кросс-платформенные пользовательские интерфейсы. Его работа отличается от работы Electron, который запускает целый браузер Chromium для управления маленьким GUI. Proton Native, в свою очередь, использует собственные инструменты, занимает меньше места и потребляет меньше ресурсов.
У этого решения есть и другие преимущества: Proton Native использует тот же синтаксис, что и React Native, работает с библиотеками React (включая Redux) и совместим с Node.js.
Итоги
В целом, JavaScript-фреймворки для десктопных приложений можно разделить на три категории:
Выбор зависит только от вас и в основном зависит от типа проекта, над которым вы работаете.
Надеемся, что этот краткий список поможет вам обратить внимание на данные инструменты и облегчит процесс принятия решения.
Учебник. React в Windows для начинающих
Если вы только начинаете свое знакомство с React, это руководство поможет вам начать работу.
Предварительные требования
Несколько основных терминов и понятий
React — это библиотека JavaScript для создания пользовательских интерфейсов.
Это решение с открытым кодом — вы можете участвовать в этом проекте, публикуя проблемы и запросы на вытягивание. (См. эту документацию!)
Это декларативная библиотека — вы пишете нужный код, с которым затем React выполняет все действия JavaScript и DOM, чтобы получить нужный результат.
Она также основана на компонентах — приложения создаются с помощью готовых и многократно используемых независимых модулей кода, которые управляют собственным состоянием и которые можно объединить с помощью платформы React. Это позволяет передавать данные через приложение, сохраняя состояние из модели DOM.
Основной принцип работы с React: «Выучи один раз, используй везде». Целью является повторное использование кода. Вам не нужно делать предположения о том, как вы будете использовать пользовательский интерфейс React с другими технологиями. Вместо этого нужно сделать компоненты многократно используемыми без необходимости перезаписывать существующий код.
JSX — это расширение синтаксиса для JavaScript, написанное для использования с React. Оно выглядит как HTML, но фактически является файлом JavaScript, который необходимо скомпилировать или преобразовать в обычный код JavaScript.
Виртуальная модель DOM — модель DOM представляет пользовательский интерфейс приложения. При каждом изменении состояния пользовательского интерфейса приложения модель DOM обновляется для представления изменений. Если модель DOM обновляется часто, производительность снижается. Виртуальная модель DOM — это визуальное представление модели DOM, поэтому при изменении состояния приложения обновляется виртуальная модель DOM, а не сама модель DOM, что позволяет оптимизировать производительность. Это репрезентация объекта DOM, упрощенная копия.
Представления — это то, что видит пользователь в браузере. В React представление связано с понятием элементов отрисовки, которые пользователь должен видеть на экране.
Состояние — это данные, хранимые в разных представлениях. Состояние обычно зависит от прав и действий пользователя. Например, при входе на веб-сайт может отображаться ваш профиль пользователя (представление) с вашим именем (состояние). Данные состояния зависят от пользователя, но представление не меняется.
Использование React в Visual Studio Code
Создать приложение с помощью React можно разными способами (примеры см. в статье Общие сведения о React). В этом учебнике описано, как использовать create-react-app для ускорения настройки работающего приложения React, чтобы вы могли сосредоточиться на экспериментах с кодом, а не отвлекаться на средства сборки.
Измените каталоги, чтобы перейти в папку для нового приложения ( cd hello-world ), и запустите приложение ( npm start ).
Новое приложение React Hello World будет скомпилировано. Затем оно откроется в веб-браузере по умолчанию по адресу localhost:3000.
Найдите файл src/App.js и перейдите в следующий раздел заголовка:
Измените его следующим образом:
Использование React с API
Используя то же приложение Hello World, созданное с помощью React и обновленное в Visual Studio Code, мы добавим вызов API для отображения некоторых данных.
Во-первых, мы удалим все содержимое из этого файла app.js и сделаем из него компонент класса. Сначала мы импортируем компонент из React для создания компонента класса. (Типов компонентов два: класс и функция.) В оператор return() также будет добавлен пользовательский код JSX. Чтобы увидеть результат, нужно перезагрузить страницу.
Теперь файл app.js будет выглядеть так:
Чтобы добавить локальное состояние, необходимо сначала добавить конструктор. При реализации конструктора для подкласса React.Component следует вызывать super(props) перед любым другим оператором. В противном случае this.props не удастся определить в конструкторе, что может привести к ошибкам. Данные в компоненты передают свойства.
Теперь файл app.js будет выглядеть так:
Общие сведения о React
Что такое React JS?
React — это библиотека JavaScript с открытым кодом для создания внешних пользовательских интерфейсов. В отличие от других библиотек JavaScript, предоставляющих полноценную платформу приложений, React ориентируется исключительно на создание представлений приложений через инкапсулированные единицы (называются компонентами), которые сохраняют состояние и генерируют элементы пользовательского интерфейса. Вы можете разместить отдельный компонент на веб-странице или вложить иерархии компонентов для создания сложного пользовательского интерфейса.
Компоненты React часто пишутся на JavaScript и JSX (JavaScript XML), который является расширением JavaScript, очень похожим на HTML и включающим некоторые функции синтаксиса для оптимизированного выполнения распространенных задач, например регистрации обработчиков событий для элементов пользовательского интерфейса. Компонент React реализует метод отрисовки, который возвращает код JSX, представляющий пользовательский интерфейс компонента. В веб-приложении код JSX, возвращаемый компонентом, преобразуется в поддерживаемый браузером код HTML, который затем обрабатывается для отображения браузером.
Работает ли React в Windows?
Да. Windows 10 поддерживает две разных среды для разработки приложений React:
Чтобы понять, какую среду использовать, ознакомьтесь со статьей Выбор между установкой в Windows и подсистеме Windows для Linux.
Что можно делать с помощью React?
Windows 10 поддерживает широкий спектр сценариев для разработчиков React, в том числе следующие:
Базовые веб-приложения. Если вы не знакомы с React и в основном хотите узнать, как создать базовое веб-приложение с помощью React, мы рекомендуем установить create-react-app непосредственно в Windows. Если вы планируете создать веб-приложение, которое будет развернуто для рабочей среды, рекомендуем установить create-react-appcreate-react-app в подсистеме Windows для Linux (WSL), что позволит обеспечить повышенную производительность, совместимость системных вызовов и согласованность между локальной средой разработки и средой развертывания (в качестве которой часто используется сервер Linux).
Одностраничные приложения. Это веб-сайты, которые взаимодействуют с пользователем, динамически перезаписывая текущую веб-страницу с помощью новых данных с сервера (в отличие от поведения браузера по умолчанию с загрузкой целых новых страниц). Если вы хотите создать статический веб-сайт с ориентированным на содержимое одностраничным приложением, мы рекомендуем установить Gatsby в WSL. Если вы хотите создать веб-сайт с одностраничным приложением, которое отрисовывается на сервере, и серверной частью на Node.js, мы рекомендуем установить Next.js в WSL. (Хотя Next.js теперь также предлагает возможности по обработке статических файлов.)
Собственные классические приложения. React Native для Windows и macOS позволяет создавать собственные классические приложения с помощью JavaScript, которые выполняются на различных настольных компьютерах, ноутбуках, планшетах, устройствах Xbox и смешанной реальности. Он поддерживает как Windows SDK, так и macOS SDK.
Собственные мобильные приложения. React Native — это кросс-платформенное средство для создания приложений Android и iOS с помощью JavaScript, которые передают данные для отрисовки в собственный код пользовательского интерфейса платформы. React Native можно установить двумя способами: с помощью Expo CLI или React Native CLI. Вы можете изучить подробное сравнение двух этих средств на StackOverflow. Expo предоставляет клиентское приложение для мобильных устройств iOS и Android, позволяющее запускать и тестировать приложения. Инструкции по разработке приложения Android с помощью Windows, React Native и Expo CLI см. в статье React Native для разработки приложений Android в Windows.
Варианты установки
Существует несколько разных способов для установки React вместе с интегрированной цепочкой инструментов, лучше всего подходящими для вашего сценария использования. Ниже приведены самые популярные из них.
Средства React
Хотя написание простого компонента React в редакторе обычного текста — это хороший способ начать изучение React, созданный таким способом код будет громоздким и медленным, а также сложным в обслуживании и развертывании. Приложения в рабочей среде должны выполнять некоторые распространенные задачи. Такие задачи обрабатываются другими платформами JavaScript, которые принимаются приложением как зависимость. Ниже перечислены эти задачи.
В целом набор платформ, которые помогают создавать, компилировать и развертывать приложение, называются цепочкой инструментов. create-react-app — это удобная цепочка инструментов, позволяющая создать простое одностраничное приложение. Единственной средой, требующей использования create-react-app, является Node.js.
Каталог компонентов React Native
Ниже приведены компоненты, которые можно использовать в приложении React Native:
Каталог React Native предоставляет список библиотек компонентов, который можно отфильтровать по целевой платформе.
Варианты цепочки инструментов Fullstack React
React — это библиотека, а не платформа, поэтому для создания более сложных приложений могут потребоваться дополнительные инструменты. Вместе с React вы можете использовать такие средства:
Курсы и учебники по React
Ниже приведены некоторые рекомендуемые ресурсы для изучения React и создания примеров приложений:
Установка React напрямую в Windows
В этом руководстве описывается, как напрямую установить React в Windows с помощью цепочки инструментов create-react-app.
Мы рекомендуем следовать этим инструкциям, если вы не знакомы с React. Если вы создаете одностраничное приложение (SPA), которое должно использовать команды или средства Bash, или планируете развертывание на сервере Linux, мы рекомендуем установить create-react-app в подсистеме Windows для Linux (WSL).
Дополнительные сведения о React, выборе между React (веб-приложения), React Native (мобильные приложения) и React Native для Windows (классические приложения) см. в статье Общие сведения о React.
Предварительные требования
Создание приложения React
Чтобы установить всю цепочку инструментов React в WSL, мы рекомендуем использовать create-react-app:
Откройте окно терминала (командная строка Windows или PowerShell).
Установите React с помощью средства create-react-app, которое устанавливает все зависимости для создания и запуска полноценного приложения React.js:
npx — это средство запуска пакетов, используемое npm для выполнения пакетов без глобальной установки. Оно по сути создает временную установку React, чтобы в каждом новом проекте использовалась последняя версия React (а не текущая версия, как при глобальной установке). Использование средства запуска пакетов npx для выполнения пакета также минимизирует вероятность установки нескольких пакетов на компьютере.
Запустите новое приложение React:
Эта команда запустит сервер Node.js и откроет новое окно браузера с приложением. Вы можете использовать клавиши CTRL+С, чтобы прерывать выполнение приложения React в командной строке.
Create React App включает в себя конвейер сборки интерфейсной части с использованием Babel и webpack, но не работает с серверной логикой или базами данных. Если вы хотите создать веб-сайт, поддерживающий отрисовку на сервере, с помощью React и серверной части Node.js, рекомендуем установить Next.js вместо средства create-react-app, которое в большей мере предназначено для одностраничных приложений. Вы также можете установить Gatsby, если хотите создать статический веб-сайт, ориентированный на содержимое.
Пишем полноценное приложение на React с нуля за час
Авторизуйтесь
Пишем полноценное приложение на React с нуля за час
В этой статье вы познакомитесь с React — библиотекой для создания пользовательских интерфейсов. React появился в 2013 году и достаточно быстро стал популярным среди разработчиков. Сегодня в работе над веб-приложениями его используют Facebook, Instagram, Trello, AirBnb, PayPal. С помощью этой статьи мы сможем написать приложение прогноза погоды: от установки с помощью create-react-app (проект на GitHub) до подключения API и стилей bootswatch.
Прим. перев. Если вы начинаете изучение React, вам также стоит прочитать наш материал, в котором разработчик делится советами по использованию этой библиотеки.
Этот материал был написан для воркшопа Open Source Dev Garage, прошедшего в рамках конференции разработчиков F8 2017. Чтобы лучше разобраться в том, как написать это приложение, посмотрите 48-минутное видео или следуйте письменным инструкциям в этом руководстве.
Просмотрев семинар или изучив руководство, вы создадите простое приложение прогноза погоды:
Создайте ваше первое приложение
Прежде всего вам понадобится node.js и редактор кода, например, Atom.
Откроем терминал и установим create-react-app :
Начнем создавать наше приложение прогноза погоды:
Данной командой мы установим набор инструментов, которые помогут создать наше React-приложение. По завершении установки мы сможем запустить приложение командами:
Новое приложение автоматически откроется в браузере!
Свойства и компоненты
Давайте взглянем на приложение, которое create-react-app создал автоматически. В редакторе кода откроем weather/src/App.js :
Наше приложение состоит из одного компонента, где функция render() является его главной составляющей. Напишите какой-нибудь текст, сохраните изменения и посмотрите, как приложение автоматически применит их!
17 ноября, Онлайн, Беcплатно
Где-нибудь в начале файла добавим несколько городов, для которых мы хотели бы отобразить погоду:
Из массива данных мы создадим набор элементов button и назначим свойство key для каждого, чтобы React знал последовательность элементов в массиве.
На этом этапе файл App.js должен выглядеть так.
Состояние
Применим this.state и this.setState в нашем компоненте App :
На этом этапе файл App.js должен выглядеть так.
Жизненный цикл компонентов и выборка данных
Иногда нам нужно добавить императивный код (React-код обычно декларативен), который вызывается в определенное время жизни компонента. Методы жизненного цикла позволяют нам написать дополнительный код как раз для таких случаев.
Улучшим вывод render() для красивого вывода данных:
На этом этапе файл App.js должен выглядеть так.
Установка компонентов
Импортируем стили из bootstrap в начале файла:
Далее импортируем из react-bootstrap компоненты, которые мы хотим использовать. Их можно найти на сайте react-bootstrap:
Теперь наше приложение выглядит привлекательнее, но будет здорово, если мы добавим что-то от себя. Для этого установим bootswatch :
Окончательный вид нашего приложения:
Развертывание (дополнительный материал)
Прежде всего опубликуйте ваш код на Github, затем перейдите в ваш репозиторий и откройте файл ReadMe, в котором вы найдете инструкцию по развертыванию приложения на различных популярных сервисах.
Одним из таких сервисов является Netlify, особенно в случае, когда вы хотите использовать механизм «непрерывного развертывания».