Создание приложения Electron 7 React в 2019 году для банка-претендента Revolut

Живя в Великобритании, почти невозможно не поддаться искушению попробовать новые банки-претенденты, такие как Revolut, Starling и Monzo. В настоящее время я использую Revolut в качестве основного банковского счета и почувствовал необходимость получить к нему доступ со своего компьютера.

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

Я быстро обнаружил, что не могу использовать их API в браузере, предварительные запросы были заблокированы из-за отсутствия заголовков CORS.
Итак, я начал смотреть на ElectronJS, делая запросы с помощью NodeJS и связывая результаты с помощью механизма Electron IPC. .

Это было слишком громоздко, поэтому я начал проверять другой способ выполнения HTTP-запросов со стороны рендерера, не подчиняясь CORS. Один из способов - отключить веб-безопасность в флагах Chrome, но, поскольку приложение будет иметь доступ к моему банку, это было бы не лучшим решением, поэтому я решил включить интеграцию узлов и использовал Axios с http-адаптером узла. Он работает без проблем, хотя больше не может видеть запросы в инструментах разработки.

По соображениям безопасности я хотел использовать закрепление сертификата SSL, но оказалось, что Axios не предоставляет эту опцию из коробки, поэтому я отправил PR, чтобы добавить его, таким образом, NodeJS отклоняет HTTP-запросы, если отпечаток сертификата не сопоставьте наш закрепленный отпечаток пальца, предотвращая подслушивание прокси.

Вторая проблема, с которой я столкнулся, заключалась в том, что список моих транзакций был большим, содержал более 2000 элементов (эй, пожалуйста, не судите: p)

React требовал много времени для рендеринга всего сразу.
Я не хотел использовать react-virtualized, в основном потому, что у меня был плохой опыт его использования в прошлом, и он нарушал поиск текста в dom, поэтому Я решил вручную отложить рендеринг элементов в списке с помощью хука реакции, а для уменьшения объема памяти и повышения производительности прокрутки я решил использовать WebComponent `‹virtual-scroller›`, поскольку Electron дает нам возможность включить экспериментальное мигание флаги. Основным недостатком использования этого WebComponent является то, что элементы списка должны быть `display: block`, и, поскольку я большой поклонник` display: flex` повсюду, мне пришлось снова стилизовать старомодный стиль ...

Для навигации я решил не использовать response-router, так как это довольно простое приложение. Electron все равно не показывает URL, поэтому мне не придется иметь дело с маршрутами. Вместо этого я использовал комбинацию localStorage и React Context API и остался доволен результатом.
Для анимации я использовал React-Lottie, чтобы получить легкую анимацию JS / SVG с высокой частотой кадров.
Большинство приложения были созданы с помощью React с использованием стилизованных компонентов.
Для рендеринга карточек мне пришлось разместить текстовые элементы в блоке div с закругленными углами и выбрать тот же шрифт, что и для кредитных карт: OCRA10. Конечный результат довольно близок к тому, что отображает мобильное приложение.

Спасибо, что прочитали путешествие по этому небольшому приложению, обязательно загляните в репозиторий.