Приветствую, Хабр.

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



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

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

Предыстория

Немного о том, почему и как появился этот проект.

По случайному совпадению я познакомился с такой замечательной технологией как Electron прямо перед началом репрессий и блокировок Telegram в России. Бессмысленный и беспощадный Роскомнадзор и Кровавая гэбня — кто все эти люди? Здесь, на Хабре, я видел многочисленные статьи о поднятии собственных VPN и прокси серверов на фоне всей этой битвы за сеть. Это не давало мне покоя: интернет — часть моей жизни, и когда за интернетом пришли, я не мог бездействовать. Я должен был поучаствовать в сопротивлении за свободный интернет.

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

Поэтому и появился проект JS.VPN-Client. 04.05.2018
В прошлый раз история с Electron закончилась на разработке одного приложения, так что я остался знаком с этой технологией лишь немногим ближе, чем с написанием статей. Я не стал разбираться и углубляться в разработку десктопных приложений, а проблема в железе отягощала разработку, делая ее невыносимой. Впрочем, возможно у меня просто не было адекватного взгляда на Electron в тот момент. Одним словом, было не особенно интересно.

Постистория

В общем, с Electron я больше никак не имел и даже не собирался иметь дела. Однако 26 октября 2018 года я вспомнил про один из своих давних проектов, который периодически запускаю, с явную грустью вспоминая о том, как же беспорядочно организован код программы.

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

Спустя неделю или две я полностью переписал приложение, и даже пришел к очень интересному способу внутренней организации кода. Такие технологии как Electron и Puppetter обладают весьма специфичной архитектурой: на мой взгляд, в первый раз прикоснувшись к Electron не просто представить разработку даже небольшого приложения, не смотря на (не)множество обучающих материалов. Но я готов представить инструкцию по разработке Electron приложений, — пусть и нетщательно откатанную, но уже позволяющую создать такое приложение как JS.VPN-Client.

Разработка

Конечно, так системно к разработке своих проектов, как описано в этой статье, я не подхожу (или подхожу, но совсем редко), но так как я хочу ввести читателя в курс дела, то буду дополнительно пояснять всякие спорные на мой взгляд моменты. То, что я оставлю без пояснения, должно быть очевидным для JavaScript разработчика или не должно быть понятным совсем.

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



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

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

VPN и Безопасность

Моему VPN клиенту нужны конфиги, но так как я не держатель серверов в своем приложении, я использую исключительно публичные VPN сервера с поддержкой OpenVPN. Их я получаю из API этого сайта VPN Gate — Public Free VPN
Утверждать, что это лучший способ, не буду, потому что недостаточно компетентен в вопросе безопасности. В любом случае, структура приложения достаточно гибкая, чтобы переделать «под себя» и использовать лучший способ получения защищенных серверов.

2 часть — Разработка